/* public/css/custom.css */
/* Global typography and layout scale */
html{ scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
  color: #1f2937;
  max-width: 100%;
  overflow-x: hidden; /* prevent page-wide horizontal scroll on small screens */
}
h1 img, h2 img, h3 img, img, svg, video, canvas{ max-width: 100%; height: auto; }
h1{ font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h2{ font-size: clamp(1.4rem, 3vw, 2rem); }
h3{ font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4, .h4{ font-size: clamp(1.125rem, 2.1vw, 1.25rem); }
h5, .h5{ font-size: clamp(1.05rem, 1.9vw, 1.125rem); }
h6, .h6{ font-size: clamp(0.95rem, 1.6vw, 1rem); }

/* Cards & buttons */
.card{ border-radius: .5rem; border-color: #e5e7eb; }
.card.shadow-sm{ box-shadow: 0 6px 18px rgba(0,0,0,.06) !important; }
.btn{ font-weight: 600; }
.btn-primary, .btn-success{ box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* Forms */
.form-control{ border-radius: .4rem; }
.form-label{ font-weight: 600; color: #374151; }

/* Tables */
.table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table thead th{ white-space: nowrap; }
/* Mobile-first table overflow for pages that didn't wrap tables */
@media (max-width: 576px){
  /* Allow horizontal scroll without breaking layout */
  .table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Keep long content from exploding layout; allow opt-in wrapping via .text-wrap/.text-break */
  .table > :not(caption) > * > *{ white-space: nowrap; }
  .table .text-wrap, .table .text-break{ white-space: normal !important; }
}

/* ========== Report Form (screen only) ========== */
@media screen{
  /* Reduce school name on the on-screen report header only */
  .report-card .header-school .school-name{
    font-size: 2.1rem !important;
    line-height: 1.1;
    letter-spacing: .1px;
  }
  /* Slightly larger contact details for contrast */
  .report-card .header-school .school-meta{
    font-size: 1.05rem;
  }
}

/* Utilities */
.text-muted{ color: #6b7280 !important; }
.small{ font-size: .875rem !important; }
.table {
    margin-bottom: 0;
}

/* Reduce table row height across the app */
.table td, .table th {
    padding: 0.35rem 0.5rem; /* default ~.5rem -> slimmer */
    line-height: 1.25;       /* tighter than body 1.5 */
}

/* Extra compact tables */
.table-sm td, .table-sm th {
    padding: 0.25rem 0.4rem;
    line-height: 1.2;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6;
}

.card-header {
    background-color: #007bff;
    color: #fff;
}
/* Improve readability when contextual light backgrounds are used */
.card-header.bg-light,
.card-header.bg-white,
.card-header.bg-transparent,
.card-header.bg-success-subtle,
.card-header.bg-warning-subtle,
.card-header.bg-info-subtle,
.card-header.bg-primary-subtle,
.card-header.bg-secondary-subtle {
    color: var(--bs-body-color, #212529) !important;
}

.card-body {
    padding: 1.25rem;
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
}

/* Extra-extra small buttons for tight table actions */
.btn-xxs{
  font-size: 0.78rem; /* smaller than .btn-sm */
  padding: 0.15rem 0.4rem;
  line-height: 1.1;
  border-radius: 0.2rem;
}

/* ===== Teacher Streams Page UI polish ===== */
.teacher-streams-page .card-item{
  background: #fff;
  border: 4px solid var(--brand-green); /* brand green border */
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.teacher-streams-page .card-item:hover{
  border-color: var(--brand-green-dark); /* darker brand on hover */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.teacher-streams-page .stream-chip,
.teacher-streams-page .subject-chip{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .8rem; font-weight: 700;
  background: #ecfdf5; color: #065f46; border: 1px solid #d1fae5;
}
.teacher-streams-page .subject-chip{ background:#eff6ff; color:#1e40af; border-color:#dbeafe; }

/* Hide compact stats bar on small screens (phones) */
@media (max-width: 576.98px){
  .teacher-streams-page .stats-compact{ display: none !important; }
}

/* Compact subject allocation cards */
.teacher-streams-page #subject-allocations-cards .card-item{
  padding: .5rem .6rem !important;
}
.teacher-streams-page #subject-allocations-cards .fw-semibold{
  font-size: .98rem;
}
.teacher-streams-page #subject-allocations-cards .small{
  font-size: .78rem;
}
.teacher-streams-page #subject-allocations-cards .btn-xxs{
  padding: .12rem .36rem; font-size: .77rem; border-radius: .2rem;
}
@media (max-width: 576.98px){
  .teacher-streams-page #subject-allocations-cards .fw-semibold{ font-size: .94rem; }
  .teacher-streams-page #subject-allocations-cards .small{ font-size: .75rem; }
}
/* List view for subject allocations */
.teacher-streams-page #subject-allocations-cards.list-view > [class*='col-']{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.teacher-streams-page #subject-allocations-cards.list-view .card-item{
  padding: .5rem .6rem !important;
}

/* Alternating light backgrounds for card grids */
.teacher-streams-page #ct-streams-cards > [class*='col-']:nth-child(odd) .card-item{
  background: #f3fdf7; /* very light green tint */
}
.teacher-streams-page #ct-streams-cards > [class*='col-']:nth-child(even) .card-item{
  background: #ffffff;
}
.teacher-streams-page #subject-allocations-cards > [class*='col-']:nth-child(odd) .card-item{
  background: #f3fdf7; /* very light green tint */
}
.teacher-streams-page #subject-allocations-cards > [class*='col-']:nth-child(even) .card-item{
  background: #ffffff;
}

/* Teacher select columns: readable width on small screens */
.teacher-cell .input-group{ flex-wrap: nowrap; }
@media (max-width: 576px){
  .teacher-cell{ min-width: 200px; }
  .teacher-cell .form-select{ min-width: 180px; }
}
@media (min-width: 577px) and (max-width: 768px){
  .teacher-cell{ min-width: 180px; }
  .teacher-cell .form-select{ min-width: 140px; }
}

/* Keep delete icon visible and compact inside teacher cells */
.teacher-cell .delete-teacher-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .3rem; /* tighter than .btn-sm */
  line-height: 1;
  flex: 0 0 auto; /* don't shrink */
}
.teacher-cell .delete-teacher-btn i{ font-size: .85rem; }
@media (max-width: 576px){
  .teacher-cell .delete-teacher-btn{
    width: 26px; min-width: 26px; height: 26px; /* fixed tap target */
  }
  .teacher-cell .delete-teacher-btn i{ font-size: .78rem; }
}

/* Students search UI */
.search-card .form-check-input {
    width: 1.05rem; height: 1.05rem;
}
.search-card .form-check-label { font-weight: 500; }
.search-card .form-label { font-weight: 600; color: #344767; }
.search-card #studentSearch { background: #f9fff9; }
.search-card .search-input-highlight {
    background-color: #eef9f1;
    border-color: #cbead8;
}
.search-card .search-options .form-check-label {
    color: #0c2d57;
}
.search-card hr { border-top-color: #edf2f7; }
.search-result .card { border-color: #e9ecef; }
.badge.bg-warning.text-dark { font-weight: 600; }
/* ========== Navigation & Layout Alignment ==========
   Centralized styles for top subnavs and (optional) sidebar */
:root{
  --header-height: 56px; /* updated dynamically by layout script */
  --sidebar-width: 200px; /* narrower sidebar width */
  --mobile-topbar-height: 0px; /* becomes >0 on small screens */

  /* Brand palette: unify greens */
  --brand-green: #027333;        /* base */
  --brand-green-dark: #015a2a;   /* hover/darker */
  --brand-green-deep: #0b4f2a;   /* active */
  --brand-green-contrast: #ecfdf5; /* light text on green */
  --brand-green-accent: #9ae6b4; /* accents/borders */

  /* Subnav theme (uses brand) */
  --subnav-bg: var(--brand-green);
  --subnav-link-hover: rgba(255,255,255,0.15);
  --subnav-height: 44px; /* total subnav height (computed) */
  --subnav-row-h: 44px; /* per-row height for links */
  --subnav-font-size: 0.95rem; /* uniform subnav font size */
  --subnav-icon-size: 0.95rem; /* uniform subnav icon size */
  --subnav-max-width: 1280px;  /* cap subnav width on large screens */
  --subnav-x-padding: 0px;    /* horizontal padding inside subnav */
  /* Content side padding independent of subnav */
  --content-x-padding: 16px;
}

/* Applies only to appbar layout pages */
body.appbar{ padding-top: var(--header-height, 56px); }

/* Optional site header slot (currently unused) */
.app-header.navbar{
  position: fixed; top:0; left:0; right:0; z-index:1030;
  height: var(--header-height);
  background-color: var(--subnav-bg);
}

/* Secondary navigation bar below header */
.navbar.subnav{
  position: sticky; top: var(--header-height, 56px); z-index:1029;
  background-color: var(--subnav-bg);
  padding-top: 0; padding-bottom: 0; padding-left: .25rem; padding-right: .25rem;
  min-height: var(--subnav-row-h);
}
.navbar.subnav .nav-link{
  color:#fff !important; font-weight:600;
  height: var(--subnav-row-h); line-height: var(--subnav-row-h);
  padding: 0 .85rem; font-size: var(--subnav-font-size);
  display: inline-flex; align-items: center;
  white-space: nowrap; /* keep labels on one row */
}
.navbar.subnav .nav-link:hover{ background-color: var(--subnav-link-hover); }
.navbar.subnav .nav-link.bg-dark{ background-color: rgba(0,0,0,0.35) !important; }
.navbar.subnav .navbar-toggler{ border-color: rgba(255,255,255,0.35); }
.navbar.subnav .navbar-toggler-icon{ filter: invert(1) grayscale(100%); }
.navbar.subnav .nav-link i{ font-size: var(--subnav-icon-size); }
.navbar.subnav .navbar-nav .nav-item{ margin-right: 0; }
.navbar.subnav .navbar-nav .nav-item:last-child{ margin-right: 0; }

/* Horizontal scrolling support for dense menus */
  .navbar.subnav .navbar-nav{ flex-wrap: wrap; overflow: visible; row-gap: 0; column-gap: 0; }

/* Subnav container padding */
  .navbar.subnav .container-fluid{ padding-left: 0; padding-right: 0; }

/* Subnav fixed container + inner width cap */
.subnav-wrap{
  margin: 0; padding: 0;
  position: fixed;
  top: calc(var(--header-height, 56px) + var(--mobile-topbar-height, 0px));
  left: 0; right: 0;
  z-index: 1028;
}
.subnav-wrap, .subnav-wrap .navbar{ width: 100%; }

/* Override layout inline subnav background to use theme colors */
.subnav-wrap{ background: transparent !important; border-bottom: none !important; }
.subnav-wrap .navbar.subnav{
  max-width: var(--subnav-max-width);
  margin-left: auto; margin-right: auto;
  padding-left: var(--subnav-x-padding); padding-right: var(--subnav-x-padding);
}
/* Reserve space for the sidebar only when it is visible (desktop only) */
@media (min-width: 992px){
  .has-vertical .subnav-wrap{ left: var(--sidebar-width); right: 0; width: calc(100% - var(--sidebar-width)); }
}

/* Subnav "More" dropdown styling */
.navbar.subnav .nav-item.more-toggle > .nav-link{ display: inline-flex; align-items: center; gap: 6px; }
.navbar.subnav .dropdown-menu{ z-index: 1035; max-height: 70vh; overflow-y: auto; }

/* Small-screen visual tweaks: show button-like pills for links */
@media (max-width: 576px){
  .navbar.subnav .nav-link{ background-color: rgba(255,255,255,0.08); border-radius: 0; }
  .navbar.subnav .nav-link.bg-dark{ background-color: rgba(0,0,0,0.35) !important; }
}

/* Top navbar: shrink username/brand on small screens */
@media (max-width: 576px){
  #navbarDropdown{ font-size: .85rem !important; }
  .navbar .navbar-brand span{ font-size: .9rem; }
}

/* Large screens: distribute items to use full width */
@media (min-width: 992px){
  .navbar.subnav .navbar-nav{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 0;
    width: 100%;
  }
  .navbar.subnav .nav-item{ min-width: 0; }
  .navbar.subnav .nav-link{ justify-content: center; width: 100%; display: flex; }
}

/* Content helpers */
.page-section{ margin-top: 1rem; }

/* Subnav wrapper aligns with sidebar (handled above for lg+) */

/* Vertical sidebar: width and positioning below header */
.navbar-vertical{
  width: var(--sidebar-width) !important;
  position: fixed;
  top: var(--header-height, 56px);
  left: 0; bottom: 0;
}

/* Push content to align with sidebar when visible (desktop only) */
@media (min-width: 992px){
  .has-vertical .content{
    margin-left: var(--sidebar-width);
    padding-left: 0 !important; /* remove gap between sidebar and content */
  }
}

/* Ensure subnav sits flush to sidebar when inside content */
.has-vertical .content .navbar.subnav{ margin-left: 0; }

/* Responsive tweaks for subnav */
/* ========== Small-screen padding reductions ==========
   Tighten horizontal padding on phones to use more width */
@media (max-width: 576px){
  /* Remove subnav inner x padding on phones */
  :root{ --subnav-x-padding: 0px; }

  /* Reduce page content side padding */
  .content > main.container,
  .content > main.container-fluid,
  .content main.container,
  .content main.container-fluid,
  main.container,
  main.container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Also reduce padding for nested containers inside content (e.g., page sections) */
  .content .container,
  .content .container-sm,
  .content .container-md,
  .content .container-lg,
  .content .container-xl,
  .content .container-xxl,
  .content .container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Reduce Bootstrap grid gutters on phones */
  /* Keep explicit zero-gutter utilities intact */
  .row:not(.g-0):not(.gx-0):not(.gy-0){
    --bs-gutter-x: .375rem; /* ~6px total between cols */
    --bs-gutter-y: .375rem;
  }
}

/* Slightly snug on small tablets too */
@media (min-width: 577px) and (max-width: 768px){
  :root{ --subnav-x-padding: 0px; }
  .content > main.container,
  .content > main.container-fluid{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Slightly reduced gutters on small tablets */
  .row:not(.g-0):not(.gx-0):not(.gy-0){
    --bs-gutter-x: .5rem; /* default is 1.5rem; shrink to 0.5rem */
    --bs-gutter-y: .5rem;
  }
}
  /* Keep subnav in a single scrollable row up to lg */
  @media (max-width: 992px){
    :root{ --subnav-height: 44px; --subnav-row-h: 44px; --subnav-font-size: .9rem; --subnav-icon-size: 1rem; }
    .navbar.subnav{ min-height: var(--subnav-row-h); }
    .navbar.subnav .navbar-nav{
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto; overflow-y: hidden;
      gap: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .navbar.subnav .navbar-nav::-webkit-scrollbar{ display: none; }
    .navbar.subnav .nav-item{ flex: 0 0 auto; }
    .navbar.subnav .nav-link{
      height: var(--subnav-row-h); line-height: var(--subnav-row-h);
      padding: 0 .6rem; font-size: var(--subnav-font-size);
      border-radius: 0; /* solid tiles edge-to-edge */
      display: inline-flex; align-items: center; justify-content: center; width: 100%;
    }
    .navbar.subnav .nav-link i{ font-size: var(--subnav-icon-size); margin: 0 .35rem 0 0 !important; }
    .navbar.subnav .dropdown-toggle::after{ display: none; }
  }
  /* Extra compact on xs/sm: single row of 5 columns with icon over label */
  @media (max-width: 768px){
    :root{ --subnav-height: 56px; --subnav-row-h: 56px; --subnav-font-size: .82rem; --subnav-icon-size: 1.1rem; --subnav-gap: 6px; }
    .navbar.subnav{ min-height: var(--subnav-row-h); }
    .navbar.subnav .navbar-nav{
      display: grid !important;
      grid-template-columns: repeat(var(--subnav-cols, 5), minmax(0, 1fr));
      gap: 0;
      overflow: hidden; /* single row */
    }
    .navbar.subnav .nav-item{ min-width: 0; margin-right: 0; }
    .navbar.subnav .nav-link{
      justify-content: center; align-items: center; width: 100%;
      padding: 4px .25rem; font-size: var(--subnav-font-size);
      line-height: 1.05 !important; height: var(--subnav-row-h);
      flex-direction: column; text-align: center; white-space: normal !important;
      border-radius: 0; /* squared tiles */
    }
    .navbar.subnav .nav-link i{ font-size: var(--subnav-icon-size); margin: 0 0 2px 0 !important; }
    .navbar.subnav .nav-label{
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; text-overflow: ellipsis; max-width: 100%;
      font-size: .7rem; line-height: 1.05;
    }
    .navbar.subnav .nav-item.more-toggle > .nav-link{ flex-direction: column; }
  }
  @media (max-width: 576px){
    :root{ --subnav-height: 36px; --subnav-row-h: 36px; --subnav-font-size: .78rem; --subnav-icon-size: .9rem; }
    .navbar.subnav .navbar-nav{ gap: 0; }
    .navbar.subnav .nav-link{ padding: 0 .45rem; }
  }

/* Global mobile compaction for tighter fit */
@media (max-width: 576px){
  .card-body{ padding: .75rem; }
  .card-header{ padding: .5rem .75rem; }
  .btn{ padding: .4rem .6rem; font-size: .9rem; }
  .table{ font-size: .875rem; }
  .table td, .table th{ padding: .3rem .4rem; }
  .form-control{ padding: .4rem .6rem; font-size: .95rem; }
  .form-label{ font-size: .9rem; }
}

/* ========== Messages Module ========== */
.messages{
  /* Fill viewport minus header + subnav */
  min-height: calc(100vh - var(--header-height,56px) - var(--subnav-height,44px) - 48px);
}
.messages .messages-header{
  gap: .5rem;
}
.messages .messages-header h3{ margin: 0; }
.messages .messages-header .btn{ white-space: nowrap; }

/* Cards spacing and readability */
.messages .card{ border-radius: 12px; }
.messages .card + .card{ margin-top: 1rem; }
.messages .card-body{ padding: 1rem 1.25rem; }

/* Tables */
.messages .table th,
.messages .table td{ vertical-align: middle; }

/* ====== Compact card body utility for tighter content (e.g., tables) ====== */
.card-body.compact{
  padding: .75rem .75rem; /* reduce default 1.25rem to tighten top spacing */
}

/* ====== Form compaction + soft green inputs (scoped) ====== */
.form-compact .form-control,
.form-compact .form-select,
.form-compact textarea{
  padding: .35rem .5rem;
  font-size: .95rem;
}
.form-compact .form-group,
.form-compact .mb-3{ margin-bottom: .5rem !important; }

/* Tighter grid gutters inside compact forms */
.form-compact .row{
  --bs-gutter-x: .5rem; /* default 1.5rem */
  --bs-gutter-y: .5rem;
}

.form-soft-green .form-control,
.form-soft-green .form-select,
.form-soft-green textarea{
  background-color: #f9fff9; /* very light green */
  border-color: #cbead8;     /* soft green border */
}
.form-soft-green .form-control:focus,
.form-soft-green .form-select:focus,
.form-soft-green textarea:focus{
  background-color: #eef9f1;
  border-color: #8fd8b6;
  box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .15); /* teal-green glow */
}
.messages .table thead th{ font-weight: 700; }

/* Inbox list: subject truncation and tidy meta */
.messages .list-group-item > div > div:first-child{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: clamp(220px, 55vw, 720px);
}
.messages .list-group-item small.text-muted{ display: inline-block; margin-top: 2px; }

/* Polished inbox items */
.messages .message-item{ position: relative; border-left: 3px solid transparent; border-radius: 10px; }
.messages .message-item:hover{ background-color: #f8faf9; border-left-color: var(--brand-green-accent); }
.messages .message-item.is-unread{ background-color: #f6fffa; border-left-color: var(--brand-green); }
.messages .message-item .subject{ font-weight: 600; }
.messages .message-item.is-unread .subject{ font-weight: 700; }
.messages .status-dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-top: .45rem; flex: 0 0 auto; background: #d1d5db; }
.messages .status-dot.unread{ background: var(--brand-green); box-shadow: 0 0 0 2px #e6f9ef; }
.messages .status-dot.read{ background: #cbd5e1; }
/* Keyboard focus state for inbox items */
.messages .message-item:focus{ outline: 2px solid var(--brand-green-accent); outline-offset: 2px; background: #f2fffa; }

/* Message body block */
.messages pre{
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .75rem; color: #111827;
}

/* ========== Subnav Pages: Full-width content + larger fonts ========== */
/* Make any Bootstrap container inside the content area span full width
   whenever a subnav bar is present (layouts.appbar renders .subnav-wrap). */
.subnav-wrap + .content .container,
.subnav-wrap + .content .container-sm,
.subnav-wrap + .content .container-md,
.subnav-wrap + .content .container-lg,
.subnav-wrap + .content .container-xl,
.subnav-wrap + .content .container-xxl{
  max-width: 100% !important;
  width: 100% !important;
}

/* ========== Appbar layout: make all content containers full width and bump font ========== */
.content .container,
.content .container-sm,
.content .container-md,
.content .container-lg,
.content .container-xl,
.content .container-xxl,
.content .container-fluid{
  max-width: none !important; /* remove Bootstrap breakpoint caps */
  width: 100% !important;     /* fill the available content width */
  padding-left: 0 !important; /* remove side padding inside containers */
  padding-right: 0 !important;
}

.content{
  font-size: clamp(16px, 1.9vw, 18px);
  padding-left: 0;  /* use full-bleed by default */
  padding-right: 0;
}
.content .table{ font-size: 1rem; }
.content .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
.content .form-label{ font-size: 1rem; }

/* Readability bump on all subnav pages */
.subnav-wrap + .content{
  font-size: clamp(16px, 1.9vw, 18px);
  padding-top: var(--subnav-height, var(--subnav-row-h, 44px)); /* offset fixed subnav */
}
.route-home .subnav-wrap + .content{
  /* Reduce apparent top spacing on Home only (keeps subnav visible) */
  padding-top: calc(var(--subnav-height, var(--subnav-row-h, 44px)) - 6px) !important;
}
/* Tighten top padding inside the main container on Home */
.route-home .content > main.container-fluid{ padding-top: .25rem !important; }
.subnav-wrap + .content .table{ font-size: 1rem; }
.subnav-wrap + .content .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
.subnav-wrap + .content .form-label{ font-size: 1rem; }

/* Align content width with subnav on large screens */
@media (min-width: 992px){
  .subnav-wrap + .content > main.container-fluid{
    max-width: var(--subnav-max-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--content-x-padding) !important;
    padding-right: var(--content-x-padding) !important;
  }
}

/* Keep comfortable side padding on small screens */
@media (max-width: 576px){
  .subnav-wrap + .content{ font-size: 15px; }
}

/* Mobile: restore comfortable side padding on very small screens */
@media (max-width: 576px){
  .content,
  .content .container,
  .content .container-sm,
  .content .container-md,
  .content .container-lg,
  .content .container-xl,
  .content .container-xxl,
  .content .container-fluid{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* Reduce side gaps on boxed layout (small screens) */
@media (max-width: 576px){
  /* Tighten the default container padding inside layouts.app */
  body.boxed .container{ padding-left: 4px !important; padding-right: 4px !important; }
  /* Make login/register auth card span full width on phones */
  .auth-card{ max-width: 100% !important; }
  /* Trim extra padding around the auth background wrapper */
  .auth-bg{ padding-left: 4px !important; padding-right: 4px !important; }
}

/* (Removed turbo-frame wrapper; #app-view handles SPA content) */

/* Forms in compose: touch-friendly */
.messages .form-control,
.messages .form-select{ min-height: 42px; }
.messages .badge.rounded-pill{ padding: .4rem .6rem; font-weight: 700; }

/* Responsive tweaks */
@media (max-width: 576px){
  .messages .messages-header{ gap: .5rem; }
  .messages .messages-header .btn{ flex: 1 1 auto; }
  .messages .card-body{ padding: .875rem 1rem; }
}

/* ========== Header Brand Logo ========== */
/* Make the brand area above the sidebar fully utilized. */
body.appbar .navbar-top .navbar-logo{
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
}
/* Remove default right margin on brand link in this slot */
body.appbar .navbar-top .navbar-logo .navbar-brand{ margin-right: 0 !important; }
/* Scale the login image to fill the header height (keeping aspect). */
body.appbar .navbar-top .navbar-logo .brand-logo{
  height: calc(var(--header-height, 56px) - 12px);
  max-height: calc(var(--header-height, 56px) - 12px);
  width: auto; max-width: 100%;
  display: block; object-fit: contain;
}
/* Scale the school logo to fit header height on large screens */
body.appbar .navbar-top .school-logo{
  height: calc(var(--header-height, 56px) - 12px);
  max-height: calc(var(--header-height, 56px) - 12px);
  width: auto;
}
@media (max-width: 768px){
  body.appbar .navbar-top .school-logo{ height: 24px; width: auto; }
}

/* Brand school name color */
body.appbar .navbar-top .logo-text{ color: var(--brand-green) !important; }

/* Hide Ratibu brand logo on small screens */
@media (max-width: 768px){
  body.appbar .navbar-top .navbar-logo{ display: none !important; }
}

/* ========== Exams Page Readability Tweaks ========== */
.exams-page{
  /* Bump the base size for exam management screens */
  font-size: clamp(16px, 1.9vw, 18px);
}
.exams-page h2{ font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.exams-page h3{ font-size: clamp(1.35rem, 2.7vw, 1.7rem); }

/* Tables: slightly larger text and touch-friendly paddings */
.exams-page .table{ font-size: 1rem; }
.exams-page .table th,
.exams-page .table td{ padding: .6rem .75rem; }

/* Buttons and form controls on exams pages */
.exams-page .btn-sm{ font-size: .95rem; padding: .3rem .55rem; }
/* Tighter action buttons inside exams tables */
.exams-page .table .btn-sm{ font-size: .80rem; padding: .2rem .4rem; line-height: 1.2; }
.exams-page .form-label{ font-size: 1rem; }

/* Ensure content uses full available width (minus sidebar) */
.exams-page{ width: 100%; }
.has-vertical .content .exams-page{ margin-left: 0; }

/* Keep comfortable side padding on small screens */
@media (max-width: 576px){
  .exams-page{ font-size: 16px; }
}

/* ========== Button Loading Animation ==========
   Lightweight pulse around buttons while submitting */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(13,110,253,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(13,110,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}
.btn.is-loading{
  pointer-events: none;
  animation: pulseGlow 1.2s ease-out infinite;
}

/* Global compact tweaks for very small screens */
@media (max-width: 576px){
  /* Tighter layout padding when using the boxed layout */
  body.boxed{ padding-top: 56px !important; padding-bottom: 36px !important; }
  /* Slimmer footer */
  .footer{ padding: 8px 0 !important; font-size: .85rem !important; }
}

/* ========== Compact Stats Bar (Manage Classes) ========== */
.stats-compact{ font-size: .95rem; }
.stats-compact .fa, .stats-compact .fas{ opacity: .9; }
@media (max-width: 576px){
  .stats-compact{ font-size: .9rem; }
}

/* ========== Brand Table Styling (green header + zebra) ========== */
.brand-table thead th,
.brand-table thead td{
  background-color: var(--brand-green) !important;
  color: #fff !important;
  border-color: var(--brand-green-dark) !important;
}
.brand-table thead th{ vertical-align: middle; }

/* Soft green zebra striping */
.brand-table.table-striped tbody tr:nth-of-type(odd){
  background-color: #f2fbf6; /* very light green */
}
.brand-table.table-hover tbody tr:hover td,
.brand-table.table-hover tbody tr:hover th{
  background-color: #eaf7f0; /* hover tint */
}

/* Save navbar space on extra small screens: hide long brand text */
@media (max-width: 400px){
  .navbar-brand span{ display: none !important; }
}

/* ========== Compact Form Helpers (used on Add Students) ========== */
.form-compact .form-label{ font-size: .95rem; margin-bottom: .2rem; }
.form-compact .form-control,
.form-compact .form-select{ padding: .35rem .5rem; font-size: .95rem; }
.form-compact .invalid-feedback{ font-size: .85rem; }
.form-compact .row.g-2{ --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
/* Two-column field grid on large screens */
@media (min-width: 992px){
  .form-compact .field-grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .form-compact .field-grid > .row{ margin-left: 0; margin-right: 0; }
  .form-compact .grid-span-2{ grid-column: 1 / -1; }
  /* In grid items, stack label above input for better width usage */
  .form-compact .field-grid .row.g-2 > .col-md-4,
  .form-compact .field-grid .row.g-2 > .col-md-6{ flex: 0 0 100%; max-width: 100%; }
  .form-compact .field-grid .col-form-label.text-md-end{ text-align: left !important; }
}
/* Borrowed form aesthetics: green section title, tinted inputs */
.content > .container,
.content > .container-fluid{
  /* Standardize a tighter top gap for primary content wrappers */
  margin-top: .5rem !important;
}
.section-title{ color: var(--brand-green); font-weight: 800; letter-spacing: .2px; }
.tint{ background-color: var(--brand-green-contrast) !important; border-color: var(--brand-green-accent) !important; }
.tint:focus{ background-color: var(--brand-green-contrast) !important; border-color: var(--brand-green) !important; box-shadow: 0 0 0 .2rem rgba(2,115,51,.08); }
.form-compact label.required::after{ content: " *"; color: #dc3545; }
.form-compact .help-text{ font-size: .85rem; color: #6b7280; font-style: italic; }

/* Brand primary overrides: remove default Bootstrap blue */
:root{ --bs-primary: var(--brand-green); }
.btn-primary{ background-color: var(--brand-green) !important; border-color: var(--brand-green) !important; }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--brand-green-dark) !important; border-color: var(--brand-green-dark) !important; }
.form-control:focus, .form-select:focus{ border-color: var(--brand-green) !important; box-shadow: 0 0 0 .2rem rgba(2,115,51,.08) !important; }

/* ========== Top Bar Icons & Profile Dropdown ========== */
/* Ensure icons align nicely and are visible */
body.appbar .navbar-top .navbar-nav-icons{ align-items: center; }
body.appbar .navbar-top .navbar-nav-icons .nav-link{ color: var(--brand-green); }
body.appbar .navbar-top .navbar-nav-icons .nav-link:hover{ color: var(--brand-green-dark); }
body.appbar .navbar-top .navbar-nav-icons .feather{ width: 20px; height: 20px; }
#unread-badge{ font-size: 10px; padding: 2px 5px; line-height: 1; min-width: 18px; }

/* Minimal Font Awesome utilities for JS (i2svg) mode */
/* Ensure inline SVGs scale with font-size similar to FA CSS */
.svg-inline--fa{ display: inline-block; height: 1em; overflow: visible; vertical-align: -0.125em; }
.svg-inline--fa.fa-lg{ font-size: 1.3333333333em; line-height: .75em; vertical-align: -.225em; }
.svg-inline--fa.fa-2x{ font-size: 2em; }
.svg-inline--fa.fa-3x{ font-size: 3em; }
.svg-inline--fa.fa-4x{ font-size: 4em; }
.fa-fw{ width: 1.25em; text-align: center; }

/* Sticky form actions bar (used on Add Students) */
.form-actions-bar{ position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e5e7eb; padding: .5rem .75rem; }

/* Profile dropdown tidy and icon alignment */
body.appbar .dropdown-profile .nav-link,
body.appbar .dropdown-profile .dropdown-item{ display: flex; align-items: center; gap: .5rem; }
body.appbar .dropdown-profile .feather{ width: 18px; height: 18px; }
body.appbar .dropdown-profile .card-footer{ background: transparent; }

/* ========== SPA Progress Bar + Skeletons ========== */
#spa-progress{
  position: fixed; top: calc(var(--header-height, 0px) + var(--mobile-topbar-height, 0px)); left: 0; height: 3px; width: 0; opacity: 0;
  background: linear-gradient(90deg, var(--brand-green), #34d399, #60a5fa);
  z-index: 2000; transition: width .25s ease, opacity .25s ease; pointer-events: none;
}

#app-view.is-loading .skeleton{
  position: relative; overflow: hidden; background: #e5e7eb; color: transparent !important;
}
#app-view.is-loading .skeleton::after{
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.1s ease-in-out infinite;
}
.skeleton-text{ height: 1rem; border-radius: .25rem; }
.skeleton-rect{ border-radius: .5rem; }
@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* ========== Sidebar (Vertical Navbar) ========== */
:root{
  --sidebar-bg: var(--brand-green);
  --sidebar-text: var(--brand-green-contrast);
  --sidebar-hover: var(--brand-green-dark);
  --sidebar-active: var(--brand-green-deep);
  --sidebar-accent: var(--brand-green-accent);
}

/* Container and background */
.navbar-vertical{ background-color: var(--sidebar-bg) !important; box-shadow: 1px 0 0 rgba(0,0,0,0.06); }
.navbar-vertical .navbar-vertical-content{ background-color: var(--sidebar-bg); padding: .5rem; }

/* Section label & divider */
.navbar-vertical .navbar-vertical-label{
  color: var(--sidebar-text);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .06em;
  opacity: .9;
  margin: .25rem .25rem .35rem;
}
.navbar-vertical .navbar-vertical-line{
  border-color: rgba(255,255,255,0.25) !important;
  margin: .35rem .25rem .75rem;
}

/* Items */
.navbar-vertical .nav-item-wrapper{ margin: .2rem .2rem .35rem; }
.navbar-vertical .nav-link{
  color: var(--sidebar-text) !important;
  display: flex; align-items: center;
  padding: .45rem .55rem;
  border-radius: .45rem;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.navbar-vertical .nav-link:hover{ background-color: var(--sidebar-hover); color: var(--sidebar-text) !important; }
.navbar-vertical .nav-link:focus{ outline: none; box-shadow: 0 0 0 2px rgba(154,230,180,.35); }
.navbar-vertical .nav-link.active{
  background-color: var(--sidebar-active);
  color: var(--sidebar-text) !important;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
  font-weight: 700;
}

/* Icons & text */
.navbar-vertical .nav-link-icon{ color: var(--sidebar-text); margin-right: .4rem; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; min-width: 1.25rem; }
.navbar-vertical .nav-link-icon svg{ stroke: var(--sidebar-text); width: 1.1rem; height: 1.1rem; display: block; stroke-width: 2; }
.navbar-vertical .nav-link:hover .nav-link-icon svg{ stroke: #fff; }
.navbar-vertical .nav-link.active .nav-link-icon svg{ stroke: var(--sidebar-accent); }
.navbar-vertical .nav-link-text{ color: var(--sidebar-text); font-weight: 600; font-size: .98rem; }

/* Nested menus */
.navbar-vertical .collapse .nav{ padding-left: .25rem; margin-top: .25rem; }
.navbar-vertical .collapse .nav .nav-link{ border-radius: .35rem; padding: .4rem .55rem .4rem 1.3rem; opacity: .95; }
.navbar-vertical .collapse .nav .nav-link:hover{ background-color: rgba(255,255,255,0.08); }

/* Dropdown caret rotation */
.navbar-vertical .dropdown-indicator-icon{ transition: transform .2s ease; }
.navbar-vertical a[aria-expanded="true"] .dropdown-indicator-icon{ transform: rotate(90deg); }

/* Scrollbar host (Simplebar) */
.navbar-vertical .simplebar-content{ padding-right: .25rem; }

/* Small screens: keep contrast and touch targets */
@media (max-width: 576px){
  .navbar-vertical .nav-link{ padding: .4rem .5rem; border-radius: .4rem; }
  .navbar-vertical .nav-link-text{ font-size: .95rem; }
}
/* ========== Small Screens: Compact Top Bar (keep content) ========== */
/* Phones and small tablets: keep the top bar visible but compact */
@media (max-width: 768px){
  :root{ --header-height: 40px; --mobile-topbar-height: 0px; --sidebar-width: 120px; }
  body.appbar .navbar-top,
  body.appbar #navbarDefault{ display: flex !important; }
  .navbar-top{ min-height: var(--header-height); padding-top: 0; padding-bottom: 0; }
  /* Compact elements inside the top bar */
  .navbar-top .theme-control-toggle-label{ height: 26px !important; width: 26px !important; }
  .navbar-top img.rounded-circle{ width: 24px !important; height: 24px !important; }
  .navbar-top .logo-text{ font-size: .95rem !important; margin: 0; }
  /* Subnav stays slim */
  :root{ --subnav-row-h: 40px; --subnav-height: var(--subnav-row-h); }
  /* Ensure the custom mobile-topbar (if present) stays hidden */
  .mobile-topbar{ display: none !important; }
}

/* Very small devices: keep subnav slim and content tidy */
@media (max-width: 576px){
  :root{ --subnav-row-h: 36px; --subnav-height: var(--subnav-row-h); --header-height: 38px; --sidebar-width: 100px; }
  .subnav-wrap + .content{ font-size: 15px; }
  .content{ font-size: 15px; }
}

/* Minimal top bar shown only on small screens */
.mobile-topbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--mobile-topbar-height, 36px);
  background: #ffffff; border-bottom: 1px solid #e5e5e5;
  z-index: 1030; display: none;
}
.mobile-topbar .school-abbr{ color: var(--brand-green); font-weight: 800; letter-spacing: .5px; }
.mobile-topbar .nav-link{ color: var(--brand-green); }
.mobile-topbar .nav-link:hover{ color: var(--brand-green-dark); }
.btn[aria-expanded] .fa-chevron-down{ transition: transform .2s ease; }
.btn[aria-expanded="true"] .fa-chevron-down{ transform: rotate(180deg); }


/* Highlight consolidated exams on Manage Exams index */
.exams-page tr.ex-consolidated td { background-color: #fff7e6 !important; }
.exams-page tr.ex-consolidated:hover td { background-color: #ffefd6 !important; }

/* ========== Marks Entry: Mobile Readability & Name Width ==========
   Increase table font size on small screens and prevent long names
   from wrapping to multiple lines by truncating with ellipsis.
*/
@media (max-width: 576px){
  /* Boost readability */
  .marks-table thead th{ font-size: .95rem !important; }
  .marks-table tbody td{ font-size: 1rem !important; }

  /* Name column: single line ellipsis */
  .marks-table .name-col{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
  /* Fallback for legacy view where the Student column is 2nd */
  .marks-table td:nth-child(2),
  .marks-table th:nth-child(2){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
}

/* ========== Home Analysis Card: Delta Badge ==========
   Small inline chip next to metric labels indicating deviation */
.analysis-card .delta-badge{
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 3px 8px;
  background: #edf2f7; color: #1f2937; border-radius: 8px;
  font-weight: 500; font-size: .82rem; line-height: 1.05; /* keep number not bold */
}
.analysis-card .delta-badge .icon{ font-size: .98rem; font-weight: 900; line-height: 1; }
/* Color entire badge text by deviation type so number matches arrow */
.analysis-card .delta-badge.type-up{ color: #198754; }
.analysis-card .delta-badge.type-down{ color: #dc3545; }
.analysis-card .delta-badge.type-up .icon{ color: #198754; }
.analysis-card .delta-badge.type-down .icon{ color: #dc3545; }
.analysis-card .delta-badge.type-flat .icon{ color: #6c757d; }

/* ========== Theme Toggle Visibility ==========
   Show the icon that indicates the next theme (convert-to target).
   In light mode, show moon (switch to dark). In dark mode, show sun (switch to light). */
.theme-control-toggle-label{ display: inline-flex; align-items: center; justify-content: center; }
[data-bs-theme='light'] .theme-control-toggle-dark{ display: none !important; }
[data-bs-theme='dark'] .theme-control-toggle-light{ display: none !important; }

/* ========== Dark Mode Overrides (keep light mode unchanged) ========== */
[data-bs-theme='dark'] body{
  color: var(--bs-body-color, #eff2f6);
  background-color: var(--bs-body-bg, #0f111a);
}
[data-bs-theme='dark'] .subnav-wrap{
  background: var(--bs-body-bg, #0f111a);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
[data-bs-theme='dark'] .mobile-topbar{
  background: var(--bs-body-bg, #0f111a);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
[data-bs-theme='dark'] .card{
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
[data-bs-theme='dark'] .card.shadow-sm{ box-shadow: 0 8px 24px rgba(0,0,0,.55) !important; }
[data-bs-theme='dark'] .card-header{
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--bs-body-color, #eff2f6) !important;
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
[data-bs-theme='dark'] .card-header.bg-light,
[data-bs-theme='dark'] .card-header.bg-white,
[data-bs-theme='dark'] .card-header.bg-transparent,
[data-bs-theme='dark'] .card-header.bg-success-subtle,
[data-bs-theme='dark'] .card-header.bg-warning-subtle,
[data-bs-theme='dark'] .card-header.bg-info-subtle,
[data-bs-theme='dark'] .card-header.bg-primary-subtle,
[data-bs-theme='dark'] .card-header.bg-secondary-subtle{
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--bs-body-color, #eff2f6) !important;
}
[data-bs-theme='dark'] .table{
  color: var(--bs-body-color, #d1d5db);
}
[data-bs-theme='dark'] .table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,0.03);
}
[data-bs-theme='dark'] .table-bordered th,
[data-bs-theme='dark'] .table-bordered td{
  border-color: rgba(255,255,255,0.14);
}
[data-bs-theme='dark'] .analysis-card .row.g-2 > [class*='col-']{ background: rgba(255,255,255,0.06); }
[data-bs-theme='dark'] .analysis-card .delta-badge{ background: rgba(255,255,255,0.08); color: var(--bs-body-color, #e5e7eb); }
[data-bs-theme='dark'] .messages pre{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: var(--bs-body-color, #eff2f6);
}

/* ========== Top Appbar: Force Black Background (both modes) ========== */
[data-bs-theme='dark'] body.appbar .navbar-top,
[data-bs-theme='dark'] body.appbar #navbarDefault{
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
/* Make topbar text/icons readable on black (dark mode only) */
[data-bs-theme='dark'] body.appbar .navbar-top .nav-link,
[data-bs-theme='dark'] body.appbar .navbar-top .navbar-brand,
[data-bs-theme='dark'] body.appbar .navbar-top .logo-text{
  color: #ffffff !important;
}
[data-bs-theme='dark'] body.appbar .navbar-top .nav-link:hover{ color: #e5e7eb !important; }
/* Keep warning (sun/moon) accent visible */
[data-bs-theme='dark'] body.appbar .navbar-top .theme-control-toggle-label .text-warning{ color: #ffc107 !important; }


/* ===== Fees ? Structures: avoid overlap when sidebar visible (lg+) ===== */
@media (min-width: 992px){
  html.has-vertical body.ctx-fees [data-finance-module="fees-structures"]{
    margin-left: var(--vertical-nav-width, 260px) !important;
  }
}