/* ── Light (padrão) ─────────────────────────────────────────── */
body { background: #f4f6fb; transition: background .2s, color .2s; }

.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.kpi-card { text-align: center; padding: 1.5rem 1rem; }
.kpi-card .kpi-value { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { font-size: .8rem; color: #6c757d; margin-top: .3rem; text-transform: uppercase; letter-spacing: .05em; }

.ranking-pos { font-size: 1.4rem; font-weight: 700; width: 2.2rem; }
.trend-up   { color: #dc3545; }
.trend-down { color: #198754; }
.trend-flat { color: #6c757d; }

.semana-table thead th { background: #0d6efd; color: #fff; }
.semana-table tbody tr:hover { background: #f0f4ff; }

.pct-badge {
    display: inline-block; padding: .25em .6em;
    border-radius: 999px; font-weight: 600; font-size: .85rem;
}
.pct-ok     { background: #d1e7dd; color: #0a3622; }
.pct-warn   { background: #fff3cd; color: #664d03; }
.pct-danger { background: #f8d7da; color: #58151c; }

.login-box { max-width: 400px; margin: 8vh auto; }
.login-box .card-header { background: #0d6efd; color: #fff; font-size: 1.2rem; font-weight: 600; }
.login-logo { max-height: 80px; max-width: 80%; object-fit: contain; }
.navbar-logo { height: 32px; width: auto; object-fit: contain; }

.chart-container { position: relative; height: 300px; }

.supervisor-card { cursor: pointer; transition: transform .15s; }
.supervisor-card:hover { transform: translateY(-2px); }

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] {
    --bs-body-bg: #0f1117;
    --bs-body-color: #e0e0e0;
}

[data-bs-theme="dark"] body            { background: #0f1117 !important; color: #e0e0e0; }
[data-bs-theme="dark"] .card           { background: #1a1d27; border: 1px solid #2a2d3a; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .card-header.bg-white { background: #22263a !important; color: #e0e0e0 !important; }
[data-bs-theme="dark"] .table          { color: #d0d0d0; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table thead.table-light th { background: #22263a !important; color: #ccc !important; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: #252840 !important; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select    { background: #1e2130; color: #e0e0e0; border-color: #3a3f55; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background: #252840; color: #fff; border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); }
[data-bs-theme="dark"] .form-control[readonly] { background: #16192a; color: #aaa; }
[data-bs-theme="dark"] .bg-light       { background: #1e2130 !important; }
[data-bs-theme="dark"] .alert-light    { background: #1e2130; color: #bbb; border-color: #2a2d3a; }
[data-bs-theme="dark"] .border         { border-color: #2a2d3a !important; }
[data-bs-theme="dark"] .text-muted     { color: #888 !important; }
[data-bs-theme="dark"] .dropdown-menu  { background: #1a1d27; border-color: #2a2d3a; }
[data-bs-theme="dark"] .dropdown-item  { color: #d0d0d0; }
[data-bs-theme="dark"] .dropdown-item:hover { background: #252840; color: #fff; }
[data-bs-theme="dark"] .dropdown-divider { border-color: #2a2d3a; }
[data-bs-theme="dark"] .semana-table tbody tr:hover { background: #252840 !important; }
[data-bs-theme="dark"] .kpi-card .kpi-label { color: #888; }
[data-bs-theme="dark"] .modal-content  { background: #1a1d27; color: #e0e0e0; border-color: #2a2d3a; }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer   { border-color: #2a2d3a; }
[data-bs-theme="dark"] .breadcrumb     { background: transparent; }
[data-bs-theme="dark"] .breadcrumb-item a { color: #6ea8fe; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: #888; }
[data-bs-theme="dark"] .input-group-text { background: #1e2130; color: #aaa; border-color: #3a3f55; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .kpi-card .kpi-value { font-size: 1.8rem; }
  .chart-container { height: 220px; }
  .ranking-pos { font-size: 1.1rem; }
  .container-fluid { padding-left: .75rem; padding-right: .75rem; }
  .pct-badge { font-size: .78rem; padding: .2em .5em; }
}