/* ============================================================
   BTS Portal — Modern UI Layer  (v2.0.0 · fev/2026)
   Melhorias visuais globais sem quebrar o sistema existente.
   Carregado DEPOIS de main-bundle.css e layout-bts.css.
   ============================================================ */

/* ── 0. Tokens extras ─────────────────────────────────────── */
:root {
    --bts-teal-50:  #f0fdfd;
    --bts-teal-100: #ccfbf1;
    --bts-teal-200: #99f6e4;
    --bts-teal-500: #0EA5A8;
    --bts-teal-600: #0c8f92;
    --bts-teal-700: #0F766E;
    --bts-blue-500: #3B82F6;
    --bts-blue-600: #2563EB;
    --bts-slate-50:  #f8fafc;
    --bts-slate-100: #f1f5f9;
    --bts-slate-200: #e2e8f0;
    --bts-slate-700: #334155;
    --bts-slate-900: #0f172a;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-xs: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: 0 4px 6px rgba(15,23,42,.05), 0 2px 4px rgba(15,23,42,.04);
    --shadow-md: 0 10px 24px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.04);
    --shadow-lg: 0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);
    --shadow-teal: 0 4px 14px rgba(14,165,168,.28);
    --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
    --transition-base: 0.25s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── 1. Tipografia global ─────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }
p, li, td, th { line-height: 1.65; }

/* ── 2. Top Navbar — efeito glassmorphism + título de página ─ */
.top-navbar {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bts-teal-500) 90%, #000 10%) 0%,
        color-mix(in srgb, var(--bts-teal-700) 95%, #000 5%) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.05), var(--shadow-sm);
}

/* Botão hamburger mais polido */
.toggle-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    transition: background var(--transition-fast), transform var(--transition-fast);
    font-size: 0.9rem !important;
    padding: 0 !important;
}
.toggle-btn:hover {
    background: rgba(255,255,255,.20) !important;
    transform: scale(1.05);
}
.toggle-btn:active { transform: scale(0.97); }

/* Título de página na navbar (injetado via JS) */
.navbar-page-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    letter-spacing: -0.01em;
    margin-left: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    display: none; /* shown via JS after DOMContentLoaded */
}
@media (min-width: 768px) { .navbar-page-title { display: block; } }

/* Barra de ações no canto direito da navbar */
.navbar-right-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-right-actions .nav-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}
.navbar-right-actions .nav-action-btn:hover {
    background: rgba(255,255,255,.20);
    color: #fff;
}

/* ── 3. Cards — design limpo e elevado ────────────────────── */
.main-content .card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--bts-slate-200) !important;
    box-shadow: var(--shadow-md) !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    overflow: visible !important; /* evita corte de shadows/dropdowns */
}
.main-content .card:hover { box-shadow: var(--shadow-lg) !important; }

/* Card Header com gradiente teal profundo */
.main-content .card-header {
    background: linear-gradient(135deg, #0a1628 0%, #0f2440 50%, #0c1e36 100%) !important;
    border-bottom: 1px solid rgba(14,165,168,.18) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 0.9rem 1.25rem !important;
}

/* Linha brilhante sutil no topo do card-header */
.main-content .card-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(14,165,168,.5) 30%,
        rgba(14,165,168,.8) 50%,
        rgba(14,165,168,.5) 70%,
        transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Necessário para o ::before funcionar */
.main-content .card-header { position: relative; }

/* Card body */
.main-content .card-body { padding: 1.25rem !important; }

/* Card sem header (floating stat cards) */
.stat-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--bts-slate-200) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--surface-1);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    overflow: hidden;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg) !important;
}

/* ── 4. Botões — gradiente teal + efeitos ─────────────────── */

/* Botão primário real (teal gradient) */
.btn-primary,
.main-content .btn-primary {
    background: linear-gradient(135deg, var(--bts-teal-500) 0%, var(--bts-teal-700) 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--shadow-teal);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary:hover,
.main-content .btn-primary:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14,165,168,.40) !important;
    background: linear-gradient(135deg, var(--bts-teal-500) 0%, var(--bts-teal-700) 100%) !important;
    color: #fff !important;
}
.btn-primary:active,
.main-content .btn-primary:active { transform: translateY(0); filter: brightness(0.95) !important; }

/* Botão secundário */
.btn-secondary,
.main-content .btn-secondary {
    background: var(--bts-slate-700) !important;
    border-color: var(--bts-slate-700) !important;
    color: #fff !important;
    font-weight: 500;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.btn-secondary:hover,
.main-content .btn-secondary:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Botão outline-primary refinado */
.btn-outline-primary {
    color: var(--bts-teal-500) !important;
    border-color: var(--bts-teal-500) !important;
    font-weight: 500;
    transition: all var(--transition-fast);
}
.btn-outline-primary:hover {
    background: var(--bts-teal-500) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-teal);
}

/* Botão success */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.btn-success:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
}

/* Botão info */
.btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.btn-info:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Botão warning */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.btn-warning:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* btn-block moderno */
.btn-block { width: 100%; }

/* ── 5. Formulários — inputs polidos ──────────────────────── */
.form-control, .form-select {
    border: 1.5px solid var(--bts-slate-200);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    background: #fff;
    color: var(--bts-slate-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bts-teal-500) !important;
    box-shadow: 0 0 0 3px rgba(14,165,168,.15) !important;
    background: #fff !important;
    outline: none !important;
}
.form-control::placeholder { color: #94a3b8; }
.form-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--bts-slate-700);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Input group */
.input-group .form-control:not(:last-child) { border-right: none; }
.input-group .input-group-text {
    background: var(--bts-slate-100);
    border: 1.5px solid var(--bts-slate-200);
    color: var(--bts-slate-700);
    font-size: 0.85rem;
    padding: 0.55rem 0.85rem;
    transition: background var(--transition-fast);
}
.input-group:focus-within .input-group-text {
    background: var(--bts-teal-50);
    border-color: var(--bts-teal-500);
}

/* ── 6. Tabelas — visual limpo ────────────────────────────── */
.main-content .table {
    border-radius: var(--radius-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.main-content .table thead tr th {
    background: linear-gradient(135deg, var(--bts-slate-900) 0%, #152033 100%) !important;
    color: #e5e7eb !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.8rem 1rem !important;
    border: none !important;
    white-space: nowrap;
}
.main-content .table thead tr th:first-child { border-radius: var(--radius-md) 0 0 0; }
.main-content .table thead tr th:last-child  { border-radius: 0 var(--radius-md) 0 0; }

.main-content .table tbody tr td {
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
    border-top: 1px solid var(--bts-slate-100) !important;
    color: var(--bts-slate-700) !important;
    font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.main-content .table tbody tr:nth-of-type(odd) td { background: #fff; }
.main-content .table tbody tr:nth-of-type(even) td { background: var(--bts-slate-50); }
.main-content .table tbody tr:hover td {
    background: color-mix(in srgb, var(--bts-teal-500) 6%, #fff 94%) !important;
    color: var(--bts-slate-900) !important;
}
/* Última linha sem borda inferior */
.main-content .table tbody tr:last-child td { border-bottom: none !important; }

/* ── 7. Alertas — visual refinado ─────────────────────────── */
.main-content .alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    padding: 0.875rem 1.1rem !important;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.main-content .alert-success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}
.main-content .alert-danger {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border-color: #fca5a5 !important;
    color: #7f1d1d !important;
}
.main-content .alert-warning {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border-color: #fde68a !important;
    color: #78350f !important;
}
.main-content .alert-info {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border-color: #93c5fd !important;
    color: #1e3a8a !important;
}

/* ── 8. Badges — tamanhos e cores refinados ───────────────── */
.badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.3em 0.65em !important;
    border-radius: 6px !important;
    letter-spacing: 0.03em !important;
}
.badge.bg-success, .badge.bg-success-subtle {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}
.badge.bg-danger, .badge.bg-danger-subtle {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}
.badge.bg-warning, .badge.bg-warning-subtle {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
.badge.bg-info, .badge.bg-info-subtle {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
.badge.bg-primary {
    background: linear-gradient(135deg, var(--bts-teal-500), var(--bts-teal-700)) !important;
    color: #fff !important;
    border: none !important;
}
.badge.bg-secondary {
    background: var(--bts-slate-100) !important;
    color: var(--bts-slate-700) !important;
    border: 1px solid var(--bts-slate-200) !important;
}

/* ── 9. Paginação ─────────────────────────────────────────── */
.pagination .page-link {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--bts-slate-200) !important;
    color: var(--bts-slate-700);
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    margin: 0 2px;
    transition: all var(--transition-fast);
}
.pagination .page-link:hover {
    background: var(--bts-teal-50);
    border-color: var(--bts-teal-500) !important;
    color: var(--bts-teal-600);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--bts-teal-500), var(--bts-teal-700)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--shadow-teal);
}

/* ── 10. Breadcrumb ───────────────────────────────────────── */
.breadcrumb-modern {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    list-style: none;
    flex-wrap: wrap;
}
.breadcrumb-modern li {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--bts-slate-700);
}
.breadcrumb-modern li::before {
    content: '/';
    margin: 0 0.35rem;
    color: var(--bts-slate-200);
    font-size: 0.9em;
}
.breadcrumb-modern li:first-child::before { display: none; }
.breadcrumb-modern li a {
    color: var(--bts-teal-600);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}
.breadcrumb-modern li a:hover { color: var(--bts-teal-500); }
.breadcrumb-modern li.active { color: var(--bts-slate-900); font-weight: 600; }

/* ── 11. Page Header — título + subtítulo padrão ──────────── */
.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bts-slate-200);
}
.page-header .page-header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bts-slate-900);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.25rem;
}
.page-header .page-header-title .header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--bts-teal-500), var(--bts-teal-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-teal);
}
.page-header .page-header-subtitle {
    font-size: 0.85rem;
    color: var(--bts-slate-700);
    margin: 0;
}

/* ── 12. Sidebar — refinamentos ───────────────────────────── */
/* Ativo com gradiente teal */
.sidebar .nav-link.active {
    background: linear-gradient(135deg,
        rgba(14,165,168,.18) 0%,
        rgba(14,165,168,.12) 100%) !important;
    border-left: 3px solid var(--bts-teal-500) !important;
    color: #fff !important;
    font-weight: 600;
}
/* Hover nos itens */
.sidebar .nav-link:not(.active):hover {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.95) !important;
    border-left: 3px solid rgba(14,165,168,.4) !important;
    transform: translateX(2px);
    transition: all var(--transition-fast);
}
/* Ícones com cor de destaque nos itens ativos */
.sidebar .nav-link.active i { color: var(--bts-teal-500) !important; }
.sidebar .nav-link:not(.active) { border-left: 3px solid transparent; }

/* Scrollbar personalizada na sidebar */
.sidebar-menu::-webkit-scrollbar { width: 3px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(14,165,168,.3);
    border-radius: 3px;
}
.sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(14,165,168,.6); }

/* Item "Sair" no menu da sidebar */
.nav-link-logout {
    color: rgba(255,255,255,.55) !important;
    transition: color 0.18s, background 0.18s !important;
}
.nav-link-logout:hover {
    color: rgba(239,68,68,.9) !important;
    background: rgba(239,68,68,.1) !important;
}
.nav-link-logout i { color: inherit !important; }

/* ── User profile no footer da sidebar — versão minimalista ─── */

/* Footer: borda sutil, sem fundo pesado */
.sidebar-footer {
    padding: 0.6rem 0.85rem !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
}
/* O sidebar-divider já está dentro do footer — ocultar para não duplicar a linha */
.sidebar-footer .sidebar-divider { display: none !important; }

/* Row única, sem verticais extras */
.sidebar-footer .user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0 !important;
}

/* Avatar menor, sem sombra chamativa */
.user-avatar {
    flex-shrink: 0;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: rgba(14,165,168,.22) !important;
    border: 1px solid rgba(14,165,168,.35) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(14,165,168,.9) !important;
    box-shadow: none !important;
}
.user-avatar i { font-size: 0.9rem !important; }

/* Detalhes: nome e cargo na mesma coluna compacta */
.user-details {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.user-name {
    font-weight: 500 !important;
    font-size: 0.78rem !important;
    color: rgba(255,255,255,.82) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Role badge: oculto — muito poluído; mostrar apenas como texto mini */
.user-role .badge {
    display: none !important;
}
/* Substituto: role como texto inline após o nome (via pseudo-element não é possível no HTML atual) */
/* Em vez disso, deixamos o .user-role em texto puro */
.user-role {
    font-size: 0.68rem !important;
    color: rgba(255,255,255,.38) !important;
    margin-top: 1px;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}
/* Mostrar o texto do badge como se fosse texto normal */
.user-role .badge {
    display: inline !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,.38) !important;
    font-size: 0.68rem !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Botão logout: fantasma sutil, fica visível no hover */
.user-actions { flex-shrink: 0; }
.btn-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    color: rgba(255,255,255,.32) !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s !important;
    cursor: pointer;
}
.btn-logout i { font-size: 0.82rem !important; }
.btn-logout:hover {
    background: rgba(239,68,68,.15) !important;
    border-color: rgba(239,68,68,.35) !important;
    color: rgba(239,68,68,.9) !important;
}

/* ── 13. Modais — refinamentos ────────────────────────────── */
.modal-content {
    border-radius: var(--radius-xl) !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--bts-slate-900) 0%, #152033 100%);
    color: #fff;
    border-bottom: 1px solid rgba(14,165,168,.2);
    padding: 1rem 1.5rem;
}
.modal-header .modal-title { font-weight: 700; font-size: 1.05rem; }
.modal-header .btn-close { filter: invert(1) brightness(2); opacity: 0.8; }
.modal-header .btn-close:hover { opacity: 1; }
.modal-footer {
    border-top: 1px solid var(--bts-slate-200);
    padding: 0.875rem 1.5rem;
}

/* ── 14. Tabs — visual moderno ────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--bts-slate-200);
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bts-slate-700);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.65rem 1rem;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--bts-teal-600);
    border-bottom-color: rgba(14,165,168,.4) !important;
    background: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--bts-teal-600) !important;
    border-bottom-color: var(--bts-teal-500) !important;
    background: transparent !important;
    font-weight: 700;
}

/* ── 15. Dashboard — stat cards modernos ─────────────────── */
.modern-stat-card {
    position: relative;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--bts-slate-200) !important;
    box-shadow: var(--shadow-sm) !important;
    background: #fff;
    padding: 1.1rem 1.25rem;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.modern-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}
.modern-stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
/* Variações de cor da barra lateral */
.modern-stat-card.teal::after  { background: linear-gradient(180deg, var(--bts-teal-500), var(--bts-teal-700)); }
.modern-stat-card.blue::after  { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.modern-stat-card.green::after { background: linear-gradient(180deg, #10b981, #059669); }
.modern-stat-card.amber::after { background: linear-gradient(180deg, #f59e0b, #d97706); }
.modern-stat-card.rose::after  { background: linear-gradient(180deg, #f43f5e, #be123c); }

.modern-stat-card .stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.modern-stat-card.teal .stat-icon-wrap  { background: linear-gradient(135deg, rgba(14,165,168,.12), rgba(14,165,168,.08)); color: var(--bts-teal-600); }
.modern-stat-card.blue .stat-icon-wrap  { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.08)); color: #2563eb; }
.modern-stat-card.green .stat-icon-wrap { background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.08)); color: #059669; }
.modern-stat-card.amber .stat-icon-wrap { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.08)); color: #d97706; }
.modern-stat-card.rose .stat-icon-wrap  { background: linear-gradient(135deg, rgba(244,63,94,.12), rgba(244,63,94,.08)); color: #be123c; }

.modern-stat-card .stat-content { flex: 1; min-width: 0; }
.modern-stat-card .stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bts-slate-700);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modern-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bts-slate-900);
    line-height: 1;
    letter-spacing: -0.03em;
}
.modern-stat-card .stat-delta {
    font-size: 0.72rem;
    margin-top: 0.2rem;
    color: var(--bts-slate-700);
}

/* ── 16. Quick action buttons (dashboard) ─────────────────── */
.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all var(--transition-fast);
    text-decoration: none;
    border: 1.5px solid transparent;
}
.quick-action-btn .qa-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.quick-action-btn:hover {
    transform: translateX(3px);
    text-decoration: none;
}

/* Temas dos quick action buttons */
.quick-action-btn.qa-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.quick-action-btn.qa-success .qa-icon { background: #dcfce7; color: #059669; }
.quick-action-btn.qa-success:hover { background: #dcfce7; }

.quick-action-btn.qa-primary { background: var(--bts-teal-50); color: var(--bts-teal-700); border-color: var(--bts-teal-100); }
.quick-action-btn.qa-primary .qa-icon { background: var(--bts-teal-100); color: var(--bts-teal-600); }
.quick-action-btn.qa-primary:hover { background: var(--bts-teal-100); }

.quick-action-btn.qa-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.quick-action-btn.qa-info .qa-icon { background: #dbeafe; color: #2563eb; }
.quick-action-btn.qa-info:hover { background: #dbeafe; }

.quick-action-btn.qa-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.quick-action-btn.qa-warning .qa-icon { background: #fef3c7; color: #d97706; }
.quick-action-btn.qa-warning:hover { background: #fef3c7; }

.quick-action-btn.qa-secondary { background: var(--bts-slate-100); color: var(--bts-slate-700); border-color: var(--bts-slate-200); }
.quick-action-btn.qa-secondary .qa-icon { background: var(--bts-slate-200); color: var(--bts-slate-700); }
.quick-action-btn.qa-secondary:hover { background: var(--bts-slate-200); }

.quick-action-btn.qa-danger { background: #fff5f5; color: #7f1d1d; border-color: #fecaca; }
.quick-action-btn.qa-danger .qa-icon { background: #fee2e2; color: #dc2626; }
.quick-action-btn.qa-danger:hover { background: #fee2e2; }

.quick-action-btn.qa-dark { background: #f1f5f9; color: var(--bts-slate-900); border-color: var(--bts-slate-200); }
.quick-action-btn.qa-dark .qa-icon { background: var(--bts-slate-200); color: var(--bts-slate-700); }
.quick-action-btn.qa-dark:hover { background: var(--bts-slate-200); }

/* ── 17. Loader / Skeleton ────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--bts-slate-100) 25%,
        var(--bts-slate-200) 50%,
        var(--bts-slate-100) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ── 18. Scrollbar global ─────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--bts-slate-200) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bts-slate-200); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--bts-slate-700); }

/* ── 19. Footer ───────────────────────────────────────────── */
.app-footer, .bts-footer {
    background: linear-gradient(90deg, #0a1628 0%, #0f2440 100%) !important;
    border-top: 1px solid rgba(14,165,168,.15) !important;
    color: rgba(255,255,255,.6);
    font-size: 0.78rem;
    z-index: 1090 !important;
}
.app-footer a, .bts-footer a { color: var(--bts-teal-500); text-decoration: none; }
.app-footer a:hover, .bts-footer a:hover { color: var(--bts-teal-200); }

/* ── 20. Responsive tweaks ────────────────────────────────── */
@media (max-width: 768px) {
    .modern-stat-card .stat-value { font-size: 1.35rem; }
    .modern-stat-card .stat-icon-wrap { width: 40px; height: 40px; font-size: 1rem; }
    .main-content .card-header { padding: 0.75rem 1rem !important; }
}

/* ── 21. Utilitários ──────────────────────────────────────── */
.text-teal    { color: var(--bts-teal-500) !important; }
.bg-teal-soft { background: var(--bts-teal-50) !important; }
.border-teal  { border-color: var(--bts-teal-500) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.shadow-teal  { box-shadow: var(--shadow-teal) !important; }
.transition-all { transition: all var(--transition-base); }

/* Número grande de destaque */
.display-stat {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--bts-teal-600), var(--bts-blue-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Divider decorativo */
.divider-teal {
    height: 2px;
    background: linear-gradient(90deg, var(--bts-teal-500) 0%, transparent 100%);
    border: none;
    margin: 1.25rem 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--bts-slate-700);
}
.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bts-slate-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--bts-slate-700);
    margin: 0 auto 1rem;
}
.empty-state h5 { font-weight: 700; color: var(--bts-slate-900); margin-bottom: 0.5rem; }
.empty-state p  { font-size: 0.875rem; max-width: 320px; margin: 0 auto; }