/* ═══════════════════════════════════════════
   Padaria — Design System
   Inspirado em Notion / Linear: tipografia limpa,
   tons neutros com 1 cor de destaque, espaço generoso.
   ═══════════════════════════════════════════ */

:root {
    --sidebar-width: 240px;

    /* Paleta — neutros + 1 accent (preto Notion-style) */
    --cor-azul: #0a0a0a;
    --cor-azul-strong: #000000;
    --cor-azul-soft: #f4f4f5;
    --cor-verde: #16a34a;
    --cor-verde-soft: #dcfce7;
    --cor-vermelho: #dc2626;
    --cor-vermelho-soft: #fee2e2;
    --cor-amarelo: #fef9c3;
    --cor-amarelo-borda: #eab308;
    --cor-preto: #0a0a0a;

    /* Backgrounds — branco com cinzas muito sutis */
    --bg-body: #fafafa;
    --bg-card: #ffffff;
    --bg-card-hover: #f4f4f5;
    --bg-input: #ffffff;
    --bg-table-head: #fafafa;
    --bg-table-head-mp: #f4f4f5;
    --bg-calc: #fafafa;
    --bg-mp-val: #f0fdf4;
    --bg-input-blue: #fafafa;
    --bg-input-blue-focus: #f4f4f5;
    --bg-legenda: #ffffff;
    --bg-locked: #f4f4f5;
    --bg-chip: #f4f4f5;
    --bg-chip-active: #0a0a0a;

    /* Texto — alta hierarquia */
    --text-main: #0a0a0a;
    --text-muted: #71717a;
    --text-soft: #a1a1aa;
    --text-calc: #0a0a0a;

    /* Borda — sutis */
    --border-color: #e4e4e7;
    --border-input: #d4d4d8;
    --border-strong: #a1a1aa;

    --table-hover: #fafafa;
    --alert-bg: #ffffff;

    /* Radius — discreto, Notion-style */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Sombras quase imperceptíveis */
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);

    --transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --accent: #0a0a0a;
    --accent-light: #f4f4f5;

    /* Tipografia */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
    --cor-azul: #fafafa;
    --cor-azul-strong: #ffffff;
    --cor-azul-soft: #18181b;
    --cor-verde: #4ade80;
    --cor-verde-soft: #14532d;
    --cor-vermelho: #f87171;
    --cor-vermelho-soft: #7f1d1d;

    --bg-body: #09090b;
    --bg-card: #18181b;
    --bg-card-hover: #27272a;
    --bg-input: #18181b;
    --bg-table-head: #18181b;
    --bg-table-head-mp: #27272a;
    --bg-calc: #18181b;
    --bg-mp-val: #052e16;
    --bg-input-blue: #18181b;
    --bg-input-blue-focus: #27272a;
    --bg-legenda: #18181b;
    --bg-locked: #27272a;
    --bg-chip: #27272a;
    --bg-chip-active: #fafafa;

    --text-main: #fafafa;
    --text-muted: #a1a1aa;
    --text-soft: #71717a;
    --text-calc: #fafafa;

    --border-color: #27272a;
    --border-input: #3f3f46;
    --border-strong: #52525b;

    --table-hover: #27272a;
    --alert-bg: #18181b;
    --cor-amarelo: #422006;
    --cor-amarelo-borda: #eab308;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
    --accent: #fafafa;
    --accent-light: #27272a;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ── Sidebar Olist-style ── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    color: var(--text-main);
    overflow-y: auto;
    padding: 0;
    z-index: 100;
}

.sidebar-header {
    padding: 18px 20px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    text-align: left;
    letter-spacing: -0.02em;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 1px 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    text-transform: none;
}

.sidebar-link:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.sidebar-link.active {
    background: var(--bg-card-hover);
    color: var(--text-main);
    font-weight: 600;
}

.sidebar-link i {
    font-size: 14px;
    opacity: 0.7;
}

.sidebar-link.active i {
    opacity: 1;
}

.sidebar-recipe {
    padding-left: 26px;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
}

.sidebar-divider {
    border-top: 1px solid var(--border-color);
    margin: 12px 16px;
}

.sidebar-section-title {
    padding: 14px 16px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

/* Versao colapsavel — JS adiciona .sidebar-section-title-toggle */
.sidebar-section-title-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}
.sidebar-section-title-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}
.sidebar-section-chevron {
    font-size: 10px;
    transition: transform 0.15s ease;
    margin-right: 4px;
    opacity: 0.6;
}
.sidebar-section-title-toggle.collapsed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

.sidebar-cat {
    padding: 6px 16px 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-azul);
    text-transform: lowercase;
    letter-spacing: 0;
}

.sidebar-action {
    padding: 8px 16px;
}

/* ── Main content ── */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 28px 32px;
    min-height: 100vh;
}

/* ── Legenda de cores (fixa no rodapé) ── */
.legenda-cores {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: var(--bg-legenda);
    border-top: 1px solid var(--border-color);
    padding: 6px 20px;
    display: flex;
    gap: 20px;
    font-size: 11px;
    color: var(--text-muted);
    z-index: 50;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legenda-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.bg-input-base { background: var(--cor-amarelo); border-color: var(--cor-amarelo-borda); }
.bg-input-blue { background: var(--bg-input-blue); border-color: var(--cor-azul); }
.bg-calc { background: var(--bg-calc); border-color: var(--border-color); }
.bg-mp { background: var(--bg-mp-val); border-color: var(--cor-verde); }

/* ── Cores dos campos ── */

/* Azul = campo de entrada manual */
.input-blue {
    color: var(--cor-azul) !important;
    font-weight: 500;
    background-color: var(--bg-input-blue) !important;
    border-color: #bbdefb !important;
}

.input-blue:focus {
    background-color: var(--bg-input-blue-focus) !important;
    border-color: var(--cor-azul) !important;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.15);
}

/* Input de quantidade na composição do produto (cesta) — 24/06/2026:
   dono não conseguia ver o número no celular (fonte minúscula + setinhas
   nativas cobrindo o valor). Aumentar fonte, alargar e esconder setinhas
   nativas (touch já tem teclado numérico). */
.item-qtd {
    font-size: 16px !important;   /* ≥16px evita iOS dar zoom no focus */
    font-weight: 700 !important;
    min-width: 70px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
/* Remove as setinhas (spinner) do input number — em mobile elas não
   funcionam direito e ainda cobrem o número. Usuário ajusta digitando. */
.item-qtd::-webkit-outer-spin-button,
.item-qtd::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.item-qtd[type=number] { -moz-appearance: textfield; }

/* Preto = valor calculado automaticamente */
.valor-calc {
    color: var(--text-calc);
    font-weight: 600;
    background-color: var(--bg-calc);
    vertical-align: middle !important;
    padding: 6px 8px !important;
}

/* Verde = valor buscado no banco de MP */
.valor-mp {
    color: var(--cor-verde);
    font-weight: 500;
    background-color: var(--bg-mp-val);
    vertical-align: middle !important;
    padding: 6px 8px !important;
}

/* ── Peso base (fundo amarelo) ── */
.peso-base-box {
    background: var(--cor-amarelo);
    border: 2px solid var(--cor-amarelo-borda);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 350px;
}

.peso-base-input {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-azul) !important;
    text-align: center;
    border: 2px solid var(--cor-amarelo-borda) !important;
    background: #fff !important;
}

.peso-base-input:focus {
    box-shadow: 0 0 0 3px rgba(249, 168, 37, 0.3);
}

/* Cadeado na coluna % Padeiro */
.btn-lock {
    padding: 0 4px;
    font-size: 11px;
    color: #999;
    border: none;
    background: none;
    vertical-align: middle;
}

.btn-lock:hover {
    color: #fff;
}

.btn-lock.unlocked {
    color: #ffc107;
}

/* % travada (padrão) */
.pct-locked {
    background-color: var(--bg-locked) !important;
    color: var(--text-muted) !important;
    cursor: default;
    border-color: var(--border-color) !important;
}

/* % destravada */
.pct-unlocked {
    color: var(--cor-azul) !important;
    font-weight: 500;
    background-color: var(--bg-input-blue) !important;
    border-color: #bbdefb !important;
}

/* Campo calculado (readonly no modo alternativo) */
.calc-readonly {
    background-color: var(--bg-locked) !important;
    color: var(--text-calc) !important;
    font-weight: 700 !important;
    border-color: var(--border-color) !important;
    cursor: default;
}

/* ── Ficha header ── */
.ficha-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
}

/* ── Tabela da ficha ── */
.tabela-ficha {
    background: var(--bg-card);
}

.tabela-ficha thead th {
    background: var(--bg-table-head);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 8px;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.tabela-ficha tbody td {
    vertical-align: middle;
    padding: 2px 4px;
}

.ingrediente-row[data-base="1"] {
    background-color: var(--cor-amarelo) !important;
}

/* ── Tabela de MP ── */
.tabela-mp {
    background: var(--bg-card);
}

.tabela-mp thead th {
    background: var(--bg-table-head-mp);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 8px;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.tabela-mp tbody td {
    vertical-align: middle;
    padding: 2px 4px;
}

/* ── Resumo ── */
.resumo-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.resumo-valor {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-calc);
}

.resumo-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ── Mobile header (hamburger) ── */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* +env(safe-area-inset-top): no app instalado (PWA) reserva a altura da
       barra de status do celular, pra o menu nao ficar embaixo do relogio/
       bateria. Em navegador normal / desktop o inset e 0 (nao muda nada). */
    height: calc(56px + env(safe-area-inset-top, 0px));
    background: var(--bg-card);
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 14px 0;
    z-index: 200;
    gap: 10px;
}
.mobile-header .btn i {
    color: var(--text-main) !important;
}
.mobile-header .fw-bold {
    font-weight: 700;
    color: var(--cor-azul);
    letter-spacing: -0.02em;
    font-size: 16px;
}

/* ── Overlay ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

.sidebar-overlay.active {
    display: block;
}

/* ── Espaço para legenda no rodapé ── */
.main-content {
    padding-bottom: 50px;
}

/* ── Responsive: Mobile ── */
@media (max-width: 767.98px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 150;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 12px;
        padding-top: calc(60px + env(safe-area-inset-top, 0px));  /* mobile header + area segura */
        padding-bottom: 20px;
    }

    .legenda-cores {
        display: none;
    }

    /* Ficha header: empilhar campos */
    .ficha-header .row {
        gap: 8px;
    }

    .ficha-header .col-md-3,
    .ficha-header .col-md-2,
    .ficha-header .col {
        flex: 0 0 48%;
        max-width: 48%;
    }

    /* Peso base / Quantidade boxes */
    .peso-base-box {
        max-width: 100%;
    }

    .peso-base-input {
        font-size: 1.2rem;
    }

    /* Resumo: 2 colunas no mobile */
    .resumo-box .row .col {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 8px;
    }

    .resumo-valor {
        font-size: 1rem;
    }

    /* Tabelas: scroll horizontal global em mobile.
       max-content faz a table crescer alem do container; o .table-responsive
       captura o overflow e gera scroll-x. Sem isso, Bootstrap forca table
       a 100% do container e espreme tudo (texto fica ilegivel ou quebra). */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive > .table,
    .table-responsive > table {
        min-width: max-content;
    }

    .tabela-ficha,
    .tabela-mp {
        min-width: 600px;
    }

    /* Botões maiores para toque */
    .btn-sm {
        min-height: 36px;
        min-width: 36px;
        font-size: 13px;
    }

    .btn-remove-ing,
    .btn-remove-item {
        min-width: 32px;
        min-height: 32px;
    }

    /* Tipo selector menor */
    .ing-tipo {
        font-size: 10px !important;
        padding: 2px 4px;
    }

    /* Produto detalhe: campos empilhados */
    .row.g-2 > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Modo preparo textarea menor */
    textarea[name="modo_preparo"] {
        rows: 3;
    }
}

/* ── Responsive: Tablet (768-1024) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }

    .ficha-header .col {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

/* ── Dark Mode — Bootstrap overrides ── */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .table {
    --bs-table-bg: var(--bg-card);
    color: var(--text-main);
}
[data-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
}
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-muted);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* ── Gestao de Projetos (PARA + 12s) ── */
.proj-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.proj-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
}
.proj-stat.alerta {
    background: #fdebe7;
    border-color: #b54a3f;
    color: #842029;
}
[data-theme="dark"] .proj-stat.alerta {
    background: #4a1c22;
    border-color: #b54a3f;
    color: #ff9aa3;
}
.proj-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.proj-stat-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.proj-area-empresa { background: #d9e6ed; color: #2d5969; }
.proj-area-igreja  { background: #f6e0c8; color: #8a5a25; }
.proj-area-vida    { background: #d8ebd8; color: #345b3a; }
[data-theme="dark"] .proj-area-empresa { background: #173042; color: #b8d3e0; }
[data-theme="dark"] .proj-area-igreja  { background: #3d2d1c; color: #e0bd8e; }
[data-theme="dark"] .proj-area-vida    { background: #1d3a23; color: #b8dbb8; }

.proj-foco-star { color: #d4a435; cursor: pointer; }
.proj-foco-star.inactive { color: #ccc; }
[data-theme="dark"] .proj-foco-star.inactive { color: #555; }

.proj-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.proj-card.foco {
    border-left: 4px solid #d4a435;
}
.proj-tarefa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--border-color);
    font-size: 13px;
}
.proj-tarefa:first-child { border-top: 0; }
.proj-tarefa.atrasada { color: #b54a3f; }
[data-theme="dark"] .proj-tarefa.atrasada { color: #ff9aa3; }
.proj-tarefa-status {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.proj-tarefa-status.fazendo { background: #cfe2ff; border-color: #084298; color: #084298; }
.proj-tarefa-status.feito   { background: #d1e7dd; border-color: #0a3622; color: #0a3622; }
.proj-tarefa-status.cancelado { background: #e2e3e5; border-color: #41464b; color: #41464b; }
[data-theme="dark"] .proj-tarefa-status.fazendo { background: #0e2a52; color: #7ea7ff; border-color: #2a3a5c; }
[data-theme="dark"] .proj-tarefa-status.feito   { background: #0f3a26; color: #7be0a7; border-color: #2a3a5c; }
[data-theme="dark"] .proj-tarefa-status.cancelado { background: #3a3a3a; color: #bbbbbb; border-color: #2a3a5c; }

/* v2 (Início): concluir em 1 clique */
.proj-done {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid #5a9a5e;
    background: transparent;
    color: #5a9a5e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    opacity: .55;
}
.proj-done:hover { opacity: 1; background: #d1e7dd; }
[data-theme="dark"] .proj-done { border-color: #4a8a4e; color: #7be0a7; }
[data-theme="dark"] .proj-done:hover { background: #0f3a26; }
.proj-tarefa.proj-feita {
    opacity: .45;
    transition: opacity .4s;
}
.proj-tarefa.proj-feita .tarefa-nome-editavel { text-decoration: line-through; }
.proj-agora-titulo {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin: 8px 0 2px;
}
.proj-agora .proj-tarefa { padding-left: 4px; }

.proj-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 768px) {
    .proj-kanban { grid-template-columns: 1fr; }
}
.proj-coluna {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    min-height: 200px;
}
.proj-coluna-header {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}
.proj-coluna-header.alerta {
    color: #b54a3f;
}
.proj-kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.1s;
}
.proj-kanban-card:hover { transform: translateY(-1px); }
.proj-kanban-card.atrasada {
    border-left: 3px solid #b54a3f;
}
.proj-kanban-card.foco {
    border-right: 3px solid #d4a435;
}
.proj-kanban-card .proj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
}
.proj-meta .badge { font-size: 10px; padding: 2px 6px; }

.proj-coluna-cards { min-height: 80px; }
.proj-card-ghost {
    opacity: 0.4;
    background: #fff3cd !important;
}
[data-theme="dark"] .proj-card-ghost { background: #3d3520 !important; }

.proj-kanban.com-canceladas { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .proj-kanban.com-canceladas { grid-template-columns: 1fr; }
}

.proj-toggle { color: var(--text-muted); font-size: 14px; }
.proj-toggle:hover { color: var(--text-main); }

/* Calendario */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px;
}
.cal-day {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px;
    min-height: 90px;
    background: var(--bg-card);
}
.cal-day-empty {
    border-color: transparent;
    background: transparent;
}
.cal-day-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 4px;
}
.cal-day-hoje {
    border-color: #d4a435;
    background: #fff8e6;
}
[data-theme="dark"] .cal-day-hoje {
    background: #2d2818;
    border-color: #d4a435;
}
.cal-day-hoje .cal-day-num {
    color: #d4a435;
    font-weight: 700;
}
.cal-tarefa {
    font-size: 10px;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    background: #e7eef5;
    border-left: 2px solid #084298;
    color: #084298;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .cal-tarefa {
    background: #1a2c44; color: #b8d3e0; border-left-color: #4a89dc;
}
.cal-tarefa.atrasada {
    background: #fdebe7; color: #842029; border-left-color: #b54a3f;
}
[data-theme="dark"] .cal-tarefa.atrasada {
    background: #4a1c22; color: #ff9aa3;
}
.cal-tarefa.foco {
    border-left-color: #d4a435;
}
.cal-tarefa-status { display: inline-block; min-width: 12px; }

/* Nav tabs do modulo Projetos */
.proj-nav-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.proj-nav-tabs .nav-link {
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}
.proj-nav-tabs .nav-link:hover {
    color: var(--text-main);
    background: var(--table-hover);
}
.proj-nav-tabs .nav-link.active {
    background: var(--accent, #4f46e5);
    color: #fff;
    font-weight: 600;
}
.proj-nav-tabs .nav-link.active:hover {
    background: var(--accent, #4f46e5);
    color: #fff;
}
.proj-nav-tabs .nav-link i {
    margin-right: 4px;
    font-size: 12px;
}

/* Dashboard de projetos */
.proj-area-section { margin-bottom: 20px; }
.proj-area-header {
    padding: 6px 10px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 6px;
}

.proj-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.proj-dashboard-card {
    position: relative;
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-main);
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    overflow: hidden;
}
.proj-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: var(--accent, #4f46e5);
    color: var(--text-main);
    text-decoration: none;
}
[data-theme="dark"] .proj-dashboard-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.proj-dashboard-card.foco {
    border-left: 4px solid #d4a435;
}
.proj-dashboard-card.com-atraso {
    border-color: #b54a3f;
}
.proj-dashboard-card.concluido {
    opacity: 0.6;
}
.proj-dashboard-card.vazio {
    border-style: dashed;
    background: transparent;
}
.proj-dashboard-card.vazio:hover {
    background: var(--bg-card);
}
.proj-dashboard-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    min-height: 18px;
    flex-wrap: wrap;
}
.proj-dashboard-titulo {
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.25;
    color: var(--text-main);
}
.proj-dashboard-obs {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-style: italic;
}
.proj-dashboard-progresso { margin: 8px 0 4px; }
.proj-dashboard-stats {
    display: flex;
    gap: 12px;
    padding: 6px 0 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.proj-dashboard-empty {
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.proj-dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
}
.proj-sem-dri {
    color: var(--accent, #4f46e5);
    font-style: italic;
    opacity: 0.7;
}
.proj-dashboard-card:hover .proj-sem-dri {
    opacity: 1;
}

.proj-prioridade {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
}
.proj-prioridade.prio-alta   { border-color: transparent #b54a3f transparent transparent; }
.proj-prioridade.prio-media  { border-color: transparent #d4a435 transparent transparent; }
.proj-prioridade.prio-baixa  { border-color: transparent #5b8def transparent transparent; }

[data-theme="dark"] .table {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
}

[data-theme="dark"] .table-light {
    --bs-table-bg: var(--bg-table-head);
    --bs-table-color: #fff;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--border-input);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--cor-azul);
}

[data-theme="dark"] .form-control::placeholder {
    color: #667;
}

[data-theme="dark"] .alert {
    background-color: var(--alert-bg);
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-input);
    color: var(--text-main);
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-calc) !important;
}

[data-theme="dark"] .peso-base-box {
    background: var(--cor-amarelo);
    border-color: var(--cor-amarelo-borda);
}

[data-theme="dark"] .peso-base-input {
    background: var(--bg-input) !important;
    color: #64b5f6 !important;
    border-color: var(--cor-amarelo-borda) !important;
}

[data-theme="dark"] .ingrediente-row[data-base="1"] {
    background-color: var(--cor-amarelo) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-main);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Titulo de pagina padronizado (h1 estilizado como h5 fw-bold) */
.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}
.page-title > i {
    margin-right: 0.4rem;
}

/* Header padronizado para tabelas — Notion-style limpo */
.thead-padaria {
    background: var(--bg-table-head);
}
.thead-padaria > tr > th {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
}
[data-theme="dark"] .thead-padaria {
    background: var(--bg-table-head);
}
[data-theme="dark"] .thead-padaria > tr > th {
    border-color: var(--border-color);
}

/* Status badges padronizados (pedidos da loja) */
.status-badge {
    display: inline-block;
    padding: 0.25em 0.65em;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 50rem;
    line-height: 1;
    white-space: nowrap;
}
.status-pendente      { background:#fff3cd; color:#856404; }
.status-confirmado    { background:#cff4fc; color:#055160; }
.status-separado      { background:#cfe2ff; color:#084298; }
.status-em-transporte { background:#e0d4f7; color:#492f87; }
.status-entregue      { background:#d1e7dd; color:#0a3622; }
.status-cancelado     { background:#e2e3e5; color:#41464b; }
.status-divergencia   { background:#f8d7da; color:#842029; }

[data-theme="dark"] .status-pendente      { background:#3d3520; color:#ffd96a; }
[data-theme="dark"] .status-confirmado    { background:#0e3a4a; color:#7adfff; }
[data-theme="dark"] .status-separado      { background:#0e2a52; color:#7ea7ff; }
[data-theme="dark"] .status-em-transporte { background:#2e1f54; color:#b596ff; }
[data-theme="dark"] .status-entregue      { background:#0f3a26; color:#7be0a7; }
[data-theme="dark"] .status-cancelado     { background:#3a3a3a; color:#bbbbbb; }
[data-theme="dark"] .status-divergencia   { background:#4a1c22; color:#ff9aa3; }

/* Dark mode toggle */
.dark-mode-toggle {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #bbb;
    min-height: 48px;  /* Touch target adequado pra mobile */
}

.dark-mode-toggle .form-check {
    width: 100%;
    padding-left: 2.5rem;
}

.dark-mode-toggle .form-check-input {
    cursor: pointer;
    width: 2.5rem;
    height: 1.4rem;
    margin-left: -2.5rem;
}

.dark-mode-toggle .form-check-label {
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding: 4px 0;
}

/* Reserva espaco extra no fim da sidebar pra evitar que o ultimo item
   fique sob a barra de navegacao do navegador mobile */
.sidebar {
    /* topo: quando o menu abre no app instalado, nao fica sob a barra de status */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.sidebar::after {
    content: "";
    display: block;
    height: 24px;
}

/* ── Cards — Notion-style com borda sutil e sombra quase imperceptível ── */
.card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
    border-color: var(--border-input);
    box-shadow: var(--shadow-sm);
}

.card-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    background: var(--bg-table-head);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-main);
    padding: 12px 16px;
}

/* ── Tables — borda sutil, sem sombra excessiva ── */
.table-responsive {
    border-radius: var(--radius-md);
    /* overflow-x: auto (nao 'hidden') pra a tabela ROLAR de lado quando for
       mais larga que o container — antes cortava no mobile. Cantos arredondados
       seguem clipados; no desktop a tabela cabe e nao mostra barra. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
}

.table {
    margin-bottom: 0;
}

.table th, .table td {
    padding: 8px 12px;
}

/* ── Modern buttons ── */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition);
}

/* ── Modern inputs ── */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* ── Badges pill ── */
.badge.rounded-pill {
    font-weight: 500;
    font-size: 11px;
    padding: 4px 10px;
}

/* ── Legenda opacity ── */
.legenda-cores {
    opacity: 0.7;
    transition: opacity var(--transition);
}

.legenda-cores:hover {
    opacity: 1;
}

/* ── Print ── */
@media print {
    .sidebar, .legenda-cores, .btn, .btn-remove-ing, .btn-del-mp,
    .mobile-header, .sidebar-overlay { display: none !important; }
    .main-content { margin-left: 0; padding: 0; }
    .input-blue { border: none !important; background: transparent !important; }
}

/* ── Quick-add (tarefa avulsa direto pra Inbox) ── */
#form-quick-add { border: 1px dashed #d4a435; background: #fffbf0; }
[data-theme="dark"] #form-quick-add { background: #2a2410; border-color: #6e5b1f; }
#quick-add-nome { font-size: 14px; }
#quick-add-nome:focus { outline: none; }

/* ── Inbox: itens avulsos ── */
.proj-inbox-item { transition: background-color .15s; }
.proj-inbox-item:hover { background-color: rgba(212, 164, 53, .06); }
.proj-inbox-item:last-child { border-bottom: 0 !important; }
[data-theme="dark"] .proj-inbox-item:hover { background-color: rgba(212, 164, 53, .12); }
.proj-mover-rapido { border-color: #d4a435 !important; }
.proj-mover-rapido:focus { box-shadow: 0 0 0 .15rem rgba(212, 164, 53, .25) !important; }

/* Badge na nav-pill da Inbox — destaque mais forte */
.proj-nav-tabs .nav-link .badge.bg-danger {
    vertical-align: middle;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   COMPONENTES OLIST-STYLE
   Chips, botões pill, tabelas densas, ações circulares.
   Use aplicando classes nos templates novos.
   ═══════════════════════════════════════════ */

/* ── Chips (filtros, status, badges arredondados) ── */
.chip,
.chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-chip);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-transform: lowercase;
}
.chip:hover,
.chip-filter:hover {
    background: var(--bg-card-hover);
}
.chip.active,
.chip-filter.active {
    background: var(--bg-chip-active);
    color: var(--cor-azul);
    border-color: var(--cor-azul);
}
.chip .chip-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.chip-bullet.aberto    { background: #f59e0b; }
.chip-bullet.em-rota   { background: #2563eb; }
.chip-bullet.concluido { background: #16a34a; }
.chip-bullet.cancelado { background: #94a3b8; }

/* ── Botões pill (ação primária Olist-style) ── */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-transform: lowercase;
}
.btn-pill-primary {
    background: var(--cor-azul);
    color: #fff;
    border-color: var(--cor-azul);
}
.btn-pill-primary:hover {
    background: var(--cor-azul-strong);
    color: #fff;
}
.btn-pill-outline {
    background: transparent;
    color: var(--text-main);
    border-color: var(--border-strong);
}
.btn-pill-outline:hover {
    background: var(--bg-card-hover);
}

/* ── Botão de ação circular (menu "..." em linha de tabela) ── */
.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-chip);
    color: var(--text-muted);
    border: 0;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}
.btn-circle:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}
.btn-circle.active {
    background: var(--cor-azul);
    color: #fff;
}

/* ── Tabela densa Olist-style ── */
.table-dense {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.table-dense thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: lowercase;
    background: transparent;
}
.table-dense tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.table-dense tbody tr:hover td {
    background: var(--bg-card-hover);
}
.table-dense tbody tr.selected td {
    background: var(--bg-chip-active);
}
.table-dense .col-acoes {
    width: 56px;
    text-align: center;
}
.table-dense .col-check {
    width: 32px;
}
.table-dense .col-chevron {
    width: 32px;
    color: var(--text-soft);
}

/* ── Badge de status com bullet (Olist) ── */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-chip);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    text-transform: lowercase;
}
.badge-status .bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* ── Ações flutuantes embaixo (footer Olist-style) ── */
.olist-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

/* ── Cabeçalho de página (título + ações) ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.page-header h1,
.page-header .page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: lowercase;
}
.page-header .page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Refinamentos globais ── */

/* Bootstrap btn-primary respeita a paleta nova */
.btn-primary {
    background-color: var(--cor-azul);
    border-color: var(--cor-azul);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cor-azul-strong);
    border-color: var(--cor-azul-strong);
}

/* Inputs/cards combinam com a paleta no dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--border-input);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-soft);
}

/* Cards Bootstrap default usam vars novas */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    border-radius: var(--radius-md);
}

/* Modais com tema dark consistentes */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}

/* Dropdowns dark */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-main);
}
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-main);
}

/* Tooltip dark */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════
   OVERRIDES GLOBAIS — Notion/Linear-inspired
   Aplicado automaticamente em TODOS os templates,
   sem precisar editar HTML.
   ═══════════════════════════════════════════ */

/* Botões — radius médio (não pill total), borda sutil */
.btn {
    border-radius: var(--radius-md);
    font-weight: 500;
    padding: 7px 14px;
    font-size: 13px;
    transition: all var(--transition);
    border: 1px solid transparent;
    line-height: 1.4;
}
.btn-sm {
    padding: 5px 11px;
    font-size: 12px;
}
.btn-lg {
    padding: 10px 20px;
    font-size: 14px;
}

/* Primary = preto Notion-style com sombra sutil */
.btn-primary {
    background: var(--cor-preto);
    border-color: var(--cor-preto);
    color: #fff;
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background: #18181b;
    border-color: #18181b;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    border-color: var(--cor-preto);
}

/* Outline buttons — borda + neutro, hover sutil */
.btn-outline-primary { border-color: var(--border-input); color: var(--text-main); background: var(--bg-card); }
.btn-outline-primary:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text-main); }
.btn-outline-secondary { border-color: var(--border-input); color: var(--text-muted); background: var(--bg-card); }
.btn-outline-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text-main); }
.btn-outline-success { border-color: var(--cor-verde); color: var(--cor-verde); background: var(--bg-card); }
.btn-outline-success:hover { background: var(--cor-verde); border-color: var(--cor-verde); color: #fff; }
.btn-outline-danger { border-color: var(--cor-vermelho); color: var(--cor-vermelho); background: var(--bg-card); }
.btn-outline-danger:hover { background: var(--cor-vermelho); border-color: var(--cor-vermelho); color: #fff; }
.btn-outline-warning { border-color: var(--cor-amarelo-borda); color: var(--cor-amarelo-borda); background: var(--bg-card); }
.btn-outline-warning:hover { background: var(--cor-amarelo-borda); border-color: var(--cor-amarelo-borda); color: #fff; }
.btn-outline-info { border-color: var(--border-input); color: var(--text-main); background: var(--bg-card); }
.btn-outline-info:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text-main); }

.btn-secondary { background: var(--bg-card); border-color: var(--border-input); color: var(--text-main); }
.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text-main); }
.btn-success { background: var(--cor-verde); border-color: var(--cor-verde); color: #fff; }
.btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; }
.btn-danger { background: var(--cor-vermelho); border-color: var(--cor-vermelho); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-warning { background: var(--cor-amarelo-borda); border-color: var(--cor-amarelo-borda); color: #fff; }
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }
.btn-info { background: var(--cor-preto); border-color: var(--cor-preto); color: #fff; }
.btn-info:hover { background: #18181b; border-color: #18181b; color: #fff; }

/* btn-link continua flat */
.btn-link {
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-decoration: none;
    border: none;
}
.btn-link:hover { color: var(--cor-preto); text-decoration: underline; }

/* Badges — radius pequeno, mais compactos */
.badge {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0;
}
.badge.bg-primary { background-color: var(--cor-preto) !important; }
.badge.bg-success { background-color: var(--cor-verde) !important; }
.badge.bg-danger { background-color: var(--cor-vermelho) !important; }
.badge.bg-warning { background-color: var(--cor-amarelo-borda) !important; color: #fff !important; }
.badge.bg-info { background-color: #0891b2 !important; }
.badge.bg-secondary { background-color: var(--text-soft) !important; }
.badge.bg-light { background-color: var(--bg-chip) !important; color: var(--text-main) !important; }
.badge.bg-dark { background-color: var(--text-main) !important; color: var(--bg-card) !important; }

/* Tabelas Bootstrap → visual Olist (sem bordas externas, hover sutil) */
.table {
    --bs-table-bg: transparent;
    color: var(--text-main);
    border-color: var(--border-color);
    margin-bottom: 0;
}
.table thead {
    background: transparent;
}
.table thead th,
.thead-padaria,
.thead-padaria tr th,
table .thead-padaria th {
    background: var(--bg-table-head) !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 12px;
    text-transform: lowercase;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
}
.table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
}
.table-hover tbody tr:hover td {
    background: var(--bg-card-hover);
}
.table-bordered { border: 1px solid var(--border-color); }
.table-bordered th, .table-bordered td { border-color: var(--border-color); }

/* tabelas dentro de cards: remove borda dupla */
.card .table { margin-bottom: 0; }

/* Form controls — Notion-style sharp inputs */
.form-control,
.form-select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-input);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    padding: 6px 10px;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-xs);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--bg-input);
    border-color: var(--cor-preto);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    color: var(--text-main);
    outline: none;
}
.form-control::placeholder { color: var(--text-soft); }
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 4px 8px; }
.form-control-lg, .form-select-lg { font-size: 15px; padding: 8px 14px; }

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 4px;
}
.form-label.small { font-size: 12px; color: var(--text-muted); }

/* Form switch (toggle) — cor accent Olist */
.form-check-input:checked {
    background-color: var(--cor-azul);
    border-color: var(--cor-azul);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-light);
    border-color: var(--cor-azul);
}

/* Alerts */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 14px;
}
.alert-info {
    background: var(--cor-azul-soft);
    color: var(--cor-azul-strong);
    border-color: transparent;
}
.alert-success {
    background: var(--cor-verde-soft);
    color: #14532d;
}
.alert-warning {
    background: var(--cor-amarelo);
    color: #78350f;
    border-color: transparent;
}
.alert-danger {
    background: var(--cor-vermelho-soft);
    color: #7f1d1d;
}
.alert-light {
    background: var(--bg-card-hover);
    color: var(--text-main);
}
[data-theme="dark"] .alert-info { color: #93c5fd; }
[data-theme="dark"] .alert-success { color: #86efac; }
[data-theme="dark"] .alert-warning { color: #fcd34d; }
[data-theme="dark"] .alert-danger { color: #fca5a5; }

/* Page titles antigos (sem .page-header wrapper) — herdam estilo */
h1.page-title,
.page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    color: var(--text-main);
}
h1.page-title i,
.page-title i { font-size: 0.85em; opacity: 0.7; }

h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }

/* Nav tabs Olist-style */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 14px;
    font-size: 14px;
    text-transform: lowercase;
    transition: all var(--transition);
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--text-main);
    border-bottom-color: var(--border-strong);
    background: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--cor-azul);
    border-bottom-color: var(--cor-azul);
    background: transparent;
    font-weight: 600;
}

/* Pills nav (rabbit-pills no projetos, etc) */
.nav-pills .nav-link {
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    text-transform: lowercase;
}
.nav-pills .nav-link.active {
    background: var(--cor-azul);
    color: #fff;
}

/* List group */
.list-group {
    border-radius: var(--radius-md);
    overflow: hidden;
}
.list-group-item {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}

/* Modais */
.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}
.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-info,
.modal-header.bg-secondary,
.modal-header[class*="bg-"] {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header.bg-primary { background: var(--cor-azul) !important; }
.modal-header.bg-success { background: var(--cor-verde) !important; }
.modal-header.bg-warning { background: var(--cor-amarelo-borda) !important; }
.modal-header.bg-danger  { background: var(--cor-vermelho) !important; }
.modal-title {
    font-weight: 600;
    text-transform: lowercase;
}
.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
}

/* Status badges legados (status-pendente, status-entregue etc) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    background: var(--bg-chip);
    color: var(--text-main);
}
.status-pendente   { background: #fef3c7; color: #78350f; }
.status-confirmado { background: #dbeafe; color: #1e40af; }
.status-separado   { background: #cffafe; color: #155e75; }
.status-em-transporte { background: #ede9fe; color: #5b21b6; }
.status-entregue   { background: var(--cor-verde-soft); color: #14532d; }
.status-cancelado  { background: #f1f5f9; color: #64748b; }
.status-divergencia{ background: var(--cor-vermelho-soft); color: #7f1d1d; }
[data-theme="dark"] .status-pendente   { background: #422006; color: #fcd34d; }
[data-theme="dark"] .status-confirmado { background: #172554; color: #93c5fd; }
[data-theme="dark"] .status-separado   { background: #083344; color: #67e8f9; }
[data-theme="dark"] .status-em-transporte { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .status-entregue   { background: #052e16; color: #86efac; }
[data-theme="dark"] .status-cancelado  { background: #1f2937; color: #94a3b8; }
[data-theme="dark"] .status-divergencia{ background: #450a0a; color: #fca5a5; }

/* Title nas tabs/abas e h6 modal */
h6 { font-weight: 600; text-transform: lowercase; }

/* Cards com header colorido (ex: rh dashboard) — bordas arredondadas */
.card-header {
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    font-weight: 600;
}
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-info { color: #fff !important; }
.card-header.bg-primary { background: var(--cor-azul) !important; }
.card-header.bg-success { background: var(--cor-verde) !important; }
.card-header.bg-warning { background: var(--cor-amarelo-borda) !important; }
.card-header.bg-danger  { background: var(--cor-vermelho) !important; }

/* Print styles — mantém compatibilidade */
@media print {
    .btn { box-shadow: none !important; }
}

/* ═══════════════════════════════════════════
   COPILOT — botão flutuante + painel lateral
   ═══════════════════════════════════════════ */







/* (bloco órfão removido em 06/07/2026 — sobra da remoção do copilot web que deixava TODO o CSS abaixo preso num @media print não fechado; ver commit) */
/* ═══════════════════════════════════════════
   COMMAND PALETTE (Cmd/Ctrl+K)
   Notion-style modal de busca global
   ═══════════════════════════════════════════ */

#cmdk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    animation: cmdk-fade 0.15s ease;
}

#cmdk-overlay.open { display: flex; }

@keyframes cmdk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

#cmdk-panel {
    width: min(640px, calc(100% - 32px));
    max-height: 70vh;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmdk-pop 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cmdk-pop {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#cmdk-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

#cmdk-search i {
    color: var(--text-muted);
    font-size: 16px;
}

#cmdk-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    padding: 0;
}

#cmdk-input::placeholder { color: var(--text-soft); }

#cmdk-search kbd {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-family: var(--font-sans);
    color: var(--text-muted);
    font-weight: 500;
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
}

#cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 12px;
}

.cmdk-cat {
    padding: 12px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-decoration: none;
    font-size: 13.5px;
    cursor: pointer;
    margin: 1px 0;
    transition: background var(--transition);
}

.cmdk-item i {
    font-size: 14px;
    color: var(--text-muted);
    width: 16px;
    flex-shrink: 0;
}

.cmdk-item:hover,
.cmdk-item.sel {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.cmdk-item.sel i {
    color: var(--text-main);
}

.cmdk-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-soft);
    font-size: 13px;
}

#cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-hover);
    font-size: 12px;
    color: var(--text-main);
    flex-wrap: wrap;
}

#cmdk-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#cmdk-footer kbd {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
    display: inline-block;
}

@media (max-width: 640px) {
    #cmdk-overlay { padding-top: 4vh; }
    #cmdk-panel { width: calc(100% - 16px); max-height: 92vh; }
}

/* ═══════════════════════════════════════════
   AGRUPAMENTO POR DIA (historicos colapsaveis)
   <details class="dia-grupo"><summary>...</summary>...</details>
   ═══════════════════════════════════════════ */

.dia-grupo {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--bg-card);
    overflow: hidden;
}
.dia-grupo summary {
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    list-style: none;
    user-select: none;
    transition: background var(--transition);
}
.dia-grupo summary::-webkit-details-marker { display: none; }
.dia-grupo summary::before {
    content: '›';
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    display: inline-block;
    width: 12px;
    line-height: 1;
}
.dia-grupo[open] summary::before { transform: rotate(90deg); }
.dia-grupo summary:hover { background: var(--bg-card-hover); }
.dia-data {
    font-size: 14px;
    color: var(--text-main);
    min-width: 130px;
}
.dia-resumo {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    flex: 1;
}
.dia-total {
    background: var(--bg-card-hover);
    color: var(--text-main);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.dia-total.dia-total-warn {
    background: var(--cor-amarelo);
    color: #92400e;
}
.dia-corpo { border-top: 1px solid var(--border-color); }
.dia-corpo > .table-responsive,
.dia-corpo > table { margin-bottom: 0; }

@media (max-width: 640px) {
    .dia-grupo summary { padding: 10px 12px; gap: 8px; }
    .dia-data { min-width: 110px; font-size: 13px; }
    .dia-resumo { font-size: 11px; }
    .dia-total { font-size: 11px; padding: 2px 8px; }
}


/* ═══════════════════════════════════════════
   MOBILE FIXES — scroll horizontal em tabelas, paddings reduzidos,
   sidebar virando drawer.
   ═══════════════════════════════════════════ */

/* Scroll horizontal em qualquer tabela densa quando estourar viewport */
.table-dense,
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Cards que envolvem tabelas: permitir scroll horizontal em vez de cortar */
.card:has(.table-dense),
.card:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Opt-out pra cards onde a tabela cabe na viewport E precisamos do dropdown
   escapar do clipping (ex: /pedidos lista — dropdown de acoes ficava cortado
   pelo overflow forcado acima, virando uma faixa cinza sem conteudo em
   mobile). Aplicar com cuidado: cabe na viewport vs scroll horizontal e
   uma decisao por tela. */
.card.allow-dropdown-overflow:has(.table-dense),
.card.allow-dropdown-overflow:has(> table) {
    overflow: visible !important;
}

/* Sombra sutil indicando que tem conteudo pra rolar */
@media (max-width: 768px) {
    .card:has(.table-dense),
    .card:has(> table),
    .table-responsive {
        background-image:
            linear-gradient(to right, var(--bg-card), var(--bg-card)),
            linear-gradient(to right, var(--bg-card), var(--bg-card)),
            linear-gradient(to right, rgba(0,0,0,0.08), rgba(255,255,255,0)),
            linear-gradient(to left, rgba(0,0,0,0.08), rgba(255,255,255,0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* page-actions: botões em fileira que estouram em mobile */
@media (max-width: 768px) {
    .page-actions,
    .d-flex.gap-2.flex-wrap {
        flex-wrap: wrap !important;
    }

    .page-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Botoes secundarios no header de pagina viram menores */
    .page-actions .btn,
    .page-actions .btn-pill {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Sidebar como drawer no mobile */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    .sidebar.aberta {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important;
        padding: 16px;
        padding-top: calc(60px + env(safe-area-inset-top, 0px));  /* hamburger + area segura */
    }
    /* Botao hamburger fixo no topo */
    .mobile-menu-toggle {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 10px;
        z-index: 99;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }
    /* Overlay quando drawer aberto */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Esconde botao hamburger no desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle, .sidebar-overlay { display: none !important; }
}

/* Reduz padding de cards no mobile */
@media (max-width: 640px) {
    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; }
    h1.page-title { font-size: 1.1rem; }
    .form-control, .form-select { font-size: 16px; }  /* evita zoom do iOS no focus */
}

/* ── Polimento garimpado da revisão de UI (30/06/2026) ──
   Só o que é NOVO e não conflita com o design system já existente.
   NÃO redefine .card/.table/.mobile-header/.page-title (já afinados). */
.page-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Agrupa as mensagens flash com espaçamento uniforme (cada alert vira mb-0) */
.flash-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

/* Realça o alerta crítico de cestas órfãs (substitui o style inline hardcoded) */
.app-alert-highlight {
    border: 1px solid color-mix(in srgb, var(--cor-vermelho) 20%, var(--border-color) 80%);
    border-left: 4px solid var(--cor-vermelho) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}


/* ═══ Varredura mobile (06/07/2026) — pedida pelo dono ═══
   Tabela solta rola no próprio lugar (o app.js embrulha em
   .mobile-table-scroll), barras de botões quebram linha, inputs com 16px
   (iOS não dá zoom ao focar) e dicas longas recolhidas com toque. */
.mobile-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    /* iOS dá zoom automático em input com fonte < 16px — mata o zoom. */
    .form-control, .form-select { font-size: 16px; }

    /* Abas nunca empilham: viram trilho horizontal rolável. */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* Barra de botões/filtros (d-flex) quebra linha em vez de esticar o
       body — causa real dos "vazamentos" em congelados/itens-vendidos. */
    .main-content .d-flex { flex-wrap: wrap; }

    /* Célula de tabela mais compacta no dedo. */
    .table > :not(caption) > * > * { padding: 0.45rem 0.5rem; }

    /* Select dentro de barra de filtros não vira um toco na borda. */
    .main-content .d-flex .form-select,
    .main-content .d-flex select { min-width: 7rem; }

    /* Grupo de botões largo quebra linha em vez de esticar o body. */
    .main-content .btn-group { flex-wrap: wrap; }

    /* Linha de tarefa (projetos): controles quebram pra 2ª linha. */
    .proj-tarefa { flex-wrap: wrap; }

    /* Dica explicativa longa: recolhida, expande no toque (JS alterna). */
    .dica-recolhe {
        max-height: 5.2em;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    .dica-recolhe::after {
        content: '… toque para ler tudo';
        position: absolute;
        right: 10px;
        bottom: 2px;
        font-weight: 600;
        color: #0d6efd;
        background: linear-gradient(90deg, transparent, #fcfcfd 35%);
        padding-left: 30px;
        font-size: 0.85em;
    }
    .dica-recolhe.aberta { max-height: none; }
    .dica-recolhe.aberta::after { content: ''; }

    /* Alvo de toque: botão pequeno dentro de tabela não fica minúsculo. */
    .table .btn-sm { padding: 0.35rem 0.6rem; }
}