/* ---------------------------------------------------------------------------
   Custom styles layered on top of self-hosted Bootstrap 5.3 + AdminLTE v4.
   Bootstrap owns theming via data-bs-theme (dark by default, see current_theme()).
   Keep this file minimal — prefer Bootstrap utilities over new rules.
   Kept external (no inline styles) to satisfy the strict CSP.
   --------------------------------------------------------------------------- */

/* Auth (login / TOTP) — centered card */
.auth-card-bs { max-width: 25rem; margin-inline: auto; }
.auth-logo { font-size: 2.5rem; line-height: 1; }
.auth-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1030; }

/* TOTP 6-digit entry */
.code-input { letter-spacing: .5em; font-variant-numeric: tabular-nums; }

/* AdminLTE small-box footer is used as a plain caption, not a link */
.small-box .small-box-footer { cursor: default; }

/* Label column width for the user-detail table */
.w-35 { width: 35%; }

/* Chart container — gives Chart.js (responsive, no fixed aspect) a height */
.chart-box { position: relative; height: 300px; }

/* ---- Mobile / tablet polish (Bootstrap + AdminLTE are already responsive) ---- */
@media (max-width: 575.98px) {
    /* Shorter charts so they don't dominate a phone screen */
    .chart-box { height: 230px; }
    /* Keep big KPI numbers from overflowing the narrow (col-6) small boxes */
    .small-box .inner h3 { font-size: 1.55rem; }
    .small-box .small-box-footer { font-size: 0.72rem; }
    /* Tighter content gutters on phones */
    .app-content > .container-fluid,
    .app-content-header > .container-fluid { padding-inline: 0.75rem; }
}
/* Any wide table stays usable via horizontal scroll on small screens */
@media (max-width: 767.98px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ===========================================================================
   "Black Dashboard" palette (creativetimofficial/black-dashboard-react).
   Adopted as a colour scheme over Bootstrap 5.3 / AdminLTE v4 — applied only in
   dark mode (the default). Light mode keeps stock Bootstrap.
   =========================================================================== */
[data-bs-theme="dark"] {
    --bs-body-bg: #1e1e2f;
    --bs-body-bg-rgb: 30, 30, 47;
    --bs-body-color: rgba(255, 255, 255, 0.8);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(255, 255, 255, 0.55);
    --bs-secondary-bg: #27293d;          /* sidebar + secondary surfaces */
    --bs-secondary-bg-rgb: 39, 41, 61;
    --bs-tertiary-bg: #1e1e2f;           /* page background (bg-body-tertiary) */
    --bs-tertiary-bg-rgb: 30, 30, 47;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    --bs-primary: #e14eca;  --bs-primary-rgb: 225, 78, 202;   /* magenta */
    --bs-info: #1d8cf8;     --bs-info-rgb: 29, 140, 248;      /* blue */
    --bs-success: #00f2c3;  --bs-success-rgb: 0, 242, 195;    /* teal */
    --bs-warning: #ff8d72;  --bs-warning-rgb: 255, 141, 114;  /* orange */
    --bs-danger: #fd5d93;   --bs-danger-rgb: 253, 93, 147;    /* pink-red */
    --bs-secondary: #344675; --bs-secondary-rgb: 52, 70, 117;

    --bs-link-color: #1d8cf8;  --bs-link-color-rgb: 29, 140, 248;
    --bs-link-hover-color: #4da3ff;

    --bs-card-bg: #27293d;
    --bs-card-cap-bg: #27293d;
    --bs-card-border-color: rgba(255, 255, 255, 0.05);
    --bs-table-color: rgba(255, 255, 255, 0.8);
    --bs-emphasis-color-rgb: 255, 255, 255;
}

/* Subtle vertical gradient on the page + softer card shadows = Black Dashboard feel */
[data-bs-theme="dark"] body { background-image: linear-gradient(#1e1e24, #1e1e2f 30%); }
[data-bs-theme="dark"] .card {
    border: 0;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .app-header { background-color: #1e1e2f !important; border-bottom: 1px solid rgba(255,255,255,.06); }
[data-bs-theme="dark"] .app-sidebar { background-color: #27293d !important; }
[data-bs-theme="dark"] .small-box { box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3); }
[data-bs-theme="dark"] .sidebar-menu .nav-link.active {
    background-color: rgba(29, 140, 248, 0.15);
    color: #fff;
}
/* Light badges need dark text to stay readable on the dark theme */
[data-bs-theme="dark"] .badge.text-bg-light { color: #1e1e2f !important; }