/* ==========================================================================
   NITH ERP — Camada de design profissional (dark)
   Carregada DEPOIS de style.css. Nao remove nenhuma funcionalidade:
   apenas padroniza tipografia, cores, espacamentos e componentes.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root {
    /* Superficies */
    --np-bg: #070a12;
    --np-bg-2: #0a0f1a;
    --np-surface: #0e1421;
    --np-surface-2: #131b2b;
    --np-surface-3: #182133;
    --np-line: #1e293b;
    --np-line-soft: #17202f;

    /* Texto */
    --np-text: #eef2f8;
    --np-text-2: #b6c2d4;
    --np-muted: #8493a8;

    /* Marca */
    --np-brand: #10b981;
    --np-brand-2: #34d399;
    --np-brand-dark: #059669;
    --np-brand-soft: rgba(16, 185, 129, 0.12);
    --np-accent: #3b82f6;
    --np-accent-soft: rgba(59, 130, 246, 0.12);

    /* Semanticos */
    --np-success: #34d399;
    --np-success-soft: rgba(52, 211, 153, 0.12);
    --np-warning: #fbbf24;
    --np-warning-soft: rgba(251, 191, 36, 0.12);
    --np-danger: #f87171;
    --np-danger-soft: rgba(248, 113, 113, 0.12);
    --np-info: #60a5fa;

    /* Formas */
    --np-r-sm: 8px;
    --np-r: 12px;
    --np-r-lg: 16px;
    --np-r-xl: 20px;
    --np-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --np-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
    --np-ring: 0 0 0 3px rgba(16, 185, 129, 0.22);
    --np-t: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Compatibilidade com as variaveis antigas */
    --bg: var(--np-bg);
    --panel: var(--np-surface);
    --panel-soft: var(--np-surface-2);
    --text: var(--np-text);
    --muted: var(--np-muted);
    --line: var(--np-line);
    --primary: var(--np-brand);
    --primary-dark: var(--np-brand-dark);
    --primary-soft: var(--np-brand-soft);
    --success: var(--np-success);
    --success-bg: var(--np-success-soft);
    --warning: var(--np-warning);
    --warning-bg: var(--np-warning-soft);
    --danger: var(--np-danger);
    --danger-bg: var(--np-danger-soft);
    --muted-bg: var(--np-surface-3);
    --sidebar: #060911;
    --sidebar-hover: var(--np-surface-2);
    --shadow: var(--np-shadow);
    --shadow-soft: var(--np-shadow);
    --radius: var(--np-r);
}

/* Acoes do Cardapio pertencem ao canto superior direito do cabecalho. */
@media (min-width: 901px) {
    body.menu-admin-page .page-topbar {
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    body.menu-admin-page .page-topbar > div:not(.header-actions) {
        flex: 1 1 220px;
    }

    body.menu-admin-page .page-topbar .header-actions {
        align-items: center !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        margin: 0 0 0 auto !important;
        max-width: 100%;
        width: auto !important;
    }

    body.menu-admin-page .page-topbar .header-actions > * {
        font-size: .7rem !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        white-space: nowrap;
        width: auto !important;
    }
}

.login-form .login-remember-option {
    align-items: center !important;
    background: rgba(15, 23, 42, .58);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 11px;
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    margin: 2px 0 4px;
    padding: 9px 11px;
}

.login-form .login-remember-option input {
    accent-color: var(--np-brand);
    flex: 0 0 auto;
    height: 17px;
    margin: 0;
    width: 17px;
}

.login-form .login-remember-option span {
    display: grid;
    gap: 1px;
}

.login-form .login-remember-option strong {
    color: var(--np-text);
    font-size: .78rem;
}

.login-form .login-remember-option small {
    color: var(--np-muted);
    font-size: .67rem;
    line-height: 1.35;
}

.import-menu-help {
    align-items: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, .09), rgba(56, 189, 248, .045)) !important;
    border-color: rgba(16, 185, 129, .22) !important;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.import-menu-help > div { display: grid; gap: 5px; }
.import-menu-help h2, .import-menu-help p { margin: 0; }
.import-menu-help h2 { font-size: 1rem; }
.import-menu-help p { color: var(--np-text-2); font-size: .76rem; line-height: 1.55; max-width: 760px; }
.import-menu-help small { color: #93a4b8; font-size: .67rem; overflow-wrap: anywhere; }
.import-menu-help-kicker { color: var(--np-brand-2); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 700px) {
    .import-menu-help { align-items: stretch; flex-direction: column; }
    .import-menu-help .button-primary { justify-content: center; width: 100%; }
}

/* -------------------------------------------------- base */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(1100px 620px at 12% -10%, rgba(16, 185, 129, 0.07), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(59, 130, 246, 0.06), transparent 55%),
        var(--np-bg);
    color: var(--np-text);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand strong, .sidebar-brand strong {
    font-family: "Sora", "Inter", sans-serif;
    letter-spacing: -0.025em;
}

::selection {
    background: var(--np-brand-soft);
}

*:focus-visible {
    outline: none;
    box-shadow: var(--np-ring);
    border-radius: var(--np-r-sm);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #1f2a3c;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2c3a52;
    background-clip: padding-box;
}

/* -------------------------------------------------- shell */
.app-shell {
    background: transparent;
}

.sidebar {
    background: linear-gradient(180deg, #080c15 0%, #060911 100%);
    border-right: 1px solid var(--np-line-soft);
    padding: 18px 14px 20px;
    gap: 6px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 18px;
    border-bottom: 1px solid var(--np-line-soft);
    margin-bottom: 14px;
    min-width: 0;
}

.sidebar-brand img,
.sidebar-brand .restaurant-logo,
.sidebar-brand span.logo-fallback {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--np-line);
}

.sidebar-brand strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--np-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--np-r-sm);
    font-size: 0.888rem;
    font-weight: 500;
    color: var(--np-text-2);
    border: 0;
    background: transparent;
    transition: background var(--np-t), color var(--np-t);
}

.sidebar-menu a .np-ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    opacity: 0.72;
    transition: opacity var(--np-t), color var(--np-t);
}

/* Os icones da navegacao e dos indicadores ja sao fornecidos pelo CSS base. */
.sidebar-menu .np-ico,
.metric-card .np-ico {
    display: none !important;
}

.sidebar-menu a:hover {
    background: var(--np-surface-2);
    color: var(--np-text);
}

.sidebar-menu a:hover .np-ico {
    opacity: 1;
}

.sidebar-menu a.active {
    background: linear-gradient(90deg, var(--np-brand-soft), rgba(16, 185, 129, 0.02));
    color: #fff;
    font-weight: 600;
}

.sidebar-menu a.active .np-ico {
    color: var(--np-brand-2);
    opacity: 1;
}

.sidebar-menu a.active::after {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--np-brand);
}

.sidebar-menu .logout-link {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--np-line-soft);
    border-radius: 0 0 var(--np-r-sm) var(--np-r-sm);
    color: var(--np-muted);
}

.sidebar-menu .logout-link:hover {
    color: var(--np-danger);
    background: var(--np-danger-soft);
}

.np-sidebar-section {
    padding: 16px 11px 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5f6f86;
}

/* -------------------------------------------------- topbar */
.main-content {
    background: transparent;
    padding: 18px 22px 34px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 2px 0 14px;
    margin-bottom: 6px;
}

.topbar h1 {
    font-size: 1.42rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.topbar p {
    margin: 3px 0 0;
    font-size: 0.86rem;
    color: var(--np-muted);
}

.menu-toggle {
    border: 1px solid var(--np-line);
    background: var(--np-surface);
    border-radius: var(--np-r-sm);
    width: 40px;
    height: 40px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 16px;
    height: 1.8px;
    border-radius: 2px;
    background: var(--np-text-2);
}

/* -------------------------------------------------- cards / paineis */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 12px;
}

.metric-card,
.table-panel,
.form-panel,
.empty-panel,
.message-panel,
.product-card,
.table-card,
.np-panel {
    background: linear-gradient(180deg, var(--np-surface) 0%, var(--np-bg-2) 100%);
    border: 1px solid var(--np-line-soft);
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-shadow);
}

.metric-card {
    position: relative;
    padding: 14px 16px;
    overflow: hidden;
    transition: border-color var(--np-t), transform var(--np-t);
}

.metric-card:hover {
    border-color: #24344c;
    transform: translateY(-1px);
}

.metric-card p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--np-muted);
}

.metric-card strong {
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.42rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.035em;
}

.metric-card .np-ico {
    width: 16px;
    height: 16px;
    color: var(--np-brand-2);
    opacity: 0.9;
}

.online-menu-access-panel { margin-top: 14px; padding: 18px; }
.online-menu-access-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}
.online-menu-access-stats > div {
    border-left: 1px solid var(--np-line);
    display: grid;
    gap: 7px;
    padding: 6px 18px;
}
.online-menu-access-stats > div:first-child { border-left: 0; padding-left: 0; }
.online-menu-access-stats span {
    color: var(--np-muted);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.online-menu-access-stats strong {
    color: var(--np-text);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.15rem;
}
@media (max-width: 700px) {
    .online-menu-access-stats { grid-template-columns: 1fr; }
    .online-menu-access-stats > div,
    .online-menu-access-stats > div:first-child {
        border-left: 0;
        border-top: 1px solid var(--np-line);
        padding: 12px 0;
    }
    .online-menu-access-stats > div:first-child { border-top: 0; }
}

.np-metric-foot {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--np-muted);
}

.empty-panel,
.message-panel {
    padding: 26px;
}

.empty-panel h2 {
    font-size: 1.05rem;
    margin: 0 0 6px;
}

.empty-panel p {
    color: var(--np-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* -------------------------------------------------- botoes */
button,
.button,
.button-primary,
.button-secondary,
input[type="submit"],
.form-actions a,
.actions-cell a {
    font-family: inherit;
    letter-spacing: -0.01em;
}

.button-primary,
button[type="submit"]:not(.np-plain),
input[type="submit"] {
    background: linear-gradient(180deg, var(--np-brand-2), var(--np-brand-dark));
    color: #04150f;
    font-weight: 650;
    border: 0;
    border-radius: var(--np-r-sm);
    padding: 10px 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 8px 20px -10px rgba(16, 185, 129, 0.7);
    transition: filter var(--np-t), transform var(--np-t);
}

.button-primary:hover,
button[type="submit"]:not(.np-plain):hover,
input[type="submit"]:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.button-secondary {
    background: var(--np-surface-2);
    border: 1px solid var(--np-line);
    color: var(--np-text);
    border-radius: var(--np-r-sm);
    padding: 10px 16px;
    font-weight: 550;
    transition: background var(--np-t), border-color var(--np-t);
}

.button-secondary:hover {
    background: var(--np-surface-3);
    border-color: #2a3a52;
}

/* -------------------------------------------------- formularios */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    background: var(--np-bg-2);
    border: 1px solid var(--np-line);
    color: var(--np-text);
    border-radius: var(--np-r-sm);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--np-t), box-shadow var(--np-t), background var(--np-t);
}

input::placeholder,
textarea::placeholder {
    color: #61708a;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--np-brand);
    background: var(--np-surface);
    box-shadow: var(--np-ring);
    outline: none;
}

label {
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--np-text-2);
}

fieldset {
    border: 1px solid var(--np-line-soft);
    border-radius: var(--np-r);
}

/* switch profissional (substitui checkboxes de ativar/desativar) */
.np-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.np-switch > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.np-switch-track {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    border-radius: 99px;
    background: #202c3f;
    border: 1px solid var(--np-line);
    transition: background var(--np-t), border-color var(--np-t);
}

.np-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8a99ad;
    transition: transform var(--np-t), background var(--np-t);
}

.np-switch > input:checked + .np-switch-track {
    background: var(--np-brand-dark);
    border-color: var(--np-brand);
}

.np-switch > input:checked + .np-switch-track::after {
    transform: translateX(18px);
    background: #fff;
}

.np-switch > input:focus-visible + .np-switch-track {
    box-shadow: var(--np-ring);
}

.np-switch-label {
    font-size: 0.88rem;
    color: var(--np-text-2);
}

/* -------------------------------------------------- tabelas */
.table-panel {
    padding: 0;
    overflow: hidden;
}

.table-panel > h2,
.table-panel > .section-title-row {
    padding: 16px 18px;
    margin: 0;
    border-bottom: 1px solid var(--np-line-soft);
    font-size: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.878rem;
}

thead th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--np-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--np-line);
    white-space: nowrap;
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--np-line-soft);
    color: var(--np-text-2);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background var(--np-t);
}

tbody tr:hover td {
    background: rgba(255, 255, 255, 0.022);
    color: var(--np-text);
}

/* -------------------------------------------------- badges / status */
.badge,
.status-pill,
.tag,
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.735rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.np-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.np-badge-success {
    color: var(--np-success);
    background: var(--np-success-soft);
    border-color: rgba(52, 211, 153, 0.24);
}

.np-badge-warning {
    color: var(--np-warning);
    background: var(--np-warning-soft);
    border-color: rgba(251, 191, 36, 0.24);
}

.np-badge-danger {
    color: var(--np-danger);
    background: var(--np-danger-soft);
    border-color: rgba(248, 113, 113, 0.24);
}

.np-badge-neutral {
    color: var(--np-text-2);
    background: var(--np-surface-3);
    border-color: var(--np-line);
}

/* -------------------------------------------------- graficos */
.np-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.np-grid-2 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.np-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 1040px) {
    .np-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.np-panel {
    padding: 18px 20px 20px;
    min-width: 0;
}

.np-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.np-panel-head h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    color: #fff;
}

.np-panel-head p {
    margin: 3px 0 0;
    font-size: 0.79rem;
    color: var(--np-muted);
}

.np-chart {
    width: 100%;
    display: block;
    overflow: visible;
}

.np-chart-bar {
    transition: opacity var(--np-t);
}

.np-chart:hover .np-chart-bar {
    opacity: 0.55;
}

.np-chart .np-chart-bar:hover {
    opacity: 1;
}

.np-chart-point {
    cursor: pointer;
    outline: none;
    transition: filter .16s ease, opacity .16s ease, stroke-width .16s ease;
}
.np-chart-segment:hover,
.np-chart-segment:focus { filter: brightness(1.2) drop-shadow(0 0 5px currentColor); stroke-width: 21px; }
.np-chart-tooltip {
    background: rgba(7, 10, 18, .96);
    border: 1px solid rgba(52, 211, 153, .42);
    border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
    color: #f8fafc;
    font-size: .78rem;
    font-weight: 700;
    max-width: min(260px, calc(100vw - 24px));
    opacity: 0;
    padding: 8px 11px;
    pointer-events: none;
    position: fixed;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    z-index: 9999;
}
.np-chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }

.np-line-chart { overflow: visible; }
.np-line-path { fill: none; stroke: #22d3ee; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.np-line-area { pointer-events: none; }
.np-line-point { fill: #08111f; stroke: #67e8f9; stroke-width: 3; transition: r .16s ease, fill .16s ease; }
.np-line-point:hover, .np-line-point:focus { fill: #22d3ee; r: 6px; }

.online-menu-access-chart {
    background: linear-gradient(180deg, rgba(14, 165, 233, .055), rgba(2, 6, 23, .12));
    border: 1px solid var(--np-line-soft);
    border-radius: 14px;
    margin-top: 18px;
    padding: 15px 16px 8px;
}
.online-menu-access-chart > div { align-items: baseline; display: flex; gap: 9px; }
.online-menu-access-chart > div strong { font-size: .9rem; }
.online-menu-access-chart > div span { color: var(--np-muted); font-size: .75rem; }
.online-menu-access-chart .np-chart { height: 210px; margin-top: 4px; }

.finance-analysis .section-title-row {
    align-items: end;
    border-bottom: 1px solid var(--np-line-soft);
    margin-bottom: 18px;
    padding-bottom: 16px;
}
.finance-analysis-select {
    display: grid !important;
    gap: 6px;
    min-width: min(100%, 310px);
    position: relative;
}
.finance-analysis-select::before {
    color: var(--np-muted);
    content: "Indicador exibido";
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.finance-analysis-select select {
    appearance: none;
    background: #101b2d linear-gradient(45deg, transparent 50%, #67e8f9 50%) calc(100% - 18px) 50% / 6px 6px no-repeat !important;
    border: 1px solid #263b58 !important;
    border-radius: 11px !important;
    color: #f8fafc !important;
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    padding: 0 42px 0 14px !important;
    width: 100%;
}
.finance-analysis-tabs { display: none !important; }
.finance-analysis-panel { animation: financePanelIn .24s ease both; }
@keyframes financePanelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.finance-interactive-donut {
    aspect-ratio: 1;
    margin: 0 auto;
    max-width: 390px;
    position: relative;
    width: 100%;
}
.finance-interactive-donut svg { height: 100%; overflow: visible; transform: rotate(-90deg); width: 100%; }
.finance-donut-track { fill: none; stroke: #172235; stroke-width: 27; }
.finance-donut-segment {
    fill: none;
    stroke-linecap: butt;
    stroke-width: 27;
    transform-box: fill-box;
    transform-origin: center;
    transition: filter .18s ease, opacity .18s ease, stroke-width .18s ease;
}
.finance-interactive-donut:hover .finance-donut-segment { opacity: .58; }
.finance-interactive-donut .finance-donut-segment:hover,
.finance-interactive-donut .finance-donut-segment:focus {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(56, 189, 248, .34));
    opacity: 1;
    stroke-width: 33;
}
.finance-donut-center {
    align-content: center;
    background: #0b1423;
    border: 1px solid #1e2b40;
    border-radius: 50%;
    display: grid;
    inset: 29%;
    padding: 10px;
    position: absolute;
    text-align: center;
}
.finance-donut-center span { color: var(--np-muted); font-size: .73rem; font-weight: 700; }
.finance-donut-center strong { color: #fff; font-family: "Sora", sans-serif; font-size: clamp(1.1rem, 2.4vw, 1.75rem); line-height: 1.1; }
.finance-donut-center small { color: #5f718c; font-size: .62rem; margin-top: 4px; }
@media (max-width: 700px) {
    .finance-analysis .section-title-row { align-items: stretch; }
    .finance-analysis-select { min-width: 100%; }
    .finance-donut-center small { display: none; }
}

/* Recortador: componente centralizado e independente dos estilos globais. */
.image-crop-modal { background: rgba(2, 6, 23, .2); padding: 20px !important; }
.image-crop-backdrop { backdrop-filter: blur(8px); background: rgba(2, 6, 23, .78) !important; }
.image-crop-card {
    background: linear-gradient(180deg, #0d1727 0%, #08111f 100%) !important;
    border: 1px solid rgba(125, 211, 252, .2) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .62) !important;
    gap: 14px !important;
    grid-template-rows: auto auto auto auto !important;
    max-height: calc(100dvh - 28px) !important;
    max-width: 620px !important;
    overflow-y: auto !important;
    padding: 20px !important;
    scrollbar-width: thin;
    width: min(100%, 620px) !important;
}
.image-crop-header { align-items: center !important; }
.image-crop-title { margin: 0 auto 0 0; }
.image-crop-title-icon { flex-basis: 42px; height: 42px; }
.image-crop-header h2 { font-size: 1.18rem !important; }
.image-crop-header p { font-size: .79rem !important; }
.image-crop-close { flex: 0 0 40px; height: 40px; width: 40px; }
.image-crop-stage {
    border: 8px solid rgba(203, 213, 225, .72) !important;
    border-radius: 22px !important;
    box-sizing: border-box;
    max-height: calc(100dvh - 270px) !important;
    min-height: 180px !important;
    width: min(100%, calc(100dvh - 270px)) !important;
}
.image-crop-stage[data-crop-shape="cover"] { min-height: 150px !important; width: 100% !important; }
.image-crop-stage::after { border-radius: 14px !important; inset: 5px !important; }
.image-crop-controls {
    align-items: center !important;
    background: rgba(15, 32, 56, .66);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 13px;
    gap: 16px !important;
    padding: 11px 12px;
}
.image-crop-zoom { font-size: .76rem; gap: 5px !important; }
.image-crop-zoom input { appearance: none; background: #24344b; border-radius: 99px; height: 5px; margin: 5px 0; }
.image-crop-zoom input::-webkit-slider-thumb { appearance: none; background: #22d3ee; border: 3px solid #d9faff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34,211,238,.15); height: 16px; width: 16px; }
.image-crop-reset { background: #102b4c !important; border-color: #1d4f7d !important; color: #dbeafe !important; min-height: 38px !important; }
.image-crop-actions { border-top: 1px solid rgba(148,163,184,.13); flex-wrap: nowrap !important; padding-top: 14px; }
.image-crop-actions button { border-radius: 10px !important; flex: 0 0 auto; min-height: 42px !important; min-width: 118px !important; }
.image-crop-actions [data-image-crop-confirm] { background: linear-gradient(180deg, #22d3ee, #0891b2) !important; color: #02131b !important; font-weight: 800 !important; }
.image-crop-actions [data-image-crop-cancel] { background: transparent !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; }
.image-upload-field { position: relative; }
.image-upload-button { cursor: pointer; position: relative; overflow: hidden; }
.image-upload-button::after { content: 'JPG ou PNG'; display: block; font-size: .68rem; font-weight: 600; opacity: .62; margin-top: 2px; }
.image-upload-button:focus-within { outline: 3px solid rgba(34,211,238,.25); outline-offset: 2px; }
.image-upload-field [data-image-upload-status] { min-height: 18px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.image-upload-field:has(input[type="file"]:focus-visible) { border-color: rgba(34,211,238,.55); }
@media (max-width: 640px) {
    .image-crop-modal { padding: 8px !important; }
    .image-crop-card { border-radius: 16px !important; padding: 13px !important; }
    .image-crop-stage { max-height: calc(100dvh - 255px) !important; width: min(100%, calc(100dvh - 255px)) !important; }
    .image-crop-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
    .image-crop-actions button { min-width: 0 !important; width: 100%; }
}

/* Sidebar desktop em formato rail.
   O menu ocupa somente a largura dos icones em repouso e recupera os rotulos
   ao receber hover ou foco de teclado. O drawer mobile continua controlado
   pelas regras existentes abaixo de 900px. */
@media (min-width: 901px) {
    .app-shell .sidebar {
        flex: 0 0 84px !important;
        min-width: 84px !important;
        width: 84px !important;
        padding: 18px 13px 20px !important;
        overflow-x: hidden !important;
        white-space: nowrap;
        z-index: 1000;
        transition:
            flex-basis .38s cubic-bezier(.22, 1, .36, 1),
            min-width .38s cubic-bezier(.22, 1, .36, 1),
            width .38s cubic-bezier(.22, 1, .36, 1),
            padding .38s cubic-bezier(.22, 1, .36, 1),
            box-shadow .32s ease !important;
    }

    .app-shell .sidebar:hover,
    .app-shell .sidebar:focus-within {
        flex-basis: 258px !important;
        min-width: 258px !important;
        width: 258px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-shadow: 18px 0 46px -34px rgba(0, 0, 0, .92);
    }

    .app-shell .sidebar-brand,
    .app-shell .sidebar:hover .sidebar-brand,
    .app-shell .sidebar:focus-within .sidebar-brand {
        align-items: center !important;
        flex-direction: row !important;
        min-height: 64px !important;
        margin: 0 0 14px !important;
        padding: 3px 4px 14px !important;
        text-align: left !important;
    }

    .app-shell .sidebar-brand {
        gap: 0 !important;
        justify-content: center !important;
    }

    .app-shell .sidebar:hover .sidebar-brand,
    .app-shell .sidebar:focus-within .sidebar-brand {
        gap: 11px !important;
        justify-content: flex-start !important;
    }

    .app-shell .sidebar-brand img,
    .app-shell .sidebar-brand .restaurant-logo,
    .app-shell .sidebar-brand .logo-fallback,
    .app-shell .sidebar:hover .sidebar-brand img,
    .app-shell .sidebar:focus-within .sidebar-brand img {
        flex: 0 0 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        max-width: 48px !important;
        width: 48px !important;
    }

    .app-shell .sidebar-brand strong {
        display: block !important;
        font-size: 0 !important;
        margin: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        transform: translateX(-6px);
        transition:
            max-width .3s cubic-bezier(.22, 1, .36, 1),
            opacity .2s ease,
            font-size .3s cubic-bezier(.22, 1, .36, 1),
            transform .3s cubic-bezier(.22, 1, .36, 1) !important;
        white-space: nowrap !important;
    }

    .app-shell .sidebar:hover .sidebar-brand strong,
    .app-shell .sidebar:focus-within .sidebar-brand strong {
        font-size: .91rem !important;
        max-width: 164px !important;
        opacity: 1 !important;
        transform: translateX(0);
    }

    .app-shell .sidebar-menu {
        align-items: center !important;
        gap: 5px !important;
    }

    .app-shell .sidebar:hover .sidebar-menu,
    .app-shell .sidebar:focus-within .sidebar-menu {
        align-items: stretch !important;
    }

    .app-shell .sidebar-menu a {
        box-sizing: border-box;
        flex: 0 0 auto;
        font-size: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 11px !important;
        width: 50px !important;
        transition:
            width .34s cubic-bezier(.22, 1, .36, 1),
            padding .34s cubic-bezier(.22, 1, .36, 1),
            gap .3s cubic-bezier(.22, 1, .36, 1),
            font-size .28s cubic-bezier(.22, 1, .36, 1),
            color .2s ease,
            background .2s ease,
            border-color .2s ease,
            box-shadow .2s ease !important;
    }

    .app-shell .sidebar:hover .sidebar-menu a,
    .app-shell .sidebar:focus-within .sidebar-menu a {
        font-size: .91rem !important;
        gap: 13px !important;
        justify-content: flex-start !important;
        padding: 10px 13px !important;
        width: 100% !important;
    }

    .app-shell .sidebar-menu a::before {
        flex: 0 0 23px !important;
        height: 23px !important;
        width: 23px !important;
    }

    /* O contador complementa o icone da mesa; nunca ocupa o lugar dele. */
    .app-shell .sidebar-menu a .menu-count-badge {
        border-width: 2px;
        font-size: 9px !important;
        height: 18px;
        min-width: 18px;
        padding: 0 4px;
        right: -5px;
        top: 3px;
        transform: none;
        transition: right .28s cubic-bezier(.22, 1, .36, 1), top .28s ease, transform .28s ease;
        z-index: 2;
    }

    .app-shell .sidebar:hover .sidebar-menu a .menu-count-badge,
    .app-shell .sidebar:focus-within .sidebar-menu a .menu-count-badge {
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
    }

    .app-shell .sidebar-menu a .menu-count-badge[hidden] {
        display: none !important;
    }

    .app-shell .sidebar-menu a.active {
        background: linear-gradient(135deg, rgba(20, 184, 166, .22), rgba(14, 165, 233, .12)) !important;
        border-color: rgba(45, 212, 191, .42) !important;
        box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08), 0 8px 24px -18px rgba(20, 184, 166, .95) !important;
        color: #2dd4bf !important;
    }

    .app-shell .sidebar:hover .sidebar-menu a.active,
    .app-shell .sidebar:focus-within .sidebar-menu a.active {
        color: #f8fffd !important;
    }

    .app-shell .sidebar-menu a.active::after {
        background: #2dd4bf !important;
        border-radius: 999px !important;
        box-shadow: 0 0 12px rgba(45, 212, 191, .72) !important;
        height: 22px !important;
        left: auto !important;
        right: -1px !important;
        width: 3px !important;
    }

    .app-shell .sidebar-menu a:focus-visible {
        outline: 2px solid #38bdf8 !important;
        outline-offset: 2px !important;
    }

    .app-shell .sidebar-menu .logout-link {
        margin-top: auto !important;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .app-shell .sidebar,
    .app-shell .sidebar-brand strong,
    .app-shell .sidebar-menu a {
        transition-duration: .01ms !important;
    }
}

.np-chart-grid line {
    stroke: var(--np-line-soft);
    stroke-width: 1;
}

.np-chart-axis text {
    fill: #6b7c93;
    font-size: 10px;
    font-family: "Inter", sans-serif;
}

.np-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
}

.np-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--np-text-2);
}

.np-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

.np-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.np-rank li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
}

.np-rank strong {
    grid-column: 1;
    font-size: 0.87rem;
    font-weight: 550;
    color: var(--np-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.np-rank span {
    grid-column: 2;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--np-brand-2);
    white-space: nowrap;
}

.np-rank-bar {
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 99px;
    background: var(--np-surface-3);
    overflow: hidden;
}

.np-rank-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--np-brand-dark), var(--np-brand-2));
}

.np-empty {
    padding: 26px 10px;
    text-align: center;
    color: var(--np-muted);
    font-size: 0.86rem;
}

.np-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.np-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--np-line-soft);
    font-size: 0.87rem;
}

.np-list li:last-child {
    border-bottom: 0;
}

.np-list small {
    display: block;
    color: var(--np-muted);
    font-size: 0.77rem;
    margin-top: 2px;
}

.np-list b {
    font-weight: 600;
    color: var(--np-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: block;
}

/* -------------------------------------------------- overlays / modais */
.subscription-expired-overlay,
.onboarding-overlay,
.terms-modal,
.modal-overlay {
    backdrop-filter: blur(10px);
    background: rgba(4, 7, 13, 0.72);
}

.subscription-expired-card,
.onboarding-card,
.login-card,
.legal-card {
    background: linear-gradient(180deg, var(--np-surface) 0%, var(--np-bg-2) 100%);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r-xl);
    box-shadow: var(--np-shadow-lg);
}

/* -------------------------------------------------- remove emojis das abas */
.account-settings-toggle::before,
.account-config-tabs button[data-account-config-tab]::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    opacity: 0.85;
    vertical-align: -3px;
}

.account-settings-toggle::before,
.account-config-tabs button[data-account-config-tab="preferencias"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.account-config-tabs button[data-account-config-tab="cardapio"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M12 4a8 8 0 0 1 8 7H4a8 8 0 0 1 8-7z'/%3E%3Cpath d='M4 15h16a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M12 4a8 8 0 0 1 8 7H4a8 8 0 0 1 8-7z'/%3E%3Cpath d='M4 15h16a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z'/%3E%3C/svg%3E");
}

.account-config-tabs button[data-account-config-tab="horarios"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.nith-company-page .nith-company-services article::before,
.nith-company-page .nith-company-process-grid article::before,
.nith-company-page .nith-company-services article h2::before,
.nith-company-page .nith-company-nav nav a::before {
    content: "" !important;
}

/* -------------------------------------------------- cardapio online publico */
.public-menu {
    font-family: "Inter", -apple-system, sans-serif;
}

.public-menu-header {
    border-bottom: 1px solid var(--np-line-soft);
    backdrop-filter: blur(14px);
}

.public-product-card {
    border-radius: var(--np-r-lg);
    border: 1px solid var(--np-line-soft);
    transition: border-color var(--np-t), transform var(--np-t), box-shadow var(--np-t);
}

.public-product-card:hover {
    border-color: #26374f;
    transform: translateY(-2px);
    box-shadow: var(--np-shadow);
}

.public-product-card img {
    border-radius: var(--np-r);
}

.public-cart {
    border-radius: var(--np-r-xl) var(--np-r-xl) 0 0;
    box-shadow: var(--np-shadow-lg);
}

/* -------------------------------------------------- responsivo */
@media (max-width: 900px) {
    .menu-toggle {
        display: inline-flex;
    }

    .main-content {
        padding: 16px 16px 40px;
    }

    .topbar h1 {
        font-size: 1.2rem;
    }

    .np-panel {
        padding: 16px;
    }
}

/* Controles compartilhados: filtros compactos, campos proporcionais e estado da loja. */
.app-shell .filter-toggle-button {
    align-items: center !important;
    background: rgba(15, 28, 48, .72) !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: .76rem !important;
    font-weight: 750 !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    width: auto !important;
}

.app-shell .filter-toggle-button:hover,
.app-shell .filter-toggle-button[aria-expanded="true"] {
    background: rgba(20, 184, 166, .09) !important;
    border-color: rgba(45, 212, 191, .32) !important;
    color: #ccfbf1 !important;
    transform: none !important;
}

.app-shell .filter-toggle-button svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
    width: 15px;
}

.app-shell .filter-toggle-button b {
    align-items: center;
    background: #14b8a6;
    border-radius: 999px;
    color: #03211d;
    display: inline-flex;
    font-size: .64rem;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
}

.app-shell .filter-toggle-button i {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    height: 6px;
    margin-left: 1px;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
    width: 6px;
}

.app-shell .filter-toggle-button[aria-expanded="true"] i {
    transform: translateY(2px) rotate(225deg);
}

.app-shell .collapsible-filter-panel {
    background: rgba(9, 18, 32, .62);
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 14px;
    margin: 0 0 16px !important;
    padding: 12px !important;
}

/* A rolagem continua disponivel sem a barra azul e as setas nativas antigas. */
.app-shell .category-tabs {
    scrollbar-color: rgba(45, 212, 191, .34) transparent !important;
    scrollbar-width: thin !important;
}

.app-shell .category-tabs::-webkit-scrollbar {
    height: 4px !important;
}

.app-shell .category-tabs::-webkit-scrollbar-track {
    background: transparent !important;
}

.app-shell .category-tabs::-webkit-scrollbar-thumb {
    background: rgba(45, 212, 191, .28) !important;
    border-radius: 999px !important;
}

.app-shell .category-tabs::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Campos curtos nao precisam ocupar uma coluna inteira. */
.app-shell input[type="month"],
.app-shell input[type="time"],
.app-shell input[name="default_delivery_fee"],
.app-shell input[name="online_menu_average_time"],
.app-shell input[name="restaurant_address_number"],
.app-shell input[name="restaurant_address_state"],
.app-shell input[name="restaurant_address_zip"] {
    max-width: 190px !important;
}

.app-shell input[name="restaurant_name"],
.app-shell input[name="online_menu_support_phone"] {
    max-width: 560px !important;
}

.dashboard-page .dashboard-topbar {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-page .store-state-control {
    align-items: center;
    background: rgba(9, 18, 32, .74);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 14px;
    display: flex;
    gap: 13px;
    justify-self: end;
    padding: 6px 7px 6px 12px;
    flex: 0 0 auto;
    width: auto !important;
}

.dashboard-page .store-state-copy {
    align-items: center;
    display: flex;
    gap: 9px;
    white-space: nowrap;
}

.dashboard-page .store-state-copy > i {
    background: #64748b;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, .12);
    height: 8px;
    width: 8px;
}

.dashboard-page .store-state-copy > i.is-open {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
}

.dashboard-page .store-state-copy > span {
    display: grid;
    gap: 1px;
}

.dashboard-page .store-state-copy small {
    color: #7f8ea3;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dashboard-page .store-state-copy strong {
    color: #e5edf7;
    font-size: .76rem;
}

.dashboard-page .store-state-button {
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
    min-height: 36px;
    padding: 0 13px;
}

.dashboard-page .store-state-button.is-open {
    background: linear-gradient(135deg, #34d399, #14b8a6);
    color: #03211d;
}

.dashboard-page .store-state-button.is-close {
    background: rgba(248, 113, 113, .09);
    border-color: rgba(248, 113, 113, .24);
    color: #fecaca;
}

.dashboard-page .store-state-alert {
    margin-top: -8px;
}

@media (max-width: 760px) {
    .dashboard-page .dashboard-topbar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-page .store-state-control {
        grid-column: 1 / -1;
        justify-content: space-between;
        justify-self: stretch;
        width: 100% !important;
    }
}

/* Editor de imagem 2026 -------------------------------------------------- */
.image-crop-modal,
.image-crop-modal * {
    box-sizing: border-box;
}

.image-crop-modal {
    padding: 20px !important;
}

.image-crop-backdrop {
    background: rgba(1, 5, 12, .82) !important;
    backdrop-filter: blur(14px) saturate(.8);
}

.image-crop-card {
    background: linear-gradient(180deg, #0d1726 0%, #09111e 100%) !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 22px !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .04) !important;
    gap: 16px !important;
    max-height: calc(100dvh - 32px) !important;
    max-width: 720px !important;
    padding: 22px !important;
    width: min(100%, 720px) !important;
}

.image-crop-header {
    align-items: center !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    padding-bottom: 16px;
}

.image-crop-title {
    gap: 13px !important;
}

.image-crop-title-icon {
    background: linear-gradient(145deg, rgba(25, 201, 154, .18), rgba(73, 164, 255, .1)) !important;
    border-color: rgba(25, 201, 154, .3) !important;
    border-radius: 13px !important;
    flex: 0 0 44px !important;
    height: 44px !important;
}

.image-crop-title-icon::before,
.image-crop-title-icon::after {
    border-color: #52e6c0 !important;
}

.image-crop-eyebrow {
    color: #45dab5;
    display: block;
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .12em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.image-crop-header h2 {
    color: #f8fafc;
    font-size: 1.18rem !important;
    letter-spacing: -.02em;
    margin: 0 0 3px !important;
}

.image-crop-header p {
    color: #91a0b5 !important;
    font-size: .78rem !important;
}

.image-crop-close {
    background: rgba(148, 163, 184, .07) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.image-crop-close:hover {
    background: rgba(251, 102, 120, .12) !important;
    border-color: rgba(251, 102, 120, .3) !important;
    transform: rotate(4deg);
}

.image-crop-workspace {
    align-items: center;
    background-color: #050b14;
    background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 17px;
    display: flex;
    justify-content: center;
    min-height: 330px;
    overflow: hidden;
    padding: 18px;
}

.image-crop-stage {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 48px rgba(0,0,0,.42) !important;
    max-height: min(52dvh, 470px) !important;
    width: min(100%, 470px) !important;
}

.image-crop-stage[data-crop-shape="cover"] {
    max-height: 300px !important;
    width: 100% !important;
}

.image-crop-stage::before {
    background-image: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.3) 33.3%, rgba(255,255,255,.3) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.3) 66.3%, rgba(255,255,255,.3) 66.7%, transparent 66.9%), linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.3) 33.3%, rgba(255,255,255,.3) 33.7%, transparent 33.9%, transparent 66.1%, rgba(255,255,255,.3) 66.3%, rgba(255,255,255,.3) 66.7%, transparent 66.9%);
    content: "";
    inset: 0;
    opacity: .48;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.image-crop-stage::after {
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25) !important;
    inset: 0 !important;
    z-index: 3;
}

.image-crop-drag-hint {
    backdrop-filter: blur(8px);
    background: rgba(3, 9, 18, .68);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    bottom: 12px;
    color: #dbe7f5;
    font-size: .67rem;
    font-weight: 750;
    left: 50%;
    opacity: .9;
    padding: 7px 10px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity .18s ease;
    white-space: nowrap;
    z-index: 4;
}

.image-crop-stage:hover .image-crop-drag-hint,
.image-crop-stage.is-dragging .image-crop-drag-hint {
    opacity: 0;
}

.image-crop-controls {
    align-items: center !important;
    background: rgba(5, 11, 20, .72);
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 13px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 11px 12px;
}

.image-crop-zoom-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(120px, 1fr) 34px;
}

.image-crop-zoom {
    gap: 4px !important;
}

.image-crop-zoom > span {
    color: #9aa9bc;
    display: flex;
    font-size: .7rem;
    justify-content: space-between;
}

.image-crop-zoom output {
    color: #d7e3f2;
    font-variant-numeric: tabular-nums;
}

.image-crop-zoom-button {
    align-items: center;
    background: rgba(148,163,184,.08) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 9px !important;
    color: #dce7f5 !important;
    display: inline-flex;
    font-size: 1.05rem !important;
    height: 34px;
    justify-content: center;
    min-height: 34px !important;
    padding: 0 !important;
    width: 34px;
}

.image-crop-reset {
    background: rgba(148,163,184,.07) !important;
    border-color: rgba(148,163,184,.18) !important;
    color: #cbd5e1 !important;
    min-height: 36px !important;
}

.image-crop-actions {
    border-top: 1px solid rgba(148,163,184,.13) !important;
    padding-top: 16px !important;
}

.image-crop-actions [data-image-crop-confirm] {
    background: linear-gradient(135deg, #2ed8ad, #13b991) !important;
    border: 1px solid rgba(167,243,208,.2) !important;
    box-shadow: 0 10px 26px rgba(19,185,145,.18);
    color: #031611 !important;
}

.image-crop-actions [data-image-crop-cancel] {
    background: transparent !important;
    border-color: rgba(148,163,184,.2) !important;
    color: #cbd5e1 !important;
}

@media (max-width: 640px) {
    .image-crop-modal { padding: 8px !important; }
    .image-crop-card { border-radius: 17px !important; gap: 11px !important; padding: 14px !important; }
    .image-crop-header { padding-bottom: 11px; }
    .image-crop-title-icon { display: none !important; }
    .image-crop-header p { max-width: min(235px, calc(100vw - 92px)); }
    .image-crop-workspace { min-height: 0; padding: 10px; }
    .image-crop-stage { max-height: calc(100dvh - 300px) !important; width: min(100%, calc(100dvh - 300px)) !important; }
    .image-crop-stage[data-crop-shape="cover"] { min-height: 130px !important; width: 100% !important; }
    .image-crop-controls { gap: 8px !important; grid-template-columns: 1fr !important; }
    .image-crop-reset { width: 100%; }
    .image-crop-actions { grid-template-columns: .8fr 1.2fr !important; }
    .image-crop-actions button { min-width: 0 !important; }
}

/* Mesas operacionais: cards realmente compactos, sem esticar uma unica mesa
   por toda a linha. */
.app-shell .tables-board {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(208px, 232px));
    justify-content: start;
}

.app-shell .operational-table-card {
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #101d2f 0%, #0b1625 100%);
    border: 1px solid rgba(45, 212, 191, .25);
    border-radius: 18px;
    box-shadow: none;
    display: grid;
    gap: 10px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
    position: relative;
}

.app-shell .operational-table-card:hover,
.app-shell .operational-table-card:focus-visible {
    background: linear-gradient(160deg, #12243a 0%, #0c1b2c 100%);
    border-color: rgba(45, 212, 191, .72);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
    transform: translateY(-2px);
}

.operational-table-card .table-card-status {
    align-items: center;
    color: #75e8d2;
    display: flex;
    font-size: .65rem;
    gap: 6px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.operational-table-card .table-card-status i {
    background: #2dd4bf;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, .1);
    height: 7px;
    width: 7px;
}

.operational-table-card .table-card-number {
    align-items: baseline;
    display: flex;
    gap: 8px;
}

.operational-table-card .table-card-number small {
    color: #9aacbf;
    font-size: .68rem;
    letter-spacing: .08em;
}

.operational-table-card .table-card-number strong {
    color: #f8fafc;
    font-size: 2.35rem;
    line-height: 1;
}

.operational-table-card .table-card-customer {
    color: #dce7f5;
    font-size: .72rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.operational-table-card .table-card-items {
    align-content: start;
    display: grid;
    gap: 5px;
    min-height: 0;
}

.operational-table-card .table-card-items small {
    color: #aebdd0;
    display: flex;
    font-size: .69rem;
    font-weight: 650;
    gap: 5px;
    letter-spacing: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.operational-table-card .table-card-items b { color: #4de2c1; }
.operational-table-card .table-card-items .table-card-more { color: #8294aa; }

.operational-table-card .table-card-footer {
    align-items: end;
    border-top: 1px solid rgba(148, 163, 184, .13);
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.operational-table-card .table-card-footer small {
    color: #8395aa;
    font-size: .66rem;
    letter-spacing: 0;
    text-transform: none;
}

.operational-table-card .table-card-footer strong {
    color: #62efd0;
    font-size: .91rem;
}

/* A comanda atual fica antes do catalogo e recebe destaque operacional. */
.app-shell .table-current-items {
    background: linear-gradient(145deg, rgba(15, 47, 59, .5), rgba(11, 25, 42, .74));
    border: 1px solid rgba(45, 212, 191, .34);
    border-radius: 16px;
    margin: 20px 0;
    padding: clamp(14px, 2vw, 20px);
}

.table-current-items .section-title-row { align-items: center; }
.table-current-items .section-title-row h2 { margin: 2px 0 0; }
.table-current-items .section-title-row p { margin: 4px 0 0; }

.table-section-kicker {
    color: #55ddbf;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.table-current-total {
    background: rgba(45, 212, 191, .1);
    border: 1px solid rgba(45, 212, 191, .25);
    border-radius: 10px;
    color: #72efd6;
    padding: 9px 12px;
    white-space: nowrap;
}

.app-shell .table-checkout-button {
    align-items: center;
    background: #e79018;
    border: 1px solid #f3a52f;
    border-radius: 10px;
    box-shadow: none;
    color: #171006;
    display: inline-flex;
    font-weight: 850;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
}

.app-shell .table-checkout-button:hover,
.app-shell .table-checkout-button:focus-visible {
    background: #f0a126;
    border-color: #ffc15b;
    color: #171006;
    transform: none;
}

/* Editor de imagem: dimensoes previsiveis e rolagem quase imperceptivel. */
.image-crop-card {
    gap: 12px !important;
    max-width: 640px !important;
    overscroll-behavior: contain;
    padding: 18px !important;
    scrollbar-color: rgba(82, 230, 192, .42) transparent;
    scrollbar-width: thin;
    width: min(100%, 640px) !important;
}

.image-crop-card::-webkit-scrollbar { width: 5px; }
.image-crop-card::-webkit-scrollbar-track { background: transparent; }
.image-crop-card::-webkit-scrollbar-thumb {
    background: rgba(82, 230, 192, .38);
    border-radius: 999px;
}

.image-crop-workspace {
    min-height: clamp(210px, 44dvh, 420px) !important;
    padding: 14px !important;
}

.image-crop-stage {
    max-height: min(42dvh, 400px) !important;
    width: min(100%, 42dvh, 400px) !important;
}

.image-crop-stage[data-crop-shape="cover"] {
    max-height: 270px !important;
    width: 100% !important;
}

.image-avatar-preview,
.image-product-preview { position: relative; }

.image-crop-preview-badge {
    backdrop-filter: blur(7px);
    background: rgba(3, 15, 24, .78);
    border: 1px solid rgba(82, 230, 192, .32);
    border-radius: 999px;
    bottom: 6px;
    color: #a7f3d0;
    font-size: .56rem;
    font-weight: 800;
    left: 50%;
    letter-spacing: .04em;
    line-height: 1;
    padding: 5px 7px;
    position: absolute;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .app-shell .tables-board {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .operational-table-card {
        aspect-ratio: auto;
        min-height: 178px;
        padding: 13px;
    }

    .operational-table-card .table-card-number strong { font-size: 2rem; }
    .table-current-items .section-title-row { align-items: flex-start; }
    .table-current-total { font-size: .78rem; padding: 7px 9px; }
    .image-crop-card { padding: 13px !important; }
    .image-crop-workspace { min-height: clamp(180px, 39dvh, 330px) !important; padding: 9px !important; }
    .image-crop-stage { max-height: min(36dvh, 310px) !important; width: min(100%, 36dvh, 310px) !important; }
    .image-crop-stage[data-crop-shape="cover"] { width: 100% !important; }
}

@media print {
    .sidebar,
    .topbar,
    .menu-toggle {
        display: none !important;
    }
}

.np-list li > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--np-text);
    white-space: nowrap;
}

.admin-mini-stats {
    display: none;
}

.sidebar-menu a,
.sidebar-menu a:hover,
.sidebar-menu a:focus {
    text-decoration: none;
}

/* Camadas operacionais: modais sempre acima da navegacao e dos atalhos flutuantes. */
body.app-modal-open {
    overflow: hidden !important;
}

.app-shell .modal-backdrop {
    z-index: 2100 !important;
}

.confirm-modal {
    z-index: 5000 !important;
}

.page-loading-overlay {
    z-index: 9998 !important;
}

/* Navegacao consistente: texto e icones permanecem legiveis em qualquer
   pagina, inclusive quando uma folha antiga ainda esta em cache. */
.app-shell .sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-shell .sidebar-brand::before {
    display: none !important;
}

.app-shell .sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.app-shell .sidebar-menu::-webkit-scrollbar {
    display: none;
}

.app-shell .sidebar-menu a {
    min-width: 0;
    overflow: hidden;
}

.app-shell .sidebar-menu a::before {
    flex: 0 0 21px !important;
    height: 21px !important;
    width: 21px !important;
}

.app-shell .sidebar-menu .logout-link {
    margin-top: auto;
}

/* Guardas de responsividade compartilhadas. Componentes largos permanecem
   dentro da area util; tabelas continuam rolando em seus wrappers. */
.app-shell,
.app-shell .main-content {
    max-width: 100%;
}

.app-shell .main-content {
    overflow-x: clip;
}

.app-shell .main-content > *,
.app-shell :where(.topbar, .page-topbar, .form-header, .section-title-row) > *,
.app-shell :where(.form-grid, .data-form, fieldset, .detail-grid, .cards-grid) > * {
    min-width: 0;
    max-width: 100%;
}

.app-shell :where(h1, h2, h3, p, strong, small, label, a, button) {
    overflow-wrap: anywhere;
}

@media (min-width: 901px) {
    .app-shell .sidebar {
        flex-basis: 258px !important;
        min-width: 258px !important;
        width: 258px !important;
    }

    .app-shell .sidebar-brand,
    .app-shell .sidebar:hover .sidebar-brand,
    .app-shell .sidebar:focus-within .sidebar-brand {
        align-items: center !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        min-height: 54px !important;
        text-align: left !important;
    }

    .app-shell .sidebar-brand strong {
        display: block !important;
        font-size: .91rem !important;
        margin: 0 !important;
        max-width: 170px !important;
        opacity: 1 !important;
        overflow: hidden !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-shell .sidebar-menu a {
        font-size: .91rem !important;
    }

    .app-shell .sidebar-menu a {
        justify-content: flex-start !important;
        min-height: 46px !important;
        padding: 10px 13px !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .app-shell .sidebar {
        max-width: 320px !important;
        width: min(88vw, 320px) !important;
    }

    .app-shell .sidebar-menu a {
        font-size: .95rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .app-shell .sidebar-brand {
        align-items: center !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .app-shell .sidebar-brand strong {
        font-size: .98rem !important;
        opacity: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .app-shell :where(.form-panel, .table-panel, .metric-card, .empty-panel, .message-panel, .items-builder, .modal-card, .compact-item-card) {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    .app-shell :where(.table-scroll, .table-wrapper) {
        box-sizing: border-box;
        max-width: 100% !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    .app-shell :where(img, canvas, svg) {
        max-width: 100%;
    }

    .app-shell :where(.header-actions, .topbar-actions) {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
        overflow: visible !important;
        width: 100% !important;
    }

    .app-shell :where(.header-actions, .topbar-actions) > * {
        justify-content: center;
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .app-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100%;
    }
}

/* Guarda final do rail: neutraliza folhas legadas que mantinham a sidebar
   desktop permanentemente aberta. Mantido no fim do arquivo de propósito. */
@media (min-width: 901px) {
    .app-shell .sidebar {
        flex-basis: 84px !important;
        min-width: 84px !important;
        width: 84px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .app-shell .sidebar:hover,
    .app-shell .sidebar:focus-within {
        flex-basis: 258px !important;
        min-width: 258px !important;
        width: 258px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .app-shell .sidebar-brand {
        gap: 0 !important;
        justify-content: center !important;
    }

    .app-shell .sidebar:hover .sidebar-brand,
    .app-shell .sidebar:focus-within .sidebar-brand {
        gap: 11px !important;
        justify-content: flex-start !important;
    }

    .app-shell .sidebar-brand strong {
        font-size: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
    }

    .app-shell .sidebar:hover .sidebar-brand strong,
    .app-shell .sidebar:focus-within .sidebar-brand strong {
        font-size: .91rem !important;
        max-width: 164px !important;
        opacity: 1 !important;
    }

    .app-shell .sidebar-menu a {
        font-size: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
        padding: 11px !important;
        width: 50px !important;
    }

    .app-shell .sidebar:hover .sidebar-menu a,
    .app-shell .sidebar:focus-within .sidebar-menu a {
        font-size: .91rem !important;
        gap: 13px !important;
        justify-content: flex-start !important;
        padding: 10px 13px !important;
        width: 100% !important;
    }
}