/* School Uniform ERP — company-wide theme variables from System Settings.
   Loaded after app.css and sidebar.css; no file edits needed for new colours. */
:root{
 --theme-primary:#126D58;--theme-primary-text:#fff;--theme-sidebar:#174E3E;
 --theme-sidebar-text:#fff;--theme-sidebar-active:#377B63;--theme-sidebar-active-text:#fff;
 --theme-sidebar-icon:#296854;--theme-sidebar-icon-text:#fff;
 --theme-header:#fff;--theme-header-text:#17253A;
 --theme-background:#F3F6FA;--theme-card:#fff;--theme-card-text:#17253A;--theme-text:#18223A
}
body{background:var(--theme-background);color:var(--theme-text)}
a:not(.erp-nav-dashboard):not(.erp-menu-link):not(.btn):not(.erp-secondary-link){color:var(--theme-primary)}
.btn,button[type=submit]:not(.flash-toast__close):not(.erp-logout-button),.theme-form-buttons button:first-child{background:var(--theme-primary);color:var(--theme-primary-text)}
.btn.muted,.btn.red{background:#52627a;color:#fff}
.btn.red{background:#ac3d3d}
.btn:not(.muted):not(.red):hover,button[type=submit]:not(.flash-toast__close):not(.erp-logout-button):hover{filter:brightness(.9)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
.panel,.stat{background:var(--theme-card);color:var(--theme-card-text)}
.panel h2,.panel h3,.stat strong{color:var(--theme-card-text)}
.erp-sidebar{background:var(--theme-sidebar);color:var(--theme-sidebar-text)}
.erp-sidebar .erp-menu-heading,.erp-sidebar a.erp-nav-dashboard,.erp-sidebar .erp-brand-text strong{color:var(--theme-sidebar-text)}
.erp-sidebar .erp-brand-text small,.erp-sidebar .erp-profile-detail span{color:var(--theme-sidebar-text);opacity:.84}
.erp-sidebar .erp-module-icon,.erp-sidebar .erp-brand-mark,.erp-sidebar .erp-profile-avatar{background:var(--theme-sidebar-icon);color:var(--theme-sidebar-icon-text)}
.erp-sidebar .erp-menu-section.is-current>.erp-menu-heading,.erp-sidebar .erp-menu-section[open]>.erp-menu-heading,.erp-sidebar a.erp-nav-dashboard.is-active{background:var(--theme-sidebar-active);color:var(--theme-sidebar-active-text)}
.erp-sidebar .erp-menu-section.is-current>.erp-menu-heading .erp-module-icon,.erp-sidebar .erp-menu-section[open]>.erp-menu-heading .erp-module-icon,.erp-sidebar a.erp-nav-dashboard.is-active .erp-module-icon{background:var(--theme-sidebar-icon);color:var(--theme-sidebar-icon-text)}
.erp-sidebar .erp-menu-heading:hover,.erp-sidebar .erp-menu-heading:focus-visible,.erp-sidebar a.erp-nav-dashboard:hover,.erp-sidebar a.erp-nav-dashboard:focus-visible{background:var(--theme-sidebar-active);color:var(--theme-sidebar-active-text)}
.erp-sidebar a.erp-menu-link{color:var(--theme-sidebar-text);opacity:.9}
.erp-sidebar a.erp-menu-link:hover,.erp-sidebar a.erp-menu-link:focus-visible{background:var(--theme-sidebar-active);color:var(--theme-sidebar-active-text);opacity:1}
.erp-sidebar a.erp-menu-link.is-active{background:var(--theme-sidebar-active);color:var(--theme-sidebar-active-text);opacity:1}
.erp-sidebar .erp-chevron{border-color:var(--theme-sidebar-text)}
.erp-sidebar .erp-submenu-dot{background:var(--theme-sidebar-text)}
.erp-sidebar-profile{background:var(--theme-sidebar);color:var(--theme-sidebar-text)}
.erp-sidebar .erp-profile-detail strong{color:var(--theme-sidebar-text)!important}
.erp-topbar{background:var(--theme-header);color:var(--theme-header-text)}
.erp-topbar h1,.erp-topbar .erp-page-heading small{color:var(--theme-header-text)}
.erp-topbar .erp-password-link{color:var(--theme-header-text)}
.erp-topbar .erp-password-link:hover{background:var(--theme-sidebar-active);color:var(--theme-sidebar-active-text)}
.erp-page-intro h2{color:var(--theme-text)}
.erp-page-intro p{color:var(--theme-text);opacity:.75}
/* Theme editor */
.theme-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px;margin:16px 0 21px}
.theme-preset{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--theme-card);color:var(--theme-card-text);border:1px solid #d7e0e8;border-radius:12px;padding:10px;cursor:pointer}
.theme-preset:hover,.theme-preset:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
.theme-preset:disabled{opacity:.65;cursor:default}
.theme-preset-bar{height:52px;width:100%;border-radius:8px;display:flex;align-items:end;gap:7px;padding:9px}
.theme-preset-bar i{height:22px;width:32px;border-radius:6px}
.theme-preset-label{font-size:13px;font-weight:700}
.theme-divider{border:0;border-top:1px solid #dbe3e9;margin:24px 0}
.theme-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:11px;margin:17px 0}
.theme-picker-row{display:flex;gap:12px;align-items:center;padding:11px 13px;border:1px solid #dbe3e9;border-radius:9px;background:var(--theme-card);color:var(--theme-card-text)}
.theme-picker-row>span{flex:1;font-size:13px;font-weight:650}
.theme-picker-row>input[type=color]{width:53px;height:38px;padding:3px;border:1px solid #ccd6df;cursor:pointer}
.theme-picker-row>output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;min-width:66px;font-size:12px}
.theme-form-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.theme-reset-form{margin-top:22px;padding-top:16px;border-top:1px solid #dbe3e9}
@media(max-width:650px){.theme-pickers{grid-template-columns:1fr}.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}

.panel label,.panel th,.panel td,.panel p:not(.muted){color:var(--theme-card-text)}
.stat small{color:var(--theme-card-text);opacity:.72}

/* ================================================================
 * Dynamic table headings — follows the sidebar colour in Settings.
 * Applies to listing tables across all CodeIgniter 3 ERP modules.
 * No hard-coded colour and no database change.
 * ================================================================ */
.erp-main .panel table > thead > tr > th {
    background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.125)),
                var(--theme-sidebar, #174e3e);
    color: var(--theme-sidebar-text, #fff);
    border-bottom: 1px solid rgba(0,0,0,.13);
    border-right: 1px solid rgba(255,255,255,.12);
    padding: 14px 13px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .025em;
    white-space: nowrap;
    vertical-align: middle;
}
.erp-main .panel table > thead > tr > th:nth-child(even) {
    background: linear-gradient(90deg, rgba(0,0,0,.045), rgba(255,255,255,.07)),
                var(--theme-sidebar, #174e3e);
}
.erp-main .panel table > thead > tr > th:last-child { border-right: 0; }
.erp-main .panel table > thead > tr > th input[type=checkbox] {
    width: auto;
    accent-color: var(--theme-primary, #126d58);
}
/* Table data, dropdown actions and the School Profile photo modal are unchanged. */


/* ================================================================
 * Gradient KPI / summary cards — 20 Oct 2026.
 * Pattern matches blue, green, purple, orange cards in supplied image.
 * Scoped to summary cards only; ordinary panels, tables and forms retain
 * the site theme. These overrides deliberately come AFTER the theme rules.
 * Each colour pair is a CSS variable for future system-wide configurability.
 * ================================================================ */
:root {
  --erp-kpi-blue-from: #1c70b4;
  --erp-kpi-blue-to: #2a9bce;
  --erp-kpi-green-from: #158a6c;
  --erp-kpi-green-to: #1da77f;
  --erp-kpi-purple-from: #7352b7;
  --erp-kpi-purple-to: #9a66d4;
  --erp-kpi-orange-from: #b77217;
  --erp-kpi-orange-to: #e79726;
}

/* Dashboard cards and School List cards (plus opt-in cards in new modules). */
.erp-main .statgrid > .stat,
.erp-main .school-summary > .school-summary-item,
.erp-main .erp-kpi-grid > .erp-kpi-card {
  --erp-kpi-from: var(--erp-kpi-blue-from);
  --erp-kpi-to: var(--erp-kpi-blue-to);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  min-height: 126px;
  overflow: hidden;
  padding: 20px 21px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(105deg, rgba(0,0,0,.09), transparent 68%),
              linear-gradient(112deg, var(--erp-kpi-from), var(--erp-kpi-to));
  box-shadow: 0 2px 5px rgba(15,38,48,.06);
  color: #fff;
}

/* Circle accent at top right, kept behind the content. */
.erp-main .statgrid > .stat::before,
.erp-main .school-summary > .school-summary-item::before,
.erp-main .erp-kpi-grid > .erp-kpi-card::before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 0;
  width: 118px;
  height: 118px;
  right: -42px;
  top: -56px;
  border-radius: 50%;
  background: rgba(255,255,255,.11);
}

/* Repeating palette for any number of tiles. */
.erp-main .statgrid > .stat:nth-child(4n+2),
.erp-main .school-summary > .school-summary-item:nth-child(4n+2),
.erp-main .erp-kpi-grid > .erp-kpi-card:nth-child(4n+2) {
  --erp-kpi-from: var(--erp-kpi-green-from);
  --erp-kpi-to: var(--erp-kpi-green-to);
}
.erp-main .statgrid > .stat:nth-child(4n+3),
.erp-main .school-summary > .school-summary-item:nth-child(4n+3),
.erp-main .erp-kpi-grid > .erp-kpi-card:nth-child(4n+3) {
  --erp-kpi-from: var(--erp-kpi-purple-from);
  --erp-kpi-to: var(--erp-kpi-purple-to);
}
.erp-main .statgrid > .stat:nth-child(4n),
.erp-main .school-summary > .school-summary-item:nth-child(4n),
.erp-main .erp-kpi-grid > .erp-kpi-card:nth-child(4n) {
  --erp-kpi-from: var(--erp-kpi-orange-from);
  --erp-kpi-to: var(--erp-kpi-orange-to);
}
/* When only three School List totals are present, make Inactive orange. */
.erp-main .school-summary > .school-summary-item:nth-child(3):last-child {
  --erp-kpi-from: var(--erp-kpi-orange-from);
  --erp-kpi-to: var(--erp-kpi-orange-to);
}

/* Maintain white text despite the generic .panel and theme typography. */
.erp-main .statgrid > .stat > small,
.erp-main .school-summary > .school-summary-item > span,
.erp-main .erp-kpi-grid > .erp-kpi-card > small,
.erp-main .erp-kpi-grid > .erp-kpi-card > .erp-kpi-label {
  display: block;
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: 1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .028em;
  text-transform: uppercase;
}
.erp-main .statgrid > .stat > strong,
.erp-main .school-summary > .school-summary-item > b,
.erp-main .erp-kpi-grid > .erp-kpi-card > strong,
.erp-main .erp-kpi-grid > .erp-kpi-card > .erp-kpi-value {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 10px;
  color: #fff;
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Let 4 cards form a consistent row at desktop sizes, then wrap cleanly. */
.erp-main .statgrid,
.erp-main .erp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.erp-main .school-summary { gap: 16px; }
@media (max-width: 1099px) {
  .erp-main .statgrid,
  .erp-main .erp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .erp-main .statgrid,
  .erp-main .erp-kpi-grid,
  .erp-main .school-summary { grid-template-columns: 1fr; gap: 12px; }
  .erp-main .statgrid > .stat,
  .erp-main .school-summary > .school-summary-item,
  .erp-main .erp-kpi-grid > .erp-kpi-card { min-height: 110px; padding: 18px; }
}