/* Minimal, clean base. Keep this boring. Boring is stable. */

/* Theme-aware header/filter background */
:root, [data-bs-theme="light"] { --hl-header-bg: #052c65; }  /* dark navy */
[data-bs-theme="dark"]         { --hl-header-bg: #6ea8fe; }  /* soft blue */

/*
 * Project chart palette — anchored to the header navy (#052c65).
 * Used by ECharts via echarts.registerTheme('hl', ...) in charts.js.
 *
 * Attendance semantic colours come from the DB (t_attendance_cats.bgcolor)
 * and are embedded in API responses as meta.colours — not hard-coded here.
 */
:root {
  --hl-color-1: #1a56a0;   /* navy blue   — primary */
  --hl-color-2: #e07b39;   /* warm orange — contrast */
  --hl-color-3: #2e9e6b;   /* teal green  */
  --hl-color-4: #c0392b;   /* red         */
  --hl-color-5: #8e44ad;   /* purple      */
  --hl-color-6: #16a085;   /* sea green   */
  --hl-color-7: #d4a017;   /* amber       */
  --hl-color-8: #6c757d;   /* muted grey  */
}

html, body { height: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar-brand {
  font-weight: 600;
}

/* Navbar flips light in dark mode */
[data-bs-theme="dark"] nav.navbar {
  background-color: #ddd !important;
  --bs-navbar-color:              rgba(0, 0, 0, 0.65);
  --bs-navbar-hover-color:        rgba(0, 0, 0, 0.85);
  --bs-navbar-active-color:       #000;
  --bs-navbar-brand-color:        #000;
  --bs-navbar-brand-hover-color:  #000;
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] nav.navbar .btn-outline-light {
  --bs-btn-color:        #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-bg:     #212529;
  --bs-btn-hover-color:  #fff;
}

[data-bs-theme="dark"] nav.navbar .navbar-text {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Break DataTables out of the container to 90vw */
.dt-container {
  width: 90vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* DataTable row hover */
table.dataTable.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: var(--bs-primary-bg-subtle);
  background-color: var(--bs-primary-bg-subtle) !important;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  background-color: var(--hl-header-bg) !important;
  color: var(--hl-header-color) !important;
}

:root, [data-bs-theme="light"] { --hl-header-color: #fff; }
[data-bs-theme="dark"]         { --hl-header-color: #000; }

/* Bootstrap's .table-light and .bg-light are absolute and don't flip in dark
 * mode on their own — override them so they read as dark-surface equivalents. */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg:           #2b3035;
  --bs-table-color:        #dee2e6;
  --bs-table-border-color: #495057;
}

[data-bs-theme="dark"] .bg-light {
  background-color: #2b3035 !important;
  color:            #dee2e6 !important;
}

/* Attendance hover tooltip — uses Bootstrap CSS vars so it auto-adapts to dark mode */
.hl-att-tooltip {
  background:    var(--bs-body-bg);
  border:        1px solid var(--bs-border-color);
  border-radius: 6px;
  box-shadow:    0 4px 12px rgba(0,0,0,.15);
  padding:       8px 12px;
  font-size:     .8rem;
  min-width:     160px;
  color:         var(--bs-body-color);
}

/* Table context menu */
#dt-context-menu .dropdown-item:hover,
#dt-context-menu .dropdown-item:focus {
  background-color: var(--bs-primary-bg-subtle);
}

#dt-context-menu {
  display: none;
  position: fixed;
  z-index: 9998;
  min-width: 180px;
}

/* Student photo hover */
#face-hover {
  display: none;
  position: fixed;
  pointer-events: none;
  width: 120px;
  height: 120px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  z-index: 9999;
  background: var(--bs-body-bg);
}

#face-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pivot table layout */
table.pvtTable,
table.pvtUi {
  margin: auto;
}

/* Fix .pvtFilterBox positioning: PivotTable.js uses jQuery .position() to place the
   filter popup, which treats the <table> as the offset parent. CSS position:absolute
   needs to agree — so make pvtUi a real containing block. */
table.pvtUi {
  position: relative;
}

/* Pivot table cell background — match body in dark mode */
.pvtTable td {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Pivot table heading colours */
.pvtTable th {
  background-color: var(--hl-header-bg) !important;
  color: var(--hl-header-color) !important;
}

/* Export CSV button — matches btn-outline-secondary look without fighting DT's .dt-button */
.hl-export-btn {
  background: #fff;
  color: #6c757d;
  border: 1px solid #6c757d;
  border-radius: .375rem;
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.hl-export-btn:hover {
  background: #6c757d;
  color: #fff;
}
[data-bs-theme="dark"] .hl-export-btn {
  background: transparent;
  color: #adb5bd;
  border-color: #adb5bd;
}
[data-bs-theme="dark"] .hl-export-btn:hover {
  background: #adb5bd;
  color: #212529;
}

/* SearchPanes — hide sort buttons */
.dtsp-nameButton,
.dtsp-countButton {
  display: none !important;
}

/* SearchPanes — active filter indicator */
.dtsp-panesContainer .dtsp-searchPane.dtsp-has-filter {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}

/* SearchPanes — subtle card styling */
.dtsp-panesContainer .dtsp-searchPane {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0;
}
.card.mb-3.o-code-full-section {
    margin: 0 0 5rem !important;
}