.icon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex: 0 0 auto;
}

/* Logo no NAV: não deixa empurrar a barra */
.img-logo {
    height: 100% !important;
    /* ocupa a altura do container */
    max-height: 48px !important;
    /* limita dentro do nav (h-16 = 64px) */
    width: auto !important;
    display: block;
    object-fit: contain !important;
}

.app-main {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.app-main * {
    max-width: 100%;
}

.help-copy {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgb(100 116 139);
}

.help-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
}

.icon circle,
line,
path {
    color: rgb(0, 0, 0);
}

.help-btn:hover {
    background: rgb(241 245 249);
}



.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(203 213 225);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.dark .mobile-bottom-nav {
    background: rgba(15, 17, 21, 0.96);
    border-top-color: rgb(61 68 80);
}

.mobile-bottom-nav__item {
    min-height: 56px;
    border-radius: 14px;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgb(71 85 105);
}

.mobile-bottom-nav__item.is-active {
    background: rgba(11, 87, 208, 0.12);
    color: rgb(11 87 208);
    font-weight: 600;
}

.dark .mobile-bottom-nav__item {
    color: rgb(148 163 184);
}

.dark .mobile-bottom-nav__item.is-active {
    color: rgb(171 199 255);
    background: rgba(171, 199, 255, 0.2);
}

.app-calendar-shell {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.app-calendar-shell .grid {
    min-width: 0;
}

.emp-chip {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgb(203 213 225);
    font-size: 0.75rem;
    line-height: 1.2;
    background: rgb(255, 255, 255);
    white-space: nowrap;
    color: #171b22 !important;
    /* text-transform: uppercase; */
    cursor: pointer;
    transition: all 0.18s ease;
}

.emp-chip:hover {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.emp-chip.is-active {
    border-color: rgb(37 99 235);
    background: rgb(219 234 254);
    color: rgb(30 64 175) !important;
    font-weight: 700;
}

.emp-chip--off {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.emp-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgb(203 213 225);
    margin-right: 4px;
    margin-top: 2px;
    background: rgb(248 250 252);
    color: rgb(30 41 59);
    font-weight: 600;
    transition: all 0.18s ease;
}

.emp-token--work {
    background: rgb(219 234 254);
    border-color: rgb(147 197 253);
    color: rgb(30 64 175);
}

.emp-token--off {
    background: rgb(241 245 249);
    border-color: rgb(203 213 225);
    color: rgb(71 85 105);
}

.emp-token--empty {
    background: rgb(248 250 252);
    color: rgb(148 163 184);
}

.emp-token.emp-highlight-work {
    background: rgb(29 78 216);
    color: rgb(255 255 255);
    border: 2px solid rgb(30 64 175);
    transform: translateY(-1px);
}

.emp-token.emp-highlight-off {
    background: rgb(219 234 254);
    color: rgb(29 78 216);
    border: 2px dotted rgb(37 99 235);
}

.emp-token.emp-muted {
    opacity: 0.35;
}

.dark .emp-chip.is-active {
    background: rgb(30 58 138);
    color: rgb(191 219 254) !important;
    border-color: rgb(96 165 250);
}

.dark .emp-token {
    border-color: rgb(71 85 105);
    background: rgb(30 41 59);
    color: rgb(226 232 240);
}

.dark .emp-token--work {
    background: rgb(30 64 175);
    border-color: rgb(59 130 246);
    color: rgb(219 234 254);
}

.dark .emp-token--off {
    background: rgb(51 65 85);
    border-color: rgb(100 116 139);
    color: rgb(203 213 225);
}

.dark .emp-token.emp-highlight-work {
    background: rgb(59 130 246);
    border-color: rgb(147 197 253);
    color: rgb(15 23 42);
}

.dark .emp-token.emp-highlight-off {
    background: rgb(30 58 138);
    border-color: rgb(147 197 253);
    color: rgb(191 219 254);
}

.help-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
}

.help-sheet.is-open {
    display: block;
}

.help-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.help-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78vh, 620px);
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    background: #fff;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.22);
}

.dark .help-sheet__panel {
    background: #171b22;
}

.help-sheet__title {
    font-weight: 700;
    margin-bottom: 8px;
}

.help-sheet__close {
    min-height: 44px;
}

.data-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
}

.data-feedback--loading {
    border-color: rgb(186 230 253);
    background: rgb(240 249 255);
    color: rgb(3 105 161);
}

.data-feedback--error {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
    color: rgb(153 27 27);
}

.dark .data-feedback {
    border-color: rgb(61 68 80);
    background: rgb(23 27 34);
}

.dark .data-feedback--loading {
    border-color: rgb(7 89 133);
    background: rgb(8 47 73);
    color: rgb(186 230 253);
}

.dark .data-feedback--error {
    border-color: rgb(127 29 29);
    background: rgb(69 10 10);
    color: rgb(254 202 202);
}

.loader-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: feedback-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

.calendar-month-shell {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}

.monthly-matrix>.grid.grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.monthly-matrix>.grid.grid-cols-7>div {
    text-align: center;
    font-weight: 600;
}

.monthly-matrix .cal-cell {
    width: 100%;
    height: auto;
    min-height: 44px;
    aspect-ratio: 1 / 1;
    font-size: 13px;
}

.cal-cell.range-start,
.cal-cell.range-end,
.cal-cell.range-single {
    border: 2px solid rgb(30 64 175);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.cal-cell.in-range {
    background: rgb(219 234 254);
    border: 1px solid rgb(147 197 253);
}

.cal-cell.selected {
    background: rgb(29 78 216);
    color: rgb(255 255 255);
    border: 2px solid rgb(30 64 175);
    font-weight: 700;
}

.cal-cell.interactive:focus-visible {
    outline: 2px solid rgb(37 99 235);
    outline-offset: 1px;
}

.dark .cal-cell.range-start,
.dark .cal-cell.range-end,
.dark .cal-cell.range-single {
    border-color: rgb(147 197 253);
}

.dark .cal-cell.in-range {
    background: rgb(30 58 138);
    border-color: rgb(96 165 250);
}

.dark .cal-cell.selected {
    background: rgb(96 165 250);
    color: rgb(15 23 42);
    border-color: rgb(147 197 253);
}

@media (min-width: 768px) {

    .calendar-month-shell {
        padding: 32px;
    }

    .monthly-matrix>.grid.grid-cols-7 {
        gap: 8px;
    }
}

@media (max-width: 479px) {
    .monthly-matrix .cal-cell {
        font-size: 12px;
    }
}

.consent-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgb(203 213 225);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.consent-banner__text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgb(51 65 85);
}

.consent-banner__link {
    color: rgb(29 78 216);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .consent-banner {
    border-color: rgb(71 85 105);
    background: rgba(15, 23, 42, 0.96);
}

.dark .consent-banner__text {
    color: rgb(203 213 225);
}

.dark .consent-banner__link {
    color: rgb(147 197 253);
}

@keyframes feedback-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .app-main {
        padding-bottom: 24px;
    }

    .mobile-bottom-nav {
        display: none;
    }

    .consent-banner {
        left: 24px;
        right: 24px;
        bottom: 20px;
        max-width: 860px;
        margin: 0 auto;
    }

    .help-sheet__panel {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(560px, calc(100% - 32px));
        max-height: min(70vh, 620px);
        border-radius: 18px;
        padding: 18px;
    }
}