/* th{
    background-color: #002f65 !important;
    color:white;
}
*/

:root {
  --brand-primary: #215663;
  --brand-secondary: #1b6b7a;
  --body-bg: #eef3f2;
}

body,
#page-wrapper {
  background-color: var(--body-bg) !important;
}

#wrapper {
  position: relative;
  background-color: var(--body-bg);
}

/* Sidebar should not overlap content: ensure page-wrapper has proper margin */
@media (min-width: 768px) {
  #page-wrapper {
    margin-left: 0 !important;
    margin-right: 260px !important;
  }
  .content-wrapper .sidebar {
    width: 260px !important;
  }
  .content-wrapper #page-wrapper {
    margin-right: 260px !important;
    margin-left: 0 !important;
  }
  .content-wrapper .sidebar .sidebar-nav {
    position: relative !important;
    overflow: visible !important;
  }
}

/* Sidebar text sizing */
.sidebar #side-menu>li>a,
.sidebar #side-menu .nav-second-level>li>a,
.sidebar #side-menu .nav-third-level>li>a {
  font-size: 15px;
}

/* Mobile sidebar: give the expanded submenu (sidebar-nav.min.js adds
   li.menu-open + ul.collapse.in when a section is opened) the brand
   color instead of blending into the rest of the sidebar. */
@media (max-width: 767px) {
  .sidebar #side-menu li.menu-open > .nav-second-level,
  .sidebar #side-menu li.menu-open > .nav-third-level {
    background: var(--brand-primary);
  }

  .sidebar #side-menu li.menu-open > .nav-second-level > li > a,
  .sidebar #side-menu li.menu-open > .nav-third-level > li > a {
    color: #fff;
  }

  .sidebar #side-menu li.menu-open > .nav-second-level > li > a:hover,
  .sidebar #side-menu li.menu-open > .nav-second-level > li > a:focus,
  .sidebar #side-menu li.menu-open > .nav-third-level > li > a:hover,
  .sidebar #side-menu li.menu-open > .nav-third-level > li > a:focus {
    background: var(--brand-secondary);
    color: #fff;
  }
}

/* Sidebar icon spacing */
.sidebar #side-menu>li>a>i {
  width: 20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-inline-end: 10px;
}

/* Sidebar brand logo (now lives inside the sidebar, above the menu).
   width:100% instead of a fixed px value so it always matches whatever
   the sidebar's current width actually is (260px expanded, 60px
   collapsed on desktop, the drawer width on mobile). */
.top-left-part {
  width: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.top-left-part a.logo {
  display: block;
  width: 100%;
}

.top-left-part a.logo b {
  width: 100%;
  height: auto;
  line-height: 1;
}

.top-left-part a.logo img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto;
}

/* Menu toggle (hamburger) moved to the right of the top bar, next to
   the profile menu, instead of the far left where the logo used to be. */
.navbar-menu-toggle {
  float: right;
  margin: 0;
}

.navbar-menu-toggle>li {
  float: left;
}

/* Top header items (view-mode toggle, notification bell, hamburger,
   profile menu) — the vendor theme centers a single icon glyph via
   line-height:60px, which works for the plain icon links but breaks
   for the profile item (a 50px avatar + name label), pushing it out
   of line with the rest and forcing an inline margin-top hack. Flex
   centering handles any content height uniformly instead, so every
   item shares the same top/bottom regardless of what's inside it. */
.navbar-top-links {
  display: flex;
  align-items: stretch;
}

.navbar-top-links>li {
  float: none;
  display: flex;
}

.navbar-top-links>li>a {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  line-height: normal;
}

.navbar-top-links .profile-pic {
  gap: 8px;
}

.navbar-top-links .profile-pic img {
  margin: 0;
}

.sidebar,
.sidebar .sidebar-nav.navbar-collapse {
  background: var(--brand-primary) !important;
}

/* cardx (shared page-title banner, application/views/components/cardx.php):
   text only, no fill or border — was a solid brand-primary block with
   white text. */
.cardx {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cardx-overlay {
  color: var(--brand-primary) !important;
}

.cardx-title,
.cardx-subtitle {
  color: var(--brand-primary) !important;
}

/* counter (shared dashboard stat tile, application/views/components/counter.php):
   a white card with a tinted icon square, the number, its label and an
   optional hint. The accent (icon tint) follows the tile's tone; a linked
   tile shows a small arrow. */
.counter-box {
  --counter-accent: var(--brand-primary);
  --counter-tint: rgba(33, 86, 99, 0.1);
  position: relative;
  display: flex;
  /* A narrow tile drops the text under the icon instead of squeezing the number. */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  height: 100%;
  padding: 16px 18px;
  text-align: start;
}

.counter-box-success { --counter-accent: #1e7d4f; --counter-tint: rgba(40, 167, 69, 0.13); }
.counter-box-warning { --counter-accent: #b8730b; --counter-tint: rgba(255, 165, 0, 0.17); }
.counter-box-danger { --counter-accent: #c0392b; --counter-tint: rgba(220, 53, 69, 0.12); }
.counter-box-info { --counter-accent: #1b6fa8; --counter-tint: rgba(23, 140, 200, 0.13); }
.counter-box-muted { --counter-accent: #6c757d; --counter-tint: rgba(108, 117, 125, 0.13); }

.counter-box-iconwrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--counter-tint);
  color: var(--counter-accent);
}

.counter-box-icon {
  display: block;
  margin: 0;
  font-size: 22px;
  line-height: 1;
  color: inherit;
}

.counter-box-body {
  flex: 1 1 96px;
  min-width: 0;
}

.counter-box-long .counter-box-count {
  font-size: 22px;
}

.counter-box-count {
  overflow-wrap: break-word;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #25333a;
  font-variant-numeric: tabular-nums;
}

.counter-box-label {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: #6c757d;
}

.counter-box-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--counter-accent);
}

.counter-box-go {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  font-size: 18px;
  color: #b5c0c6;
  transition: color 0.15s ease, transform 0.15s ease;
}

.counter-box-link:hover .counter-box-go,
.counter-box-link:focus .counter-box-go {
  color: var(--counter-accent);
  transform: translateX(-3px);
}

/* The tile adapts to the width of its own column (four across on a laptop is narrow), not to the screen. */
.counter-cell {
  container-type: inline-size;
}

@container (max-width: 229px) {
  .counter-box {
    gap: 6px 10px;
    padding: 12px 14px;
  }

  .counter-box-iconwrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .counter-box-icon {
    font-size: 18px;
  }

  .counter-box-body {
    flex-basis: 56px;
  }

  .counter-box-count {
    font-size: 22px;
  }

  .counter-box-long .counter-box-count {
    font-size: 18px;
  }
}

@container (max-width: 169px) {
  /* Too narrow to sit beside the icon: the text takes its own line. */
  .counter-box-body {
    flex-basis: 100%;
  }
}

/* grid (shared card-grid listing, application/views/components/grid.php)
   and table (shared datatable, application/views/components/table.php):
   minimalist white boxes, no colored panel headers/borders. */
/* Equal-height cards.
   The grid row is a wrapping flex container, so every column in a line is
   stretched to the tallest one and each card fills its column; floats
   would let cards of different heights snag on each other. */
.grid-cards {
  display: flex;
  flex-wrap: wrap;
}

.grid-cards::before,
.grid-cards::after {
  display: none;
}

.grid-cards > [class*="col-"] {
  display: flex;
}

.grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 20px 12px;
}

.grid-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Avatar slot: a fixed, square frame that is always reserved, whatever
   the picture inside is (portrait/landscape upload, default avatar,
   placeholder, still loading). The <img> only ever fills the frame, so
   its intrinsic aspect ratio can never change the card height. */
.grid-card-avatar-frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(var(--grid-avatar-size, 80px), 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  overflow: hidden;
  background: #eef3f2;
}

.grid-card-avatar-circle {
  border-radius: 50%;
}

.grid-card-avatar-square {
  width: 100%;
  border-radius: 10px;
}

.grid-card-avatar-frame .grid-card-avatar {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
}

.grid-card-avatar-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9aa5b1;
  font-size: calc(var(--grid-avatar-size, 80px) * 0.5);
}

/* Text: a fixed line budget (2 lines of name, 2 of details, extra text is
   clamped with an ellipsis and long unbroken words wrap), reserved even
   when the text is shorter, so name/details/actions line up on every card. */
.grid-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  height: 2.8em;
  margin: 0 0 4px;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.4;
  color: var(--brand-primary);
  font-weight: 700;
}

.grid-card-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  height: 3em;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.5;
  color: #6c757d;
  font-size: 13px;
}

/* A status pill in the details must not stretch its line past the
   reserved line height (the default pill padding would push the second
   line out of the fixed 2-line box). */
.grid-card-subtitle .badge-pill {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.6;
  vertical-align: top;
}

.grid-card-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
}

.grid-card-actions .btn {
  margin: 3px;
}

.grid-card-link {
  color: inherit;
  text-decoration: none;
}

.grid-card-link:hover,
.grid-card-link:focus {
  color: inherit;
  text-decoration: none;
}

/* Both empty states are sized/centred boxes, never a full-width bar: grid-empty's own wrapper
   (.grid-empty-wrap) centres it within the flex grid row; table-empty sits inside a <td> whose
   text-align:center (see .ui-table td) centres this inline-block box within the full-width cell. */
.grid-empty-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.grid-empty,
.table-empty {
  display: inline-block;
  max-width: 360px;
  margin: 20px auto;
  text-align: center;
  padding: 20px 24px;
  color: #6c757d;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* formModal (shared add/edit popup, application/views/components/form_modal.php):
   minimalist — white header, primary-color title, no heavy fill or
   shadow, light rounded inputs. Distinct from the older modalx()
   (colored header, free-form body_html) used by pre-existing pages. */
.formx-shell {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}

.formx-header {
  background: #fff;
  border-bottom: 1px solid #eef0f2;
  padding: 18px 24px;
}

.formx-header .modal-title {
  color: var(--brand-primary);
  font-weight: 700;
  margin: 0;
}

.formx-close {
  color: #9aa5b1;
  opacity: 1;
  text-shadow: none;
}

.formx-close:hover,
.formx-close:focus {
  color: var(--brand-primary);
}

.formx-body {
  padding: 22px 24px;
}

.formx-field label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
  display: block;
}

.formx-field .form-control {
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  box-shadow: none;
}

.formx-field .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(33, 86, 99, 0.12);
}

.formx-required {
  color: #dc3545;
}

.formx-help {
  color: #8a94a3;
  font-size: 12px;
  margin-top: 4px;
}

.formx-footer {
  border-top: 1px solid #eef0f2;
  padding: 16px 24px;
}

.formx-btn-submit {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.formx-btn-submit:hover,
.formx-btn-submit:focus {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #fff;
}

/* Shared action buttons (Ui_components::actionButtons()) — small
   circular icon buttons used identically in a table cell's options
   column and a grid card's actions area, so switching view modes never
   changes how an action looks. */
.action-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef2f3;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.action-btn:hover,
.action-btn:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.action-btn-default,
.action-btn-primary {
  background: rgba(33, 86, 99, 0.1);
  color: var(--brand-primary);
}

.action-btn-default:hover,
.action-btn-primary:hover {
  background: var(--brand-primary);
}

.action-btn-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.action-btn-danger:hover {
  background: #dc3545;
}

.action-btn-success {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.action-btn-success:hover {
  background: #28a745;
}

.action-btn-warning {
  background: rgba(255, 165, 0, 0.15);
  color: #b8860b;
}

.action-btn-warning:hover {
  background: #d99a06;
}

.grid-card-actions .action-btns {
  justify-content: center;
}

/* Shared status pill (Ui_components::badge()) — replaces raw Bootstrap
   .badge-info/.badge-danger chips with one soft-colored shape shared
   by table cells and grid card subtitles. */
.badge-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.badge-pill-default {
  background: rgba(33, 86, 99, 0.1);
  color: var(--brand-primary);
}

.badge-pill-primary {
  background: rgba(33, 86, 99, 0.1);
  color: var(--brand-primary);
}

.badge-pill-success {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
}

.badge-pill-danger {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.badge-pill-warning {
  background: rgba(255, 165, 0, 0.15);
  color: #b8860b;
}

/* Minimalist panels (Bootstrap .panel/.panel-heading, used across
   admin/teacher/student views for "new item" forms, notice boards,
   etc.) — no separate colored header bar or border, regardless of
   variant (.panel-info/.panel-danger/.panel-success/.panel-primary/
   .panel-warning/.panel-inverse/...). The heading text moves into the
   plain panel body, styled like cardx's title instead of a boxed bar. */
.panel,
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-green,
.panel-danger,
.panel-warning,
.panel-inverse,
.panel-black,
.panel-darkblue {
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.panel .panel-heading,
.panel-default .panel-heading,
.panel-primary .panel-heading,
.panel-info .panel-heading,
.panel-success .panel-heading,
.panel-green .panel-heading,
.panel-danger .panel-heading,
.panel-warning .panel-heading,
.panel-inverse .panel-heading,
.panel-black .panel-heading,
.panel-darkblue .panel-heading {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 20px 0;
}

.panel-heading .panel-title,
.panel-heading font,
.panel-heading font[color] {
  color: var(--brand-primary) !important;
  font-weight: 700;
}

.panel .panel-body {
  padding: 20px;
}

/* Shared search/filter bar (Ui_components::filterBar()) — sits right
   under a cardx() page title. Plain white strip, no card shadow of its
   own (it reads as part of the header area, not a separate box). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef0f2;
}

.filter-bar-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f8f8;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 220px;
  max-width: 100%;
  box-sizing: border-box;
}

.filter-bar-field i {
  color: #9aa5b1;
  font-size: 13px;
}

.filter-bar-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #333;
  width: 100%;
  min-width: 0;
}

.filter-bar-field-date {
  min-width: 170px;
}

.filter-bar-clear {
  border: none;
  background: transparent;
  color: #9aa5b1;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.filter-bar-clear:hover {
  color: var(--brand-primary);
}

/* Groups a few Bootstrap col-sm-* fields (e.g. an AJAX-swapped
   section+subject+button trio) into one inline row on desktop, while
   leaving them to stack one-per-row on mobile like every other
   col-sm-* field — unlike an inline style="display:flex", which would
   force the inline layout at every screen size. */
@media (min-width: 768px) {
  .filter-inline-group {
    display: flex;
    flex-wrap: wrap;
  }

  /* Filter forms: spread the fields (and the submit button) evenly across
     the full width of the filter box, regardless of how many fields the
     page has or whether their col-sm-* widths add up to 12. */
  .filter-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .filter-form-row > [class*="col-sm-"],
  .filter-form-row > .filter-inline-group > [class*="col-sm-"] {
    flex: 1 1 0;
    float: none;
    width: auto;
    min-width: 0;
  }

  /* AJAX-swapped field groups (e.g. #subject_holder) join the parent's
     flex row directly so their fields share the same even distribution. */
  .filter-form-row > .filter-inline-group {
    display: contents;
  }
}

@media (max-width: 767px) {

  .filter-bar-field,
  .filter-bar-field-date {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* Table/grid view-mode toggle (top_header's show_view_toggle + a page
   built with Ui_components::dualView()). Table view is the default;
   body.grid-view-active flips which wrapper is visible. Pure
   show/hide — the hidden one stays rendered so its DataTables
   instance (if any) doesn't need to be destroyed/recreated. */
.view-mode-grid {
  display: none;
}

body.grid-view-active .view-mode-table {
  display: none;
}

body.grid-view-active .view-mode-grid {
  display: block;
}

/* Grid view: strip the page-level white box that wraps a dual-view,
   so the cards float directly on the page background. The padding
   pairs with the .row's negative gutters to keep card columns aligned
   with the surrounding content. */
body.grid-view-active .white-box:has(> .view-mode-grid) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 15px 30px;
}

.view-mode-toggle {
  cursor: pointer;
}

/* Desktop/tablet: sidebar flush against the right edge, full height,
   no gap/margin/rounded-card look — overriding the theme's RTL sheet,
   which floats it with margin:20px and border-radius. The vendor
   sheet's own #page-wrapper/.footer offsets are inconsistent between
   its two competing RTL rule blocks, so these are redeclared here too
   rather than patched in place. */
@media (min-width: 768px) {
  .sidebar {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: auto !important;
    width: 260px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    z-index: 900 !important;
  }

  #page-wrapper {
    margin: 0 260px 0 0 !important;
  }

  .footer {
    right: 260px !important;
    left: 0 !important;
  }

  .content-wrapper .sidebar {
    width: 60px !important;
  }

  .content-wrapper #page-wrapper {
    margin-right: 60px !important;
    margin-left: 0 !important;
  }

  .content-wrapper .footer {
    right: 60px !important;
    left: 0 !important;
  }

  /* Circular collapse/expand button, pinned to the sidebar's inner
      (left) edge so it visually belongs to the sidebar rather than the
      top bar. Straddles the sidebar/content boundary. */
  .sidebar-collapse-btn {
    position: fixed;
    top: 18px;
    right: 243px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--brand-primary);
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 1100;
    transition: right 0.3s ease;
  }

  .sidebar-collapse-btn i {
    line-height: 34px;
  }

  .sidebar-collapse-btn:hover,
  .sidebar-collapse-btn:focus {
    background: #ffffff;
    color: var(--brand-secondary);
  }

  .content-wrapper .sidebar-collapse-btn {
    right: 43px;
  }
}

/* Mobile: sidebar becomes a right-side slide-in drawer instead of the
   theme's default height-collapse. Toggled by adding/removing
   body.sidebar-open (see scripts.php). */
@media (max-width: 767px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 260px;
    max-width: 85%;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar .sidebar-nav.navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.sidebar-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
  }
}

#side-menu li a {
  border-left-color: var(--brand-primary) !important;
}

#side-menu>li>a.active,
#side-menu>li>a:hover,
#side-menu>li>a:focus,
#side-menu ul>li>a.active,
#side-menu ul>li>a:hover {
  color: white !important;
}

.sidebar #side-menu .user-pro>a {
  background: var(--brand-primary) !important;
}

.chart-responsive-bar {
  position: relative;
  width: 100%;
}

.chart-responsive-bar>div {
  width: 100% !important;
}

/* Shared chart component: mount never overflows its container */
.chart-mount {
  position: relative;
  overflow: hidden;
}

.chart-mount .apexcharts-canvas,
.chart-mount .apexcharts-svg {
  max-width: 100%;
  overflow: hidden;
}

.chart-mount .apexcharts-legend {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chart-mount .apexcharts-tooltip {
  max-width: 90%;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {

  /* Less wasted edge space on phones: theme defaults are 25px on both
     .container-fluid and .white-box, stacking to 50px per side. */
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .white-box {
    padding: 15px;
  }

  /* Notification bell dropdown (top_header.php): the vendor RTL sheet
     hardcodes width:310px + margin-left:-123px, calibrated for a wide
     desktop navbar. On a phone that runs off the edge of the screen
     (cut off or forces horizontal scroll). Pin it to the viewport
     instead of the trigger's position. */
  .navbar-top-links .dropdown-alerts {
    position: fixed !important;
    top: 60px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Grid cards: one per row on mobile instead of the cramped 2-up
     default (col-xs-6), regardless of whatever other large/medium/small
     column classes a given grid() call also sets. (This comment used to
     contain a literal star-slash, which closed it early and made the
     browser drop the rule below.) */
  [class*="col-xs-6"]:has(> .grid-card) {
    width: 100%;
    float: none;
  }

  /* Even at full width, keep the card itself compact rather than
     stretching to the desktop padding — a full-width card with 20px/12px
     padding reads as oversized on a phone. */
  .grid-card {
    padding: 12px 14px;
  }

  /* Dashboard counters: a horizontally-scrollable strip instead of
     stacking full-width (col-xs-12) one under another, which burns a
     lot of vertical space once there are more than 2-3 of them. */
  .row:has(> [class*="col-"] > .counter-box) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-left: 0;
    margin-right: 0;
  }

  .row:has(> [class*="col-"] > .counter-box) > [class*="col-"] {
    flex: 0 0 62%;
    max-width: 62%;
    width: auto;
  }

  .counter-box {
    gap: 10px;
    padding: 12px 14px;
  }

  .counter-box-iconwrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .counter-box-icon {
    font-size: 18px;
  }

  .counter-box-count {
    font-size: 22px;
  }

  /* Action-button touch targets: 30px is tight to tap accurately;
     bump slightly on touch-sized viewports without changing desktop
     density. */
  .action-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  /* Sidebar collapse button arrow rotation */
  .sidebar-collapse-btn .fa-angle-right {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  body.content-wrapper .sidebar-collapse-btn .fa-angle-right {
    transform: rotate(180deg);
  }
}

/* ===== Login Page ===== */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #215663 0%, #1b6b7a 50%, #215663 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  padding: 20px;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  width: 100%;
  max-width: 420px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-header {
  background: linear-gradient(135deg, #215663 0%, #1b6b7a 100%);
  padding: 40px 30px 30px;
  text-align: center;
}

.login-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.login-title {
  color: #fff;
  margin-top: 15px;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-top: 5px;
  margin-bottom: 0;
}

.login-body {
  padding: 35px 30px;
}

.login-body .input-group-text {
  width: 48px;
  text-align: center;
  font-size: 1rem;
}

.login-body .form-control {
  border: 1px solid #e1e5ea;
  padding: 14px 20px;
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-body .form-control:focus {
  border-color: #215663;
  box-shadow: 0 0 0 3px rgba(33, 86, 99, 0.12);
}

.login-body .input-group {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.login-footer {
  padding-top: 20px;
}

.login-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .login-wrapper {
    padding: 15px;
  }

  .login-body {
    padding: 25px 20px;
  }

  .login-header {
    padding: 30px 20px 25px;
  }

  .login-title {
    font-size: 1.3rem;
  }
}

/* ===== Login Page ===== */
html,
body {
  height: 100%;
}

body {
  background-color: #eef3f2;
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
}

#wrapper.login-register {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: #eef3f2;
  overflow: hidden;
}

.login-glow {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.login-glow-a {
  top: -160px;
  right: -140px;
  background: var(--brand-primary);
}

.login-glow-b {
  bottom: -180px;
  left: -160px;
  background: var(--brand-secondary);
}

.login-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 18px;
}

.login-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  padding: 40px 32px;
  text-align: center;
  animation-duration: .5s;
}

.login-card form {
  border-radius: 14px;
  overflow: hidden;
}

.login-logo {
  max-width: 180px;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

.login-title {
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 4px;
}

.login-subtitle {
  color: #8a94a3;
  font-size: 13px;
  margin: 0 0 26px;
}

.login-field {
  position: relative;
  margin-bottom: 16px;
  text-align: right;
}

.login-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.login-field input {
  width: 100%;
  background-color: #f6f8f8;
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  color: #333;
  padding: 13px 44px 13px 16px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login-field input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(33, 86, 99, 0.12);
  background-color: #fff;
}

.login-field-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #9aa5b1;
  font-size: 15px;
  pointer-events: none;
  transition: color .15s ease;
}

.login-field input:focus~.login-field-icon {
  color: var(--brand-primary);
}

.login-field-toggle {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: #9aa5b1;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.login-field-toggle:hover,
.login-field-toggle:focus {
  color: var(--brand-primary);
  outline: none;
}

.login-submit {
  width: 100%;
  border: none;
  border-radius: 10px;
  background-color: var(--brand-secondary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 16px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.login-submit:hover,
.login-submit:focus {
  background-color: var(--brand-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(33, 86, 99, 0.25);
}

.login-submit:active {
  transform: translateY(1px);
}

.login-alert {
  text-align: right;
  margin-bottom: 18px;
  font-size: 13px;
  border-radius: 10px;
}

.login-forgot {
  display: block;
  text-align: left;
  margin: -6px 0 16px;
  font-size: 12.5px;
  color: #8a94a3;
  text-decoration: none;
  transition: color .15s ease;
}

.login-forgot:hover,
.login-forgot:focus {
  color: var(--brand-primary);
  text-decoration: none;
}

.login-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  color: #8a94a3;
  text-decoration: none;
  transition: color .15s ease;
  border-radius: 5px;
  padding: 4px 8px;
}

.login-back:hover,
.login-back:focus {
  color: var(--brand-primary);
  text-decoration: none;
  background-color: rgba(33, 86, 99, 0.08);
}

/* Vertically align notification bell with user dropdown in top header */
.navbar-top-links > li > a,
.top-header-bell a,
.profile-pic {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: 50px;
  line-height: normal;
}
.navbar-top-links.navbar-right > li {
  display: flex !important;
  align-items: center !important;
}
.top-header-bell a {
  margin-top: 0 !important;
  line-height: normal !important;
}
.top-header-bell .fa-bell {
  font-size: 18px;
}
.profile-pic img.img-circle {
  height: 36px;
  width: 36px;
  object-fit: cover;
}
.profile-pic b {
  vertical-align: middle;
}

/* ===== White-box spacing ===== */
.white-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Only the outermost white box carries the shadow */
.white-box .white-box {
  box-shadow: none;
}

.white-box:not(.grid-card):not(.counter-box) {
  padding: 30px;
}

/* Contain floated children (col-sm-* fields inside a plain .form-group,
   which isn't a .row/.form-horizontal and so never clears them) — without
   this the box collapses to just its padding and the fields hang out below
   it. A clearfix, not overflow:hidden, so nothing gets clipped. */
.white-box::after {
  content: "";
  display: table;
  clear: both;
}

/* Card-like white-box items (grid cards, dashboard counters, dashboard
   chart sections) lift on hover — the same shadow/movement treatment
   used by .service-card. Plain content containers (forms,
   page-wrapping sections) are excluded so they don't shift just
   because the cursor passes over them. */
.grid-card,
.counter-box,
.white-box:has(.chart-responsive-bar) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grid-card:hover,
.counter-box:hover,
.white-box:has(.chart-responsive-bar):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
  .white-box:not(.grid-card):not(.counter-box) {
    padding: 20px;
  }
}

/* ===== Modal forms — 2 fields per row + full-width action =====

   Four modal form patterns exist in the system:

   A. Old partials (#modal_ajax): form.form-horizontal sits INSIDE
      .modal-body; .form-group elements are direct children of the form;
      submit button lives inside a .form-group at the bottom.

   B. Component shells (components/modal.php, loaded via
      Ui_components::modalx()): form.form-horizontal WRAPS .modal-body +
      .modal-footer; .form-group elements are direct children of
      .modal-body; submit is in .modal-footer.

   C. Service selection modal (#serviceSelectionModal): same layout as B
      but the form has no form-horizontal class — matched by ID.

   D. Formx modals (components/form_modal.php, loaded via
      Ui_components::formModal()): already 2-per-row thanks to the
      Bootstrap grid (col-md-6 default, Ui_components::renderFormField).
      Field columns get an explicit gutter below (same values as A/B/C)
      so the padding is guaranteed rather than left to whatever the
      cascade resolves .col-* padding to. Only the footer submit button
      needs the full-width treatment beyond that. */

.formx-body .row > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 14px;
}


/* ---------- Flex container for field grids (A, B, C) ---------- */

:is(
  #modal_ajax .modal-body form.form-horizontal,
  form.form-horizontal:not(.formx-form) > .modal-body,
  form.form-horizontal:not(.formx-form) > .modalx-body,
  #service_selection_form > .modal-body
) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}


/* ---------- Field groups: 50% each (A, B, C) ---------- */

:is(
  #modal_ajax .modal-body form.form-horizontal,
  form.form-horizontal:not(.formx-form) > .modal-body,
  form.form-horizontal:not(.formx-form) > .modalx-body,
  #service_selection_form > .modal-body
) > .form-group:not(:has(button[type="submit"])) {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  margin: 0 0 14px !important;
}


/* ---------- Label above the field ---------- */

:is(
  #modal_ajax .modal-body form.form-horizontal,
  form.form-horizontal:not(.formx-form) > .modal-body,
  form.form-horizontal:not(.formx-form) > .modalx-body,
  #service_selection_form > .modal-body
) > .form-group:not(:has(button[type="submit"])) > .control-label {
  width: 100%;
  max-width: 100%;
  text-align: right;
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 4px;
  font-weight: 600;
}


/* ---------- Control wrapper / bare input — full width ---------- */

:is(
  #modal_ajax .modal-body form.form-horizontal,
  form.form-horizontal:not(.formx-form) > .modal-body,
  form.form-horizontal:not(.formx-form) > .modalx-body,
  #service_selection_form > .modal-body
) > .form-group:not(:has(button[type="submit"])) > :not(.control-label) {
  width: 100%;
  max-width: 100%;
  float: none;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}


/* ---------- Submit row: full width (pattern A — submit inside .form-group) ---------- */

:is(#modal_ajax .modal-body form.form-horizontal) > .form-group:has(button[type="submit"]) {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  margin: 6px 0 0 !important;
}

:is(#modal_ajax .modal-body form.form-horizontal) > .form-group:has(button[type="submit"]) > div {
  width: 100%;
  max-width: 100%;
  float: none;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

:is(#modal_ajax .modal-body form.form-horizontal) > .form-group:has(button[type="submit"]) .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
}


/* ---------- Footer: cancel above, full-width submit (B, C, D) ---------- */

:is(
  form.form-horizontal:not(.formx-form) > .modal-footer,
  form.form-horizontal:not(.formx-form) > .modalx-footer,
  #service_selection_form > .modal-footer,
  .formx-footer
) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:is(
  form.form-horizontal:not(.formx-form) > .modal-footer,
  form.form-horizontal:not(.formx-form) > .modalx-footer,
  #service_selection_form > .modal-footer
) > button[type="submit"],
.formx-footer .formx-btn-submit {
  width: 100%;
  float: none;
  min-height: 44px;
  margin: 0;
  border-radius: 12px;
  font-weight: 700;
}

:is(
  form.form-horizontal:not(.formx-form) > .modal-footer,
  form.form-horizontal:not(.formx-form) > .modalx-footer,
  #service_selection_form > .modal-footer
) > button:not([type="submit"]),
.formx-footer .formx-btn-cancel {
  align-self: flex-start;
  float: none;
  margin: 0;
}

/* ------------------------------------------------------------------
   Private messaging (admin / teacher / student) — two-pane messenger
   built by Ui_components::messenger(): conversation list + open pane.
   ------------------------------------------------------------------ */
.messenger {
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  height: calc(100vh - 250px);
  min-height: 480px;
  max-height: 780px;
}

.messenger-list {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid #e8eeee;
  min-width: 0;
}

.messenger-pane {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fafcfc;
}

.messenger-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px;
  padding: 8px 14px;
  background: #f6f8f8;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
}

.messenger-search i {
  color: #9aa5b1;
  font-size: 13px;
}

.messenger-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #333;
}

.messenger-list-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.messenger-conversations {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dim the pane while an AJAX request is in flight. */
.messenger.is-loading .messenger-pane {
  opacity: 0.55;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.messenger-conv {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0f4f4;
  transition: background 0.15s ease;
}

.messenger-conv:hover,
.messenger-conv:focus {
  background: #f4f8f8;
  color: #333;
  text-decoration: none;
}

.messenger-conv.active {
  background: #e6f0f1;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

[dir="rtl"] .messenger-conv.active,
.rtl .messenger-conv.active {
  box-shadow: inset -3px 0 0 var(--brand-primary);
}

.messenger-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
  background: #e1e5ea;
}

.messenger-conv-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.messenger-conv-top,
.messenger-conv-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.messenger-conv-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.messenger-conv-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: #9aa5b1;
}

.messenger-conv-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #7a8794;
}

.messenger-conv.unread .messenger-conv-name,
.messenger-conv.unread .messenger-conv-preview {
  color: #1d2b33;
  font-weight: 700;
}

.messenger-unread {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.messenger-role {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 16px;
  color: #fff;
  background: #9aa5b1;
}

.messenger-role-admin { background: #1b6b7a; }
.messenger-role-student { background: #e0a030; }
.messenger-role-teacher { background: #c9524a; }
.messenger-role-parent { background: #4f9a5b; }

.messenger-list-empty,
.messenger-empty-pane {
  margin: auto;
  padding: 40px 20px;
  text-align: center;
  color: #aab4bd;
}

.messenger-list-empty i,
.messenger-empty-pane i {
  display: block;
  margin-bottom: 12px;
  font-size: 56px;
  color: #cfd8dc;
}

.messenger-list-empty[hidden] {
  display: none;
}

/* Open thread / compose */
.messenger-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.messenger-pane-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #e8eeee;
}

.messenger-pane-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.messenger-pane-head-text b {
  font-size: 15px;
}

.messenger-pane-head-text .messenger-role {
  display: inline-block;
  align-self: flex-start;
}

.messenger-back {
  display: none;
  color: var(--brand-primary);
  font-size: 18px;
  padding: 4px 6px;
}

.messenger-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.messenger-day {
  align-self: center;
  margin: 6px 0;
}

.messenger-day span {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 10px;
  background: #e8eeee;
  color: #6b7885;
  font-size: 11px;
}

.messenger-bubble-row {
  display: flex;
}

/* Own messages sit on the reading-start side, replies on the other. */
.messenger-bubble-row.mine { justify-content: flex-start; }
.messenger-bubble-row.theirs { justify-content: flex-end; }

.messenger-bubble {
  max-width: 75%;
  padding: 9px 14px 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8eeee;
  color: #26333b;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.messenger-bubble-row.mine .messenger-bubble {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.messenger-bubble-name {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-secondary);
}

.messenger-bubble-text {
  font-size: 14px;
  line-height: 1.6;
}

.messenger-bubble-time {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  text-align: end;
  opacity: 0.65;
}

.messenger-reply {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid #e8eeee;
}

.messenger-reply textarea {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 140px;
  resize: none;
  padding: 9px 14px;
  border: 1px solid #e1e5ea;
  border-radius: 20px;
  background: #f6f8f8;
  outline: none;
  font-size: 14px;
}

.messenger-reply textarea:focus {
  border-color: var(--brand-secondary);
  background: #fff;
}

.messenger-send {
  flex: 0 0 auto;
  height: 42px;
  border-radius: 21px;
}

.messenger-compose-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.messenger-compose-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px;
}

.messenger-compose-body .control-label {
  display: block;
  margin-bottom: 5px;
}

.messenger-compose-recipient,
.messenger-compose-message {
  margin-bottom: 16px;
}

.messenger-compose-recipient .row > [class*="col-"] {
  margin-bottom: 8px;
}

.messenger-compose-message textarea {
  background-color: #f8f6f6;
  resize: vertical;
}

.messenger-compose-actions {
  padding: 12px 22px;
  background: #fff;
  border-top: 1px solid #e8eeee;
}

@media (max-width: 767px) {
  .messenger {
    height: calc(100vh - 210px);
    min-height: 420px;
    max-height: none;
  }

  /* One pane at a time: the list on the landing view, the open thread /
     compose form once a conversation is picked (with a back link). */
  .messenger-mode-home .messenger-pane,
  .messenger:not(.messenger-mode-home) .messenger-list {
    display: none;
  }

  .messenger-list {
    flex: 1 1 auto;
    border-inline-end: none;
  }

  .messenger-back {
    display: inline-block;
  }

  .messenger-bubble {
    max-width: 88%;
  }
}


/* Recipient picker (Ui_components::recipientPicker): search + checkbox
   list used by the messenger compose forms to pick several recipients. */
.recipient-picker {
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.recipient-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eef2f2;
}

.recipient-toolbar .recipient-search {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.recipient-toolbar .recipient-filter {
  flex: 0 0 180px;
  width: 180px;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  box-shadow: none;
}

.recipient-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #f6f8f8;
  border-bottom: 1px solid #eef2f2;
  font-size: 13px;
  color: #495057;
}

.recipient-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.recipient-clear {
  border: none;
  background: transparent;
  color: var(--brand-secondary);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}

.recipient-list {
  max-height: 260px;
  overflow-y: auto;
}

.recipient-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 14px;
  background: #eef3f2;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
}

.recipient-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid #f3f6f6;
  font-weight: 400;
  cursor: pointer;
}

.recipient-item[hidden],
.recipient-group[hidden],
.recipient-none[hidden] {
  display: none;
}

.recipient-item:hover {
  background: #f4f8f8;
}

.recipient-item input[type="checkbox"],
.recipient-select-all {
  flex: 0 0 auto;
  position: static;
  opacity: 1;
  width: 16px;
  height: 16px;
  margin: 0;
}

.recipient-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-item-meta {
  flex: 0 0 auto;
  color: #9aa5b1;
  font-size: 11px;
}

.recipient-none {
  padding: 24px;
  text-align: center;
  color: #9aa5b1;
}

.messenger-notice {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 18px;
  border-radius: 20px;
  background: #e5f3ea;
  color: #2e7d4f;
  font-size: 14px;
}

.messenger-notice i {
  margin-inline-end: 4px;
  font-size: 15px;
  color: inherit;
  display: inline;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .recipient-toolbar {
    flex-direction: column;
  }

  .recipient-toolbar .recipient-filter {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* formPage (shared full-page form, application/views/components/form_page.php,
   built by Ui_components::formPage()): titled sections of formx fields in a
   single white box, matching the formModal look. */
.formx-section + .formx-section {
  margin-top: 26px;
}

.formx-section-title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f2;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
}

.formx-section-title i {
  margin-inline-end: 8px;
  color: var(--brand-secondary);
}

.formx-section-body .row > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 14px;
}

.formx-page-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eef0f2;
  text-align: end;
}

@media (max-width: 767px) {
  .formx-page-footer .btn {
    width: 100%;
  }
}

/* Bulk student entry rows (admin/student_bulk) */
.bulk-entries-head {
  display: none;
  margin-bottom: 6px;
  color: #6c757d;
  font-size: 13px;
  font-weight: 600;
}

.bulk-entry {
  padding-top: 12px;
  border-top: 1px dashed #e1e5ea;
}

.bulk-entry .bulk-entry-remove {
  padding-top: 0;
}

.bulk-entry-remove .btn {
  width: 100%;
}

.bulk-count {
  color: #6c757d;
  font-size: 13px;
}

.bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 992px) {
  .bulk-entries-head {
    display: block;
  }

  .bulk-entries-head .row > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
  }

  .bulk-entry {
    padding-top: 0;
    border-top: none;
  }

  .bulk-entry .bulk-entry-label {
    display: none;
  }

  .bulk-entry-remove .btn {
    height: 34px;
  }
}


/* Notifications (application/views/components/notifications.php, window.Notify):
   stacked toasts fixed to the top-left of the page. */
.notify-stack {
  position: fixed;
  top: 72px;
  left: 20px;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}

.notify {
  --notify-color: var(--brand-primary);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  border-inline-start: 4px solid var(--notify-color);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  color: #26333b;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.notify.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.notify-success { --notify-color: #2e9e5b; }
.notify-warning { --notify-color: #e0a030; }
.notify-danger { --notify-color: #d9534f; }
.notify-info { --notify-color: var(--brand-secondary); }

.notify-icon {
  flex: 0 0 auto;
  color: var(--notify-color);
  font-size: 22px;
  line-height: 1.2;
}

.notify-body {
  flex: 1 1 auto;
  min-width: 0;
}

.notify-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.notify-message {
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.notify-close {
  flex: 0 0 auto;
  margin: -4px -2px 0;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: #9aa5b1;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.notify-close:hover,
.notify-close:focus {
  color: #26333b;
}

.notify-progress {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--notify-color);
  opacity: 0.35;
  transform-origin: left center;
  animation: notify-countdown linear forwards;
}

[dir="rtl"] .notify-progress {
  transform-origin: right center;
}

.notify:hover .notify-progress {
  animation-play-state: paused;
}

@keyframes notify-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 767px) {
  .notify-stack {
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}


/* Admin dashboard sections (admin/dashboard/admin_dashboard.php) */
.dashboard-section-title {
  margin: 26px 0 14px;
  color: var(--brand-primary);
  font-size: 17px;
  font-weight: 700;
}

.dashboard-section-title i {
  margin-inline-end: 8px;
  color: var(--brand-secondary);
}

.dashboard-section-title small {
  margin-inline-start: 8px;
  color: #9aa5b1;
  font-size: 12px;
  font-weight: 400;
}

.dashboard-empty {
  padding: 30px 10px;
  text-align: center;
  color: #9aa5b1;
  font-size: 13px;
}

.dashboard-empty-ok {
  color: #2e9e5b;
}

.dashboard-empty i {
  margin-inline-end: 4px;
}

.dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-list li {
  padding: 9px 4px;
  border-bottom: 1px solid #f0f4f4;
}

.dashboard-list li:last-child {
  border-bottom: none;
}

.dashboard-list a,
.dashboard-table a {
  color: var(--brand-primary);
  font-weight: 600;
}

.dashboard-more {
  margin-top: 8px;
  color: #9aa5b1;
  font-size: 12px;
}

.dashboard-count-badge {
  display: inline-block;
  min-width: 22px;
  margin-inline-start: 6px;
  padding: 0 7px;
  border-radius: 11px;
  background: #e05d4e;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

.dashboard-panel-link {
  float: left;
  font-size: 12px;
  font-weight: 400;
}

.dashboard-table {
  margin-bottom: 0;
}

.dashboard-table th {
  color: #6c757d;
  font-size: 12px;
  font-weight: 600;
  border-top: none;
}

.dashboard-table td,
.dashboard-table th {
  text-align: start;
}


/* Counter tiles that link somewhere (Ui_components::counter 'url' option) */
.counter-box-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.counter-box-link:hover,
.counter-box-link:focus {
  color: inherit;
  text-decoration: none;
}


/* Student portal (admin/students/student_portal.php) */
.portal-profile {
  text-align: center;
}

.portal-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 50%;
  background: #eef3f2;
}

.portal-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.portal-name {
  margin: 0 0 4px;
  color: var(--brand-primary);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.portal-id {
  color: #6c757d;
  font-size: 13px;
}

.portal-status {
  margin-top: 10px;
}

.portal-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7e6;
  color: #8a6d1d;
  font-size: 12px;
  line-height: 1.7;
  text-align: start;
}

.portal-note i {
  margin-inline-end: 4px;
}

.portal-details {
  display: grid;
  grid-template-columns: 38% 1fr;
  margin: 18px 0 0;
  text-align: start;
}

.portal-details dt,
.portal-details dd {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid #f0f4f4;
  font-size: 13px;
}

.portal-details dt {
  color: #6c757d;
  font-weight: 600;
}

.portal-details dd {
  color: #26333b;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.portal-finance-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.portal-finance-toolbar label {
  margin: 0;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.portal-finance-toolbar .form-control {
  max-width: 260px;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  box-shadow: none;
}


/* Filter form (Ui_components::filterForm(), components/filter_form.php).
   The look the selector pages used to set inline on every field. */
.filter-form-box {
  border: none;
}

.filter-form-row .control-label {
  margin-bottom: 5px;
}

.filter-form-row .form-control {
  background-color: #f8f6f6;
  text-align: center;
}

.filter-form-action .btn {
  width: 100%;
}

@media (min-width: 768px) {
  /* line the button up with the fields (which have a label above them) */
  .filter-form-action {
    margin-top: 20px;
  }
}


/* Controls inside grid cards (e.g. the per-student attendance status and note) */
.grid-card-actions .form-control {
  background-color: #f8f6f6;
}

.grid-card-actions .form-control + .form-control {
  margin-top: 8px;
}


.promotion-holder {
  padding-top: 30px;
  background-color: transparent;
}


/* Services pages (Ui_components::servicePage(), components/service_page.php):
   the tiles and their picker modal, formerly copied into a <style> block on
   each services page. */
.service-page {
  text-align: right;
}

.service-page > .row {
  margin-bottom: 10px;
}

.service-tile {
  margin-bottom: 12px;
}

.service-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 84px;
  padding: 14px 16px;
  border: none !important;
  border-radius: 16px;
  background: #fff !important;
  color: #565656 !important;
  direction: rtl;
  text-align: right;
  white-space: normal;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.service-card:hover,
.service-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  color: #565656 !important;
  background: #fff !important;
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-size: 16px;
}

.service-card-icon i {
  color: #fff !important;
}

.service-card-title {
  flex: 1;
  font-weight: 700;
  line-height: 1.35;
  color: #565656 !important;
}

.service-card * {
  color: #565656 !important;
}

/* Group headings on a services page with several groups, and the count badge on a tile */
.service-group-title {
  margin: 18px 0 12px;
  padding-right: 4px;
  font-weight: 700;
  color: var(--brand-primary);
}

.service-card {
  position: relative;
}

.service-card .service-card-badge {
  flex: 0 0 auto;
  min-width: 24px;
  border-radius: 12px;
  padding: 4px 8px;
  color: #fff !important;
}

.service-card .service-card-icon,
.service-card .service-card-icon * {
  color: #fff !important;
}

/* picker modal: right-aligned labels and soft selects */
.service-selection-modal .formx-field label,
.finance-selection-modal .formx-field label,
.financial-reports-selection-modal .formx-field label {
  display: block;
  text-align: right;
}

.service-selection-modal .formx-field .form-control,
.finance-selection-modal .formx-field .form-control,
.financial-reports-selection-modal .formx-field .form-control {
  margin-bottom: 10px;
  background-color: #f8f6f6;
  direction: rtl;
  font-weight: bold;
}


/* Weekly schedule (components/schedule.php) */
.schedule-caption {
  margin: 0 0 16px;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
}

.schedule-empty {
  padding: 24px;
  text-align: center;
  color: #9aa5b1;
}

.schedule-day {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #f0f4f4;
}

.schedule-day:first-child {
  border-top: none;
}

.schedule-day-name {
  flex: 0 0 90px;
  padding-top: 6px;
  color: var(--brand-primary);
  font-weight: 700;
}

.schedule-items {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-chip {
  display: inline-flex;
  flex-direction: column;
  min-width: 110px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  line-height: 1.5;
  text-align: center;
}

.schedule-chip small {
  opacity: 0.85;
}

@media (max-width: 575px) {
  .schedule-day {
    flex-direction: column;
    gap: 6px;
  }

  .schedule-day-name {
    flex-basis: auto;
    padding-top: 0;
  }
}

/* Attendance month grid (components/attendance_matrix.php) */
.attendance-matrix th,
.attendance-matrix td {
  text-align: center;
  vertical-align: middle;
}

.attendance-matrix thead th {
  background: var(--brand-primary);
  color: #fff;
}

.attendance-matrix .attendance-name-col {
  min-width: 150px;
  text-align: start;
  white-space: nowrap;
}

.attendance-empty {
  padding: 24px;
  color: #9aa5b1;
}

.att-present { color: #00a651; }
.att-absent { color: #ee4749; }
.att-late { color: #e0a030; }

.attendance-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  color: #6c757d;
  font-size: 12px;
}

/* Article box (components/article.php) */
.article-title {
  margin: 0 0 10px;
  color: var(--brand-primary);
  font-weight: 700;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.article-body {
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

/* Student dashboard hero (student/student_dashboard.php) */
.dash-hero {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dash-hero .portal-avatar {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  margin: 0;
}

.dash-hero-name {
  margin: 0 0 6px;
  color: var(--brand-primary);
  font-weight: 700;
}

/* Marks report (student/my_marks.php) */
.marks-exam-title {
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f2;
  color: var(--brand-primary);
  font-size: 17px;
  font-weight: 700;
}

.marks-card {
  height: calc(100% - 15px);
}

.marks-card h5 {
  margin: 0 0 10px;
  color: var(--brand-primary);
  font-weight: 700;
}

.marks-card .table {
  margin-bottom: 8px;
}

.marks-card th,
.marks-card td {
  text-align: center;
}

.marks-note {
  color: #6c757d;
  font-size: 12px;
}

.marks-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-around;
  text-align: center;
}

.marks-summary b {
  display: block;
  color: var(--brand-primary);
  font-size: 18px;
}

.marks-summary span {
  color: #6c757d;
  font-size: 12px;
}


/* Video page (student/video_detail.php) */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-attachments-title {
  margin: 16px 0 8px;
  color: var(--brand-primary);
  font-weight: 700;
}

.video-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-attachments img {
  width: 160px;
  border-radius: 8px;
}


/* Invoice-style forms (admin/finance/payments.php, edit_invoice.php): a document-like header band and
   a live running-total summary, built from the same fields the form already submits - no new inputs. */
.invoice-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary, #215663), var(--brand-secondary, #1b6b7a));
  color: #fff;
  padding: 18px 24px;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.invoice-head h3 {
  margin: 0;
  font-weight: 700;
}

.invoice-head .invoice-head-meta {
  font-size: 13px;
  opacity: .9;
}

.invoice-summary {
  background: #f8f9fa;
  border: 1px solid #e1e6e8;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
}

.invoice-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
  color: #495057;
}

.invoice-summary-row.total {
  border-top: 1px dashed #ced4da;
  margin: 8px -18px -14px;
  padding: 12px 18px 14px;
  background: rgba(0, 0, 0, .03);
  border-radius: 0 0 9px 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-primary, #215663);
}

.invoice-bill-to {
  margin-top: 8px;
  font-weight: 700;
  color: var(--brand-primary, #215663);
  min-height: 1.2em;
}

.invoice-bill-to:not(:empty)::before {
  content: "الفاتورة إلى: ";
  font-weight: 400;
  color: #6c757d;
}

/* Wizard stepper (admin/finance/payments.php): the theme ships bare .wizard-steps/.wizard-content
   rules (style.css/style-rtl.css) but nothing in the app used them before this page, so they're
   restyled here under .invoice-wizard rather than touched globally - a future second user of the
   bare classes still gets the theme's own plainer look, not this one. */
.invoice-wizard .wizard-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  background: none;
}

.invoice-wizard .wizard-steps > li {
  flex: 1 1 0;
  position: relative;
  padding: 0;
  background: none;
  text-align: center;
}

.invoice-wizard .wizard-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(50% + 24px);
  left: calc(-50% + 24px);
  height: 2px;
  background: #e1e6e8;
  z-index: 1;
  transition: background-color .25s ease;
}

.invoice-wizard .wizard-steps > li.done::after {
  background: var(--brand-secondary, #1b6b7a);
}

.invoice-wizard .wizard-steps > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: default;
}

.invoice-wizard .wizard-steps > li span {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #e1e6e8;
  background: #fff;
  color: #97a1ac;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.invoice-wizard .wizard-steps > li.current span {
  border-color: var(--brand-primary, #215663);
  background: var(--brand-primary, #215663);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.invoice-wizard .wizard-steps > li.done span {
  border-color: var(--brand-secondary, #1b6b7a);
  background: var(--brand-secondary, #1b6b7a);
  color: transparent;
}

.invoice-wizard .wizard-steps > li.done span::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 15px;
  color: #fff;
  position: absolute;
}

.invoice-wizard .wizard-steps > li h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #97a1ac;
  transition: color .25s ease;
}

.invoice-wizard .wizard-steps > li.current h4 {
  color: var(--brand-primary, #215663);
}

.invoice-wizard .wizard-steps > li.done h4 {
  color: #495057;
}

.invoice-wizard .wizard-steps > li h4 small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: #adb5bd;
}

.invoice-wizard .wizard-content {
  padding: 4px 2px 20px;
  margin-bottom: 10px;
  border: 0;
}

.invoice-wizard .wizard-pane {
  animation: invoiceWizardFadeIn .3s ease;
}

@keyframes invoiceWizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.invoice-wizard .formx-page-footer {
  border-top: 1px solid #eef1f3;
  padding-top: 18px;
  margin-top: 6px;
}

@media (max-width: 560px) {
  .invoice-wizard .wizard-steps > li h4 small {
    display: none;
  }
  .invoice-wizard .wizard-steps > li h4 {
    font-size: 11px;
  }
  .invoice-wizard .wizard-steps > li span {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .invoice-wizard .wizard-steps > li:not(:last-child)::after {
    top: 17px;
  }
}

/* Shared table (components/table.php): centred cells, brand-coloured header */
.ui-table th,
.ui-table td {
  text-align: center;
}

.ui-table-branded thead th {
  background: var(--brand-primary) !important;
  color: #fff;
}


.marks-grid {
  display: flex;
  flex-wrap: wrap;
}

.marks-grid::before,
.marks-grid::after {
  display: none;
}

.marks-grid > [class*="col-"] {
  display: flex;
}

.marks-grid .marks-card {
  flex: 1 1 auto;
  height: auto;
}


/* Teacher pages */
.notice-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--brand-secondary);
  color: #fff;
}

.notice-callout-icon {
  font-size: 26px;
}

.notice-callout-text {
  flex: 1 1 auto;
}

.notice-callout-close {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.students-tabs {
  padding-top: 16px;
}

.entry-heading {
  margin: 0 0 14px;
  color: var(--brand-primary);
  font-weight: 700;
}

.mark-field {
  margin-bottom: 8px;
  text-align: start;
}

.mark-field label {
  display: block;
  margin-bottom: 3px;
  color: #495057;
  font-size: 12px;
  font-weight: 600;
}

.grid-card-actions .form-control {
  text-align: center;
}

/* Profile summary card (Ui_components::profileCard) */
.profile-card-sub {
  color: #6c757d;
  overflow-wrap: anywhere;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef0f2;
}

.profile-fact dt {
  color: #6c757d;
  font-size: 12px;
  font-weight: 400;
}

.profile-fact dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Super admin: landing page content editor (super/landing_content.php) */
.lc-section {
  margin-bottom: 18px;
}

.lc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f2;
}

.lc-head .formx-section-title {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  padding: 0;
}

.lc-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.lc-rows {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.lc-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #e3ebee;
  border-radius: 10px;
  background: #f8fbfb;
}

.lc-row-fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  min-width: 0;
}

.lc-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6c757d;
}

.lc-field-textarea,
.lc-field-lines {
  grid-column: span 2;
}

.lc-icon-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc-icon-preview {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}

.lc-row-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lc-row-tools button {
  width: 30px;
  height: 30px;
  border: 1px solid #d5dee1;
  border-radius: 6px;
  background: #fff;
  color: #4a5b62;
  cursor: pointer;
}

.lc-row-tools .lc-remove {
  color: #c0392b;
}

.lc-limit {
  margin-inline-start: 10px;
  color: #6c757d;
  font-size: 12px;
}

.lc-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 600px) {
  .lc-field-textarea,
  .lc-field-lines {
    grid-column: span 1;
  }
}

/* Super admin: landing page enquiries inbox (super/landing_inquiries.php) */
.inq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}

.inq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inq-inline {
  margin: 0;
}

.inq-msg {
  min-width: 200px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.inq-wa {
  color: #1e7e4f;
  font-size: 18px;
}

/* AJAX actions (assets/js/ajax-actions.js) */
.ajax-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99999;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ajax-bar.is-on {
  opacity: 1;
}

.ajax-bar span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--brand-secondary);
  animation: ajaxBar 1s ease-in-out infinite;
}

@keyframes ajaxBar {
  0% { transform: translateX(250%); }
  100% { transform: translateX(-100%); }
}

form.is-ajax-loading {
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  .ajax-bar span { animation-duration: 2.4s; }
}

/* Shared confirmation popup (components/confirm_modal.php) */
.confirm-modal .confirm-shell {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}

.confirm-modal .confirm-body {
  padding: 28px 24px 8px;
  text-align: center;
}

.confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 26px;
}

.confirm-icon-danger { background: #fdeceb; color: #c0392b; }
.confirm-icon-warning { background: #fff4e0; color: #b9770e; }
.confirm-icon-success { background: #e8f6ee; color: #1e7e4f; }
.confirm-icon-primary { background: var(--brand-primary-soft, #e8f1f3); color: var(--brand-primary); }

.confirm-title {
  margin: 0 0 8px;
  color: var(--brand-primary);
  font-weight: 700;
}

.confirm-message {
  margin: 0;
  color: #4a5b62;
  overflow-wrap: anywhere;
}

.confirm-warning {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff4e0;
  color: #8a5a0b;
  font-size: 13px;
}

.confirm-modal .confirm-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 0;
  text-align: center;
}

.confirm-modal .confirm-footer .btn {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border-radius: 10px;
  font-weight: 600;
}

@media (min-width: 480px) {
  .confirm-modal .confirm-footer {
    flex-direction: row-reverse;
  }

  .confirm-modal .confirm-footer .btn {
    flex: 1 1 0;
  }
}

/* Confirmation popup buttons: the action is coloured by what it does, cancel stays neutral */
.confirm-modal .confirm-footer .btn.confirm-action.btn-danger { background: #c0392b !important; border-color: #c0392b !important; color: #fff !important; }
.confirm-modal .confirm-footer .btn.confirm-action.btn-warning { background: #d68910 !important; border-color: #d68910 !important; color: #fff !important; }
.confirm-modal .confirm-footer .btn.confirm-action.btn-success { background: #1e7e4f !important; border-color: #1e7e4f !important; color: #fff !important; }
.confirm-modal .confirm-footer .btn.confirm-action.btn-primary { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
.confirm-modal .confirm-footer .btn.confirm-action:hover,
.confirm-modal .confirm-footer .btn.confirm-action:focus { filter: brightness(.92); color: #fff !important; }
.confirm-modal .confirm-footer .btn.confirm-cancel { background: #fff !important; border: 1px solid #c9d6da !important; color: #4a5b62 !important; }
.confirm-modal .confirm-footer .btn.confirm-cancel:hover { background: #f3f7f8 !important; color: #1f2d33 !important; }

/* Small round picture in the table version of a card list (Ui_components::dualGrid) */
.table-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef3f2;
}


/* ===== New-payment wizard (admin/finance/payments.php): student picker, account card, payment step ===== */
.invoice-wizard .wizard-steps > li.done > a {
  cursor: pointer;
}

/* Receipt banner shown after a payment was recorded */
.pw-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 10px;
  background: rgba(40, 167, 69, 0.08);
  color: #1e5e3a;
}

.pw-done-icon {
  font-size: 26px;
  color: #1e7d4f;
}

.pw-done-text {
  flex: 1 1 260px;
  line-height: 1.7;
}

.pw-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The student and what they owe, kept in view on steps 2 and 3 */
.pw-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(33, 86, 99, 0.08);
  color: var(--brand-primary, #215663);
}

.pw-bar small {
  margin-inline-start: 6px;
  color: #6c757d;
}

.pw-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #a82833;
}

.pw-warn {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 165, 0, 0.14);
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: #8a5a00;
  line-height: 1.7;
}

/* Student list */
.pw-list {
  max-height: 300px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #e1e6e8;
  border-radius: 10px;
}

.pw-list:empty {
  display: none;
}

.pw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eef1f2;
  outline: none;
}

.pw-item:last-child {
  border-bottom: 0;
}

.pw-item:hover,
.pw-item:focus {
  background: #f5f8f9;
}

.pw-item.active {
  background: rgba(33, 86, 99, 0.1);
  box-shadow: inset -4px 0 0 var(--brand-primary, #215663);
  font-weight: 700;
}

.pw-sec {
  flex: 0 0 auto;
  padding: 1px 9px;
  border-radius: 10px;
  background: #eef1f2;
  color: #6c757d;
  font-size: 12px;
  font-weight: 400;
}

.pw-empty {
  padding: 18px 10px;
  text-align: center;
  color: #8a97a0;
}

/* The chosen student's account */
.pw-card {
  min-height: 160px;
  padding: 14px 16px;
  border: 1px solid #e1e6e8;
  border-radius: 10px;
  background: #fafbfb;
}

.pw-card-empty {
  padding: 34px 10px;
  text-align: center;
  color: #8a97a0;
  line-height: 2;
}

.pw-card-empty .fa {
  font-size: 24px;
}

.pw-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.pw-card-head b {
  font-size: 17px;
  color: var(--brand-primary, #215663);
}

.pw-card-head span {
  color: #6c757d;
  font-size: 13px;
}

.pw-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.pw-facts > div {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e9eef0;
  text-align: center;
}

.pw-facts small,
.pw-live small {
  display: block;
  font-size: 12px;
  color: #6c757d;
}

.pw-facts b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.pw-facts .pw-facts-due {
  background: rgba(255, 165, 0, 0.12);
  border-color: rgba(255, 165, 0, 0.35);
}

.pw-mini {
  width: 100%;
  font-size: 13px;
}

.pw-mini th {
  color: #6c757d;
  font-weight: 400;
  padding: 4px 6px;
  border-bottom: 1px solid #e1e6e8;
}

.pw-mini td {
  padding: 5px 6px;
  border-bottom: 1px solid #f0f3f4;
}

.pw-note {
  color: #8a97a0;
  font-size: 13px;
  text-align: center;
  padding: 6px 0;
}

/* The payment step */
.pw-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pw-seg {
  display: flex;
  overflow: hidden;
  border: 1px solid #ced4da;
  border-radius: 8px;
}

.pw-seg label {
  flex: 1 1 0;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.pw-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pw-seg span {
  display: block;
  padding: 9px 8px;
  text-align: center;
  background: #fff;
  border-inline-start: 1px solid #ced4da;
  color: #495057;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.pw-seg label:first-child span {
  border-inline-start: 0;
}

.pw-seg input:checked + span {
  background: var(--brand-primary, #215663);
  color: #fff;
  font-weight: 700;
}

.pw-seg input:focus-visible + span {
  outline: 2px solid var(--brand-primary, #215663);
  outline-offset: -3px;
}

.pw-live {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.pw-live > div {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e1e6e8;
  text-align: center;
}

.pw-live b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.pw-live .pw-live-after {
  background: rgba(33, 86, 99, 0.08);
  border-color: rgba(33, 86, 99, 0.25);
}

.pw-live .pw-live-after.settled {
  background: rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.35);
  color: #1e7d4f;
}

.pw-live .pw-live-after.credit {
  background: rgba(255, 165, 0, 0.14);
  border-color: rgba(255, 165, 0, 0.4);
  color: #8a5a00;
}

@media (max-width: 767px) {
  .pw-facts,
  .pw-live {
    grid-template-columns: 1fr;
  }
}

/* Online exam popups (assets/js/oe-manage.js): section headings and the errors shown inside the popup */
.oe-modal-heading {
  margin: 8px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3ebee;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-primary);
}

.oe-modal-heading .fa {
  margin-left: 6px;
}

.modal .alert.oe-errors {
  background: #fdf3f2 !important;
  border: 1px solid #e6b4ad !important;
  color: #922b21 !important;
  border-radius: 10px;
  line-height: 1.8;
}

.modal .alert.oe-errors[hidden],
.modal .alert.oe-locked-note[hidden] {
  display: none !important;
}