/* ============================================
   TEMA — PONTO ELETRÔNICO
   Fontes, dark mode, app shell, PWA nativo
   ============================================ */

/* --- Fontes self-hosted (Inter) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700.woff2') format('woff2');
}

/* --- Dark mode (automático + manual) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface-bg: linear-gradient(160deg, #1e1b4b 0%, #312e81 40%, #0f172a 100%);
        --surface-app: #0f172a;
        --surface-card: #1e293b;
        --surface-elevated: #334155;
        --surface-muted: #1e293b;
        --surface-overlay: rgba(0, 0, 0, 0.65);
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-default: #334155;
        --border-strong: #475569;
        --theme-color-meta: #1e293b;
        --color-primary-subtle: #312e81;
        --color-gray-50: #1e293b;
        --color-gray-100: #334155;
        --color-gray-200: #475569;
        --color-gray-300: #64748b;
        --color-gray-700: #cbd5e1;
        --color-gray-800: #e2e8f0;
        --color-gray-900: #f1f5f9;
        --color-success-bg: #064e3b;
        --color-success-border: #059669;
        --color-success-text: #6ee7b7;
        --color-error-bg: #7f1d1d;
        --color-error-border: #dc2626;
        --color-error-text: #fca5a5;
        --color-warning-bg: #78350f;
        --color-warning-border: #d97706;
        --color-warning-text: #fcd34d;
        --color-info-bg: #1e3a8a;
        --color-info-border: #3b82f6;
        --color-info-text: #93c5fd;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-bg: linear-gradient(160deg, #1e1b4b 0%, #312e81 40%, #0f172a 100%);
    --surface-app: #0f172a;
    --surface-card: #1e293b;
    --surface-elevated: #334155;
    --surface-muted: #1e293b;
    --surface-overlay: rgba(0, 0, 0, 0.65);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-default: #334155;
    --border-strong: #475569;
    --theme-color-meta: #1e293b;
    --color-primary-subtle: #312e81;
    --color-gray-50: #1e293b;
    --color-gray-100: #334155;
    --color-gray-200: #475569;
    --color-gray-700: #cbd5e1;
    --color-gray-800: #e2e8f9;
    --color-gray-900: #f1f5f9;
    --color-success-bg: #064e3b;
    --color-success-border: #059669;
    --color-success-text: #6ee7b7;
    --color-error-bg: #7f1d1d;
    --color-error-border: #dc2626;
    --color-error-text: #fca5a5;
    --color-warning-bg: #78350f;
    --color-warning-border: #d97706;
    --color-warning-text: #fcd34d;
    --color-info-bg: #1e3a8a;
    --color-info-border: #3b82f6;
    --color-info-text: #93c5fd;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
    color-scheme: light;
    --surface-bg: linear-gradient(160deg, #4f46e5 0%, #4338ca 45%, #312e81 100%);
    --surface-app: #f8fafc;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-default: #e2e8f0;
    --border-strong: #cbd5e1;
    --theme-color-meta: #4f46e5;
}

/* Espelho de ponto: sempre claro para impressão */
body.mirror-report-page,
body.mirror-report-page[data-theme="dark"] {
    color-scheme: light;
    --surface-bg: #ffffff;
    --surface-card: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    background: #ffffff !important;
    color: #1f2937 !important;
}

/* ============================================
   APP SHELL — Layout anti-FOUC
   Regras críticas keyed em [data-app-shell] (atributo já presente no HTML),
   portanto valem ANTES de qualquer JavaScript rodar — sem flash do layout antigo.
   ============================================ */
body[data-app-shell="true"] {
    padding-top: calc(var(--topbar-height) + var(--safe-top) + var(--spacing-sm));
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-md));
    background: var(--surface-app);
}

/* Header legado segue no DOM (scripts das páginas dependem dele), apenas oculto */
body[data-app-shell="true"] .container > header {
    display: none;
}

body[data-app-shell="true"] .container {
    max-width: 1000px;
}

/* --- Sidebar (desktop) — montada pelo ui.js, oculta no mobile --- */
.app-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    padding-top: calc(var(--spacing-lg) + var(--safe-top));
    padding-left: calc(var(--spacing-md) + var(--safe-left));
    background: var(--surface-card);
    border-right: 1px solid var(--border-default);
    z-index: var(--z-topbar);
    overflow-y: auto;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    min-width: 0;
}

.app-sidebar__brand img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
}

.app-sidebar__brand span {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

.app-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-sidebar__item:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.app-sidebar__item.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.app-sidebar__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.app-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
    border-top: 1px solid var(--border-default);
    padding-bottom: var(--safe-bottom);
}

.app-sidebar__user {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0 var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar__actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* --- Top Bar --- */
.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--topbar-height) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: calc(var(--spacing-md) + var(--safe-left));
    padding-right: calc(var(--spacing-md) + var(--safe-right));
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    z-index: var(--z-topbar);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.app-topbar__logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
}

.app-topbar__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.app-topbar__user {
    display: none;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--border-radius-md);
    background: var(--surface-muted);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-icon-btn:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.app-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* --- Bottom Navigation --- */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: var(--z-bottom-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
    min-height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
}

.app-bottom-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 32px;
    border-radius: var(--border-radius-full);
    transition: background var(--transition-base), transform var(--transition-base);
}

.app-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.app-bottom-nav__item:active .app-bottom-nav__icon {
    transform: scale(0.9);
}

.app-bottom-nav__item.active,
.app-bottom-nav__item:hover {
    color: var(--color-primary);
}

.app-bottom-nav__item.active .app-bottom-nav__icon {
    background: var(--color-primary-subtle);
}

.app-bottom-nav__item.active svg {
    stroke: var(--color-primary);
}

/* A navegação no topo (desktop-nav) foi substituída pela sidebar */
.app-desktop-nav {
    display: none;
}

/* --- Tablet (769–1023px): sidebar colapsada (somente ícones) --- */
@media (min-width: 769px) and (max-width: 1023px) {
    body[data-app-shell="true"] {
        padding-left: calc(var(--sidebar-width-collapsed) + var(--safe-left));
        padding-bottom: var(--spacing-xl);
    }

    .app-sidebar {
        display: flex;
        width: var(--sidebar-width-collapsed);
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .app-sidebar__brand {
        justify-content: center;
    }

    .app-sidebar__brand span,
    .app-sidebar__item span:last-child,
    .app-sidebar__user {
        display: none;
    }

    .app-sidebar__item {
        justify-content: center;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .app-sidebar__chevron,
    .app-sidebar__submenu {
        display: none !important;
    }

    .app-sidebar__actions {
        justify-content: center;
    }

    .app-topbar {
        left: var(--sidebar-width-collapsed);
    }

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

/* --- Desktop (>=1024px): sidebar completa + conteúdo fluido --- */
@media (min-width: 1024px) {
    body[data-app-shell="true"] {
        padding-left: calc(var(--sidebar-width) + var(--safe-left));
        padding-bottom: var(--spacing-xl);
    }

    body[data-app-shell="true"] .container {
        max-width: 1400px;
    }

    .app-sidebar {
        display: flex;
    }

    .app-topbar {
        left: var(--sidebar-width);
    }

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

/* Com a sidebar visível, a topbar dispensa o logo (evita marca duplicada) */
@media (min-width: 769px) {
    .app-topbar__logo {
        display: none;
    }
}

/* Acessibilidade: respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    body[data-app-shell="true"] .container {
        animation: none;
    }

    .app-bottom-nav__item,
    .app-bottom-nav__icon,
    .app-icon-btn,
    .app-sidebar__item {
        transition: none;
    }
}

/* --- Login page refinado --- */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--spacing-md);
    background: var(--surface-bg);
}

body.login-page .container {
    width: 100%;
    max-width: 440px;
}

body.login-page .login-card {
    margin: 0 auto;
    border: 1px solid var(--border-default);
}

body.login-page .login-card h1 {
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-theme-toggle {
    position: fixed;
    top: calc(var(--spacing-md) + var(--safe-top));
    right: calc(var(--spacing-md) + var(--safe-right));
    z-index: var(--z-topbar);
}

/* --- Ponto: hero status --- */
.ponto-hero {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.ponto-clock {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-family-mono);
}

.ponto-date {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
}

.ponto-action-btn {
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

.ponto-action-btn:active {
    transform: scale(0.98);
}

/* --- Escolher tipo: cards nativos --- */
.tipo-ponto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    max-width: 480px;
    margin: 0 auto;
}

.tipo-ponto-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl) var(--spacing-lg);
    border-radius: var(--border-radius-xl);
    border: 2px solid var(--border-default);
    background: var(--surface-card);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
    color: var(--text-primary);
    min-height: 160px;
}

.tipo-ponto-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.tipo-ponto-card--entrada {
    border-color: var(--color-success-border);
    background: linear-gradient(180deg, var(--color-success-bg) 0%, var(--surface-card) 100%);
}

.tipo-ponto-card--saida {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-primary-subtle) 0%, var(--surface-card) 100%);
}

.tipo-ponto-card__icon {
    font-size: 2.5rem;
}

.tipo-ponto-card__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* --- Skeleton loading --- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border-default) 50%, var(--surface-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--border-radius-md);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--spacing-sm);
}

.skeleton-text--lg {
    height: 2em;
    width: 60%;
}

.skeleton-card {
    height: 120px;
    margin-bottom: var(--spacing-md);
}

/* --- Install banner PWA --- */
.install-banner {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-sm));
    left: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    z-index: var(--z-install-banner);
    animation: slideUp 0.4s ease-out;
}

body:not([data-app-shell="true"]) .install-banner {
    bottom: calc(var(--safe-bottom) + var(--spacing-md));
}

.install-banner.hidden {
    display: none;
}

.install-banner__text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.install-banner__text strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

/* --- Toast nativo --- */
.app-toast {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-lg));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    z-index: var(--z-tooltip);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 1px solid var(--border-default);
    pointer-events: none;
}

.app-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

body:not([data-app-shell="true"]) .app-toast {
    bottom: calc(var(--safe-bottom) + var(--spacing-lg));
}

/* --- Aviso de atualização (PWA) — sem reload forçado --- */
.app-update-prompt {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-md));
    left: var(--spacing-md);
    right: var(--spacing-md);
    margin: 0 auto;
    max-width: 420px;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-install-banner);
    animation: slideUp 0.35s ease-out;
}

.app-update-prompt__text {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.app-update-prompt__btn {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.app-update-prompt__btn:hover {
    background: var(--color-primary-dark);
}

.app-update-prompt__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-size-xl);
    line-height: 1;
    cursor: pointer;
}

.app-update-prompt__close:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

@media (min-width: 1024px) {
    .app-update-prompt {
        bottom: calc(var(--safe-bottom) + var(--spacing-lg));
        left: auto;
        right: var(--spacing-xl);
        margin: 0;
    }
}

/* --- Sidebar: grupo com submenus --- */
.app-sidebar__group {
    display: flex;
    flex-direction: column;
}

.app-sidebar__group-head {
    display: flex;
    align-items: center;
    gap: 2px;
}

.app-sidebar__item--parent {
    flex: 1 1 auto;
    min-width: 0;
}

.app-sidebar__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-sidebar__chevron:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.app-sidebar__chevron svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.app-sidebar__group.expanded .app-sidebar__chevron svg {
    transform: rotate(180deg);
}

.app-sidebar__submenu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--transition-base);
    margin-left: 14px;
    padding-left: 8px;
    border-left: 1px solid var(--border-default);
    margin-top: 0;
}

.app-sidebar__group.expanded .app-sidebar__submenu {
    grid-template-rows: 1fr;
    margin-top: 2px;
    margin-bottom: var(--spacing-xs);
}

.app-sidebar__submenu-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-sidebar__subitem {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 8px var(--spacing-sm);
    margin-top: 2px;
    border: none;
    background: none;
    text-align: left;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-sidebar__subitem svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.app-sidebar__subitem span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar__subitem:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.app-sidebar__subitem.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* --- Seletor de empresa (modal genérico do app shell) --- */
.ui-company-picker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.ui-company-picker.open {
    display: flex;
}

.ui-company-picker__dialog {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xl);
}

.ui-company-picker__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.ui-company-picker__select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}

.ui-company-picker__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* --- Conteúdo no app shell: visual nativo e espaçoso --- */
body[data-app-shell="true"] .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    animation: appContentIn 0.32s ease-out;
}

@keyframes appContentIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards mais soltos, cantos arredondados e sombra discreta */
body[data-app-shell="true"] .card {
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

body[data-app-shell="true"] .card:hover {
    box-shadow: var(--shadow-md);
}

/* Títulos de seção sem a linha pesada (cara de site) */
body[data-app-shell="true"] .card h2 {
    border-bottom: none;
    padding-bottom: 0;
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.01em;
}

body[data-app-shell="true"] .card h3 {
    font-size: var(--font-size-lg);
}

/* Botões com cantos mais nativos e toque tátil */
body[data-app-shell="true"] .btn {
    border-radius: var(--border-radius-lg);
    -webkit-tap-highlight-color: transparent;
}

body[data-app-shell="true"] .btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Inputs mais limpos: borda fina e cantos arredondados */
body[data-app-shell="true"] .form-group input,
body[data-app-shell="true"] .form-group select,
body[data-app-shell="true"] .form-group textarea {
    border-width: 1px;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-md);
}

body[data-app-shell="true"] .form-group label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Tabelas com respiro e cantos arredondados */
body[data-app-shell="true"] table {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

body[data-app-shell="true"] table th {
    text-transform: none;
    letter-spacing: 0;
}

/* Espaçamento entre seções soltas da página */
body[data-app-shell="true"] .section + .section {
    margin-top: var(--spacing-lg);
}

/* --- Form inputs dark-aware --- */
.form-group input,
.form-group select,
.form-group textarea,
.filter-input,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Placeholders legíveis no tema escuro */
.filter-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Inputs de arquivo: campo e botão "Procurar" seguindo o tema */
input[type="file"] {
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-md);
}

input[type="file"]::file-selector-button {
    background: var(--surface-muted);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-md);
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
    background: var(--surface-elevated);
    border-color: var(--border-strong);
}

/* Checkboxes e radios com cor de destaque da marca em ambos os temas */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

table {
    background: var(--surface-card);
}

table th {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.modal-content {
    background: var(--surface-card);
    color: var(--text-primary);
}

.status-card {
    background: var(--surface-muted);
}

/* --- Admin toolbar (visível com app shell) --- */
body:not([data-app-shell="true"]) .admin-toolbar {
    display: none;
}