/* ══════════════════════════════════════════════════════════════
   GLOBAL LIGHT THEME + ORANGE BRAND ACCENT
   Background: white (#FFFFFF) · Text: black (#000000) · Brand
   accent: orange (#cd4e22 / #e86428 on hover) used consistently
   for buttons, active tabs, table headers, back-buttons and icon
   badges across every portal (Student, Center, Admin, Director,
   Faculty, Centre Manager).
   Loaded on every page, after the portal-specific accent file, so
   it wins any clash with page-level inline styles.
   ══════════════════════════════════════════════════════════════ */
:root{
  --primary-dark:#000000;
  --accent-orange:#cd4e22;
  --accent-orange-dark:#e86428;
  --white:#ffffff;
  --black:#000000;
  --brand:#cd4e22;

  /* light greys */
  --gray-900:#ffffff;
  --gray-800:#ffffff;
  --gray-700:#f5f5f5;
  --gray-600:#e0e0e0;
  --gray-500:#cccccc;
  --gray-400:#666666;
  --gray-300:#333333;
  --gray-200:#1a1a1a;
  --gray-100:#000000;
  --card:#ffffff;
  --text:#000000;
}

/* Page background & base text */
html,body{ background:#ffffff !important; color:#000000 !important; }

/* Cards / containers / panels → white with light-grey border */
.main-content,.chart-card,.mini-card,.ac-card,.ra-card,.reg-pick-wrap,
.submenu-panel,.menu-tile,.card,.panel,.box,.content-box,.section,
.form-card,.detail-card,.data-card,.table-card,.widget,.tile,
[class*="-card"],[class*="-wrap"],[class*="-panel"],[class*="-box"]{
  background:#ffffff !important;
  color:#000000 !important;
  border-color:#e0e0e0 !important;
}
/* Interactive cards get a brand-coloured border/shadow on hover instead of
   staying flat grey, so hover states feel alive across every page. */
.menu-tile:hover,.quick-card:hover,.stat-card:hover,.notice-card:hover{
  border-color:var(--accent-orange) !important;
  box-shadow:0 10px 22px rgba(204,76,33,.18) !important;
}

/* Headings, labels, table text → black */
h1,h2,h3,h4,h5,h6,label,th,td,p,span,div,a,li,strong,small,
.reg-name,.tile-label,.sum-row span,.charge-row span,.ac-title,.ra-title,
.sif-title,.sif-subtitle{
  color:#000000 !important;
}
.ac-sub,.ra-sub,.reg-empty,.fetch-hint,.mgr-hint{ color:#333333 !important; }

/* Inputs / selects / textareas → white with black text */
input,select,textarea,.form-control,.search-inp,.reg-search,
.fg input,.fg select,.fg textarea{
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid #999999 !important;
}
/* Dropdown list items render in the browser's own (light) popup — any
   page-level dark-theme leftover on <option> (light text on light bg)
   would be invisible there, so force the same black-on-white here too. */
select option{
  background:#ffffff !important;
  color:#000000 !important;
}
input::placeholder,textarea::placeholder{ color:#767676 !important; }
input:read-only,input:disabled,select:disabled,textarea:disabled,.locked-field{
  background:#eeeeee !important; color:#333333 !important;
}
/* Checkboxes / radios → brand-orange accent, clearly visible on white */
input[type="checkbox"],input[type="radio"]{
  accent-color:var(--accent-orange) !important;
  width:auto !important; border:none !important;
}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--accent-orange) !important;
  box-shadow:0 0 0 3px rgba(204,76,33,.15) !important;
  outline:none !important;
}

/* Buttons → brand-orange background, white text (same colour everywhere) */
.btn,.btn-primary,.btn-save,.btn-login,.btn-filter,.btn-primary-ac,
.btn-primary-ra,.pick-btn,.reg-ready-btn,.reg-blank-btn,.pg-btn,
button[type="submit"],.sif-next,.sif-prev,.btn-act{
  background:var(--accent-orange) !important;
  color:#ffffff !important;
  border-color:var(--accent-orange) !important;
}
.btn:hover,.btn-primary:hover,.btn-save:hover,.btn-primary-ac:hover,
.btn-primary-ra:hover,.pick-btn:hover,.reg-ready-btn:hover,
button[type="submit"]:hover,.sif-next:hover,.pg-btn:hover,.btn-act:hover{
  background:var(--accent-orange-dark) !important; color:#ffffff !important;
}
/* text inside brand buttons stays white even with the heading rule above.
   Scoped to the specific classes coloured above — NOT a blanket
   "button *" rule, which would also whiten text inside buttons that
   aren't brand-coloured (e.g. .sif-tab step tabs, whose background is white). */
.btn *,.btn-primary *,.btn-save *,.btn-primary-ac *,.btn-primary-ra *,
.pick-btn *,.reg-ready-btn *,.pg-btn *,button[type="submit"] *{ color:#ffffff !important; }

/* Outline / secondary / cancel buttons → white background, black text + border
   (kept neutral on purpose so a "Cancel" never competes visually with the
   brand-coloured primary action next to it). */
.btn-outline-white,.ed-btn-outline,.btn-cancel{
  background:#ffffff !important; color:#000000 !important; border:1px solid #000000 !important;
}
.btn-outline-white *,.ed-btn-outline *,.btn-cancel *{ color:#000000 !important; }

/* Icons → black by default, white when inside a brand-coloured button/badge */
i[class^="bi-"],i[class*=" bi-"],.bi{ color:#000000 !important; }
.btn i,.btn-primary i,.pick-btn i,.reg-ready-btn i,.btn-primary-ac i,
.btn-primary-ra i,.ica-topbar .top-actions a i{ color:#ffffff !important; }
/* Icons inside accent-coloured stat/quick/empty-state widgets pick up the
   brand orange instead of the blanket black default. */
.stat-icon i,.quick-card i,.module-empty i{ color:var(--accent-orange) !important; }
.quick-card:hover i{ color:#ffffff !important; }

/* Icon badges (portal badge icon, header brand icon, generic icon-box) get
   a solid brand-orange circle with a white glyph — one consistent
   "professional" look wherever a single icon badge is used. */
.portal-icon,.header-brand-icon,.icon-box{
  background:var(--accent-orange) !important;
  border-color:var(--accent-orange) !important;
}
.portal-icon i,.header-brand-icon i,.icon-box i{ color:#ffffff !important; }

/* Home/menu icon grids (.ico-1..6, each page's own multi-colour gradient)
   are intentionally left untouched here — only make sure the glyph itself
   is always white, whatever the gradient underneath. */
.tile-ico i{ color:#ffffff !important; }

/* Top bar (home style) stays white with black logo area */
.ica-topbar{ background:#ffffff !important; border-bottom:1px solid #e0e0e0 !important; }
.ica-subbar{ background:var(--accent-orange) !important; }
.ica-subbar,.ica-subbar *{ color:#ffffff !important; }

/* Tabs — active tab always brand-orange bg / white text, inactive black text */
.ica-tabs,.status-tabs,.detail-tabs,.sif-tabs{ background:#ffffff !important; border-bottom:1px solid #e0e0e0 !important; }
.ica-tab,.status-tab,.detail-tab{ color:#000000 !important; }
.ica-tab.active{ background:var(--accent-orange) !important; color:#ffffff !important; }
.ica-tab.active *{ color:#ffffff !important; }
.status-tab.active,.detail-tab.active{ color:var(--accent-orange) !important; border-bottom-color:var(--accent-orange) !important; }

/* Tables — soft brand-tinted header, readable body */
table th{ background:#fff1e6 !important; color:#7a3b1e !important; border-color:#ffd6b8 !important; }
table td{ color:#000000 !important; border-color:#eeeeee !important; }
tr:hover td{ background:#fff8f3 !important; }

/* Footer */
.ica-footer,.site-footer{ background:#000000 !important; color:#ffffff !important; }
.ica-footer *,.site-footer *{ color:#ffffff !important; }

/* Badges / chips (neutral by default — status badges like .badge-pass/
   .badge-fail keep their own semantic colour, defined per-page) */
.enrolled-chip,.reg-badge{ background:#eeeeee !important; color:#000000 !important; }

/* ── BACK BUTTONS — one consistent brand look everywhere, whatever class
   name or shape a given page already uses for its "back" control. Colour
   only (no padding/sizing) on known classes so existing circular/compact
   buttons keep their shape; the plain-link variant (.mg-back) gets a full
   pill treatment since it started as unstyled text. ── */
.back-btn.back-btn,.eif-back-btn.eif-back-btn,.sif-back-btn.sif-back-btn,
a:has(> i.bi-arrow-left),a:has(i.bi-arrow-left){
  background:#fff4ec !important;
  color:var(--accent-orange) !important;
  border-color:var(--accent-orange) !important;
}
.back-btn.back-btn i,.eif-back-btn.eif-back-btn i,.sif-back-btn.sif-back-btn i,
a:has(> i.bi-arrow-left) i,a:has(i.bi-arrow-left) i{ color:var(--accent-orange) !important; }
.back-btn.back-btn:hover,.eif-back-btn.eif-back-btn:hover,.sif-back-btn.sif-back-btn:hover,
a:has(> i.bi-arrow-left):hover,a:has(i.bi-arrow-left):hover{
  background:var(--accent-orange) !important; color:#ffffff !important;
}
.back-btn.back-btn:hover i,.eif-back-btn.eif-back-btn:hover i,.sif-back-btn.sif-back-btn:hover i,
a:has(> i.bi-arrow-left):hover i,a:has(i.bi-arrow-left):hover i{ color:#ffffff !important; }

.mg-back.mg-back{
  background:#fff4ec !important;
  color:var(--accent-orange) !important;
  border:1px solid var(--accent-orange) !important;
  border-radius:8px !important;
  padding:6px 14px !important;
}
.mg-back.mg-back i{ color:var(--accent-orange) !important; }
.mg-back.mg-back:hover{ background:var(--accent-orange) !important; color:#ffffff !important; text-decoration:none !important; }
.mg-back.mg-back:hover i{ color:#ffffff !important; }

/* Scroll niceties */
::selection{ background:var(--accent-orange); color:#fff; }

/* ── SWEETALERT2 POPUPS — force light everywhere ──
   Many pages call Swal.fire({..., background:'#1a1d27', color:'#f0f2f8'})
   directly in their own JS (leftover dark styling from before this site's
   theme was made light). Rather than hunt down every page's JS, one
   !important rule here beats that inline background/color on every popup,
   on every page, including any written after this file. */
.swal2-popup{ background:#ffffff !important; color:#000000 !important; }
.swal2-title,.swal2-html-container,.swal2-content{ color:#000000 !important; }
.swal2-input,.swal2-select,.swal2-textarea{
  background:#ffffff !important; color:#000000 !important; border:1px solid #999999 !important;
}
.swal2-select option{ background:#ffffff !important; color:#000000 !important; }
.swal2-close{ color:#000000 !important; }
.swal2-validation-message{ background:#fdecea !important; color:#7a1f1f !important; }

/* ── DATE PICKER ICON → black, on every page ──
   The inputs above are always white, but many pages set color-scheme:dark on
   their date fields, which turns the browser's calendar icon white — invisible
   on a white input. Render light and force a pure-black icon, whatever a page
   sets. */
input[type="date"],input[type="datetime-local"],input[type="month"]{ color-scheme:light !important; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  filter:brightness(0) !important;
  opacity:1 !important;
  cursor:pointer;
}