/* ---------- fontes customizadas ---------- */
@font-face {
    font-family: 'Boombox2';
    src: url('fonts/boombox2.ttf') format('truetype'),
         url('fonts/boombox2.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ============================================================
   Reetek ERP / Reetek Food — Design System
   Baseado no visual do ES Atacadista (esatacadista)
   ============================================================ */

/* ---------- variáveis ---------- */
:root {
    --primary:          #004aad;
    --primary-dark:     #003d8f;
    --primary-light:    #0056d6;
    --primary-alpha10:  rgba(0,74,173,.10);
    --primary-alpha20:  rgba(0,74,173,.20);
    --primary-alpha30:  rgba(0,74,173,.30);

    --chart-bar:        #3f73ff;
    --chart-bar-dim:    #dbe6ff;
    --chart-line:       #16307a;
    --chart-green:      #0f766e;

    --border-gray:      #e0e0e0;
    --text-muted-custom:#6c757d;

    --sidebar-width:    290px;
    --sidebar-collapsed: 60px;

    --radius-btn:  25px;
    --radius-card: 15px;
    --radius-input: 8px;

    --shadow-sm:  0 2px 10px rgba(0,0,0,.08);
    --shadow-md:  0 4px 20px rgba(0,0,0,.10);
    --shadow-blue: 0 6px 20px rgba(0,74,173,.25);
}

/* ---------- tipografia global ---------- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #e3e9f3;
    color: #333;
}

.x-small { font-size: .72rem; }

/* ---------- loader ---------- */
.page-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.35);
    align-items: center;
    justify-content: center;
}
.page-loader.is-visible { display: flex; }
.loader-card {
    background: #fff;
    border-radius: var(--radius-card);
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    min-width: 220px;
}
.loader-mark {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 36px;
    height: 36px;
}
.loader-mark span {
    border-radius: 3px;
    animation: loaderPulse 1.1s ease-in-out infinite;
    background: var(--primary);
}
.loader-mark span:nth-child(1) { animation-delay: 0s; }
.loader-mark span:nth-child(2) { animation-delay: .18s; }
.loader-mark span:nth-child(3) { animation-delay: .36s; }
.loader-mark span:nth-child(4) { animation-delay: .54s; }
@keyframes loaderPulse {
    0%,100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1);   }
}
.loader-dismiss {
    border: none; background: none;
    color: #6c757d; font-size: .75rem;
    cursor: pointer; padding: 0; margin-top: .25rem;
}
.loader-dismiss:hover { text-decoration: underline; }

/* ============================================================
   SIDEBAR
   ============================================================ */
#appSidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 1030;
    overflow: hidden;
    white-space: nowrap;
    transition: width .2s ease;
    display: flex;
    flex-direction: column;
    background: var(--primary);
    box-shadow: 2px 0 10px rgba(0,0,0,.15);
}

/* collapsed */
#appSidebar.is-collapsed { width: var(--sidebar-collapsed); }
#appSidebar.is-collapsed .sidebar-label   { display: none !important; }
#appSidebar.is-collapsed .collapse.show   { display: none !important; }

/* brand header */
#appSidebar .sidebar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--primary-dark);
}
#appSidebar .sidebar-brand .brand-name {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}
#appSidebar .sidebar-brand .brand-sub {
    color: rgba(255,255,255,.65);
    font-size: .72rem;
}

/* override Bootstrap border-secondary dentro do sidebar */
#appSidebar .border-secondary,
#appSidebar .border-bottom,
#appSidebar .border-top {
    border-color: var(--primary-dark) !important;
}

/* botão de toggle */
#sidebarToggle { color: rgba(255,255,255,.6) !important; }
#sidebarToggle:hover { color: #fff !important; }

/* header colapsado: mostra só o toggle, centralizado (logo nao cabe em 60px) */
#appSidebar.is-collapsed #sidebarHeader {
    justify-content: center;
    padding-left: .25rem;
    padding-right: .25rem;
    gap: 0;
}
#appSidebar.is-collapsed #sidebarHeader img { display: none; }
#appSidebar.is-collapsed #sidebarToggle { margin-left: 0 !important; }

/* itens centralizados quando colapsado */
#appSidebar.is-collapsed .sidebar-section-btn,
#appSidebar.is-collapsed .sidebar-direct,
#appSidebar.is-collapsed .sidebar-child-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- links de seção (accordion trigger) ---------- */
.sidebar-section-btn {
    color: rgba(255,255,255,.9) !important;
    padding: .65rem .85rem;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: background .2s ease, border-color .2s ease;
}
.sidebar-section-btn:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border-left-color: rgba(255,255,255,.45) !important;
}
.sidebar-section-btn.is-active {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-left-color: #fff !important;
}

/* chevron */
.sidebar-section-btn[aria-expanded="true"] .sidebar-chevron { transform: rotate(-180deg); }
.sidebar-chevron { transition: transform .2s ease; }

/* ---------- links filhos ---------- */
.sidebar-child-link {
    font-size: .82rem;
    padding: .4rem .75rem .4rem 1.1rem;
    color: rgba(255,255,255,.75) !important;
    border-left: 3px solid transparent;
    border-radius: 0 !important;
    transition: background .2s ease, border-color .2s ease;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.sidebar-child-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff !important;
    border-left-color: rgba(255,255,255,.4);
}
.sidebar-child-link.active {
    background: rgba(255,255,255,.10);
    color: #fff !important;
    border-left-color: #fff;
    font-weight: 600;
}

/* tag discreta para itens ainda nao implementados */
.sidebar-dev-tag {
    font-size: .55rem;
    font-weight: 500;
    letter-spacing: .2px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-link.active.sidebar-direct {
    background: rgba(255,255,255,.10);
    color: #fff !important;
    border-left: 3px solid #fff;
}

/* ---------- footer do sidebar ---------- */
#appSidebar .sidebar-footer {
    border-top: 1px solid var(--primary-dark);
    padding: .75rem 1rem;
}
#appSidebar .sidebar-footer .small  { color: rgba(255,255,255,.9); }
#appSidebar .sidebar-footer .x-small { color: rgba(255,255,255,.55); }

/* online dot */
.online-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,.35);
    flex-shrink: 0;
}

/* ---------- main content ---------- */
#mainContent {
    margin-left: var(--sidebar-width);
    transition: margin-left .2s ease;
    min-height: 100vh;
}
#mainContent.is-collapsed { margin-left: var(--sidebar-collapsed); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all .3s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-color: var(--primary);
    border-radius: var(--radius-btn);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
}
.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    border-radius: var(--radius-btn);
}
.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue);
}
.btn-outline-secondary {
    border-radius: var(--radius-btn);
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,.35);
}
.btn-outline-secondary:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.6);
}
/* logout button no sidebar */
#appSidebar .btn-outline-secondary {
    border-radius: var(--radius-btn);
    color: rgba(255,255,255,.75);
    border-color: rgba(255,255,255,.3);
    font-size: .82rem;
}
#appSidebar .btn-outline-secondary:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.55);
    transform: none;
    box-shadow: none;
}
/* btn-group do chart switch */
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: var(--radius-btn) 0 0 var(--radius-btn) !important; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-btn) var(--radius-btn) 0 !important; }

/* ---------- controles de gráfico: toggle segmentado + combo ----------
   Estilo limpo (modelo de referência), cores do app (azul primário). */
.seg-toggle {
    display: inline-flex;
    background: #eef2f7;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.seg-toggle button {
    border: 0;
    background: transparent;
    color: #475569;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .32rem .8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.seg-toggle button:hover { color: var(--primary); }
.seg-toggle button.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,74,173,.30);
}
.seg-toggle-sm { padding: 2px; border-radius: 8px; }
.seg-toggle-sm button { font-size: .68rem; padding: .2rem .5rem; border-radius: 6px; }

/* badges de contas (financeiro) */
.conta-badge {
    flex: 1;
    border: 1px solid #d4dcea;
    background: #fff;
    border-radius: 10px;
    padding: .45rem .55rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.conta-badge:hover { border-color: #9db8ec; }
.conta-badge.is-active { background: #eaf1ff; border-color: var(--chart-bar); }
.conta-badge-val { display: block; font-weight: 700; font-size: .82rem; color: #1e293b; line-height: 1.2; }
.conta-badge-lbl { display: block; font-size: .64rem; color: #64748b; }
.conta-arrow { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.04); flex-shrink: 0; font-size: .8rem; }
#contasLista::-webkit-scrollbar { width: 4px; }
#contasLista::-webkit-scrollbar-track { background: transparent; }
#contasLista::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#contasLista::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.chart-combo {
    width: auto;
    min-width: 118px;
    font-size: .78rem;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    border-color: var(--border-gray);
    padding-top: .32rem;
    padding-bottom: .32rem;
}
.chart-combo:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .15rem var(--primary-alpha20);
}

/* Atualizar */
.btn-primary.btn-sm, .btn-sm.btn-primary {
    border-radius: var(--radius-btn);
    padding: .35rem 1rem;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border-radius: var(--radius-card) !important;
    border: 1px solid #d4dcea !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body { font-family: 'Inter', sans-serif; }

/* KPI cards — ícone colorido */
.card-body .rounded-3 { border-radius: 12px !important; }

/* ---------- painel branco embutido (padrão das páginas internas) ---------- */
.page-panel {
    background: #fff;
    border: 1px solid #d4dcea;
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
    padding: .9rem 1.15rem;
    margin-bottom: 1rem;
}

/* ============================================================
   TABELAS
   ============================================================ */
.table th {
    background: #f8f9fa;
    color: var(--primary);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--border-gray) !important;
}
.table td { font-size: .88rem; vertical-align: middle; }
.table tbody tr:hover { background: var(--primary-alpha10); }
.table-hover tbody tr:hover > td { background: var(--primary-alpha10); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border-radius: var(--radius-input);
    font-size: .9rem;
    font-weight: 500;
}
.alert-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffecb5; }
.alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ============================================================
   FORMULÁRIOS (login e demais)
   ============================================================ */
.form-control, .form-select {
    border-radius: var(--radius-input);
    border-color: var(--border-gray);
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(0,74,173,.18);
}
.form-label { font-weight: 600; font-size: .85rem; color: #444; }

/* Login card */
.login-card {
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(0,74,173,.15) !important;
}

/* ============================================================
   TOP BAR (cabeçalho da página)
   ============================================================ */
#mainContent .sticky-top.bg-white {
    border-bottom: 1px solid var(--border-gray) !important;
    box-shadow: var(--shadow-sm) !important;
}
#mainContent .sticky-top .fw-bold { color: var(--primary); }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
    border-radius: 20px;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .3px;
}
.badge.bg-primary { background: var(--primary) !important; }

/* ============================================================
   GRÁFICO DE BARRAS
   ============================================================ */
.annual-bars {
    display: grid;
    gap: 3px;
    align-items: end;
    height: 300px;
    position: relative;
    padding-bottom: 22px;
    overflow: hidden;
}
.annual-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 2px;
    min-width: 0;
}
.annual-track {
    flex: 1;
    width: 100%;
    max-width: 74px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    position: relative;
}
.annual-track > span {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #eef4ff 0%, var(--chart-bar-dim) 100%);
    border-radius: 4px 4px 0 0;
    font-size: .58rem;
    color: transparent;
    transition: background .15s;
    min-height: 4px;
}
.annual-item.is-active .annual-track > span {
    background: linear-gradient(180deg, #6a93ff 0%, #3f73ff 100%);
    color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    overflow: hidden;
}
.annual-item b {
    font-size: .58rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.stack-segment { display: block; width: 100%; min-height: 2px; }
.stack-segment:last-child { border-radius: 3px 3px 0 0; }
.annual-bars.is-money-mode .annual-item.is-active .annual-track > span {
    font-size: .52rem;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 4px 0;
    overflow: hidden;
}

/* ---------- linha sobre barras ---------- */
.daily-bars { position: relative; }
.daily-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% - 22px);
    pointer-events: none;
    overflow: visible;
}
.daily-line-path {
    fill: none;
    stroke: var(--chart-line);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.daily-line-point { fill: #fff; stroke: var(--chart-line); stroke-width: 2; }
.daily-line-point.is-active { fill: var(--chart-line); }
.daily-line-label { font-size: 8px; fill: #334155; font-weight: 600; }

/* ---------- legenda ---------- */
.chart-legend { display: none; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .5rem; font-size: .72rem; }
.chart-legend.is-visible { display: flex; }
.chart-legend span { display: flex; align-items: center; gap: .3rem; color: #64748b; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---------- gráfico de linha anual ---------- */
.line-chart svg { width: 100%; height: 170px; display: block; }
.line-chart text { font-size: 8px; fill: #94a3b8; text-anchor: middle; }
.line-chart text.month { fill: #64748b; font-size: 9px; }

/* ---------- donut ---------- */
.donut {
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e2e8f0;
    flex-shrink: 0;
}
.donut span {
    background: #fff;
    border-radius: 50%;
    width: 68px; height: 68px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: #1e293b;
}

/* ---------- lista de estoque ---------- */
.stock-list { display: flex; flex-direction: column; gap: .6rem; }
.stock-row { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; }
.stock-row > div strong { display: block; font-size: .82rem; color: #1e293b; }
.stock-row > div span  { color: #64748b; font-size: .72rem; }
.stock-row > b { font-size: .9rem; font-weight: 700; color: var(--primary); }
.stock-row > em {
    display: block; height: 4px;
    background: #e2e8f0; border-radius: 4px;
    overflow: hidden; font-style: normal;
}
.stock-row > em > i {
    display: block; height: 100%;
    background: var(--chart-green);
    border-radius: 4px; font-style: normal;
}

/* ---------- SVG inline ---------- */
svg { fill: currentColor; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #001a5e 0%, #003d8f 30%, #004aad 60%, #0a2f7a 100%);
    background-size: 300% 300%;
    animation: loginGradient 14s ease infinite;
}
@keyframes loginGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* canvas de partículas */
#loginCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* orbs flutuantes */
.login-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
    animation: orbFloat ease-in-out infinite;
}
.login-orb-1 { width: 550px; height: 550px; top: -200px; right: -130px; animation-duration: 22s; }
.login-orb-2 { width: 380px; height: 380px; bottom: -130px; left:  -90px; animation-duration: 28s; animation-direction: reverse; }
.login-orb-3 { width: 180px; height: 180px; top: 35%; left: 8%;  animation-duration: 17s; animation-delay: -6s; }
.login-orb-4 { width: 120px; height: 120px; bottom: 22%; right: 12%; animation-duration: 20s; animation-delay: -11s; }
@keyframes orbFloat {
    0%   { transform: translate(0,    0)    scale(1);    }
    33%  { transform: translate(25px, -35px) scale(1.06); }
    66%  { transform: translate(-18px, 22px) scale(.94); }
    100% { transform: translate(0,    0)    scale(1);    }
}

/* card do login */
.login-card-box {
    position: relative;
    z-index: 10;
    background: #fff;
    border-radius: 24px;
    padding: 2.75rem 2.5rem 2rem;
    width: 400px;
    max-width: 95vw;
    box-shadow: 0 30px 70px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08);
    animation: cardIn .65s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(32px) scale(.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* logo icon */
.login-logo-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0,74,173,.2));
}
@keyframes logoPulse {
    0%,100% { box-shadow: 0 10px 28px rgba(0,74,173,.45); }
    50%      { box-shadow: 0 14px 36px rgba(0,74,173,.65); }
}

/* textos da marca */
.login-brand-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}
.login-brand-sub {
    font-size: .72rem;
    font-weight: 600;
    color: #8b9ab0;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-top: .2rem;
}