/* ============================================================================
   Light-mode design tokens.
   Dark mode does NOT use these variables — it has its own hardcoded values
   in dark-theme.css scoped under `body.dark-theme`. So overriding any of
   these here only affects the (default) light theme.
   ============================================================================ */
:root {
    --bg-page: #eef4fb;
    --bg-page-gradient:
        radial-gradient(circle at top left, rgba(219, 234, 254, 0.65), transparent 34%),
        radial-gradient(circle at top right, rgba(226, 232, 240, 0.9), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #eef4fb 45%, #e7edf6 100%);
    --bg-sidebar: linear-gradient(180deg, #f6f9fd 0%, #edf3fa 100%);
    --bg-card: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
    --bg-panel: #f8fbff;
    --bg-card-header: rgba(241, 245, 249, 0.7);
    --bg-table-header: rgba(241, 245, 249, 0.7);
    --bg-nav-active: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(96, 165, 250, 0.08));
    --border-soft: rgba(148, 163, 184, 0.28);
    --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --accent-blue: #2563eb;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

/* ============================================================================
   Light-mode page shell
   Soft cool gradient instead of flat white. Slightly stronger body text
   contrast (#0f172a) for premium-SaaS feel.
   ============================================================================ */
body {
    margin-bottom: 60px;
    background: var(--bg-page-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================================
   Light-mode card / panel surfaces
   Tinted gradient instead of pure white, soft shadow, slate border.
   Dark mode (body.dark-theme .card) overrides via dark-theme.css with
   higher specificity — these rules don't bleed.
   ============================================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}

.card-header {
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-soft);
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}

/* ============================================================================
   Light-mode tables
   Faint tinted header on plain theads, softer row dividers.

   The :not(.table-dark):not(.table-light) is on the THEAD selector — not the
   table — because Bootstrap's convention is `<thead class="table-dark">`
   (variant lives on the thead, not the table). Without that scoping, our
   rules were overriding Bootstrap's dark thead styling and leaving dark
   text on a dark bg in search results, projects list, etc.
   ============================================================================ */
.table > thead:not(.table-dark):not(.table-light) {
    background: var(--bg-table-header);
}

.table > thead:not(.table-dark):not(.table-light) > tr > th {
    border-color: var(--border-soft);
    color: var(--text-primary);
}

.table:not(.table-dark) > tbody > tr > td,
.table:not(.table-dark) > tbody > tr > th {
    border-color: var(--border-soft);
}

/* ============================================================================
   Premium dashboard panels — shared shape
   Both the KPI tiles and the larger chart/table panels share the same
   rounded shape, drop-shadow, and hover lift. KPI tiles add an accent
   border-left + icon tile on top of this base.
   ============================================================================ */
.kpi-card,
.gp-panel {
    border: 0;
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover,
.gp-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

/* KPI-specific: accent-colored left border. Each tile passes its accent
   color in as a CSS custom property (--accent) on the inline style,
   e.g. style="--accent:#4e73df". color-mix() builds the soft icon
   background tint from that automatically. */
.kpi-card {
    border-left: 4px solid var(--accent, #4e73df);
}

.kpi-card .kpi-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #4e73df) 14%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-card .kpi-icon i {
    font-size: 1.4rem;
    color: var(--accent, #4e73df);
    line-height: 1;
}

/* Dark-mode panels: same rounded + hover shape, but use the dark surface
   color. Reset the gradient image so dark-theme.css's hardcoded
   `background-color: #1e1e1e` (on `body.dark-theme .card`) wins fully. */
body.dark-theme .kpi-card,
body.dark-theme .gp-panel {
    background-image: none;
    background-color: #1e1e1e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

body.dark-theme .kpi-card:hover,
body.dark-theme .gp-panel:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

body.dark-theme .kpi-card .kpi-icon {
    background: color-mix(in srgb, var(--accent, #4e73df) 22%, transparent);
}

/* ============================================================================
   Light-mode muted / secondary text
   Slate-on-light-blue feels less stark than Bootstrap's default grays.
   ============================================================================ */
.text-muted {
    color: var(--text-muted) !important;
}

small.text-muted, .small.text-muted {
    color: var(--text-secondary) !important;
}

/* ============================================================================
   Dark-mode resets
   Some properties above use the `background` shorthand (which includes a
   background-image gradient). dark-theme.css scopes overrides under
   body.dark-theme but several use `background-color` only, which doesn't
   clear our gradient image. These resets explicitly clear the image so
   dark mode looks exactly as before.
   ============================================================================ */
body.dark-theme,
body.dark-theme .card,
body.dark-theme .modal-content,
body.dark-theme .gp-sidebar,
body.dark-theme .gp-sidebar-nav .nav-link.active {
    background-image: none;
}

body.dark-theme .table:not(.table-dark) > thead {
    background: transparent;
}