/* ==========================================================================
   PATHASHALA — Bootstrap 5.3 theme bridge
   Maps the academic-blue design tokens (tokens.css) onto Bootstrap's own
   CSS custom properties so every Bootstrap component already used across the
   app (buttons, cards, tables, badges, alerts, forms, navbar, dropdowns,
   accordions) picks up the theme automatically — no per-view rewrites.

   Load order matters: bootstrap.min.css, then tokens.css, then this file.
   Everything here reads from the --* tokens defined in tokens.css, so light/
   dark mode (handled there via prefers-color-scheme) flows through for free.
   ========================================================================== */

:root {
  /* ---- Core palette -> Bootstrap theme colors ---- */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: var(--primary);
  --bs-primary-bg-subtle: var(--primary-tint);
  --bs-primary-border-subtle: var(--primary);

  --bs-secondary: var(--ink-secondary);
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-color: var(--ink-muted);
  --bs-secondary-bg: var(--bg-surface-muted);
  --bs-secondary-bg-subtle: var(--bg-surface-muted);
  --bs-secondary-border-subtle: var(--border);
  --bs-secondary-text-emphasis: var(--ink-secondary);

  --bs-success: var(--status-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: var(--status-success);
  --bs-success-bg-subtle: var(--status-success-tint);
  --bs-success-border-subtle: var(--status-success);

  --bs-warning: var(--gold);
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: var(--gold);
  --bs-warning-bg-subtle: var(--gold-tint);
  --bs-warning-border-subtle: var(--gold);

  --bs-danger: var(--status-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: var(--status-danger);
  --bs-danger-bg-subtle: var(--status-danger-tint);
  --bs-danger-border-subtle: var(--status-danger);

  --bs-info: var(--teal);
  --bs-info-rgb: 15, 118, 110;
  --bs-info-text-emphasis: var(--teal);
  --bs-info-bg-subtle: var(--teal-tint);
  --bs-info-border-subtle: var(--teal);

  --bs-light: var(--bg-surface-muted);
  --bs-light-rgb: 241, 245, 249;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 23, 32, 51;

  /* ---- Body / surfaces / borders ---- */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 23, 32, 51;
  --bs-emphasis-color: var(--ink);
  --bs-tertiary-color: var(--ink-muted);
  --bs-tertiary-bg: var(--bg-surface-muted);
  --bs-heading-color: var(--ink);

  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);

  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color-rgb: 29, 78, 216;

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-2xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-box-shadow: var(--shadow-raised);
  --bs-box-shadow-sm: var(--shadow-card);
  --bs-box-shadow-lg: var(--shadow-overlay);
}

/* Bootstrap's opacity-aware utilities (.bg-light, .bg-dark, .text-secondary, translucent
   borders, etc.) read the "-rgb" triplet, not the hex custom property above — and a raw
   R,G,B triplet can't be composed from var() the way a hex value can. Left alone, these
   utilities would stay stuck on their light-mode colors even when tokens.css flips every
   other surface to dark (e.g. a plain .bg-light badge showing a stray light patch on an
   otherwise dark page). Only the tokens whose underlying color actually changes between
   light and dark need a dark-mode value here — status colors (success/warning/danger/info)
   and the primary/link blues are the same hex in both modes, so their -rgb is already right. */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-light-rgb: 26, 36, 57;      /* --bg-surface-muted (dark) */
    --bs-dark-rgb: 238, 242, 249;    /* --ink (dark) */
    --bs-secondary-rgb: 166, 176, 195; /* --ink-secondary (dark) */
    --bs-body-color-rgb: 238, 242, 249; /* --ink (dark) */
  }
}

body {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------- */
/* Buttons — Bootstrap bakes each variant's colors as literal hex on the   */
/* class itself (not root-linked), so these need explicit per-class rules */
/* ---------------------------------------------------------------------- */

.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--primary-tint);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--status-success);
  --bs-btn-border-color: var(--status-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #128a3e;
  --bs-btn-hover-border-color: #128a3e;
  --bs-btn-active-bg: #0f7535;
  --bs-btn-active-border-color: #0f7535;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--status-danger);
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ink-secondary);
  --bs-btn-border-color: var(--ink-secondary);
  --bs-btn-hover-bg: #475569;
  --bs-btn-hover-border-color: #475569;
}

.btn-dark {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}

.btn-outline-success {
  --bs-btn-color: var(--status-success);
  --bs-btn-border-color: var(--status-success);
  --bs-btn-hover-bg: var(--status-success);
  --bs-btn-hover-border-color: var(--status-success);
}

.btn-outline-danger {
  --bs-btn-color: var(--status-danger);
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-hover-bg: var(--status-danger);
  --bs-btn-hover-border-color: var(--status-danger);
}

.btn-outline-warning {
  --bs-btn-color: var(--coral);
  --bs-btn-border-color: var(--coral);
  --bs-btn-hover-bg: var(--coral);
  --bs-btn-hover-border-color: var(--coral);
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--ink-secondary);
  --bs-btn-hover-border-color: var(--ink-secondary);
}

.btn-link { --bs-btn-color: var(--primary); }

/* ---------------------------------------------------------------------- */
/* Forms — focus ring should match the theme accent, not Bootstrap blue   */
/* ---------------------------------------------------------------------- */

.form-control, .form-select {
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
  font-family: var(--font-body);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-tint);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-tint);
}

/* ---------------------------------------------------------------------- */
/* Navbar — reskinned to read as the theme's topbar without changing      */
/* structure (keeps existing role-based menu + Bootstrap JS behavior)     */
/* ---------------------------------------------------------------------- */

.navbar {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink) !important;
}
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: var(--ink-secondary) !important;
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link.dropdown-toggle:hover {
  color: var(--primary) !important;
}

/* ---------------------------------------------------------------------- */
/* Cards, tables, list groups — mostly root-var driven already            */
/* ---------------------------------------------------------------------- */

.card {
  box-shadow: var(--shadow-card);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  color: var(--ink);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bg-surface-muted);
}
.table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  font-weight: 600;
  border-bottom-width: 2px;
}
.table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.table > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--primary-tint);
}
.table-responsive {
  border-radius: var(--radius-md);
}

.list-group-item {
  background-color: var(--bg-surface);
  border-color: var(--border);
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------- */
/* Badges — plain .badge (no bg-* utility) defaults to secondary; give it  */
/* the same soft pill look as the theme's own .ps-badge                   */
/* ---------------------------------------------------------------------- */

.badge {
  font-weight: 500;
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------- */
/* Main content frame — a colored rule down the left of the content area, */
/* echoing a ruled-notebook margin line (kept as a motif per Requirement_ */
/* Styles.pdf §3, recolored to the new primary blue) — applied app-wide   */
/* via the existing Bootstrap .container instead of the theme's tighter   */
/* fixed-width .ps-main (which would clip wide tables and the flipbook).  */
/* ---------------------------------------------------------------------- */

.ps-main-frame {
  padding-left: var(--bs-gutter-x, 0.75rem);
}