/* ---- Mobile responsiveness / overflow audit ----
   None of EEI's markup declared box-sizing before this fix, so any element
   combining width:100% with padding/border (every form input, the cards
   themselves, buttons) computed WIDER than its container under the browser
   default (content-box) -- padding was added on top of the 100% width
   instead of being carved out of it. That is the direct, underlying cause
   of content spilling past the viewport on narrow screens (the Question
   Bank form and CSV import block were simply where it was most visible).
   Scoped to elements whose class/id contains "eei-" -- this plugin's
   exclusive naming convention -- so it can never affect the surrounding
   theme/site, and applied to their descendants too so unclassed inputs,
   labels, etc. nested inside an EEI container are covered.
   min-width:0 undoes the flex/grid default (min-width:auto) that stops a
   flex/grid child from shrinking below its content's natural width --
   the other classic cause of a container (a modal, a filter bar, the CBT
   header) refusing to shrink to fit a narrow screen and forcing the whole
   page to scroll horizontally.
   overflow-wrap:break-word lets an unbroken long string (the CSV column
   list, a long URL/email, a question with no spaces) wrap inside its box
   instead of forcing it wider -- deliberately not overflow-x:hidden,
   which would hide the content instead of fixing its layout. */
[class*="eei-"],
[class*="eei-"] *,
[id*="eei-"],
[id*="eei-"] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Table cells intentionally keep white-space:nowrap (see .eei-table below)
   and manage overflow via their own scroll container, not via wrapping. */
.eei-table th, .eei-table td { min-width: auto; }

.eei-card {
  background: var(--wp--preset--color--paper, #FAFAF7);
  border: 1px solid rgba(24,36,68,0.12);
  padding: 28px 24px;
  margin-bottom: 24px;
  max-width: 700px;
  width: 100%;
}
.eei-card code, .eei-card pre {
  /* Guards against a theme's global `code { white-space: pre; }` reset,
     which would otherwise force the CSV column list back onto one
     unbreakable line regardless of the rule above. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.eei-card h3 {
  font-family: var(--wp--preset--font-family--heading, serif);
  color: var(--wp--preset--color--ink, #182444);
  margin-bottom: 16px;
}
.eei-card input,
.eei-card select,
.eei-card textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(24,36,68,0.2);
  font-family: inherit;
  font-size: 15px;
}
.eei-card button {
  background: var(--wp--preset--color--brass, #B8863A);
  color: var(--wp--preset--color--ink, #182444);
  border: none;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
}
.eei-card button:hover { opacity: 0.9; }

.eei-form-msg { font-size: 14px; min-height: 20px; }
.eei-form-note {
  font-size: 13px;
  color: var(--wp--preset--color--slate, #4A5266);
  background: var(--wp--preset--color--chalk, #EFF1EC);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.eei-auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.eei-tab-btn {
  flex: 1; padding: 10px; border: 1px solid var(--wp--preset--color--ink, #182444);
  background: transparent; cursor: pointer; font-weight: 600;
}
.eei-tab-btn.active { background: var(--wp--preset--color--ink, #182444); color: #fff; }
.eei-forgot-link { font-size: 13px; display: inline-block; margin-top: 8px; }

.eei-question-row, .eei-portal-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(24,36,68,0.1);
}
.eei-delete-q, .eei-delete-result {
  background: transparent; border: 1px solid #b91c1c; color: #b91c1c;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.eei-toggle-flag {
  background: transparent; border: 1px solid var(--wp--preset--color--brass, #B8863A);
  color: var(--wp--preset--color--brass, #B8863A); padding: 4px 10px; font-size: 12px; cursor: pointer;
  margin-right: 6px;
}
.eei-flag-badge {
  background: var(--wp--preset--color--brass, #B8863A); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; letter-spacing: 0.04em;
}

.eei-timer {
  font-weight: 700; color: var(--wp--preset--color--brass, #B8863A);
  margin-bottom: 16px; font-size: 18px;
}
.eei-question { margin-bottom: 20px; }
.eei-question label { display: block; margin: 4px 0; }

.eei-table { width: 100%; border-collapse: collapse; margin-top: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eei-table th, .eei-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(24,36,68,0.1); font-size: 14px; white-space: nowrap;
}

.eei-user-nav {
  position: relative;
  display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: nowrap;
  padding: 8px 12px; background: var(--wp--preset--color--chalk, #EFF1EC);
  border: 1px solid rgba(24,36,68,0.1);
}
.eei-nav-toggle {
  background: var(--wp--preset--color--ink, #182444); color: #fff;
  border: none; padding: 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.eei-nav-hamburger { font-size: 15px; line-height: 1; }
.eei-nav-hi {
  font-weight: 700; color: var(--wp--preset--color--ink, #182444);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eei-nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: #fff; border: 1px solid rgba(24,36,68,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  min-width: 220px; max-width: 90vw; z-index: 200; padding: 6px 0;
}
.eei-nav-dropdown a {
  display: block; padding: 10px 16px; color: var(--wp--preset--color--ink, #182444);
  font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(24,36,68,0.06);
}
.eei-nav-dropdown a:last-child { border-bottom: none; }
.eei-nav-dropdown a:hover { background: var(--wp--preset--color--chalk, #EFF1EC); }
.eei-nav-dropdown .eei-nav-logout { color: #b91c1c; }
.eei-user-nav .eei-notif-widget { margin-left: auto; }
@media (max-width: 500px) {
  .eei-nav-hi { max-width: 90px; }
}

.eei-qb-wide { max-width: 900px; }
.eei-qb-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.eei-qb-filters select, .eei-qb-filters input { width: auto; margin-bottom: 0; }
.eei-qb-bulk-bar { margin-bottom: 10px; }
.eei-qb-bulk-bar button { background: transparent; border: 1px solid #b91c1c; color: #b91c1c; margin-right: 8px; }
.eei-qb-option-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.eei-qb-option-row input[type="text"] { margin-bottom: 0; }
.eei-exam-section { border: 1px solid rgba(24,36,68,0.15); padding: 14px; margin-bottom: 12px; }
.eei-exam-section h4 { margin-bottom: 8px; }
.eei-grade-row { display: flex; gap: 8px; margin-bottom: 8px; }
.eei-grade-row input { margin-bottom: 0; }

/* ---- CBT Exam Interface ---- */
.eei-exam-list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid rgba(24,36,68,0.1);
}
.eei-cbt-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  background: var(--wp--preset--color--ink, #182444); color: #fff;
  padding: 14px 20px; margin-bottom: 0;
}
.eei-cbt-header > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 140px; }
.eei-cbt-header .eei-timer {
  font-size: 20px; font-weight: 700; color: var(--wp--preset--color--brass-light, #D4A857);
}
.eei-save-status {
  font-size: 12px; color: #cbd0e0; opacity: 0.85; min-width: 60px; text-align: right;
}
.eei-cbt-body {
  display: flex; gap: 0; border: 1px solid rgba(24,36,68,0.15); min-height: 500px;
}
.eei-cbt-question-area { flex: 1; padding: 28px; }
.eei-cbt-subject-tag {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wp--preset--color--brass, #B8863A); margin-bottom: 14px;
}
.eei-cbt-question-text { font-size: 18px; margin-bottom: 22px; line-height: 1.5; }
.eei-cbt-option {
  display: block; padding: 12px 14px; border: 1px solid rgba(24,36,68,0.15);
  margin-bottom: 10px; cursor: pointer;
}
.eei-cbt-option:hover { background: var(--wp--preset--color--chalk, #EFF1EC); }
.eei-cbt-controls { margin-top: 24px; display: flex; gap: 10px; }
.eei-cbt-nav-panel {
  width: 260px; background: var(--wp--preset--color--chalk, #EFF1EC); padding: 20px; flex-shrink: 0;
}
.eei-cbt-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px;
}
.eei-grid-cell {
  aspect-ratio: 1; border: 1px solid rgba(24,36,68,0.2); background: #fff;
  cursor: pointer; font-weight: 600; font-size: 13px; position: relative;
}
.eei-dot-answered, .eei-grid-cell.eei-dot-answered { background: #DCFCE7; border-color: #15803d; }
.eei-dot-flagged, .eei-grid-cell.eei-dot-flagged { background: #FEE2E2; border-color: #b91c1c; }
.eei-dot-answered-flagged, .eei-grid-cell.eei-dot-answered-flagged { background: #DCFCE7; border-color: #b91c1c; border-width: 2px; }
.eei-grid-current { outline: 2px solid var(--wp--preset--color--ink, #182444); outline-offset: 1px; }
/* Non-colour cues: answered/flagged state is never conveyed by colour alone
   -- a checkmark or flag glyph sits in the corner of the cell, and the
   aria-label (see eei-cbt.js) spells the state out in words for screen
   readers, independent of either. */
.eei-grid-mark {
  position: absolute; top: -4px; right: -4px; font-size: 9px; line-height: 1;
  background: #fff; border-radius: 50%; width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(24,36,68,0.3);
}
.eei-grid-mark-flag { color: #b91c1c; }
.eei-cbt-legend { font-size: 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.eei-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.eei-cbt-legend .eei-dot-answered { background: #DCFCE7; border: 1px solid #15803d; }
.eei-cbt-legend .eei-dot-flagged { background: #FEE2E2; border: 1px solid #b91c1c; }
.eei-cbt-legend .eei-dot-neutral { background: #fff; border: 1px solid rgba(24,36,68,0.2); }
#eei-cbt-end-btn { width: 100%; background: #b91c1c; color: #fff; }

.eei-cbt-sections-strip {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px;
  background: var(--wp--preset--color--chalk, #EFF1EC); border-bottom: 1px solid rgba(24,36,68,0.15);
}
.eei-section-pill {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(24,36,68,0.2);
}
.eei-section-current { background: var(--wp--preset--color--ink, #182444); color: #fff; border-color: var(--wp--preset--color--ink, #182444); }
.eei-section-locked { background: #fff; color: rgba(24,36,68,0.4); text-decoration: line-through; }
.eei-section-upcoming { background: #fff; color: rgba(24,36,68,0.6); }

.eei-cbt-sections-strip:empty { display: none; padding: 0; border: none; }
/* Subject nav bar for an overall-timer, multi-subject exam (e.g. one
   attempt spanning English/Mathematics/Chemistry/Physics) -- unlike the
   locked section pills above, these are ordinary clickable tabs: any
   subject can be switched to at any time. */
.eei-subject-tab {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer;
  color: var(--wp--preset--color--ink, #182444);
}
.eei-subject-tab:hover { background: rgba(24,36,68,0.06); }
.eei-subject-tab-active {
  border-bottom-color: var(--wp--preset--color--brass, #B8863A);
  color: var(--wp--preset--color--brass, #B8863A);
}
.eei-cbt-attempted-count {
  font-size: 12px; font-weight: 700; background: #fff;
  padding: 6px 10px; margin-bottom: 12px; text-align: center;
  border: 1px solid rgba(24,36,68,0.2);
}

.eei-cbt-overlay {
  position: fixed; inset: 0; background: rgba(24,36,68,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.eei-cbt-modal { max-width: 400px; }
.eei-cbt-modal button { margin-right: 8px; margin-top: 12px; }
/* Several modals set their own inline max-width (400-600px) for desktop;
   this caps every modal card to the viewport regardless of that inline
   value, so a phone narrower than the inline max-width never has to
   scroll the page horizontally to see the rest of the dialog. */
.eei-cbt-overlay .eei-card { width: min(100%, calc(100vw - 32px)); }

@media (max-width: 700px) {
  .eei-cbt-body { flex-direction: column; }
  .eei-cbt-nav-panel { width: auto; }
}

/* ---- Analytics / dashboards ---- */
.eei-summary-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.eei-summary-card {
  background: var(--wp--preset--color--chalk, #EFF1EC); padding: 16px 20px; min-width: 130px;
  text-align: center;
}
.eei-summary-card span { display: block; font-size: 26px; font-weight: 700; color: var(--wp--preset--color--ink, #182444); }
.eei-summary-card label { font-size: 12px; color: var(--wp--preset--color--slate, #4A5266); text-transform: uppercase; letter-spacing: 0.04em; }

.eei-subject-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.eei-subject-bar-row span:first-child { width: 120px; flex-shrink: 0; }
.eei-subject-bar { flex: 1; height: 10px; background: var(--wp--preset--color--chalk, #EFF1EC); }
.eei-subject-bar-fill { height: 100%; background: var(--wp--preset--color--brass, #B8863A); }
.eei-trend-chart { background: var(--wp--preset--color--paper, #FAFAF7); border: 1px solid rgba(24,36,68,0.1); margin-bottom: 4px; }

/* ---- Notifications ---- */
.eei-notif-widget { position: relative; display: inline-block; }
#eei-notif-bell { background: transparent; border: 1px solid var(--wp--preset--color--ink, #182444); color: var(--wp--preset--color--ink, #182444); padding: 6px 12px; font-size: 13px; }
.eei-notif-badge { background: #b91c1c; color: #fff; border-radius: 50%; padding: 1px 6px; font-size: 11px; margin-left: 4px; }
.eei-notif-dropdown {
  position: absolute; right: 0; top: 100%; width: 320px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid rgba(24,36,68,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000;
}
.eei-notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid rgba(24,36,68,0.08); cursor: pointer; font-size: 13px; }
.eei-notif-icon { font-size: 16px; flex-shrink: 0; }
.eei-notif-body { flex: 1; min-width: 0; }
.eei-notif-body p { margin: 0; }
.eei-notif-date { display: block; font-size: 11px; color: var(--wp--preset--color--slate, #4A5266); margin-top: 2px; }
.eei-notif-delete { background: none; border: none; color: var(--wp--preset--color--slate, #4A5266); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.eei-notif-delete:hover { color: #b91c1c; }
.eei-notif-unread { background: var(--wp--preset--color--chalk, #EFF1EC); font-weight: 600; }
.eei-notif-empty { padding: 20px 14px; text-align: center; color: var(--wp--preset--color--slate, #4A5266); font-size: 13px; }
.eei-notif-actions { display: flex; }
.eei-notif-actions button { flex: 1; font-size: 12px; padding: 8px; background: var(--wp--preset--color--chalk, #EFF1EC); border: none; border-top: 1px solid rgba(24,36,68,0.08); cursor: pointer; }

/* ---- Materials ---- */
.eei-material-item { border-bottom: 1px solid rgba(24,36,68,0.1); padding: 14px 0; }
.eei-mat-type { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--brass, #B8863A); font-weight: 700; margin-left: 8px; }
.eei-mat-date { font-size: 12px; color: var(--wp--preset--color--slate, #4A5266); }

/* ---- Manual grading queue ---- */
.eei-grading-item { border: 1px solid rgba(24,36,68,0.15); padding: 16px; margin-bottom: 14px; background: var(--wp--preset--color--paper, #FAFAF7); }
.eei-grading-meta { font-size: 13px; margin-bottom: 8px; color: var(--wp--preset--color--slate, #4A5266); }
.eei-grading-question { font-weight: 600; margin-bottom: 10px; }
.eei-grading-answer { background: var(--wp--preset--color--chalk, #EFF1EC); padding: 12px; margin-bottom: 12px; white-space: pre-wrap; }
.eei-grading-controls { display: flex; align-items: center; gap: 14px; }
.eei-grading-controls input { width: 80px; display: inline-block; margin-bottom: 0; margin-left: 6px; }

/* ---- Exam student assignment panel ---- */
#eei-student-checklist { max-height: 240px; overflow-y: auto; border: 1px solid rgba(24,36,68,0.1); padding: 8px; margin: 10px 0; }
.eei-student-check-row { display: block; padding: 4px 0; font-size: 13px; }

/* ---- Profile ---- */
.eei-profile-readonly { background: var(--wp--preset--color--chalk, #EFF1EC); padding: 12px 16px; margin: 14px 0; font-size: 13px; }
.eei-profile-readonly p { margin-bottom: 4px; }
#eei-profile-photo-wrap { margin-bottom: 16px; }
.eei-verified-banner { background: #DCFCE7; border: 1px solid #15803d; color: #15803d; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.eei-nav-item-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(24,36,68,0.08); font-size: 13px; }
.eei-nav-item-row button { padding: 3px 8px; font-size: 12px; margin-left: 4px; }


/* ---- Professional CBT refinements ---- */
.eei-save-status { font-size: 12px; min-width: 120px; text-align: right; }
.eei-grid-cell { min-width: 34px; min-height: 34px; border: 1px solid rgba(24,36,68,0.15); cursor: pointer; }
.eei-grid-current { outline: 3px solid rgba(184,134,58,0.35); outline-offset: 1px; font-weight: 700; }
.eei-grid-cell:focus-visible, .eei-notif-item:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(184,134,58,0.55); outline-offset: 2px; }
.eei-dot-answered-flagged { background: #DCFCE7; border: 2px solid #b91c1c; }
.eei-cbt-question-area img { max-width: 100%; height: auto; display: block; margin: 12px 0; }
.eei-notif-dropdown { max-width: min(420px, calc(100vw - 24px)); }
.eei-notif-item { position: relative; }
@media (max-width: 600px) {
  .eei-notif-dropdown { position: fixed; right: 12px; top: 58px; width: min(420px, calc(100vw - 24px)); max-height: 70vh; }
  .eei-cbt-controls { flex-wrap: wrap; }
  .eei-cbt-controls button { flex: 1 1 auto; min-height: 44px; }
  .eei-grid-cell { min-width: 38px; min-height: 38px; }
}

.eei-notif-mark { background:none; border:0; cursor:pointer; padding:0 3px; font-size:13px; color:var(--wp--preset--color--slate,#4A5266); }

/* Student Management -- class/gender filters + total count + Excel export */
.eei-student-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.eei-student-total {
  margin: 0;
  font-weight: 700;
  color: var(--wp--preset--color--ink, #182444);
}
#eei-export-students-btn {
  background: #15803d;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
#eei-export-students-btn:hover { opacity: 0.9; }

/* ---- Blueprint Engine (Prompt 6) ---- */
.eei-bp-rule {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid rgba(24,36,68,0.15);
  padding: 10px;
  margin-bottom: 8px;
}
.eei-bp-rule select, .eei-bp-rule input { width: auto; margin-bottom: 0; }
.eei-bp-rule-count { width: 130px !important; }
.eei-bp-remove-rule { background: transparent; border: 1px solid #b91c1c; color: #b91c1c; }

/* ---- Mobile responsiveness pass (staging round 1) ----
   Layout-level fixes only (see the box-sizing/min-width/overflow-wrap
   rules near the top of this file for the underlying overflow causes).
   These are presentation refinements for small screens: less cramped
   card padding, comfortably tappable controls, and filter/action bars
   that stack instead of forcing a scroll. Desktop/tablet rules above are
   untouched, so nothing here changes layout above the breakpoint. */
@media (max-width: 480px) {
  .eei-card { padding: 18px 16px; }
  .eei-card button,
  .eei-qb-filters button,
  .eei-qb-bulk-bar button {
    min-height: 44px; /* comfortable tap target */
  }
  .eei-qb-filters, .eei-grade-row, .eei-bp-rule {
    flex-direction: column;
    align-items: stretch;
  }
  .eei-qb-filters select, .eei-qb-filters input,
  .eei-grade-row input,
  .eei-bp-rule select, .eei-bp-rule input {
    width: 100%;
  }
  .eei-question-row, .eei-portal-list li, .eei-exam-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .eei-grading-controls { flex-wrap: wrap; }
}

/* ==========================================================
   Enrollment -> Approval -> Activation redesign (staging round 2)
   ========================================================== */

/* Account-activation (password setup) page -- reuses .eei-auth-wrap/.eei-card
   for visual consistency with the login page, so this is intentionally a
   small addition rather than a parallel set of styles. */
.eei-activate-wrap .eei-card { max-width: 420px; margin: 0 auto; }
.eei-activate-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.eei-activate-continue {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 12px 18px;
  background: var(--wp--preset--color--ink, #182444);
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: opacity 0.15s ease;
}
.eei-activate-continue:hover { opacity: 0.88; }

/* Enrollment-applications / Student-management status text, shown next to
   the emoji status indicators already inline in the PHP/JS -- text +
   icon together, never colour alone (spec item #23). */
#eei-enrollment-table td small { color: #4A5266; display: block; margin-top: 2px; }

/* Unified role-based Management page */

/* ---- Management: professional administrative console ---- */
.eei-management {
  --eei-mgmt-ink: var(--wp--preset--color--ink, #182444);
  --eei-mgmt-brass: var(--wp--preset--color--brass, #B8863A);
  --eei-mgmt-chalk: var(--wp--preset--color--chalk, #EFF1EC);
  --eei-mgmt-paper: var(--wp--preset--color--paper, #FAFAF7);
  --eei-mgmt-muted: var(--wp--preset--color--slate, #4A5266);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  color: var(--eei-mgmt-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
.eei-management * { box-sizing: border-box; }

.eei-management-header {
  margin: 0 0 26px;
  padding: 28px 30px;
  background: linear-gradient(135deg, var(--eei-mgmt-ink), #24345f);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24,36,68,.12);
}
.eei-management-header h2 {
  margin: 0 0 7px;
  color: #fff !important;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.02em;
}
.eei-management-header p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  max-width: 760px;
}

.eei-management-sections { display: grid; gap: 20px; }
.eei-management-section {
  background: var(--eei-mgmt-paper);
  border: 1px solid rgba(24,36,68,.11);
  border-radius: 12px;
  padding: 22px;
  margin: 0;
  box-shadow: 0 3px 14px rgba(24,36,68,.055);
  overflow: hidden;
}
.eei-management-section:hover {
  border-color: rgba(24,36,68,.18);
}
.eei-management-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.eei-management-section-head > div:first-child { min-width: 0; }
.eei-management-section-head h3 {
  margin: 0 0 4px;
  color: var(--eei-mgmt-ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.01em;
}
.eei-management-section-head p {
  margin: 0;
  color: var(--eei-mgmt-muted);
  font-size: 13px;
  line-height: 1.5;
}
.eei-management-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px;
  background: rgba(239,241,236,.62);
  border: 1px solid rgba(24,36,68,.07);
  border-radius: 9px;
}
.eei-management-toolbar input,
.eei-management-toolbar select {
  width: auto;
  min-width: 220px;
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(24,36,68,.18);
  border-radius: 7px;
  background: #fff;
  color: var(--eei-mgmt-ink);
  font: inherit;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(24,36,68,.03);
}
.eei-management-toolbar input:focus,
.eei-management-toolbar select:focus,
.eei-management-user-form input:focus,
.eei-management-user-form select:focus {
  outline: 2px solid rgba(184,134,58,.24);
  outline-offset: 1px;
  border-color: var(--eei-mgmt-brass);
}
.eei-management-toolbar input::placeholder { color: #788094; }
.eei-management-scope {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(24,36,68,.12);
  color: var(--eei-mgmt-muted);
  font-size: 13px;
  font-weight: 650;
}

.eei-management-add,
.eei-management-user-form button[type="submit"] {
  min-height: 42px;
  border: 1px solid var(--eei-mgmt-brass);
  border-radius: 7px;
  padding: 9px 15px;
  background: var(--eei-mgmt-brass);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(24,36,68,.10);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
}
.eei-management-add:hover,
.eei-management-user-form button[type="submit"]:hover {
  background: #a8752e;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(24,36,68,.13);
}
.eei-management-add:active,
.eei-management-user-form button[type="submit"]:active {
  transform: translateY(0);
}
.eei-management-add:focus-visible,
.eei-management-action:focus-visible,
.eei-management-modal-close:focus-visible {
  outline: 3px solid rgba(184,134,58,.30);
  outline-offset: 2px;
}

.eei-management-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(24,36,68,.09);
  border-radius: 9px;
  background: #fff;
}
.eei-management-table {
  width: 100%;
  min-width: 760px;
  margin: 0;
  border-collapse: collapse;
  display: table;
}
.eei-management-table th {
  background: var(--eei-mgmt-ink);
  color: #fff;
  border: 0;
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eei-management-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(24,36,68,.075);
  color: #29334d;
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
}
.eei-management-table tbody tr:last-child td { border-bottom: 0; }
.eei-management-table tbody tr:hover { background: rgba(239,241,236,.42); }

.eei-management-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.eei-management-action {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(24,36,68,.20);
  border-radius: 6px;
  background: #fff;
  color: var(--eei-mgmt-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.eei-management-action:hover {
  background: var(--eei-mgmt-chalk);
  border-color: rgba(24,36,68,.30);
  transform: translateY(-1px);
}
.eei-management-remove {
  border-color: rgba(185,28,28,.25);
  color: #b91c1c;
}
.eei-management-remove:hover {
  background: #fff5f5;
  border-color: rgba(185,28,28,.45);
}
.eei-management-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  background: #eef1f5;
  color: #4a5266;
}
.eei-management-status.is-active,
.eei-management-status.is-approved {
  background: #e9f7ef;
  color: #17663b;
}
.eei-management-status.is-pending {
  background: #fff5df;
  color: #805b16;
}
.eei-management-status.is-suspended,
.eei-management-status.is-rejected,
.eei-management-status.is-inactive {
  background: #fdecec;
  color: #9f2525;
}

.eei-management-loading,
.eei-management-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--eei-mgmt-muted);
  font-size: 14px;
}
.eei-management-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(24,36,68,.15);
  border-top-color: var(--eei-mgmt-brass);
  border-radius: 50%;
  animation: eei-management-spin .7s linear infinite;
}
@keyframes eei-management-spin { to { transform: rotate(360deg); } }

.eei-management-signups { margin-bottom: 20px; }

.eei-management-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 24px;
  overflow: auto;
  background: rgba(15,22,40,.62);
  backdrop-filter: blur(2px);
}
.eei-management-modal-box {
  width: min(560px, 100%);
  margin: 7vh auto;
  background: var(--eei-mgmt-paper);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 26px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.eei-management-modal-box h3 {
  margin: 0 42px 20px 0;
  color: var(--eei-mgmt-ink);
  font-size: 21px;
  line-height: 1.25;
}
.eei-management-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(24,36,68,.12) !important;
  border-radius: 7px;
  background: #fff !important;
  color: var(--eei-mgmt-ink);
  padding: 0 !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.eei-management-modal-close:hover { background: var(--eei-mgmt-chalk) !important; }
.eei-management-user-form label {
  display: block;
  margin-bottom: 15px;
  color: var(--eei-mgmt-ink);
  font-size: 13px;
  font-weight: 750;
}
.eei-management-user-form input,
.eei-management-user-form select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(24,36,68,.18);
  border-radius: 7px;
  background: #fff;
  color: var(--eei-mgmt-ink);
  font: inherit;
  font-size: 14px;
}
.eei-management-user-form button[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.eei-management .eei-form-msg,
#eei-management-modal .eei-form-msg {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--eei-mgmt-muted);
  font-size: 13px;
  font-weight: 600;
}
.eei-management .eei-form-note,
#eei-management-modal .eei-form-note {
  margin: 0 0 15px;
  padding: 11px 13px;
  border-left: 3px solid var(--eei-mgmt-brass);
  border-radius: 0 6px 6px 0;
  background: var(--eei-mgmt-chalk);
  color: var(--eei-mgmt-muted);
  font-size: 13px;
}
@media (max-width: 760px) {
  .eei-management-header { padding: 22px 18px; border-radius: 10px; }
  .eei-management-section { padding: 17px 14px; border-radius: 10px; }
  .eei-management-section-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .eei-management-add { width: 100%; justify-content: center; }
  .eei-management-toolbar { display: grid; grid-template-columns: 1fr; }
  .eei-management-toolbar input,
  .eei-management-toolbar select,
  .eei-management-scope { width: 100%; min-width: 0; }
  .eei-management-table-wrap { border: 0; overflow: visible; background: transparent; }
  .eei-management-table { min-width: 0; display: block; }
  .eei-management-table thead { display: none; }
  .eei-management-table tbody,
  .eei-management-table tr { display: block; width: 100%; }
  .eei-management-table tr {
    margin-bottom: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(24,36,68,.09);
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(24,36,68,.04);
  }
  .eei-management-table tbody tr:last-child { margin-bottom: 0; }
  .eei-management-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(24,36,68,.065);
    white-space: normal;
    text-align: right;
  }
  .eei-management-table td:last-child { border-bottom: 0; padding-bottom: 1px; }
  .eei-management-table td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    color: #687188;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
  }
  .eei-management-table td[data-label="Actions"] { display: block; }
  .eei-management-table td[data-label="Actions"]::before { display: block; margin-bottom: 7px; }
  .eei-management-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .eei-management-action { width: 100%; min-height: 38px; }
  .eei-management-modal { padding: 12px; }
  .eei-management-modal-box { margin: 3vh auto; padding: 21px 17px; }
}
@media (max-width: 420px) {
  .eei-management-header h2 { font-size: 25px; }
  .eei-management-section-head h3 { font-size: 18px; }
  .eei-management-actions { grid-template-columns: 1fr; }
}

/* ================================================================
   EEI SYSTEMS v4.0.0 — UNIFIED UI/UX DESIGN SYSTEM
   ----------------------------------------------------------------
   Presentation-only layer. Existing IDs/classes, JS hooks, forms,
   endpoints, permissions and business logic are intentionally untouched.
   The established EEI navy / brass / chalk palette is retained and
   normalized through local design tokens.
   ================================================================ */
:root {
  --eei-ink: #182444;
  --eei-ink-2: #24345f;
  --eei-brass: #B8863A;
  --eei-brass-dark: #956a27;
  --eei-brass-soft: #fbf5e9;
  --eei-chalk: #EFF1EC;
  --eei-paper: #FAFAF7;
  --eei-white: #ffffff;
  --eei-slate: #4A5266;
  --eei-muted: #687188;
  --eei-border: rgba(24,36,68,.12);
  --eei-border-strong: rgba(24,36,68,.20);
  --eei-success: #17663b;
  --eei-success-bg: #e9f7ef;
  --eei-warning: #805b16;
  --eei-warning-bg: #fff5df;
  --eei-danger: #a42626;
  --eei-danger-bg: #fff0f0;
  --eei-radius: 10px;
  --eei-radius-sm: 7px;
  --eei-shadow: 0 5px 20px rgba(24,36,68,.06);
  --eei-shadow-hover: 0 8px 26px rgba(24,36,68,.10);
  --eei-focus: rgba(184,134,58,.42);
}

/* Base typography and rhythm inside EEI-rendered content. */
.eei-card,
.eei-auth-wrap,
.eei-user-nav,
.eei-management,
.eei-cbt-header,
.eei-cbt-body,
.eei-cbt-sections-strip,
.eei-cbt-overlay {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--eei-ink);
  line-height: 1.55;
}

.eei-card {
  max-width: 1100px;
  margin: 0 auto 22px;
  padding: 26px 28px;
  background: var(--eei-paper);
  border: 1px solid var(--eei-border);
  border-radius: var(--eei-radius);
  box-shadow: var(--eei-shadow);
}
.eei-qb-wide { max-width: 1100px; }

.eei-card h1, .eei-card h2, .eei-card h3, .eei-card h4,
.eei-management h1, .eei-management h2, .eei-management h3, .eei-management h4 {
  color: var(--eei-ink);
  line-height: 1.25;
  letter-spacing: -.012em;
}
.eei-card h2 { font-size: clamp(22px, 2.3vw, 29px); margin: 0 0 8px; }
.eei-card h3 { font-size: 20px; margin: 0 0 12px; }
.eei-card h4 { font-size: 16px; margin: 18px 0 8px; }
.eei-card p { color: #30394f; }
.eei-card a, .eei-management a { color: var(--eei-ink-2); text-underline-offset: 2px; }
.eei-card a:hover, .eei-management a:hover { color: var(--eei-brass-dark); }

/* Consistent form controls. Inline widths remain respected where a module
   intentionally uses a compact control; 100% is used only for ordinary
   form controls that already behave as full-width fields in EEI. */
.eei-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.eei-card select,
.eei-card textarea,
.eei-auth-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.eei-auth-wrap select,
.eei-auth-wrap textarea {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--eei-border-strong);
  border-radius: var(--eei-radius-sm);
  background: #fff;
  color: var(--eei-ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.eei-card textarea, .eei-auth-wrap textarea { min-height: 100px; resize: vertical; }
.eei-card input::placeholder, .eei-auth-wrap input::placeholder,
.eei-card textarea::placeholder, .eei-auth-wrap textarea::placeholder { color: #7a8293; }
.eei-card input:focus, .eei-card select:focus, .eei-card textarea:focus,
.eei-auth-wrap input:focus, .eei-auth-wrap select:focus, .eei-auth-wrap textarea:focus {
  border-color: var(--eei-brass);
  box-shadow: 0 0 0 3px var(--eei-focus);
  outline: none;
}
.eei-card label, .eei-auth-wrap label {
  color: var(--eei-ink);
  font-size: 13px;
  font-weight: 650;
}

/* Unified action buttons. Specific danger/secondary classes below retain
   their semantics; this layer only supplies the common shape and rhythm. */
.eei-card button,
.eei-auth-wrap button,
.eei-user-nav button,
.eei-management button {
  min-height: 40px;
  border-radius: var(--eei-radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.eei-card button:not(.eei-delete-q):not(.eei-delete-result):not(.eei-toggle-flag):not(.eei-notif-delete):not(.eei-notif-mark):not(.eei-nav-toggle):not(.eei-subject-tab),
.eei-auth-wrap button[type="submit"] {
  background: var(--eei-ink);
  border: 1px solid var(--eei-ink);
  color: #fff;
  padding: 9px 16px;
  box-shadow: 0 2px 6px rgba(24,36,68,.10);
  cursor: pointer;
}
.eei-card button:not(.eei-delete-q):not(.eei-delete-result):not(.eei-toggle-flag):not(.eei-notif-delete):not(.eei-notif-mark):not(.eei-nav-toggle):not(.eei-subject-tab):hover,
.eei-auth-wrap button[type="submit"]:hover {
  background: var(--eei-ink-2);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(24,36,68,.14);
}
.eei-card button:disabled, .eei-auth-wrap button:disabled, .eei-management button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary / destructive controls keep their meaning visually distinct. */
.eei-card .eei-delete-q, .eei-card .eei-delete-result,
.eei-card .eei-qb-remove-option, .eei-card .eei-bp-remove-rule,
.eei-card .cohort-delete-permanent, .eei-card .cohort-remove-student,
.eei-card [class*="delete"], .eei-card [class*="remove"] {
  color: var(--eei-danger);
  background: var(--eei-danger-bg);
  border: 1px solid rgba(164,38,38,.28);
}
.eei-card .eei-toggle-flag {
  color: var(--eei-brass-dark);
  background: var(--eei-brass-soft);
  border: 1px solid rgba(184,134,58,.42);
  border-radius: var(--eei-radius-sm);
}

/* Tables: stronger hierarchy and easier scanning without changing markup. */
.eei-table {
  border: 1px solid var(--eei-border);
  border-radius: var(--eei-radius-sm);
  background: #fff;
  box-shadow: 0 2px 9px rgba(24,36,68,.035);
}
.eei-table th {
  background: var(--eei-ink);
  color: #fff;
  border-bottom: 0;
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.eei-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(24,36,68,.075);
  color: #30394f;
}
.eei-table tbody tr:nth-child(even) { background: rgba(239,241,236,.28); }
.eei-table tbody tr:hover { background: rgba(239,241,236,.68); }

/* Cards/lists generated by individual modules. */
.eei-summary-card,
.eei-grading-item,
.eei-exam-section,
.eei-profile-readonly,
.eei-bp-rule,
.eei-question-row,
.eei-exam-list-item,
.eei-material-item {
  border-radius: var(--eei-radius-sm);
}
.eei-summary-card {
  border: 1px solid var(--eei-border);
  background: #fff;
  box-shadow: 0 2px 10px rgba(24,36,68,.04);
  flex: 1 1 150px;
}
.eei-summary-card span { font-size: 28px; }
.eei-profile-readonly { border: 1px solid var(--eei-border); background: var(--eei-chalk); }
.eei-grading-item { background: #fff; box-shadow: 0 2px 10px rgba(24,36,68,.04); }
.eei-exam-section, .eei-bp-rule { background: rgba(239,241,236,.34); border-color: var(--eei-border); }

/* Status/notice treatment shared across modules. */
.eei-form-note {
  border: 1px solid rgba(184,134,58,.22);
  border-left: 3px solid var(--eei-brass);
  border-radius: 0 var(--eei-radius-sm) var(--eei-radius-sm) 0;
  background: var(--eei-brass-soft);
  color: var(--eei-slate);
}
.eei-verified-banner {
  border-radius: var(--eei-radius-sm);
}
.eei-form-msg { color: var(--eei-slate); }

/* Navigation: clean shell that remains compatible with the existing JS. */
.eei-user-nav {
  min-height: 48px;
  padding: 7px 10px;
  background: rgba(239,241,236,.82);
  border: 1px solid var(--eei-border);
  border-radius: var(--eei-radius);
  box-shadow: 0 2px 9px rgba(24,36,68,.035);
}
.eei-nav-toggle {
  min-height: 36px;
  border-radius: var(--eei-radius-sm);
  background: var(--eei-ink);
  box-shadow: 0 2px 5px rgba(24,36,68,.10);
}
.eei-nav-dropdown {
  border: 1px solid var(--eei-border);
  border-radius: var(--eei-radius-sm);
  box-shadow: 0 12px 30px rgba(24,36,68,.14);
  overflow: hidden;
}
.eei-nav-dropdown a { padding: 11px 15px; }

/* Authentication pages: centered, calm, professional presentation. */
.eei-auth-wrap {
  width: min(100%, 560px);
  margin: 28px auto;
}
.eei-auth-wrap .eei-card { max-width: 520px; margin: 0 auto; }
.eei-auth-tabs {
  gap: 0;
  padding: 4px;
  border: 1px solid var(--eei-border);
  border-radius: var(--eei-radius-sm);
  background: var(--eei-chalk);
}
.eei-tab-btn {
  min-height: 42px;
  border: 0;
  border-radius: 5px;
  color: var(--eei-slate);
}
.eei-tab-btn.active { background: var(--eei-ink); color: #fff; box-shadow: 0 2px 6px rgba(24,36,68,.12); }

/* Notification menu. */
.eei-notif-dropdown {
  border-radius: var(--eei-radius-sm);
  box-shadow: 0 12px 30px rgba(24,36,68,.15);
  /* Keep vertical scrolling enabled; the earlier global notification rule
     intentionally caps the list at 420px. This override must not turn that
     scrollable list into a clipped panel. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.eei-notif-item:hover { background: rgba(239,241,236,.72); }
.eei-notif-unread { background: var(--eei-chalk); }

/* CBT: keep the focused exam interface visually distinct while matching the
   global system. No timer, navigation or answer-state behaviour is altered. */
.eei-cbt-header { border-radius: var(--eei-radius) var(--eei-radius) 0 0; box-shadow: 0 4px 14px rgba(24,36,68,.12); }
.eei-cbt-body { border-radius: 0 0 var(--eei-radius) var(--eei-radius); background: #fff; overflow: hidden; }
.eei-cbt-option { border-radius: var(--eei-radius-sm); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.eei-cbt-option:hover { border-color: rgba(184,134,58,.40); box-shadow: 0 2px 8px rgba(24,36,68,.05); }
.eei-cbt-controls button { min-height: 42px; }
.eei-cbt-nav-panel { border-left: 1px solid var(--eei-border); }
.eei-grid-cell { border-radius: 5px; }
.eei-cbt-overlay { backdrop-filter: blur(3px); }

/* Accessible keyboard focus: visible, consistent, and independent of colour. */
.eei-card button:focus-visible,
.eei-auth-wrap button:focus-visible,
.eei-management button:focus-visible,
.eei-user-nav button:focus-visible,
.eei-card input:focus-visible,
.eei-card select:focus-visible,
.eei-card textarea:focus-visible,
.eei-auth-wrap input:focus-visible,
.eei-auth-wrap select:focus-visible,
.eei-auth-wrap textarea:focus-visible,
.eei-card a:focus-visible,
.eei-management a:focus-visible {
  outline: 3px solid var(--eei-focus);
  outline-offset: 2px;
}

/* Mobile/tablet system pass. */
@media (max-width: 760px) {
  .eei-card { padding: 21px 18px; border-radius: 9px; }
  .eei-summary-cards { gap: 10px; }
  .eei-summary-card { min-width: 140px; }
  .eei-card button, .eei-auth-wrap button, .eei-management button { min-height: 42px; }
}
@media (max-width: 520px) {
  .eei-card { padding: 18px 15px; margin-bottom: 16px; }
  .eei-card h2 { font-size: 22px; }
  .eei-card h3 { font-size: 18px; }
  .eei-summary-cards { display: grid; grid-template-columns: 1fr 1fr; }
  .eei-summary-card { min-width: 0; }
  .eei-card form > button { width: 100%; }
  .eei-card .eei-qb-filters button,
  .eei-card .eei-qb-bulk-bar button { width: 100%; }
  .eei-auth-wrap { margin: 16px auto; }
  .eei-auth-wrap .eei-card { padding: 20px 16px; }
}
@media (max-width: 380px) {
  .eei-summary-cards { grid-template-columns: 1fr; }
}

/* Honour reduced-motion preferences without disabling functionality. */
@media (prefers-reduced-motion: reduce) {
  .eei-card button, .eei-auth-wrap button, .eei-management button,
  .eei-cbt-option, .eei-management-loading::before { transition: none !important; animation: none !important; }
}