/* ISCT Admin — brand theme, layout, and light/dark overrides. */

:root,
[data-bs-theme="light"] {
  --isct-orange: #f97316;
  --isct-orange-rgb: 249, 115, 22;
  --isct-orange-100: #fed7aa;
  --isct-blue: #2563eb;
  --isct-blue-rgb: 37, 99, 235;
  --isct-blue-100: #bfdbfe;

  /* Map Bootstrap theme colors to the brand palette. */
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: #facc15;
  --bs-warning-rgb: 250, 204, 21;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;

  --isct-sidebar-bg: #1e3a8a;
  --isct-sidebar-active: #2563eb;
  --isct-body-bg: #f4f6fb;
  --isct-card-bg: #ffffff;
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --isct-sidebar-bg: #0b1220;
  --isct-sidebar-active: #2563eb;
  --isct-body-bg: #0f172a;
  --isct-card-bg: #1e293b;
  --bs-body-bg: #0f172a;
  --bs-emphasis-color: #ffffff;
  --bs-link-color: #93b4ff;
  --bs-link-color-rgb: 147, 180, 255;
  --bs-link-hover-color: #bfdbfe;
  /* Render native controls (date pickers, spinners, scrollbars) dark too. */
  color-scheme: dark;
}

body {
  background-color: var(--isct-body-bg);
  min-height: 100vh;
}

/* Action / primary buttons = orange. */
.btn-primary {
  --bs-btn-bg: var(--isct-orange);
  --bs-btn-border-color: var(--isct-orange);
  --bs-btn-hover-bg: #ea6a0e;
  --bs-btn-hover-border-color: #ea6a0e;
  --bs-btn-active-bg: #d65f0a;
  --bs-btn-active-border-color: #d65f0a;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--isct-orange);
  --bs-btn-disabled-border-color: var(--isct-orange);
}

/* Secondary / navigational button = blue. */
.btn-blue {
  --bs-btn-bg: var(--isct-blue);
  --bs-btn-border-color: var(--isct-blue);
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* ----- App shell ----- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 250px;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  overflow: hidden;
  background: var(--isct-sidebar-bg);
  color: #e5edff;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform 0.2s ease-in-out;
}
.app-sidebar .sidebar-brand {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-plate {
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.brand-plate img { max-height: 48px; width: auto; max-width: 100%; display: block; }
.auth-logo-plate {
  display: inline-flex;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.auth-logo-plate img { max-height: 84px; width: auto; max-width: 100%; display: block; }
.app-sidebar .sidebar-brand { flex-shrink: 0; }
/* Single, non-wrapping, scrollable column (never breaks into 2 columns). */
.app-sidebar .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar { width: 6px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.app-sidebar .nav-link {
  color: #cdd9ff;
  border-radius: 0.5rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.05rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app-sidebar .nav-link.active { background: var(--isct-sidebar-active); color: #fff; }
.app-sidebar .nav-section {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 0.85rem 0.2rem;
  flex-shrink: 0;
}

.app-main { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--isct-card-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-content { flex: 1; }

.card { background-color: var(--isct-card-bg); }

.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; }
.kpi-card .kpi-icon {
  width: 46px; height: 46px; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1035;
}

/* ----- Auth (anonymous) layout ----- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--isct-card-bg);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}
.auth-logo {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--isct-orange);
}

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .app-main { margin-left: 0; }
}

/* Multi-checkbox / radio groups rendered by partials/_form.html. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.15rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  max-height: 260px;
  overflow-y: auto;
}

/* Select2 — match Bootstrap inputs and follow the active theme (light & dark).
   The select2-bootstrap-5 theme hard-codes light-mode colors, so the selected
   text turned dark-on-dark (invisible) in dark mode. Re-bind every visible part
   to Bootstrap's theme variables so it tracks light/dark automatically. */
.select2-container .select2-selection--single { height: calc(2.375rem + 2px); }
.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection .select2-selection__rendered {
  color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}
.select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
.select2-container--bootstrap-5 .select2-results__option {
  color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: #fff;
}
.select2-container--bootstrap-5 .select2-search__field {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.select2-container--bootstrap-5 .select2-selection__choice {
  color: var(--bs-body-color);
}

/* ============================================================
   Part-3 cosmetic layer — sizing / spacing / alignment ONLY.
   No color or font-family changes (those are locked). Inputs keep
   Bootstrap's 1rem so Select2's fixed height stays aligned.
   ============================================================ */

/* Slightly denser base size so pages fit better as a whole. */
.app-content { font-size: 0.9375rem; }

/* --- Consistent page header: title left, actions right --- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}
.page-header .page-title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.page-header .page-subtitle {
  font-size: 0.8125rem;
  margin-top: 0.15rem;
}
.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Section heading inside cards (keep .text-secondary for color) --- */
.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

/* --- Cards: consistent, comfortable padding --- */
.card-body { padding: 1.15rem 1.25rem; }

/* --- Tables: denser, aligned, fit-to-width --- */
.app-content .table { font-size: 0.875rem; margin-bottom: 0; }
.app-content .table > thead > tr > th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.app-content .table > :not(caption) > * > * {
  padding: 0.45rem 0.6rem;
  vertical-align: middle;
}
/* Tidy, evenly-spaced, right-aligned row action buttons. */
.table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}
.app-content .table .btn-sm {
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.8rem;
}

/* --- Forms: tighter labels; the 2-column grid is opt-in via _form.html --- */
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.form-text { font-size: 0.75rem; }

/* --- Detail-page label / value grids (add .detail-grid to the <dl>) --- */
.detail-grid > dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-top: 0.4rem;
}
.detail-grid > dd {
  font-size: 0.9375rem;
  margin-bottom: 0.4rem;
  padding-top: 0.4rem;
}

/* --- Filter bar: even, compact columns (add .filter-bar to the <form>) --- */
.filter-bar .form-label {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

/* --- KPI cards: right-sized number & icon --- */
.kpi-card .card-body { padding: 0.95rem 1.05rem; }
.kpi-card .kpi-value { font-size: 1.5rem; line-height: 1.15; }
.kpi-card .kpi-icon { width: 42px; height: 42px; font-size: 1.15rem; }

/* ============================================================
   Extracted inline styles — moved here out of the templates so the
   HTML carries no inline CSS. Each rule is the exact value that used
   to sit in a style="" attribute, so the rendered look is unchanged.
   ============================================================ */

/* --- Dashboard / reports KPI-icon tints (soft background + icon colour). --- */
.kpi-orange { background: rgba(249, 115, 22, .12); color: #f97316; }
.kpi-blue   { background: rgba(37, 99, 235, .12);  color: #2563eb; }
.kpi-green  { background: rgba(22, 163, 74, .12);  color: #16a34a; }
.kpi-purple { background: rgba(147, 51, 234, .12); color: #9333ea; }
.kpi-cyan   { background: rgba(8, 145, 178, .12);  color: #0891b2; }
.kpi-red    { background: rgba(220, 38, 38, .12);  color: #dc2626; }
.kpi-amber  { background: rgba(250, 204, 21, .15); color: #b45309; }
.kpi-slate  { background: rgba(100, 116, 139, .15); color: #64748b; }

/* --- Dashboard chart-canvas containers (fixed heights). --- */
.chart-box    { height: 230px; }
.chart-box-lg { height: 240px; }

/* --- Small fixed sizes pulled out of individual templates. --- */
.progress-thin  { height: 18px; }       /* attendance summary: thin progress bar */
.icon-2rem      { font-size: 2rem; }     /* attendance register: empty-state icon */
.icon-3rem      { font-size: 3rem; }     /* student detail: no-photo placeholder icon */
.student-photo  { max-height: 200px; }   /* student detail: photo */
.webcam-preview { max-height: 60vh; }    /* Aadhaar / photo capture video */
.col-w-40px     { width: 40px; }         /* timetable: tick column */
.col-w-160px    { width: 160px; }        /* timetable: start/end time columns */
.col-mw-160px   { min-width: 160px; }    /* attendance summary: name cell */
.col-w-3rem     { width: 3rem; }         /* student detail: row-number column */
.col-w-2-5rem   { width: 2.5rem; }       /* enrol (package tab): tick column */
.col-w-42pct    { width: 42%; }          /* enrol (package tab): batch column */