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

/* =========================================================
   Tema Strock Phone — laranja + grafite
   (nomes antigos das variáveis mantidos para compatibilidade)
   ========================================================= */
:root {
    /* Novo tema */
    --background: #F9F6F2;
    --foreground: #12161D;
    --card: #FFFFFF;
    --primary: #F15B00;
    --primary-dark: #D93500;
    --muted: #F1EEE9;
    --muted-foreground: #5E646C;
    --accent-soft: #FFE7D7;
    --accent-soft-text: #882700;
    --destructive: #DF202E;
    --success: #1C985A;
    --warning: #E9AB2B;
    --warning-foreground: #43260A;
    --input: #DBD7D0;
    --sidebar: #12161D;
    --sidebar-foreground: #CACED4;
    --sidebar-primary: #FA6E1D;
    --sidebar-accent: #212730;
    --sidebar-border: #282E38;
    --gradient-primary: linear-gradient(135deg, #F77200, #E2381C);
    --gradient-ink: linear-gradient(140deg, #1A2029, #0C1016);
    --shadow-soft: 0 1px 2px rgba(18,22,29,.05), 0 8px 24px -12px rgba(18,22,29,.14);
    --shadow-glow: 0 10px 30px -10px rgba(241,91,0,.45);

    /* Nomes antigos (usados nas páginas) apontando para o novo tema */
    --navy: #12161D;
    --navy-light: #212730;
    --accent: #F15B00;
    --accent-dark: #D93500;
    --green: #1C985A;
    --amber: #E9AB2B;
    --bg: #F9F6F2;
    --surface: #FFFFFF;
    --border: #E1DDD7;
    --text: #12161D;
    --text-muted: #5E646C;
    --sidebar-text: #CACED4;
    --sidebar-text-active: #FFFFFF;
    --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Manrope', -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .brand {
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

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

/* ---------- Layout geral ---------- */
.app {
    display: grid;
    grid-template-columns: 256px 1fr;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    background: var(--gradient-ink);
    color: var(--sidebar-text);
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px 8px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.brand .mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
    display: grid;
    place-items: center;
    font-size: 0; /* esconde o caractere antigo */
    color: #fff;
}
.brand .mark::after {
    content: "S";
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6E7480;
    padding: 18px 12px 6px 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sidebar-text);
    transition: background .15s ease, color .15s ease;
}

.nav-item:hover {
    background: rgba(33,39,48,.65);
    color: #fff;
}

.nav-item.active {
    background: var(--sidebar-accent);
    color: #fff;
}
.nav-item.active::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sidebar-primary);
}

/* Ícones: troca os emojis por ícones de linha (via CSS, sem mexer no HTML) */
.nav-item .icon {
    --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/></svg>");
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}
.nav-item.active .icon { background-color: var(--sidebar-primary); }

.nav-item[href="index.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='9' x='3' y='3' rx='1'/><rect width='7' height='5' x='14' y='3' rx='1'/><rect width='7' height='9' x='14' y='12' rx='1'/><rect width='7' height='5' x='3' y='16' rx='1'/></svg>"); }
.nav-item[href="novo-pedido.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>"); }
.nav-item[href="pedidos.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M16 13H8'/><path d='M16 17H8'/><path d='M10 9H8'/></svg>"); }
.nav-item[href="compras.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>"); }
.nav-item[href="relatorios.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M18 17V9'/><path d='M13 17V5'/><path d='M8 17v-3'/></svg>"); }
.nav-item[href="produtos.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>"); }
.nav-item[href="produtos-pai.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/><path d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/><path d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/></svg>"); }
.nav-item[href="clientes.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.nav-item[href="fornecedores.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/><path d='M17 18h1'/><path d='M12 18h1'/><path d='M7 18h1'/></svg>"); }
.nav-item[href="equipe.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='7' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>"); }

/* Rodapé da sidebar (usuário, trocar senha, sair) */
.sidebar-footer {
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(33,39,48,.6);
    font-size: 12px;
    color: #8B919B;
}
.sidebar-footer a { color: var(--sidebar-text); font-size: 12.5px; }
.sidebar-footer a:hover { color: #fff; }
.sidebar-footer .sair-link { color: var(--sidebar-primary); font-weight: 700; font-size: 12.5px; }
.sidebar-footer .sair-link:hover { text-decoration: underline; color: var(--sidebar-primary); }

/* ---------- Recibo (impressão) ---------- */
.recibo-page { max-width: 480px; margin: 30px auto; }
.recibo-box { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-soft); }
.recibo-box h2 { font-size: 18px; margin-bottom: 2px; }
.recibo-linha { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.recibo-total { border-top: 1.5px dashed var(--border); margin-top: 10px; padding-top: 10px; font-weight: 700; font-size: 15px; }
.recibo-acoes { max-width: 480px; margin: 0 auto 20px; display: flex; gap: 10px; justify-content: flex-end; }

@media print {
    .no-print { display: none !important; }
    .sidebar { display: none !important; }
    .app { display: block; }
    .recibo-page { margin: 0; max-width: 100%; }
    .recibo-box { border: none; padding: 0; box-shadow: none; }
    body { background: #fff; }
}

/* ---------- Conteúdo ---------- */
.main { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.topbar,
.content { width: 100%; max-width: 1152px; margin: 0 auto; }

.topbar {
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 32px 32px 0 32px;
}

.topbar .page-title { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.topbar .page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; text-transform: capitalize; }

.content { padding: 22px 32px 56px 32px; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s ease, background .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { filter: brightness(1.06); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--muted); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-danger { background: var(--surface); color: var(--destructive); border-color: rgba(223,32,46,.28); }
.btn-danger:hover { background: rgba(223,32,46,.08); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- Cards de estatística (dashboard) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: var(--shadow-soft);
}

.stat-card .label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.stat-card .value {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.stat-card .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-card.accent-green .value { color: var(--green); }
.stat-card.accent-amber .value { color: #B07A0B; }

/* Primeiro card em destaque (grafite) */
.stats-grid .stat-card:first-child {
    background: var(--gradient-ink);
    border-color: transparent;
    color: #fff;
}
.stats-grid .stat-card:first-child .label { color: var(--sidebar-foreground); }
.stats-grid .stat-card:first-child .value { color: #fff; }

/* ---------- Painel / bloco de conteúdo ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.panel > table { min-width: 420px; }
.panel { overflow-x: auto; }

.panel-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-header h3 { font-size: 15px; font-weight: 600; }
.panel-header a { color: var(--primary); font-weight: 700; }

/* ---------- Tabelas ---------- */
table { width: 100%; border-collapse: collapse; }

thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 12px 22px;
    background: #FAF8F5;
    border-bottom: 1px solid var(--border);
}

tbody td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FBF9F6; }

.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.badge-green { background: rgba(28,152,90,.14); color: #14804B; }
.badge-amber { background: rgba(233,171,43,.25); color: var(--warning-foreground); }
.badge-red   { background: rgba(223,32,46,.12); color: var(--destructive); }
.badge-gray  { background: var(--muted); color: var(--text-muted); }

/* ---------- Formulários ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group.full { grid-column: 1 / -1; }

label { font-size: 12.5px; font-weight: 700; color: var(--text); }

input, select, textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--input);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(241,91,0,.15);
}

textarea { resize: vertical; min-height: 70px; }

.search-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.search-bar input { flex: 1; max-width: 340px; }

/* ---------- Bloco de troca (tela de novo pedido) ---------- */
.trade-box {
    border: 1.5px dashed var(--input);
    border-radius: 16px;
    padding: 18px;
    margin-top: 8px;
    transition: border-color .15s ease;
}
.trade-box.active { border-color: var(--primary); border-style: solid; background: #FFF8F3; }

.trade-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 13.5px; }

.trade-fields { margin-top: 16px; display: none; }
.trade-box.active .trade-fields { display: block; }

/* ---------- Itens de pedido dinâmicos ---------- */
.item-row {
    display: grid;
    grid-template-columns: 2fr 90px 120px 40px;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

.remove-item { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 8px; }
.remove-item:hover { color: var(--destructive); }

/* ---------- Resumo do pedido ---------- */
.summary-box {
    background: #FAF8F5;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
}
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 16px; font-family: 'Sora', sans-serif; }
.summary-row.discount { color: var(--green); }

/* ---------- Estado vazio ---------- */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 20px;
}

/* ---------- Utilitários ---------- */
.mt-16 { margin-top: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Ajustes nas páginas com CSS próprio (novo-pedido, produtos-pai) ---------- */
body .secao { border-radius: 20px; border-color: var(--border); box-shadow: var(--shadow-soft); }
body .pai-card { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow-soft); }
body .var-secao { border-radius: 14px; border-color: var(--border); }
body .modal-caixa { border-radius: 20px; }
body .barra-final { border-radius: 16px; border-color: var(--border); }
body .upgrade-card, body .up-unidade, body .up-item { border-radius: 14px; }
body .btn-acao { border-radius: 12px; background: var(--gradient-primary); box-shadow: var(--shadow-glow); }
body .btn-acao:hover { filter: brightness(1.06); background: var(--gradient-primary); }

/* =========================================================
   Celular / tablet: sidebar vira barra de navegação embaixo
   ========================================================= */
@media (max-width: 1023px) {
    .app { display: block; }

    .main { padding-bottom: 92px; }

    .sidebar {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        height: auto;
        z-index: 40;
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        overflow-x: auto;
        overflow-y: hidden;
        border-top: 1px solid var(--sidebar-border);
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }

    .brand { font-size: 0; padding: 0 8px 0 4px; align-self: center; flex: 0 0 auto; }
    .nav-section-label { display: none; }

    .nav-item {
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-width: 66px;
        margin: 0;
        padding: 7px 10px;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        border-radius: 14px;
    }
    .nav-item.active::after { display: none; }
    .nav-item .icon { width: 20px; height: 20px; }

    /* "Nova venda" em destaque, como o botão central do app */
    .nav-item[href="novo-pedido.html"] {
        background: var(--gradient-primary);
        color: #fff;
        box-shadow: var(--shadow-glow);
    }
    .nav-item[href="novo-pedido.html"] .icon { background-color: #fff; }

    .sidebar-footer {
        flex: 0 0 auto;
        display: flex;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .sidebar-footer #usuario-logado { display: none; }
    .sidebar-footer a {
        display: flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 7px 12px;
        font-size: 11px;
        white-space: nowrap;
    }

    .topbar { padding: 20px 16px 0 16px; }
    .topbar .page-title { font-size: 24px; }
    .content { padding: 16px 16px 32px 16px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats-grid .stat-card:first-child { grid-column: 1 / -1; }
    .stat-card { padding: 16px; }
    .stat-card .value { font-size: 22px; }

    .content > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    .form-grid { grid-template-columns: 1fr; }
    thead th, tbody td { padding-left: 14px; padding-right: 14px; }
}
/* ---------- Meta do mês ---------- */
.metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.meta-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-soft); }
.meta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meta-nome { font-weight: 700; font-size: 13.5px; }
.meta-pct { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; color: var(--primary); }
.meta-numeros { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.meta-numeros strong { font-family: 'Sora', sans-serif; font-size: 24px; color: var(--text); letter-spacing: -0.02em; }
.meta-barra { height: 10px; border-radius: 999px; background: var(--muted); overflow: hidden; margin-top: 12px; }
.meta-barra-fill { height: 100%; border-radius: 999px; background: var(--gradient-primary); transition: width .6s ease; }
.meta-rodape { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.meta-batida { border-color: rgba(28, 152, 90, .4); }
.meta-batida .meta-pct { color: var(--success); }
.meta-batida .meta-barra-fill { background: var(--success); }

/* Ícone do menu (alvo) */
.nav-item[href="metas.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }


/* =========================================================
   TEMA TESTE — menu no topo + azul/violeta
   Para voltar ao visual anterior, apague tudo daqui até o fim do arquivo.
   ========================================================= */
:root {
    --background: #F3F5FB;
    --bg: #F3F5FB;
    --primary: #4F46E5;
    --primary-dark: #3730A3;
    --accent: #4F46E5;
    --accent-dark: #3730A3;
    --accent-soft: #E3E1FF;
    --accent-soft-text: #2E2A8F;
    --sidebar: #0B1020;
    --sidebar-primary: #8B8CFF;
    --sidebar-accent: #1A2140;
    --sidebar-border: #232B4D;
    --gradient-primary: linear-gradient(135deg, #3B82F6, #7C3AED);
    --gradient-ink: linear-gradient(120deg, #0B1020, #141B3A);
    --shadow-glow: 0 10px 28px -10px rgba(79,70,229,.55);
    --shadow-soft: 0 1px 2px rgba(11,16,32,.04), 0 6px 20px -10px rgba(11,16,32,.16);
    --border: #E2E6F2;
    --muted: #ECEFF8;
    --input: #D5DAEA;
    --radius: 12px;
}

thead th { background: #F6F8FD; }
tbody tr:hover { background: #F8F9FE; }
.panel, .stat-card, .meta-card { border-radius: 14px; }
.btn { border-radius: 10px; }

.topbar .page-title { font-size: 26px; }
.topbar .page-subtitle { font-size: 13px; }

/* Ícone da Agenda (calendário) */
.nav-item[href="agenda.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>"); }

/* Menu no topo (computador): 1ª linha = marca + usuário, 2ª linha = abas.
   No celular continua a barra de baixo. */
@media (min-width: 1024px) {
    .app { display: block; }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px;
        padding: 8px 24px 10px;
        overflow: visible;
        box-shadow: 0 6px 24px -12px rgba(11,16,32,.5);
    }
    .sidebar::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }

    .brand { order: 0; flex: 0 0 auto; padding: 0; margin-right: auto; }
    .brand .mark { width: 32px; height: 32px; border-radius: 10px; }
    .nav-section-label { display: none; }

    .nav-item {
        order: 3;
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
        padding: 7px 8px;
        gap: 6px;
        font-size: 13px;
        border-radius: 999px;
    }
    .nav-item.active::after { display: none; }
    .nav-item.active { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); }
    .nav-item.active .icon { background-color: #fff; }

    .sidebar-footer {
        order: 1;
        flex: 0 0 auto;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 6px 16px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .sidebar-footer #usuario-logado { margin: 0 !important; font-size: 12px !important; }
    .sidebar-footer a { display: inline !important; margin: 0 !important; }

    .main { min-height: calc(100vh - 100px); }
    .topbar, .content { max-width: 1280px; }
}

/* =========================================================
   Menu "Administração" (Lucro real, Equipe, Logs)
   ========================================================= */
.nav-item[href="lucro-real.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/><path d='M12 18V6'/></svg>"); }
.nav-item[href="logs.html"] .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><path d='M21 3v6h-6'/><path d='M12 7v5l3 2'/></svg>"); }
.nav-grupo-btn .icon { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }

.nav-grupo { position: relative; }
.nav-grupo-btn { width: 100%; background: transparent; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.nav-grupo .seta { margin-left: auto; font-size: 10px; opacity: .7; transition: transform .15s ease; }
.nav-grupo.aberto .seta { transform: rotate(180deg); }
.nav-submenu { display: none; }
.nav-grupo.aberto .nav-submenu { display: block; }

@media (min-width: 1024px) {
    .nav-grupo { order: 3; flex: 0 0 auto; }
    .nav-grupo-btn { width: auto; white-space: nowrap; padding: 7px 8px; gap: 6px; border-radius: 999px; }
    .nav-grupo-btn .seta { margin-left: 2px; }
    .nav-submenu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 220px;
        padding: 6px;
        background: #0F1630;
        border: 1px solid var(--sidebar-border);
        border-radius: 14px;
        box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
        z-index: 60;
    }
    .nav-grupo.alinha-direita .nav-submenu { left: auto; right: 0; }
    .nav-submenu .nav-item { order: 0; width: 100%; margin: 0 0 2px; padding: 10px 12px; border-radius: 10px; }
}

@media (max-width: 1023px) {
    .nav-grupo { flex: 0 0 auto; display: flex; }
    .nav-grupo-btn { flex-direction: column; justify-content: center; gap: 3px; min-width: 66px; padding: 7px 10px; font-size: 11px; text-align: center; white-space: nowrap; border-radius: 14px; }
    .nav-grupo .seta { display: none; }
    .nav-submenu {
        position: fixed;
        left: 10px; right: 10px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        padding: 8px;
        background: #0F1630;
        border: 1px solid var(--sidebar-border);
        border-radius: 16px;
        box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
        z-index: 60;
    }
    .nav-submenu .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-width: 0; margin: 0 0 2px; padding: 12px; font-size: 14px; text-align: left; }
}

/* ---------- Tela de Logs ---------- */
.logs-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; padding: 16px 20px; }
.logs-filtros .form-group { margin-bottom: 0; }
.logs-filtros label.check { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; }
.logs-filtros label.check input { width: auto; }
.log-linha { cursor: pointer; }
.log-linha.falhou td { background: rgba(220, 53, 69, .06); }
.log-quando { white-space: nowrap; font-size: 12.5px; color: var(--text-muted); }
.log-quem { white-space: nowrap; font-weight: 600; }
.log-desc { min-width: 260px; }
.log-detalhe td { background: var(--muted); padding: 14px 20px; }
.log-detalhe pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; }
.log-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mud-tabela { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12.5px; }
.mud-tabela th, .mud-tabela td { padding: 5px 8px; border: 1px solid var(--border); text-align: left; background: var(--surface); }
.mud-tabela td.de { color: var(--destructive); }
.mud-tabela td.para { color: var(--success); font-weight: 600; }
.logs-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; font-size: 13px; color: var(--text-muted); }

/* Ajustes finos do menu no computador e da tela de Logs */
@media (min-width: 1024px) {
    .sidebar > .nav-item, .nav-grupo-btn { font-size: 12.5px; padding: 7px 7px; gap: 5px; }
}
.log-detalhe p { margin: 10px 0 0; font-size: 13px; }


/* Campo de IMEI com botão "Consultar" ao lado */
.imei-linha { display: flex; gap: 8px; align-items: center; }
.imei-linha input { flex: 1; min-width: 0; }
.imei-linha .btn { white-space: nowrap; flex: 0 0 auto; }