/* ============================================================
   Portal CTE HUMINT - Identidade Visual v2
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --blue-primary: #3b9ede; --blue-dark: #2176ae; --blue-light: #5db3e8;
    --black: #0a0a0a; --dark: #111827; --dark-2: #1f2937; --dark-3: #374151;
    --gray: #6b7280; --gray-light: #9ca3af; --gray-lighter: #d1d5db;
    --white: #ffffff; --success: #10b981; --warning: #f59e0b;
    --danger: #ef4444; --info: #3b9ede;
    --sidebar-w: 240px; --sidebar-collapsed-w: 60px;
    --topbar-h: 60px; --radius: 10px; --shadow: 0 4px 20px rgba(0,0,0,0.4);
}
body { font-family: 'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--dark); color:var(--white); font-size:14px; line-height:1.5; }

/* ====== LOADING OVERLAY ====== */
#loadingOverlay {
    position:fixed; inset:0; background:rgba(10,10,10,0.82);
    z-index:9998; display:none; align-items:center; justify-content:center;
    flex-direction:column; gap:18px; backdrop-filter:blur(3px);
}
#loadingOverlay .lo-spinner { width:48px; height:48px; border:4px solid rgba(59,158,222,0.25); border-top-color:var(--blue-primary); border-radius:50%; animation:spin 0.7s linear infinite; }
#loadingMessage { color:var(--gray-light); font-size:14px; letter-spacing:.3px; }

/* ====== LAYOUT ====== */
.app-wrapper { display:flex; min-height:100vh; }

/* ====== SIDEBAR ====== */
.sidebar {
    width:var(--sidebar-w); background:var(--black);
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0;
    z-index:100; border-right:1px solid rgba(59,158,222,0.15);
    transition:width 0.25s ease; overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-collapsed-w); overflow:visible; }

.sidebar-logo {
    padding:20px 16px; border-bottom:1px solid rgba(59,158,222,0.15);
    display:flex; align-items:center; justify-content:center;
    min-height:72px; overflow:hidden;
}
.sidebar-logo img { max-width:140px; height:auto; filter:drop-shadow(0 0 8px rgba(59,158,222,0.3)); transition:opacity 0.2s; }
.sidebar.collapsed .sidebar-logo img { opacity:0; width:0; }
.sidebar-logo-icon { display:none; color:var(--blue-primary); font-size:22px; }
.sidebar.collapsed .sidebar-logo-icon { display:block; }

/* Botão colapso */
.sidebar-collapse-btn {
    position:absolute; top:20px; right:-12px;
    width:24px; height:24px; background:var(--dark-2);
    border:1px solid rgba(59,158,222,0.3); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--blue-primary); font-size:11px;
    transition:all 0.2s; z-index:10;
}
.sidebar-collapse-btn:hover { background:var(--blue-primary); color:#fff; }

.sidebar-nav { padding:16px 0; flex:1; overflow-y:auto; overflow-x:hidden; }

.nav-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 20px; color:var(--gray-light);
    text-decoration:none; font-size:13px; font-weight:500;
    transition:all 0.2s; cursor:pointer;
    border-left:3px solid transparent; white-space:nowrap;
    position:relative;
}
.nav-item:hover { background:rgba(59,158,222,0.1); color:var(--blue-primary); border-left-color:rgba(59,158,222,0.3); }
.nav-item.active { background:rgba(59,158,222,0.15); color:var(--blue-primary); border-left-color:var(--blue-primary); }
.nav-item i { width:18px; text-align:center; font-size:15px; flex-shrink:0; }
.nav-item span { transition:opacity 0.2s; }
.sidebar.collapsed .nav-item span { opacity:0; pointer-events:none; width:0; overflow:hidden; }
.sidebar.collapsed .nav-item { justify-content:center; padding:12px; border-left:none; border-radius:0; overflow:visible; }
.sidebar.collapsed .nav-item.active { border-left:none; background:rgba(59,158,222,0.15); }

/* Tooltip no modo colapsado */
.sidebar.collapsed .nav-item::after {
    content:attr(data-title);
    position:fixed; left:calc(var(--sidebar-collapsed-w) + 8px);
    transform:translateY(-50%);
    background:var(--dark-2); color:var(--white);
    padding:6px 14px; border-radius:6px; font-size:12px; white-space:nowrap;
    border:1px solid rgba(59,158,222,0.3);
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    opacity:0; pointer-events:none; transition:opacity 0.15s ease;
    z-index:9999;
}
.sidebar.collapsed .nav-item:hover::after { opacity:1; }

.nav-logout { color:var(--danger) !important; }
.nav-logout:hover { background:rgba(239,68,68,0.1) !important; border-left-color:var(--danger) !important; }
.nav-divider { height:1px; background:rgba(255,255,255,0.07); margin:8px 16px; }
.sidebar.collapsed .nav-divider { margin:8px 6px; }
.nav-user-info { font-size:11px; opacity:.6; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ====== MAIN ====== */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; transition:margin-left 0.25s ease; }
.main-content.expanded { margin-left:var(--sidebar-collapsed-w); }

.topbar {
    height:var(--topbar-h); background:var(--black);
    border-bottom:1px solid rgba(59,158,222,0.15);
    display:flex; align-items:center;
    padding:0 24px; gap:16px;
    position:sticky; top:0; z-index:50;
}
.sidebar-toggle { background:none; border:none; color:var(--gray-light); font-size:18px; cursor:pointer; padding:8px; border-radius:6px; transition:all 0.2s; }
.sidebar-toggle:hover { color:var(--blue-primary); background:rgba(59,158,222,0.1); }
.topbar-title { font-size:16px; font-weight:600; color:var(--white); flex:1; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-user { font-size:13px; color:var(--gray-light); }
.topbar-user i { color:var(--blue-primary); margin-right:4px; }
.badge-perfil { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:1px; }
.badge-admin   { background:rgba(59,158,222,0.2); color:var(--blue-primary); border:1px solid rgba(59,158,222,0.4); }
.badge-suporte { background:rgba(245,158,11,0.15); color:var(--warning); border:1px solid rgba(245,158,11,0.3); }
.badge-balanca { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.content-area { padding:28px; flex:1; }

/* ====== CARDS ====== */
.card { background:var(--dark-2); border:1px solid rgba(59,158,222,0.1); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { font-size:15px; font-weight:600; color:var(--white); display:flex; align-items:center; gap:8px; }
.card-title i { color:var(--blue-primary); }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--dark-2); border:1px solid rgba(59,158,222,0.1); border-radius:var(--radius); padding:20px; text-align:center; }
.stat-card .stat-num { font-size:32px; font-weight:700; color:var(--blue-primary); }
.stat-card .stat-label { font-size:12px; color:var(--gray-light); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card.danger .stat-num  { color:var(--danger); }
.stat-card.success .stat-num { color:var(--success); }
.stat-card.warning .stat-num { color:var(--warning); }

/* ====== FORMS ====== */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--gray-light); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-control { width:100%; padding:10px 14px; background:var(--dark-3); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:var(--white); font-size:14px; transition:border-color 0.2s,box-shadow 0.2s; outline:none; }
.form-control:focus { border-color:var(--blue-primary); box-shadow:0 0 0 3px rgba(59,158,222,0.15); }
.form-control::placeholder { color:var(--gray); }
select.form-control option { background:var(--dark-2); }
.form-grid   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.form-grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.form-full   { grid-column:1 / -1; }

/* ====== BUTTONS ====== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--blue-primary); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,158,222,0.4); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; }
.btn-warning { background:var(--warning); color:#000; }
.btn-warning:hover { background:#d97706; }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-danger:hover  { background:#dc2626; }
.btn-ghost { background:rgba(255,255,255,0.07); color:var(--gray-light); border:1px solid rgba(255,255,255,0.1); }
.btn-ghost:hover { background:rgba(255,255,255,0.12); color:var(--white); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 8px; font-size:11px; border-radius:5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ====== TABLE ====== */
.table-wrap { overflow-x:auto; border-radius:8px; }
table { width:100%; border-collapse:collapse; }
thead tr { background:rgba(59,158,222,0.08); }
th { padding:12px 14px; font-size:11px; font-weight:700; color:var(--blue-primary); text-transform:uppercase; letter-spacing:.8px; text-align:left; border-bottom:1px solid rgba(59,158,222,0.15); white-space:nowrap; }
td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--gray-light); font-size:13px; vertical-align:middle; }
tr:hover td { background:rgba(255,255,255,0.02); }
tr:last-child td { border-bottom:none; }

/* ====== STATUS BADGES ====== */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; cursor:default; }
.status-badge.clickable { cursor:pointer; }
.status-badge.clickable:hover { filter:brightness(1.2); }
.status-danfe_recebida { background:rgba(59,158,222,0.15); color:var(--blue-primary); border:1px solid rgba(59,158,222,0.3); }
.status-cte_emitido    { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.status-cte_pendente   { background:rgba(239,68,68,0.15); color:var(--danger); border:1px solid rgba(239,68,68,0.3); }

/* ====== LOGIN ====== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--dark); }
.login-box { width:420px; background:var(--dark-2); border:1px solid rgba(59,158,222,0.2); border-radius:16px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo img { max-width:200px; }
.login-title { font-size:20px; font-weight:700; text-align:center; margin-bottom:8px; }
.login-subtitle { font-size:13px; color:var(--gray); text-align:center; margin-bottom:28px; }
.login-footer { text-align:center; margin-top:20px; }
.login-footer a { color:var(--blue-primary); font-size:12px; text-decoration:none; }
.login-footer a:hover { text-decoration:underline; }

/* ====== ALERTS ====== */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px; display:flex; align-items:center; gap:10px; }
.alert-danger  { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; }
.alert-success { background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3); color:#6ee7b7; }
.alert-warning { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); color:#fcd34d; }
.alert-info    { background:rgba(59,158,222,0.12); border:1px solid rgba(59,158,222,0.3); color:#93c5fd; }

/* ====== MODAL ====== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.75);
    z-index:999; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:all 0.3s;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
    background:var(--dark-2); border:1px solid rgba(59,158,222,0.2);
    border-radius:16px; padding:32px;
    width:90%; max-width:560px; max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow); transform:scale(0.95); transition:transform 0.3s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-title { font-size:18px; font-weight:700; color:var(--white); display:flex; align-items:center; gap:10px; }
.modal-title i { color:var(--blue-primary); }
.modal-close { background:none; border:none; color:var(--gray); font-size:20px; cursor:pointer; padding:4px; transition:color 0.2s; }
.modal-close:hover { color:var(--white); }
.modal-footer { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.modal-section { font-size:11px; font-weight:700; color:var(--blue-primary); text-transform:uppercase; letter-spacing:.8px; margin:20px 0 12px; padding-bottom:6px; border-bottom:1px solid rgba(59,158,222,0.15); }

/* Balança modal — usa .modal padrão mas com display:flex */
.modal[style*="display:flex"], .modal[style*="display: flex"] { display:flex !important; flex-direction:column; }

/* ====== FILTER BAR ====== */
.filter-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.filter-bar .form-control { width:auto; }

/* ====== CTE PRINT ====== */
@media print {
    .sidebar,.topbar,.no-print { display:none !important; }
    .main-content { margin-left:0; }
    .content-area { padding:0; }
    body { background:#fff; color:#000; }
    .cte-print { display:block !important; }
}
.cte-print { display:none; }

/* ====== TOAST ====== */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--dark-2); border:1px solid rgba(59,158,222,0.3); border-radius:10px; padding:14px 20px; min-width:280px; font-size:13px; color:var(--white); box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; animation:slideIn 0.3s ease; }
.toast.success { border-color:rgba(16,185,129,0.4); }
.toast.error   { border-color:rgba(239,68,68,0.4); }
.toast i { font-size:16px; }
.toast.success i { color:var(--success); }
.toast.error   i { color:var(--danger); }
.toast.info    i { color:var(--blue-primary); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ====== SPINNER ====== */
.spinner { width:20px; height:20px; border:2px solid rgba(59,158,222,0.3); border-top-color:var(--blue-primary); border-radius:50%; animation:spin 0.6s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ====== EMPTY STATE ====== */
.empty-state { text-align:center; padding:48px 24px; color:var(--gray); }
.empty-state i { font-size:48px; color:rgba(59,158,222,0.2); margin-bottom:16px; }
.empty-state p { font-size:14px; }

/* ====== RESPONSIVE ====== */

/* Overlay escuro quando sidebar abre no mobile */
.sidebar-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    z-index:99;
    backdrop-filter:blur(2px);
}
.sidebar-overlay.open { display:block; }

@media (max-width:768px) {
    /* Sidebar: desliza de fora */
    .sidebar {
        transform:translateX(-100%);
        width:var(--sidebar-w) !important;
        transition:transform 0.28s ease;
        box-shadow:none;
    }
    .sidebar.open {
        transform:translateX(0);
        box-shadow:4px 0 32px rgba(0,0,0,0.6);
    }
    .sidebar.collapsed {
        width:var(--sidebar-w) !important;
        overflow:hidden;
    }
    .sidebar-collapse-btn { display:none; }
    .sidebar.collapsed .nav-item span { opacity:1; width:auto; pointer-events:auto; }
    .sidebar.collapsed .nav-item { justify-content:flex-start; padding:12px 20px; }

    /* Main: sem margem lateral */
    .main-content,
    .main-content.expanded { margin-left:0; }

    /* Topbar mais compacta */
    .topbar { padding:0 12px; gap:8px; height:52px; }
    .topbar-title { font-size:14px; }
    .topbar-user  { display:none; }   /* esconde nome no mobile — espaço limitado */
    .badge-perfil { display:none; }

    /* Content area */
    .content-area { padding:12px; }

    /* Cards */
    .card { padding:16px; }
    .card-header { flex-wrap:wrap; gap:8px; }
    .card-header .d-flex { flex-wrap:wrap; gap:6px; }

    /* Grids de formulário → coluna única */
    .form-grid,
    .form-grid-3,
    .form-grid-4,
    .form-grid-5 { grid-template-columns:1fr; gap:12px; }

    /* Stats → 2 colunas */
    .stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card { padding:14px 10px; }
    .stat-card .stat-num { font-size:24px; }

    /* Tabelas: scroll horizontal */
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table { min-width:560px; }
    th, td { padding:10px 10px; font-size:12px; }

    /* Botões menores */
    .btn { padding:8px 14px; font-size:12px; }
    .btn-sm { padding:5px 10px; font-size:11px; }

    /* Filter bar: scroll horizontal */
    .filter-bar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .filter-bar .form-control { min-width:120px; }

    /* Modal: ocupa quase toda a tela */
    .modal {
        width:96%;
        padding:20px;
        max-height:88vh;
        border-radius:12px;
    }
    .modal-title { font-size:15px; }

    /* Login */
    .login-box { width:94%; padding:28px 20px; }

    /* Toast: full width */
    #toast-container { left:12px; right:12px; bottom:16px; }
    .toast { min-width:0; width:100%; }
}

/* Telas muito pequenas (< 400px) */
@media (max-width:400px) {
    .stat-grid { grid-template-columns:1fr; }
    .topbar-title { font-size:13px; }
    .content-area { padding:8px; }
    .card { padding:12px; }
}

/* ====== MISC ====== */
a { color:var(--blue-primary); text-decoration:none; }
a:hover { color:var(--blue-light); }
.text-muted { color:var(--gray); }
.text-center { text-align:center; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.mb-0  { margin-bottom:0; }
.mt-16 { margin-top:16px; }
.w-100 { width:100%; }
.font-mono { font-family:monospace; font-size:12px; }

/* Upload Area */
.upload-area { border:2px dashed rgba(59,158,222,0.3); border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:all 0.2s; background:rgba(59,158,222,0.03); }
.upload-area:hover { border-color:var(--blue-primary); background:rgba(59,158,222,0.07); }
.upload-area i { font-size:28px; color:var(--blue-primary); margin-bottom:8px; }
.upload-area p { font-size:12px; color:var(--gray); }