:root {
    --green-950: #07140e;
    --green-900: #0b2b1c;
    --green-800: #103824;
    --green-700: #16462f;
    --green-100: #e7f0ea;
    --gold: #e0b13b;
    --gold-strong: #c99721;
    --cream: #f4f4f0;
    --paper: #ffffff;
    --ink: #111827;
    --muted: #667085;
    --line: rgba(17, 24, 39, 0.12);
    --danger: #a83232;
    --shadow: 0 18px 45px rgba(7, 28, 18, 0.14);
    --soft-shadow: 0 10px 24px rgba(17, 24, 39, 0.07);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

html,
body {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cream);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 18% 12%, rgba(224, 177, 59, 0.24), transparent 30%),
        linear-gradient(135deg, var(--green-900), var(--green-950));
}

.auth-shell {
    width: min(460px, 100%);
}

.login-panel,
.error-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(224, 177, 59, 0.22);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.brand-block {
    text-align: center;
    margin-bottom: 24px;
}

.brand-block p,
.brand-block span {
    color: var(--muted);
    margin: 6px 0;
}

.brand-block h1 {
    margin: 10px 0 0;
    color: var(--green-900);
}

.logo-mark {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold), #f5df75);
    color: var(--green-900);
    font-weight: 900;
    border: 4px solid rgba(11, 43, 28, 0.25);
}

.logo-mark.small {
    width: 42px;
    height: 42px;
    border-width: 2px;
    font-size: 14px;
    flex: 0 0 auto;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form.is-hidden {
    display: none;
}

.login-form label {
    display: grid;
    gap: 7px;
    color: var(--green-900);
    font-weight: 800;
}

.login-form input {
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 14px;
}

.login-form .login-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.login-form .login-checkbox input {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    accent-color: var(--green-900);
}

.login-form button,
.quick-actions a,
.error-card a {
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    background: var(--green-900);
    color: white;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.quick-login-card {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(224, 177, 59, 0.35);
    border-radius: 16px;
    background: #fffaf0;
    text-align: center;
}

.quick-login-card span,
.quick-login-card small {
    color: var(--muted);
    font-size: 13px;
}

.quick-login-card strong {
    color: var(--green-900);
    font-size: 22px;
}

.quick-login-form button {
    min-height: 54px;
}

.login-secondary-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green-900);
    font-weight: 900;
}

.demo-note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.alert {
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-weight: 800;
}

.alert-dismissible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.alert-dismissible button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: currentColor;
    cursor: pointer;
    font-weight: 900;
}

.alert-dismissible.is-hiding {
    opacity: 0;
    transform: translateY(-4px);
}

.alert-error {
    background: #ffe4e4;
    color: var(--danger);
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

.app-body {
    min-height: 100vh;
}

.desktop-manager {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    background: linear-gradient(180deg, #f7f7f4, #eceee8);
}

.sidebar {
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(224, 177, 59, 0.08), transparent 28%),
        var(--green-900);
    color: white;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 0 18px;
    color: var(--gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand strong {
    color: white;
    font-size: 19px;
}

.sidebar-brand span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.sidebar nav {
    display: grid;
    gap: 6px;
    overflow-y: auto;
    padding-right: 4px;
}

.sidebar-section-title {
    display: block;
    margin: 10px 8px 2px;
    color: rgba(224, 177, 59, 0.82);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sidebar nav a {
    min-height: 40px;
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar nav a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
}

.sidebar nav a:hover,
.sidebar nav a.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar nav a.is-active::after {
    background: var(--gold);
}

.desktop-main {
    min-width: 0;
}

.topbar {
    min-height: 72px;
    padding: 14px 26px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
}

.topbar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-brand strong,
.topbar-brand span {
    display: block;
}

.topbar-brand strong {
    color: var(--green-900);
}

.topbar-brand span,
.topbar-user {
    color: var(--muted);
    font-size: 13px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.topbar-user a {
    color: var(--green-900);
    font-weight: 900;
}

.content-shell {
    width: min(1220px, 100%);
    margin: 0 auto;
    padding: 26px;
}

.page-head {
    background:
        linear-gradient(135deg, rgba(224, 177, 59, 0.16), transparent 44%),
        linear-gradient(135deg, var(--green-900), var(--green-700));
    color: white;
    border-radius: 26px;
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    box-shadow: var(--shadow);
}

.page-head h1 {
    margin: 4px 0;
    font-size: 34px;
    letter-spacing: 0;
}

.page-head span {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
}

.eyebrow {
    margin: 0;
    color: #f5df75;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
}

.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quick-actions a {
    min-height: 42px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    gap: 20px;
    margin-top: 22px;
    align-items: start;
}

.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 20px;
}

.module-section,
.action-panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--soft-shadow);
}

.module-section h2,
.action-panel h2 {
    margin: 0 0 13px;
    color: var(--green-900);
    font-size: 18px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.desktop-manager .module-section:first-child .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
    min-height: 118px;
    background: var(--paper);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
}

.metric-card strong {
    display: block;
    color: var(--green-900);
    font-size: 25px;
    line-height: 1.05;
}

.metric-card small {
    color: var(--muted);
    font-weight: 800;
}

.metric-card.is-gold {
    background: linear-gradient(135deg, #fff7d9, #ffffff);
    border-color: rgba(224, 177, 59, 0.45);
}

.action-list,
.module-list {
    display: grid;
    gap: 9px;
}

.action-list a,
.module-list span {
    min-height: 46px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--green-900);
}

.action-list a::after {
    content: ">";
    color: var(--gold-strong);
}

.status-row {
    display: grid;
    gap: 10px;
}

.status-pill {
    background: var(--green-100);
    color: var(--green-900);
    border-radius: 14px;
    padding: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-pill.warning {
    background: #fff2cc;
}

.mobile-manager,
.mobile-staff {
    background: #f6f6f1;
    padding-bottom: 86px;
}

.mobile-manager .topbar,
.mobile-staff .topbar {
    min-height: 58px;
    padding: 9px 12px;
    border-bottom: 0;
    background: var(--green-900);
    color: white;
    position: sticky;
    top: 0;
}

.mobile-manager .topbar-brand strong,
.mobile-staff .topbar-brand strong {
    color: white;
    font-size: 15px;
}

.mobile-manager .topbar-brand span,
.mobile-staff .topbar-brand span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
}

.mobile-manager .logo-mark.small,
.mobile-staff .logo-mark.small {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.mobile-manager .topbar-user,
.mobile-staff .topbar-user {
    color: rgba(255, 255, 255, 0.72);
}

.mobile-manager .topbar-user a,
.mobile-staff .topbar-user a {
    color: var(--gold);
}

.mobile-content {
    width: 100%;
    max-width: 520px;
    padding: 14px 12px 96px;
}

.mobile-manager .page-head,
.mobile-staff .page-head {
    border-radius: 20px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    box-shadow: 0 12px 26px rgba(7, 28, 18, 0.16);
}

.mobile-manager .page-head h1,
.mobile-staff .page-head h1 {
    font-size: 24px;
}

.mobile-manager .quick-actions,
.mobile-staff .quick-actions {
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-manager .quick-actions a,
.mobile-staff .quick-actions a {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
}

.mobile-manager .dashboard-grid,
.mobile-staff .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

.mobile-manager .dashboard-main,
.mobile-manager .dashboard-side,
.mobile-staff .dashboard-main,
.mobile-staff .dashboard-side {
    gap: 14px;
}

.mobile-manager .module-section,
.mobile-manager .action-panel,
.mobile-staff .module-section,
.mobile-staff .action-panel {
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
}

.mobile-manager .card-grid,
.mobile-staff .card-grid,
.mobile-manager .module-section:first-child .card-grid,
.mobile-staff .module-section:first-child .card-grid {
    grid-template-columns: 1fr;
    gap: 9px;
}

.mobile-manager .metric-card,
.mobile-staff .metric-card {
    min-height: auto;
    border-radius: 15px;
    padding: 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.mobile-manager .metric-card strong,
.mobile-staff .metric-card strong {
    font-size: 21px;
    text-align: right;
}

.mobile-manager .metric-card small,
.mobile-staff .metric-card small {
    grid-column: 1 / -1;
}

.mobile-staff .manager-only {
    display: none;
}

.bottom-nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 66px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    background: rgba(11, 43, 28, 0.98);
    padding: 7px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    z-index: 20;
}

.bottom-nav a,
.bottom-nav button {
    border: 0;
    background: transparent;
    color: white;
    min-width: 0;
    min-height: 48px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.05;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 4px;
}

.bottom-nav a:first-child {
    background: var(--gold);
    color: var(--green-900);
}

.more-sheet {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 82px;
    z-index: 19;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: min(68vh, 560px);
    overflow-y: auto;
}

.more-sheet[hidden] {
    display: none;
}

.more-sheet a {
    background: var(--cream);
    border-radius: 12px;
    min-height: 40px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.more-sheet-group {
    grid-column: 1 / -1;
    margin: 5px 4px 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .desktop-manager .bottom-nav,
    .desktop-manager .more-sheet {
        display: none;
    }
}

@media (max-width: 1023px) {
    .desktop-manager {
        display: block;
    }

    .desktop-manager .sidebar {
        display: none;
    }

    .desktop-manager .content-shell {
        padding: 18px;
    }

    .desktop-manager .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .desktop-manager .card-grid,
    .desktop-manager .module-section:first-child .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .desktop-manager .content-shell {
        padding: 14px 12px 24px;
    }

    .desktop-manager .page-head {
        grid-template-columns: 1fr;
    }

    .desktop-manager .card-grid,
    .desktop-manager .module-section:first-child .card-grid {
        grid-template-columns: 1fr;
    }
}

/* V2 visual sketch refinements */
.desktop-manager .content-shell {
    max-width: 1260px;
}

.desktop-manager .page-head {
    min-height: 138px;
    border-radius: 18px;
    padding: 24px 28px;
}

.desktop-manager .page-head h1 {
    font-size: 28px;
}

.date-chip {
    min-width: 176px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--green-900);
    border-radius: 14px;
    padding: 12px 14px;
    text-align: right;
    box-shadow: 0 8px 22px rgba(7, 28, 18, 0.12);
}

.date-chip span,
.date-chip strong {
    display: block;
}

.date-chip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.date-chip strong {
    margin-top: 3px;
    font-size: 16px;
}

.quick-strip,
.panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--soft-shadow);
    padding: 16px;
}

.quick-strip {
    margin-top: 16px;
}

.quick-strip h2,
.panel h2 {
    margin: 0 0 12px;
    color: var(--green-900);
    font-size: 16px;
}

.quick-strip-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.quick-strip-grid a {
    min-height: 50px;
    border-radius: 12px;
    background: var(--green-900);
    color: white;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 8px 18px rgba(11, 43, 28, 0.16);
}

.quick-strip-grid a:first-child {
    background: var(--gold);
    color: var(--green-900);
}

.desktop-manager .dashboard-grid {
    grid-template-columns: minmax(0, 1.45fr) 340px;
    gap: 16px;
    margin-top: 16px;
}

.desktop-manager .dashboard-main {
    gap: 14px;
}

.desktop-manager .module-section {
    border-radius: 18px;
    padding: 16px;
}

.desktop-manager .card-grid,
.desktop-manager .module-section:first-child .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.desktop-manager .metric-card {
    min-height: 106px;
    border-radius: 14px;
    padding: 14px;
}

.desktop-manager .metric-card strong {
    font-size: 22px;
}

.task-list {
    display: grid;
    gap: 8px;
}

.task-list a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--line);
    padding: 10px 12px;
    color: var(--green-900);
    font-weight: 850;
}

.task-list a::after {
    content: ">";
    color: var(--gold-strong);
    font-weight: 900;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-cloud span {
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
    padding: 7px 9px;
}

.status-stack {
    display: grid;
    gap: 9px;
}

.mobile-tools {
    display: none;
}

.mobile-staff .manager-only {
    display: none !important;
}

@media (max-width: 1023px) {
    .quick-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desktop-manager .card-grid,
    .desktop-manager .module-section:first-child .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mobile-manager,
    .mobile-staff {
        background:
            linear-gradient(180deg, var(--green-900) 0, var(--green-900) 82px, #f6f6f1 82px),
            #f6f6f1;
    }

    .mobile-manager .content-shell,
    .mobile-staff .content-shell {
        margin: 0 auto;
        max-width: 430px;
        padding: 12px 12px 94px;
    }

    .mobile-manager .page-head,
    .mobile-staff .page-head {
        min-height: auto;
        border-radius: 18px;
        padding: 14px;
        background: white;
        color: var(--green-900);
        box-shadow: 0 12px 24px rgba(7, 28, 18, 0.16);
    }

    .mobile-manager .page-head h1,
    .mobile-staff .page-head h1 {
        font-size: 17px;
        margin: 3px 0;
    }

    .mobile-manager .page-head span,
    .mobile-staff .page-head span {
        color: var(--muted);
        font-size: 12px;
    }

    .mobile-manager .eyebrow,
    .mobile-staff .eyebrow {
        color: var(--gold-strong);
        font-size: 10px;
    }

    .mobile-manager .date-chip,
    .mobile-staff .date-chip,
    .mobile-manager .quick-strip,
    .mobile-staff .quick-strip {
        display: none;
    }

    .mobile-tools {
        display: block;
        margin-top: 12px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
    }

    .mobile-tools h2 {
        margin: 0;
        color: var(--green-900);
        font-size: 15px;
    }

    .mobile-tools-subtitle {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
    }

    .mobile-tools-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-tools-grid a {
        min-height: 74px;
        border-radius: 13px;
        border: 1px solid var(--line);
        background: #fffdf7;
        color: var(--green-900);
        display: grid;
        place-items: center;
        gap: 6px;
        padding: 8px 5px;
        text-align: center;
        font-size: 11px;
        font-weight: 900;
    }

    .tool-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px;
        border: 2px solid var(--green-900);
        position: relative;
    }

    .tool-icon::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 9px;
        height: 9px;
        border-radius: 3px;
        background: var(--gold);
    }

    .mobile-manager-title {
        display: block;
    }

    .mobile-staff-title {
        display: none;
    }

    .mobile-staff .mobile-manager-title {
        display: none;
    }

    .mobile-staff .mobile-staff-title {
        display: block;
    }

    .mobile-manager .dashboard-grid,
    .mobile-staff .dashboard-grid {
        margin-top: 12px;
    }

    .mobile-manager .dashboard-main,
    .mobile-staff .dashboard-main {
        order: 2;
    }

    .mobile-manager .dashboard-side,
    .mobile-staff .dashboard-side {
        order: 1;
    }

    .mobile-manager .module-section,
    .mobile-staff .module-section,
    .mobile-manager .dashboard-side .panel,
    .mobile-staff .dashboard-side .panel {
        border-radius: 18px;
        padding: 14px;
    }

    .mobile-manager .card-grid,
    .mobile-staff .card-grid,
    .mobile-manager .module-section:first-child .card-grid,
    .mobile-staff .module-section:first-child .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-manager .metric-card,
    .mobile-staff .metric-card {
        min-height: 98px;
        display: flex;
        align-items: flex-start;
        text-align: left;
    }

    .mobile-manager .metric-card strong,
    .mobile-staff .metric-card strong {
        text-align: left;
        font-size: 18px;
    }

    .mobile-staff .dashboard-main {
        display: none;
    }

    .bottom-nav {
        height: 64px;
        border-radius: 16px;
        padding: 6px;
    }
}

/* Reference mockup alignment - final V2 visual layer */
body {
    background:
        radial-gradient(circle at 50% -80px, rgba(224, 177, 59, 0.12), transparent 360px),
        #f8f6ef;
}

.logo-mark {
    background: #092818;
    color: var(--gold);
    border: 2px solid var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    position: relative;
}

.logo-mark::before,
.logo-mark::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(224, 177, 59, 0.5);
    border-radius: inherit;
}

.auth-body {
    background:
        radial-gradient(circle at 50% 0, rgba(224, 177, 59, 0.22), transparent 340px),
        linear-gradient(180deg, #fffdf6 0, #f4f1e8 100%);
}

.login-panel {
    border-radius: 26px;
    border-color: rgba(224, 177, 59, 0.34);
}

.desktop-manager {
    grid-template-columns: 244px minmax(0, 1fr);
    background: #f8f6ef;
}

.sidebar {
    margin: 20px 0 20px 20px;
    height: calc(100vh - 40px);
    border-radius: 22px;
    padding: 20px 14px;
    background:
        radial-gradient(circle at 20% 12%, rgba(224, 177, 59, 0.14), transparent 120px),
        linear-gradient(180deg, #003d25 0%, #002817 100%);
    box-shadow: 0 24px 55px rgba(0, 37, 22, 0.28);
}

.sidebar-brand {
    border: 0;
    gap: 6px;
    padding: 4px 8px 20px;
}

.sidebar-brand .logo-mark {
    width: 58px;
    height: 58px;
}

.sidebar-brand strong {
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1;
}

.sidebar-brand span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
}

.sidebar nav {
    gap: 6px;
}

.sidebar nav a {
    min-height: 38px;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 13px;
}

.sidebar nav a::after {
    display: none;
}

.sidebar nav a.is-active,
.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.13);
}

.side-icon,
.mini-icon,
.phone-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid currentColor;
    position: relative;
    flex: 0 0 auto;
}

.side-icon::after,
.mini-icon::after,
.phone-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 3px;
    background: var(--gold);
    right: -3px;
    bottom: -3px;
}

.sidebar-user-card {
    margin-top: auto;
    min-height: 58px;
    border-radius: 14px;
    border: 1px solid rgba(224, 177, 59, 0.28);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
}

.avatar-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
}

.sidebar-user-card strong,
.sidebar-user-card span {
    display: block;
}

.sidebar-user-card strong {
    font-size: 12px;
}

.sidebar-user-card span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.desktop-main {
    padding: 20px;
}

.desktop-manager .topbar {
    min-height: 0;
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    border: 0;
    position: static;
}

.desktop-manager .topbar-brand {
    display: none;
}

.desktop-manager .topbar-user {
    margin-left: auto;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--soft-shadow);
}

.notification-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--gold);
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
}

.desktop-manager .content-shell {
    width: min(1060px, 100%);
    padding: 0;
}

.ref-desktop-head {
    background: white;
    color: var(--green-900);
    min-height: 86px !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    box-shadow: var(--soft-shadow);
    border: 1px solid rgba(11, 43, 28, 0.08);
}

.ref-desktop-head h1 {
    font-size: 22px !important;
    margin: 0 0 5px;
}

.ref-desktop-head span {
    color: var(--muted);
    font-size: 13px;
}

.ref-desktop-head .date-chip {
    min-width: 150px;
    box-shadow: none;
    border: 1px solid var(--line);
}

.quick-strip {
    background: white;
    border-radius: 16px;
    padding: 16px;
}

.quick-strip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-strip-grid a {
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 10px;
}

.desktop-dashboard {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

.dashboard-area {
    display: grid;
    gap: 10px;
}

.dashboard-area-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-area-head h2 {
    margin: 0;
    color: var(--green-900);
    font-size: 18px;
    line-height: 1.15;
}

.desktop-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.desktop-card-grid .metric-card {
    min-height: 136px;
    border-radius: 13px;
    padding: 15px;
    background: white;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045);
}

.desktop-card-grid .metric-card strong {
    font-size: 25px;
}

.desktop-card-grid .metric-card a {
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
    margin-top: auto;
}

.desktop-card-grid .metric-card em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    margin-top: auto;
}

.desktop-card-grid .metric-card.is-muted {
    background: #f8faf8;
    border: 1px dashed rgba(11, 43, 28, 0.2);
    box-shadow: none;
}

.desktop-card-grid .metric-card.is-muted strong {
    color: var(--muted);
    font-size: 20px;
}

.desktop-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--soft-shadow);
}

.desktop-bottom-grid article {
    padding: 16px;
    border-right: 1px solid rgba(224, 177, 59, 0.28);
}

.desktop-bottom-grid article:last-child {
    border-right: 0;
}

.desktop-bottom-grid span,
.desktop-bottom-grid small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.desktop-bottom-grid strong {
    display: block;
    margin: 6px 0;
    color: var(--green-900);
    font-size: 20px;
}

.brand-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}

.brand-logo-img.small {
    width: 42px;
    height: 42px;
}

.brand-logo-img.login-logo {
    width: 92px;
    height: 92px;
    margin: 0 auto 8px;
}

.td-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -3px;
}

.side-svg {
    width: 17px;
    height: 17px;
}

.phone-svg {
    width: 25px;
    height: 25px;
}

.bottom-nav .td-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 2px;
}

.notification-dot .td-icon {
    width: 15px;
    height: 15px;
}

.quick-btn .td-icon,
.reservas-actions .td-icon {
    width: 17px;
    height: 17px;
}

.reservas-screen {
    width: min(100%, 760px);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.reservas-hero,
.calendar-card,
.selected-day-card,
.reservas-list-card,
.reservation-detail-card {
    background: #fffdf8;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 18px;
    box-shadow: var(--soft-shadow);
}

.reservas-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
}

.reservas-hero h1,
.calendar-card h2,
.selected-day-card h2,
.reservas-list-card h2 {
    margin: 0;
    color: var(--green-900);
}

.reservas-hero h1 {
    font-size: 22px;
}

.reservas-hero span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.reservas-month-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.reservas-month-nav a {
    min-height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(11, 43, 28, 0.12);
    background: #fffdf8;
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--gold-strong);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.reservas-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
    gap: 8px;
    justify-content: start;
}

.reservas-actions a,
.btn-primary,
.btn-gold {
    min-height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(11, 43, 28, 0.12);
    background: #fffdf8;
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.reservas-actions .btn-primary,
.btn-primary {
    background: linear-gradient(135deg, var(--green-900), var(--green-700));
    color: white;
    border-color: rgba(224, 177, 59, 0.22);
}

.btn-gold {
    background: var(--gold);
    color: var(--green-900);
}

.calendar-card {
    padding: 14px;
}

.calendar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.reservas-calendar-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    width: min(100%, 420px);
}

.reservas-calendar-nav h2 {
    text-align: center;
}

.reservas-calendar-nav a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(11, 43, 28, 0.12);
    background: #fffaf1;
    color: var(--green-900);
}

.reservas-calendar-nav .td-icon {
    width: 18px;
    height: 18px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.level-low { background: #d9f2df; }
.level-mid { background: #f7e4a8; }
.level-high { background: #f6c8b8; }

.week-row,
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.week-row {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.day-cell {
    min-height: 72px;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 13px;
    background: #f9faf7;
    color: var(--green-900);
    text-decoration: none;
    text-align: left;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.day-cell.is-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.day-cell.level-low { background: #eef8f0; }
.day-cell.level-mid { background: #fff6d9; }
.day-cell.level-high { background: #fff0e7; }
.day-cell.has-cancelled-only {
    background: #fff8f8;
    border-color: rgba(153, 27, 27, 0.18);
}
.day-cell.is-selected {
    outline: 2px solid var(--gold);
    box-shadow: 0 8px 18px rgba(224, 177, 59, 0.18);
}

.day-cell strong {
    font-size: 14px;
}

.day-cell span {
    font-size: 11px;
    font-weight: 900;
}

.day-cell small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.reservation-day-empty {
    color: var(--muted);
}

.reservation-day-cancelled,
.day-summary .day-summary-cancelled strong {
    color: #991b1b;
}

.selected-day-card {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.day-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 8px;
    min-width: 58%;
}

.day-summary span {
    border-radius: 12px;
    background: #f3f6f1;
    padding: 9px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.day-summary strong {
    display: block;
    color: var(--green-900);
    font-size: 17px;
}

.reservas-list-card {
    padding: 14px;
}

.reservas-list {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.reservation-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 14px;
    background: white;
    padding: 10px;
}

.reservation-empty-item {
    grid-template-columns: 1fr;
    min-height: 0;
    align-items: start;
    padding: 12px;
}

.reservation-empty-item .reservation-main strong {
    font-size: 14px;
}

.reservation-empty-item .reservation-main span {
    margin-top: 3px;
}

.reservation-item.is-selected {
    border-color: rgba(224, 177, 59, 0.9);
    box-shadow: 0 10px 24px rgba(224, 177, 59, 0.16);
}

.reservation-item.is-cancelled {
    background: #fff8f8;
    border-color: rgba(153, 27, 27, 0.14);
}

.reservation-time {
    border-radius: 11px;
    background: var(--green-900);
    color: white;
    padding: 10px 7px;
    text-align: center;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
}

.reservation-main {
    min-width: 0;
}

.reservation-main strong,
.reservation-main span,
.reservation-main em {
    display: block;
}

.reservation-main strong {
    color: var(--green-900);
}

.reservation-main strong a {
    color: inherit;
    text-decoration: none;
}

.reservation-main span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.reservation-main em {
    margin-top: 3px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.status-badge {
    width: max-content;
    border-radius: 999px;
    padding: 3px 8px;
}

.status-confirmada {
    background: #dcfce7;
    color: #166534;
}

.status-chegou {
    background: #dbeafe;
    color: #0f3f6e;
}

.status-concluida {
    background: #ecfdf5;
    color: #047857;
}

.status-cancelada {
    background: #fee2e2;
    color: #991b1b;
}

.status-pendente {
    background: #fff7ed;
    color: #9a3412;
}

.reservation-main small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.reservation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.reservation-actions a,
.reservation-actions button,
.reservation-actions .is-disabled {
    min-height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(11, 43, 28, 0.1);
    background: #f2f5ef;
    color: var(--green-900);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.reservation-actions form {
    margin: 0;
}

.reservation-actions button {
    cursor: pointer;
    font-family: inherit;
}

.reservation-actions .is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.reservation-actions .td-icon {
    width: 15px;
    height: 15px;
}

.reservation-actions .is-danger-action {
    background: #fff0e7;
    border-color: rgba(153, 27, 27, 0.18);
    color: #991b1b;
}

.reservation-detail-card {
    padding: 14px;
}

.reservation-detail-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.reservation-cancelled-section h2 {
    color: #991b1b;
}

.detail-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: start;
}

.detail-card-head .eyebrow {
    grid-column: 1 / -1;
}

.detail-card-head h2 {
    margin: 0;
    color: var(--green-900);
    font-size: 18px;
}

.reservation-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

.reservation-detail-grid div {
    border-radius: 12px;
    background: #f3f6f1;
    padding: 9px;
}

.reservation-detail-grid dt {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.reservation-detail-grid dd {
    margin: 0;
    color: var(--green-900);
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.reservation-detail-notes,
.readonly-note {
    margin: 10px 0 0;
    border-radius: 12px;
    padding: 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.reservation-detail-notes {
    background: #fff7ed;
    color: #7c2d12;
}

.readonly-note {
    background: #eef8f0;
    color: var(--green-900);
}

.mobile-phone-content {
    display: none;
}

.mobile-manager .ref-desktop-only,
.mobile-staff .ref-desktop-only {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-manager,
    .mobile-staff {
        background:
            radial-gradient(circle at 50% -120px, rgba(224, 177, 59, 0.28), transparent 260px),
            linear-gradient(180deg, var(--green-900) 0, var(--green-900) 118px, #f7f4ec 118px);
        padding-bottom: 82px;
    }

    .mobile-manager .topbar,
    .mobile-staff .topbar {
        min-height: 76px;
        padding: 14px 18px 10px;
        align-items: flex-start;
        box-shadow: none;
    }

    .mobile-manager .topbar-brand strong,
    .mobile-staff .topbar-brand strong {
        color: var(--gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
    }

    .mobile-manager .topbar-brand span,
    .mobile-staff .topbar-brand span {
        font-size: 10px;
    }

    .mobile-manager .topbar-user span:not(.notification-dot),
    .mobile-staff .topbar-user span:not(.notification-dot),
    .mobile-manager .topbar-user a,
    .mobile-staff .topbar-user a {
        display: none;
    }

    .mobile-content {
        max-width: 390px !important;
        padding: 8px 14px 92px !important;
    }

    .mobile-phone-content {
        display: block;
    }

    .mobile-manager .mobile-staff-panel,
    .mobile-staff .mobile-manager-panel {
        display: none;
    }

    .mobile-card-intro,
    .phone-panel,
    .phone-section {
        background: white;
        border: 1px solid rgba(11, 43, 28, 0.08);
        border-radius: 16px;
        padding: 14px;
        box-shadow: 0 10px 22px rgba(17, 24, 39, 0.08);
    }

    .mobile-card-intro h2,
    .phone-panel h2,
    .phone-section h2 {
        margin: 0;
        color: var(--green-900);
        font-size: 14px;
    }

    .mobile-card-intro span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 11px;
    }

    .phone-section {
        margin-top: 10px;
    }

    .phone-section h2 {
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0;
        margin-bottom: 9px;
    }

    .phone-tool-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 10px 0;
    }

    .phone-tool-grid a {
        min-height: 70px;
        border: 1px solid rgba(11, 43, 28, 0.1);
        border-radius: 11px;
        background: #fffdf8;
        display: grid;
        place-items: center;
        gap: 5px;
        padding: 7px 4px;
        text-align: center;
        color: var(--green-900);
    }

    .staff-grid a {
        min-height: 92px;
    }

    .phone-tool-grid strong {
        font-size: 10px;
        line-height: 1.1;
    }

    .phone-icon {
        width: 25px;
        height: 25px;
        color: var(--green-900);
    }

    .phone-panel {
        margin-top: 10px;
    }

    .phone-task-list {
        display: grid;
        gap: 6px;
        margin-top: 10px;
    }

    .phone-task-list a {
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--green-900);
        font-size: 12px;
        font-weight: 800;
    }

    .phone-task-list a::after {
        content: ">";
        margin-left: auto;
        color: var(--muted);
    }

    .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .dot.orange { background: #f59e0b; }
    .dot.green { background: #16a34a; }
    .dot.gray { background: #9ca3af; }

    .access-note {
        margin-top: 10px;
        min-height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #eef1ec;
        color: var(--green-900);
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-manager .dashboard-grid,
    .mobile-staff .dashboard-grid,
    .mobile-tools,
    .mobile-manager .page-head,
    .mobile-staff .page-head {
        display: none !important;
    }

    .bottom-nav {
        left: 14px;
        right: 14px;
        bottom: 10px;
        height: 62px;
        border-radius: 18px;
        background: #002817;
    }

    .bottom-nav a,
    .bottom-nav button {
        min-height: 48px;
        font-size: 10px;
        border-radius: 12px;
    }

    .bottom-nav a:first-child {
        color: var(--green-900);
        background: var(--gold);
    }

    .reservas-screen {
        width: 100%;
        max-width: 390px;
        padding-bottom: 140px;
    }

    .reservas-hero {
        align-items: flex-start;
        padding: 14px;
    }

    .reservas-hero h1 {
        font-size: 19px;
    }

    .reservas-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservas-actions a {
        min-height: 42px;
    }

    .calendar-head,
    .selected-day-card {
        display: block;
    }

    .reservas-calendar-nav {
        width: 100%;
        margin-bottom: 8px;
    }

    .legend {
        justify-content: flex-start;
        margin-top: 9px;
    }

    .week-row,
    .month-grid {
        gap: 4px;
    }

    .day-cell {
        min-height: 58px;
        border-radius: 10px;
        padding: 6px;
    }

    .day-cell span,
    .day-cell small {
        font-size: 9px;
        line-height: 1.05;
    }

    .day-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 10px;
    }

    .reservation-item {
        grid-template-columns: 54px 1fr;
    }

    .reservation-empty-item {
        grid-template-columns: 1fr;
        padding: 11px;
    }

    .reservation-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .reservation-actions a,
    .reservation-actions button,
    .reservation-actions .is-disabled {
        width: 100%;
        min-height: 40px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-manager .content-shell {
        padding: 18px;
    }

    .desktop-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desktop-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Reservas: desktop proprio, mobile com bottom nav */
.mobile-staff:has(.reservas-screen) .bottom-nav,
.mobile-staff:has(.reservas-screen) .more-sheet {
    display: none;
}

.reservas-screen {
    width: min(100%, 1180px);
    max-width: none;
}

.reservas-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.reservas-side-column {
    display: grid;
    gap: 14px;
}

.reservas-desktop-grid .calendar-card {
    min-width: 0;
}

.reservas-desktop-grid .day-cell {
    min-height: 92px;
}

    .reservas-desktop-grid .reservation-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .reservas-desktop-grid .reservation-empty-item {
        grid-template-columns: 1fr;
    }

.reservas-desktop-grid .reservation-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    .mobile-staff:has(.reservas-screen) {
        padding-bottom: 0;
    }

    .mobile-staff .content-shell:has(.reservas-screen) {
        width: min(1180px, calc(100% - 48px));
        max-width: none;
        padding: 24px 0 48px !important;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .mobile-staff:has(.reservas-screen) {
        padding-bottom: 0;
    }

    .mobile-staff .content-shell:has(.reservas-screen) {
        width: min(960px, calc(100% - 36px));
        max-width: none;
        padding: 22px 0 42px !important;
    }

    .reservas-desktop-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.75fr);
    }
}

@media (max-width: 768px) {
    .mobile-staff:has(.reservas-screen) .bottom-nav {
        display: grid;
    }

    .mobile-staff:has(.reservas-screen) .more-sheet:not([hidden]) {
        display: grid;
    }

    .reservas-screen {
        width: 100%;
        max-width: 390px;
        padding-bottom: 156px;
    }

    .reservas-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .reservas-month-nav {
        justify-content: stretch;
    }

    .reservas-month-nav a {
        flex: 1;
        min-width: 0;
        padding-inline: 7px;
    }

    .reservas-desktop-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reservas-side-column {
        gap: 12px;
    }

    .reservas-desktop-grid .calendar-card {
        padding: 10px;
    }

    .reservas-desktop-grid .calendar-head {
        margin-bottom: 8px;
    }

    .reservas-desktop-grid .calendar-head {
        display: block;
    }

    .reservas-desktop-grid .legend {
        display: none;
    }

    .reservas-desktop-grid .week-row,
    .reservas-desktop-grid .month-grid {
        gap: 4px;
    }

    .reservas-desktop-grid .week-row {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .reservas-desktop-grid .day-cell {
        min-height: 52px;
        border-radius: 10px;
        padding: 4px 3px;
        gap: 1px;
    }

    .reservas-desktop-grid .day-cell strong {
        font-size: 12px;
        line-height: 1;
    }

    .reservas-desktop-grid .day-cell span {
        font-size: 9px;
        line-height: 1.05;
    }

    .reservas-desktop-grid .day-cell small {
        display: none;
        font-size: 8px;
        line-height: 1.05;
    }

    .reservation-detail-grid {
        grid-template-columns: 1fr;
    }

    .reservas-desktop-grid .reservation-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .reservas-desktop-grid .reservation-actions form,
    .reservas-desktop-grid .reservation-actions a,
    .reservas-desktop-grid .reservation-actions button,
    .reservas-desktop-grid .reservation-actions .is-disabled {
        width: 100%;
    }
}

.pin-reset-notice { max-width: 1120px; margin: 0 auto 12px; padding: 10px 14px; border: 1px solid rgba(224,177,59,.35); border-radius: 12px; background: #fff8e1; color: #5f4106; font-weight: 700; font-size: .9rem; }
.mobile-staff .pin-reset-notice, .mobile-manager .pin-reset-notice { margin: 8px 16px 0; font-size: .82rem; }

.admin-users-screen {
    width: min(100%, 1180px);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.admin-users-hero,
.admin-users-card,
.admin-permissions-card,
.admin-summary-grid article {
    background: #fffdf8;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 18px;
    box-shadow: var(--soft-shadow);
}

.admin-users-hero {
    min-height: 96px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-users-hero h1 {
    margin: 0;
    color: var(--green-900);
    font-size: 24px;
}

.admin-users-hero span,
.admin-user-info span,
.admin-user-info small {
    color: var(--muted);
    font-weight: 800;
}

.admin-users-count {
    min-width: 112px;
    border-radius: 14px;
    background: var(--green-900);
    color: white;
    padding: 12px;
    display: grid;
    justify-items: center;
    gap: 4px;
}

.admin-hero-link {
    min-height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    background: var(--gold);
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.admin-filter-link {
    min-height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.admin-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-users-count strong {
    color: var(--gold);
    font-size: 28px;
    line-height: 1;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-summary-grid article {
    min-height: 96px;
    padding: 14px;
    display: grid;
    gap: 7px;
    align-content: center;
}

.admin-summary-grid .td-icon {
    color: var(--gold-strong);
}

.admin-summary-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.admin-summary-grid strong {
    color: var(--green-900);
    font-size: 25px;
}

.admin-users-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
    align-items: start;
}

.admin-users-main,
.admin-user-list,
.admin-permissions-card {
    display: grid;
    gap: 12px;
}

.admin-users-card,
.admin-permissions-card {
    padding: 14px;
}

.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-section-head h2,
.admin-permissions-card h2,
.admin-module-block h3 {
    margin: 0;
    color: var(--green-900);
}

.admin-section-head h2,
.admin-permissions-card h2 {
    font-size: 18px;
}

.admin-section-head span {
    min-width: 34px;
    min-height: 28px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--green-100);
    color: var(--green-900);
    font-weight: 900;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 44px minmax(170px, 1fr) minmax(180px, auto);
    gap: 10px;
    align-items: start;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 15px;
    background: white;
    padding: 12px;
}

.admin-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold), #f5df75);
    color: var(--green-900);
    font-weight: 900;
}

.admin-user-info {
    min-width: 0;
}

.admin-user-info strong,
.admin-user-info span,
.admin-user-info small {
    display: block;
    overflow-wrap: anywhere;
}

.admin-user-info strong {
    color: var(--green-900);
}

.admin-user-info span,
.admin-user-info small {
    margin-top: 3px;
    font-size: 12px;
}

.admin-user-badges,
.admin-permission-cloud,
.admin-disabled-actions,
.admin-module-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-user-badges {
    justify-content: flex-end;
}

.admin-badge,
.admin-permission-cloud span,
.admin-module-permissions span,
.admin-empty-pill {
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 900;
}

.admin-badge.is-role {
    background: var(--green-900);
    color: white;
}

.admin-badge.is-active {
    background: #dcfce7;
    color: #166534;
}

.admin-badge.is-muted {
    background: #e5e7eb;
    color: #4b5563;
}

.admin-badge.is-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.admin-badge.is-warning {
    background: #fff2cc;
    color: #7a5308;
}

.admin-permission-cloud {
    grid-column: 2 / -1;
}

.admin-permission-cloud span,
.admin-module-permissions span {
    background: #f3f6f1;
    color: var(--green-900);
}

.admin-disabled-actions {
    grid-column: 2 / -1;
}

.admin-disabled-actions button,
.admin-inline-form button {
    min-height: 34px;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 11px;
    background: #f2f5ef;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 900;
    cursor: not-allowed;
}

.admin-action-link {
    min-height: 34px;
    border: 1px solid rgba(11, 43, 28, 0.12);
    border-radius: 11px;
    background: var(--green-900);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 900;
}

.admin-action-link.is-reset-pin-action {
    background: #fff2cc;
    color: #7a5308;
    border-color: rgba(224, 177, 59, 0.36);
}

.admin-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.admin-actions-grid .admin-action-link,
.admin-actions-grid .admin-inline-form,
.admin-actions-grid .admin-inline-form button {
    min-width: 150px;
}

.admin-action-link.is-secondary-action {
    background: #f8faf8;
    color: var(--muted);
}

.admin-advanced-links {
    padding: 14px;
}

.admin-advanced-links summary {
    cursor: pointer;
    color: var(--green-900);
    font-weight: 900;
    margin-bottom: 10px;
}

.admin-checkbox-line {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.admin-checkbox-line input {
    width: auto;
}

.hours-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.hours-spotlight {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr);
    gap: 12px;
    align-items: stretch;
}

.hours-total-highlight,
.hours-quick-totals article {
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.hours-total-highlight {
    padding: 18px;
    display: grid;
    align-content: center;
    gap: 6px;
    background:
        linear-gradient(135deg, rgba(224, 177, 59, 0.22), transparent 60%),
        var(--green-900);
    color: #fff;
}

.hours-total-highlight span,
.hours-total-highlight small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 900;
}

.hours-total-highlight strong {
    color: var(--gold);
    font-size: 32px;
    line-height: 1;
}

.hours-quick-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.hours-quick-totals article {
    min-height: 88px;
    padding: 14px;
    display: grid;
    align-content: center;
    gap: 6px;
}

.hours-quick-totals span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.hours-quick-totals strong {
    color: var(--green-900);
    font-size: 22px;
    overflow-wrap: anywhere;
}

.hours-form-calendar-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hours-turn-form-card {
    position: sticky;
    top: 18px;
}

.hours-preview {
    margin-bottom: 0;
}

.hours-filter-card {
    padding: 12px;
}

.admin-action-button {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--green-900);
    color: #fff;
    padding: 10px 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.admin-inline-form button.admin-action-button,
.admin-inline-form button.admin-action-link {
    cursor: pointer;
}

.admin-inline-form button.admin-action-button {
    border: 0;
    background: var(--green-900);
    color: #fff;
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 14px;
}

.admin-inline-form button.admin-action-link {
    background: var(--green-900);
    color: #fff;
}

.admin-inline-form button.admin-action-link.is-secondary-action {
    background: #f8faf8;
    color: var(--muted);
}

.hours-calendar-card {
    padding: 14px;
}

.hours-calendar-card.is-full-width {
    width: 100%;
}

.calendar-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.calendar-nav-row a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-900);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
}

.hours-weekdays,
.hours-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.hours-weekdays {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.hours-day {
    min-height: 94px;
    border: 1px solid rgba(11, 43, 28, .1);
    border-radius: 12px;
    background: #fff;
    color: var(--green-900);
    padding: 8px;
    display: grid;
    gap: 4px;
    align-content: start;
    font-weight: 900;
}

.hours-day span,
.hours-day small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.hours-day.has-hours {
    background: #fff8e1;
    border-color: rgba(224, 177, 59, .45);
}

.hours-day.has-unpaid {
    border-color: rgba(168, 50, 50, 0.24);
}

.hours-day.is-paid-up.has-hours {
    background: #f0fdf4;
    border-color: rgba(22, 101, 52, 0.22);
}

.hours-status-pill {
    width: fit-content;
    border-radius: 999px;
    padding: 3px 6px;
}

.hours-status-pill.is-unpaid {
    background: #fff2cc;
    color: #7a5308;
}

.hours-status-pill.is-paid {
    background: #dcfce7;
    color: #166534;
}

.hours-day.is-empty {
    visibility: hidden;
}

.hours-record-row {
    grid-template-columns: 44px minmax(150px, 1.1fr) minmax(180px, 1fr) minmax(160px, auto);
}

.hours-day-records-card {
    padding: 14px;
}

.hours-record-facts {
    align-content: start;
}

.tips-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.tips-row {
    grid-template-columns: 44px minmax(150px, 1fr) minmax(100px, auto) minmax(140px, auto);
}

.tips-participants-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tips-select-actions {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.tips-participant-card {
    min-height: 72px;
    border: 1px solid rgba(11, 43, 28, 0.12);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    cursor: pointer;
}

.tips-participant-card input {
    width: 22px;
    height: 22px;
    accent-color: var(--green-900);
}

.tips-participant-card span,
.tips-participant-card strong {
    overflow-wrap: anywhere;
}

.tips-participant-card span {
    color: var(--green-900);
    font-weight: 900;
}

.tips-participant-card strong {
    grid-column: 2;
    color: var(--gold-strong);
}

.tips-preview {
    margin-bottom: 0;
}

.tips-week-card {
    margin-top: 16px;
}

.tips-week-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: center;
    margin-bottom: 14px;
}

.tips-week-head h2 {
    margin: 0;
    color: var(--green-900);
}

.tips-week-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.tips-week-button,
.tips-week-current {
    min-height: 38px;
    border: 1px solid rgba(11, 43, 28, 0.14);
    border-radius: 12px;
    background: #fffaf1;
    color: var(--green-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.tips-week-current {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 30px;
    background: #f5f8f2;
    color: var(--muted);
    font-size: 12px;
}

.tips-week-nav {
    margin: 10px 0 14px;
}

.tips-week-bars {
    display: grid;
    gap: 10px;
}

.tips-v1-total {
    border-left: 8px solid var(--gold-strong);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    background: #fff8e3;
}

.tips-v1-total span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 800;
}

.tips-v1-total strong {
    display: block;
    font-size: 28px;
    color: var(--green-900);
    line-height: 1.1;
}

.tips-worker-bars {
    display: grid;
    gap: 14px;
}

.tips-worker-bar {
    display: grid;
    gap: 6px;
}

.tips-person-bar-card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 13px;
    background: #fffdf8;
}

.tips-person-bar-card small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.35;
}

.tips-worker-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900;
    color: var(--green-900);
}

.tips-worker-bar small {
    color: var(--muted);
    font-weight: 700;
}

.tips-payment-card {
    margin-top: 14px;
}

.tips-payment-grid {
    display: grid;
    gap: 12px;
}

.tips-allocation-row {
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.tips-allocation-row.is-paid {
    border-color: rgba(31, 122, 79, 0.18);
    background: #fbfef9;
}

.tips-allocation-row.is-unpaid {
    border-color: rgba(194, 143, 45, 0.24);
    background: #fffaf1;
}

.tips-allocation-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tips-allocation-main h3 {
    width: 100%;
    margin: 0;
    color: var(--green-900);
    font-size: 1rem;
}

.tips-allocation-main strong {
    color: var(--green-900);
    font-size: 1.2rem;
}

.tips-allocation-main small {
    width: 100%;
    color: var(--muted);
    font-weight: 800;
}

.tips-calculation-card {
    margin-top: 14px;
}

.my-tips-list-card {
    margin-top: 14px;
}

.my-tips-list {
    display: grid;
    gap: 10px;
}

.my-tip-card {
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background: #fff;
}

.my-tip-card.is-paid {
    border-color: rgba(31, 122, 79, 0.18);
    background: #fbfef9;
}

.my-tip-card.is-unpaid {
    border-color: rgba(194, 143, 45, 0.24);
    background: #fffaf1;
}

.my-tip-card.is-void {
    opacity: 0.78;
    background: #f6f6f3;
}

.my-tip-card > div {
    display: grid;
    gap: 5px;
}

.my-tip-card > div:last-child {
    justify-items: end;
}

.my-tip-card strong {
    color: var(--green-900);
}

.my-tip-card small {
    color: var(--muted);
    font-weight: 800;
}

.my-tips-void-card {
    margin-top: 14px;
}

.my-tips-void-card summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 900;
}

.tips-week-day {
    display: grid;
    grid-template-columns: minmax(62px, 0.18fr) minmax(120px, 1fr) minmax(82px, auto);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 43, 28, 0.08);
}

.tips-week-day > div:first-child {
    display: grid;
    gap: 2px;
}

.tips-week-day span {
    color: var(--muted);
    font-size: 0.82rem;
}

.tips-week-bar-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(31, 122, 79, 0.1);
    overflow: hidden;
}

.tips-week-bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green-900), var(--gold-strong));
}

.tips-week-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tips-week-people span {
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 999px;
    padding: 7px 10px;
    background: #fffaf1;
    font-weight: 800;
    color: var(--green-900);
}

.hours-meal-note {
    margin: 0;
}

.hours-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.admin-action-link .td-icon {
    width: 15px;
    height: 15px;
}

.admin-action-link .td-icon,
.admin-disabled-actions .td-icon,
.admin-inline-form .td-icon {
    width: 15px;
    height: 15px;
}

.admin-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-inline-form button {
    cursor: pointer;
}

.admin-inline-form span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.admin-inline-form .is-danger-action {
    background: #fee2e2;
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.16);
}

.admin-inline-form .is-activate-action {
    background: #dcfce7;
    color: #166534;
    border-color: rgba(22, 101, 52, 0.16);
}

.admin-module-block {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.admin-module-block h3 {
    font-size: 14px;
    margin-bottom: 8px;
}

.admin-module-permissions strong {
    color: var(--gold-strong);
}

.admin-empty,
.admin-empty-pill {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.permission-diagnostic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: white;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--soft-shadow);
}

.permission-diagnostic-user {
    display: grid;
    gap: 12px;
}

.permission-user-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.permission-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.permission-columns section,
.permission-source-grid {
    border-radius: 14px;
    background: #f8faf6;
    border: 1px solid rgba(11, 43, 28, 0.08);
    padding: 11px;
}

.permission-columns h2,
.permission-source-grid h2 {
    margin: 0 0 9px;
    color: var(--green-900);
    font-size: 13px;
}

.permission-source-grid > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.permission-chip {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 900;
}

.permission-chip strong {
    border-radius: 999px;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.62);
    font-size: 10px;
}

.source-role {
    background: #e9f3ec;
    color: var(--green-900);
}

.source-direct {
    background: #fff2cc;
    color: #7a5308;
}

.source-both {
    background: #dbeafe;
    color: #0f3f6e;
}

.source-none,
.source-inactive {
    background: #e5e7eb;
    color: #4b5563;
}

.edit-permissions-card {
    display: grid;
    gap: 16px;
}

.permissions-edit-form {
    display: grid;
    gap: 14px;
}

.reservation-edit-screen .permissions-edit-form label {
    display: grid;
    gap: 6px;
    color: var(--green-900);
    font-size: 12px;
    font-weight: 900;
}

.reservation-edit-screen .permissions-edit-form input,
.reservation-edit-screen .permissions-edit-form select,
.reservation-edit-screen .permissions-edit-form textarea {
    width: 100%;
    border: 1px solid rgba(11, 43, 28, 0.14);
    border-radius: 12px;
    background: white;
    color: var(--green-900);
    padding: 10px 11px;
    font: inherit;
    font-weight: 800;
}

.reservation-edit-screen .permissions-edit-form textarea {
    resize: vertical;
}

.reservation-create-screen {
    gap: 12px;
}

.reservation-create-screen .reservation-create-hero {
    min-height: 0;
    padding: 14px;
}

.reservation-create-screen .reservation-create-hero h1 {
    font-size: 21px;
}

.reservation-create-screen .reservation-create-hero span {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
}

.reservation-create-screen .reservation-create-hero .btn-secondary {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 12px;
}

.reservation-create-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reservation-create-screen .permissions-edit-form textarea {
    min-height: 74px;
}

.form-span-full {
    grid-column: 1 / -1;
}

.permission-group-fieldset {
    margin: 0;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 15px;
    background: #f8faf6;
    padding: 12px;
}

.permission-group-fieldset legend {
    padding: 0 6px;
    color: var(--green-900);
    font-size: 13px;
    font-weight: 900;
}

.permission-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.permission-checkbox {
    min-height: 58px;
    border: 1px solid rgba(11, 43, 28, 0.1);
    border-radius: 12px;
    background: white;
    padding: 9px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.permission-checkbox.has-role-permission {
    background: #fffdf3;
    border-color: rgba(224, 177, 59, 0.35);
}

.permission-checkbox input {
    margin-top: 4px;
}

.permission-checkbox strong,
.permission-checkbox small,
.permission-checkbox em {
    display: block;
}

.permission-checkbox strong {
    color: var(--green-900);
    font-size: 13px;
}

.permission-checkbox small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.permission-checkbox em {
    margin-top: 5px;
    width: max-content;
    border-radius: 999px;
    background: #dbeafe;
    color: #0f3f6e;
    padding: 3px 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.edit-permissions-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.edit-permissions-actions a,
.edit-permissions-actions button {
    min-height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 900;
}

.edit-permissions-actions a {
    border: 1px solid rgba(11, 43, 28, 0.12);
    background: white;
    color: var(--green-900);
}

.edit-permissions-actions button {
    border: 0;
    background: var(--gold);
    color: var(--green-900);
    cursor: pointer;
}

.btn-danger,
.edit-permissions-actions .btn-danger {
    border: 0;
    background: #991b1b;
    color: white;
    cursor: pointer;
}

.reservation-confirm-card {
    display: grid;
    gap: 14px;
}

.reservation-cancel-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.reservation-cancel-time {
    border-radius: 13px;
    background: var(--green-900);
    color: white;
    padding: 13px 12px;
    font-size: 22px;
    font-weight: 900;
}

@media (max-width: 1023px) {
    .admin-users-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .admin-users-screen {
        width: 100%;
        max-width: 390px;
        padding-bottom: 86px;
    }

    .admin-users-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-users-count {
        width: 100%;
        grid-template-columns: auto auto 1fr;
        justify-items: start;
        align-items: center;
    }

    .admin-hero-link {
        width: 100%;
    }

    .admin-filter-link {
        width: 100%;
    }

    .admin-hero-actions {
        width: 100%;
    }

    .admin-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .admin-user-badges,
    .admin-permission-cloud,
    .admin-disabled-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .admin-disabled-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-action-link,
    .admin-inline-form,
    .admin-inline-form button {
        width: 100%;
    }

    .admin-actions-grid {
        width: 100%;
    }

    .hours-filter-form,
    .hours-time-grid {
        grid-template-columns: 1fr;
    }

    .hours-spotlight,
    .hours-form-calendar-grid,
    .hours-quick-totals {
        grid-template-columns: 1fr;
    }

    .hours-total-highlight {
        min-height: 116px;
        padding: 18px;
    }

    .hours-total-highlight strong {
        font-size: 30px;
    }

    .hours-quick-totals {
        gap: 8px;
    }

    .hours-quick-totals article {
        min-height: 72px;
        padding: 12px;
    }

    .hours-turn-form-card {
        position: static;
    }

    .hours-filter-card {
        padding: 12px;
    }

    .hours-weekdays,
    .hours-calendar-grid {
        gap: 4px;
    }

    .hours-day {
        min-height: 58px;
        border-radius: 10px;
        padding: 6px 4px;
        font-size: 12px;
        align-content: center;
        justify-items: center;
        text-align: center;
    }

    .hours-day span,
    .hours-day small {
        font-size: 10px;
    }

    .hours-day .desktop-only {
        display: none;
    }

    .hours-status-pill {
        padding: 2px 5px;
        font-size: 9px;
    }

    .hours-record-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .hours-record-facts {
        grid-column: 1 / -1;
    }

    .tips-layout,
    .tips-row,
    .tips-participants-grid {
        grid-template-columns: 1fr;
    }

    .tips-participant-card {
        min-height: 78px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tips-week-day {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tips-week-day > strong {
        justify-self: start;
    }

    .tips-week-nav {
        display: grid;
        gap: 8px;
        text-align: center;
    }

    .tips-week-head {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .tips-week-head > div {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .tips-week-button {
        grid-row: 2;
        width: 100%;
    }

    .tips-week-current {
        grid-row: 3;
        width: 100%;
    }

    .tips-worker-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .tips-allocation-row {
        grid-template-columns: 1fr;
    }

    .tips-allocation-row .admin-inline-form button {
        width: 100%;
        min-height: 46px;
    }

    .my-tip-card {
        grid-template-columns: 1fr;
    }

    .my-tip-card > div:last-child {
        justify-items: start;
    }

    .admin-action-link,
    .admin-inline-form button {
        justify-content: center;
    }

    .admin-inline-form span {
        width: 100%;
        text-align: center;
    }

    .permission-columns {
        grid-template-columns: 1fr;
    }

    .permission-user-head {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .permission-user-head .admin-action-link {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .permission-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .edit-permissions-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.taloes-screen {
    padding-bottom: 96px;
}

.receipt-create-screen {
    max-width: 100%;
    overflow-x: clip;
}

.receipt-create-screen {
    max-width: 460px;
    margin-inline: auto;
}

.receipt-create-hero,
.receipt-form-card,
.receipt-form,
.receipt-form-section,
.receipt-file-shell {
    box-sizing: border-box;
    max-width: 100%;
}

.receipt-create-hero > div {
    min-width: 0;
}

.receipt-create-hero h1,
.receipt-create-hero span {
    overflow-wrap: anywhere;
}

.receipt-back-link {
    white-space: nowrap;
}

.receipt-card-title {
    margin: -18px -18px 16px;
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
    background: var(--green-900);
    color: #fff;
    font-weight: 900;
}

.taloes-month-card {
    margin-bottom: 16px;
}

.taloes-summary-grid {
    margin-bottom: 16px;
}

.taloes-list {
    display: grid;
    gap: 12px;
}

.taloes-operational-form {
    max-width: 860px;
}

.receipt-total-box {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid rgba(203, 156, 63, 0.28);
    border-radius: 12px;
    background: #fff7e6;
    box-sizing: border-box;
}

.receipt-full-row {
    grid-column: 1 / -1;
}

.receipt-pair-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.taloes-total-preview {
    font-weight: 900;
    color: var(--green-900);
}

.receipt-help-text {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.receipt-camera-box {
    display: grid;
    position: relative;
    justify-items: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 108px;
    padding: 18px;
    border: 2px dashed rgba(16, 84, 58, 0.18);
    border-radius: 14px;
    background: #f8faf9;
    color: var(--green-900);
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.receipt-camera-box span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.receipt-camera-icon {
    width: 24px;
    height: 24px;
    color: var(--green-900);
}

.receipt-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.receipt-file-name {
    margin-top: 10px;
    text-align: center;
}

.receipt-recent-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(203, 156, 63, 0.38);
    border-radius: 14px;
    background: #fffdf7;
    box-sizing: border-box;
}

.receipt-recent-card h2 {
    margin: 0 0 10px;
    color: var(--green-900);
    font-size: 16px;
}

.receipt-recent-list {
    display: grid;
    gap: 8px;
}

.receipt-recent-item {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(16, 84, 58, 0.1);
    border-radius: 12px;
    background: #fff;
    color: var(--green-900);
    text-decoration: none;
}

.receipt-recent-item span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.receipt-history-link {
    display: block;
    margin-top: 10px;
    color: var(--green-900);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}
}

.talao-card {
    display: grid;
    grid-template-columns: minmax(92px, 0.8fr) minmax(160px, 1.4fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(16, 84, 58, 0.12);
    border-radius: 14px;
    background: #fff;
}

.talao-card.is-muted {
    opacity: 0.68;
}

.talao-main,
.talao-values,
.talao-meta {
    display: grid;
    gap: 4px;
}

.talao-main strong,
.talao-values strong {
    color: var(--green-900);
}

.talao-main span,
.talao-values span,
.talao-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.talao-card-actions {
    display: grid;
    gap: 8px;
}

.taloes-form-grid,
.talao-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.talao-readonly-grid > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(16, 84, 58, 0.12);
    border-radius: 12px;
    background: #f8faf9;
}

.talao-readonly-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.taloes-tip-link {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.taloes-ocr-details summary {
    cursor: pointer;
    color: var(--green-900);
    font-weight: 900;
}

.taloes-ocr-details pre {
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 12px 0 0;
    padding: 12px;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.5;
}

.status-badge.is-ok {
    background: #dcfce7;
    color: #166534;
}

.status-badge.is-warning {
    background: #fff7ed;
    color: #9a3412;
}

.status-badge.is-danger {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.is-muted {
    background: #f1f5f9;
    color: #475569;
}

.taloes-reconciliation-card {
    display: grid;
    gap: 14px;
}

.faturas-screen {
    padding-bottom: 112px;
}

.faturas-compact-hero {
    margin-bottom: 14px;
}

.faturas-compact-hero h1 {
    font-size: clamp(28px, 5vw, 42px);
}

.faturas-month-card,
.invoice-total-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(203, 156, 63, 0.28);
    border-radius: 14px;
    background: #fffdf7;
    box-sizing: border-box;
}

.faturas-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.faturas-summary-grid article,
.invoice-total-panel > div:not(.receipt-pair-row) {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(16, 84, 58, 0.1);
    border-radius: 12px;
    background: #fff;
}

.faturas-summary-grid span,
.invoice-total-panel span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.faturas-summary-grid strong,
.invoice-total-panel strong {
    color: var(--green-900);
    font-size: 17px;
}

.invoice-form-card {
    overflow: visible;
}

.invoice-manual-form {
    gap: 14px;
}

.invoice-line-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(16, 84, 58, 0.12);
    border-radius: 14px;
    background: #f8faf9;
    box-sizing: border-box;
}

.invoice-import-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.invoice-import-suggestion-grid .invoice-line-card {
    align-content: start;
    min-width: 0;
}

.invoice-import-suggestion-grid .invoice-line-card h2 {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.25;
}

.invoice-import-suggestion-grid .invoice-line-card p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 13px;
}

.invoice-recurring-panel {
    display: grid;
    gap: 10px;
    padding: 11px;
    border: 1px solid rgba(203, 156, 63, 0.34);
    border-radius: 12px;
    background: #fffdf7;
    box-sizing: border-box;
}

.invoice-recurring-panel[hidden] {
    display: none;
}

.invoice-recurring-panel strong {
    color: var(--green-900);
    font-size: 15px;
}

.invoice-recurring-panel > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.invoice-line-card h2 {
    margin: 0;
    color: var(--green-900);
    font-size: 18px;
}

.invoice-checkbox-line {
    display: flex;
    gap: 9px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: var(--green-900);
    font-size: 13px;
    font-weight: 900;
    box-sizing: border-box;
}

.invoice-checkbox-line input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.invoice-checkbox-line span {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.invoice-stock-line {
    margin-top: 2px;
    padding: 0 2px;
}

.invoice-stock-check {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0 2px;
    box-sizing: border-box;
    color: var(--green-900);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    white-space: normal;
}

.invoice-stock-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    max-width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.invoice-stock-check span {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.invoice-add-line {
    min-height: 44px;
    border: 1px dashed rgba(203, 156, 63, 0.55);
    border-radius: 12px;
    background: #fffdf7;
    color: var(--green-900);
    font-weight: 900;
}

.invoice-submit-actions {
    grid-template-columns: 1fr;
}

.invoice-submit-actions button {
    width: 100%;
}

.invoice-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.invoice-card-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
}

.invoice-card-main div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.invoice-card-main strong {
    color: var(--green-900);
}

.invoice-card-main span,
.invoice-card-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.invoice-card-kicker {
    color: var(--green-700) !important;
    font-size: 10px !important;
    letter-spacing: 0;
    text-transform: uppercase;
}

.invoice-card-note {
    margin: 0;
}

.invoice-card-note.is-warning-note,
.invoice-duplicate-warning {
    border: 1px solid rgba(173, 91, 0, 0.24);
    background: #fff7e8;
    color: #6f3d00;
}

.invoice-duplicate-warning {
    padding: 12px 14px;
    border-radius: 10px;
}

.invoice-duplicate-warning a {
    color: inherit;
    font-weight: 900;
}

.invoice-card-badges,
.invoice-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-card-actions .admin-inline-form {
    display: contents;
}

.invoice-card-actions .admin-action-link {
    min-height: 40px;
    padding: 9px 12px;
}

.invoice-detail-list {
    display: grid;
    gap: 8px;
}

.invoice-detail-list > div {
    display: grid;
    grid-template-columns: minmax(96px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid rgba(11, 43, 28, 0.08);
}

.invoice-detail-list > div:last-child {
    border-bottom: 0;
}

.invoice-detail-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.invoice-detail-list strong {
    min-width: 0;
    color: var(--green-900);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.invoice-confirmed-lines {
    display: grid;
    gap: 8px;
}

.invoice-confirmed-line-card {
    padding: 10px;
}

.invoice-confirmed-lines > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.invoice-confirmed-lines > div span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.invoice-confirmed-lines > div strong {
    color: var(--green-900);
    font-size: 15px;
}

.invoices-page {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin-inline: auto;
}

.invoices-hero {
    min-height: 0;
    padding: 16px 18px;
    border-radius: 14px;
    gap: 12px;
}

.invoices-hero .eyebrow {
    margin-bottom: 3px;
    font-size: 11px;
}

.invoices-hero h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.08;
}

.invoices-hero span {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
}

.invoices-hero .admin-hero-link {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
}

.invoices-card {
    padding: 14px;
    border-radius: 14px;
}

.invoices-summary {
    gap: 8px;
}

.invoices-summary .tips-week-head {
    gap: 8px;
    margin-bottom: 2px;
}

.invoices-summary .tips-week-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
}

.invoices-summary .tips-week-head span {
    font-size: 11px;
}

.invoices-summary .tips-week-button {
    min-height: 34px;
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 18px;
}

.invoices-summary-grid {
    gap: 7px;
}

.invoices-summary-grid article {
    min-height: 0;
    padding: 8px 9px;
    border-radius: 10px;
}

.invoices-summary-grid span {
    font-size: 10px;
    line-height: 1.1;
}

.invoices-summary-grid strong {
    font-size: 14px;
    line-height: 1.15;
}

.invoices-filter {
    padding: 12px;
}

.invoices-filter .login-form {
    gap: 4px;
    font-size: 12px;
}

.invoices-filter .edit-permissions-actions {
    margin-top: 2px;
}

.invoices-form {
    gap: 10px;
}

.invoices-form .receipt-form-section,
.invoices-form .invoice-line-card,
.invoices-form .invoice-total-panel {
    padding: 11px;
    border-radius: 12px;
}

.invoices-form .receipt-form-section legend {
    font-size: 15px;
    line-height: 1.1;
}

.invoices-form .login-form {
    gap: 4px;
    font-size: 12px;
}

.invoices-form input,
.invoices-form select,
.invoices-form textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.25;
}

.invoices-form textarea {
    min-height: 66px;
}

.invoices-form .receipt-pair-row,
.invoices-filter-grid .receipt-pair-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.invoices-form .receipt-pair-row > *,
.invoices-filter-grid .receipt-pair-row > * {
    min-width: 0;
}

.invoices-form .invoice-line-card h2 {
    font-size: 16px;
}

.invoices-form .invoice-add-line {
    min-height: 38px;
    padding: 7px 10px;
}

.invoices-form .invoice-total-panel {
    gap: 8px;
}

.invoices-form .invoice-total-panel > div:not(.receipt-pair-row) {
    padding: 8px 9px;
}

.invoices-form .invoice-total-panel span {
    font-size: 10px;
}

.invoices-form .invoice-total-panel strong {
    font-size: 14px;
}

.invoices-form .invoice-checkbox-line {
    gap: 7px;
    font-size: 12px;
    line-height: 1.25;
}

.invoices-form .invoice-submit-actions button {
    min-height: 44px;
    padding: 9px 12px;
}

.invoices-list {
    padding: 12px;
}

.invoices-list .admin-card-title {
    margin-bottom: 8px;
}

.invoice-import-overview-card {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.invoice-import-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.invoice-import-summary-card {
    position: relative;
    min-height: 76px;
    display: grid;
    align-content: space-between;
    gap: 3px;
    padding: 9px 10px 8px 13px;
    border: 1px solid rgba(11, 43, 28, 0.09);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(17, 24, 39, 0.045);
    overflow: hidden;
}

.invoice-import-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--green-700);
}

.invoice-import-summary-card strong {
    color: var(--green-900);
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
}

.invoice-import-summary-card span {
    color: var(--green-900);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.invoice-import-summary-card i {
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
}

.invoice-import-summary-card.is-ready::before {
    background: var(--green-700);
}

.invoice-import-summary-card.is-danger::before {
    background: var(--danger);
}

.invoice-import-summary-card.is-duplicate::before,
.invoice-import-summary-card.is-credit::before {
    background: var(--gold-strong);
}

.invoice-import-summary-card.is-manual::before,
.invoice-import-summary-card.is-closed::before {
    background: #98a2b3;
}

.invoice-import-filter-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 1px 5px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.invoice-import-filter-bar a {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid rgba(11, 43, 28, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--green-900);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.04);
}

.invoice-import-filter-bar a.is-active {
    border-color: var(--green-900);
    background: var(--green-900);
    color: #fff;
}

.invoice-import-group-title {
    margin: 16px 0 9px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(11, 43, 28, 0.08);
}

.invoice-import-group-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.invoices-list .admin-card-title h2 {
    font-size: 16px;
}

.invoices-list .admin-card-title span {
    font-size: 11px;
}

.invoices-list .faturas-list {
    gap: 8px;
}

.invoices-list .invoice-card {
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(11, 43, 28, 0.08);
    background: #fff;
}

.invoices-list .invoice-card-main {
    gap: 8px;
}

.invoices-list .invoice-card-main strong {
    font-size: 14px;
}

.invoices-list .invoice-card-main > strong {
    white-space: nowrap;
    padding: 4px 0 0 8px;
}

.invoices-list .invoice-card-main span,
.invoices-list .invoice-card-note {
    font-size: 11px;
}

.invoices-list .invoice-card-badges {
    gap: 5px;
}

.invoices-list .status-badge {
    padding: 4px 7px;
    font-size: 10px;
}

.invoices-list .invoice-card-actions {
    gap: 6px;
}

.invoices-list .invoice-card-actions .admin-action-link {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 11px;
}

.invoice-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invoice-hero-actions .admin-hero-link {
    min-width: 0;
}

.invoice-import-form textarea,
.invoice-import-review-form textarea {
    min-height: 96px;
}

.invoice-import-file-card p {
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.invoice-raw-text {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

@media (max-width: 760px) {
    .invoice-import-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-import-summary-card {
        min-height: 61px;
        padding: 7px 8px 7px 12px;
        border-radius: 9px;
    }

    .invoice-import-summary-card strong {
        font-size: 21px;
    }

    .invoice-import-summary-card span {
        font-size: 10px;
    }

    .invoice-import-summary-card i {
        display: none;
    }

    .invoice-import-filter-bar {
        margin-inline: -2px;
    }

    .invoice-import-filter-bar a {
        min-height: 28px;
        padding: 4px 9px;
        font-size: 10px;
    }

    .invoice-import-group-title {
        align-items: flex-start;
        gap: 10px;
    }
}

.invoice-raw-text summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--green-900);
}

.invoice-raw-text pre {
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.35;
}

.invoice-void-import-form {
    margin-top: 10px;
}

.invoice-void-import-form .admin-action-link {
    width: 100%;
    justify-content: center;
}

@media (max-width: 760px) {
    .receipt-create-screen {
        width: 100%;
        padding-inline: 14px;
        padding-bottom: 136px;
    }

    .receipt-create-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .receipt-create-hero h1 {
        font-size: 30px;
        line-height: 1.05;
    }

    .receipt-create-hero span {
        font-size: 13px;
        line-height: 1.35;
    }

    .receipt-back-link {
        width: fit-content;
        min-height: 38px;
        padding: 8px 12px;
        justify-self: start;
    }

    .receipt-form-card {
        width: 100%;
        padding: 14px;
        overflow: hidden;
    }

    .receipt-card-title {
        margin: -14px -14px 14px;
    }

    .receipt-form {
        display: grid;
        gap: 14px;
        width: 100%;
        max-width: 100%;
    }

    .receipt-form-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
        margin: 0;
        border-radius: 12px;
    }

    .talao-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .talao-card .admin-action-link,
    .talao-card-actions {
        min-height: 46px;
        justify-content: center;
        width: 100%;
    }

    .taloes-form-grid,
    .talao-readonly-grid {
        grid-template-columns: 1fr;
    }

    .receipt-pair-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .taloes-tip-link {
        display: grid;
        justify-items: stretch;
    }

    .taloes-screen .edit-permissions-actions {
        position: static;
    }

    .taloes-screen input,
    .taloes-screen select,
    .taloes-screen button {
        min-height: 46px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .taloes-screen .receipt-file-native {
        width: 1px;
        height: 1px;
        min-height: 0;
        padding: 0;
    }

    .receipt-total-box {
        width: 100%;
        min-height: 56px;
        font-size: 16px;
        justify-content: center;
    }

    .receipt-ocr-section {
        margin-top: 2px;
    }

    .faturas-screen {
        padding-inline: 14px;
        padding-bottom: calc(156px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }

    .faturas-compact-hero {
        padding: 12px 14px;
        margin-bottom: 0;
        border-radius: 13px;
    }

    .faturas-compact-hero h1 {
        font-size: 22px;
        line-height: 1.08;
    }

    .faturas-compact-hero span {
        font-size: 12px;
    }

    .faturas-compact-hero .admin-hero-link {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .faturas-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .faturas-summary-grid article,
    .invoice-total-panel > div:not(.receipt-pair-row) {
        padding: 10px;
    }

    .faturas-filter-card,
    .faturas-list-card,
    .invoice-form-card,
    .faturas-month-card,
    .invoice-manual-form,
    .invoice-line-card,
    .invoice-total-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .invoices-page {
        gap: 9px;
    }

    .invoices-card {
        padding: 10px;
        border-radius: 12px;
    }

    .invoices-summary .tips-week-head h2 {
        font-size: 17px;
    }

    .invoices-summary .tips-week-button {
        min-height: 32px;
        min-width: 38px;
        padding: 5px 8px;
    }

    .invoices-form .receipt-form-section,
    .invoices-form .invoice-line-card,
    .invoices-form .invoice-total-panel {
        padding: 10px;
    }

    .invoices-form .receipt-form-section legend,
    .invoices-form .invoice-line-card h2,
    .invoices-list .admin-card-title h2 {
        font-size: 16px;
    }

    .invoices-form input,
    .invoices-form select,
    .invoices-form textarea {
        min-height: 38px;
        padding: 7px 9px;
    }

    .invoice-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .invoice-card-actions .admin-action-link {
        min-height: 38px;
        padding: 8px 9px;
        width: 100%;
        justify-content: center;
        font-size: 12px;
        box-sizing: border-box;
    }

    .invoice-detail-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 10px 0;
    }

    .invoice-detail-badges .status-badge,
    .invoice-card-badges .status-badge {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .invoice-confirmed-line-card,
    .invoice-confirmed-lines > div {
        padding: 10px;
    }

    .invoice-total-panel .receipt-pair-row,
    .faturas-filter-form .receipt-pair-row,
    .invoice-manual-form .receipt-pair-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    .faturas-screen input,
    .faturas-screen select,
    .faturas-screen textarea,
    .faturas-screen button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .faturas-screen .receipt-pair-row,
    .faturas-screen .invoices-form .receipt-pair-row,
    .faturas-screen .invoices-filter-grid .receipt-pair-row,
    .faturas-screen .invoice-total-panel .receipt-pair-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .faturas-screen .invoice-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mobile-manager,
    .mobile-staff {
        padding-bottom: 96px;
    }

    .mobile-content {
        padding-bottom: 116px !important;
    }

    .mobile-phone-content {
        padding-bottom: 18px;
    }

    .mobile-card-intro,
    .phone-panel,
    .phone-section {
        padding: 12px;
    }

    .phone-section {
        margin-top: 8px;
    }

    .phone-tool-grid {
        gap: 7px;
    }

    .phone-tool-grid a {
        min-height: 62px;
        padding: 7px 4px;
    }

    .staff-grid {
        margin: 8px 0;
    }

    .staff-grid a {
        min-height: 76px;
    }

    .phone-panel {
        margin-top: 8px;
    }

    .access-note {
        min-height: 34px;
        margin-top: 8px;
    }

    .admin-users-screen,
    .taloes-screen,
    .receipt-create-screen {
        padding-bottom: 132px !important;
    }

    .faturas-screen {
        padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important;
    }

    .reservas-screen {
        padding-bottom: 104px !important;
    }

    .tips-week-card,
    .admin-users-card,
    .reservas-list-card,
    .calendar-card,
    .selected-day-card {
        margin-bottom: 12px;
    }

    .reservation-empty-item {
        min-height: 0 !important;
        padding: 8px 10px !important;
        align-items: center;
        border-style: dashed;
        background: #fffdf8;
    }

    .reservation-empty-item .reservation-main {
        gap: 2px;
    }

    .reservation-empty-item .reservation-main strong {
        font-size: 12px;
        line-height: 1.2;
    }

    .reservation-empty-item .reservation-main span {
        margin-top: 1px;
        font-size: 10px;
        line-height: 1.25;
    }

    .reservas-screen .reservas-list {
        gap: 7px;
        margin-top: 8px;
    }

    .reservas-screen .reservation-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 7px;
        padding: 7px;
        border-radius: 11px;
    }

    .reservas-screen .reservation-time {
        border-radius: 8px;
        padding: 6px 4px;
        font-size: 13px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .reservas-screen .reservation-main strong {
        font-size: 13px;
        line-height: 1.15;
    }

    .reservas-screen .reservation-main span {
        font-size: 10.5px;
        line-height: 1.2;
    }

    .reservas-screen .reservation-main em {
        margin-top: 1px;
        font-size: 10px;
    }

    .reservas-screen .reservation-main small {
        margin-top: 2px;
        font-size: 10px;
    }

    .reservas-screen .reservation-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 1px;
    }

    .reservas-screen .reservation-actions form {
        width: 100%;
        min-width: 0;
    }

    .reservas-screen .reservation-actions a,
    .reservas-screen .reservation-actions button,
    .reservas-screen .reservation-actions .is-disabled {
        width: 100%;
        min-height: 31px;
        border-radius: 8px;
        padding: 5px 6px;
        font-size: 9.5px;
        gap: 3px;
    }

    .reservas-screen .reservation-actions .td-icon {
        width: 12px;
        height: 12px;
    }

    .reservas-screen .reservation-detail-card {
        display: none;
    }

    .reservas-screen .reservation-empty-item {
        display: block;
        width: 100%;
        min-height: unset !important;
        height: auto;
        padding: 9px 11px !important;
        border-radius: 10px;
    }

    .reservas-screen .reservation-empty-item .reservation-main {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .reservas-screen .reservation-empty-item .reservation-main strong,
    .reservas-screen .reservation-empty-item .reservation-main span {
        display: block;
        width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }

    .reservation-create-screen {
        gap: 8px;
        padding-bottom: 96px;
    }

    .reservation-create-screen .reservation-create-hero {
        padding: 10px 12px;
        border-radius: 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .reservation-create-screen .reservation-create-hero h1 {
        font-size: 18px;
        line-height: 1.05;
    }

    .reservation-create-screen .reservation-create-hero span {
        font-size: 10px;
        line-height: 1.15;
    }

    .reservation-create-screen .reservation-create-hero .btn-secondary {
        width: auto;
        min-height: 32px;
        padding: 6px 8px;
        font-size: 10px;
        white-space: nowrap;
    }

    .reservation-create-screen .admin-users-card {
        padding: 10px;
        border-radius: 14px;
    }

    .reservation-create-screen .permissions-edit-form {
        gap: 8px;
    }

    .reservation-create-screen .permissions-edit-form label {
        gap: 4px;
        font-size: 11px;
        line-height: 1.1;
    }

    .reservation-create-screen .permissions-edit-form input,
    .reservation-create-screen .permissions-edit-form select,
    .reservation-create-screen .permissions-edit-form textarea {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 13px;
        box-sizing: border-box;
    }

    .reservation-create-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .reservation-create-row > label {
        min-width: 0;
    }

    .reservation-create-screen .permissions-edit-form textarea {
        min-height: 62px;
        max-height: 82px;
    }

    .reservation-create-screen .edit-permissions-actions {
        gap: 7px;
    }

    .reservation-create-screen .edit-permissions-actions a,
    .reservation-create-screen .edit-permissions-actions button {
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    .tips-screen {
        padding-bottom: 118px !important;
    }

    .tips-screen .hours-spotlight {
        gap: 8px;
        margin-bottom: 10px;
    }

    .tips-screen .hours-total-highlight {
        min-height: 86px;
        padding: 14px;
        border-radius: 14px;
    }

    .tips-screen .hours-total-highlight strong {
        font-size: 26px;
        line-height: 1.05;
    }

    .tips-screen .hours-total-highlight span,
    .tips-screen .hours-total-highlight small {
        font-size: 11px;
    }

    .tips-screen .hours-quick-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .tips-screen .hours-quick-totals article {
        min-height: 58px;
        padding: 9px;
        border-radius: 12px;
    }

    .tips-screen .hours-quick-totals article span {
        font-size: 10px;
        line-height: 1.15;
    }

    .tips-screen .hours-quick-totals article strong {
        font-size: 14px;
        line-height: 1.15;
    }

    .tips-screen .admin-users-card {
        padding: 12px;
        border-radius: 14px;
    }

    .tips-screen .tips-week-card {
        margin-top: 8px;
    }

    .tips-screen .tips-week-head {
        gap: 6px;
        margin-bottom: 8px;
    }

    .tips-screen .tips-week-head h2 {
        font-size: 15px;
    }

    .tips-screen .tips-week-head span,
    .tips-screen .tips-worker-bar small {
        font-size: 10px;
        line-height: 1.25;
    }

    .tips-screen .tips-week-button,
    .tips-screen .tips-week-current {
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 11px;
    }

    .tips-screen .tips-v1-total {
        margin-bottom: 9px;
        padding: 10px 11px;
        border-left-width: 5px;
        border-radius: 12px;
    }

    .tips-screen .tips-v1-total span {
        font-size: 10px;
    }

    .tips-screen .tips-v1-total strong {
        font-size: 21px;
    }

    .tips-screen .tips-worker-bars {
        gap: 9px;
    }

    .tips-screen .tips-worker-bar {
        gap: 4px;
        padding: 8px;
        border: 1px solid rgba(11, 43, 28, 0.08);
        border-radius: 11px;
        background: #fffdf8;
    }

    .tips-screen .tips-person-bar-card {
        gap: 4px;
        padding: 8px;
        border-radius: 11px;
    }

    .tips-screen .tips-worker-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .tips-screen .tips-worker-top strong {
        font-size: 12px;
        line-height: 1.2;
    }

    .tips-screen .tips-person-bar-card small {
        font-size: 10px;
        line-height: 1.25;
    }

    .tips-screen .tips-week-bar-track {
        height: 6px;
        border-radius: 999px;
    }

    .tips-screen .tips-row {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 12px;
    }

    .tips-screen .tips-row .admin-user-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 13px;
    }

    .tips-screen .tips-row .admin-user-info strong,
    .tips-screen .permission-source-grid h2 {
        font-size: 14px;
        line-height: 1.2;
    }

    .tips-screen .tips-row .admin-user-info span,
    .tips-screen .tips-row .admin-user-info small {
        font-size: 10px;
        line-height: 1.25;
    }

    .tips-screen .tips-row .admin-user-badges,
    .tips-screen .tips-row .admin-actions-grid {
        grid-column: 1 / -1;
    }

    .tips-screen .tips-row .admin-user-badges {
        gap: 5px;
    }

    .tips-screen .admin-badge {
        padding: 4px 7px;
        font-size: 10px;
        border-radius: 999px;
    }

    .tips-screen .admin-action-link,
    .tips-screen .admin-action-button,
    .tips-screen .admin-inline-form button {
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 9px;
        font-size: 10px;
        gap: 4px;
    }

    .tips-screen .admin-action-link .td-icon,
    .tips-screen .admin-action-button .td-icon,
    .tips-screen .admin-inline-form button .td-icon {
        width: 13px;
        height: 13px;
    }

    .tips-screen .permission-source-grid {
        padding: 9px;
        border-radius: 12px;
        gap: 7px;
    }

    .tips-screen .admin-permission-cloud {
        gap: 5px;
    }

    .tips-screen .admin-permission-cloud span {
        padding: 4px 7px;
        font-size: 10px;
    }

    .tips-screen .tips-payment-card,
    .tips-screen .tips-calculation-card,
    .tips-screen .my-tips-list-card {
        margin-top: 9px;
    }

    .tips-screen .tips-payment-grid,
    .tips-screen .my-tips-list {
        gap: 7px;
    }

    .tips-screen .tips-allocation-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px;
        border-radius: 12px;
    }

    .tips-screen .tips-allocation-main {
        gap: 5px;
    }

    .tips-screen .tips-allocation-main h3 {
        font-size: 14px;
    }

    .tips-screen .tips-allocation-main strong {
        font-size: 16px;
    }

    .tips-screen .tips-allocation-main small {
        font-size: 10px;
    }

    .tips-screen .tips-allocation-row .admin-inline-form button {
        width: 100%;
        min-height: 34px;
    }

    .tips-screen .my-tip-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
        border-radius: 12px;
    }

    .tips-screen .my-tip-card strong {
        font-size: 13px;
    }

    .tips-screen .my-tip-card small {
        font-size: 10px;
    }

    .tips-index-screen .tips-index-header {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .tips-index-screen .tips-index-header > div:first-child {
        min-width: 0;
    }

    .tips-index-screen .tips-index-header .eyebrow {
        font-size: 9px;
        line-height: 1;
    }

    .tips-index-screen .tips-index-header h1 {
        font-size: 22px;
        line-height: 1.05;
    }

    .tips-index-screen .tips-index-header span {
        font-size: 10px;
        line-height: 1.15;
    }

    .tips-index-screen .tips-index-header .admin-hero-actions {
        width: auto;
        grid-column: 2;
        grid-row: 1;
    }

    .tips-index-screen .tips-index-header .admin-hero-link {
        width: auto;
        min-height: 34px;
        padding: 6px 9px;
        border-radius: 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .tips-index-screen .tips-index-header .admin-users-count {
        width: auto;
        min-width: 0;
        grid-column: 1 / -1;
        grid-template-columns: auto auto auto;
        justify-self: start;
        justify-items: start;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(11, 43, 28, 0.08);
        color: var(--green-900);
    }

    .tips-index-screen .tips-index-header .admin-users-count .td-icon {
        width: 13px;
        height: 13px;
    }

    .tips-index-screen .tips-index-header .admin-users-count strong {
        color: var(--green-900);
        font-size: 12px;
    }

    .tips-index-screen .tips-index-header .admin-users-count span {
        color: var(--muted);
        font-size: 10px;
    }
}

.tips-create-form-row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 10px;
}

.tips-create-form-row > label,
.tips-create-notes {
    min-width: 0;
}

.tips-create-screen .tips-create-notes {
    margin-top: 2px;
}

@media (max-width: 767px) {
    .tips-create-screen {
        padding-bottom: 104px !important;
    }

    .tips-create-screen .tips-create-header {
        padding: 12px;
        gap: 9px;
        margin-bottom: 10px;
        border-radius: 14px;
    }

    .tips-create-screen .tips-create-header h1 {
        font-size: 22px;
        line-height: 1.05;
    }

    .tips-create-screen .tips-create-header span {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.2;
    }

    .tips-create-screen .tips-create-header .admin-hero-link {
        min-height: 34px;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 11px;
    }

    .tips-create-screen .edit-permissions-card {
        padding: 10px;
        border-radius: 14px;
    }

    .tips-create-screen .permissions-edit-form {
        gap: 9px;
    }

    .tips-create-screen .permission-group-fieldset {
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
    }

    .tips-create-screen .permission-group-fieldset legend {
        padding: 0 4px;
        font-size: 12px;
        line-height: 1.15;
    }

    .tips-create-screen .login-form {
        gap: 5px;
        font-size: 11px;
        line-height: 1.15;
    }

    .tips-create-screen .login-form input,
    .tips-create-screen .login-form select {
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 13px;
        box-sizing: border-box;
    }

    .tips-create-form-row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 8px;
        align-items: end;
    }

    .tips-create-screen .tips-select-actions {
        gap: 6px;
        margin-bottom: 6px;
    }

    .tips-create-screen .tips-select-actions .admin-action-button,
    .tips-create-screen .tips-select-actions .admin-action-link {
        min-height: 31px;
        padding: 5px 8px;
        border-radius: 9px;
        font-size: 10px;
    }

    .tips-create-screen .tips-participants-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tips-create-screen .tips-participant-item {
        min-height: 42px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 7px;
        padding: 7px 8px;
        border-radius: 10px;
    }

    .tips-create-screen .tips-participant-item input {
        width: 18px;
        height: 18px;
    }

    .tips-create-screen .tips-participant-item span {
        font-size: 12px;
        line-height: 1.15;
    }

    .tips-create-screen .tips-participant-item strong {
        grid-column: auto;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .tips-create-screen .tips-preview {
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.25;
    }

    .tips-create-screen .edit-permissions-actions {
        gap: 7px;
        margin-top: 2px;
    }

    .tips-create-screen .edit-permissions-actions a,
    .tips-create-screen .edit-permissions-actions button {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .tips-create-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hours-screen {
        padding-bottom: 112px !important;
    }

    .hours-screen .hours-compact-hero {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .hours-screen .hours-compact-hero > div:first-child {
        min-width: 0;
    }

    .hours-screen .hours-compact-hero .eyebrow {
        font-size: 9px;
        line-height: 1;
    }

    .hours-screen .hours-compact-hero h1 {
        font-size: 22px;
        line-height: 1.05;
    }

    .hours-screen .hours-compact-hero span {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.15;
    }

    .hours-screen .hours-compact-hero .admin-hero-actions {
        width: auto;
        grid-column: 2;
        justify-content: end;
    }

    .hours-screen .hours-compact-hero .admin-hero-link {
        width: auto;
        min-height: 34px;
        padding: 6px 9px;
        border-radius: 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .hours-screen .hours-compact-hero .admin-users-count {
        width: auto;
        min-width: 0;
        grid-column: 1 / -1;
        grid-template-columns: auto auto auto;
        justify-self: start;
        justify-items: start;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(11, 43, 28, 0.08);
        color: var(--green-900);
    }

    .hours-screen .hours-compact-hero .admin-users-count .td-icon {
        width: 13px;
        height: 13px;
    }

    .hours-screen .hours-compact-hero .admin-users-count strong {
        color: var(--green-900);
        font-size: 12px;
    }

    .hours-screen .hours-compact-hero .admin-users-count span {
        color: var(--muted);
        font-size: 10px;
    }

    .hours-screen .hours-spotlight {
        gap: 8px;
        margin-bottom: 10px;
    }

    .hours-screen .hours-total-highlight {
        min-height: 82px;
        padding: 12px;
        border-radius: 14px;
        gap: 4px;
    }

    .hours-screen .hours-total-highlight strong {
        font-size: 24px;
        line-height: 1.05;
    }

    .hours-screen .hours-total-highlight span,
    .hours-screen .hours-total-highlight small {
        font-size: 10px;
        line-height: 1.2;
    }

    .hours-screen .hours-quick-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .hours-screen .hours-quick-totals article {
        min-height: 56px;
        padding: 8px;
        border-radius: 12px;
        gap: 3px;
    }

    .hours-screen .hours-quick-totals span {
        font-size: 10px;
        line-height: 1.15;
    }

    .hours-screen .hours-quick-totals strong {
        font-size: 14px;
        line-height: 1.15;
    }

    .hours-screen .hours-filter-card,
    .hours-screen .hours-calendar-card,
    .hours-screen .hours-day-records-card,
    .hours-screen .hours-form-card {
        padding: 10px;
        border-radius: 14px;
    }

    .hours-screen .hours-filter-form {
        gap: 8px;
    }

    .hours-screen .admin-section-head h2 {
        font-size: 15px;
    }

    .hours-screen .hours-record-row {
        gap: 8px;
        padding: 9px;
        border-radius: 12px;
    }

    .hours-screen .hours-record-facts {
        gap: 5px;
    }

    .hours-screen .hours-record-facts span,
    .hours-screen .admin-badge {
        padding: 4px 7px;
        font-size: 10px;
    }

    .hours-form-screen .hours-turn-form {
        gap: 9px;
    }

    .hours-form-screen .permission-group-fieldset {
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
    }

    .hours-form-screen .login-form {
        gap: 5px;
        font-size: 11px;
        line-height: 1.15;
    }

    .hours-form-screen .login-form input,
    .hours-form-screen .login-form select {
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 13px;
        box-sizing: border-box;
    }

    .hours-form-screen .hours-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hours-form-screen .admin-checkbox-line {
        min-height: 38px;
        padding: 7px 9px;
        border-radius: 10px;
    }

    .hours-form-screen .hours-preview {
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.25;
    }

    .hours-form-screen .edit-permissions-actions {
        gap: 7px;
    }

    .hours-form-screen .edit-permissions-actions a,
    .hours-form-screen .edit-permissions-actions button {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 11px;
    }
}

@media (max-width: 350px) {
    .hours-form-screen .hours-time-grid {
        grid-template-columns: 1fr;
    }
}

.master-article-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.master-article-summary article {
    border-radius: 8px;
}

.master-article-summary article strong {
    display: block;
}

.master-article-summary article span {
    display: block;
}

.master-article-page-head {
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.master-article-page-head h1 {
    line-height: 1.05;
}

.master-article-page-head .btn {
    min-height: 34px;
    padding: 8px 12px;
}

.master-article-filters .muted-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.master-filter-title {
    margin: 0 0 10px;
    color: var(--green-900);
    font-size: 0.9rem;
    font-weight: 900;
}

.master-article-filters .filters-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(150px, 0.8fr) minmax(190px, 1fr) minmax(130px, 0.7fr) auto;
    gap: 10px;
    align-items: end;
}

.master-article-filters .filters-bar label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--green-900);
    font-weight: 800;
    font-size: 0.88rem;
}

.master-article-filters .filters-bar input,
.master-article-filters .filters-bar select {
    width: 100%;
    min-width: 0;
}

.master-article-group {
    display: grid;
    gap: 14px;
}

.master-article-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.master-article-group-head h2 {
    margin: 2px 0 0;
    font-size: 1.25rem;
}

.master-article-table-wrap {
    overflow-x: auto;
}

.master-article-table th,
.master-article-table td {
    vertical-align: middle;
}

.master-article-table th:nth-child(1),
.master-article-table td:nth-child(1) {
    width: 22%;
}

.master-article-table th:nth-child(2),
.master-article-table td:nth-child(2),
.master-article-table th:nth-child(4),
.master-article-table td:nth-child(4) {
    width: 12%;
    white-space: nowrap;
}

.master-article-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inline-toggle-form {
    margin: 0;
}

.btn-compact {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.86rem;
}

.master-article-suggestions {
    border-color: rgba(224, 177, 59, 0.4);
}

.master-suggestion-list {
    display: grid;
    gap: 8px;
}

.master-suggestion-list article {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
}

.master-suggestion-list strong,
.master-suggestion-list span {
    display: block;
}

.master-suggestion-list small {
    display: block;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.master-article-card-list {
    display: none;
}

.master-article-card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
}

.master-article-card-title {
    min-width: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.master-article-card-meta {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.master-article-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.master-article-status {
    flex-shrink: 0;
}

.master-article-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.master-classify-panel,
.master-origin-panel {
    max-width: 760px;
    margin-inline: auto;
}

.master-classify-hero {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.master-classify-hero span,
.master-classify-hero small {
    color: var(--muted);
}

.master-classify-hero strong {
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.master-classify-form {
    margin-top: 14px;
}

.master-origin-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.master-origin-list div {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.master-origin-list dt {
    color: var(--muted);
    font-weight: 700;
}

.master-origin-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .master-article-page-head {
        align-items: center;
        margin-top: 12px;
        padding: 12px;
        border-radius: 16px;
        gap: 10px;
    }

    .master-article-page-head h1 {
        font-size: 1.42rem;
        margin: 0 0 2px;
    }

    .master-article-page-head span {
        font-size: 0.82rem;
    }

    .master-article-page-head .btn {
        width: auto;
        min-width: 0;
        max-width: 128px;
        padding-inline: 10px;
        white-space: nowrap;
    }

    .master-article-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .master-article-summary article {
        min-width: 0;
        padding: 8px 10px;
        border-radius: 8px;
    }

    .master-article-summary article span {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.15;
    }

    .master-article-summary article strong {
        display: block;
        margin: 0 0 2px;
        font-size: 1.2rem;
        line-height: 1;
    }

    .master-article-filters {
        padding: 12px;
    }

    .master-filter-title {
        margin-bottom: 8px;
        font-size: 0.84rem;
    }

    .master-article-filters .filters-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .master-article-filters .filters-bar label {
        gap: 4px;
        font-size: 0.82rem;
    }

    .master-article-filters .filters-bar .btn {
        width: fit-content;
        min-width: 88px;
        min-height: 34px;
        padding: 7px 11px;
    }

    .master-article-filters .muted-note {
        margin-top: 8px;
        font-size: 0.8rem;
    }

    .master-article-group {
        gap: 8px;
        padding: 12px;
    }

    .master-article-group-head {
        align-items: center;
        gap: 8px;
    }

    .master-article-group-head .eyebrow {
        display: none;
    }

    .master-article-group-head h2 {
        margin: 0;
        font-size: 0.94rem;
        letter-spacing: 0;
    }

    .master-article-group-head .readonly-badge {
        white-space: nowrap;
        font-size: 0.76rem;
    }

    .master-article-table-wrap {
        display: none;
    }

    .master-article-card-list {
        display: grid;
        gap: 7px;
    }

    .master-article-card {
        padding: 9px;
        gap: 5px;
    }

    .master-article-card-footer {
        flex-wrap: wrap;
        margin-top: 2px;
    }

    .master-article-actions {
        margin-left: auto;
    }

    .master-article-actions .btn,
    .master-article-actions .inline-toggle-form {
        flex: 0 0 auto;
    }

    .master-article-actions .btn {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 0.8rem;
    }

    .master-suggestion-list article {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 9px;
    }

    .master-origin-list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.etpos-compact-header {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
}

.etpos-header-main {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}

.etpos-compact-header h1 {
    color: var(--green-900);
    font-size: 1.35rem;
    line-height: 1.1;
    margin: 0;
}

.etpos-header-subtitle {
    color: var(--muted);
    display: block;
    font-size: .86rem;
    line-height: 1.25;
}

.etpos-compact-header .admin-hero-link {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    width: auto;
    white-space: nowrap;
}

.etpos-tabs {
    background: #f4f6f1;
    border: 1px solid var(--border);
    border-radius: 8px;
    gap: 5px;
    padding: 5px;
}

.etpos-tabs a {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #1e3128;
    font-size: .88rem;
    font-weight: 700;
    min-height: 32px;
    padding: 6px 10px;
}

.etpos-tabs a.is-active,
.etpos-tabs a:hover {
    background: #d8a541;
    border-color: #bd8b24;
    color: #18251e;
}

@media (max-width: 640px) {
    .etpos-screen {
        padding-bottom: 120px;
    }

    .etpos-compact-header {
        gap: 4px;
        padding: 9px 10px;
    }

    .etpos-header-main {
        align-items: center;
        gap: 8px;
    }

    .etpos-compact-header h1 {
        font-size: 1.16rem;
    }

    .etpos-header-subtitle {
        font-size: .78rem;
    }

    .etpos-compact-header .admin-hero-link {
        min-height: 31px;
        padding: 6px 8px;
        width: auto;
    }

    .etpos-tabs {
        gap: 4px;
        overflow-x: auto;
        padding: 4px;
    }

    .etpos-tabs a {
        flex: 1 0 auto;
        font-size: .78rem;
        min-height: 30px;
        padding: 5px 8px;
    }
}

.etpos-manager-card h2,
.etpos-chart-card h2 {
    font-size: 1.12rem;
}

.etpos-bar-list article {
    min-width: 0;
}

.etpos-bar-list article strong {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .etpos-screen {
        padding-bottom: 120px;
    }

    .etpos-compact-header {
        align-items: flex-start;
        padding: 9px 10px;
    }

    .etpos-compact-header h1 {
        font-size: 1.16rem;
    }

    .etpos-compact-header span {
        font-size: .78rem;
    }

    .etpos-compact-header .admin-hero-link {
        min-height: 31px;
        padding: 6px 8px;
    }

    .etpos-tabs {
        gap: 4px;
        overflow-x: auto;
        padding: 4px;
    }

    .etpos-tabs a {
        flex: 1 0 auto;
        font-size: .78rem;
        min-height: 30px;
        padding: 5px 8px;
    }
}

.etpos-kpi-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.etpos-screen {
    padding-bottom: 96px;
}

.etpos-kpi-grid article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 92px;
    padding: 13px;
}

.etpos-kpi-grid article.has-warning {
    border-color: #d9922e;
    box-shadow: inset 0 0 0 1px rgba(217, 146, 46, .18);
}

.etpos-kpi-grid span,
.etpos-kpi-grid small,
.etpos-bar-list small,
.etpos-split-labels,
.etpos-legend {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.etpos-kpi-grid span {
    display: block;
    text-transform: uppercase;
}

.etpos-kpi-grid strong {
    color: var(--green-900);
    display: block;
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 5px 0 3px;
}

.etpos-empty-state {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px;
}

.etpos-empty-state h2 {
    color: var(--green-900);
    font-size: 1.15rem;
    margin: 0 0 4px;
}

.etpos-empty-state span {
    color: var(--muted);
    display: block;
    font-size: .9rem;
}

.etpos-chart-card {
    padding: 16px;
}

.etpos-day-bars {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    min-height: 190px;
}

.etpos-day-bars article {
    display: grid;
    gap: 6px;
    justify-items: center;
    min-width: 0;
}

.etpos-day-bar-track {
    align-items: end;
    background: #f3f6f0;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 3px;
    height: 132px;
    justify-content: center;
    padding: 8px 7px;
    width: 100%;
}

.etpos-day-bar-track span {
    border-radius: 999px 999px 3px 3px;
    display: block;
    max-height: 100%;
    min-height: 3px;
    width: 14px;
}

.etpos-day-bar-track .real,
.etpos-legend .real,
.etpos-split-bar .real,
.etpos-stacked-progress .real {
    background: #2f7d59;
}

.etpos-day-bar-track .training,
.etpos-legend .training,
.etpos-split-bar .training,
.etpos-stacked-progress .training {
    background: #d6a23a;
}

.etpos-day-bars strong {
    color: var(--green-900);
    font-size: .9rem;
}

.etpos-day-bars small {
    color: var(--muted);
    font-weight: 700;
}

.etpos-legend {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.etpos-legend span {
    border-radius: 999px;
    display: inline-block;
    height: 9px;
    width: 18px;
}

.etpos-split-bar,
.etpos-stacked-progress,
.etpos-progress {
    background: #eef2ea;
    border-radius: 999px;
    overflow: hidden;
}

.etpos-split-bar {
    display: flex;
    height: 20px;
    margin-top: 8px;
}

.etpos-split-bar span {
    display: block;
    min-width: 2px;
}

.etpos-split-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    margin: 8px 0 16px;
}

.etpos-split-labels strong {
    color: var(--green-900);
}

.etpos-bar-list {
    display: grid;
    gap: 9px;
}

.etpos-bar-list article,
.etpos-day-list article,
.etpos-issue-list article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    padding: 10px;
}

.etpos-bar-list article {
    grid-template-columns: minmax(0, 1fr) auto;
}

.etpos-bar-list strong,
.etpos-day-list strong,
.etpos-issue-list strong {
    color: var(--green-900);
    overflow-wrap: anywhere;
    word-break: normal;
}

.etpos-bar-list span {
    color: var(--green-900);
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.etpos-progress,
.etpos-stacked-progress {
    grid-column: 1 / -1;
    height: 9px;
}

.etpos-progress i,
.etpos-stacked-progress i {
    display: block;
    height: 100%;
}

.etpos-progress i {
    background: #2f7d59;
    border-radius: 999px;
}

.etpos-stacked-progress {
    display: flex;
}

.etpos-day-list {
    display: grid;
    gap: 9px;
}

.etpos-day-list article {
    grid-template-columns: minmax(0, 1fr) auto;
}

.etpos-day-list span {
    color: var(--green-900);
    font-weight: 800;
}

.etpos-issue-list {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.etpos-issue-list article {
    border-color: #e2b66b;
    background: #fffaf0;
}

.etpos-issue-list article.is-ok {
    background: #f5faf6;
    border-color: #bddfc9;
}

.etpos-issue-list span {
    color: var(--green-900);
}

.etpos-issue-list small {
    color: var(--muted);
    font-weight: 700;
}

@media (max-width: 640px) {
    .etpos-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .etpos-kpi-grid article,
    .etpos-chart-card,
    .etpos-bar-list article,
    .etpos-day-list article,
    .etpos-issue-list article {
        padding: 10px;
    }

    .etpos-kpi-grid strong {
        font-size: 1.18rem;
    }

    .etpos-empty-state {
        align-items: stretch;
        flex-direction: column;
    }

    .etpos-empty-state .btn-primary {
        justify-content: center;
        width: 100%;
    }

    .etpos-day-bars {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 160px;
    }

    .etpos-day-bar-track {
        height: 104px;
        padding: 6px 4px;
    }

    .etpos-day-bar-track span {
        width: 10px;
    }

    .etpos-bar-list article,
    .etpos-day-list article {
        grid-template-columns: 1fr;
    }

    .etpos-bar-list span,
    .etpos-day-list span {
        text-align: left;
    }
}

@media (max-width: 390px) {
    .etpos-kpi-grid,
    .etpos-day-bars,
    .etpos-issue-list {
        grid-template-columns: 1fr;
    }
}

.etpos-screen {
    gap: 16px;
}

.etpos-hero {
    padding-block: 18px;
}

.etpos-hero h1 {
    font-size: 2rem;
}

.etpos-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.etpos-tabs a {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #1e3128;
    font-size: .86rem;
    font-weight: 700;
    min-height: 32px;
    padding: 6px 10px;
    text-decoration: none;
}

.etpos-tabs a.is-active,
.etpos-tabs a:hover {
    background: #d8a541;
    border-color: #bd8b24;
    color: #18251e;
}

.etpos-summary-grid,
.etpos-compact-grid,
.etpos-alert-grid,
.etpos-days-grid {
    display: grid;
    gap: 10px;
}

.etpos-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.etpos-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 16px;
}

.etpos-summary-grid article,
.etpos-compact-grid article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.etpos-summary-grid span,
.etpos-compact-grid span {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.etpos-summary-grid strong,
.etpos-compact-grid strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.2;
    margin-top: 4px;
}

.etpos-summary-grid small,
.etpos-compact-grid small {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    margin-top: 4px;
}

.etpos-filter-card,
.etpos-manager-card,
.etpos-technical {
    padding: 18px;
}

.etpos-date-form {
    align-items: end;
}

.etpos-manager-card h2,
.etpos-technical h2 {
    font-size: 1.15rem;
}

.etpos-manager-card h3 {
    font-size: .96rem;
    margin: 18px 0 10px;
}

.etpos-alert-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.etpos-alert-grid span,
.etpos-days-grid .readonly-note {
    font-size: .9rem;
}

.etpos-technical summary {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
}

.etpos-technical > *:not(summary) {
    margin-top: 14px;
}

.etpos-readonly-banner {
    margin: 0;
}

.etpos-future-note {
    color: var(--muted);
    font-size: .86rem;
    margin: 0;
}

@media (max-width: 760px) {
    .etpos-hero h1 {
        font-size: 1.55rem;
    }

    .etpos-tabs a {
        font-size: .82rem;
        padding: 7px 10px;
    }

    .etpos-summary-grid,
    .etpos-compact-grid,
    .etpos-alert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .etpos-summary-grid article,
    .etpos-compact-grid article,
    .etpos-filter-card,
    .etpos-manager-card,
    .etpos-technical {
        padding: 12px;
    }

    .etpos-summary-grid strong,
    .etpos-compact-grid strong {
        font-size: 1rem;
    }

    .etpos-date-form {
        align-items: stretch;
    }
}

@media (max-width: 420px) {
    .etpos-summary-grid,
    .etpos-compact-grid,
    .etpos-alert-grid {
        grid-template-columns: 1fr;
    }
}

.vendas-shortcut-grid,
.vendas-master-list,
.vendas-master-metrics,
.vendas-master-foot {
    display: grid;
    gap: 10px;
}

.vendas-shortcut-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vendas-shortcut-grid a {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
}

.vendas-shortcut-grid strong,
.vendas-master-main strong {
    color: var(--green-900);
    overflow-wrap: anywhere;
}

.vendas-shortcut-grid span,
.vendas-master-main span,
.vendas-master-main small,
.vendas-master-metrics small,
.vendas-master-foot {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.vendas-master-filter-card {
    overflow: visible;
}

.vendas-master-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
    gap: 8px;
}

.vendas-master-filters label {
    align-self: center;
    color: var(--muted);
    display: grid;
    font-size: .76rem;
    font-weight: 800;
    gap: 4px;
    min-width: 0;
}

.vendas-master-filters input,
.vendas-master-filters select {
    min-width: 0;
    width: 100%;
}

.vendas-master-filters button {
    align-self: end;
}

.vendas-executive-grid article {
    min-width: 0;
}

.vendas-executive-grid strong {
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.vendas-master-list article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    padding: 12px;
}

.vendas-top-list article {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
}

.vendas-master-list article.is-unmatched {
    background: #fffaf0;
    border-color: #e2b66b;
}

.vendas-master-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.vendas-master-main strong {
    font-size: 1rem;
}

.vendas-master-main span {
    overflow-wrap: anywhere;
}

.vendas-master-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vendas-master-metrics span {
    background: #f6f8f3;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px;
}

.vendas-master-metrics b {
    color: var(--green-900);
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.vendas-master-foot {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vendas-master-foot span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.vendas-unmatched-note {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.vendas-unmatched-note div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.vendas-unmatched-note strong,
.vendas-unmatched-note span,
.vendas-unmatched-note small {
    overflow-wrap: anywhere;
}

.vendas-impact-badge {
    background: #fff;
    border: 1px solid rgba(15, 116, 64, .24);
    border-radius: 999px;
    color: var(--green-900);
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 900;
    padding: 6px 9px;
}

@media (max-width: 980px) {
    .vendas-shortcut-grid,
    .vendas-master-list article {
        grid-template-columns: 1fr;
    }

    .vendas-master-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendas-master-filters button {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .vendas-master-screen,
    .vendas-master-screen * {
        max-width: 100%;
    }

    .vendas-master-filters,
    .vendas-master-metrics,
    .vendas-master-foot {
        grid-template-columns: 1fr;
    }

    .vendas-executive-grid {
        gap: 7px;
    }

    .vendas-master-list article,
    .vendas-shortcut-grid a {
        padding: 10px;
    }

    .vendas-master-metrics b {
        font-size: .9rem;
    }

    .vendas-unmatched-note {
        align-items: flex-start;
    }

    .vendas-impact-badge {
        width: 100%;
        text-align: center;
    }
}

/* Menu Digital V2 */
.menu-public-body {
    margin: 0;
    background: #07170f;
    color: #f5ead5;
    font-family: Georgia, "Times New Roman", serif;
}

.digital-menu-public {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -80px, rgba(232, 192, 74, 0.18), transparent 260px),
        linear-gradient(180deg, #07170f 0%, #102313 42%, #07170f 100%);
    padding: 18px 14px 42px;
}

.digital-menu-hero {
    max-width: 520px;
    margin: 0 auto 16px;
    text-align: center;
    padding: 18px 14px 16px;
    border: 1px solid rgba(232, 192, 74, 0.28);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(14, 47, 28, 0.96), rgba(7, 23, 15, 0.98));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

.digital-menu-hero img {
    width: 94px;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(232, 192, 74, 0.35));
}

.digital-menu-hero.language-hero {
    margin-top: 28px;
    border-color: rgba(232, 192, 74, 0.34);
    background:
        radial-gradient(circle at 50% 34%, rgba(232, 192, 74, 0.12), transparent 96px),
        linear-gradient(145deg, rgba(14, 47, 28, 0.98), rgba(7, 23, 15, 0.99));
}

.digital-menu-hero.language-hero img {
    width: 112px;
}

.digital-menu-hero span,
.digital-menu-section-head span {
    display: block;
    color: rgba(232, 192, 74, 0.72);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.digital-menu-hero h1,
.digital-menu-section-head h2 {
    margin: 6px 0 2px;
    color: #e8c04a;
    letter-spacing: 0;
}

.digital-menu-hero p,
.digital-menu-footer p {
    margin: 4px 0;
    color: rgba(245, 234, 213, 0.62);
    font-size: 13px;
}

.digital-menu-section {
    max-width: 560px;
    margin: 0 auto 20px;
    scroll-margin-top: 72px;
}

.digital-menu-section-head {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(232, 192, 74, 0.28);
    padding-bottom: 7px;
}

.digital-menu-section-head h2 {
    min-width: 0;
    flex: 1 1 180px;
    font-size: 19px;
    overflow-wrap: anywhere;
}

.digital-menu-section-head span {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    text-align: right;
    overflow-wrap: anywhere;
}

.digital-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.digital-category-card {
    display: flex;
    min-height: 88px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border: 1px solid rgba(232, 192, 74, 0.36);
    border-radius: 14px;
    background: linear-gradient(135deg, #092718 0%, #18351e 100%);
    color: #f5ead5;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.digital-category-card:active,
.digital-category-card:hover {
    transform: scale(1.018);
    border-color: rgba(232, 192, 74, 0.78);
    box-shadow: 0 8px 24px rgba(232, 192, 74, 0.12);
}

.digital-category-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #e8c04a;
    line-height: 1;
}

.digital-category-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 8px rgba(232, 192, 74, 0.22));
}

.digital-category-card strong {
    font-size: 13px;
    line-height: 1.18;
}

.digital-category-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    max-width: 560px;
    margin: 0 auto 18px;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    background: rgba(13, 26, 13, 0.96);
    scrollbar-width: none;
}

.digital-category-nav::-webkit-scrollbar {
    display: none;
}

.digital-category-nav a {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(232, 192, 74, 0.2);
    border-radius: 999px;
    color: #e8c04a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
}

.digital-dish-list {
    display: grid;
    gap: 9px;
}

.digital-beverage-section-title {
    margin: 12px 2px 2px;
    padding: 8px 10px;
    border: 1px solid rgba(232, 192, 74, 0.24);
    border-radius: 10px;
    background: rgba(232, 192, 74, 0.08);
    color: #e8c04a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.digital-dish-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 96px;
    overflow: hidden;
    border: 1px solid rgba(232, 192, 74, 0.28);
    border-radius: 13px;
    background: rgba(11, 37, 22, 0.96);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.26);
}

.digital-dish-photo,
.digital-dish-placeholder {
    width: 78px;
    height: 100%;
    min-height: 96px;
    background:
        radial-gradient(circle at center, rgba(232, 192, 74, 0.18), transparent 44px),
        #142d1b;
}

.digital-dish-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.digital-dish-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(232, 192, 74, 0.38);
    padding: 6px;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
}

.digital-dish-body {
    min-width: 0;
    padding: 10px 11px;
}

.digital-dish-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.digital-dish-title-row h3 {
    margin: 0;
    color: #f5ead5;
    font-size: 15px;
    line-height: 1.2;
}

.digital-dish-title-row h3 small {
    color: rgba(245, 234, 213, 0.52);
    font-size: 12px;
    font-weight: 400;
}

.digital-dish-title-row strong {
    flex: 0 0 auto;
    color: #e8c04a;
    font-size: 14px;
    white-space: nowrap;
}

.digital-dish-body p {
    margin: 6px 0 0;
    color: rgba(245, 234, 213, 0.68);
    font-size: 12px;
    line-height: 1.32;
}

.digital-dish-badges,
.menu-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.digital-dish-badges span,
.menu-status-line span {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(232, 192, 74, 0.14);
    color: #e8c04a;
    font-size: 10px;
    font-weight: 700;
}

.digital-allergens {
    margin-top: 8px;
    color: rgba(245, 234, 213, 0.48);
    font-size: 11px;
}

.digital-menu-empty {
    max-width: 520px;
    margin: 18px auto;
    padding: 16px;
    border: 1px solid rgba(232, 192, 74, 0.24);
    border-radius: 14px;
    background: #1a2e1a;
    text-align: center;
}

.digital-menu-empty.small {
    margin: 8px 0;
    text-align: left;
}

.digital-menu-footer {
    max-width: 560px;
    margin: 28px auto 0;
    text-align: center;
}

.digital-menu-footer p.digital-powered-by {
    margin-top: 18px;
    color: #e8c04a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.digital-language-picker + .digital-menu-footer p.digital-powered-by {
    margin-top: 28px;
}

.digital-ornament {
    height: 1px;
    margin: 14px auto;
    max-width: 240px;
    background: linear-gradient(to right, transparent, rgba(232, 192, 74, 0.7), transparent);
}

.digital-menu-tools {
    max-width: 560px;
    display: flex;
    justify-content: flex-end;
    margin: -4px auto 14px;
}

.digital-language-change {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(232, 192, 74, 0.28);
    border-radius: 999px;
    background: rgba(232, 192, 74, 0.1);
    color: #f5ead5;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.digital-language-picker {
    max-width: 520px;
    margin: 0 auto 24px;
    text-align: center;
}

.digital-language-picker > p {
    margin: 0 0 22px;
    color: rgba(232, 192, 74, 0.78);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.digital-language-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 14px;
}

.digital-language-option {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: rgba(245, 234, 213, 0.72);
    text-decoration: none;
    transition: transform 0.16s ease, color 0.16s ease;
}

.digital-language-option:hover,
.digital-language-option:active {
    color: #f5ead5;
    transform: translateY(-2px) scale(1.04);
}

.digital-language-flag {
    display: block;
    width: 58px;
    height: 58px;
    border: 2px solid rgba(232, 192, 74, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.48);
    overflow: hidden;
}

.digital-language-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.digital-language-option strong {
    max-width: 76px;
    font-size: 11px;
    line-height: 1.18;
}

.digital-category-pt {
    display: block;
    margin-top: -2px;
    color: rgba(245, 234, 213, 0.5);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
}

.digital-category-pt.section-ref {
    flex: 1 0 100%;
    margin-top: 2px;
    color: rgba(232, 192, 74, 0.58);
    text-transform: none;
    text-align: left;
    overflow-wrap: anywhere;
}

.digital-dish-reference {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 5px;
    color: rgba(245, 234, 213, 0.58);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.digital-dish-code {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid rgba(232, 192, 74, 0.22);
    border-radius: 999px;
    color: rgba(232, 192, 74, 0.84);
    background: rgba(232, 192, 74, 0.08);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.menu-admin-screen {
    padding-bottom: 96px;
}

.menu-admin-hero,
.menu-admin-card,
.menu-item-admin-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 16px;
    margin-bottom: 12px;
}

.menu-admin-hero span {
    color: var(--gold-700, #b8942a);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-admin-hero h1,
.menu-admin-card h1,
.menu-admin-card h2 {
    margin: 4px 0 6px;
}

.menu-admin-hero p,
.menu-admin-card p,
.menu-item-admin-card p,
.muted-text {
    color: var(--muted-text, #657080);
    font-size: 13px;
}

.menu-translation-count {
    margin: -4px 0 6px;
    color: var(--muted-text, #657080);
    font-size: 12px;
    font-weight: 700;
}

.menu-admin-grid,
.menu-form-grid,
.menu-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.menu-admin-action {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.menu-admin-action svg {
    color: var(--green-900, #064e3b);
}

.menu-admin-topline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.menu-admin-topline a,
.menu-row-actions a,
.menu-row-actions button,
.menu-filter-row button,
.menu-compact-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--green-900, #064e3b);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.menu-row-actions .danger,
.menu-row-actions button.danger {
    background: #dc2626;
}

.menu-compact-form {
    display: grid;
    gap: 10px;
}

.menu-compact-form label,
.menu-filter-row label {
    display: grid;
    gap: 5px;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
}

.menu-compact-form input,
.menu-compact-form select,
.menu-compact-form textarea,
.menu-filter-row select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
}

.menu-check {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 8px !important;
    font-weight: 700 !important;
}

.menu-check input {
    width: 16px;
    min-width: 16px;
    height: 16px;
}

.menu-row-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.menu-admin-list {
    display: grid;
    gap: 10px;
}

.menu-admin-row.is-active,
.menu-item-admin-card {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.menu-admin-row.is-muted,
.menu-item-admin-card.is-muted {
    opacity: 0.72;
    background: #f8fafc;
}

.menu-admin-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.menu-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.menu-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.menu-item-admin-main {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
}

.menu-item-thumb,
.menu-photo-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
}

.menu-item-thumb {
    display: flex;
    width: 74px;
    height: 74px;
    align-items: center;
    justify-content: center;
    color: var(--muted-text, #657080);
    font-size: 11px;
    text-align: center;
}

.menu-item-thumb img,
.menu-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-photo-preview {
    max-width: 320px;
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
}

.menu-allergens-box {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
}

.menu-allergens-box legend {
    padding: 0 6px;
    font-weight: 800;
}

.menu-translations-form {
    gap: 12px;
}

.menu-translation-box {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fbfcfb;
}

.menu-translation-box legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 7px;
    color: var(--green-900, #064e3b);
    font-weight: 900;
}

.menu-translation-box legend span {
    font-size: 18px;
}

@media (max-width: 767px) {
    .digital-language-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px 9px;
    }

    .digital-language-flag {
        width: 52px;
        height: 52px;
    }

    .digital-language-option strong {
        max-width: 58px;
        font-size: 10px;
    }

    .menu-admin-screen {
        padding-bottom: calc(128px + env(safe-area-inset-bottom));
    }

    .menu-admin-grid,
    .menu-form-grid,
    .menu-check-grid {
        grid-template-columns: 1fr;
    }

    .menu-filter-row {
        grid-template-columns: 1fr;
    }

    .menu-item-admin-main {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .menu-item-thumb {
        width: 62px;
        height: 62px;
    }

    .menu-row-title {
        align-items: flex-start;
    }
}

.whatsapp-reservas-screen {
    max-width: 430px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

.whatsapp-reservas-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.whatsapp-card {
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.whatsapp-card h2 {
    margin: 0;
    padding: 14px;
    background: var(--green-900);
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.2;
}

.whatsapp-card-body {
    padding: 14px;
}

.whatsapp-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f9fafb;
}

.whatsapp-status-row strong,
.whatsapp-block-row strong {
    display: block;
    color: var(--green-900);
    font-weight: 900;
}

.whatsapp-status-row span,
.whatsapp-block-row span,
.whatsapp-help {
    display: block;
    color: #4b5563;
    font-size: 0.78rem;
    line-height: 1.35;
}

.whatsapp-switch {
    position: relative;
    width: 56px;
    height: 30px;
    flex: 0 0 56px;
    margin: 0;
}

.whatsapp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.whatsapp-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.18s ease;
}

.whatsapp-switch span::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}

.whatsapp-switch input:checked + span {
    background: #16a34a;
}

.whatsapp-switch input:checked + span::before {
    transform: translateX(26px);
}

.whatsapp-field {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    color: var(--green-900);
    font-size: 0.82rem;
    font-weight: 900;
}

.whatsapp-field input,
.whatsapp-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #dbe1e7;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    font: inherit;
    padding: 11px 12px;
}

.whatsapp-help {
    margin: 8px 0 0;
}

.whatsapp-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: var(--green-900);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.whatsapp-time-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.whatsapp-block-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.whatsapp-block-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f9fafb;
}

.whatsapp-block-row form {
    margin: 0;
}

.whatsapp-block-row button {
    border: 0;
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 12px;
    cursor: pointer;
}

.whatsapp-preview {
    border: 1px solid #f3dfb2;
    border-radius: 14px;
    background: #fffdf7;
    color: var(--green-900);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.4;
    padding: 12px;
}

@media (max-width: 767px) {
    .mobile-manager .content-shell:has(.whatsapp-reservas-screen) {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
    }

    .whatsapp-reservas-screen {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .whatsapp-card h2 {
        padding: 13px 14px;
    }

    .whatsapp-card-body {
        padding: 13px;
    }
}

@media (max-width: 380px) {
    .whatsapp-time-grid {
        grid-template-columns: 1fr;
    }

    .whatsapp-block-row {
        grid-template-columns: 1fr;
    }
}

.campaign-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.campaigns-screen {
    max-width: 430px;
    margin-inline: auto;
}

.campaigns-top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.campaign-nav-button {
    border-radius: 12px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-weight: 900;
    text-decoration: none;
}

.campaign-nav-light {
    background: #e5e7eb;
    color: #0b2b1c;
}

.campaign-nav-dark {
    background: #0b3b25;
    color: #fff;
}

.campaign-form-card,
.campaigns-list-card {
    overflow: hidden;
    padding: 14px;
}

.campaigns-screen .campaign-form {
    display: grid;
    gap: 0;
}

.campaigns-screen .campaign-form label {
    display: block;
    min-width: 0;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 800;
    margin: 0 0 5px;
}

.campaigns-screen .campaign-form input,
.campaigns-screen .campaign-form textarea,
.campaigns-screen .campaign-form select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #dbe1e7;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.25;
    padding: 10px 11px;
    margin: 0 0 10px;
    box-shadow: none;
}

.campaigns-screen .campaign-form textarea {
    min-height: 76px;
    resize: vertical;
}

.campaigns-screen .campaign-form input::placeholder,
.campaigns-screen .campaign-form textarea::placeholder {
    color: #6b7280;
    opacity: 0.9;
}

.campaigns-screen .campaign-form input[type="date"],
.campaigns-screen .campaign-form input[type="time"] {
    -webkit-appearance: auto;
    appearance: auto;
    min-height: 42px;
    padding-right: 8px;
}

.campaigns-screen .campaign-form .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 2px 0 10px;
    color: #374151;
    font-size: 0.84rem;
    font-weight: 800;
}

.campaigns-screen .campaign-form .check-row input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
}

.campaigns-screen .campaign-form .check-row span {
    min-width: 0;
}

.campaigns-screen .campaign-form .edit-permissions-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
}

    .campaigns-screen .campaign-form .edit-permissions-actions a,
    .campaigns-screen .campaign-form .edit-permissions-actions button {
        min-height: 42px;
        border-radius: 14px;
        font-size: 0.82rem;
        font-weight: 900;
        padding: 10px 12px;
    }

    .campaigns-screen .campaign-form .edit-permissions-actions {
        padding-bottom: 4px;
        margin-bottom: 18px;
        scroll-margin-bottom: calc(220px + env(safe-area-inset-bottom));
    }

.campaign-section-title {
    margin: 0 0 12px;
    color: #0b2b1c;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 900;
}

.campaigns-list {
    display: grid;
    gap: 12px;
}

.campaign-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    background: #f9fafb;
}

.campaign-card.active {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.campaign-card.soldout {
    background: #fff7ed;
    border-color: #fed7aa;
}

.campaign-card.is-selected {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(224, 177, 59, 0.18);
}

.campaign-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.campaign-card h3 {
    margin: 0;
    color: #173b29;
    font-size: 0.95rem;
    font-weight: 900;
}

.campaign-card p {
    margin: 8px 0;
    color: #4b5563;
    line-height: 1.35;
    font-size: 0.86rem;
}

.campaign-card small {
    display: block;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
    line-height: 1.35;
    font-size: 0.84rem;
}

.campaign-card small + .campaign-meta-grid {
    margin-top: 10px;
}

.campaign-card strong {
    color: var(--green-900);
}

.campaign-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
    margin-top: 4px;
}

.campaign-badge.badge-on {
    background: #dcfce7;
    color: #166534;
}

.campaign-badge.badge-off {
    background: #e5e7eb;
    color: #4b5563;
}

.campaign-badge.badge-expired {
    background: #f3f4f6;
    color: #6b7280;
}

.campaign-badge.badge-sold {
    background: #ffedd5;
    color: #9a3412;
}

.campaign-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.campaign-meta-grid span,
.reservation-campaign-pill {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 5px 8px;
}

.campaign-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.campaign-actions form {
    margin: 0;
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
}

.campaign-actions button,
.campaign-actions .admin-action-link {
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    width: auto;
    flex: 0 0 auto;
    padding: 9px 11px;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.campaign-actions .edit-btn {
    background: #4b5563;
}

.campaign-actions .toggle-btn {
    background: #0b2b1c;
}

.campaign-actions .delete-btn {
    background: #dc2626;
}

.reservation-campaign-field small {
    display: block;
    margin-top: 5px;
    color: var(--ink-500);
    font-size: 0.8rem;
}

.reservation-campaign-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
}

@media (max-width: 767px) {
    html:has(.campaigns-screen) {
        scroll-padding-bottom: calc(220px + env(safe-area-inset-bottom));
    }

    body.mobile-manager:has(.campaigns-screen),
    body.mobile-staff:has(.campaigns-screen) {
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(190px + env(safe-area-inset-bottom));
    }

    .mobile-manager .content-shell:has(.campaigns-screen),
    .mobile-staff .content-shell:has(.campaigns-screen) {
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(230px + env(safe-area-inset-bottom));
    }

    .campaigns-screen {
        padding-inline: 0;
        padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(230px + env(safe-area-inset-bottom));
    }

    .campaigns-top-actions {
        margin-bottom: 12px;
    }

    .campaign-form-card,
    .campaigns-list-card {
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .campaign-form-card {
        margin-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .campaign-form-row {
        grid-template-columns: minmax(0, calc(50% - 4px)) minmax(0, calc(50% - 4px));
        gap: 8px;
    }

    .campaign-meta-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .campaigns-screen .campaign-form input[type="date"],
    .campaigns-screen .campaign-form input[type="time"] {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 0.82rem;
        padding: 9px 8px;
        text-align: center;
    }

    .campaigns-screen .campaign-form textarea {
        min-height: 68px;
    }

    .campaigns-screen .campaign-form input,
    .campaigns-screen .campaign-form textarea,
    .campaigns-screen .campaign-form select {
        margin-bottom: 8px;
    }

    .campaign-card {
        padding: 12px;
    }

    .campaign-actions button,
    .campaign-actions .admin-action-link {
        min-height: 36px;
        padding: 9px 11px;
        font-size: 0.78rem;
    }

    .campaigns-screen .campaign-actions {
        align-items: center;
    }

    .reservation-campaign-field select {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    .campaign-meta-grid {
        display: flex;
    }

    .campaigns-screen .campaign-form input,
    .campaigns-screen .campaign-form textarea,
    .campaigns-screen .campaign-form select {
        font-size: 0.84rem;
        padding: 9px 10px;
    }

    .campaigns-screen .campaign-form input[type="date"],
    .campaigns-screen .campaign-form input[type="time"] {
        font-size: 0.78rem;
        padding-inline: 6px;
    }
}

.mobile-manager .hours-screen {
    padding-bottom: 112px !important;
}

.mobile-manager .hours-screen,
.mobile-manager .hours-screen *,
.mobile-manager .hours-screen *::before,
.mobile-manager .hours-screen *::after {
    box-sizing: border-box;
}

.mobile-manager .hours-screen .hours-compact-hero {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    margin-bottom: 10px;
}

.mobile-manager .hours-screen .hours-compact-hero > div:first-child,
.mobile-manager .hours-screen .admin-hero-actions,
.mobile-manager .hours-screen .admin-users-card,
.mobile-manager .hours-screen .permissions-edit-form,
.mobile-manager .hours-screen .permission-group-fieldset,
.mobile-manager .hours-screen .login-form,
.mobile-manager .hours-screen .hours-time-grid {
    min-width: 0;
    max-width: 100%;
}

.mobile-manager .hours-screen .hours-compact-hero .eyebrow {
    font-size: 9px;
    line-height: 1;
}

.mobile-manager .hours-screen .hours-compact-hero h1 {
    font-size: 22px;
    line-height: 1.05;
}

.mobile-manager .hours-screen .hours-compact-hero span {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.15;
}

.mobile-manager .hours-screen .hours-compact-hero .admin-hero-actions {
    width: auto;
    grid-column: 2;
    justify-content: end;
}

.mobile-manager .hours-screen .hours-compact-hero .admin-hero-link {
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 10px;
    white-space: normal;
    line-height: 1.15;
}

.mobile-manager .hours-day-screen .hours-compact-hero .admin-hero-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 7px;
    width: 100%;
}

.mobile-manager .hours-day-screen .hours-compact-hero .admin-hero-link {
    width: 100%;
}

.mobile-manager .hours-screen .hours-compact-hero .admin-users-count {
    width: auto;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: auto auto auto;
    justify-self: start;
    justify-items: start;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(11, 43, 28, 0.08);
    color: var(--green-900);
}

.mobile-manager .hours-screen .hours-compact-hero .admin-users-count strong {
    color: var(--green-900);
    font-size: 12px;
}

.mobile-manager .hours-screen .hours-compact-hero .admin-users-count span {
    color: var(--muted);
    font-size: 10px;
}

.mobile-manager .hours-screen .hours-spotlight {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.mobile-manager .hours-screen .hours-total-highlight {
    min-height: 82px;
    padding: 12px;
    border-radius: 14px;
    gap: 4px;
}

.mobile-manager .hours-screen .hours-total-highlight strong {
    font-size: 24px;
    line-height: 1.05;
}

.mobile-manager .hours-screen .hours-total-highlight span,
.mobile-manager .hours-screen .hours-total-highlight small {
    font-size: 10px;
    line-height: 1.2;
}

.mobile-manager .hours-screen .hours-quick-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.mobile-manager .hours-screen .hours-quick-totals article {
    min-height: 56px;
    padding: 8px;
    border-radius: 12px;
    gap: 3px;
}

.mobile-manager .hours-screen .hours-quick-totals span {
    font-size: 10px;
    line-height: 1.15;
}

.mobile-manager .hours-screen .hours-quick-totals strong {
    font-size: 14px;
    line-height: 1.15;
}

.mobile-manager .hours-form-screen .hours-time-grid {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mobile-manager .hours-form-screen .login-form input,
.mobile-manager .hours-form-screen .login-form select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mobile-manager .hours-form-screen .hours-native-field {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mobile-manager .hours-form-screen input[type="date"],
.mobile-manager .hours-form-screen input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 34px;
    color: var(--green-900);
    -webkit-text-fill-color: var(--green-900);
    caret-color: var(--green-900);
    font: inherit;
    line-height: 1.2;
    background: #fff;
    border-color: var(--line);
    border-radius: 10px;
}

.mobile-manager .hours-form-screen input::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
    color: var(--green-900);
    -webkit-text-fill-color: var(--green-900);
}

.mobile-manager .hours-form-screen input::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.mobile-manager .hours-form-screen .hours-input-icon {
    position: absolute;
    right: 11px;
    bottom: 13px;
    width: 15px;
    height: 15px;
    pointer-events: none;
    color: var(--muted);
}

.mobile-manager .hours-form-screen .hours-input-icon-date {
    border: 1.5px solid currentColor;
    border-radius: 4px;
}

.mobile-manager .hours-form-screen .hours-input-icon-date::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 4px;
    border-top: 1.5px solid currentColor;
}

.mobile-manager .hours-form-screen .hours-input-icon-time {
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.mobile-manager .hours-form-screen .hours-input-icon-time::before,
.mobile-manager .hours-form-screen .hours-input-icon-time::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 1.5px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: bottom center;
}

.mobile-manager .hours-form-screen .hours-input-icon-time::before {
    height: 5px;
}

.mobile-manager .hours-form-screen .hours-input-icon-time::after {
    height: 4px;
    transform: rotate(90deg);
}

.mobile-manager .hours-form-screen .hours-time-grid > .login-form {
    min-width: 0;
    max-width: 100%;
}

.mobile-manager .hours-form-screen .admin-checkbox-line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.mobile-manager .hours-form-screen .admin-checkbox-line input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
}

@media (max-width: 350px) {
    .mobile-manager .hours-form-screen .hours-time-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hours-screen,
    .hours-screen *,
    .hours-screen *::before,
    .hours-screen *::after {
        box-sizing: border-box;
    }

    .hours-screen .hours-compact-hero > div:first-child,
    .hours-screen .admin-hero-actions,
    .hours-screen .admin-users-card,
    .hours-screen .permissions-edit-form,
    .hours-screen .permission-group-fieldset,
    .hours-screen .login-form,
    .hours-screen .hours-time-grid {
        min-width: 0;
        max-width: 100%;
    }

    .hours-day-screen .hours-compact-hero .admin-hero-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 7px;
        width: 100%;
    }

    .hours-day-screen .hours-compact-hero .admin-hero-link {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        line-height: 1.15;
    }

    .hours-form-screen .hours-time-grid {
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hours-form-screen .login-form input,
    .hours-form-screen .login-form select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hours-form-screen .hours-native-field {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hours-form-screen input[type="date"],
    .hours-form-screen input[type="time"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-right: 34px;
        color: var(--green-900);
        -webkit-text-fill-color: var(--green-900);
        caret-color: var(--green-900);
        font: inherit;
        line-height: 1.2;
        background: #fff;
        border-color: var(--line);
        border-radius: 10px;
    }

    .hours-form-screen input::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
        color: var(--green-900);
        -webkit-text-fill-color: var(--green-900);
    }

    .hours-form-screen input::-webkit-calendar-picker-indicator {
        opacity: 0;
    }

    .hours-form-screen .hours-input-icon {
        position: absolute;
        right: 11px;
        bottom: 13px;
        width: 15px;
        height: 15px;
        pointer-events: none;
        color: var(--muted);
    }

    .hours-form-screen .hours-input-icon-date {
        border: 1.5px solid currentColor;
        border-radius: 4px;
    }

    .hours-form-screen .hours-input-icon-date::before {
        content: "";
        position: absolute;
        left: 2px;
        right: 2px;
        top: 4px;
        border-top: 1.5px solid currentColor;
    }

    .hours-form-screen .hours-input-icon-time {
        border: 1.5px solid currentColor;
        border-radius: 50%;
    }

    .hours-form-screen .hours-input-icon-time::before,
    .hours-form-screen .hours-input-icon-time::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 3px;
        width: 1.5px;
        background: currentColor;
        border-radius: 999px;
        transform-origin: bottom center;
    }

    .hours-form-screen .hours-input-icon-time::before {
        height: 5px;
    }

    .hours-form-screen .hours-input-icon-time::after {
        height: 4px;
        transform: rotate(90deg);
    }

    .hours-form-screen .hours-time-grid > .login-form {
        min-width: 0;
        max-width: 100%;
    }

    .hours-form-screen .admin-checkbox-line {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-height: 38px;
        padding: 7px 9px;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }

    .hours-form-screen .admin-checkbox-line input[type="checkbox"] {
        width: 18px;
        min-width: 18px;
        max-width: 18px;
        height: 18px;
        min-height: 18px;
        padding: 0;
        margin: 0;
    }
}

@media (max-width: 350px) {
    .hours-form-screen .hours-time-grid {
        grid-template-columns: 1fr;
    }
}