/* ==========================================================================
   IGSS shared theme layer: dark mode, sidebar hide/unhide, live clock,
   accent color. Purely additive/visual — does not alter page functionality.
   Loaded from includes/theme_vars.php (--brand-color) alongside this file.
   ========================================================================== */

:root {
  --brand-color: #667eea;
  --brand-color-dark: #4c5a8f;
  --brand-color-rgb: 102, 126, 234;
}

/* ---- Dropdown values: bold and clearly visible ---- */
select,
select option {
  font-weight: 700 !important;
}

/* ---- Sidebar uses the school's configured theme color (School Info page) ---- */
#sidebar {
  background: linear-gradient(to bottom, var(--brand-color), var(--brand-color-dark)) !important;
}
aside.sidebar {
  border-left: 4px solid var(--brand-color);
}
aside.sidebar h2 {
  color: var(--brand-color);
}

/* ---- Toggle buttons (dark mode + sidebar) ---- */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  margin-right: 0.35rem;
  border-radius: 4px;
  color: inherit;
  vertical-align: middle;
}
.theme-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.theme-toggle-btn:focus {
  outline: 2px solid var(--brand-color);
  outline-offset: 1px;
}
#theme-dark-toggle .icon-moon { display: inline; }
#theme-dark-toggle .icon-sun { display: none; }
html[data-theme="dark"] #theme-dark-toggle .icon-moon { display: none; }
html[data-theme="dark"] #theme-dark-toggle .icon-sun { display: inline; }

/* ---- Sidebar hide/unhide ---- */
body.sidebar-hidden #sidebar,
body.sidebar-hidden aside.sidebar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
}
body.sidebar-hidden .main-panel {
  width: 100% !important;
}
body.sidebar-hidden .main-content {
  grid-template-columns: 0 1fr !important;
}

/* ---- Dark mode ---- */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background-color: #14161a !important;
  color: #e4e6eb !important;
}
html[data-theme="dark"] .page-body-wrapper,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .main-panel {
  background-color: #14161a !important;
  color: #e4e6eb !important;
}
html[data-theme="dark"] .navbar {
  background-color: #1f2229 !important;
  border-color: #2a2e37 !important;
}
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] aside.sidebar {
  background: linear-gradient(to bottom, #1f2229, #14161a) !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .content-wrapper .card,
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .dropdown-menu {
  background-color: #1f2229 !important;
  color: #e4e6eb !important;
  border-color: #2a2e37 !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  border-color: #2a2e37 !important;
  color: #e4e6eb !important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input:not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #262a33 !important;
  color: #e4e6eb !important;
  border-color: #363b46 !important;
}
html[data-theme="dark"] a {
  color: #8ab4f8;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ---- Live clock (structural styling already provided by each page's own
   badge/date classes — this just ensures visibility if used standalone) ---- */
.live-clock {
  white-space: nowrap;
}