/* ==========================================================================
   Pentos LMS — theme.css
   Modern Govtech SaaS personality layer.
   Loaded AFTER site.css and BEFORE per-LGU <style id="theme-overrides">
   so runtime per-tenant overrides remain authoritative.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Inter — variable font, self-hosted
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../lib/inter/inter-latin-wght-normal.woff2') format('woff2-variations'),
         url('../lib/inter/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../lib/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations'),
         url('../lib/inter/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Brand palette (Modern Govtech SaaS — deep navy + warm amber accent)
   --------------------------------------------------------------------------
   The light/base --pt-* palette now lives in wwwroot/css/tokens.css (loaded
   first, before Bootstrap) — the single source of truth. Only the DARK-mode
   --pt-* overrides remain here, in §4 below. Do not re-add the palette here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Bootstrap variable overrides — LIGHT
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    /* Brand */
    --bs-primary: var(--pt-brand-700);
    --bs-primary-rgb: 29, 64, 215;
    --bs-primary-text-emphasis: var(--pt-brand-900);
    --bs-primary-bg-subtle: var(--pt-brand-50);
    --bs-primary-border-subtle: var(--pt-brand-200);
    --bs-link-color: var(--pt-brand-700);
    --bs-link-color-rgb: 29, 64, 215;
    --bs-link-hover-color: var(--pt-brand-800);
    --bs-link-hover-color-rgb: 30, 54, 174;

    /* Typography */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.9375rem; /* 15px — slightly tighter than 16 for SaaS feel */
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--pt-slate-800);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--pt-surface-1);
    --bs-secondary-color: var(--pt-slate-500);
    --bs-tertiary-color: var(--pt-slate-400);
    --bs-emphasis-color: var(--pt-slate-900);
    --bs-heading-color: var(--pt-slate-900);

    /* Borders */
    --bs-border-color: var(--pt-slate-200);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.085);
    --bs-border-radius: 0.5rem;          /* 8px default */
    --bs-border-radius-sm: 0.375rem;     /* 6px */
    --bs-border-radius-lg: 0.75rem;      /* 12px */
    --bs-border-radius-xl: 1rem;         /* 16px */
    --bs-border-radius-pill: 9999px;

    /* Surfaces */
    --bs-tertiary-bg: var(--pt-surface-2);
    --bs-secondary-bg: var(--pt-surface-2);

    /* Forms */
    --bs-form-control-bg: var(--pt-surface-0);
    --bs-form-control-disabled-bg: var(--pt-surface-2);
}

/* --------------------------------------------------------------------------
   4. Bootstrap variable overrides — DARK
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --bs-primary: var(--pt-brand-400);
    --bs-primary-rgb: 96, 144, 250;
    --bs-primary-text-emphasis: var(--pt-brand-200);
    --bs-primary-bg-subtle: rgba(59, 110, 245, 0.12);
    --bs-primary-border-subtle: rgba(96, 144, 250, 0.35);
    --bs-link-color: var(--pt-brand-300);
    --bs-link-color-rgb: 147, 180, 253;
    --bs-link-hover-color: var(--pt-brand-200);

    --bs-body-bg: var(--pt-slate-950);
    --bs-body-color: var(--pt-slate-200);
    --bs-body-color-rgb: 226, 232, 240;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: var(--pt-slate-100);
    --bs-secondary-color: var(--pt-slate-400);
    --bs-tertiary-color: var(--pt-slate-500);

    --bs-border-color: rgba(148, 163, 184, 0.18);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.075);

    --bs-tertiary-bg: var(--pt-slate-900);
    --bs-secondary-bg: var(--pt-slate-800);

    --bs-form-control-bg: var(--pt-slate-900);
    --bs-form-control-disabled-bg: var(--pt-slate-800);

    /* Glass navbar tint in dark */
    --pt-nav-bg: rgba(15, 23, 42, 0.85);

    /* Surfaces shift down */
    --pt-surface-0: var(--pt-slate-900);
    --pt-surface-1: var(--pt-slate-950);
    --pt-surface-2: var(--pt-slate-800);
    --pt-surface-3: var(--pt-slate-700);
}

/* --------------------------------------------------------------------------
   5. Base typography
   -------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss03', 'cv02';
    background-color: var(--bs-body-bg);
}

/* Global heading typography. Wrapped in :where() so the specificity is 0,0,0 —
   any user class on the heading (or a Bootstrap utility on its ancestor) wins
   without needing !important. Without :where() the bare element selector (0,0,1)
   beat .text-white on a parent and made headings render with the dark
   --bs-heading-color on dark-bg sections like the FOI banner footer. */
:where(h1, h2, h3, h4, h5, h6,
       .h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--bs-heading-color);
}

:where(h1, .h1) { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); letter-spacing: -0.025em; }
:where(h2, .h2) { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); letter-spacing: -0.022em; }
:where(h3, .h3) { font-size: 1.375rem; }
:where(h4, .h4) { font-size: 1.125rem; }
:where(h5, .h5) { font-size: 1rem; }
:where(h6, .h6) { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }

/* Headings inside dark-themed containers inherit the container's text color
   instead of falling back to the global --bs-heading-color (slate-900 / near-black).
   Without this, an <h2> inside <section class="bg-dark text-white"> renders as
   nearly the same color as its background — the "dark on dark" footer/banner bug.
   Bootstrap's own headings.scss sets color: var(--bs-heading-color) on h1-h6 with
   element specificity 0,0,1, which overrides inheritance from .text-white on a
   parent. The descendant-combinator rules below have specificity 0,1,1 and force
   inheritance back on for the explicit dark-container cases. */
.text-white :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.text-light :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.bg-dark :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.bg-black :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.section-hero :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.section-hero-sm :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: inherit;
}
/* Footer columns use the explicit .footer-heading class with a deliberate
   pure-white color that is brighter than the surrounding body text. The
   .footer-main/.footer-body containers are intentionally NOT in the inherit
   list above so .footer-heading wins. */

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 800;
    letter-spacing: -0.035em;
}

small, .small { font-size: 0.8125rem; }

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

/* Inline code + kbd */
code, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   6. Navbar — refined deep brand with subtle gradient + crisp border
   -------------------------------------------------------------------------- */
.navbar.bg-primary {
    background-color: var(--bs-primary) !important;
    /* Derive a darker variant from the per-LGU --bs-primary so navbar gradient adapts to tenant branding */
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--bs-primary) 80%, black) 0%,
        var(--bs-primary) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--pt-shadow-md);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.navbar.bg-primary .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.015em;
}

.navbar.bg-primary .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0.875rem !important;
    border-radius: 0.5rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.10);
}

.navbar.bg-primary .nav-link.active,
.navbar.bg-primary .nav-link.show {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}

.navbar .dropdown-menu {
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--pt-shadow-lg);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.375rem;
    margin-top: 0.5rem;
}

.navbar .dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.navbar .dropdown-divider {
    border-top-color: var(--bs-border-color);
    margin: 0.375rem 0;
}

/* --------------------------------------------------------------------------
   7. Buttons — refined weight, soft shadow, focus ring
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--bs-border-radius);
    letter-spacing: -0.005em;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 4px var(--pt-ring-color-soft);
    outline: none;
}

.btn-sm {
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-lg {
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-primary {
    --bs-btn-bg: var(--pt-brand-700);
    --bs-btn-border-color: var(--pt-brand-700);
    --bs-btn-hover-bg: var(--pt-brand-800);
    --bs-btn-hover-border-color: var(--pt-brand-800);
    --bs-btn-active-bg: var(--pt-brand-900);
    --bs-btn-active-border-color: var(--pt-brand-900);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset, var(--pt-shadow-sm);
}

.btn-primary:hover {
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, var(--pt-shadow-md);
}

.btn-outline-primary {
    --bs-btn-color: var(--pt-brand-700);
    --bs-btn-border-color: var(--pt-brand-300);
    --bs-btn-hover-bg: var(--pt-brand-50);
    --bs-btn-hover-color: var(--pt-brand-800);
    --bs-btn-hover-border-color: var(--pt-brand-400);
    --bs-btn-active-bg: var(--pt-brand-100);
    --bs-btn-active-color: var(--pt-brand-800);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pt-slate-700);
    --bs-btn-border-color: var(--pt-slate-300);
    --bs-btn-hover-bg: var(--pt-slate-50);
    --bs-btn-hover-color: var(--pt-slate-900);
    --bs-btn-hover-border-color: var(--pt-slate-400);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--pt-slate-300);
    --bs-btn-border-color: var(--pt-slate-700);
    --bs-btn-hover-bg: var(--pt-slate-800);
    --bs-btn-hover-color: var(--pt-slate-100);
}

.btn-light {
    --bs-btn-bg: var(--pt-surface-0);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--pt-surface-2);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
}

/* Icon-only button helper */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.btn-icon.btn-sm { width: 1.875rem; height: 1.875rem; }

/* --------------------------------------------------------------------------
   8. Cards — subtle ring, soft shadow, gentle hover lift
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-bg: var(--pt-surface-0);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--pt-shadow-xs);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.card.card-hover:hover,
.card.card-interactive:hover {
    box-shadow: var(--pt-shadow-md);
    transform: translateY(-1px);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    color: var(--bs-heading-color);
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--bs-border-color);
}

.card-title {
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--bs-heading-color);
}

/* Stat card variant — used on dashboards */
.card-stat {
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--pt-surface-0);
    border: 1px solid var(--bs-border-color);
    padding: 1.25rem;
    box-shadow: var(--pt-shadow-xs);
}

.card-stat .stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 0.375rem;
}

.card-stat .stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--bs-heading-color);
}

.card-stat .stat-trend {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.card-stat .stat-trend.positive { color: #15803d; }
.card-stat .stat-trend.negative { color: #b91c1c; }

[data-bs-theme="dark"] .card-stat .stat-trend.positive { color: #4ade80; }
[data-bs-theme="dark"] .card-stat .stat-trend.negative { color: #f87171; }

/* --------------------------------------------------------------------------
   9. Forms — focus rings, refined inputs
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    font-size: 0.9375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
    border-color: var(--bs-border-color);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pt-ring-color);
    box-shadow: 0 0 0 4px var(--pt-ring-color-soft);
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.375rem;
    letter-spacing: -0.005em;
}

.form-text {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.input-group-text {
    background-color: var(--pt-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Validation */
.invalid-feedback { font-size: 0.8125rem; font-weight: 500; }
.valid-feedback { font-size: 0.8125rem; font-weight: 500; }

/* Select2 alignment with new input look */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--pt-ring-color) !important;
    box-shadow: 0 0 0 4px var(--pt-ring-color-soft) !important;
}

/* --------------------------------------------------------------------------
   10. Tables — quiet borders, sticky header support, subtle zebra
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: var(--pt-surface-2);
    --bs-table-striped-bg: var(--pt-surface-1);
    color: var(--bs-body-color);
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
    border-bottom-width: 1px;
    border-color: var(--bs-border-color);
}

.table > thead {
    background-color: var(--pt-surface-2);
}

.table > thead > tr > th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bs-table-hover-bg);
}

.table-sticky-header > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--pt-surface-2);
}

.table-card {
    background-color: var(--pt-surface-0);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.table-card .table { margin-bottom: 0; }
.table-card .table > :first-child > tr:first-child > * { border-top: 0; }
.table-card .table > :last-child > tr:last-child > * { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Badges, status pills, alerts
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    border-radius: var(--bs-border-radius-sm);
    letter-spacing: 0.01em;
}

/* Soft (pastel) badge variants */
.badge-soft-primary  { background-color: var(--pt-brand-50);    color: var(--pt-brand-800); }
.badge-soft-success  { background-color: #dcfce7;               color: #166534; }
.badge-soft-warning  { background-color: var(--pt-accent-100);  color: var(--pt-accent-700); }
.badge-soft-danger   { background-color: #fee2e2;               color: #991b1b; }
.badge-soft-info     { background-color: #e0f2fe;               color: #075985; }
.badge-soft-secondary{ background-color: var(--pt-slate-100);   color: var(--pt-slate-700); }

[data-bs-theme="dark"] .badge-soft-primary  { background-color: rgba(59, 110, 245, 0.18); color: var(--pt-brand-200); }
[data-bs-theme="dark"] .badge-soft-success  { background-color: rgba(34, 197, 94, 0.18); color: #86efac; }
[data-bs-theme="dark"] .badge-soft-warning  { background-color: rgba(245, 158, 11, 0.18); color: var(--pt-accent-200); }
[data-bs-theme="dark"] .badge-soft-danger   { background-color: rgba(239, 68, 68, 0.18); color: #fca5a5; }
[data-bs-theme="dark"] .badge-soft-info     { background-color: rgba(14, 165, 233, 0.18); color: #7dd3fc; }
[data-bs-theme="dark"] .badge-soft-secondary{ background-color: rgba(148, 163, 184, 0.18); color: var(--pt-slate-300); }

/* Solid purple badge — used by StatusDisplayMappingExtensions for
   OrdinanceStatus.ForApproval and ResolutionStatus.ForAdoption.
   Not a native Bootstrap bg-* utility, so it's defined here. */
.bg-purple {
    background-color: #8b5cf6 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .bg-purple {
    background-color: #7c3aed !important;
}

/* Status pill — used for legislative state, request state, etc. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border: 1px solid transparent;
}

.status-pill::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}

.status-pill.status-draft     { background: var(--pt-slate-100);   color: var(--pt-slate-700);    border-color: var(--pt-slate-200); }
.status-pill.status-pending   { background: var(--pt-accent-100);  color: var(--pt-accent-700);   border-color: var(--pt-accent-200); }
.status-pill.status-approved  { background: #dcfce7;               color: #166534;                border-color: #bbf7d0; }
.status-pill.status-effective { background: #d1fae5;               color: #065f46;                border-color: #a7f3d0; }
.status-pill.status-vetoed,
.status-pill.status-rejected  { background: #fee2e2;               color: #991b1b;                border-color: #fecaca; }
.status-pill.status-info      { background: #e0f2fe;               color: #075985;                border-color: #bae6fd; }

[data-bs-theme="dark"] .status-pill.status-draft     { background: rgba(148, 163, 184, 0.15); color: var(--pt-slate-300); border-color: rgba(148, 163, 184, 0.25); }
[data-bs-theme="dark"] .status-pill.status-pending   { background: rgba(245, 158, 11, 0.18); color: var(--pt-accent-200); border-color: rgba(245, 158, 11, 0.30); }
[data-bs-theme="dark"] .status-pill.status-approved  { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.30); }
[data-bs-theme="dark"] .status-pill.status-effective { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.30); }
[data-bs-theme="dark"] .status-pill.status-vetoed,
[data-bs-theme="dark"] .status-pill.status-rejected  { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border-color: rgba(239, 68, 68, 0.30); }
[data-bs-theme="dark"] .status-pill.status-info      { background: rgba(14, 165, 233, 0.18); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.30); }

/* Alerts — toned-down with leading bar */
.alert {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
}

.alert-primary { background: var(--pt-brand-50);   color: var(--pt-brand-900);    border-color: var(--pt-brand-200); }
.alert-success { background: #dcfce7;              color: #14532d;                border-color: #bbf7d0; }
.alert-warning { background: var(--pt-accent-50);  color: #78350f;                border-color: var(--pt-accent-200); }
.alert-danger  { background: #fee2e2;              color: #7f1d1d;                border-color: #fecaca; }
.alert-info    { background: #e0f2fe;              color: #0c4a6e;                border-color: #bae6fd; }

[data-bs-theme="dark"] .alert-primary { background: rgba(59, 110, 245, 0.10); color: var(--pt-brand-200); border-color: rgba(59, 110, 245, 0.30); }
[data-bs-theme="dark"] .alert-success { background: rgba(34, 197, 94, 0.10); color: #86efac; border-color: rgba(34, 197, 94, 0.30); }
[data-bs-theme="dark"] .alert-warning { background: rgba(245, 158, 11, 0.10); color: var(--pt-accent-200); border-color: rgba(245, 158, 11, 0.30); }
[data-bs-theme="dark"] .alert-danger  { background: rgba(239, 68, 68, 0.10); color: #fca5a5; border-color: rgba(239, 68, 68, 0.30); }
[data-bs-theme="dark"] .alert-info    { background: rgba(14, 165, 233, 0.10); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.30); }

/* --------------------------------------------------------------------------
   12. Modals & Offcanvas
   -------------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--pt-shadow-xl);
}

.modal-header {
    border-bottom-color: var(--bs-border-color);
    padding: 1rem 1.25rem;
}

.modal-title {
    font-weight: 700;
    letter-spacing: -0.012em;
}

.modal-footer {
    border-top-color: var(--bs-border-color);
    padding: 0.875rem 1.25rem;
}

.offcanvas {
    border-color: var(--bs-border-color);
    box-shadow: var(--pt-shadow-xl);
}

/* --------------------------------------------------------------------------
   13. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    --bs-pagination-padding-y: 0.4375rem;
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-bg: var(--pt-surface-0);
    --bs-pagination-hover-bg: var(--pt-surface-2);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-active-bg: var(--pt-brand-700);
    --bs-pagination-active-border-color: var(--pt-brand-700);
    gap: 0.25rem;
}

.page-link {
    border-radius: var(--bs-border-radius) !important;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   14. Footer refinements
   -------------------------------------------------------------------------- */
.footer-main .bg-dark {
    background-color: var(--pt-slate-900) !important;
    background-image: linear-gradient(180deg, var(--pt-slate-900) 0%, var(--pt-slate-950) 100%);
}

.footer-main .bg-black {
    background-color: var(--pt-slate-950) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-main .footer-links li {
    margin-bottom: 0.5rem;
}

.footer-main .footer-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    transition: color 120ms ease;
}

.footer-main .footer-links a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-main .footer-brand-icon {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-main .d-flex.gap-2 > a {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85);
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.footer-main .d-flex.gap-2 > a:hover {
    background-color: var(--pt-brand-600) !important;
    color: #fff;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   15. Hero / section helpers (additive — opt-in via class)
   -------------------------------------------------------------------------- */
.section-hero {
    position: relative;
    padding: clamp(3rem, 4vw + 2rem, 6rem) 0;
    background-color: color-mix(in srgb, var(--bs-primary) 70%, black);
    /* Hero gradient also follows the per-LGU --bs-primary so tenants get on-brand heroes */
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(245, 158, 11, 0.10) 0%, transparent 50%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--bs-primary) 50%, black) 0%,
            color-mix(in srgb, var(--bs-primary) 80%, black) 100%);
    color: #fff;
    overflow: hidden;
}

.section-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}

.section-hero > * {
    position: relative;
    z-index: 1;
}

.section-hero .display-4,
.section-hero h1 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.section-hero .lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    max-width: 56ch;
}

.section-muted {
    background-color: var(--pt-surface-1);
    padding: clamp(2rem, 3vw + 1rem, 4rem) 0;
}

/* Compact themed hero for subordinate landing pages (E-Library, FOI, News & Events).
   Background follows var(--bs-primary) so it retints with the active theme. */
.section-hero-sm {
    position: relative;
    padding: clamp(1.75rem, 2vw + 1rem, 3rem) 0;
    background-color: color-mix(in srgb, var(--bs-primary) 70%, black);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--bs-primary) 55%, black) 0%,
            color-mix(in srgb, var(--bs-primary) 85%, black) 100%);
    color: #fff;
}
.section-hero-sm h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
    margin: 0;
}
.section-hero-sm .lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0.25rem 0 0 0;
}
.section-hero-sm .input-group .form-control,
.section-hero-sm .input-group .input-group-text {
    border: none;
}

/* Thin neutral breadcrumb band that sits above .section-hero-sm */
.page-breadcrumb-strip {
    background-color: var(--pt-surface-1);
    padding: 0.5rem 0;
}
.page-breadcrumb-strip .breadcrumb {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. List groups, tabs, breadcrumb
   -------------------------------------------------------------------------- */
.list-group {
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-border-radius: var(--bs-border-radius-lg);
    --bs-list-group-action-hover-bg: var(--pt-surface-2);
    --bs-list-group-active-bg: var(--pt-brand-700);
    --bs-list-group-active-border-color: var(--pt-brand-700);
}

.list-group-item {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--pt-brand-700);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--pt-surface-0);
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    color: var(--bs-secondary-color);
    font-weight: 500;
    padding: 0.5rem 0.875rem;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--bs-body-color);
    background-color: var(--pt-surface-2);
}

.nav-tabs .nav-link.active {
    color: var(--pt-brand-700);
    background-color: var(--pt-surface-0);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--pt-surface-0);
    box-shadow: inset 0 -2px 0 0 var(--pt-brand-600);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--pt-brand-300);
    background-color: var(--pt-surface-0);
    box-shadow: inset 0 -2px 0 0 var(--pt-brand-400);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
    --bs-breadcrumb-item-active-color: var(--bs-body-color);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.breadcrumb-item a:hover { color: var(--pt-brand-700); text-decoration: none; }

/* --------------------------------------------------------------------------
   17. Dropdowns (general — outside navbar)
   -------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-link-hover-bg: var(--pt-surface-2);
    --bs-dropdown-link-active-bg: var(--pt-brand-700);
    --bs-dropdown-link-active-color: #fff;
    box-shadow: var(--pt-shadow-lg);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   18. Admin / Executive / Member shell — MOVED to wwwroot/css/app-shell.css
   (loaded after theme.css). One shell for all three areas; per-area --shell-bg
   hook lives there. Do not re-add shell rules here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   19. Sizing — admin/executive/member tables and forms
   Readability scale for the back office. Primary users include councilors and
   vice-mayors, many 60+, so the base is the comfortable 16px and dense controls
   sit at 15px (was a 14px "density" downshift). Paired with §22 for contrast
   and interactive-target sizing.
   -------------------------------------------------------------------------- */
.admin-main,
.executive-main,
.member-main {
    --bs-body-font-size: 1rem;   /* 16px — was 0.875rem (14px) */
    font-size: 1rem;
}

.admin-main .table > :not(caption) > * > *,
.executive-main .table > :not(caption) > * > *,
.member-main .table > :not(caption) > * > * {
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;        /* 15px — was 0.875rem (14px) */
}

.admin-main .table > thead > tr > th,
.executive-main .table > thead > tr > th,
.member-main .table > thead > tr > th {
    font-size: 0.8125rem;        /* 13px — was 0.6875rem (11px) */
    padding: 0.625rem 0.75rem;
}

/* Sticky header for any admin/exec/member table inside a scroll container */
.admin-main .table-responsive,
.executive-main .table-responsive,
.member-main .table-responsive {
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    background-color: var(--pt-surface-0);
}

.admin-main .table-responsive > .table,
.executive-main .table-responsive > .table,
.member-main .table-responsive > .table {
    margin-bottom: 0;
}

/* DataTables alignment with theme */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.875rem !important;   /* 14px — was 0.8125rem (13px) */
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--pt-ring-color) !important;
    box-shadow: 0 0 0 4px var(--pt-ring-color-soft) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pt-brand-700) !important;
    border-color: var(--pt-brand-700) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    color: var(--bs-secondary-color) !important;
    font-size: 0.875rem !important;   /* 14px — was 0.8125rem (13px) */
}

/* Form density inside admin/exec/member */
.admin-main .form-control,
.admin-main .form-select,
.executive-main .form-control,
.executive-main .form-select,
.member-main .form-control,
.member-main .form-select {
    font-size: 0.9375rem;        /* 15px — was 0.875rem (14px) */
    padding: 0.5rem 0.75rem;
}

/* --------------------------------------------------------------------------
   19b. Dark-mode rescue for non-theme-aware Bootstrap utilities
   bg-white / bg-light / text-dark / text-black / text-white-50 are NOT
   theme-aware in Bootstrap 5.3 — they force fixed values. Many views use
   them. Re-map them in dark mode so cards/text stay legible.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--pt-surface-0) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--pt-surface-2) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-body {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-white {
    color: #fff !important;
}

[data-bs-theme="dark"] .border-light {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30) !important;
}

/* Cards with `bg-light` icon-tint helpers should still feel like a tint, not a slab */
[data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(var(--bs-primary-rgb), 0.18) !important; }
[data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(34, 197, 94, 0.18) !important; }
[data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(245, 158, 11, 0.18) !important; }
[data-bs-theme="dark"] .bg-danger-subtle  { background-color: rgba(239, 68, 68, 0.18) !important; }
[data-bs-theme="dark"] .bg-info-subtle    { background-color: rgba(14, 165, 233, 0.18) !important; }
[data-bs-theme="dark"] .bg-secondary-subtle { background-color: rgba(148, 163, 184, 0.18) !important; }

/* Subtle text variants — keep contrast on dark */
[data-bs-theme="dark"] .text-primary-emphasis { color: var(--pt-brand-200) !important; }
[data-bs-theme="dark"] .text-success-emphasis { color: #86efac !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: var(--pt-accent-200) !important; }
[data-bs-theme="dark"] .text-danger-emphasis  { color: #fca5a5 !important; }
[data-bs-theme="dark"] .text-info-emphasis    { color: #7dd3fc !important; }

/* Bootstrap text-bg-* utility (set bg + contrasting text together) */
[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--pt-surface-2) !important;
    color: var(--bs-body-color) !important;
}

/* List groups with light items */
[data-bs-theme="dark"] .list-group-item-light {
    background-color: var(--pt-surface-2) !important;
    color: var(--bs-body-color);
}

/* Any element using Bootstrap's old `bg-body` semantic */
[data-bs-theme="dark"] .bg-body-secondary { background-color: var(--pt-surface-2) !important; }
[data-bs-theme="dark"] .bg-body-tertiary  { background-color: var(--pt-surface-1) !important; }

/* Inline white backgrounds applied via class on alerts/cards */
[data-bs-theme="dark"] .card.bg-white,
[data-bs-theme="dark"] .alert.bg-white {
    background-color: var(--pt-surface-0) !important;
}

/* Forms inside dark-mode cards: the placeholder color from site.css can be too dim */
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: var(--bs-tertiary-color);
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   20. Theme toggle button (used in user dropdown)
   -------------------------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
}

.theme-toggle:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.theme-toggle-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-toggle-icon-light { display: none; }
[data-bs-theme="dark"] .theme-toggle-icon-dark { display: inline-block; }

/* --------------------------------------------------------------------------
   21. Reduced motion respect
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .card.card-hover,
    .card.card-interactive,
    .footer-main .d-flex.gap-2 > a {
        transition: none;
    }

    .card.card-hover:hover,
    .card.card-interactive:hover,
    .footer-main .d-flex.gap-2 > a:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   22. Accessible sizing & contrast — back office + signed-in citizens
   Readability pass for older primary users (councilors / vice-mayors, many
   60+): darker secondary text to clear WCAG AA, minimum readable sizes on
   small UI, and comfortable interactive targets on desktop (site.css only
   enlarges targets below 768px). Scoped with :is() to the staff shells +
   body.citizen-area, so the public portal and the per-LGU color overrides
   stay untouched. The base type scale lives in §19.
   -------------------------------------------------------------------------- */

/* 22.1 Secondary / muted text contrast.
   Light: slate-500 (#64748b ~4.6:1) → slate-600 (#475569 ~7:1). Re-declaring
   the token darkens .text-muted, .text-secondary, table headers, .form-text,
   breadcrumbs and DataTables info by inheritance — no need to touch the
   ~2,000 call sites. Dark mode keeps slate-300/400, which already clears AA
   on the dark surfaces. */
:is(.admin-main, .executive-main, .member-main, body.citizen-area) {
    --bs-secondary-color: var(--pt-slate-600);
    --bs-tertiary-color: var(--pt-slate-500);
}

[data-bs-theme="dark"] :is(.admin-main, .executive-main, .member-main, body.citizen-area) {
    --bs-secondary-color: var(--pt-slate-300);
    --bs-tertiary-color: var(--pt-slate-400);
}

/* 22.2 Minimum readable sizes on small UI */
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .badge,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .status-pill {
    font-size: 0.8125rem;        /* 13px — was 12px */
}

:is(.admin-main, .executive-main, .member-main, body.citizen-area) .form-text,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .invalid-feedback,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .valid-feedback,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .small,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) small {
    font-size: 0.875rem;         /* 14px floor — was 13px */
}

:is(.admin-main, .executive-main, .member-main, body.citizen-area) .form-label {
    font-size: 0.9375rem;        /* 15px — was 14px */
}

/* 22.3 Comfortable interactive targets.
   The small-button TEXT bump applies at all widths; the larger target HEIGHT
   is desktop-only because site.css already enforces 44px below 768px (don't
   shrink that). Covers .btn-sm AND .btn-group-sm > .btn — row-action groups
   are sized by the GROUP, not a .btn-sm class. */
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-sm,
:is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-group-sm > .btn {
    --bs-btn-font-size: 0.875rem; /* 14px — was 13px */
}

@media (min-width: 768px) {
    :is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-sm,
    :is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-group-sm > .btn {
        min-height: 2.375rem;     /* 38px — was ~31px */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    :is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-icon {
        width: 2.5rem;
        height: 2.5rem;           /* 40×40 — was 36×36 */
    }

    :is(.admin-main, .executive-main, .member-main, body.citizen-area) .btn-icon.btn-sm {
        width: 2.375rem;
        height: 2.375rem;         /* 38×38 — was 30×30 */
    }
}