/* ── Base ─────────────────────────────────────────────────────────────── */
body { font-size: 0.88rem; font-family: 'Inter', sans-serif; background: #f1f5f9; }
.page-heading { font-size: 1.1rem; font-weight: 600; }
.btn-action { font-size: 0.85rem; }
label { font-size: 0.82rem; }

/* ── Navbar ──────────────────────────────────────────────────────────── */
.nav-link-custom { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.82rem; font-weight: 500; padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.15s; }
.nav-link-custom:hover, .nav-link-custom.active { color: #fff; background: rgba(255,255,255,0.1); }
.nav-link-custom i { font-size: 0.9rem; }

.navbar-toggler-custom { background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 1.2rem; cursor: pointer; }
.navbar-toggler-custom:hover { color: #f8fafc; background: rgba(255,255,255,0.1); }
@media (max-width: 767.98px) {
    .nav-collapse { display: none; flex-direction: column; width: 100%; gap: 2px; padding-top: 0.5rem; }
    .nav-collapse.show { display: flex; }
}
@media (min-width: 768px) {
    .nav-collapse { display: flex !important; }
    .navbar-toggler-custom { display: none; }
}

/* ── KPI Cards ───────────────────────────────────────────────────────── */
.kpi-card { border-left: 3px solid; border-radius: 0.5rem; }
.kpi-card .kpi-value { font-size: 1.4rem; font-weight: 700; }
.kpi-card .kpi-label { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; }
.table-hover tbody tr:hover { background-color: rgba(0,0,0,0.02); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.015); }

/* Sortable column headers */
.sortable-th { user-select: none; white-space: nowrap; cursor: pointer; }
.sortable-th:hover { color: #1e293b !important; }
.sort-indicator { font-size: 0.7rem; margin-left: 3px; vertical-align: middle; color: #2563eb; }

/* ── Status Badges ───────────────────────────────────────────────────── */
.badge-active { background-color: #198754; }
.badge-draft { background-color: #6c757d; }
.badge-terminated { background-color: #dc3545; }
.badge-blocked { background-color: #fd7e14; }
.badge-lost { background-color: #dc3545; }
.status-online { color: #198754; }
.status-offline { color: #6c757d; }
.status-error { color: #dc3545; }
.status-charging { color: #0d6efd; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast-alert { position: fixed; top: 1rem; right: 1rem; z-index: 1080; min-width: 300px; animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── HTMX Loading ────────────────────────────────────────────────────── */
.htmx-request.htmx-request { opacity: 0.7; pointer-events: none; }

/* ── Contract Preview ────────────────────────────────────────────────── */
.contract-preview { background: #fff; padding: 2rem; max-height: 80vh; overflow-y: auto; font-size: 0.82rem; border: 1px solid #dee2e6; border-radius: 0.5rem; }
.section-title { font-weight: 600; margin-top: 1.5rem; }
.section-body { white-space: pre-wrap; margin-top: 0.5rem; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-heading { font-size: 1rem; }
    .kpi-card .kpi-value { font-size: 1.1rem; }
}