/* ================================================================
   ERP/PDV — estilo base
   Paleta herdada do projeto de referência (GM):
   ================================================================ */
:root {
    --gm-primary:       #0284c7;
    --gm-primary-dark:  #0369a1;
    --gm-primary-soft:  #e0f2fe;
    --gm-sidebar:       #0f172a;
    --gm-sidebar-hover: #1e293b;
    --gm-sidebar-text:  #94a3b8;
    --gm-bg:            #f1f5f9;
    --gm-card:          #ffffff;
    --gm-border:        #e2e8f0;
    --gm-text:          #1e293b;
    --gm-text-soft:     #64748b;
    --gm-success:       #16a34a;
    --gm-danger:        #ef4444;
    --gm-warning:       #f59e0b;
    --sidebar-w:        240px;
}

* { box-sizing: border-box; }

body {
    background-color: var(--gm-bg);
    color: var(--gm-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
}

/* ── Sidebar (moderno: pílulas arredondadas, ativo preenchido) ─── */
.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    background: linear-gradient(180deg, #111c33 0%, #0b1120 100%);
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* o scroll fica só na área de navegação */
}
.sidebar-brand {
    flex-shrink: 0;            /* logo sempre visível no topo */
    padding: 1.1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);   /* divisória do logo */
}
.sidebar-brand .sidebar-logo { max-width: 100%; max-height: 55px; object-fit: contain; }
/* Nome da empresa (de "Dados da Empresa") em faixa própria, com divisória
   própria — separada da divisória do logo. */
.sidebar-empresa {
    flex-shrink: 0;
    /* Alinhado à esquerda, na mesma margem em que começam os ícones dos links
       (padding da nav .55rem + padding do item .7rem = 1.25rem). */
    padding: .7rem 1rem .7rem 1.25rem;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(255, 255, 255, .06);   /* divisória do nome */
}

/* Só esta área rola; brand e footer ficam fixos. min-height:0 permite o
   flex item encolher abaixo do conteúdo e habilitar o scroll interno. */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .55rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Item de menu e cabeçalho de grupo compartilham a mesma "pílula". */
.sidebar-nav a,
.sidebar-group > summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .7rem;
    border-radius: 11px;
    color: var(--gm-sidebar-text);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sidebar-nav a .bi,
.sidebar-group > summary .bi {
    font-size: 1.12rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-nav a:hover,
.sidebar-group > summary:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
/* Estado ativo: pílula preenchida com a cor primária + leve elevação. */
.sidebar-nav a.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px -4px rgba(2, 132, 199, .5);
}
.sidebar-nav a.active .bi { color: #fff; }

.sidebar-section {
    padding: .9rem .9rem .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 700;
}

/* Grupo recolhível (Administração) */
.sidebar-group { display: block; }
.sidebar-group > summary { justify-content: space-between; list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary > span { display: flex; align-items: center; gap: .75rem; }
.sidebar-group > summary .chev { font-size: .78rem; width: auto; transition: transform .2s; }
.sidebar-group[open] > summary { color: #fff; }
.sidebar-group[open] > summary .chev { transform: rotate(180deg); }
/* Filhos do grupo, com uma guia vertical sutil à esquerda. */
.sidebar-group-body {
    margin: 2px 0 2px .95rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-group-body a { padding: .5rem .7rem; font-size: .875rem; }

/* Rodapé: avatar + usuário + sair, sempre visível. */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: .7rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.sidebar-avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem;
}
.sidebar-user { flex: 1; min-width: 0; line-height: 1.15; }
.sidebar-user .nome {
    color: #e2e8f0; font-size: .86rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .papel { color: #64748b; font-size: .72rem; }
.sidebar-logout {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 9px;
    color: var(--gm-sidebar-text);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sidebar-logout:hover { background: rgba(239, 68, 68, .15); color: #f87171; }

/* ── Área de conteúdo ─────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    padding: 1.5rem 1.8rem;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gm-border);
}
.topbar h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.topbar h1 .bi { color: var(--gm-primary); }
.topbar .subtitle { color: var(--gm-text-soft); font-size: .9rem; margin-top: .15rem; }

/* ── Selo de versão (canto inferior direito da tela inicial) ───── */
/* Fica fixo na janela, fora do fluxo: a logo da home continua centralizada.
   Clicar abre /novidades (o changelog). O número vem de SYSTEM_VERSION, em
   erp/routes.py. */
.version-badge {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--gm-border);
    background: var(--gm-card);
    color: var(--gm-text-soft);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    transition: color .18s, border-color .18s, box-shadow .18s;
}
.version-badge:hover {
    color: var(--gm-primary);
    border-color: var(--gm-primary);
    box-shadow: 0 6px 16px -6px rgba(2,132,199,.45);
}

/* ── Cards ────────────────────────────────────────────────────── */
.card-erp {
    background: var(--gm-card);
    border: 1px solid var(--gm-border);
    border-radius: 14px;
    padding: 1.3rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-card .icon {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gm-primary-soft);
    color: var(--gm-primary);
    font-size: 1.5rem;
}
.stat-card .value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-card .label { color: var(--gm-text-soft); font-size: .85rem; }
.stat-card-body { min-width: 0; }

/* Card clicável do hub (Cadastros/Loja/Administração): eleva no hover, o ícone
   acende com o gradiente da marca e a seta desliza. */
.hub-card {
    position: relative;
    height: 100%;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hub-card:hover {
    transform: translateY(-3px);
    border-color: var(--gm-primary);
    box-shadow: 0 14px 26px -12px rgba(2,132,199,.4);
}
.hub-card .icon { transition: background .18s, color .18s; }
.hub-card:hover .icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
}
.hub-card .hub-arrow {
    margin-left: auto;
    color: var(--gm-border);
    font-size: 1rem;
    transition: color .18s, transform .18s;
}
.hub-card:hover .hub-arrow { color: var(--gm-primary); transform: translateX(3px); }

/* ── Botões ───────────────────────────────────────────────────── */
.btn-primary {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--gm-primary-dark);
    border-color: var(--gm-primary-dark);
}
.btn-outline-primary { color: var(--gm-primary); border-color: var(--gm-primary); }
.btn-outline-primary:hover { background: var(--gm-primary); border-color: var(--gm-primary); }

/* ── Tabelas ──────────────────────────────────────────────────── */
.table-erp {
    background: var(--gm-card);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--gm-border);
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.table-erp thead th {
    background: #f8fafc;
    color: var(--gm-text-soft);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--gm-border);
    padding: .85rem 1rem;
}
/* Linhas com separador sutil, hover suave e a última sem borda. */
.table-erp tbody td {
    padding: .8rem 1rem;
    border-top: none;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.table-erp tbody tr { transition: background .12s; }
.table-erp tbody tr:hover { background: #f8fafc; }
.table-erp tbody tr:last-child td { border-bottom: none; }
/* Botões de ação: quadradinhos arredondados e alinhados. */
.table-erp td .btn-sm {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .5rem;
    border-radius: 8px;
}
/* Badges de situação em tom suave (pílula). */
.table-erp .badge { font-weight: 600; padding: .42em .7em; border-radius: 7px; }
.table-erp .badge.bg-success { background: #dcfce7 !important; color: #15803d; }
.table-erp .badge.bg-secondary { background: #eef2f6 !important; color: #64748b; }

/* Paginação com pílulas espaçadas. Quebra de linha (flex-wrap) e sem encolher
   os botões: com muitas páginas eles vão para a linha de baixo em vez de serem
   espremidos/cortados. */
.pagination {
    flex-wrap: wrap;
    row-gap: .35rem;
}
.pagination .page-link {
    color: var(--gm-primary);
    border-color: var(--gm-border);
    border-radius: 8px;
    margin: 0 2px;               /* espaçamento uniforme entre as pílulas */
    flex: 0 0 auto;              /* nunca encolher: mantém o tamanho do botão */
    min-width: 2.25rem;
    text-align: center;
}
/* Anula o "margin-left:-1px" do Bootstrap que colava as bordas das pílulas. */
.pagination .page-item:not(:first-child) .page-link { margin-left: 2px; }
.pagination .page-item.active .page-link {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--gm-text-soft); }

/* ── Campos de formulário / busca (foco na cor da marca) ──────── */
.input-group-text { background: #f8fafc; border-color: var(--gm-border); color: var(--gm-text-soft); }
.form-control, .form-select { border-color: var(--gm-border); }
.form-control:focus, .form-select:focus {
    border-color: var(--gm-primary);
    box-shadow: 0 0 0 3px rgba(2,132,199,.12);
}

/* ── Login ────────────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 100%);
    padding: 1rem;
}
.login-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(2,8,23,.35);
}
.login-card .brand {
    text-align: center;
    margin-bottom: 1.5rem;
}
.login-card .brand .bi { font-size: 2.4rem; color: var(--gm-primary); }
.login-card .brand h1 { font-size: 1.4rem; font-weight: 700; margin: .4rem 0 0; }
.login-card .brand p { color: var(--gm-text-soft); font-size: .88rem; margin: 0; }

/* ── Flash ────────────────────────────────────────────────────── */
.flash-overlay {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);   /* centraliza na horizontal; mesmo topo e tamanho */
    z-index: 1080;
    width: 360px;
    max-width: calc(100% - 2rem);  /* não estoura em telas estreitas */
}

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
    }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; padding: 1rem; }
}

/* ── Impressão / Exportar PDF ──────────────────────────────────────
   Nos relatórios, o botão "Exportar PDF" chama window.print(). A sidebar,
   os avisos e o botão já têm .d-print-none (somem). Aqui só ajustamos o
   conteúdo para ocupar a página inteira, sem a margem reservada à sidebar. */
@media print {
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    /* evita cortar cards/linhas no meio entre páginas */
    .card, table tr { break-inside: avoid; }
}