/* ============================================================================
   CITron / DFMROS Unified Maroon UI v6
   Admin + HR + Instructor
   Palette: Maroon + White + Black/Charcoal
   Loaded AFTER each page's legacy inline CSS to normalize the entire system.
   ============================================================================ */

:root,
html,
html[data-theme="uep-red"],
html[data-theme="uep-blue"],
html[data-theme="midnight"] {
  color-scheme: light !important;

  --bg: #f7f5f6 !important;
  --bg-soft: #fbfafb !important;
  --body-grad-1: rgba(122, 0, 25, .055) !important;
  --body-grad-2: rgba(122, 0, 25, .025) !important;

  --surface: #ffffff !important;
  --surface-2: #fbf8f9 !important;
  --surface-3: #f3ecef !important;
  --surface2: #fbf8f9 !important;
  --elevated: #ffffff !important;
  --sidebar: #ffffff !important;
  --topbar: rgba(255, 255, 255, .96) !important;
  --overlay: rgba(23, 10, 14, .42) !important;

  --border: #eadfe3 !important;
  --border-2: #dac7ce !important;
  --border2: #dac7ce !important;

  --text: #1b1114 !important;
  --text-2: #48373d !important;
  --text-sm: #48373d !important;
  --muted: #746169 !important;
  --dim: #a08f96 !important;

  --primary: #7A0019 !important;
  --primary-2: #94142f !important;
  --primary-3: #5c0013 !important;
  --primary-soft: rgba(122, 0, 25, .075) !important;
  --primary-border: rgba(122, 0, 25, .22) !important;
  --primary-glow: rgba(122, 0, 25, .14) !important;

  --accent: #7A0019 !important;
  --accent-dim: rgba(122, 0, 25, .075) !important;
  --accent-glow: rgba(122, 0, 25, .14) !important;

  /* Legacy "gold" values are intentionally remapped to maroon. */
  --gold: #7A0019 !important;
  --gold-2: #94142f !important;
  --gold-soft: rgba(122, 0, 25, .075) !important;
  --gold-border: rgba(122, 0, 25, .20) !important;

  --brand-start: #7A0019 !important;
  --brand-mid: #94142f !important;
  --brand-end: #4a000f !important;

  /* Keep true success/error semantics; normalize other accent colors to maroon. */
  --green: #16824b !important;
  --green-soft: #eaf7f0 !important;
  --red: #d83950 !important;
  --red-soft: #fff0f3 !important;
  --amber: #7A0019 !important;
  --amber-soft: rgba(122, 0, 25, .075) !important;
  --cyan: #7A0019 !important;
  --cyan-soft: rgba(122, 0, 25, .075) !important;
  --blue: #7A0019 !important;
  --blue-soft: rgba(122, 0, 25, .075) !important;
  --purple: #5c0013 !important;
  --purple-soft: rgba(92, 0, 19, .075) !important;

  --swal-bg: #ffffff !important;
  --input-bg: #ffffff !important;
  --shadow-card: 0 8px 24px rgba(49, 22, 31, .055) !important;
  --shadow-heavy: 0 22px 60px rgba(49, 22, 31, .14) !important;

  --radius-sm: 10px !important;
  --radius-md: 14px !important;
  --radius-lg: 18px !important;
}

html { background: #f7f5f6 !important; }
body,
#body-root {
  background:
    radial-gradient(circle at 4% 0%, rgba(122,0,25,.045), transparent 24%),
    linear-gradient(180deg, #fbfafb 0%, #f7f5f6 100%) !important;
  color: #1b1114 !important;
}

/* -------------------------------------------------------------------------- */
/* Base layout / sidebar / top bars                                            */
/* -------------------------------------------------------------------------- */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #eadfe3 !important;
  box-shadow: 10px 0 34px rgba(49,22,31,.035) !important;
}

.sb-header,
.sb-footer,
.sb-scroll {
  background: #ffffff !important;
}

.sb-brand-text,
.sb-brand-name,
.brand-text,
.brand-name,
.mobile-brand-text,
.mobile-title {
  color: #7A0019 !important;
}

.sb-logo,
.mobile-logo,
.brand-logo {
  background: #ffffff !important;
  border-color: rgba(122,0,25,.16) !important;
  color: #7A0019 !important;
}

.nav-section-label,
.sb-section-label,
.nav-group-title {
  color: #9b858d !important;
  letter-spacing: .09em !important;
}

.nav-link {
  color: #544147 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
}
.nav-link:hover {
  color: #7A0019 !important;
  background: #fff6f8 !important;
  border-color: #f0dce2 !important;
}
.nav-link.active,
.nav-link[aria-current="page"] {
  color: #7A0019 !important;
  background: #fff4f7 !important;
  border-color: #e8cbd3 !important;
  box-shadow: inset 3px 0 0 #7A0019 !important;
}
.nav-link.active .nav-icon,
.nav-link:hover .nav-icon,
.nav-link.active svg,
.nav-link:hover svg {
  color: #7A0019 !important;
  stroke: currentColor !important;
}

.sb-user,
.sb-user-card,
.user-box,
.account-box {
  background: #fbf8f9 !important;
  border-color: #eadfe3 !important;
  color: #1b1114 !important;
}

.mobile-topbar,
.topbar,
.mobile-header {
  background: rgba(255,255,255,.97) !important;
  color: #1b1114 !important;
  border-bottom: 1px solid #eadfe3 !important;
  box-shadow: 0 4px 20px rgba(49,22,31,.04) !important;
  backdrop-filter: blur(14px) !important;
}

.main-content {
  background: transparent !important;
}

.sidebar-overlay {
  background: rgba(20, 8, 12, .38) !important;
}

/* Hide old theme switchers: system is intentionally fixed to maroon/white. */
.theme-options,
.theme-select-title,
.appearance-box,
[class*="theme-options"],
[class*="theme-select-title"],
[class*="appearance-box"] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Page headings                                                               */
/* -------------------------------------------------------------------------- */
[class$="-title"],
[class*="-title "],
.page-title,
h1, h2, h3 {
  color: #1b1114;
}

/* Avoid touching small badge/title children too aggressively. */
[class$="-header"] > div > h1,
[class$="-header"] > div > h2,
[class*="topbar"] h1,
[class*="head"] h1 {
  color: #1b1114 !important;
  letter-spacing: -.025em !important;
}

[class$="-subtitle"],
[class*="-subtitle "],
.page-subtitle,
[class$="-sub"],
[class*="-sub "] {
  color: #746169 !important;
}

/* -------------------------------------------------------------------------- */
/* Universal cards/panels.                                                     */
/* -------------------------------------------------------------------------- */
.db-card,
.db-table-card,
.kpi,
.stat-card,
.tbl-card,
.inst-card,
.inst-stat-card,
.inst-filter-card,
.sch-card,
.rooms-card,
.room-stat-card,
.room-filter-card,
.set-card,
.hr-card,
.hr-kpi,
.hr-stat-chip,
.hr-activity-card,
.ha-stat,
.ha-filter,
.ha-table-card,
.hs-stat,
.hs-filter,
.hs-table-card,
.idb-overview-card,
.idb-alert,
.isch-card,
.ia-stat,
.ia-filter,
.ia-overview,
.ia-record-card,
.pr-card,
[class*="-panel"],
[class*="summary-card"],
[class*="filter-card"],
[class*="table-card"] {
  background: #ffffff !important;
  color: #1b1114 !important;
  border: 1px solid #eadfe3 !important;
  box-shadow: 0 7px 22px rgba(49,22,31,.045) !important;
}

.kpi,
.stat-card,
.inst-stat-card,
.room-stat-card,
.hr-kpi,
.ha-stat,
.hs-stat,
.ia-stat {
  border-radius: 16px !important;
}

/* Remove legacy colored top/left strips that make the UI noisy. */
.kpi::before,
.stat-card::before,
.inst-stat-card::before,
.room-stat-card::before,
.hr-kpi::before,
.ha-stat::before,
.hs-stat::before,
.ia-stat::before {
  background: #7A0019 !important;
}

/* -------------------------------------------------------------------------- */
/* Tables: visible structure, consistent spacing and no yellow rows.           */
/* -------------------------------------------------------------------------- */
.table-scroll,
.tbl-scroll,
.inst-table-wrap,
.sch-scroll,
.rooms-table-wrap,
.hr-table-scroll,
.ha-table-scroll,
.hs-table-scroll,
[class*="table-wrap"],
[class*="table-scroll"] {
  background: #ffffff !important;
  border-color: #eadfe3 !important;
  scrollbar-color: #cdb8c0 #f6f1f3;
}

table,
.att-table,
.inst-table,
.sch-tbl,
.rooms-table,
.hr-table,
.ha-table,
.hs-table,
.att-tbl {
  background: #ffffff !important;
  color: #1b1114 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table thead,
.att-table thead,
.inst-table thead,
.sch-tbl thead,
.rooms-table thead,
.hr-table thead,
.ha-table thead,
.hs-table thead,
.att-tbl thead {
  background: #fbf8f9 !important;
}

table th,
.att-table th,
.inst-table th,
.sch-tbl th,
.rooms-table th,
.hr-table th,
.ha-table th,
.hs-table th,
.att-tbl th {
  background: #fbf8f9 !important;
  color: #746169 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #d9c5cc !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}

table td,
.att-table td,
.inst-table td,
.sch-tbl td,
.rooms-table td,
.hr-table td,
.ha-table td,
.hs-table td,
.att-tbl td {
  background: #ffffff !important;
  color: #25171c !important;
  border-bottom: 1px solid #eadfe3 !important;
}

table tbody tr:last-child td { border-bottom-color: transparent !important; }

table tbody tr:hover td,
.att-table tbody tr:hover td,
.inst-table tbody tr:hover td,
.sch-tbl tbody tr:hover td,
.rooms-table tbody tr:hover td,
.hr-table tbody tr:hover td,
.ha-table tbody tr:hover td,
.hs-table tbody tr:hover td,
.att-tbl tbody tr:hover td {
  background: #fff8fa !important;
}

/* Headers above tables. */
.table-topbar,
.tbl-head-row,
.inst-card-head,
.sch-card-head,
.rooms-card-head,
.hr-card-head,
.ha-table-head,
.hs-table-head {
  background: #ffffff !important;
  border-bottom-color: #eadfe3 !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile list cards                                                           */
/* -------------------------------------------------------------------------- */
.inst-mobile-card,
.sch-mobile-card,
.rooms-mobile-card,
.att-mobile-card,
.ha-mobile-card,
.hs-mobile-card,
.class-card,
.isch-week-item,
.isch-card,
.ia-record-card {
  background: #ffffff !important;
  border: 1px solid #eadfe3 !important;
  color: #1b1114 !important;
  box-shadow: 0 6px 18px rgba(49,22,31,.04) !important;
}

.inst-mobile-card:hover,
.sch-mobile-card:hover,
.rooms-mobile-card:hover,
.class-card:hover,
.isch-card:hover,
.ia-record-card:hover {
  border-color: #d9b9c3 !important;
  background: #fffafb !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */
button,
.btn,
[class$="-btn"],
[class*="-btn "],
[class*="btn-primary"],
[class*="btn-theme"],
[class*="add-btn"],
[class*="filter-btn"] {
  font-family: inherit;
}

.btn-primary,
.inst-add-btn,
.add-sched-btn,
.room-add-btn,
.room-btn-primary,
.notes-save-btn,
.ia-btn-primary,
.pr-btn-primary,
.set-btn-primary,
[class*="btn-theme"],
[class*="-btn-theme"],
[class*="primary-btn"] {
  background: #7A0019 !important;
  color: #ffffff !important;
  border-color: #7A0019 !important;
  box-shadow: 0 8px 18px rgba(122,0,25,.15) !important;
}

.btn-primary:hover,
.inst-add-btn:hover,
.add-sched-btn:hover,
.room-add-btn:hover,
.room-btn-primary:hover,
.ia-btn-primary:hover,
.pr-btn-primary:hover,
.set-btn-primary:hover,
[class*="btn-theme"]:hover,
[class*="-btn-theme"]:hover {
  background: #5c0013 !important;
  border-color: #5c0013 !important;
  color: #ffffff !important;
}

/* Secondary / import / filter buttons become white + maroon. */
.inst-filter-btn,
.inst-import-label,
.sch-import-label,
.room-filter-btn,
.room-btn-ghost,
.att-soft-btn,
.hr-btn,
.ha-btn,
.hs-btn,
.isch-btn,
.ia-btn,
.pr-btn,
.set-btn,
.export-btn,
[class*="ghost"] {
  background: #ffffff !important;
  color: #7A0019 !important;
  border-color: #dec8cf !important;
}

.inst-filter-btn:hover,
.inst-import-label:hover,
.sch-import-label:hover,
.room-filter-btn:hover,
.room-btn-ghost:hover,
.att-soft-btn:hover,
.hr-btn:hover,
.ha-btn:hover,
.hs-btn:hover,
.isch-btn:hover,
.ia-btn:hover,
.pr-btn:hover,
.set-btn:hover,
.export-btn:hover,
[class*="ghost"]:hover {
  background: #fff4f7 !important;
  color: #5c0013 !important;
  border-color: #cfabb6 !important;
}

/* Preserve destructive red action semantics. */
[class*="delete"],
[class*="danger"],
.del-btn,
.icon-delete,
.room-delete-btn,
.pr-btn-danger {
  color: #d83950 !important;
}

/* Icon action buttons: view green, edit maroon, delete red. */
.icon-action,
.icon-btn,
.room-icon-btn,
.sch-action-btn,
.room-action-btn,
.inst-action-btn {
  background: #ffffff !important;
  border-color: #eadfe3 !important;
  box-shadow: none !important;
}
.icon-edit,
.edit-btn,
.room-edit-btn,
[class*="edit-btn"] {
  color: #7A0019 !important;
  background: #fff4f7 !important;
  border-color: #e7cbd3 !important;
}
.icon-enroll,
[class*="enroll"] .icon-action,
[class*="view-btn"] {
  color: #16824b !important;
  background: #eef9f3 !important;
  border-color: #ccebd9 !important;
}
.icon-delete,
.del-btn,
.room-delete-btn {
  color: #d83950 !important;
  background: #fff2f4 !important;
  border-color: #ffd6dd !important;
}

/* -------------------------------------------------------------------------- */
/* Inputs / filters / controls                                                 */
/* -------------------------------------------------------------------------- */
input,
select,
textarea,
.inst-inp,
.inp,
.room-inp,
.filter-inp,
.ha-input,
.hs-input,
.ia-input,
.pr-inp,
.set-input,
[class*="-input"] {
  background: #ffffff !important;
  color: #1b1114 !important;
  border-color: #d9c9ce !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #a39198 !important;
}

input:focus,
select:focus,
textarea:focus,
.inst-inp:focus,
.inp:focus,
.room-inp:focus,
.filter-inp:focus,
.ha-input:focus,
.hs-input:focus,
.ia-input:focus,
.pr-inp:focus,
[class*="-input"]:focus {
  border-color: #a65d70 !important;
  box-shadow: 0 0 0 3px rgba(122,0,25,.075) !important;
  outline: none !important;
}

/* -------------------------------------------------------------------------- */
/* Tabs / pagination / chips / badges                                          */
/* -------------------------------------------------------------------------- */
.sch-tab,
.hs-tab,
.isch-tab,
[class*="-tab"],
.inst-page-link,
.rooms-page-link,
.ha-page-btn,
.ia-page-link {
  background: #ffffff !important;
  color: #69545d !important;
  border-color: #e4d6db !important;
}

.sch-tab:hover,
.hs-tab:hover,
.isch-tab:hover,
[class*="-tab"]:hover,
.inst-page-link:hover,
.rooms-page-link:hover,
.ha-page-btn:hover,
.ia-page-link:hover {
  background: #fff6f8 !important;
  color: #7A0019 !important;
  border-color: #d9b9c3 !important;
}

.sch-tab.active,
.hs-tab.active,
.isch-tab.active,
[class*="-tab"].active,
.inst-page-link.active,
.rooms-page-link.active,
.ha-page-btn.active,
.ia-page-link.active,
.ia-page-current {
  background: #7A0019 !important;
  color: #ffffff !important;
  border-color: #7A0019 !important;
}

/* Legacy yellow/orange/purple/blue pills -> maroon. */
[class*="amber"],
[class*="gold"],
[class*="purple"],
[class*="blue"],
[class*="cyan"],
[class*="theme"],
.sch-type-lec,
.sch-type-lab,
.sch-type-pill,
.room-badge,
.inst-badge,
.eid-pill,
.sch-code-pill,
.room-code-pill,
.subject-code,
.isch-code,
.pr-chip-p {
  background: #fff3f6 !important;
  color: #7A0019 !important;
  border-color: #e8cbd3 !important;
}

/* Neutral pills remain neutral. */
[class*="slate"],
[class*="gray"],
.badge-gray,
.missing-pill,
[class*="neutral"] {
  background: #f5f1f3 !important;
  color: #66535a !important;
  border-color: #e5d9dd !important;
}

/* Success / active / present. */
[class*="green"],
.badge-green,
.badge-active,
.present,
.ok-badge,
.live-badge,
.pr-chip-g {
  background: #eaf7f0 !important;
  color: #16824b !important;
  border-color: #cae9d8 !important;
}

/* Danger / inactive / absent. */
[class*="red"],
.badge-red,
.badge-inactive,
.absent,
.missing,
.pr-chip-r {
  background: #fff0f3 !important;
  color: #d83950 !important;
  border-color: #ffd4dc !important;
}

/* -------------------------------------------------------------------------- */
/* Avatars / icons                                                            */
/* -------------------------------------------------------------------------- */
.emp-avatar,
.person-avatar,
.person-avatar-fallback,
.inst-avatar,
.hr-avatar,
.ha-avatar,
.hs-avatar,
.pr-av-fb,
.room-icon,
.stat-icon,
.kpi-icon,
.hr-kpi-icon,
.hr-stat-icon,
.ha-stat-icon,
.hs-stat-icon,
.ia-stat-icon {
  background: #fff3f6 !important;
  color: #7A0019 !important;
  border-color: #e8cbd3 !important;
}

/* -------------------------------------------------------------------------- */
/* Modals / SweetAlert                                                         */
/* -------------------------------------------------------------------------- */
.modal-box,
.room-modal-box,
.notes-modal-box,
.reason-modal-box,
.photo-modal-box,
.ha-photo-box,
.ha-reason-box,
.ia-modal,
[class*="modal-box"],
[class*="modal-card"] {
  background: #ffffff !important;
  color: #1b1114 !important;
  border: 1px solid #e3d3d9 !important;
  box-shadow: 0 24px 70px rgba(41,17,25,.18) !important;
}

.modal-overlay,
.notes-modal-overlay,
.reason-modal-overlay,
.photo-modal-overlay,
.ia-modal-backdrop,
[class*="modal-overlay"],
[class*="modal-backdrop"] {
  background: rgba(25, 10, 15, .42) !important;
  backdrop-filter: blur(4px) !important;
}

.swal2-popup {
  background: #ffffff !important;
  color: #1b1114 !important;
  border: 1px solid #eadfe3 !important;
}
.swal2-title,
.swal2-html-container { color: #1b1114 !important; }
.swal2-confirm {
  background: #7A0019 !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* Dashboard charts/progress                                                   */
/* -------------------------------------------------------------------------- */
.kpi-progress,
.hr-progress,
.ia-rate-bar,
.att-bar,
.pr-str-track {
  background: #efe6e9 !important;
}
.kpi-progress-fill,
.hr-progress-fill,
.ia-rate-fill,
.pr-str-bar {
  background: #7A0019 !important;
}

.donut-swatch,
.legend-swatch,
.hr-swatch,
.att-legend-dot,
.ia-legend-dot {
  border-color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* Instructor-specific normalization                                           */
/* -------------------------------------------------------------------------- */
.idb,
.isch,
.iatt,
.pr {
  color: #1b1114 !important;
}

.idb-topbar,
.isch-header,
.ia-header,
.pr-head,
.section-head,
.ia-section-head {
  color: #1b1114 !important;
}

.class-details,
.isch-details,
.ia-record-details,
.pr-card-inner {
  background: #fbf8f9 !important;
  border-color: #eadfe3 !important;
}

/* -------------------------------------------------------------------------- */
/* HR-specific normalization                                                   */
/* -------------------------------------------------------------------------- */
.hrdb,
.hratt,
.hrsch {
  color: #1b1114 !important;
}

.hr-topbar,
.ha-header,
.hs-header {
  color: #1b1114 !important;
}

/* -------------------------------------------------------------------------- */
/* Login                                                                       */
/* -------------------------------------------------------------------------- */
.login-shell,
.auth-shell,
.login-page,
body.login-page {
  background: #ffffff !important;
}

/* Support the existing split login design without altering its logic. */
.login-left,
.login-brand-panel,
.auth-brand,
.login-hero,
[class*="login-visual"],
[class*="auth-visual"] {
  background: linear-gradient(145deg, #24040b 0%, #4a0010 48%, #7A0019 100%) !important;
  color: #ffffff !important;
}

.login-right,
.login-form-panel,
.auth-panel,
.login-form-wrap,
[class*="login-card"],
[class*="auth-card"] {
  background: #ffffff !important;
  color: #1b1114 !important;
}

/* -------------------------------------------------------------------------- */
/* Scrollbars                                                                  */
/* -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #c6afb7 #f6f1f3;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #f6f1f3; }
*::-webkit-scrollbar-thumb {
  background: #c6afb7;
  border-radius: 999px;
  border: 2px solid #f6f1f3;
}
*::-webkit-scrollbar-thumb:hover { background: #a77c89; }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .main-content {
    padding-left: clamp(18px, 2vw, 30px) !important;
    padding-right: clamp(18px, 2vw, 30px) !important;
  }
}

@media (max-width: 768px) {
  .sidebar {
    box-shadow: 18px 0 48px rgba(38,16,23,.15) !important;
  }

  .main-content {
    background: #f7f5f6 !important;
  }

  table th,
  table td {
    white-space: nowrap;
  }

  .inst-mobile-card,
  .sch-mobile-card,
  .rooms-mobile-card,
  .att-mobile-card,
  .ha-mobile-card,
  .hs-mobile-card,
  .class-card,
  .ia-record-card,
  .pr-card {
    border-radius: 16px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* FINAL hard-stop against the old yellow/gold accent on common page elements. */
/* -------------------------------------------------------------------------- */
.inst-title,
.sch-title,
.rooms-title,
.att-title,
.db-title,
.hr-title,
.ha-title,
.hs-title,
.idb-greeting,
.isch-title,
.ia-title,
.pr-head-title,
.set-title {
  color: #1b1114 !important;
}

.inst-stat-value,
.room-stat-value,
.stat-value,
.kpi-value,
.hr-kpi-value,
.hr-stat-value,
.ha-stat-value,
.hs-stat-value,
.ia-stat-value {
  color: #7A0019 !important;
}

/* Keep true green counts/statuses green where class explicitly says green. */
.green .inst-stat-value,
.green .room-stat-value,
.green .stat-value,
[class*="green"] .kpi-value,
[class*="green"] .hr-kpi-value,
[class*="green"] .ha-stat-value,
[class*="green"] .hs-stat-value,
[class*="green"] .ia-stat-value {
  color: #16824b !important;
}

/* Existing login.html exact class normalization */
body:has(.left):has(.right) {
  background: #ffffff !important;
}
.left {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(145deg, #21040a 0%, #4a0010 52%, #7A0019 100%) !important;
  color: #ffffff !important;
  border-right: 0 !important;
}
.left .brand-name,
.left .hero-title,
.left .hero-desc,
.left .hero-tag,
.left .feature,
.left .school-name,
.left .school-sub {
  color: #ffffff !important;
}
.left .hero-desc,
.left .school-sub { opacity: .78 !important; }
.left .feature-dot {
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.10) !important;
}
.right {
  background: #ffffff !important;
  color: #1b1114 !important;
}
.form-wrap {
  background: #ffffff !important;
  color: #1b1114 !important;
}
.form-eyebrow { color: #7A0019 !important; }
.form-title { color: #1b1114 !important; }
.form-sub,
.form-footer { color: #746169 !important; }
.field-label { color: #3d2d33 !important; }
.field-wrap,
.field-input {
  background: #ffffff !important;
  border-color: #d9c9ce !important;
  color: #1b1114 !important;
}
.field-wrap:focus-within {
  border-color: #a65d70 !important;
  box-shadow: 0 0 0 3px rgba(122,0,25,.075) !important;
}
.field-icon,
.pw-toggle { color: #8d747d !important; }
.submit-btn {
  background: #7A0019 !important;
  color: #ffffff !important;
  border-color: #7A0019 !important;
  box-shadow: 0 10px 22px rgba(122,0,25,.17) !important;
}
.submit-btn:hover { background: #5c0013 !important; }
.forgot { color: #7A0019 !important; }
.form-divider::before,
.form-divider::after { background: #eadfe3 !important; }
.flash { border-color: #eadfe3 !important; }

/* ============================================================================
   DFMROS Clean Professional Refinement v7
   Purpose:
   - remove decorative top/left accent strips from cards and navigation
   - keep a flat maroon / white / charcoal visual language
   - keep semantic green/red only for success/error states
   - normalize spacing, tables, panels and role pages (Admin / HR / Instructor)
   ============================================================================ */

/* ---- 1) Flat navigation: selected item uses color + soft fill only. -------- */
.nav-link.active,
.nav-link[aria-current="page"],
.sb-link.active,
.sidebar-link.active,
.instructor-nav-link.active,
.hr-nav-link.active,
[class*="nav-link"].active {
  box-shadow: none !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  background: #fff4f7 !important;
  color: #7A0019 !important;
}

.nav-link.active::before,
.nav-link.active::after,
.nav-link[aria-current="page"]::before,
.nav-link[aria-current="page"]::after,
.sb-link.active::before,
.sb-link.active::after,
.sidebar-link.active::before,
.sidebar-link.active::after,
.instructor-nav-link.active::before,
.instructor-nav-link.active::after,
.hr-nav-link.active::before,
.hr-nav-link.active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Sidebar itself stays simple and structural, without decorative rail/shadow. */
.sidebar,
.hr-sidebar,
.instructor-sidebar,
[class*="sidebar"] {
  box-shadow: none !important;
}

/* ---- 2) Remove colored strips from ALL summary/stat cards. ----------------- */
.kpi::before,
.stat-card::before,
.inst-stat-card::before,
.room-stat-card::before,
.hr-kpi::before,
.ha-stat::before,
.hs-stat::before,
.ia-stat::before,
.dev-stat-card::before,
.el-stat-card::before,
.nt-stat-card::before,
.hrinst-stat-card::before,
.hd-stat::before,
.rp-stat::before,
.dm-stat::before,
.set-stat::before,
.rep-stat-card::before,
.rep-stat-card::after,
.ed-stat-card::before,
.pf-header::before,
.en-instructor-card::before,
.en-instructor-card::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Also remove left status rails from responsive/mobile cards. Status remains
   visible through the badge/icon/text instead of a colored vertical stripe. */
.ha-mobile-card::before,
.hs-mobile-card::before,
.hd-mobile-card::before,
.rp-mobile-card::before,
.dm-card::before,
.ia-record-card::before,
.isch-card::before,
.class-card::before,
.nt-item.unread::before,
.row-absent::before,
.row-late::before,
.row-overtime::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- 3) Professional plain cards: no decorative gradients. ---------------- */
.kpi,
.stat-card,
.inst-stat-card,
.room-stat-card,
.hr-kpi,
.ha-stat,
.hs-stat,
.ia-stat,
.dev-stat-card,
.el-stat-card,
.nt-stat-card,
.hrinst-stat-card,
.hd-stat,
.rp-stat,
.dm-stat,
.set-stat,
.rep-stat-card,
.ed-stat-card,
.db-card,
.db-table-card,
.tbl-card,
.inst-card,
.sch-card,
.rooms-card,
.hr-card,
.ha-filter,
.ha-table-card,
.hs-filter,
.hs-table-card,
.ia-filter,
.ia-overview,
.pr-card,
.set-card,
[class*="summary-card"],
[class*="filter-card"],
[class*="table-card"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eadfe3 !important;
  border-top-color: #eadfe3 !important;
  border-left-color: #eadfe3 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(49, 22, 31, .045) !important;
}

/* Cards should not jump/fly on hover; keep interaction restrained. */
.kpi:hover,
.stat-card:hover,
.inst-stat-card:hover,
.room-stat-card:hover,
.hr-kpi:hover,
.ha-stat:hover,
.hs-stat:hover,
.ia-stat:hover,
.dev-stat-card:hover,
.el-stat-card:hover,
.nt-stat-card:hover,
.hrinst-stat-card:hover,
.hd-stat:hover,
.rp-stat:hover,
.dm-stat:hover,
.set-stat:hover,
.rep-stat-card:hover,
.ed-stat-card:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: #ddcfd4 !important;
  box-shadow: 0 5px 18px rgba(49, 22, 31, .055) !important;
}

/* ---- 4) Consistent page canvas / spacing for Admin, HR and Instructor. ----- */
.main-content,
.hr-main,
.instructor-main,
.page-content,
.content-wrap,
[class*="main-content"] {
  background: transparent !important;
}

.page-header,
.db-header,
.hr-header,
.inst-header,
.sch-header,
.rooms-header,
.ha-header,
.hs-header,
.ia-header,
.idb-header,
.isch-header,
.pr-header,
.rp-header,
.hd-header {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Summary grids adapt cleanly without oversized cards. */
.stats-grid,
.inst-stats-grid,
.room-stats-grid,
.el-stats-grid,
.hrinst-stats-grid,
.nt-stats,
.hr-kpis,
.ha-stats,
.hs-stats,
.ia-stats,
.hd-stats,
.rp-stats,
.dm-stats {
  gap: 14px !important;
}

/* ---- 5) Tables: simple, readable, properly separated rows. ---------------- */
.table-scroll,
.tbl-scroll,
.inst-table-wrap,
.sch-scroll,
.rooms-table-wrap,
.hr-table-scroll,
.ha-table-scroll,
.hs-table-scroll,
[class*="table-wrap"],
[class*="table-scroll"] {
  background: #ffffff !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: none !important;
}

table,
.att-table,
.inst-table,
.sch-tbl,
.rooms-table,
.hr-table,
.ha-table,
.hs-table,
.att-tbl {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table thead th,
.att-table thead th,
.inst-table thead th,
.sch-tbl thead th,
.rooms-table thead th,
.hr-table thead th,
.ha-table thead th,
.hs-table thead th,
.att-tbl thead th {
  background: #fbf8f9 !important;
  color: #6f5c63 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #d9cbd0 !important;
  box-shadow: none !important;
}

table tbody td,
.att-table tbody td,
.inst-table tbody td,
.sch-tbl tbody td,
.rooms-table tbody td,
.hr-table tbody td,
.ha-table tbody td,
.hs-table tbody td,
.att-tbl tbody td {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 1px solid #eee5e8 !important;
}

table tbody tr:hover td,
.att-table tbody tr:hover td,
.inst-table tbody tr:hover td,
.sch-tbl tbody tr:hover td,
.rooms-table tbody tr:hover td,
.hr-table tbody tr:hover td,
.ha-table tbody tr:hover td,
.hs-table tbody tr:hover td,
.att-tbl tbody tr:hover td {
  background: #fffafb !important;
}

/* Table/card headers are plain white, not accented by a colored top rule. */
.table-topbar,
.tbl-head-row,
.inst-card-head,
.sch-card-head,
.rooms-card-head,
.hr-card-head,
.ha-table-head,
.hs-table-head,
[class*="table-head"],
[class*="card-head"] {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 1px solid #eadfe3 !important;
  box-shadow: none !important;
}

/* ---- 6) Filters / controls: flatter and consistent. ----------------------- */
input,
select,
textarea,
.inp,
.inst-inp,
.search-input,
.filter-input,
[class*="search"],
[class*="select"] {
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.inp:focus,
.inst-inp:focus,
.search-input:focus,
.filter-input:focus {
  border-color: rgba(122, 0, 25, .38) !important;
  box-shadow: 0 0 0 3px rgba(122, 0, 25, .07) !important;
}

/* ---- 7) Buttons: no ornamental gradient; maroon primary, white secondary. -- */
.btn-primary,
.inst-add-btn,
.add-sched-btn,
.room-add-btn,
.room-btn-primary,
.notes-save-btn,
.ia-btn-primary,
.pr-btn-primary,
.set-btn-primary,
[class*="btn-theme"],
[class*="primary-btn"] {
  background: #7A0019 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.inst-add-btn:hover,
.add-sched-btn:hover,
.room-add-btn:hover,
.room-btn-primary:hover,
.ia-btn-primary:hover,
.pr-btn-primary:hover,
.set-btn-primary:hover,
[class*="btn-theme"]:hover,
[class*="primary-btn"]:hover {
  background: #5c0013 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- 8) Keep colors meaningful, not decorative. --------------------------- */
/* Success/available = green; error/delete = red; everything else = maroon. */
.badge-success,
.badge-active,
.badge-available,
.status-active,
.status-available {
  color: #167a49 !important;
}

.badge-danger,
.badge-inactive,
.status-inactive,
.status-error,
.status-rejected {
  color: #c83248 !important;
}

/* Any old gold/yellow text-only accents become maroon unless they are a
   semantic warning state that has its own explicit warning class. */
.text-gold,
.text-amber:not(.warning):not(.status-warning),
.gold,
.amber:not(.warning):not(.status-warning) {
  color: #7A0019 !important;
}

/* ---- 9) Mobile role pages: same flat language. ----------------------------- */
.inst-mobile-card,
.sch-mobile-card,
.rooms-mobile-card,
.att-mobile-card,
.ha-mobile-card,
.hs-mobile-card,
.class-card,
.isch-week-item,
.isch-card,
.ia-record-card,
.hd-mobile-card,
.rp-mobile-card,
.dm-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eadfe3 !important;
  border-left-color: #eadfe3 !important;
  border-top-color: #eadfe3 !important;
  box-shadow: 0 3px 12px rgba(49,22,31,.035) !important;
}

/* ---- 10) Do not reintroduce decorative rails through legacy inline CSS. ---- */
[class*="stat"] {
  border-top-color: #eadfe3 !important;
}

@media (max-width: 760px) {
  .nav-link.active,
  .nav-link[aria-current="page"] {
    box-shadow: none !important;
  }

  .kpi,
  .stat-card,
  .inst-stat-card,
  .room-stat-card,
  .hr-kpi,
  .ha-stat,
  .hs-stat,
  .ia-stat,
  .dev-stat-card,
  .el-stat-card,
  .nt-stat-card,
  .hrinst-stat-card,
  .hd-stat,
  .rp-stat,
  .dm-stat,
  .set-stat,
  .rep-stat-card,
  .ed-stat-card {
    border-radius: 13px !important;
    box-shadow: 0 3px 12px rgba(49,22,31,.035) !important;
  }
}


/* ============================================================================
   DFMROS Professional Refinement v8
   - persistent selected sidebar outline (no accent rail)
   - neutral card borders (no colored top rules)
   - high-contrast white icons on maroon icon containers
   - consistent interaction/focus states across Admin / HR / Instructor
   ============================================================================ */

/* 1) Sidebar: selected item remains visibly selected after click/navigation. */
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"],
.sidebar .nav-link.is-current,
.hr-sidebar .nav-link.active,
.hr-sidebar .nav-link[aria-current="page"],
.hr-sidebar .nav-link.is-current,
.instructor-sidebar .nav-link.active,
.instructor-sidebar .nav-link[aria-current="page"],
.instructor-sidebar .nav-link.is-current,
#sidebar .nav-link.active,
#sidebar .nav-link[aria-current="page"],
#sidebar .nav-link.is-current {
  background: #fff3f6 !important;
  color: #7A0019 !important;
  border: 1px solid #e5c4ce !important;
  box-shadow: none !important;
  outline: none !important;
}

.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:focus,
.sidebar .nav-link.active:focus-visible,
.sidebar .nav-link.active:active,
.sidebar .nav-link.is-current:hover,
.sidebar .nav-link.is-current:focus,
.sidebar .nav-link.is-current:focus-visible,
.sidebar .nav-link.is-current:active,
#sidebar .nav-link.active:hover,
#sidebar .nav-link.active:focus,
#sidebar .nav-link.active:focus-visible,
#sidebar .nav-link.active:active,
#sidebar .nav-link.is-current:hover,
#sidebar .nav-link.is-current:focus,
#sidebar .nav-link.is-current:focus-visible,
#sidebar .nav-link.is-current:active {
  background: #fff0f4 !important;
  color: #650015 !important;
  border-color: #d9aeba !important;
  box-shadow: none !important;
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link.active .nav-label,
.sidebar .nav-link.active svg,
.sidebar .nav-link.is-current .nav-icon,
.sidebar .nav-link.is-current .nav-label,
.sidebar .nav-link.is-current svg,
#sidebar .nav-link.active .nav-icon,
#sidebar .nav-link.active .nav-label,
#sidebar .nav-link.active svg,
#sidebar .nav-link.is-current .nav-icon,
#sidebar .nav-link.is-current .nav-label,
#sidebar .nav-link.is-current svg {
  color: #7A0019 !important;
  stroke: currentColor !important;
}

.sidebar .nav-link.active::before,
.sidebar .nav-link.active::after,
.sidebar .nav-link.is-current::before,
.sidebar .nav-link.is-current::after,
#sidebar .nav-link.active::before,
#sidebar .nav-link.active::after,
#sidebar .nav-link.is-current::before,
#sidebar .nav-link.is-current::after {
  content: none !important;
  display: none !important;
}

/* 2) Cards/containers: remove remaining page-specific colored top rules. */
.if-card,
.if-card-login,
.ie-card,
.set-card,
.en-card,
.en-card-face,
.en-card-fp,
.db-card,
.db-table-card,
.inst-card,
.sch-card,
.rooms-card,
.hr-card,
.ha-filter,
.ha-table-card,
.hs-filter,
.hs-table-card,
.ia-filter,
.ia-overview,
.ia-record-card,
.pr-card,
.dev-card,
.el-card,
.nt-card,
.rp-card,
.hd-card,
.dm-card,
.isch-card,
.class-card,
[class*="summary-card"],
[class*="filter-card"],
[class*="table-card"] {
  background: #ffffff !important;
  background-image: none !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: #eadfe3 !important;
  border-left-color: #eadfe3 !important;
  border-right-color: #eadfe3 !important;
  border-bottom-color: #eadfe3 !important;
  box-shadow: 0 4px 14px rgba(49,22,31,.04) !important;
}

.if-page [style*="border-top:2px"],
.if-page [style*="border-top: 2px"] {
  border-top: 1px solid #eadfe3 !important;
  background-image: none !important;
}

.en-card-face,
.en-card-fp {
  border-top: 1px solid #eadfe3 !important;
}

th.th-in,
th.th-out,
th.th-dur,
table thead th,
.att-table thead th,
.inst-table thead th,
.sch-tbl thead th,
.rooms-table thead th,
.hr-table thead th,
.ha-table thead th,
.hs-table thead th,
.att-tbl thead th {
  border-top: 0 !important;
}

.set-toast-preview,
[class*="toast-preview"],
[class*="message-preview"] {
  border-left-width: 1px !important;
  border-left-color: #eadfe3 !important;
}

/* 3) High-contrast icon containers. */
.ie-card-icon,
.dz-icon,
.set-card-icon,
.pf-section-icon,
.modal-title-icon,
.dm-modal-icon,
.dm-note-icon,
.ha-reason-icon,
.nd-icon,
.dev-device-icon {
  background: #7A0019 !important;
  color: #ffffff !important;
  border: 1px solid #7A0019 !important;
  box-shadow: none !important;
}

.ie-card-icon svg,
.ie-card-icon svg *,
.dz-icon svg,
.dz-icon svg *,
.set-card-icon svg,
.set-card-icon svg *,
.pf-section-icon svg,
.pf-section-icon svg *,
.modal-title-icon svg,
.modal-title-icon svg *,
.dm-modal-icon svg,
.dm-modal-icon svg *,
.dm-note-icon svg,
.dm-note-icon svg *,
.ha-reason-icon svg,
.ha-reason-icon svg *,
.nd-icon svg,
.nd-icon svg *,
.dev-device-icon svg,
.dev-device-icon svg * {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.ie-card-icon.ci-amber,
.ie-card-icon.ci-green,
.ie-card-icon.ci-purple,
.ie-card-icon.ci-cyan,
.ie-card-icon.ci-blue,
.ie-card-icon.ci-rose,
.ie-card-icon.ci-sky,
.ie-card-icon.ci-teal {
  background: #7A0019 !important;
  color: #ffffff !important;
  border-color: #7A0019 !important;
}

/* Primary/selected buttons: icon follows white button text. */
.btn-primary svg,
.btn-primary svg *,
.ie-root .btn-primary svg,
.ie-root .btn-primary svg *,
.ie-tab-btn.active svg,
.ie-tab-btn.active svg *,
.set-btn-primary svg,
.set-btn-primary svg *,
[class*="btn-primary"] svg,
[class*="btn-primary"] svg *,
[class*="-btn-theme"] svg,
[class*="-btn-theme"] svg * {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.ie-tab-btn.tab-import.active,
.ie-tab-btn.tab-export.active {
  background: #7A0019 !important;
  color: #ffffff !important;
  border: 1px solid #7A0019 !important;
  box-shadow: 0 6px 14px rgba(122,0,25,.12) !important;
}
.ie-tab-btn.tab-import.active svg,
.ie-tab-btn.tab-export.active svg,
.ie-tab-btn.tab-import.active svg *,
.ie-tab-btn.tab-export.active svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 4) Keep icon-only actions readable and restrained. */
.icon-action,
.icon-btn,
.room-icon-btn,
.sch-action-btn,
.room-action-btn,
.inst-action-btn,
.dev-icon-btn,
.ed-icon-btn,
.hd-icon-btn {
  box-shadow: none !important;
}

[style*="background:#7A0019"] svg,
[style*="background: #7A0019"] svg,
[style*="background:var(--primary)"] svg,
[style*="background: var(--primary)"] svg,
[style*="background:var(--maroon)"] svg,
[style*="background: var(--maroon)"] svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* 5) Focus treatment. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(122,0,25,.28) !important;
  outline-offset: 2px !important;
}

.sidebar .nav-link:focus-visible,
#sidebar .nav-link:focus-visible {
  outline: none !important;
  border-color: #d9aeba !important;
  background: #fff3f6 !important;
  color: #7A0019 !important;
}

/* 6) Flat card language: no decorative gradients on normal cards. */
.if-card,
.ie-card,
.set-card,
.en-card,
[class*="-card"] {
  background-image: none !important;
}

/* V9 note: final flat overrides are injected after page-local styles from
   templates/_v9_flat_overrides.html to prevent legacy page CSS from winning. */