:root {
    --totel-primary: #3156d4;
    --totel-dark: #172033;
}
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.navbar-brand { font-weight: 800; letter-spacing: .2px; }
.totel-kpi-card { border: 0; border-radius: 1rem; box-shadow: 0 .15rem 1.75rem rgba(33, 40, 50, .08); }
.totel-kpi-label { color: #69707a; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.totel-kpi-value { font-size: 1.45rem; font-weight: 800; color: #263241; }
.badge-soft-success { color:#00864e;background-color:#d6f0e2; }
.badge-soft-warning { color:#946200;background-color:#fff0c2; }
.badge-soft-danger { color:#a91e2c;background-color:#f8d7da; }
.badge-soft-info { color:#0061a8;background-color:#d7ecfb; }
.badge-soft-primary { color:#3156d4;background-color:#e3e8ff; }
.table > :not(caption) > * > * { vertical-align: middle; }
.login-bg { background: linear-gradient(135deg, #eef3ff 0%, #f9fbff 45%, #fff7ea 100%); }

/* Phase 10 — UI/UX Polish + Mobile Responsive + Permission Cleanup */
:root {
    --totel-primary: #3156d4;
    --totel-primary-soft: #eef3ff;
    --totel-success: #00864e;
    --totel-warning: #946200;
    --totel-danger: #a91e2c;
    --totel-surface: #ffffff;
    --totel-border: rgba(33, 40, 50, .10);
    --totel-shadow: 0 .35rem 1.5rem rgba(33, 40, 50, .08);
}
body { background: #f5f7fb; }
.brand-mark {
    width: 2rem; height: 2rem; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #3156d4 0%, #6b7cff 100%);
    color: #fff; font-weight: 900; box-shadow: 0 .35rem 1rem rgba(49,86,212,.22);
}
.brand-text { font-weight: 850; letter-spacing: -.02em; }
.card { border: 1px solid var(--totel-border); border-radius: 1rem; }
.card-header { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; font-weight: 750; }
.totel-kpi-card { transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; }
.totel-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--totel-shadow); }
.totel-kpi-card::after {
    content: ""; position: absolute; right: -2rem; top: -2rem; width: 5.5rem; height: 5.5rem;
    background: rgba(49,86,212,.07); border-radius: 999px;
}
.filter-card { border: 0; box-shadow: 0 .25rem 1.25rem rgba(33,40,50,.06); }
.quick-action-card .list-group-item { padding: .95rem 1.25rem; }
.quick-action-card .list-group-item:hover { background: var(--totel-primary-soft); }
.sidenav-light .sidenav-menu .nav-link.active { font-weight: 800; color: var(--totel-primary); background: var(--totel-primary-soft); }
.sidenav-light .sidenav-menu .nav-link { border-radius: .75rem; margin: 0 .75rem .1rem .75rem; padding-left: .85rem; }
.sidenav-menu-heading { font-size: .68rem !important; letter-spacing: .08em; }
.table-responsive { border-radius: .85rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #69707a; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }
.table-permission-matrix th, .table-permission-matrix td { white-space: nowrap; }
.alert { border: 0; border-radius: 1rem; box-shadow: 0 .15rem 1rem rgba(33,40,50,.06); }
.btn { border-radius: .75rem; font-weight: 650; }
.form-control, .form-select { border-radius: .75rem; }
.badge { font-weight: 700; }
.fw-800 { font-weight: 800; }
.page-header .page-header-title { letter-spacing: -.03em; }
@media (max-width: 991.98px) {
    .page-header { padding-bottom: 7rem !important; }
    .page-header .page-header-content { padding-top: 1rem !important; }
    .page-header-title { font-size: 1.35rem; }
    .page-header-subtitle { font-size: .88rem; }
    .container-xl { padding-left: 1rem !important; padding-right: 1rem !important; }
    .card-body { padding: 1rem; }
    .totel-kpi-value { font-size: 1.15rem; }
    .topnav .navbar-brand .brand-text { display: none; }
    .table-responsive table { min-width: 720px; }
}
@media (max-width: 575.98px) {
    .btn { width: 100%; margin-bottom: .35rem; }
    .card-header.d-flex { align-items: flex-start !important; gap: .75rem; flex-direction: column; }
    .filter-card .card-body { align-items: stretch !important; }
    .filter-card select, .filter-card input, .filter-card button, .filter-card a { width: 100%; }
    .dropdown-menu { max-width: calc(100vw - 2rem); }
}
@media print {
    .topnav, #layoutSidenav_nav, .footer-admin, .btn, .filter-card { display: none !important; }
    #layoutSidenav_content { margin-left: 0 !important; }
    .container-xl { max-width: 100% !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}