:root {
  --eu-blue: #003399;
  --eu-blue-dark: #00205f;
  --admin-orange: #f6a800;
  --admin-orange-dark: #cf7e00;
  --ink: #172033;
  --muted: #66758c;
  --line: #dfe6f1;
  --bg: #f3f6fb;
  --card: #ffffff;
  --danger: #b42318;
  --danger-soft: #fff0ed;
  --success: #07845f;
  --shadow: 0 18px 46px rgba(0, 35, 85, 0.12);
  --radius: 20px;
  --accent: var(--eu-blue);
  --accent-dark: var(--eu-blue-dark);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(246,168,0,0.12), transparent 27%),
    radial-gradient(circle at 92% 6%, rgba(0,51,153,0.14), transparent 33%),
    var(--bg);
}

body.admin-mode { --accent: var(--admin-orange); --accent-dark: var(--admin-orange-dark); }
body.superadmin-mode { --accent: #1f232b; --accent-dark: #0f1115; }
body.viewer-mode { --accent: var(--eu-blue); --accent-dark: var(--eu-blue-dark); }

.app-header {
  position: sticky; top: 0; z-index: 20;
  min-height: 86px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  transition: background .2s ease;
}

.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand-logo { width: 170px; height: 58px; cursor: default; object-fit: contain; background: rgba(255,255,255,.96); border-radius: 14px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; opacity: .88; font-weight: 800; }
h1 { margin: 2px 0 0; font-size: clamp(22px, 2vw, 31px); line-height: 1.05; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.admin-entry-btn {
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.admin-entry-btn:hover {
  background: rgba(255,255,255,.24);
  color: #fff;
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}
body.admin-mode .admin-entry-btn { display: none; }
.login-box .subtle { font-size: 13px; line-height: 1.4; }


.shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 22px; padding: 24px; max-width: 1780px; margin: 0 auto; }
.sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; padding-right: 2px; }
.main-panel { min-width: 0; }

.side-card, .intro-card, .power-card, .global-search-wrap, .tab-panel, .card {
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(220,226,238,.9);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,35,85,.08);
}
.side-card { padding: 16px; }
.side-label, .side-title, .card-title, .power-card span { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; color: #5e6d84; font-weight: 900; }
.mode-card { border-left: 7px solid var(--accent); }
.mode-card strong { display: block; margin-top: 6px; font-size: 28px; color: var(--accent); }
.mode-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 850; color: #2c3950; margin-top: 10px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff;
  font: inherit; color: var(--ink); outline: none; transition: box-shadow .12s ease, border-color .12s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,51,153,.10); }
textarea { resize: vertical; }
.filter-actions { display: grid; gap: 8px; margin-top: 14px; }

.btn { border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; font-weight: 900; font-size: 13px; letter-spacing: .01em; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: white; box-shadow: 0 8px 18px rgba(0,51,153,.18); }
body.admin-mode .btn.primary { box-shadow: 0 8px 18px rgba(246,168,0,.25); }
.btn.secondary { background: #edf2fb; color: #274067; }
.btn.light { background: rgba(255,255,255,.92); color: var(--accent-dark); }
.btn.ghost { background: transparent; color: #33425c; }
.btn.warning { background: #fff1d1; color: #8a5a00; }
.btn.danger { background: var(--danger); color: white; }
.btn.block { width: 100%; }
.btn.small { padding: 7px 10px; font-size: 12px; }
.hidden { display: none !important; }

.status-pill { border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.18); color: white; font-size: 12px; font-weight: 900; }
.admin-tools { background: linear-gradient(180deg, #fffaf0, #fff); border-left: 7px solid var(--admin-orange); }
.admin-tools .btn { margin-top: 8px; }
.admin-settings { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.admin-settings summary { cursor: pointer; color: #59677e; font-size: 12px; font-weight: 900; }
.password-form { display: grid; gap: 4px; margin-top: 8px; }

.mini-stat { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #eef2f8; }
.mini-stat:last-child { border-bottom: 0; }
.mini-stat span { color: var(--muted); font-size: 13px; }
.mini-stat strong { color: var(--accent); font-size: 18px; }

.intro-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 28px; margin-bottom: 18px; }
.intro-card h2 { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 30px); }
.intro-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.connection-note { border-radius: 999px; padding: 10px 14px; background: #eef8f4; color: var(--success); font-weight: 900; white-space: nowrap; }

.power-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.power-card { min-height: 148px; padding: 16px; cursor: pointer; position: relative; overflow: hidden; border-left: 6px solid var(--accent); }
.power-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.power-card strong { display: block; margin: 6px 0 8px; font-size: 30px; color: var(--accent); }
.mini-bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(54px, 95px) 1fr 34px; gap: 7px; align-items: center; font-size: 11px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #35445e; }
.bar-track { height: 9px; border-radius: 999px; background: #e8eef8; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white)); min-width: 3px; }
.bar-value { text-align: right; font-weight: 900; color: var(--accent); }

.global-search-wrap { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 14px 16px; margin-bottom: 14px; }
.search-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #edf3ff; color: var(--accent); font-size: 22px; font-weight: 900; }
.global-search-wrap input { border: 0; font-size: 18px; padding: 13px 8px; background: transparent; }
.global-search-wrap input:focus { box-shadow: none; }

/* v71 - professional primary navigation */
.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
  padding: 12px;
  border: 1px solid rgba(35, 62, 144, .12);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(238,243,250,.72));
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.tab {
  position: relative;
  min-height: 72px;
  border: 1px solid rgba(35, 62, 144, .14);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border-radius: 20px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 950;
  font-size: 14px;
  text-transform: uppercase;
  color: #273a5c;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.18;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.tab::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 9px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
}
.tab:hover {
  transform: translateY(-1px);
  border-color: rgba(35, 62, 144, .28);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .10);
}
.tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(0, 51, 153, .22);
}
.tab.active::after { background: #ffb000; height: 5px; bottom: 8px; box-shadow: 0 0 0 2px rgba(255,176,0,.18); }
.tab-panel { display: none; padding: 18px; }
.tab-panel.active { display: block; }

.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.material-card { border: 1px solid var(--line); border-radius: 18px; background: white; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .12s ease, transform .12s ease; position: relative; }
.material-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,35,85,.12); }
.material-card.inactive { background: var(--danger-soft); border-color: #ffc9c0; }
.material-card.inactive .cover { filter: grayscale(.9); opacity: .62; }
.inactive-ribbon { position: absolute; top: 12px; right: -32px; transform: rotate(35deg); width: 130px; text-align: center; background: var(--danger); color: white; font-size: 11px; font-weight: 950; padding: 5px 0; z-index: 2; }
.cover { height: 152px; display: grid; place-items: center; background: linear-gradient(135deg, #eaf0ff, #fff7e7); color: var(--eu-blue); font-weight: 950; font-size: 28px; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: contain; background: #f8fafc; padding: 5px; }
.material-body { padding: 14px; }
.material-title { font-weight: 900; min-height: 44px; line-height: 1.25; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { border-radius: 999px; padding: 5px 9px; background: #edf3ff; color: var(--eu-blue); font-size: 11px; font-weight: 900; }
.chip.orange { background: #fff2d0; color: #8a5a00; }
.chip.red { background: #ffe5e1; color: var(--danger); }
.material-meta { color: var(--muted); font-size: 12px; line-height: 1.45; }
.material-actions { display: flex; justify-content: space-between; gap: 8px; padding: 0 14px 14px; margin-top: auto; align-items: center; }
.link { color: var(--accent); text-decoration: none; font-weight: 900; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: white; }
table { border-collapse: collapse; width: 100%; min-width: 1120px; font-size: 13px; }
thead th { position: sticky; top: 0; z-index: 1; background: var(--accent); color: white; text-align: left; padding: 12px; white-space: nowrap; }
tbody td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
tbody tr:hover { background: #fff8e9; }
tbody tr.inactive-row { background: var(--danger-soft); color: #5e2a25; }
.thumb { width: 42px; height: 56px; border-radius: 8px; background: #edf3ff; display: grid; place-items: center; color: var(--eu-blue); font-weight: 900; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; background: #f8fafc; }
.badge { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 950; }
.badge.active { background: #e8f7f1; color: var(--success); }
.badge.inactive { background: #ffe1dc; color: var(--danger); }

.card { padding: 18px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-title { margin-bottom: 10px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 18px; }
.operations-card { grid-column: 1 / -1; }
.editor-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.assignment-title { margin: 12px 0; padding: 12px; border-radius: 14px; background: #f5f7fb; font-weight: 900; }
.school-checklist { max-height: 500px; overflow: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; }
.school-checklist label { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; background: #fafbfd; padding: 8px; border-radius: 10px; margin: 0; }
.school-checklist input { width: auto; }
.ops { display: flex; gap: 10px; flex-wrap: wrap; }
.operation-result { margin-top: 12px; font-size: 13px; color: var(--muted); word-break: break-word; }
.subtle { color: var(--muted); }

dialog { border: 0; border-radius: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.24); padding: 0; }
dialog::backdrop { background: rgba(0,20,60,.42); backdrop-filter: blur(3px); }
.login-box { width: min(430px, calc(100vw - 32px)); padding: 24px; display: grid; gap: 14px; }
.error-text { color: var(--danger); min-height: 18px; font-size: 13px; font-weight: 800; }
.dialog-actions, .dialog-head { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.dialog-head { justify-content: space-between; margin-bottom: 12px; }
.chart-dialog { width: min(760px, calc(100vw - 32px)); padding: 22px; }
.detail-list { display: grid; gap: 8px; max-height: 65vh; overflow: auto; }
.detail-row { display: grid; grid-template-columns: minmax(130px, 1fr) 1fr 62px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef2f8; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 99; max-width: 440px; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: white; box-shadow: 0 18px 45px rgba(0,0,0,.22); font-weight: 850; }

@media (max-width: 1200px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .power-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-header, .intro-card { flex-direction: column; align-items: flex-start; }
  .brand-logo { width: 150px; }
  .sidebar, .power-grid, .admin-grid, .editor-form { grid-template-columns: 1fr; }
  .global-search-wrap { grid-template-columns: 1fr; }
  .search-icon { display: none; }
  .school-checklist { grid-template-columns: 1fr; }
}

/* v6 harmonisation and controlled admin additions */
.inspector-card { border-left: 7px solid #6e82b8; background: linear-gradient(180deg, #f7f9ff, #fff); }
.inspector-card .btn { margin-top: 8px; }
.required .label-text::after { content: " *"; color: var(--danger); }
.assignments-card { border-left: 6px solid #6e82b8; }
.school-checklist.grouped { display: block; max-height: 660px; }
.school-group { margin-bottom: 12px; }
.school-group-title { display:flex; justify-content:space-between; align-items:center; padding: 8px 10px; border-radius: 12px; background:#edf3ff; color: var(--eu-blue); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
body.admin-mode .school-group-title { background:#fff3d1; color:#8a5a00; }
.school-group label { display:flex; flex-direction:row; align-items:center; gap: 8px; font-size: 12px; font-weight: 700; background:#fafbfd; padding: 8px; border-radius: 10px; margin: 6px 0 0; }
.school-group input { width: auto; }

.harmonisation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.harmonisation-head h2 { margin:0 0 4px; font-size: 25px; }
.harmonisation-head p { margin:0; color: var(--muted); max-width: 820px; }
.harm-kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.harm-kpi { background:white; border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 10px 28px rgba(0,35,85,.07); border-left: 7px solid var(--accent); }
.harm-kpi.high { border-left-color: var(--danger); }
.harm-kpi span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:950; }
.harm-kpi strong { display:block; font-size:30px; color:var(--accent); margin:5px 0; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.harm-kpi.high strong { color: var(--danger); }
.harm-kpi em { display:block; color:var(--muted); font-style:normal; font-size:12px; }
.harm-grid { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 16px; }
.heatmap-card, .selected-combo-card { grid-column: span 1; }
.selected-combo-card { grid-column: 1 / -1; }
.dispersion-map { display:grid; gap:8px; max-height: 590px; overflow:auto; padding-right:3px; }
.dispersion-row { border: 1px solid var(--line); border-left: 8px solid #6e82b8; border-radius: 14px; padding: 10px; background: #fff; display:grid; grid-template-columns: minmax(220px, 1fr) repeat(3, 86px) 68px; gap:10px; align-items:center; text-align:left; cursor:pointer; width:100%; }
.dispersion-row:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,35,85,.10); }
.dispersion-row.risk-high { border-left-color: var(--danger); background: #fff8f6; }
.dispersion-row.risk-medium { border-left-color: var(--admin-orange); background: #fffaf0; }
.dispersion-row.risk-low { border-left-color: var(--success); background: #f3fbf8; }
.combo-name strong { display:block; font-size: 13px; color: var(--ink); }
.combo-name span { display:block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.combo-metric { display:grid; justify-items:center; }
.combo-metric b { color: var(--accent); font-size: 19px; }
.combo-metric span { font-size: 10px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.score-pill { border-radius:999px; padding:7px 9px; background:#edf3ff; color:var(--accent); font-weight:950; text-align:center; }
.risk-high .score-pill { background:#ffe1dc; color:var(--danger); }
.risk-medium .score-pill { background:#fff2d0; color:#8a5a00; }
.risk-low .score-pill { background:#e8f7f1; color:var(--success); }
.fragment-list, .usage-list, .school-diversity { display:grid; gap:8px; max-height: 420px; overflow:auto; }
.fragment-item { display:grid; grid-template-columns: minmax(120px,1fr) 1fr 42px; gap:9px; align-items:center; border-bottom:1px solid #eef2f8; padding:8px 0; }
.fragment-item strong, .usage-item strong { display:block; font-size:13px; }
.fragment-item span, .usage-item span, .usage-item em { display:block; color:var(--muted); font-size:11px; font-style:normal; }
.usage-item { display:grid; grid-template-columns: 42px minmax(0,1fr) 38px; gap:10px; align-items:center; padding:8px; border:1px solid #eef2f8; border-radius:14px; background:#fff; }
.usage-item b { justify-self:end; color:var(--accent); font-size:18px; }
.usage-thumb { width:42px; height:56px; border-radius:10px; background:#edf3ff; display:grid; place-items:center; font-weight:950; color:var(--eu-blue); overflow:hidden; }
.usage-thumb img { width:100%; height:100%; object-fit:contain; background:#f8fafc; }
.combo-material-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:12px; }
.combo-card { display:grid; grid-template-columns: 74px 1fr 70px; gap:12px; align-items:center; border:1px solid var(--line); border-radius:16px; padding:10px; background:white; }
.combo-card.single { border-color:#ffc9c0; background:var(--danger-soft); }
.combo-cover { width:74px; height:96px; border-radius:12px; background:#edf3ff; display:grid; place-items:center; font-weight:950; color:var(--eu-blue); overflow:hidden; }
.combo-cover img { width:100%; height:100%; object-fit:contain; background:#f8fafc; }
.combo-card strong { display:block; font-size:13px; }
.combo-card span, .combo-card p { color:var(--muted); font-size:11px; margin:3px 0 0; }
.combo-count { text-align:center; }
.combo-count b { display:block; color:var(--accent); font-size:22px; }
.combo-count span { display:block; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:900; }
.combo-count em { display:block; margin-top:5px; padding:4px 6px; border-radius:999px; background:#ffe1dc; color:var(--danger); font-style:normal; font-size:10px; font-weight:950; }
.school-div-row { display:grid; grid-template-columns: 54px minmax(0,1fr) 34px 35px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid #eef2f8; }
.school-div-row span { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.school-div-row b { color:var(--danger); text-align:right; }
.school-div-row em { color:var(--muted); font-style:normal; font-size:10px; }
.reference-card { grid-column: 1 / -1; }
.reference-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0; }
.ref-tab { border:1px solid var(--line); background:white; border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:900; color:#42516a; }
.ref-tab.active { background:var(--accent); color:white; border-color:var(--accent); }
.ref-form { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:8px; padding:10px; background:#f8fafc; border:1px solid var(--line); border-radius:16px; }
.ref-form input, .ref-form select { margin:0; }
.ref-form input:disabled { background:#e8edf4; color:#536174; border-color:#cbd5e1; cursor:not-allowed; opacity:1; }
.reference-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:8px; max-height: 360px; overflow:auto; margin-top:10px; }
.ref-row { border:1px solid var(--line); border-radius:14px; padding:10px; background:white; text-align:left; cursor:pointer; display:grid; gap:2px; }
.ref-row:hover { border-color:var(--accent); box-shadow:0 8px 18px rgba(0,35,85,.08); }
.ref-row strong { color:var(--accent); }
.ref-row span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ref-row em { font-style:normal; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--success); font-weight:950; }
.ref-row.inactive-ref { background:var(--danger-soft); }
.ref-row.inactive-ref em { color:var(--danger); }
.usage-dialog { width:min(980px, calc(100vw - 32px)); }
.two-col-dialog { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

@media (max-width: 1300px) {
  .harm-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .harm-grid { grid-template-columns: 1fr; }
  .dispersion-row { grid-template-columns: 1fr repeat(2, 75px); }
  .dispersion-row .combo-metric:nth-of-type(4), .dispersion-row .score-pill { display:none; }
  .ref-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .harm-kpi-grid, .two-col-dialog { grid-template-columns: 1fr; }
  .dispersion-row { grid-template-columns: 1fr; }
  .combo-card { grid-template-columns: 62px 1fr; }
  .combo-count { grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; text-align:left; }
}


/* v7 refinements: clearer harmonisation, admin list management, no nested school scroll */
.sidebar { padding-right: 12px; scrollbar-gutter: stable; }
.sidebar::-webkit-scrollbar, .dispersion-map::-webkit-scrollbar, .reference-list::-webkit-scrollbar, .usage-list::-webkit-scrollbar, .fragment-list::-webkit-scrollbar, .school-diversity::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-track, .dispersion-map::-webkit-scrollbar-track, .reference-list::-webkit-scrollbar-track, .usage-list::-webkit-scrollbar-track, .fragment-list::-webkit-scrollbar-track, .school-diversity::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .dispersion-map::-webkit-scrollbar-thumb, .reference-list::-webkit-scrollbar-thumb, .usage-list::-webkit-scrollbar-thumb, .fragment-list::-webkit-scrollbar-thumb, .school-diversity::-webkit-scrollbar-thumb { background: #c9d4e6; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

.harm-focus-bar { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap:10px; align-items:end; margin: 0 0 16px; padding: 12px; background:#f8fafc; border:1px solid var(--line); border-radius:18px; }
.harm-focus-bar label { margin:0; }
.harm-kpi { position:relative; }
.info-dot { position:absolute; right:10px; top:10px; width:22px; height:22px; border-radius:999px; border:0; background:#edf3ff; color:var(--accent); font-weight:950; cursor:pointer; }
.harm-kpi.high .info-dot { background:#ffe1dc; color:var(--danger); }
.clickable-help { cursor: help; }
.metric-button { border:0; background:transparent; cursor:pointer; padding:2px; display:grid; justify-items:center; border-radius:10px; }
.metric-button:hover { background:#edf3ff; }
.metric-button b { color: var(--accent); font-size: 19px; }
.metric-button span { font-size: 10px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.metric-list { display:grid; gap:10px; max-height: 68vh; overflow:auto; padding-right:6px; }
.metric-row { border:1px solid var(--line); border-radius:14px; padding:12px; background:white; }
.metric-row strong { display:block; }
.metric-row span, .metric-row p { color:var(--muted); font-size:12px; margin:4px 0 0; }
.school-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.school-tag { display:inline-flex; border-radius:999px; padding:4px 8px; background:#edf3ff; color:#20385f; font-size:11px; font-weight:900; }
.school-tag strong { display:inline; color:var(--accent); }
.usage-dialog .filter-strip { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px; margin-bottom:12px; padding:10px; background:#f8fafc; border:1px solid var(--line); border-radius:16px; }
.usage-dialog .filter-strip label { margin:0; }
.usage-dialog .usage-list { max-height: 56vh; }
.school-div-row { grid-template-columns: minmax(130px, 1fr) 72px 72px 160px; }
.school-div-row .school-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.school-div-row .school-name strong { color:var(--accent); }
.school-div-row em { font-size:11px; text-align:right; }
.school-checklist.grouped { display:block; max-height:none; overflow:visible; }
.school-group-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:6px; margin-top:8px; }
.school-group label { margin:0; }
.assignments-card { align-self:start; }
.ref-form { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.reference-card { scroll-margin-top: 120px; }
.material-card .material-actions .btn.primary { background: var(--admin-orange); color:#462d00; }

@media (max-width: 1300px) { .harm-focus-bar { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .harm-focus-bar, .usage-dialog .filter-strip { grid-template-columns: 1fr; } .school-div-row { grid-template-columns:1fr; } }

/* v8: catalogue detail modal and richer material fiches */
.material-card { cursor: pointer; }
.material-card .material-actions { cursor: default; }
.material-detail-dialog { width:min(1120px, calc(100vw - 32px)); }
.material-detail-layout { display:grid; grid-template-columns: 300px minmax(0, 1fr); gap:24px; align-items:start; }
.detail-cover-large { width:100%; min-height: 430px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,#f8fafc,#edf3ff); display:grid; place-items:center; overflow:hidden; box-shadow:0 18px 38px rgba(0,35,85,.12); }
.detail-cover-large img { width:100%; height:100%; max-height: 560px; object-fit:contain; background:#f8fafc; }
.cover-placeholder-large { width:100%; height:100%; min-height:430px; display:grid; place-items:center; font-size:46px; font-weight:950; color:var(--eu-blue); }
.material-detail-info { min-width:0; }
.detail-chips { margin-bottom:16px; }
.detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin:0; }
.detail-grid > div { border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff; }
.detail-grid > div.wide { grid-column:1 / -1; }
.detail-grid dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:950; margin-bottom:4px; }
.detail-grid dd { margin:0; color:var(--ink); line-height:1.4; }
.school-tag-wrap { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.inactive-detail .detail-cover-large { filter:grayscale(.35); opacity:.8; }
.detail-actions { margin-top:16px; justify-content:flex-end; }
@media (max-width: 860px) { .material-detail-layout { grid-template-columns: 1fr; } .detail-cover-large, .cover-placeholder-large { min-height: 320px; } .detail-grid { grid-template-columns: 1fr; } }

/* v9 harmonisation clarity */
.dispersion-definitions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 12px;}
.dispersion-definitions div{background:#f7f9fd;border:1px solid rgba(35,62,144,.12);border-radius:12px;padding:9px 10px;}
.dispersion-definitions strong{display:block;font-size:12px;color:#233e90;margin-bottom:3px;}
.dispersion-definitions span{font-size:11px;color:#607089;line-height:1.25;display:block;}
.formula-box{background:#fff8ed;border-left:4px solid #f28c28;border-radius:10px;padding:10px 12px;margin:8px 0;font-weight:700;color:#28344a;}
.score-pill span{display:block;font-size:10px;line-height:1;color:#607089;margin-top:2px;}
@media(max-width:1100px){.dispersion-definitions{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* v10: rationale, school-year display, export/backup operations */
.intro-badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.year-badge{background:#edf3ff;color:var(--eu-blue);border:1px solid rgba(35,62,144,.18);border-radius:999px;padding:9px 12px;font-weight:950;font-size:12px;}
.why-panel{background:#fff8ed;border:1px solid rgba(242,140,40,.28);border-left:5px solid var(--admin-orange);border-radius:16px;padding:12px 14px;margin:0 0 12px;}
.why-panel strong{display:block;color:#925300;margin-bottom:4px;}
.why-panel p{margin:0;color:#56657c;font-size:12px;line-height:1.4;}
.dispersion-definitions em{display:block;margin-top:6px;font-size:10.5px;line-height:1.25;color:#8a5300;font-style:normal;font-weight:800;}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end;}
.ops-grid label{margin:0;}
.backup-history-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;}
.backup-history{display:grid;gap:6px;max-height:240px;overflow:auto;padding-right:6px;}
.backup-row{display:grid;grid-template-columns:150px 70px minmax(0,1fr);gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff;}
.backup-row strong{font-size:11px;color:var(--ink);}
.backup-row span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;color:var(--admin-orange);}
.backup-row a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.year-copy-panel{margin-top:10px;border:1px solid rgba(35,62,144,.16);background:#f8fafc;border-radius:16px;padding:12px;}
.year-copy-panel strong{display:block;color:var(--eu-blue);margin-bottom:4px;}
.year-copy-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:8px;}
.year-copy-grid label{margin:0;}
@media(max-width:900px){.ops-grid,.year-copy-grid{grid-template-columns:1fr;}.backup-row{grid-template-columns:1fr;}.intro-badges{justify-content:flex-start;}}


/* v12 operation progress modal */
.operation-dialog::backdrop { background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(2px); }
.operation-box { min-width: 320px; padding: 28px; text-align: center; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.spinner { width: 42px; height: 42px; margin: 0 auto 14px; border: 4px solid #e5e7eb; border-top-color: #233e90; border-radius: 999px; animation: bm-spin 0.9s linear infinite; }
.admin-mode .spinner { border-top-color: #f28c28; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
.admin-mode .material-card .material-actions .btn.primary.small { display: inline-flex; }

/* v13 required fields and destructive actions */
.req{color:#b42318;font-weight:900;margin-left:2px}.required-field{position:relative}.required-field select,.required-field textarea,.required-field input{border-left:3px solid #f97316}.required-note{font-size:.85rem;color:#7f1d1d;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:8px 10px;margin:8px 0}.ghost-danger{background:#fff;color:#b42318;border:1px solid #fca5a5}.ghost-danger:hover{background:#fee2e2}.ref-row-actions{display:flex;gap:6px;align-items:center}.ref-row .mini-delete{padding:5px 8px;border-radius:8px;border:1px solid #fca5a5;background:#fff;color:#b42318;font-weight:800;cursor:pointer}.ref-row .mini-delete:hover{background:#fee2e2}.reference-editor .danger-hint{grid-column:1/-1;color:#7f1d1d;background:#fff1f2;border:1px solid #fecdd3;border-radius:12px;padding:8px 10px;font-size:.85rem}

/* v14 layout corrections: Harmonisation panels */
.dispersion-map {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.dispersion-row {
  grid-template-columns: minmax(170px, .95fr) repeat(4, minmax(104px, .52fr));
  gap: 8px;
  align-items: stretch;
}
.dispersion-row .metric-button {
  min-width: 0;
  width: 100%;
  white-space: normal;
}
.combo-name {
  justify-content: center;
  text-align: center;
  padding-inline: 8px;
}
.combo-name strong {
  font-size: 13px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.combo-name span {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.combo-metric,
.score-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(35,62,144,.08);
}
.combo-metric b,
.score-pill b {
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}
.combo-metric span,
.score-pill span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.18;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 950;
}
.school-div-row {
  grid-template-columns: minmax(190px, 1.4fr) minmax(130px, .7fr) minmax(160px, .9fr) !important;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}
.school-div-row .school-name {
  overflow: visible;
  white-space: normal;
  line-height: 1.25;
}
.school-div-metric {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid rgba(35,62,144,.08);
}
.school-div-metric b {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  text-align: right;
}
.school-div-metric span {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  line-height: 1.18;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 900;
}
.school-div-highlight b { color: var(--danger); }
@media (max-width: 1180px) {
  .dispersion-row { grid-template-columns: minmax(170px, 1fr) repeat(2, minmax(118px, .55fr)); }
  .dispersion-row .score-pill,
  .dispersion-row .combo-metric { display:flex !important; }
}
@media (max-width: 760px) {
  .dispersion-row,
  .school-div-row { grid-template-columns: 1fr !important; }
  .school-div-metric { justify-content: space-between; }
}
@media (max-width: 1300px) {
  .dispersion-row { grid-template-columns: minmax(170px, 1fr) repeat(2, minmax(118px, .55fr)); }
  .dispersion-row .score-pill,
  .dispersion-row .combo-metric { display:flex !important; }
}

/* v15 final responsive corrections for Harmonisation panels */
.dispersion-map{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:0 !important;
}
.dispersion-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:9px 10px !important;
  min-height:0 !important;
}
.dispersion-row .combo-name{
  flex:1 1 240px !important;
  min-width:210px !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  padding:8px 10px !important;
}
.dispersion-row .combo-name strong{
  font-size:13.5px !important;
  line-height:1.2 !important;
  overflow-wrap:anywhere !important;
}
.dispersion-row .combo-name span{
  font-size:10.5px !important;
  line-height:1.15 !important;
  margin-top:3px !important;
}
.dispersion-row .score-pill,
.dispersion-row .combo-metric{
  flex:1 1 112px !important;
  min-width:105px !important;
  max-width:160px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:64px !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow:visible !important;
}
.dispersion-row .score-pill b,
.dispersion-row .combo-metric b{
  font-size:21px !important;
  line-height:1 !important;
}
.dispersion-row .score-pill span,
.dispersion-row .combo-metric span{
  display:block !important;
  width:100% !important;
  font-size:9.5px !important;
  line-height:1.15 !important;
  text-align:center !important;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:initial !important;
}
@media (max-width: 1150px){
  .dispersion-row .combo-name{flex-basis:100% !important; min-width:100% !important; align-items:center !important; text-align:center !important;}
  .dispersion-row .score-pill,
  .dispersion-row .combo-metric{flex:1 1 calc(50% - 8px) !important; max-width:none !important;}
}
@media (max-width: 680px){
  .dispersion-row .score-pill,
  .dispersion-row .combo-metric{flex-basis:100% !important;}
}
.school-diversity{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  max-height:none !important;
  overflow:visible !important;
}
.school-div-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.school-div-row .school-name{
  flex:1 1 260px !important;
  min-width:220px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:initial !important;
}
.school-div-row .school-div-metric{
  flex:0 1 210px !important;
  min-width:180px !important;
  max-width:260px !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
}
.school-div-row .school-div-metric b{
  min-width:44px !important;
}
.school-div-row .school-div-metric span{
  text-align:left !important;
}
@media (max-width: 740px){
  .school-div-row .school-name,
  .school-div-row .school-div-metric{flex-basis:100% !important; max-width:none !important;}
}


/* v17 required marker placement and material detail edit fix support */
.required-field .field-label{display:inline-flex;align-items:center;gap:4px;line-height:1.2;}
.required-field .field-label .req{display:inline-block;margin-left:2px;line-height:1;color:#b42318;font-weight:950;}

/* v20 usage analysis main tab */
.usage-page-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}
.usage-page-list{
  max-height:none !important;
  overflow:visible !important;
}
#usagePageFilters .filter-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
  padding:12px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:16px;
}
#usagePageFilters .filter-strip label{margin:0;}
@media(max-width:1100px){
  .usage-page-grid{grid-template-columns:1fr;}
  #usagePageFilters .filter-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:720px){#usagePageFilters .filter-strip{grid-template-columns:1fr;}}


/* v21 refinements */
.year-focus-card {
  border-left: 7px solid var(--accent);
  background: linear-gradient(180deg, #f7faff, #fff);
}
.year-focus-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1.1;
  color: var(--accent);
}
.year-focus-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
body.admin-mode .year-focus-card {
  background: linear-gradient(180deg, #fff9eb, #fff);
}
#materialsTable tbody tr {
  cursor: pointer;
}
#materialsTable tbody tr:hover td {
  background: #fff8e9;
}
#materialsTable tbody tr.inactive-row:hover td {
  background: #ffece8;
}

/* Inspector-analysis side buttons mirror the active main tab. */
.inspector-card .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 10px 22px rgba(0, 51, 153, .18); }
.inspector-card .btn.active:hover { filter: brightness(.98); }

/* v23: clearer KPI calculation strip */
.calculation-strip {
  margin: -2px 0 16px;
  padding: 14px 18px;
  border: 1px solid #d8e1f2;
  border-left: 6px solid var(--accent);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  color: #334155;
  line-height: 1.45;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}
.calculation-strip strong { color: var(--accent); }
.calculation-strip em { font-style: normal; font-weight: 800; color: #1e293b; }
.calculation-strip span { font-weight: 900; color: #0f172a; }


/* v26 harmonisation refinements */
.fragment-list{max-height:none !important; overflow:visible !important;}
.harmon-grid .fragment-list{max-height:none !important; overflow:visible !important;}

/* v27 — Harmonisation refinements */
.dispersion-filter-panel{
  display:grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(95px, .65fr)) minmax(150px, .9fr) auto;
  gap:8px;
  align-items:end;
  padding:10px;
  border:1px solid rgba(35,62,144,.12);
  background:#f8fafc;
  border-radius:14px;
  margin:12px 0 8px;
}
.dispersion-filter-panel label{margin:0; font-size:11px; color:var(--muted); font-weight:800; letter-spacing:.03em;}
.dispersion-filter-panel input,.dispersion-filter-panel select{height:36px; padding:7px 10px; font-size:12px; margin-top:4px;}
.dispersion-count{margin:0 0 8px 2px; font-size:12px;}
.fragment-list{max-height:none !important; overflow:visible !important;}
.subject-frag-item span{line-height:1.25;}
.sidebar .analysis-card .btn.secondary.block{background:#edf2f9;color:#243b63;box-shadow:none;}
.sidebar .analysis-card .btn.primary.block{background:var(--eu-blue);color:#fff;box-shadow:0 10px 24px rgba(0,51,153,.16);}
@media(max-width:1300px){.dispersion-filter-panel{grid-template-columns:repeat(3,minmax(0,1fr));}.dispersion-filter-panel button{grid-column:auto;}}
@media(max-width:760px){.dispersion-filter-panel{grid-template-columns:1fr;}}

/* v29 admin management sections, cover upload and marks statistics */
.management-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 16px;
  padding:10px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:18px;
}
.management-tab{
  border:1px solid var(--line);
  background:#fff;
  color:var(--eu-blue);
  font-weight:900;
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
}
.management-tab.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 8px 20px rgba(238,124,0,.22);
}
.admin-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr) !important; align-items:start;}
.assignments-card{font-size:.92rem;}
.school-group-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;}
.school-group-grid label{padding:7px 8px !important;}
.marks-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0;}
.marks-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px;}
.marks-material-row b{font-size:22px;color:var(--eu-blue);}
.ranking-list{display:flex;flex-direction:column;gap:8px;}
.ranking-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
.ranking-row strong{color:var(--eu-blue);}
.ranking-row span{color:var(--muted);font-size:.86rem;}
.ranking-row b{font-size:20px;color:var(--accent);}
#cover_file_upload,#marksFile{background:#fff;border:1px dashed #adc0db;padding:10px;border-radius:12px;}
@media(max-width:1100px){.marks-kpi-grid,.marks-stats-grid{grid-template-columns:1fr 1fr}.admin-grid{grid-template-columns:1fr !important;}}
@media(max-width:720px){.marks-kpi-grid,.marks-stats-grid,.ranking-row{grid-template-columns:1fr}.ranking-row b{text-align:left}}

/* v30 marks analytics polish */
.marks-method-panel p{margin:.45rem 0;}
.clickable-kpis .harm-kpi{cursor:pointer;transition:.15s ease;}
.clickable-kpis .harm-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,43,88,.12);}
.marks-bars{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.marks-bar-row{display:grid;grid-template-columns:minmax(210px,1fr) minmax(160px,1.2fr) 64px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f7;}
.marks-bar-row strong{display:block;color:#10213b;}
.marks-bar-row span{display:block;color:#66758d;font-size:.82rem;margin-top:2px;}
.marks-bar-row b{color:var(--eu-blue);font-size:1.05rem;text-align:right;}
.clickable{cursor:pointer;}
.clickable:hover{background:#f7f9fd;}
.marks-chart-card .bar-track{height:9px;background:#e8eef7;border-radius:999px;overflow:hidden;}
.marks-chart-card .bar-fill{height:100%;background:linear-gradient(90deg,#003399,#5475c7);border-radius:999px;}
.management-tabs{position:sticky;top:0;z-index:3;background:#fff;padding:8px 0 12px;border-bottom:1px solid #e7edf6;margin-bottom:16px;}
@media(max-width:900px){.marks-bar-row{grid-template-columns:1fr}.marks-bar-row b{text-align:left}.marks-chart-card .bar-track{width:100%;}}

/* v32 marks statistics refinements */
.marks-method-card { grid-column: 1 / -1; }
.delta { display:block; margin-top:4px; font-weight:800; font-size:.78rem; }
.delta.positive { color:#0b7a3b; }
.delta.negative { color:#b91c1c; }
.marks-subject-row { display:grid; grid-template-columns: minmax(260px, 1.4fr) minmax(140px,.7fr) 72px; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(16,24,40,.08); }
.marks-subject-row small { display:block; color:#667085; margin-top:3px; line-height:1.35; }
.mini-table { width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:.9rem; }
.mini-table th, .mini-table td { text-align:left; border-bottom:1px solid #e5e7eb; padding:9px 8px; }
.mini-table th { color:#475569; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
@media (max-width: 1100px) { .marks-subject-row { grid-template-columns:1fr; } }

/* v33 marks-statistics refinement */
.marks-disabled-notice {
  border-left: 6px solid var(--accent);
  background: #fff7e8;
}
.marks-intro-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(135deg, #fffaf0, #ffffff);
  border: 1px solid rgba(242, 160, 0, .35);
  border-left: 6px solid var(--accent);
  border-radius: 22px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 12px 24px rgba(12, 39, 86, .06);
}
.marks-intro-panel h3 {
  margin: 4px 0 8px;
  color: var(--blue);
  font-size: 1.25rem;
}
.marks-intro-panel p { margin: 0; color: var(--muted); line-height: 1.55; }
.mini-label {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.marks-link-formula {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: #f4f7fb;
  border: 1px solid var(--line);
}
.marks-link-formula strong { width: 100%; color: var(--blue); margin-bottom: 3px; }
.marks-link-formula span:not(:first-child) {
  background: #fff;
  border: 1px solid #dfe7f3;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .82rem;
  font-weight: 800;
  color: #26364f;
}
.pedagogical-only { margin-bottom: 18px; }
.marks-section {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 24px rgba(12, 39, 86, .06);
}
.section-heading {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.section-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}
.section-heading h3 { margin: 0; color: var(--blue); }
.section-heading p { margin: 3px 0 0; color: var(--muted); }
.marks-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.marks-visibility-box {
  border: 1px solid rgba(242, 160, 0, .35);
  border-left: 5px solid var(--accent);
  background: #fffaf0;
  border-radius: 18px;
  padding: 16px;
  margin: 14px 0 18px;
}
.toggle-line {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--blue);
}
.toggle-line input { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .marks-intro-panel, .marks-two-col { grid-template-columns: 1fr; }
}

/* v34 - clearer marks-statistics calculation explanations */
.marks-explain-card { border-left: 5px solid var(--orange, #f2a900); }
.calc-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:12px; margin-top:12px; }
.calc-grid > div { background:#f8fafc; border:1px solid #dce4f2; border-radius:14px; padding:12px 14px; }
.calc-grid strong { color:#003399; display:block; margin-bottom:6px; }
.calc-grid p { margin:0; color:#53627a; line-height:1.35; }
.calc-note { margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid #dce4f2; background:#f8fafc; color:#53627a; }
.calc-inline { display:block; margin-top:5px; color:#7b879a; font-size:.82rem; line-height:1.25; }
.marks-material-row .calc-inline, .marks-bar-row .calc-inline { max-width: 720px; }

/* v38 security/access refinements */
.admin-entry-btn.admin-icon-only{
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  font-size:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.88;
}
.admin-entry-btn.admin-icon-only:hover{ opacity:1; transform:translateY(-1px); }
.password-rules{
  display:grid;
  gap:4px;
  margin:8px 0 10px;
  padding:10px 12px;
  border:1px solid #dbe4f4;
  border-radius:14px;
  background:#f7faff;
  color:#52637d;
  font-size:.88rem;
}
.password-rules strong{ color:#10213f; font-size:.9rem; }
.password-rules span::before{ content:"• "; color:#f4a300; font-weight:900; }

/* v39 country selector */
.country-select {
  min-width: 180px;
}


/* v43 password UX and database status refinements */
.password-field{
  display:flex;
  align-items:center;
  gap:6px;
}
.password-field input{ flex:1; min-width:0; }
.password-eye{
  border:1px solid #d5deed;
  background:#fff;
  border-radius:10px;
  min-width:36px;
  height:36px;
  cursor:pointer;
  font-size:15px;
}
.password-eye.visible{ background:#fff7e1; border-color:#f2b94a; }
.password-rules .rule-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.password-rules span::before{ content:"○"; color:#a2adbf; font-weight:900; min-width:18px; }
.password-rules span.ok{ color:#176b49; font-weight:700; }
.password-rules span.ok::before{ content:"✓"; color:#0f9d58; }
.password-rules span.missing{ color:#5c6b82; }
.password-strength-wrap{ margin:8px 0 10px; }
.password-strength-label{ display:flex; justify-content:space-between; gap:12px; font-size:.82rem; color:#5b6b83; margin-bottom:5px; }
.password-strength-label strong{ color:#22314d; }
.password-strength-bar{ height:9px; border-radius:999px; background:#e8eef7; overflow:hidden; border:1px solid #d9e2f0; }
.password-strength-bar > div{ height:100%; width:0; transition:width .18s ease; border-radius:999px; }
.password-strength-bar > div.weak{ background:#d92d20; }
.password-strength-bar > div.medium{ background:#f79009; }
.password-strength-bar > div.good{ background:#3b82f6; }
.password-strength-bar > div.strong{ background:#12b76a; }
.success-text{ color:#087443; font-weight:800; font-size:.88rem; min-height:18px; }
#connectionNote{ font-weight:800; }

/* v44 security/users refinements */
.admin-settings-separator{border:0;border-top:1px solid rgba(35,62,144,.14);margin:12px 0}
.security-user-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.security-user-form label{display:flex;flex-direction:column;gap:5px;font-size:.86rem;color:#334155;font-weight:700}
.security-user-form input,.security-user-form select{border:1px solid #cbd5e1;border-radius:10px;padding:9px 10px;background:#fff}
.security-users-list,.security-events-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.security-user-row,.security-event-row{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(170px,1.2fr) 90px 90px auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.05)}
.security-event-row{grid-template-columns:150px 130px 150px 1fr;font-size:.82rem}
.security-user-row .user-main strong{display:block;color:#172554}.security-user-row .user-main span{font-size:.82rem;color:#64748b}.security-badge{border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:800;background:#eff6ff;color:#233e90;text-align:center}.security-badge.superadmin{background:#fff7ed;color:#c2410c}.security-badge.inactive{background:#fee2e2;color:#991b1b}.security-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.security-help-box{margin-top:12px;background:#f8fafc;border-left:4px solid #f59e0b;border-radius:12px;padding:10px 12px;color:#334155}.superadmin-banner{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:8px 10px;margin:8px 0;font-size:.84rem;font-weight:700}
@media(max-width:900px){.security-user-form,.security-user-row,.security-event-row{grid-template-columns:1fr}}


/* v45 refinements: full-page sidebar flow, Arial typography, school pills and Super Admin theme */
html, body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif !important; }

/* European Schools public-site visual language: clear white space, European blue,
   mariner blue, and the European yellow accent. */
:root {
  --eu-blue: #233e90;
  --eu-blue-dark: #172d70;
  --eu-mariner: #3284c6;
  --eu-yellow: #ffcc04;
  --ink: #232b38;
  --muted: #686657;
  --line: rgba(0, 49, 148, .18);
  --bg: #f7f8fa;
  --radius: 4px;
  --shadow: 0 8px 24px rgba(35, 62, 144, .10);
}

body {
  font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f8fa;
  color: var(--ink);
}

.app-header {
  min-height: 0;
  padding: 0 28px;
  gap: 20px;
  background: #fff;
  color: var(--eu-blue);
  border-top: 5px solid #3cdbc0;
  border-bottom: 4px solid var(--eu-blue);
  box-shadow: 0 4px 14px rgba(35, 62, 144, .10);
}

.brand {
  min-height: 88px;
  gap: 16px;
}

.brand-logo {
  width: 152px;
  height: 64px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.eyebrow {
  color: var(--eu-blue);
  letter-spacing: .08em;
}

h1 {
  color: #3284c6;
  font-weight: 700;
}

.header-actions {
  color: var(--eu-blue);
}

.status-pill,
.admin-entry-btn {
  border: 1px solid rgba(35, 62, 144, .18);
  border-radius: 3px;
  background: #fff;
  color: var(--eu-blue);
}

.status-pill {
  padding: 7px 10px;
}

.admin-entry-btn:hover,
.status-pill:hover {
  background: #eef5fb;
  color: #007db9;
  border-color: #007db9;
}

.btn {
  border-radius: 3px;
  font-weight: 700;
}

.btn.primary {
  background: var(--eu-blue);
  box-shadow: none;
}

.btn.primary:hover {
  background: #007db9;
}

.btn.secondary {
  background: #fff;
  color: var(--eu-blue);
  border: 1px solid rgba(35, 62, 144, .28);
}

.shell {
  max-width: 1500px;
  padding: 30px 28px 44px;
}

.side-card, .intro-card, .power-card, .global-search-wrap, .tab-panel, .card {
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(35, 62, 144, .07);
}

.side-card,
.intro-card,
.power-card,
.card {
  border-color: rgba(0, 49, 148, .14);
}

.mode-card {
  border-left-width: 4px;
}

.mode-card strong,
.power-card strong,
.mini-stat strong {
  color: var(--eu-blue);
}

.tabs {
  border-radius: 4px;
  padding: 8px;
  gap: 8px;
  background: #fff;
  border-color: rgba(0, 49, 148, .14);
}

.tab {
  border-radius: 3px;
  background: #fff;
  color: var(--eu-blue);
  box-shadow: none;
}

.tab.active,
.tab:hover {
  background: var(--eu-blue);
  color: #fff;
}

.tab.active::after {
  background: var(--eu-yellow);
  box-shadow: none;
}

input, select, textarea {
  border-radius: 0;
  border-color: rgba(0, 49, 148, .20);
}

input:focus, select:focus, textarea:focus {
  border-color: #007db9;
  box-shadow: 0 0 0 3px rgba(0, 125, 185, .12);
}

.connection-note {
  border-radius: 3px;
  background: #eef8f4;
  color: #116e6d;
}

.chip,
.badge,
.year-badge {
  border-radius: 3px;
}
.sidebar{
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  scrollbar-gutter: auto !important;
}
.layout{align-items:start;}
body.superadmin-mode .topbar,
body.superadmin-mode .btn.primary,
body.superadmin-mode .tab.active{background:#1f232b !important;color:#fff !important;}
body.superadmin-mode .mode-card{border-left-color:#1f232b !important;background:linear-gradient(135deg,#fff,#f4f5f7);}
body.superadmin-mode .mode-card strong{color:#1f232b !important;}
body.superadmin-mode .year-focus-card{border-left-color:#1f232b !important;}
body.superadmin-mode .superadmin-banner{background:#f3f4f6;border-color:#9ca3af;color:#111827;}
.school-tag-wrap,.school-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.school-pill,.school-tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;line-height:1;background:#edf3ff;color:#003399;border:1px solid #d8e5ff;}
.school-pill.es{background:#e9f1ff;color:#003399;border-color:#c7dbff;}
.school-pill.aes{background:#fff3d1;color:#965f00;border-color:#ffd979;}
.school-pill.unknown{background:#eef2f7;color:#334155;border-color:#d7dee9;}
.material-meta .school-tag-wrap{margin-top:8px;}
.connection-note{display:inline-flex;align-items:center;gap:8px;}
.connection-note::before{content:'🟢';font-size:13px;}
.connection-note.db-error::before{content:'🔴';filter:grayscale(.1);}
body.superadmin-mode .admin-entry-btn{display:none;}

/* v46 Super Admin granite mode */
body.superadmin-mode { --accent: #1d1f23; --accent-dark: #0a0b0d; --granite:#20232a; --granite-soft:#f3f4f6; }
body.superadmin-mode .topbar,
body.superadmin-mode .btn.primary,
body.superadmin-mode .tab.active,
body.superadmin-mode .management-tab.active,
body.superadmin-mode .ref-tab.active {
  background: linear-gradient(135deg,#08090b,#2b2f36) !important;
  color:#fff !important;
  border-color:#111827 !important;
}
body.superadmin-mode .side-card,
body.superadmin-mode .card,
body.superadmin-mode .intro-card,
body.superadmin-mode .power-card,
body.superadmin-mode .marks-intro-panel,
body.superadmin-mode .why-panel {
  border-left: 6px solid #1d1f23 !important;
  background: linear-gradient(135deg,#ffffff,#f5f5f6) !important;
  box-shadow: 0 16px 38px rgba(17,24,39,.08) !important;
}
body.superadmin-mode .mode-card strong,
body.superadmin-mode .card-title,
body.superadmin-mode .side-card h3 { color:#111827 !important; }
body.superadmin-mode .security-badge.superadmin { background:#111827 !important; color:#fff !important; }
body.superadmin-mode .superadmin-banner {
  background: linear-gradient(135deg,#111827,#2f333b) !important;
  border-color:#111827 !important;
  color:#fff !important;
}
body.superadmin-mode .admin-entry-btn{display:none;}

/* v47 refinements: forced password, mode-aware left accents and marks simplification */
.inspector-card { border-left-color: var(--accent) !important; }
body.viewer-mode .inspector-card { border-left-color: var(--eu-blue) !important; }
body.admin-mode .inspector-card { border-left-color: var(--admin-orange) !important; }
body.superadmin-mode .inspector-card { border-left-color: #1d1f23 !important; }
.marks-intro-panel, #marksImportInfo { display: none !important; }
.marks-method-panel.pedagogical-only { border-left-color: var(--accent) !important; }
body.viewer-mode .marks-method-panel.pedagogical-only { border-left-color: var(--eu-blue) !important; }
body.admin-mode .marks-method-panel.pedagogical-only { border-left-color: var(--admin-orange) !important; }
body.superadmin-mode .marks-method-panel.pedagogical-only { border-left-color: #1d1f23 !important; }
body.superadmin-mode .management-tab:not(.active),
body.superadmin-mode .ref-tab:not(.active),
body.superadmin-mode .security-badge:not(.inactive) { color:#111827 !important; }
body.superadmin-mode .management-tabs,
body.superadmin-mode .ref-tabs { border-left:6px solid #1d1f23 !important; }
.force-password-dialog::backdrop { background: rgba(17,24,39,.48); backdrop-filter: blur(4px); }
.force-password-box { max-width: 640px; }
.force-rules .rule-item.ok::before { content: "✓ "; color: var(--success); font-weight: 900; }
.force-rules .rule-item.missing::before { content: "• "; color: var(--danger); font-weight: 900; }
.password-rules .rule-item.ok::before { content: "✓ "; color: var(--success); font-weight: 900; }
.password-rules .rule-item.missing::before { content: "• "; color: var(--danger); font-weight: 900; }
.password-field input { background-color:#fff !important; }
.password-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; }

/* v48 Pedagogical intelligence and content requests */
.intelligence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}.intelligence-card{background:#fff;border:1px solid #dce5f3;border-radius:24px;padding:22px;box-shadow:0 14px 30px rgba(20,40,80,.06);border-left:7px solid var(--mode-color,#003399)}.intelligence-card h3{margin:6px 0 8px;font-size:24px}.intel-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#61708a}.intel-status{margin:14px 0;padding:12px 14px;border-radius:16px;font-weight:800}.intel-status.ok{background:#e8f8ee;color:#0a7d3a}.intel-status.pending{background:#fff4dd;color:#8a4c00}.warning-intel{border-left-color:#c8231b}.request-intel{border-left-color:#f0a400}.wide-intel{grid-column:1/-1}.intel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #edf1f7;padding:10px 0}.request-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.request-form-grid .wide{grid-column:1/-1}.bot-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}.anti-bot-line{background:#f7fbff;border:1px dashed #cbd7ea;border-radius:16px;padding:12px}.content-requests-list{display:grid;gap:12px}.content-request-row{display:grid;grid-template-columns:2fr 1.4fr 1.5fr .9fr auto;gap:14px;align-items:center;border:1px solid #e1e8f3;border-radius:18px;padding:14px;background:#fff}.content-request-row span{display:block;color:#667792;font-size:13px}.status-badge{display:inline-block!important;border-radius:999px;background:#eef4ff;color:#003399;padding:7px 10px;font-weight:800}.request-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}.request-summary-grid div{background:#f7f9fd;border:1px solid #e3ebf6;border-radius:16px;padding:12px}.request-summary-grid strong{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:#61708a}.request-summary-grid span{display:block;margin-top:4px}.mode-aware-panel{border-left-color:var(--mode-color,#003399)}
@media(max-width:1200px){.intelligence-grid{grid-template-columns:1fr}.content-request-row{grid-template-columns:1fr}.request-form-grid{grid-template-columns:1fr}}

/* v49: make Pedagogical intelligence / school request workflow unmistakably visible */
.highlighted-request {
  border-left: 4px solid var(--accent, #f28c28);
  background: linear-gradient(180deg, rgba(242,140,40,.08), #fff);
}
.small-badge {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.38), rgba(255,255,255,0) 32%), linear-gradient(135deg, #ffbf57 0%, #f28c28 58%, #e86e12 100%);
  border: 2px solid rgba(255,255,255,.98);
  box-shadow: 0 14px 30px rgba(242,140,40,.36), 0 3px 10px rgba(20,30,55,.14), inset 0 1px 1px rgba(255,255,255,.3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.management-tab:hover .small-badge,
.management-tab:focus-visible .small-badge,
.small-badge:hover {
  transform: scale(1.18);
  box-shadow: 0 18px 34px rgba(242,140,40,.46), 0 6px 12px rgba(20,30,55,.16), inset 0 1px 1px rgba(255,255,255,.34);
  filter: saturate(1.08) brightness(1.02);
}
body.superadmin-mode .highlighted-request { border-left-color: #1f1f22; }
body.admin-mode .highlighted-request { border-left-color: #f28c28; }
body.viewer-mode .highlighted-request { border-left-color: #003399; }

/* v50: connected admin identity in current mode card */
.connected-user-line{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(35,62,144,.08);
  color:#233e90;
  font-size:12px;
  font-weight:700;
}
.connected-user-line strong{
  display:inline !important;
  margin:0 !important;
  font-size:12px !important;
  color:inherit !important;
}
body.admin-mode .connected-user-line{background:rgba(230,126,34,.12);color:#a94f06;}
body.superadmin-mode .connected-user-line{background:rgba(31,35,43,.10);color:#1f232b;}

/* v51: school contribution and content request workflow */
.connected-user-line strong{font-weight:800;color:var(--mode-color,#003399)}
.request-card.highlighted-request{
  background:linear-gradient(145deg,#ffffff 0%,#f7fbff 60%,#fff8e8 100%);
  border:1px solid rgba(0,51,153,.16);
  border-left:7px solid var(--mode-color,#003399);
  box-shadow:0 16px 34px rgba(0,51,153,.08);
}
.request-card .side-title::before{content:"✦";display:inline-block;margin-right:6px;color:var(--mode-color,#003399)}
body.admin-mode .request-card .side-title::before{color:#f28c28}
body.superadmin-mode .request-card .side-title::before{color:#1f1f22}
.content-request-dialog::backdrop{background:rgba(10,20,40,.42)}
.content-request-box{max-width:980px;width:min(980px,96vw)}
.request-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.request-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid #dce5f3;border-radius:18px;background:#fff;padding:14px;cursor:pointer;transition:.15s ease}
.request-choice:hover{border-color:var(--mode-color,#003399);box-shadow:0 8px 20px rgba(0,51,153,.08)}
.request-choice input{margin-top:3px}.request-choice strong{display:block}.request-choice span{display:block;color:#667792;font-size:13px;margin-top:3px}
.request-subsection{border:1px solid #e1e8f3;border-radius:20px;padding:16px;background:#fbfdff;margin:14px 0}.request-subsection h4{margin:0 0 12px;font-size:18px;color:#1b2b48}
.request-email-panel{margin:0}.request-contact-admin{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;border:1px solid #e1e8f3;background:#fbfdff;border-radius:18px;padding:14px;margin-bottom:16px}.request-contact-admin .subtle{grid-column:1/-1;margin:0}
@media(max-width:900px){.request-choice-grid{grid-template-columns:1fr}.request-contact-admin{grid-template-columns:1fr}}

/* v52 analysis visibility and buttons */
.analysis-btn.active { box-shadow: 0 10px 22px rgba(35,62,144,.18); font-weight: 700; }
.admin-mode .analysis-btn.active { box-shadow: 0 10px 22px rgba(241,139,0,.22); }
.superadmin-mode .analysis-btn.active { box-shadow: 0 10px 22px rgba(20,20,24,.25); }
.optional-analysis.hidden, .tab.hidden { display: none !important; }


/* v53 - clearer information-only other request state */
.request-info-only-card{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:22px;
  align-items:center;
  border:1px solid #f0c879;
  border-left:8px solid #f0a400;
  background:linear-gradient(135deg,#fff8ec 0%,#fffdf8 100%);
  border-radius:24px;
  padding:28px 30px;
  box-shadow:0 16px 36px rgba(130,80,0,.08);
  margin:18px 0 6px;
}
.request-info-icon{
  width:72px;height:72px;border-radius:22px;
  display:grid;place-items:center;
  background:#fff2d6;color:#a55c00;
  font-size:34px;font-weight:900;
  box-shadow:inset 0 0 0 1px #f2d599;
}
.request-info-kicker{
  text-transform:uppercase;letter-spacing:.16em;font-weight:900;
  color:#8a4c00;font-size:12px;margin-bottom:8px;
}
.request-info-only-card h4{font-size:28px;margin:0 0 10px;color:#16213a}
.request-info-only-card p{font-size:17px;line-height:1.5;margin:0 0 16px;color:#53647d;max-width:780px}
.request-contact-large{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:999px;
  background:#003399;color:#fff!important;text-decoration:none!important;
  font-size:20px;font-weight:900;box-shadow:0 14px 26px rgba(0,51,153,.18);
}
.request-contact-large:before{content:'✉';font-size:18px}
.request-contact-large:hover{transform:translateY(-1px);filter:brightness(1.04)}
@media(max-width:800px){.request-info-only-card{grid-template-columns:1fr}.request-info-icon{width:58px;height:58px}.request-info-only-card h4{font-size:23px}.request-contact-large{font-size:16px;white-space:normal}}

/* v54 modal close refinement */
.dialog-head .modal-x,
.modal-x {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #d6dfef;
  background: #eef4ff;
  color: #18243a;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 40, 80, 0.08);
}
.dialog-head .modal-x:hover,
.modal-x:hover {
  background: #dfeaff;
  transform: translateY(-1px);
}
.content-request-dialog .dialog-head {
  align-items: flex-start;
}
.content-request-dialog .dialog-head h3 {
  margin-top: 8px;
}

/* v55 - structured administrator workflow for school content requests */
.request-admin-summary{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:12px;border:1px solid #dfe8f5;background:#f8fbff;border-radius:18px
}
.request-admin-summary span{display:inline-flex;gap:5px;align-items:center;background:#fff;border:1px solid #e5edf8;border-radius:999px;padding:7px 11px;color:#52647d;font-size:13px}
.request-group{border:1px solid #e1e8f3;border-radius:22px;background:#fff;margin:0 0 18px;overflow:hidden;box-shadow:0 10px 26px rgba(20,40,80,.04)}
.request-group-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 18px;background:linear-gradient(90deg,#f7fbff,#fff)}
.request-group-head h4{margin:0;font-size:18px;color:#172845}.request-group-head h4 span{display:inline-flex;margin-left:6px;background:#003399;color:#fff;border-radius:999px;padding:2px 9px;font-size:13px}.request-group-head p{margin:3px 0 0;color:#667792;font-size:13px}
.request-table-wrap{overflow:auto}.request-admin-table{width:100%;border-collapse:collapse;font-size:13px}.request-admin-table th{background:#003399;color:#fff;text-align:left;padding:10px 12px;white-space:nowrap}.request-admin-table td{border-top:1px solid #edf1f7;padding:11px 12px;vertical-align:top}.request-admin-table td span{display:block;color:#667792;font-size:12px;margin-top:2px}.request-admin-table tr:hover{background:#fff8e7}.request-new-row td{font-weight:800}.request-new-row td span{font-weight:700}.request-new-row{background:#fffdf6}.request-empty{padding:14px 18px;color:#667792;border-top:1px solid #edf1f7;background:#fbfdff}.status-badge.submitted{background:#fff3cd;color:#7a4b00}.status-badge.in-review{background:#e8f1ff;color:#003399}.status-badge.more-information-requested{background:#fff1dd;color:#8a4c00}.status-badge.approved{background:#e8f8ee;color:#0a7d3a}.status-badge.rejected{background:#ffe8e6;color:#a21d16}.status-badge.completed{background:#eaf7f7;color:#006b6b}.request-admin-box{max-width:1080px;width:min(1080px,96vw)}.request-admin-form h4{margin:16px 0 10px;color:#172845}.request-admin-status-line{display:flex;justify-content:flex-end;margin:10px 0}.request-admin-status-line label{min-width:260px}.request-admin-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #edf1f7}
@media(max-width:900px){.request-admin-table{min-width:900px}.request-admin-actions{justify-content:stretch}.request-admin-actions .btn{flex:1 1 180px}.request-admin-status-line{justify-content:stretch}.request-admin-status-line label{width:100%}}

/* v56 request-form and admin-request refinements */
.request-choice{
  background:linear-gradient(180deg,#fff9e8,#fffdf6) !important;
  border-color:#f3d58a !important;
}
.request-choice:hover{
  background:linear-gradient(180deg,#fff4d2,#fffaf0) !important;
  border-color:#ee7c00 !important;
}
.request-choice:has(input:checked){
  box-shadow:0 0 0 3px rgba(238,124,0,.12), 0 10px 22px rgba(238,124,0,.10);
  border-color:#ee7c00 !important;
}
.field-help{display:block;margin-top:6px;color:#667792;font-size:12px;line-height:1.35;}
#req_cover_file,#admin_req_cover_file{background:#fff;border:1px dashed #c8a84d;padding:10px;border-radius:12px;}
.content-requests-card{grid-column:1 / -1; width:100%;}
.content-requests-list{width:100%;}
.request-group{border:1px solid #e5edf8;border-radius:18px;overflow:hidden;background:#fff;}
.request-table-wrap{overflow-x:visible !important;width:100%;}
.request-admin-table{table-layout:fixed;width:100%;font-size:12px;}
.request-admin-table th,.request-admin-table td{white-space:normal;word-break:break-word;}
.request-admin-table th:nth-child(1){width:15%;}
.request-admin-table th:nth-child(2){width:12%;}
.request-admin-table th:nth-child(3){width:17%;}
.request-admin-table th:nth-child(4){width:25%;}
.request-admin-table th:nth-child(5){width:13%;}
.request-admin-table th:nth-child(6){width:11%;}
.request-admin-table th:nth-child(7){width:7%;}
.request-admin-box{max-width:1280px;width:min(1280px,98vw);}
@media(max-width:980px){.request-table-wrap{overflow-x:auto !important}.request-admin-table{min-width:980px;}}

/* v59 - request existing material guided filters */
.request-existing-filter-card {
  background: #fff8df;
  border: 1px solid #f5d48a;
  border-radius: 18px;
  padding: 14px 16px 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(230, 143, 42, 0.08);
}
.request-filter-intro {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #172441;
  margin-bottom: 10px;
}
.request-filter-intro span {
  color: #63708a;
  font-weight: 700;
  font-size: 0.92rem;
}
.request-filter-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}
#req_existing_material_hint {
  display: block;
  margin-top: 7px;
}
@media (max-width: 900px) {
  .request-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* v60: request existing-material preview and school chips */
.request-material-preview {
  margin-top: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #fffaf0);
  padding: 14px 16px;
}
.request-material-preview:empty {
  display: none;
}
.request-material-preview-inner {
  display: grid;
  gap: 10px;
}
.request-material-preview-title {
  font-weight: 900;
  color: #14213d;
  font-size: 1.03rem;
}
.request-material-preview-meta {
  color: #59708f;
  font-weight: 800;
  font-size: .88rem;
}
.request-material-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 18px;
}
.request-material-preview-grid > div {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(213, 226, 242, .9);
  border-radius: 14px;
  padding: 10px 12px;
}
.request-material-preview-grid strong {
  display: block;
  color: #233e90;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.request-material-preview-grid span {
  color: #17233d;
  font-weight: 700;
}
.request-school-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.school-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  color: #233e90 !important;
  padding: 4px 9px;
  font-size: .78rem;
  font-weight: 800 !important;
}
@media (max-width: 900px) {
  .request-material-preview-grid { grid-template-columns: 1fr; }
}


/* v71 responsive navigation tightening */
@media (max-width: 900px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; border-radius: 20px; }
  .tab { min-height: 52px; padding: 11px 12px; font-size: .9rem; border-radius: 17px; }
}
@media (max-width: 560px) {
  .tabs { grid-template-columns: 1fr; }
}

.force-password-actions {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(220px, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.force-password-actions .btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 720px) {
  .force-password-actions {
    grid-template-columns: 1fr;
  }
}


/* v76: clearer menu and marks analytics navigation */
.tab,
.analysis-btn,
.management-tab,
.ref-tab {
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: 800;
}
.marks-filter-panel {
  border: 1px solid #d7e2f2;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(0, 32, 91, .07);
}
.marks-filter-panel .filter-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}
.marks-filter-panel label {
  font-size: .76rem;
  font-weight: 800;
  color: #314160;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.marks-filter-panel input,
.marks-filter-panel select {
  width: 100%;
  margin-top: 5px;
}
.marks-filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.marks-subnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.marks-subnav button {
  border: 1px solid #cfdaee;
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  text-align: left;
  font-weight: 850;
  color: #183b68;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 32, 91, .06);
}
.marks-subnav button span {
  display: block;
  color: #6d7890;
  font-size: .78rem;
  font-weight: 650;
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
}
.marks-subnav button.active {
  border-color: #ffcc04;
  box-shadow: inset 0 -4px 0 #ffcc04, 0 10px 24px rgba(0, 32, 91, .10);
  background: linear-gradient(180deg, #ffffff, #fff9df);
}
.marks-calc-panel.hidden { display: none !important; }
.marks-click-hint {
  display: inline-block;
  margin-top: 6px;
  color: #315c91;
  font-size: .78rem;
  font-weight: 750;
}
@media (max-width: 900px) {
  .marks-filter-panel .filter-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .marks-filter-panel .filter-strip { grid-template-columns: 1fr; }
}

/* v77: stronger primary navigation readability */
.tabs .tab { font-size: 14px; letter-spacing: .045em; }
@media (min-width: 1200px) { .tabs .tab { font-size: 15px; } }
.analysis-btn, .admin-tools .btn { text-transform: uppercase; letter-spacing: .035em; }

/* v78: professional statistics and Pedagogical Intelligence navigation */
.analysis-switcher{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:14px 0 10px;
  padding:14px 16px;
  border:1px solid #d7e2f2;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff,#f4f8ff);
  box-shadow:0 10px 24px rgba(0,32,91,.07);
}
.analysis-switcher strong{display:block;color:#10284c;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;}
.analysis-switcher p{margin:3px 0 0;color:#61708a;font-size:.86rem;}
.analysis-switcher select{min-width:280px;border-radius:14px;border:1px solid #cbd7ea;padding:11px 14px;font-weight:800;color:#183b68;background:#fff;}
.professional-subnav button{text-transform:uppercase;letter-spacing:.045em;min-height:78px;}
.professional-subnav button span{text-transform:none;letter-spacing:0;}
.intelligence-grid{display:block;}
.intelligence-command-centre{border-left:8px solid #ffb000;}
.intelligence-panel.hidden{display:none!important;}
.intelligence-filter-panel{margin-top:0;margin-bottom:18px;}
.intelligence-switcher{border-left:8px solid #ffcc04;}
.intelligence-subnav{margin-bottom:20px;}
.intelligence-subnav button.active{border-color:#ffcc04;background:linear-gradient(180deg,#ffffff,#fff6d5);box-shadow:inset 0 -5px 0 #ffcc04,0 10px 26px rgba(0,32,91,.12);}
.intel-row.clickable{cursor:pointer;border-radius:12px;padding-left:8px;padding-right:8px;}
.intel-row.clickable:hover{background:#f4f8ff;}
@media(max-width:760px){.analysis-switcher{display:block}.analysis-switcher select{margin-top:10px;width:100%;min-width:0}}

/* v81 - presentation-quality Final Marks analytics */
.v81-filter-card{padding:18px 20px;border-radius:24px;border-left:8px solid #ffb000;background:linear-gradient(135deg,#ffffff,#f7fbff);}
.filter-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px;}
.filter-scope-note{background:#fff8df;border:1px solid #ffdf7a;border-radius:999px;padding:9px 13px;color:#6b4b00;font-size:.82rem;white-space:nowrap;}
.compact-filter-strip{grid-template-columns:repeat(6,minmax(0,1fr))!important;background:#f8fbff;border:1px solid #dce6f5;border-radius:18px;padding:14px;}
.compact-filter-strip label{display:flex;flex-direction:column;gap:5px;}
.compact-filter-strip select,.compact-filter-strip input{min-height:44px;border-radius:14px;border:1px solid #cfdbea;padding:10px 12px;background:#fff;color:#11294c;font-weight:800;}
.filter-search-wide{grid-column:span 2;}
.compact-filter-strip .marks-filter-actions{align-self:end;display:flex;gap:9px;}
.analysis-picker{padding:18px 20px;margin:16px 0;border:1px solid #d6e2f2;border-radius:24px;background:linear-gradient(135deg,#fff,#f4f8ff);box-shadow:0 12px 28px rgba(0,32,91,.07);}
.analysis-picker-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px;}
.analysis-picker-head strong{display:block;text-transform:uppercase;letter-spacing:.08em;color:#10284c;font-size:1.05rem;}
.analysis-picker-head p{margin:4px 0 0;color:#60718d;}
.analysis-picker-head select{min-width:360px;min-height:46px;border-radius:15px;border:1px solid #cbd7ea;background:#fff;color:#143765;font-weight:900;padding:10px 14px;}
.analysis-radio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}
.analysis-pill{border:1px solid #d5e1f1;border-radius:18px;background:#fff;text-align:left;padding:13px 15px;cursor:pointer;box-shadow:0 9px 20px rgba(0,32,91,.055);transition:.15s ease;}
.analysis-pill:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,32,91,.1);}
.analysis-pill strong{display:block;color:#183b68;text-transform:uppercase;font-size:.86rem;letter-spacing:.045em;}
.analysis-pill span{display:block;margin-top:4px;color:#687790;font-size:.8rem;line-height:1.25;}
.analysis-pill.active{border-color:#ffcc04;background:linear-gradient(180deg,#fff,#fff6d3);box-shadow:inset 0 -5px 0 #ffcc04,0 12px 26px rgba(0,32,91,.12);}
.analysis-explainer{padding:16px;margin-bottom:14px;border:1px solid #ffe0a0;border-left:8px solid #ffb000;border-radius:22px;background:#fffaf0;box-shadow:none;}
.analysis-explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.analysis-explain-grid>div{background:#fff;border:1px solid #f4dca4;border-radius:16px;padding:12px;}
.analysis-explain-grid strong{display:block;color:#7a4d00;margin-bottom:5px;}
.analysis-explain-grid p{margin:0;color:#52627a;line-height:1.35;}
.single-analysis-block{display:block;}
.single-analysis-block>.card{margin-top:12px;}
.analysis-mini-switch{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px;}
.analysis-mini-switch label{display:flex;align-items:center;gap:8px;border:1px solid #d5e1f1;border-radius:999px;padding:9px 13px;background:#fff;color:#183b68;font-weight:850;cursor:pointer;}
.analysis-mini-switch input{accent-color:#003399;}
.marks-section .marks-two-col{display:block!important;}
.v81-kpi-detail-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
@media(max-width:1100px){.compact-filter-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}.filter-search-wide{grid-column:span 2}.filter-card-header,.analysis-picker-head{display:block}.filter-scope-note{display:inline-block;margin-top:8px}.analysis-picker-head select{margin-top:10px;width:100%;min-width:0}}
@media(max-width:680px){.compact-filter-strip{grid-template-columns:1fr!important}.filter-search-wide{grid-column:auto}.analysis-explain-grid{grid-template-columns:1fr}.analysis-radio-row{grid-template-columns:1fr}.compact-filter-strip .marks-filter-actions{display:block}.compact-filter-strip .marks-filter-actions .btn{width:100%;margin-top:8px}}


/* v83 polish: compact school pills, professional KPI cards, cleaner marks detail modal */
.school-pill,.school-tag{
  min-width: 0;
  max-width: 84px;
  padding: 6px 11px;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-pill strong{font-weight:950;}

.power-grid{align-items:stretch;}
.power-card{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,204,4,.20), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,255,.92));
  border:1px solid rgba(0,51,153,.13);
  border-left:6px solid var(--eu-blue);
  box-shadow:0 14px 36px rgba(0,35,85,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.power-card::after{ display:none; content:none; }
.power-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 52px rgba(0,35,85,.16);
  border-color:rgba(255,204,4,.75);
}
.power-card span{color:#5f6f8a;}
.power-card strong{font-size:32px; letter-spacing:-.03em;}
.power-card .bar-row{grid-template-columns:minmax(44px,88px) minmax(0,1fr) minmax(44px,64px);}
.power-card .bar-label{
  font-weight:850;
  color:#1f3764;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.power-card .bar-row:hover .bar-label{text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--school-yellow);}

.single-visibility-option{
  display:grid;
  gap:12px;
  align-items:start;
}
.single-visibility-option .toggle-line{
  justify-content:flex-start;
  max-width:620px;
  margin:0;
}

.chart-dialog{width:min(980px, calc(100vw - 32px)); max-height:calc(100vh - 48px); box-sizing:border-box;}
.chart-dialog .detail-list{overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 150px); padding-right:4px;}
.chart-dialog.marks-material-dialog{width:min(1040px, calc(100vw - 32px));}
.chart-dialog .material-detail-layout{grid-template-columns:190px minmax(0,1fr); gap:18px; width:100%;}
.chart-dialog .detail-cover-large{min-height:260px; max-height:320px; border-radius:18px; box-shadow:0 12px 26px rgba(0,35,85,.10);}
.chart-dialog .detail-cover-large img{max-height:320px; object-fit:contain;}
.chart-dialog .cover-placeholder-large{min-height:260px; font-size:36px;}
.chart-dialog .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.chart-dialog .detail-grid > div{padding:10px;}
.chart-dialog .mini-table{width:100%; table-layout:auto;}
.chart-dialog .mini-table th,.chart-dialog .mini-table td{white-space:normal; word-break:normal;}
@media (max-width: 820px){
  .chart-dialog .material-detail-layout{grid-template-columns:1fr;}
  .chart-dialog .detail-cover-large,.chart-dialog .cover-placeholder-large{min-height:220px;}
  .chart-dialog .detail-grid{grid-template-columns:1fr;}
}


/* v84 polish: clearer KPI/switch panels and no horizontal detail scroll */
.pro-mini-switch{
  background:linear-gradient(135deg,#f8fbff 0%,#fff8e8 100%);
  border:1px solid #dbe7f6;
  border-radius:22px;
  padding:14px;
  box-shadow:0 14px 30px rgba(0,35,85,.06);
}
.mini-switch-title{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:950;color:#62718a;margin:0 0 8px 4px;}
.mini-switch-options{display:flex;gap:12px;flex-wrap:wrap;}
.mini-switch-card{
  min-width:220px;
  flex:1 1 220px;
  border:1px solid #d4e0f0;
  border-radius:18px !important;
  padding:13px 15px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 8px 20px rgba(0,35,85,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.mini-switch-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,35,85,.10);}
.mini-switch-card.active{border-color:#ffb000;background:linear-gradient(135deg,#fff8df,#ffffff) !important;box-shadow:0 12px 28px rgba(255,176,0,.16);}
.mini-switch-card strong{display:block;color:#0f2b55;font-weight:950;}
.mini-switch-card span{display:block;margin-top:3px;color:#60708a;font-size:12px;font-weight:750;}
.mini-switch-description{margin:12px 4px 0;color:#536986;font-size:13px;line-height:1.35;}
.chart-dialog{overflow:hidden;}
.chart-dialog .detail-list{overflow-y:auto;overflow-x:hidden;max-width:100%;}
.chart-dialog .material-detail-layout{grid-template-columns:minmax(120px,170px) minmax(0,1fr);max-width:100%;overflow:hidden;}
.chart-dialog .material-detail-info{min-width:0;max-width:100%;overflow:hidden;}
.chart-dialog .detail-grid{max-width:100%;}
.chart-dialog .detail-grid dd,.chart-dialog .detail-grid p{overflow-wrap:anywhere;}
.chart-dialog .table-wrap{overflow-x:auto;max-width:100%;}
.chart-dialog .mini-table{max-width:100%;}
.chart-dialog .detail-cover-large{min-height:200px;max-height:280px;}
.chart-dialog .cover-placeholder-large{min-height:200px;max-height:280px;}


/* v85 role-based KPI/dashboard card accents */
/* Base prepared for role-specific color logic */
body.viewer-mode .power-card,
body.viewer-mode .harm-kpi,
body.viewer-mode .intelligence-card {
  border-left-color: var(--eu-blue) !important;
}
body.viewer-mode .power-card::after {
  background: linear-gradient(90deg, var(--eu-blue), rgba(255,204,4,.95)) !important;
}
body.viewer-mode .power-card:hover,
body.viewer-mode .harm-kpi:hover,
body.viewer-mode .intelligence-card:hover {
  border-left-color: var(--admin-orange) !important;
}

body.admin-mode .power-card,
body.admin-mode .harm-kpi,
body.admin-mode .intelligence-card {
  border-left-color: var(--admin-orange) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,204,4,.24), transparent 34%),
    linear-gradient(145deg, rgba(255,251,242,.98), rgba(255,246,229,.95));
}
body.admin-mode .power-card::after {
  background: linear-gradient(90deg, rgba(242,169,0,.95), rgba(0,51,153,.9)) !important;
}
body.admin-mode .power-card:hover,
body.admin-mode .harm-kpi:hover,
body.admin-mode .intelligence-card:hover {
  border-left-color: var(--eu-blue) !important;
}

body.superadmin-mode .power-card,
body.superadmin-mode .harm-kpi,
body.superadmin-mode .intelligence-card {
  border-left-color: #1d1f23 !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(31,35,43,.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,247,249,.95));
}
body.superadmin-mode .power-card::after {
  background: linear-gradient(90deg, rgba(29,31,35,.96), rgba(242,169,0,.92)) !important;
}
body.superadmin-mode .power-card:hover,
body.superadmin-mode .harm-kpi:hover,
body.superadmin-mode .intelligence-card:hover {
  border-left-color: var(--admin-orange) !important;
}


/* v86 usage-page cleanup and request dialog vertical scrolling */
.content-request-dialog .content-request-box{
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.content-request-dialog .request-form{
  padding-bottom: 8px;
}
.content-request-dialog .dialog-actions{
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), #fff 26%);
  padding-top: 10px;
}
@media (max-height: 860px){
  .content-request-dialog .content-request-box{
    max-height: calc(100vh - 20px);
  }
}


/* v87 single-view usage page selector */
.usage-mode-switch{margin-top:14px;}
.usage-mode-switch .mini-switch-options{margin-bottom:0;}
.usage-mode-switch .mini-switch-card{cursor:pointer;text-align:left;}
.usage-single-card{margin-top:14px;}
.usage-single-card .usage-page-list{max-height:none;overflow:visible;}


/* v88 usage detail clickability, clearer count badge and admin selected accents */
.usage-item.clickable{cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;background:#fff;}
.usage-item.clickable:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,51,153,.08);border-color:#cfd9ea;}
.usage-count-badge{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;min-width:88px;padding:6px 8px;border-radius:14px;background:linear-gradient(180deg,#f7fbff,#eef4ff);border:1px solid #d8e4f7;}
.usage-count-badge strong{font-size:24px;line-height:1;color:var(--eu-blue);font-weight:900;}
.usage-count-badge span{font-size:11px;line-height:1.15;color:#5f7190;text-align:right;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:4px;}
body.admin-mode .tab.active::after{background: var(--admin-orange) !important; box-shadow: 0 0 0 2px rgba(242,169,0,.22) !important;}
body.admin-mode .management-tab.active,
body.admin-mode .ref-tab.active{box-shadow:0 10px 22px rgba(242,169,0,.24);}


/* v89 expanded admin/reference lists */
.reference-list{
  max-height:none !important;
  overflow:visible !important;
}
.school-checklist{
  max-height:none !important;
  overflow:visible !important;
}
.school-checklist.grouped{
  max-height:none !important;
  overflow:visible !important;
}
.reference-card{
  min-height:88px;
}

/* v91 admin selected navigation underline: blue indicator on orange admin buttons */
body.admin-mode .tab.active::after{
  background: var(--eu-blue) !important;
  box-shadow: 0 0 0 2px rgba(0,51,153,.18) !important;
}

/* v91 reference-list deletion should rely on page scroll, not inner cramped panels */
.reference-list,
.school-checklist,
.school-checklist.grouped{
  max-height:none !important;
  overflow:visible !important;
}

/* v92 readability pass: stronger section titles and more visible usage rows */
.usage-single-card .card-title,
.card-title {
  font-size: 18px;
  letter-spacing: .10em;
  line-height: 1.25;
}

.usage-single-card .card-title {
  font-size: 24px;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.usage-single-card > p.subtle,
.usage-single-card .subtle {
  font-size: 16px;
  line-height: 1.45;
}

.usage-page-list {
  gap: 12px !important;
}

.usage-page-list .usage-item {
  grid-template-columns: 64px minmax(0,1fr) 128px;
  padding: 16px 18px;
  border-radius: 18px;
  min-height: 86px;
}

.usage-page-list .usage-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 19px;
}

.usage-page-list .usage-item strong {
  font-size: 18px;
  line-height: 1.25;
}

.usage-page-list .usage-item span {
  font-size: 14px;
  line-height: 1.35;
}

.usage-page-list .school-tag-wrap {
  margin-top: 7px;
}

.usage-page-list .school-pill,
.usage-page-list .school-tag {
  font-size: 13px;
  padding: 6px 12px;
}

.usage-page-list .usage-count-badge {
  min-width: 118px;
  padding: 10px 12px;
  border-radius: 18px;
}

.usage-page-list .usage-count-badge strong {
  font-size: 30px;
}

.usage-page-list .usage-count-badge span {
  font-size: 12px;
  line-height: 1.2;
}

.why-panel,
.pro-mini-switch {
  font-size: 15px;
}

.why-panel strong,
.mini-switch-title {
  font-size: 14px;
  letter-spacing: .12em;
}

.mini-switch-card strong {
  font-size: 17px;
}

.mini-switch-card span,
.mini-switch-description {
  font-size: 14px;
}

@media (max-width: 900px) {
  .usage-page-list .usage-item {
    grid-template-columns: 56px minmax(0,1fr);
  }
  .usage-page-list .usage-count-badge {
    grid-column: 2;
    justify-self:start;
    align-items:flex-start;
  }
}

/* v93: make right-hand analysis figures prominent and self-explanatory */
.usage-count-badge,
.ranking-row > b,
.marks-bar-row > b,
.intel-row > span:last-child,
.fragment-item > b,
.school-div-metric b,
.combo-count b {
  position: relative;
}

.usage-count-badge {
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 126px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid #cfdcf2;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow: 0 10px 22px rgba(0,51,153,.08);
  color: var(--eu-blue);
  cursor: help;
  text-align: right;
}

.usage-count-badge strong {
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  color: var(--eu-blue);
}

.usage-count-badge span {
  font-size: 11px;
  line-height: 1.15;
  color: #536986;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 850;
}

.usage-count-badge::after,
.marks-bar-row > b::after,
.ranking-row > b::after,
.fragment-item > b::after,
.intel-row > span:last-child::after {
  content: "?";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #ffb000;
  color: #10213f;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(255,176,0,.24);
}

.usage-count-badge::after {
  position: absolute;
  top: -7px;
  right: -7px;
}

.usage-count-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,51,153,.14);
  border-color: #ffb000;
}

.marks-bar-row > b,
.ranking-row > b,
.fragment-item > b {
  min-width: 78px;
  padding: 9px 13px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8fbff, #eef4ff);
  border: 1px solid #d4e0f0;
  color: var(--eu-blue) !important;
  font-size: 21px !important;
  font-weight: 950;
  text-align: center !important;
  box-shadow: 0 8px 18px rgba(0,51,153,.06);
  cursor: help;
}

.marks-bar-row > b::after,
.ranking-row > b::after,
.fragment-item > b::after {
  position: absolute;
  top: -7px;
  right: -7px;
}

.intel-row > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 118px;
  padding: 8px 12px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8fbff, #eef4ff);
  border: 1px solid #d4e0f0;
  color: var(--eu-blue);
  font-weight: 900;
  text-align: right;
  cursor: help;
}

.usage-count-badge[title],
.marks-bar-row > b,
.ranking-row > b,
.fragment-item > b,
.intel-row > span:last-child {
  tooltip: attr(title);
}

.marks-bar-row > b:hover,
.ranking-row > b:hover,
.fragment-item > b:hover,
.intel-row > span:last-child:hover {
  border-color:#ffb000;
  box-shadow:0 12px 24px rgba(0,51,153,.11);
}

@media (max-width: 900px) {
  .usage-count-badge,
  .intel-row > span:last-child {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
}


/* v94: analysis rows reorganised so right-hand KPIs stay fully on screen */
.fragment-item{
  grid-template-columns: minmax(0,1fr) 112px !important;
  grid-template-areas:
    "meta badge"
    "bar badge" !important;
  gap: 8px 14px !important;
  align-items: start !important;
  padding: 12px 0 !important;
}
.fragment-item > div:first-child{grid-area: meta; min-width:0;}
.fragment-item .bar-track{grid-area: bar; width:100%; margin-top: 2px;}
.fragment-item > b{grid-area: badge; align-self: center; justify-self: end; min-width: 84px;}
.fragment-item strong{font-size: 15px !important; line-height:1.2;}
.fragment-item span{font-size: 12px !important; line-height:1.35;}

.marks-bar-row{
  grid-template-columns: minmax(0,1fr) 112px !important;
  grid-template-areas:
    "meta badge"
    "bar badge" !important;
  gap: 8px 14px !important;
  align-items: start !important;
  padding: 14px 0 !important;
}
.marks-bar-row > div:first-child{grid-area: meta; min-width:0;}
.marks-bar-row .bar-track{grid-area: bar; width:100%;}
.marks-bar-row > b{grid-area: badge; align-self:center; justify-self:end; min-width:84px;}
.marks-bar-row strong{font-size: 16px !important; line-height:1.22;}
.marks-bar-row span{font-size: 12px !important; line-height:1.35;}
.marks-bar-row .calc-inline{display:block; margin-top:4px; line-height:1.35;}

.intel-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 126px !important;
  gap:10px 14px !important;
  align-items:center !important;
}
.intel-row > strong{min-width:0;}
.intel-row > span:last-child{justify-self:end; min-width:118px;}

/* Extra room inside the analysis cards */
.marks-chart-card, .warning-intel, .intelligence-panel .card{overflow: visible;}
.single-analysis-block .card{padding-right: 18px;}

/* Better mobile fallback */
@media (max-width: 900px){
  .fragment-item,
  .marks-bar-row,
  .intel-row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "bar"
      "badge" !important;
  }
  .fragment-item > b,
  .marks-bar-row > b,
  .intel-row > span:last-child{
    justify-self:start !important;
    align-self:start !important;
  }
}


/* v95: consistent analysis number badges across all analysis panels */
.analysis-number-badge{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  min-width:92px;
  padding:9px 12px;
  border-radius:16px;
  border:1px solid #cfdcf2;
  background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 100%);
  box-shadow:0 10px 22px rgba(0,51,153,.08);
  color:var(--eu-blue);
  cursor:help;
  text-align:right;
  position:relative;
}
.analysis-number-badge.compact{min-width:84px;padding:8px 10px;}
.analysis-number-badge strong{font-size:28px;line-height:1;font-weight:950;color:var(--eu-blue);}
.analysis-number-badge small{font-size:10px;line-height:1.15;color:#536986;text-transform:uppercase;letter-spacing:.05em;font-weight:850;}
.analysis-number-badge em{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;background:#ffb000;color:#10213f;font-style:normal;font-size:11px;font-weight:950;box-shadow:0 6px 14px rgba(255,176,0,.24);}
.analysis-number-badge:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,51,153,.12);border-color:#ffb000;}

.marks-material-row{grid-template-columns:88px minmax(0,1fr) 110px !important;}
.marks-material-row .analysis-number-badge{justify-self:end;align-self:center;}

.marks-subject-row{grid-template-columns:minmax(0,1fr) 110px !important;grid-template-areas:"meta badge" "bar badge" !important;gap:8px 14px !important;align-items:start !important;}
.marks-subject-row > div:first-child{grid-area:meta;min-width:0;}
.marks-subject-row .bar-track{grid-area:bar;width:100%;}
.marks-subject-row > .analysis-number-badge{grid-area:badge;justify-self:end;align-self:center;}
.marks-subject-row strong{font-size:15px !important;line-height:1.22;}
.marks-subject-row span, .marks-subject-row small{font-size:12px !important;line-height:1.35;}

.school-div-metric .analysis-number-badge{align-items:flex-start;text-align:left;min-width:unset;width:100%;}
.school-div-metric .analysis-number-badge strong{font-size:24px;}

@media (max-width:900px){
  .marks-material-row{grid-template-columns:72px 1fr !important;}
  .marks-material-row .analysis-number-badge{grid-column:1 / -1;justify-self:start;}
  .marks-subject-row{grid-template-columns:1fr !important;grid-template-areas:"meta" "bar" "badge" !important;}
  .marks-subject-row > .analysis-number-badge{justify-self:start;}
  .analysis-number-badge{align-items:flex-start;text-align:left;}
}


/* v96: reset button for Most used / single-school materials filters */
.usage-dialog .filter-strip,
#usagePageFilters .filter-strip{
  align-items:end;
}
.usage-dialog .filter-strip .filter-strip-actions,
#usagePageFilters .filter-strip .filter-strip-actions{
  display:flex;
  align-items:end;
}
.usage-dialog .filter-strip .usage-reset-btn,
#usagePageFilters .filter-strip .usage-reset-btn{
  width:100%;
  min-height:44px;
  border-radius:14px;
  font-weight:900;
  white-space:nowrap;
}
#usagePageFilters .filter-strip{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.usage-dialog .filter-strip{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media(max-width:1100px){
  #usagePageFilters .filter-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .usage-dialog .filter-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:720px){
  #usagePageFilters .filter-strip,
  .usage-dialog .filter-strip{grid-template-columns:1fr;}
}


/* v97: extend analysis panels so page scroll is used instead of inner vertical scrollbars */
.single-analysis-block .usage-list,
.single-analysis-block .fragment-list,
.single-analysis-block .school-diversity,
.single-analysis-block .metric-list,
.single-analysis-block .reference-list,
.single-analysis-block .dispersion-map,
.intelligence-panel .usage-list,
.intelligence-panel .fragment-list,
.intelligence-panel .school-diversity,
.intelligence-panel .metric-list,
.intelligence-panel .reference-list,
.intelligence-panel .dispersion-map,
.marks-chart-card .usage-list,
.marks-chart-card .fragment-list,
.marks-chart-card .school-diversity,
.marks-chart-card .metric-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.single-analysis-block > .card,
.intelligence-panel .card,
.marks-chart-card {
  overflow: visible !important;
}

.single-analysis-block .detail-list,
.intelligence-panel .detail-list {
  max-height: none !important;
  overflow: visible !important;
}


/* v98 refinements */
.harm-grid{grid-template-columns:1fr !important;}
.harm-secondary-card{display:block;}
.harm-secondary-panel{margin-top:14px;}
.harm-secondary-switch .mini-switch-card{min-width:200px;}
.dispersion-filter-panel{
  grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(95px,.7fr)) minmax(170px,1fr) minmax(160px,.9fr) !important;
}
.dispersion-filter-actions{display:flex;align-items:end;}
.dispersion-filter-actions .btn{width:100%;min-height:36px;border-radius:12px;font-weight:900;white-space:nowrap;}
@media(max-width:1400px){
  .dispersion-filter-panel{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .dispersion-filter-actions{grid-column:span 1;}
}
@media(max-width:960px){
  .dispersion-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:700px){
  .dispersion-filter-panel{grid-template-columns:1fr !important;}
}
.chart-dialog.marks-material-dialog{width:min(1180px, calc(100vw - 24px)) !important;}
.chart-dialog.marks-material-dialog .material-detail-layout{grid-template-columns:minmax(110px,150px) minmax(0,1fr) !important;gap:16px !important;}
.chart-dialog.marks-material-dialog .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.chart-dialog.marks-material-dialog .detail-grid > div{padding:8px 10px;}
.chart-dialog.marks-material-dialog .mini-table{font-size:.84rem;table-layout:fixed;width:100%;}
.chart-dialog.marks-material-dialog .mini-table th,.chart-dialog.marks-material-dialog .mini-table td{padding:8px 6px;overflow-wrap:anywhere;}
.chart-dialog.marks-material-dialog .mini-table th:nth-child(1),.chart-dialog.marks-material-dialog .mini-table td:nth-child(1){width:40%;}
.chart-dialog.marks-material-dialog .mini-table th:nth-child(2),.chart-dialog.marks-material-dialog .mini-table td:nth-child(2),
.chart-dialog.marks-material-dialog .mini-table th:nth-child(3),.chart-dialog.marks-material-dialog .mini-table td:nth-child(3),
.chart-dialog.marks-material-dialog .mini-table th:nth-child(4),.chart-dialog.marks-material-dialog .mini-table td:nth-child(4){width:20%;}
.chart-dialog.marks-material-dialog .detail-cover-large,
.chart-dialog.marks-material-dialog .cover-placeholder-large{min-height:170px;max-height:220px;}


/* v99 admin selected button underline: white on orange selected buttons */
body.admin-mode .tab.active::after,
body.admin-mode .management-tab.active::after,
body.admin-mode .ref-tab.active::after{
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22) !important;
}

/* v101 harmonisation analysis picker and production-readiness polish */
.harm-analysis-picker-card{grid-column:1 / -1;}
.harm-analysis-picker-card .harm-secondary-switch{margin-top:12px;}
.harm-analysis-picker-card .mini-switch-card{min-width:190px;}
.harm-secondary-card.hidden,
.heatmap-card.hidden,
.selected-combo-card.hidden{display:none !important;}
.harm-secondary-card{grid-column:1 / -1;}
.heatmap-card{grid-column:1 / -1;}
.selected-combo-card{grid-column:1 / -1;}


/* v102: larger usage analysis selector cards to avoid internal vertical scroll */
.usage-mode-switch .mini-switch-options{
  align-items:stretch;
}
.usage-mode-switch .mini-switch-card{
  min-height:170px;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  white-space:normal;
  overflow:visible;
  padding:20px 22px !important;
}
.usage-mode-switch .mini-switch-card strong{
  width:100%;
  font-size:20px;
  line-height:1.18;
}
.usage-mode-switch .mini-switch-card span{
  width:100%;
  margin-top:8px;
  font-size:15px;
  line-height:1.3;
}
@media (max-width: 1100px){
  .usage-mode-switch .mini-switch-card{min-height:150px;}
}
@media (max-width: 760px){
  .usage-mode-switch .mini-switch-card{min-height:0;}
}

/* v103: Harmonisation becomes the single home for shared/single-school material analysis */
.harm-analysis-picker-card .mini-switch-options{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:12px;
}
.harm-analysis-picker-card .mini-switch-card{
  min-height:132px;
  height:auto;
  overflow:visible;
  white-space:normal;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.harm-analysis-picker-card .mini-switch-card strong{
  font-size:17px;
  line-height:1.18;
}
.harm-analysis-picker-card .mini-switch-card span{
  font-size:13px;
  line-height:1.28;
}
@media(max-width:1450px){
  .harm-analysis-picker-card .mini-switch-options{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .harm-analysis-picker-card .mini-switch-options{grid-template-columns:1fr;}
  .harm-analysis-picker-card .mini-switch-card{min-height:0;}
}


/* v104: harmonisation shared/single-school panels should grow with content */
.harm-secondary-card,
.harm-secondary-card .card,
.harm-secondary-panel,
#harmSecondaryPanel{
  overflow: visible !important;
  max-height: none !important;
}
.harm-secondary-card .usage-list,
.harm-secondary-card .fragment-list,
.harm-secondary-card .school-diversity,
.harm-secondary-card .metric-list,
.harm-secondary-card .reference-list,
#harmSecondaryPanel .usage-list,
#harmSecondaryPanel .fragment-list,
#harmSecondaryPanel .school-diversity,
#harmSecondaryPanel .metric-list,
#harmSecondaryPanel .reference-list{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* v105: Pedagogical Intelligence loading/no-data state */
.intelligence-no-data-card{
  border-left: 8px solid #ffb000;
  background: linear-gradient(135deg,#fffaf0,#ffffff);
}
.no-data-panel{
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid #ffd27a;
  background: #fff8e6;
  box-shadow: 0 10px 24px rgba(255,176,0,.10);
  color: #18304f;
}
.no-data-panel strong{
  display:block;
  font-size: 22px;
  color: #8a4c00;
  margin-bottom: 8px;
}
.no-data-panel p{
  margin: 8px 0 0;
  line-height: 1.45;
}
.operation-dialog .spinner{
  width: 52px;
  height: 52px;
  border-width: 6px;
}
.operation-dialog .operation-box{
  min-width: min(460px, calc(100vw - 48px));
}


/* v106: ensure strong contrast in analysis/detail tables */
.mini-table thead th,
.chart-dialog .mini-table thead th,
.material-detail-dialog .mini-table thead th {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #123a8a;
}
.mini-table tbody td,
.chart-dialog .mini-table tbody td,
.material-detail-dialog .mini-table tbody td {
  color: #172845 !important;
  background: #ffffff;
}
.mini-table tbody tr:nth-child(even) td,
.chart-dialog .mini-table tbody tr:nth-child(even) td,
.material-detail-dialog .mini-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}
.mini-table tbody tr:hover td,
.chart-dialog .mini-table tbody tr:hover td,
.material-detail-dialog .mini-table tbody tr:hover td {
  background: #fff8e9 !important;
  color: #172845 !important;
}


/* v108: terminology clean-up and wider Coverage & harmonisation signal rows */
.coverage-shared-card .coverage-row,
.intelligence-panel[data-intel-panel="coverage"] .coverage-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
  gap: 18px !important;
  align-items: center !important;
}
.coverage-shared-card .coverage-row > strong,
.intelligence-panel[data-intel-panel="coverage"] .coverage-row > strong {
  min-width: 0 !important;
  overflow-wrap: anywhere;
  font-size: 15px;
}
.coverage-shared-card .coverage-row > span,
.intelligence-panel[data-intel-panel="coverage"] .coverage-row > span {
  justify-self: end;
  width: 100%;
  max-width: 330px;
  min-width: 260px;
  padding: 12px 16px !important;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
  border: 1px solid #d4e0f0;
  color: var(--eu-blue);
  text-align: right;
  box-shadow: 0 8px 18px rgba(0,51,153,.06);
  box-sizing: border-box;
}
.coverage-shared-card .coverage-row > span b,
.intelligence-panel[data-intel-panel="coverage"] .coverage-row > span b {
  display: inline;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}
.coverage-shared-card .coverage-row > span em,
.intelligence-panel[data-intel-panel="coverage"] .coverage-row > span em {
  display: inline;
  margin-left: 6px;
  font-style: normal;
  font-weight: 850;
  color: var(--eu-blue);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .coverage-shared-card .coverage-row,
  .intelligence-panel[data-intel-panel="coverage"] .coverage-row {
    grid-template-columns: 1fr !important;
  }
  .coverage-shared-card .coverage-row > span,
  .intelligence-panel[data-intel-panel="coverage"] .coverage-row > span {
    justify-self: start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
  }
}


/* v110: faster Pedagogical Intelligence perceived loading */
.intelligence-loading-card{
  border-left:8px solid #ffb000;
  background:linear-gradient(135deg,#fffaf0,#ffffff);
}
.inline-loading-row{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 22px;
}
.inline-loading-row .spinner{
  width:42px;
  height:42px;
  margin:0;
  flex:0 0 auto;
}
.inline-loading-row h3{
  margin:0 0 5px;
  color:#172845;
}
.inline-loading-row p{
  margin:0;
  color:#5d6e88;
}


/* v111: organised export/backup/restore operations and request badge */
.tab-with-badge{
  position:relative;
}
.tab-badge:not(.hidden),
.small-badge:not(.hidden){
  animation: badgePulse 2.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{ transform: scale(1); }
  8%{ transform: scale(1.08); }
  16%{ transform: scale(1); }
}

.tab-badge{
  position:absolute;
  top:-12px;
  right:-12px;
  min-width:32px;
  height:32px;
  padding:0 9px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.32), rgba(255,255,255,0) 34%), linear-gradient(135deg, #f35b4f 0%, #d92e22 58%, #b91512 100%);
  color:#fff;
  font-size:14px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.01em;
  box-shadow:0 15px 32px rgba(200,35,27,.38), 0 4px 10px rgba(20,30,55,.14), inset 0 1px 1px rgba(255,255,255,.28);
  border:2px solid #fff;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.tab-with-badge:hover .tab-badge,
.tab-with-badge:focus-within .tab-badge,
.tab-badge:hover {
  transform: scale(1.18);
  box-shadow:0 19px 38px rgba(200,35,27,.46), 0 6px 12px rgba(20,30,55,.16), inset 0 1px 1px rgba(255,255,255,.34);
  filter:saturate(1.08) brightness(1.02);
}
.ops-section{
  border:1px solid #dce6f4;
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  margin:14px 0;
}
.export-ops-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px;
}
.export-checklist{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.export-checklist label{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border:1px solid #dce6f4;
  border-radius:16px;
  background:#fff;
  font-weight:850;
  color:#18304f;
}
.export-checklist input{
  width:18px;
  height:18px;
}
.ops-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.restore-warning{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  border:1px solid #ffb3ad;
  background:#fff3f2;
  color:#67231e;
}
.restore-warning strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}
.restore-controls{
  display:grid;
  grid-template-columns:2fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-top:12px;
}
.backup-history .backup-row{
  grid-template-columns:170px 1fr 2fr 90px auto;
  align-items:center;
}
.backup-history code{
  white-space:normal;
  overflow-wrap:anywhere;
  background:#f4f7fb;
  padding:7px 9px;
  border-radius:10px;
  color:#18304f;
}
@media(max-width:1100px){
  .export-checklist{grid-template-columns:repeat(2,minmax(0,1fr));}
  .restore-controls{grid-template-columns:1fr;}
  .backup-history .backup-row{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .export-ops-grid,.export-checklist{grid-template-columns:1fr;}
}


/* v112: Pedagogical Intelligence manual calculation entry point */
.intelligence-start-card{
  border-left:8px solid #ffb000;
  background:linear-gradient(135deg,#fffaf0,#ffffff);
}
.pi-start-panel{
  margin-top:16px;
  padding:22px 24px;
  border:1px solid #ffd27a;
  border-radius:22px;
  background:#fff8e6;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}
.pi-start-panel strong{
  display:block;
  font-size:22px;
  color:#8a4c00;
  margin-bottom:6px;
}
.pi-start-panel p{
  margin:0;
  color:#5d6e88;
}
@media(max-width:800px){
  .pi-start-panel{flex-direction:column;align-items:flex-start;}
}


/* v115: improved harmonisation detail layout and viewer PI no-data behaviour */
.usage-list .usage-item{
  grid-template-columns: 44px minmax(0,1fr) minmax(150px, 190px) !important;
  gap: 16px !important;
  align-items: center;
}
.usage-count-wide{
  min-width: 150px !important;
  width: 100%;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg,#f8fbff,#eef4ff) !important;
  border: 1px solid #cfe0fb !important;
  box-shadow: 0 10px 22px rgba(0,51,153,.08);
  text-align: center;
  justify-self: end;
}
.usage-count-wide strong{
  display:block;
  font-size: 30px !important;
  line-height: .9;
  color: var(--eu-blue);
}
.usage-count-wide span{
  display:block;
  margin-top:6px;
  font-size: 11px !important;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 950;
  color:#556985 !important;
  white-space: normal !important;
}
.subject-fragment-list .subject-frag-item{
  display:grid !important;
  grid-template-columns: minmax(260px, 1.25fr) minmax(260px, 2fr) minmax(135px, 160px);
  gap:16px;
  align-items:center;
  padding:16px 18px;
}
.subject-frag-item:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 28px rgba(0,51,153,.08);
}
.subject-frag-main{
  min-width:0;
}
.subject-frag-main strong{
  display:block;
  font-size:17px;
  margin-bottom:5px;
}
.subject-frag-main span{
  display:block;
  color:#5d6e88;
  font-size:13px;
  line-height:1.35;
}
.subject-frag-bar{
  width:100%;
  min-width:0;
}
.subject-frag-number{
  justify-self:end;
}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:14px 0 18px;
}
.metric-box{
  padding:16px;
  border:1px solid #dce6f4;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
}
.metric-box strong{
  display:block;
  font-size:28px;
  color:var(--eu-blue);
}
.metric-box span{
  display:block;
  margin-top:4px;
  color:#5d6e88;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
@media(max-width:900px){
  .usage-list .usage-item{grid-template-columns:44px 1fr !important;}
  .usage-count-wide{grid-column:1 / -1; justify-self:stretch;}
  .subject-fragment-list .subject-frag-item{grid-template-columns:1fr;}
  .subject-frag-number{justify-self:start;}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* v119: assisted Final Marks import mapping */
.manual-map-panel{
  margin-top:14px;
  padding:18px;
  border:1px solid #ffd27a;
  border-radius:20px;
  background:linear-gradient(135deg,#fff8e6,#ffffff);
  color:#18304f;
}
.manual-map-panel strong{
  display:block;
  font-size:18px;
  color:#8a4c00;
  margin-bottom:6px;
}
.manual-map-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.manual-map-grid input{
  width:100%;
}
@media(max-width:1000px){
  .manual-map-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .manual-map-grid{grid-template-columns:1fr;}
}


/* v123_visual_polish: premium visual layer only. No data model or calculation changes. */
:root{
  --visual-card-radius: 26px;
  --visual-soft-shadow: 0 18px 42px rgba(19, 43, 78, .08);
  --visual-hover-shadow: 0 24px 54px rgba(0, 51, 153, .13);
  --visual-glass: rgba(255,255,255,.78);
  --visual-panel-gradient: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.96) 55%, rgba(255,248,231,.70) 100%);
}

body{
  background:
    radial-gradient(circle at 14% 8%, rgba(255,204,4,.18), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(0,51,153,.12), transparent 26%),
    linear-gradient(135deg,#eef3fb 0%,#f8fbff 48%,#fff9ec 100%);
}

.app-header{
  box-shadow: 0 18px 46px rgba(0,51,153,.14);
  backdrop-filter: blur(10px);
}

.header-title h1,
.hero h1{
  letter-spacing:-.025em;
}

.hero,
.card,
.wide-card,
.marks-section,
.operations-card,
.content-requests-card,
.reference-manager,
.data-table-wrap{
  border-radius: var(--visual-card-radius) !important;
  box-shadow: var(--visual-soft-shadow);
  border: 1px solid rgba(207, 221, 243, .95);
  background: var(--visual-panel-gradient);
}

.card,
.material-card,
.combo-card,
.usage-item,
.fragment-item,
.metric-row,
.backup-row,
.request-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.card:hover,
.material-card:hover,
.combo-card:hover,
.usage-item:hover,
.fragment-item:hover,
.metric-row:hover,
.request-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--visual-hover-shadow);
}

.tab,
.management-tab,
.mini-switch-card,
.intel-sub-btn,
.marks-subnav button{
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.tab:hover,
.management-tab:hover,
.mini-switch-card:hover,
.intel-sub-btn:hover,
.marks-subnav button:hover{
  transform: translateY(-1px);
}

.tab.active,
.management-tab.active,
.mini-switch-card.active,
.marks-subnav button.active{
  box-shadow: 0 18px 38px rgba(0,51,153,.14);
}

.section-heading{
  align-items:center;
}

.section-heading span{
  background: linear-gradient(135deg, #eef4ff, #fff5d8);
  color: var(--eu-blue);
  box-shadow: inset 0 0 0 1px rgba(0,51,153,.08);
  font-weight: 950;
}

.card-title,
.section-heading h3,
.marks-section h3{
  letter-spacing:.045em;
}

.harm-kpi,
.metric-box,
.dashboard-kpi,
.stat-card{
  border-radius: 22px !important;
  background: linear-gradient(135deg,#ffffff 0%,#f7fbff 58%,#fff6dd 100%) !important;
  border: 1px solid #dce6f4 !important;
  box-shadow: 0 14px 34px rgba(0,51,153,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.harm-kpi:hover,
.metric-box:hover,
.dashboard-kpi:hover,
.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,51,153,.13);
}

.harm-kpi strong,
.metric-box strong{
  letter-spacing:-.035em;
}

.school-pill,
.tag,
.material-pill,
.status-pill{
  box-shadow: 0 7px 16px rgba(0,51,153,.08);
}

.school-pill,
.tag{
  border-radius: 999px !important;
  font-weight: 900;
}

input,
select,
textarea{
  border-radius: 16px !important;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus{
  box-shadow: 0 0 0 4px rgba(0,51,153,.12);
  border-color: var(--eu-blue) !important;
}

.search-card,
.search-bar,
.filter-panel,
.marks-filter-panel{
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(8px);
}

.no-data-panel,
.pi-start-panel,
.why-panel,
.analysis-explainer{
  border-radius: 24px !important;
  background: linear-gradient(135deg,#fff9ea,#ffffff) !important;
  box-shadow: 0 16px 34px rgba(255,176,0,.10);
}

dialog,
.modal,
.dialog-card{
  border-radius: 30px !important;
  box-shadow: 0 34px 90px rgba(12,28,54,.30) !important;
}

.mini-table thead th{
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.mini-table tbody tr{
  transition: background .14s ease;
}

.mini-table tbody tr:hover td{
  background:#fff8e9 !important;
}

/* Presentation mode: hides operational noise and turns the app into a cleaner meeting view. */
.presentation-toggle{
  background: linear-gradient(135deg,#ffffff,#fff4d4) !important;
  color: var(--eu-blue) !important;
}

body.presentation-mode .side-panel,
body.presentation-mode .admin-only,
body.presentation-mode #loginBtn,
body.presentation-mode #logoutBtn,
body.presentation-mode .operation-result,
body.presentation-mode .audit-only,
body.presentation-mode .request-actions,
body.presentation-mode .management-tabs,
body.presentation-mode .admin-management-only{
  display:none !important;
}

body.presentation-mode .main-layout{
  grid-template-columns: 1fr !important;
}

body.presentation-mode .content-area,
body.presentation-mode .main-content{
  max-width: 1600px;
  margin-inline:auto;
}

body.presentation-mode .hero{
  padding: 34px 42px;
}

body.presentation-mode .tab{
  min-height: 74px;
}

body.presentation-mode .card,
body.presentation-mode .wide-card,
body.presentation-mode .marks-section{
  box-shadow: 0 18px 48px rgba(0,51,153,.10);
}

body.presentation-mode .filter-panel,
body.presentation-mode .marks-filter-panel{
  opacity:.96;
}


/* v124_visual_polish_fix: Presentation view now visibly changes the current layout */
.presentation-toggle.active,
.presentation-toggle[aria-pressed="true"]{
  background: linear-gradient(135deg,#003399,#1f5ee8) !important;
  color:#fff !important;
  box-shadow: 0 14px 32px rgba(0,51,153,.25) !important;
}

body.presentation-mode .sidebar,
body.presentation-mode aside.sidebar,
body.presentation-mode .side-panel,
body.presentation-mode .left-panel{
  display:none !important;
}

body.presentation-mode .shell,
body.presentation-mode .main-layout,
body.presentation-mode main.shell{
  display:block !important;
  grid-template-columns: 1fr !important;
  max-width: 1640px;
  margin-inline:auto;
}

body.presentation-mode .main-panel,
body.presentation-mode .main-content,
body.presentation-mode .content-area{
  width:100% !important;
  max-width:1640px !important;
  margin-inline:auto !important;
}

body.presentation-mode .admin-only,
body.presentation-mode .viewer-noise,
body.presentation-mode .request-card,
body.presentation-mode .highlighted-request,
body.presentation-mode .operation-result,
body.presentation-mode .form-actions,
body.presentation-mode .admin-entry-btn,
body.presentation-mode #adminLoginBtn,
body.presentation-mode #adminLogoutBtn{
  display:none !important;
}

body.presentation-mode .tabs,
body.presentation-mode .tab-bar{
  justify-content:center;
}

body.presentation-mode .intro-card,
body.presentation-mode .hero,
body.presentation-mode .wide-card,
body.presentation-mode .marks-section,
body.presentation-mode .card{
  box-shadow: 0 22px 58px rgba(0,51,153,.11) !important;
}

body.presentation-mode .global-search-wrap{
  max-width: 1100px;
  margin-inline:auto;
}

body.presentation-mode .power-grid{
  grid-template-columns: repeat(5, minmax(0,1fr));
}

@media(max-width:1200px){
  body.presentation-mode .power-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media(max-width:1000px){
  body.presentation-mode .power-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* v127 admin materials browser */
body.admin-mode .management-tab,
body.admin-mode .management-tab.active{color:#111827 !important;}
body.admin-mode .management-tab.active{font-weight:900;}
.admin-material-browser-card{grid-column:1 / -1;}
.admin-material-filters{display:grid;grid-template-columns:minmax(220px,1.8fr) repeat(4,minmax(120px,.8fr)) minmax(120px,.8fr) auto;gap:10px;margin:12px 0 10px;align-items:center;}
.admin-browser-summary{margin:2px 0 10px;}
.admin-material-browser-list{display:grid;grid-template-columns:1fr;gap:10px;max-height:none;overflow:visible;}
.admin-browser-item{display:grid;grid-template-columns:60px minmax(0,1.8fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;}
.admin-browser-item:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,51,153,.08);border-color:#cfd9ea;}
.admin-browser-item.inactive{background:#fff8f6;}
.admin-browser-thumb{width:60px;height:76px;border-radius:12px;border:1px solid #dce5f4;background:#f4f7fb;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:900;color:var(--eu-blue);}
.admin-browser-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-browser-main strong{display:block;font-size:16px;color:#14233f;}
.admin-browser-meta{margin-top:3px;color:#62738f;font-size:13px;}
.admin-browser-extra{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.admin-browser-stats{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:150px;}
.admin-browser-count{padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#f7fbff,#eef4ff);border:1px solid #d8e4f7;text-align:right;}
.admin-browser-count strong{display:block;font-size:24px;line-height:1;color:var(--eu-blue);font-weight:900;}
.admin-browser-count span{display:block;margin-top:4px;font-size:11px;line-height:1.15;color:#5f7190;text-transform:uppercase;font-weight:700;}
.admin-browser-open{font-size:12px;font-weight:800;color:#5f7190;}
@media(max-width:1200px){.admin-material-filters{grid-template-columns:repeat(3,minmax(0,1fr));}.admin-material-filters .btn{width:100%;}}
@media(max-width:900px){.admin-material-filters{grid-template-columns:repeat(2,minmax(0,1fr));}.admin-browser-item{grid-template-columns:52px minmax(0,1fr);}.admin-browser-stats{grid-column:1 / -1;align-items:flex-start;}.admin-browser-count{text-align:left;}}


/* v128 admin material browser refinements */
.admin-browser-schools{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
.admin-browser-schools .school-pill{
  font-size:10px;
  padding:5px 7px;
}
.more-pill{
  background:#eef4ff !important;
  color:#003399 !important;
  border:1px solid #d8e4f7 !important;
}
.admin-browser-stats .btn.small{
  width:100%;
  justify-content:center;
}
.admin-selected-material-strip{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:14px 16px;
  margin-bottom:14px;
  border-radius:20px;
  border:1px solid #d8e4f7;
  background:linear-gradient(135deg,#f7fbff,#fff8e5);
}
.admin-selected-material-strip strong{
  display:block;
  font-size:17px;
  color:#14233f;
  margin:2px 0;
}
.admin-selected-material-strip small{
  display:block;
  color:#64748b;
  font-weight:700;
}
.strip-label{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#003399;
  font-size:11px;
  font-weight:950;
}
.strip-schools{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:240px;
}
.strip-schools > span{
  font-weight:950;
  color:#003399;
}
.strip-schools .school-tags{
  justify-content:flex-end;
}
@media(max-width:900px){
  .admin-selected-material-strip{flex-direction:column;align-items:flex-start;}
  .strip-schools{align-items:flex-start;min-width:0;}
  .strip-schools .school-tags{justify-content:flex-start;}
}


/* v129 consolidation: force Admin Management tab labels to black in Admin mode */
body.admin-mode #adminTab .management-tabs .management-tab,
body.admin-mode #adminTab .management-tabs .management-tab.active,
body.admin-mode #adminTab .management-tabs .management-tab:hover,
body.admin-mode #adminTab .management-tabs .management-tab:focus{
  color:#111827 !important;
}
body.admin-mode #adminTab .management-tabs .management-tab .small-badge{
  color:#ffffff !important;
}
body.admin-mode #adminTab .management-tabs .management-tab.active{
  text-shadow:none !important;
}


/* v133 missing/blank filter support */
.blank-data-row .bar-label,
.detail-row.blank-data-row strong{
  color:#a21d16 !important;
  font-weight:950;
}
.blank-data-row .bar-track{
  background:#ffe8e6;
}
.blank-data-row .bar-fill{
  background:linear-gradient(90deg,#c8231b,#f28c28) !important;
}


/* v136 Pedagogical Intelligence detailed analysis selector */
.marks-subnav.professional-subnav button.active{
  outline: 2px solid rgba(0,51,153,.18);
}


/* v137 title and Pedagogical Intelligence selector cleanup */
.intro-title-two-line{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 8px;
  line-height:1.12;
}
.intro-title-main{
  display:block;
  font-size:clamp(23px,2.25vw,34px);
  font-weight:900;
  letter-spacing:-.025em;
  color:var(--eu-blue);
}
.intro-title-sub{
  display:block;
  font-size:clamp(17px,1.55vw,24px);
  font-weight:950;
  letter-spacing:-.015em;
  color:#132f5f;
}
.analysis-picker .analysis-radio-row [data-intelligence-pill].active{
  outline:2px solid rgba(0,51,153,.22);
}


/* v138 premium header, role-aware colours, table fitting and card hover polish */
:root{
  --role-accent:#003399;
  --role-accent-2:#365fc0;
  --role-soft:#eef5ff;
  --role-glow:rgba(0,51,153,.16);
}
body.viewer-mode{
  --role-accent:#003399;
  --role-accent-2:#4f74d1;
  --role-soft:#eef5ff;
  --role-glow:rgba(0,51,153,.16);
}
body.admin-mode{
  --role-accent:#f2a900;
  --role-accent-2:#ee7c00;
  --role-soft:#fff7df;
  --role-glow:rgba(242,169,0,.24);
}
body.superadmin-mode{
  --role-accent:#1d1f23;
  --role-accent-2:#525866;
  --role-soft:#f3f4f6;
  --role-glow:rgba(17,24,39,.18);
}

.intro-card{
  position:relative;
  overflow:hidden;
  padding:30px 34px !important;
  border:1px solid rgba(0,51,153,.10) !important;
  border-left:0 !important;
  background:
    radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--role-accent) 15%, transparent), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(255,204,4,.16), transparent 28%),
    linear-gradient(135deg,#ffffff 0%, #f7faff 48%, var(--role-soft) 100%) !important;
  box-shadow:0 18px 46px rgba(10,31,68,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.intro-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:linear-gradient(180deg,var(--role-accent),var(--role-accent-2));
  border-radius:999px;
}
.intro-card::after{
  content:"";
  position:absolute;
  right:28px;
  top:24px;
  width:92px;
  height:92px;
  border-radius:28px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--role-accent) 16%, transparent), rgba(255,204,4,.16));
  filter:blur(2px);
  opacity:.55;
  pointer-events:none;
}
.intro-title-two-line{
  position:relative;
  z-index:1;
  max-width:1120px;
}
.intro-title-main{
  font-size:clamp(30px,3.15vw,50px) !important;
  line-height:.98 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
  color:var(--eu-blue) !important;
}
body.admin-mode .intro-title-main{ color:#8f5d00 !important; }
body.superadmin-mode .intro-title-main{ color:#111827 !important; }
.intro-title-sub{
  margin-top:8px;
  font-size:clamp(19px,1.75vw,29px) !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.025em !important;
  color:#142f60 !important;
}
body.admin-mode .intro-title-sub{ color:#17325e !important; }
body.superadmin-mode .intro-title-sub{ color:#2b3038 !important; }
.intro-card p{
  position:relative;
  z-index:1;
  margin-top:14px !important;
  max-width:980px;
  color:#60718a !important;
  font-size:16px !important;
}
.intro-badges{
  position:relative;
  z-index:2;
}

/* Premium initial KPI cards: richer hover without underline-like side-bar colour jump */
.power-card{
  position:relative;
  overflow:hidden;
  border-left:0 !important;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--role-accent) 10%, transparent), transparent 35%),
    linear-gradient(145deg,#ffffff 0%, #f8fbff 62%, var(--role-soft) 100%) !important;
  box-shadow:0 14px 34px rgba(10,31,68,.09), inset 0 1px 0 rgba(255,255,255,.78) !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.power-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(180deg,var(--role-accent),var(--role-accent-2));
  border-radius:999px;
  opacity:.95;
}
.power-card::after{
  display:none !important;
  content:none !important;
}
.power-card:hover{
  transform:translateY(-4px);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--role-accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg,#ffffff 0%, #f2f7ff 56%, color-mix(in srgb, var(--role-soft) 82%, #fff) 100%) !important;
  box-shadow:0 22px 46px rgba(10,31,68,.14), 0 0 0 1px color-mix(in srgb, var(--role-accent) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.power-card:hover span,
.power-card:hover strong,
.power-card:hover .bar-label,
.power-card:hover .bar-value{
  text-decoration:none !important;
}
.power-card span{
  text-decoration:none !important;
}
.power-card .bar-label{
  text-decoration:none !important;
}

/* Role-aware accents for analysis cards and dialogs */
body.viewer-mode .analysis-picker,
body.viewer-mode .analysis-explainer,
body.viewer-mode .why-panel{ border-left-color:#003399 !important; }
body.admin-mode .analysis-picker,
body.admin-mode .analysis-explainer,
body.admin-mode .why-panel{ border-left-color:#f2a900 !important; }
body.superadmin-mode .analysis-picker,
body.superadmin-mode .analysis-explainer,
body.superadmin-mode .why-panel{ border-left-color:#1d1f23 !important; }

body.viewer-mode .analysis-pill.active{ border-color:#003399 !important; box-shadow:inset 0 -5px 0 #003399,0 12px 26px rgba(0,32,91,.12) !important; }
body.admin-mode .analysis-pill.active{ border-color:#f2a900 !important; box-shadow:inset 0 -5px 0 #f2a900,0 12px 26px rgba(242,169,0,.14) !important; }
body.superadmin-mode .analysis-pill.active{ border-color:#1d1f23 !important; box-shadow:inset 0 -5px 0 #1d1f23,0 12px 26px rgba(17,24,39,.12) !important; }

/* Tables/panels: keep information inside the panel and avoid horizontal scrolling */
.chart-dialog{
  width:min(1180px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
}
.chart-dialog .table-wrap,
.table-wrap.no-x-scroll{
  overflow-x:hidden !important;
  max-width:100% !important;
}
.chart-dialog .mini-table.fit-table,
.language-books-table{
  table-layout:fixed;
  width:100%;
  max-width:100%;
  font-size:13px;
}
.language-books-table th,
.language-books-table td{
  padding:9px 10px;
  vertical-align:top;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.language-books-table th:nth-child(1){width:46%;}
.language-books-table th:nth-child(2){width:8%;}
.language-books-table th:nth-child(3){width:11%;}
.language-books-table th:nth-child(4){width:10%;}
.language-books-table th:nth-child(5){width:25%;}
.language-books-table td:nth-child(2),
.language-books-table td:nth-child(3),
.language-books-table td:nth-child(4){
  white-space:nowrap !important;
}
.language-books-table .school-tags,
.language-books-table .school-tag-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:100%;
}
.language-books-table .school-pill,
.language-books-table .school-tag{
  max-width:78px;
  min-width:0;
  padding:4px 8px;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chart-dialog .why-panel{
  overflow-wrap:anywhere;
}

/* Richer marks row detail */
.marks-detail-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:10px 0 12px;
}
.marks-detail-kpis>div{
  border:1px solid rgba(0,51,153,.12);
  border-radius:16px;
  padding:12px;
  background:linear-gradient(135deg,#fff,#f7faff);
}
.marks-detail-kpis span,
.compact-detail-grid span{
  display:block;
  color:#66758d;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.marks-detail-kpis strong{
  display:block;
  margin-top:4px;
  color:#102a5e;
  font-size:22px;
}
.compact-detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}
.compact-detail-grid>div{
  background:#fff;
  border:1px solid #e5edf8;
  border-radius:14px;
  padding:9px 10px;
}
.compact-detail-grid strong{
  display:block;
  color:#13294b;
  margin-top:3px;
  overflow-wrap:anywhere;
}
.inline-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

@media(max-width:900px){
  .intro-card{padding:24px 22px !important;}
  .intro-title-main{font-size:clamp(26px,8vw,38px) !important;}
  .language-books-table th:nth-child(1){width:40%;}
  .language-books-table th:nth-child(5){width:31%;}
  .marks-detail-kpis,
  .compact-detail-grid{grid-template-columns:1fr;}
}


/* v139 consolidated field-tested improvements */
.intro-title-main{
  font-size:clamp(26px,2.45vw,42px) !important;
  white-space:nowrap;
  letter-spacing:-.05em !important;
}
@media(max-width:1200px){
  .intro-title-main{white-space:normal;font-size:clamp(25px,4vw,38px) !important;}
}

/* Show full school-pill lists where there is space */
.usage-item .school-tags,
.usage-item .school-tag-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  max-width:100%;
  margin-top:8px;
}
.usage-item{
  align-items:center;
}
.usage-item .usage-count-badge{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.usage-item .school-pill{
  max-width:none;
}

/* School diversity rows are now explorable */
.school-div-row.clickable{
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.school-div-row.clickable:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#fff,#f4f8ff);
  box-shadow:0 12px 28px rgba(0,51,153,.09);
}

/* Presentation filters */
.presentation-filter-toggle{
  margin-left:8px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.16);
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:900;
  cursor:pointer;
}
.presentation-filter-toggle:hover{
  background:rgba(255,255,255,.25);
}
.presentation-filters-dialog{
  border:0;
  padding:0;
  background:transparent;
  width:min(720px, calc(100vw - 28px));
  margin-left:auto;
  margin-right:24px;
}
.presentation-filters-dialog::backdrop{
  background:rgba(10,20,40,.35);
  backdrop-filter:blur(2px);
}
.presentation-filters-box{
  background:#fff;
  border:1px solid #d8e4f5;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(10,31,68,.24);
  padding:22px;
}
.presentation-filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.presentation-filter-grid label{
  margin:0;
}
.presentation-filter-grid .wide{
  grid-column:1 / -1;
}
.presentation-filter-actions{
  justify-content:flex-end;
  margin-top:16px;
}
body.presentation-mode .presentation-filter-toggle{
  display:inline-flex;
}

/* Cleaner Content Request actions after removing Completed */
.request-admin-actions{
  gap:12px;
  flex-wrap:wrap;
}
.request-admin-actions [data-request-admin-status="Approved"]{
  min-width:120px;
}
.request-admin-actions [data-request-admin-status="Rejected"]{
  margin-left:auto;
}

/* ES/AES KPI labels are short and readable */
.power-card .bar-label{
  min-width:42px;
  font-weight:950;
}

/* Pedagogical Intelligence auto-refresh: button remains as manual fallback */
#intelApplyFiltersBtn{
  opacity:.88;
}


/* v140: Pedagogical Intelligence filter layout and future-proof level KPI */
.marks-filter-panel .compact-filter-strip{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) auto !important;
  gap:14px 16px !important;
  align-items:end !important;
}
.marks-filter-panel .compact-filter-strip label{
  min-width:0;
}
.marks-filter-panel .compact-filter-strip .filter-search-wide{
  grid-column: 1 / span 2 !important;
}
.marks-filter-panel .compact-filter-strip .marks-filter-actions{
  grid-column: 6 !important;
  grid-row: 1 / span 2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:end !important;
  align-items:stretch !important;
  gap:10px !important;
  min-width:190px;
}
.marks-filter-panel .compact-filter-strip .marks-filter-actions .btn{
  width:100%;
  white-space:nowrap;
}
.power-card[data-chart="level"] strong{
  letter-spacing:-.035em;
}

@media(max-width:1400px){
  .marks-filter-panel .compact-filter-strip{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  .marks-filter-panel .compact-filter-strip .marks-filter-actions{
    grid-column:auto !important;
    grid-row:auto !important;
    flex-direction:row !important;
    min-width:0;
  }
  .marks-filter-panel .compact-filter-strip .filter-search-wide{
    grid-column:1 / -1 !important;
  }
}
@media(max-width:900px){
  .marks-filter-panel .compact-filter-strip{
    grid-template-columns:1fr !important;
  }
  .marks-filter-panel .compact-filter-strip .marks-filter-actions{
    flex-direction:column !important;
  }
}


/* v141: clearer ES/AES KPI card titles */
.power-card[data-chart="categoryCoverage"] span,
.power-card[data-chart="categoryAssignments"] span{
  letter-spacing:.09em;
}


/* v144 Security & Users redesign and role-aware background polish */
body.viewer-mode{
  background:
    radial-gradient(circle at 8% 0%, rgba(255,204,4,.42), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(242,124,0,.30), transparent 30%),
    linear-gradient(135deg,#fff1b8 0%, #fff8df 34%, #eef5ff 72%, #dce9ff 100%) !important;
}
body.admin-mode{
  background:
    radial-gradient(circle at 9% 0%, rgba(0,51,153,.48), transparent 33%),
    radial-gradient(circle at 88% 3%, rgba(0,83,180,.36), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,204,4,.20), transparent 35%),
    linear-gradient(135deg,#b9d1ff 0%, #d8e7ff 38%, #edf4ff 72%, #f7fbff 100%) !important;
}
body.superadmin-mode{
  background:
    radial-gradient(circle at 12% 0%, rgba(17,24,39,.12), transparent 30%),
    linear-gradient(135deg,#eef0f3 0%, #f8f9fb 48%, #ffffff 100%) !important;
}

/* Super Admin Security & Users panel */
.security-users-card{
  max-width:1280px;
}
.security-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:18px 20px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:24px;
  background:
    radial-gradient(circle at 96% 0%, rgba(17,24,39,.10), transparent 30%),
    linear-gradient(135deg,#fff,#f6f7f9);
  margin-bottom:16px;
}
.security-eyebrow{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:#6b7280;
  font-weight:950;
  margin-bottom:5px;
}
.security-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,.75fr);
  gap:16px;
  align-items:start;
}
.security-main-column,
.security-side-column{
  display:grid;
  gap:16px;
}
.security-panel{
  border:1px solid rgba(17,24,39,.10);
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  padding:16px;
  box-shadow:0 12px 30px rgba(17,24,39,.06);
}
.security-section-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.security-section-title strong{
  display:block;
  color:#111827;
  font-size:15px;
  font-weight:950;
}
.security-section-title span{
  display:block;
  color:#667085;
  font-size:12px;
  margin-top:3px;
  line-height:1.35;
}
.security-section-title.compact{
  margin-bottom:8px;
}
.security-user-form{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:0 !important;
}
.security-form-actions{
  display:flex !important;
  align-items:end;
  gap:10px;
  grid-column:1 / -1;
}
.security-form-actions .btn{
  min-width:120px;
}
.security-help-box{
  margin-top:0 !important;
  border-left:5px solid #f59e0b !important;
}
.security-help-box p{
  margin:0;
  color:#475467;
  line-height:1.45;
}
.security-users-list{
  display:grid !important;
  gap:9px !important;
  margin-top:0 !important;
}
.security-user-row{
  display:grid !important;
  grid-template-columns:minmax(180px,1.15fr) minmax(220px,1.1fr) 145px 98px minmax(245px,auto) !important;
  gap:12px !important;
  align-items:center !important;
  padding:13px 14px !important;
  border:1px solid #e5e7eb !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 8px 20px rgba(17,24,39,.055) !important;
}
.security-user-row.protected-account{
  border-color:#cfd4dc !important;
  background:linear-gradient(135deg,#fff,#f4f5f7) !important;
}
.security-user-row .user-main strong{
  display:block;
  color:#15213a;
  font-size:14px;
}
.security-user-row .user-main span,
.security-user-row .user-email{
  color:#667085;
  font-size:12px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.security-user-row .user-main em{
  display:inline-flex;
  margin-top:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.security-badge{
  border-radius:999px !important;
  padding:6px 10px !important;
  font-size:11px !important;
  font-weight:950 !important;
  text-align:center !important;
  line-height:1 !important;
}
.security-badge.role-badge.admin,
.security-badge.role-badge.viewer{
  background:#eef4ff !important;
  color:#003399 !important;
}
.security-badge.role-badge.superadmin{
  background:#111827 !important;
  color:#fff !important;
}
.security-badge.status-badge.active{
  background:#e8f7ee !important;
  color:#08713d !important;
}
.security-badge.status-badge.inactive{
  background:#fee2e2 !important;
  color:#991b1b !important;
}
.security-row-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.security-more-actions{
  position:relative;
}
.security-more-actions summary{
  list-style:none;
  cursor:pointer;
  padding:7px 11px;
  border-radius:999px;
  background:#eef4ff;
  color:#17335f;
  font-size:12px;
  font-weight:900;
}
.security-more-actions summary::-webkit-details-marker{
  display:none;
}
.security-more-actions summary::after{
  content:" ▾";
}
.security-more-actions[open] summary::after{
  content:" ▴";
}
.security-more-actions div{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  z-index:30;
  min-width:170px;
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid #d8e0ec;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 42px rgba(17,24,39,.18);
}
.security-more-actions .btn{
  width:100%;
}
.security-events-panel{
  min-height:160px;
}
.security-events-head{
  margin:0 0 10px !important;
}
.security-events-list{
  margin-top:0 !important;
  display:grid !important;
  gap:8px !important;
}
.security-event-row{
  display:grid !important;
  grid-template-columns:minmax(105px,.7fr) minmax(0,1.2fr) minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  padding:10px 11px !important;
  border:1px solid #e5e7eb !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:none !important;
  font-size:12px !important;
}
.security-event-row strong{
  display:block;
  color:#111827;
}
.security-event-row span,
.security-event-row .event-time,
.security-event-row .event-email{
  display:block;
  color:#667085;
  overflow-wrap:anywhere;
}
.empty-security-state{
  padding:16px;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  background:#f8fafc;
  margin:0 !important;
}

/* Superadmin tabs/actions refinement */
body.superadmin-mode .security-users-card{
  border-left:6px solid #111827 !important;
}
body.superadmin-mode .superadmin-banner{
  background:linear-gradient(135deg,#111827,#29313d) !important;
  color:#fff !important;
  border-color:#111827 !important;
  box-shadow:0 10px 28px rgba(17,24,39,.16);
}

/* v146-v147: compact navigation and icon-only header status controls */
.header-actions{
  flex-wrap:nowrap;
}
.header-icon-pill{
  width:42px;
  height:42px;
  padding:0 !important;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.header-icon-pill span{
  display:block;
  line-height:1;
  font-size:19px;
  font-weight:950;
}
.presentation-toggle.header-icon-pill{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.presentation-toggle.header-icon-pill:hover,
.server-status-pill:hover{
  background:rgba(255,255,255,.28) !important;
  transform:translateY(-1px);
}
.presentation-filter-header{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.presentation-filter-header span{
  font-size:22px;
  transform:translateY(-1px);
}
.presentation-toggle.header-icon-pill.active,
.presentation-toggle.header-icon-pill[aria-pressed="true"]{
  background:linear-gradient(135deg,#ffffff,#ffe7a0) !important;
  color:var(--accent-dark) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}
.header-year-pill{
  min-width:96px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.92);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:950;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  white-space:nowrap;
}
.intro-card{
  justify-content:center !important;
  text-align:center;
}
.intro-card > div:first-child{
  width:100%;
}
.intro-title-two-line{
  margin-left:auto !important;
  margin-right:auto !important;
}
.intro-card p{
  margin-left:auto !important;
  margin-right:auto !important;
}
.intro-card::after{
  display:none !important;
}
.intro-badges{
  display:none !important;
}
.database-status-pill{
  background:rgba(255,255,255,.16) !important;
}
.database-status-pill span{
  font-size:20px;
  color:#f6a800;
  text-shadow:0 0 14px rgba(246,168,0,.55);
}
.database-status-pill[data-status="connected"] span{
  color:#32d583;
  text-shadow:0 0 16px rgba(50,213,131,.72);
}
.database-status-pill[data-status="offline"] span{
  color:#ff6b5f;
  text-shadow:0 0 16px rgba(255,107,95,.68);
}
.server-status-pill{
  background:rgba(255,255,255,.16) !important;
}
.server-status-pill span{
  font-size:21px;
  color:#f6a800;
  text-shadow:0 0 14px rgba(246,168,0,.55);
}
.server-status-pill[data-status="online"] span{
  color:#32d583;
  text-shadow:0 0 16px rgba(50,213,131,.72);
}
.server-status-pill[data-status="offline"] span{
  color:#ff6b5f;
  text-shadow:0 0 16px rgba(255,107,95,.68);
}
body.admin-mode .tabs{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px;
  padding:12px;
}
body.superadmin-mode .tabs{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px;
  padding:12px;
}
body.admin-mode .tabs .tab,
body.superadmin-mode .tabs .tab{
  min-height:66px;
  padding:12px 10px 16px;
  border-radius:18px;
  font-size:12px;
  letter-spacing:.04em;
  line-height:1.14;
}
body.admin-mode .tabs .tab::after,
body.superadmin-mode .tabs .tab::after{
  left:15px;
  right:15px;
}
body.admin-mode .tabs .tab-badge,
body.superadmin-mode .tabs .tab-badge{
  top:-12px;
  right:-10px;
  min-width:30px;
  height:30px;
}
.filters-panel,
.summary-card{
  border-left:7px solid var(--accent) !important;
}
.intro-badges #connectionNote{
  display:none !important;
}
.intro-badges{
  align-items:flex-end;
}
.year-badge{
  background:linear-gradient(135deg,#ffffff,#eef4ff) !important;
  border:1px solid rgba(0,51,153,.22) !important;
  color:var(--eu-blue) !important;
  box-shadow:0 10px 22px rgba(0,51,153,.10);
}
body.admin-mode .year-badge{
  border-color:rgba(242,169,0,.42) !important;
  background:linear-gradient(135deg,#ffffff,#fff4d4) !important;
  color:#815200 !important;
}
body.superadmin-mode .year-badge{
  border-color:rgba(17,24,39,.22) !important;
  background:linear-gradient(135deg,#ffffff,#f1f3f6) !important;
  color:#111827 !important;
}
#intelligenceTab.tab-panel,
#auditTab.tab-panel{
  background:rgba(255,255,255,.93) !important;
}
#intelligenceTab .pi-start-panel,
#intelligenceTab .no-data-panel,
#intelligenceTab .analysis-explainer,
#intelligenceTab .why-panel{
  background:linear-gradient(135deg,#ffffff,#f7fbff) !important;
  box-shadow:0 16px 34px rgba(0,51,153,.08) !important;
}

/* v148: Pedagogical Intelligence uses the same neutral visual language as the other tabs */
#intelligenceTab.tab-panel{
  background:rgba(255,255,255,.93) !important;
}
#intelligenceTab .harmonisation-head{
  margin-bottom:14px;
}
#intelligenceTab .mode-aware-panel,
#intelligenceTab .why-panel,
#intelligenceTab .analysis-explainer,
#intelligenceTab .no-data-panel,
#intelligenceTab .pi-start-panel{
  border:1px solid #dce6f4 !important;
  border-left:6px solid var(--accent) !important;
  background:linear-gradient(135deg,#ffffff,#f8fbff) !important;
  color:#172033 !important;
  box-shadow:0 12px 28px rgba(0,51,153,.07) !important;
}
#intelligenceTab .mode-aware-panel strong,
#intelligenceTab .why-panel strong,
#intelligenceTab .analysis-explainer strong,
#intelligenceTab .pi-start-panel strong{
  color:#10284c !important;
}
#intelligenceTab .intelligence-command-centre,
#intelligenceTab .intelligence-start-card,
#intelligenceTab .v81-filter-card,
#intelligenceTab .intelligence-switcher{
  border-left-color:var(--accent) !important;
  background:linear-gradient(135deg,#ffffff,#f8fbff) !important;
}
#intelligenceTab .filter-scope-note{
  background:#eef4ff !important;
  border-color:#d6e3f8 !important;
  color:#17335f !important;
}
#intelligenceTab .analysis-pill.active,
#intelligenceTab .intelligence-subnav button.active{
  border-color:var(--accent) !important;
  background:linear-gradient(180deg,#ffffff,#eef4ff) !important;
  box-shadow:inset 0 -5px 0 var(--accent),0 12px 26px rgba(0,51,153,.12) !important;
}
#intelligenceTab .analysis-explain-grid > div{
  border-color:#dce6f4 !important;
  background:#ffffff !important;
}
#intelligenceTab .analysis-explain-grid strong{
  color:#10284c !important;
}

/* v149: make Pedagogical Intelligence match the Harmonisation tab structure */
#intelligenceTab .harmonisation-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px !important;
}
#intelligenceTab .harmonisation-head h2{
  margin:0 0 4px;
  font-size:25px;
  text-transform:none;
  letter-spacing:0;
}
#intelligenceTab .harmonisation-head p{
  margin:0;
  color:var(--muted);
  max-width:820px;
}
#intelligenceTab .marks-filter-panel.v81-filter-card{
  padding:12px !important;
  margin:0 0 16px !important;
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
#intelligenceTab .marks-filter-panel .filter-card-header{
  display:none !important;
}
#intelligenceTab .compact-filter-strip{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#intelligenceTab .intelligence-start-card,
#intelligenceTab .intelligence-no-data-card,
#intelligenceTab .intelligence-command-centre,
#intelligenceTab .intelligence-panel{
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 12px 32px rgba(0,35,85,.08) !important;
}
#intelligenceTab .pi-start-panel{
  margin-top:12px !important;
  padding:16px !important;
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
#intelligenceTab .pi-start-panel strong{
  font-size:18px !important;
  color:#172033 !important;
}
#intelligenceTab .intel-status{
  border:1px solid var(--line);
  background:#f8fafc !important;
  color:#274067 !important;
}
#intelligenceTab .analysis-picker,
#intelligenceTab .analysis-explainer{
  border:1px solid var(--line) !important;
  border-left:0 !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}

@media(max-width:1250px){
  body.admin-mode .tabs,
  body.superadmin-mode .tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:760px){
  .header-actions{
    flex-wrap:wrap;
  }
  body.admin-mode .tabs,
  body.superadmin-mode .tabs{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:1180px){
  .security-layout{
    grid-template-columns:1fr;
  }
  .security-user-row{
    grid-template-columns:minmax(170px,1fr) minmax(180px,1fr) 120px 90px !important;
  }
  .security-row-actions{
    grid-column:1 / -1;
    justify-content:flex-start !important;
  }
}
@media(max-width:760px){
  .security-hero{
    flex-direction:column;
  }
  .security-user-form,
  .security-user-row,
  .security-event-row{
    grid-template-columns:1fr !important;
  }
  .security-row-actions{
    flex-wrap:wrap !important;
  }
  .security-more-actions div{
    left:0;
    right:auto;
  }
}

/* v150: hard reset Pedagogical Intelligence to the standard Catalogue-style surface */
#intelligenceTab.tab-panel{
  background:rgba(255,255,255,.93) !important;
  border:1px solid rgba(220,226,238,.9) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 12px 32px rgba(0,35,85,.08) !important;
}
#intelligenceTab .harmonisation-head{
  padding:0 !important;
  margin:0 0 16px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#intelligenceTab .harmonisation-head h2{
  color:#172033 !important;
  font-size:25px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#intelligenceTab .harmonisation-head p{
  color:var(--muted) !important;
}
#intelligenceTab .marks-filter-panel,
#intelligenceTab .marks-filter-panel.wide-card,
#intelligenceTab .marks-filter-panel.v81-filter-card{
  padding:12px !important;
  margin:0 0 16px !important;
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
#intelligenceTab .filter-card-header,
#intelligenceTab .filter-scope-note{
  display:none !important;
}
#intelligenceTab .compact-filter-strip{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#intelligenceTab .marks-section,
#intelligenceTab .wide-card,
#intelligenceTab .card,
#intelligenceTab .intelligence-start-card,
#intelligenceTab .intelligence-no-data-card,
#intelligenceTab .intelligence-command-centre,
#intelligenceTab .intelligence-panel,
#intelligenceTab .analysis-picker,
#intelligenceTab .analysis-explainer,
#intelligenceTab .pi-start-panel,
#intelligenceTab .no-data-panel,
#intelligenceTab .why-panel{
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  box-shadow:0 10px 28px rgba(0,35,85,.07) !important;
  color:#172033 !important;
}
#intelligenceTab .marks-section{
  padding:16px !important;
  margin:0 0 16px !important;
}
#intelligenceTab .section-heading > span{
  background:var(--accent) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
#intelligenceTab .section-heading h3,
#intelligenceTab .card-title,
#intelligenceTab .analysis-picker-head strong,
#intelligenceTab .analysis-explain-grid strong,
#intelligenceTab .pi-start-panel strong,
#intelligenceTab .no-data-panel strong{
  color:#172033 !important;
}
#intelligenceTab .harm-kpi,
#intelligenceTab .dashboard-kpi,
#intelligenceTab .stat-card{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-left:7px solid var(--accent) !important;
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(0,35,85,.07) !important;
}
#intelligenceTab .harm-kpi strong{
  color:var(--accent) !important;
}
#intelligenceTab .warning-intel,
#intelligenceTab .request-intel,
#intelligenceTab .harm-kpi.high{
  border-left-color:var(--accent) !important;
}
#intelligenceTab .harm-kpi.high strong{
  color:var(--accent) !important;
}
#intelligenceTab .intel-status,
#intelligenceTab .intel-status.ok,
#intelligenceTab .intel-status.pending{
  border:1px solid var(--line) !important;
  background:#f8fafc !important;
  color:#274067 !important;
  box-shadow:none !important;
}
#intelligenceTab .analysis-pill{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
#intelligenceTab .analysis-pill.active,
#intelligenceTab .intelligence-subnav button.active,
#intelligenceTab .mini-switch-card.active{
  border-color:var(--accent) !important;
  background:#ffffff !important;
  box-shadow:inset 0 -5px 0 var(--accent),0 10px 24px rgba(0,51,153,.10) !important;
}
#intelligenceTab .analysis-explain-grid > div,
#intelligenceTab .calc-grid > div{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
}
#intelligenceTab .mini-table tbody tr:hover td,
#intelligenceTab .usage-item:hover,
#intelligenceTab .metric-row:hover{
  background:#f8fafc !important;
}

/* v152: PI filter bar is now visually identical to Harmonisation */
#intelligenceTab .intelligence-focus-bar{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto !important;
  gap:10px !important;
  align-items:end !important;
  margin:0 0 16px !important;
  padding:12px !important;
  background:#f8fafc !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
#intelligenceTab .intelligence-focus-bar label{
  margin-top:0 !important;
}
#intelligenceTab .intelligence-focus-bar .btn{
  align-self:end !important;
  min-height:44px !important;
  white-space:nowrap;
}

/* v151: final role-colour enforcement for main navigation and Super Admin workspaces */
body.admin-mode .tabs .tab.active,
body.admin-mode .tabs .tab[data-tab="intelligence"].active,
body.admin-mode .tabs .tab[data-tab="admin"].active,
body.admin-mode .tabs .tab[data-tab="audit"].active{
  background:linear-gradient(135deg,var(--admin-orange),var(--admin-orange-dark)) !important;
  color:#111827 !important;
  border-color:var(--admin-orange) !important;
  box-shadow:0 16px 34px rgba(242,169,0,.28) !important;
}
body.admin-mode .tabs .tab.active::after,
body.admin-mode .tabs .tab[data-tab="intelligence"].active::after,
body.admin-mode .tabs .tab[data-tab="admin"].active::after,
body.admin-mode .tabs .tab[data-tab="audit"].active::after{
  background:var(--eu-blue) !important;
  box-shadow:0 0 0 2px rgba(0,51,153,.18) !important;
}
body.admin-mode #adminTab .management-tabs .management-tab.active,
body.admin-mode #adminTab .management-tabs .management-tab:hover{
  background:linear-gradient(135deg,var(--admin-orange),var(--admin-orange-dark)) !important;
  border-color:var(--admin-orange) !important;
  color:#111827 !important;
}
body.admin-mode #adminTab .management-tabs .management-tab.active::after{
  background:var(--eu-blue) !important;
}
body.superadmin-mode .main-panel,
body.superadmin-mode #adminTab,
body.superadmin-mode #auditTab{
  min-width:0;
}
body.superadmin-mode #adminTab .management-tabs{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px !important;
  padding:12px !important;
  border:1px solid rgba(17,24,39,.14) !important;
  border-left:6px solid #111827 !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#ffffff,#f5f6f8) !important;
  box-shadow:0 12px 28px rgba(17,24,39,.08) !important;
}
body.superadmin-mode #adminTab .management-tabs .management-tab{
  min-height:54px;
  border-radius:16px !important;
  border:1px solid #d1d5db !important;
  background:#fff !important;
  color:#111827 !important;
  text-align:center;
}
body.superadmin-mode #adminTab .management-tabs .management-tab.active{
  background:linear-gradient(135deg,#08090b,#2b2f36) !important;
  border-color:#111827 !important;
  color:#fff !important;
}
body.superadmin-mode .security-users-card{
  max-width:none !important;
  width:100% !important;
  border-left:6px solid #111827 !important;
  background:rgba(255,255,255,.96) !important;
}
body.superadmin-mode .security-hero{
  border-radius:18px !important;
  background:linear-gradient(135deg,#111827,#29313d) !important;
  color:#fff !important;
  border-color:#111827 !important;
}
body.superadmin-mode .security-hero .card-title,
body.superadmin-mode .security-hero .subtle,
body.superadmin-mode .security-hero .security-eyebrow{
  color:#fff !important;
}
body.superadmin-mode .security-layout{
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr) !important;
  align-items:start !important;
}
body.superadmin-mode .security-panel{
  border-radius:18px !important;
  border:1px solid #d8dee8 !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(17,24,39,.07) !important;
}
body.superadmin-mode .security-user-form{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.superadmin-mode .security-user-row{
  grid-template-columns:minmax(160px,1.2fr) minmax(210px,1.1fr) 150px 100px minmax(255px,auto) !important;
  border-radius:14px !important;
  border-color:#d8dee8 !important;
  box-shadow:none !important;
}
body.superadmin-mode .security-row-actions .btn{
  white-space:nowrap;
}
.superadmin-log-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid #111827;
  background:linear-gradient(135deg,#111827,#29313d);
  color:#fff;
}
.superadmin-log-head h2{
  margin:2px 0 4px;
  font-size:25px;
}
.superadmin-log-head p{
  margin:0;
  color:rgba(255,255,255,.78);
}
.audit-log-wrap{
  border-radius:18px !important;
  border:1px solid #d8dee8 !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(17,24,39,.07) !important;
  overflow:auto !important;
}
#auditTable{
  min-width:980px;
}
#auditTable th{
  background:#111827 !important;
  color:#fff !important;
}
#auditTable td{
  vertical-align:top;
  line-height:1.35;
}
#auditTable td:nth-child(1){
  width:165px;
  white-space:nowrap;
}
#auditTable td:nth-child(2){
  width:130px;
  font-weight:800;
  color:#172033;
}
#auditTable td:nth-child(3){
  width:170px;
  font-weight:900;
  color:#111827;
}
#auditTable td:nth-child(5){
  font-family:Arial, Helvetica, sans-serif;
  color:#475467;
  overflow-wrap:anywhere;
}
@media(max-width:1280px){
  body.superadmin-mode #adminTab .management-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  body.superadmin-mode .security-layout{
    grid-template-columns:1fr !important;
  }
}

/* v153: final mode-colour normalisation for Pedagogical Intelligence.
   Older marks-analysis rules forced PI back to a white/blue surface. This
   block is deliberately last so PI follows the selected mode consistently. */
#intelligenceTab.tab-panel{
  border-radius:var(--radius) !important;
  box-shadow:0 12px 32px rgba(0,35,85,.08) !important;
}
body.viewer-mode #intelligenceTab.tab-panel{
  background:linear-gradient(135deg,#fff7cf 0%,#fffaf0 48%,#f7fbff 100%) !important;
  border-color:rgba(246,168,0,.38) !important;
}
body.admin-mode #intelligenceTab.tab-panel{
  background:linear-gradient(135deg,#fff2c2 0%,#fff8e4 48%,#eef5ff 100%) !important;
  border-color:rgba(246,168,0,.50) !important;
}
body.superadmin-mode #intelligenceTab.tab-panel{
  background:linear-gradient(135deg,#f4f5f7 0%,#ffffff 55%,#eef0f3 100%) !important;
  border-color:rgba(17,24,39,.18) !important;
}
#intelligenceTab .harmonisation-head{
  border-left:0 !important;
  background:transparent !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head h2,
body.viewer-mode #intelligenceTab .harmonisation-head p,
body.viewer-mode #intelligenceTab .section-heading h3{
  color:#003399 !important;
}
body.admin-mode #intelligenceTab .harmonisation-head h2,
body.admin-mode #intelligenceTab .harmonisation-head p,
body.admin-mode #intelligenceTab .section-heading h3{
  color:#17325e !important;
}
body.viewer-mode #intelligenceTab .intelligence-focus-bar,
body.viewer-mode #intelligenceTab .harm-focus-bar{
  background:linear-gradient(135deg,#fffdf4,#fff5cb) !important;
  border-color:rgba(246,168,0,.42) !important;
}
body.admin-mode #intelligenceTab .intelligence-focus-bar,
body.admin-mode #intelligenceTab .harm-focus-bar{
  background:linear-gradient(135deg,#fffaf0,#fff0bd) !important;
  border-color:rgba(246,168,0,.55) !important;
}
body.superadmin-mode #intelligenceTab .intelligence-focus-bar,
body.superadmin-mode #intelligenceTab .harm-focus-bar{
  background:linear-gradient(135deg,#ffffff,#f4f5f7) !important;
  border-color:rgba(17,24,39,.16) !important;
}
body.viewer-mode #intelligenceTab .card,
body.viewer-mode #intelligenceTab .wide-card,
body.viewer-mode #intelligenceTab .marks-section,
body.viewer-mode #intelligenceTab .intelligence-panel,
body.viewer-mode #intelligenceTab .analysis-picker,
body.viewer-mode #intelligenceTab .analysis-explainer,
body.viewer-mode #intelligenceTab .why-panel,
body.viewer-mode #intelligenceTab .intelligence-no-data-card,
body.viewer-mode #intelligenceTab .pi-start-panel{
  background:linear-gradient(135deg,#ffffff,#fffdf4) !important;
  border-color:rgba(246,168,0,.32) !important;
}
body.admin-mode #intelligenceTab .card,
body.admin-mode #intelligenceTab .wide-card,
body.admin-mode #intelligenceTab .marks-section,
body.admin-mode #intelligenceTab .intelligence-panel,
body.admin-mode #intelligenceTab .analysis-picker,
body.admin-mode #intelligenceTab .analysis-explainer,
body.admin-mode #intelligenceTab .why-panel,
body.admin-mode #intelligenceTab .intelligence-no-data-card,
body.admin-mode #intelligenceTab .pi-start-panel{
  background:linear-gradient(135deg,#ffffff,#fff8e4) !important;
  border-color:rgba(246,168,0,.42) !important;
}
body.viewer-mode #intelligenceTab .harm-kpi,
body.viewer-mode #intelligenceTab .dashboard-kpi,
body.viewer-mode #intelligenceTab .stat-card,
body.admin-mode #intelligenceTab .harm-kpi,
body.admin-mode #intelligenceTab .dashboard-kpi,
body.admin-mode #intelligenceTab .stat-card{
  border-left-color:#f6a800 !important;
}
body.viewer-mode #intelligenceTab .section-heading > span,
body.admin-mode #intelligenceTab .section-heading > span{
  background:#f6a800 !important;
  color:#111827 !important;
}
body.viewer-mode #intelligenceTab .analysis-pill.active,
body.viewer-mode #intelligenceTab .intelligence-subnav button.active,
body.viewer-mode #intelligenceTab .mini-switch-card.active,
body.admin-mode #intelligenceTab .analysis-pill.active,
body.admin-mode #intelligenceTab .intelligence-subnav button.active,
body.admin-mode #intelligenceTab .mini-switch-card.active{
  border-color:#f6a800 !important;
  background:linear-gradient(180deg,#ffffff,#fff2bd) !important;
  box-shadow:inset 0 -5px 0 #f6a800,0 10px 24px rgba(246,168,0,.16) !important;
}
body.admin-mode #intelligenceTab .btn.secondary,
body.viewer-mode #intelligenceTab .btn.secondary{
  background:#eef4ff !important;
  color:#003399 !important;
}

/* v154: PI must match Harmonisation exactly at panel level.
   The v153 warm PI treatment was too different from Harmonisation. Keep the
   global Viewer/Admin page colours, but reset PI's internal surface to the
   same neutral tab-panel and harm-focus-bar styling as Harmonisation. */
body.viewer-mode #intelligenceTab.tab-panel,
body.admin-mode #intelligenceTab.tab-panel,
body.superadmin-mode #intelligenceTab.tab-panel{
  background:rgba(255,255,255,.93) !important;
  border:1px solid rgba(220,226,238,.9) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 12px 32px rgba(0,35,85,.08) !important;
}
#intelligenceTab .harmonisation-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 0 16px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head h2,
body.admin-mode #intelligenceTab .harmonisation-head h2,
body.superadmin-mode #intelligenceTab .harmonisation-head h2{
  margin:0 0 4px !important;
  color:var(--ink) !important;
  font-size:25px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head p,
body.admin-mode #intelligenceTab .harmonisation-head p,
body.superadmin-mode #intelligenceTab .harmonisation-head p{
  margin:0 !important;
  color:var(--muted) !important;
  max-width:820px !important;
}
body.viewer-mode #intelligenceTab .intelligence-focus-bar,
body.admin-mode #intelligenceTab .intelligence-focus-bar,
body.superadmin-mode #intelligenceTab .intelligence-focus-bar{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto !important;
  gap:10px !important;
  align-items:end !important;
  margin:0 0 16px !important;
  padding:12px !important;
  background:#f8fafc !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
body.viewer-mode #intelligenceTab .card,
body.viewer-mode #intelligenceTab .wide-card,
body.viewer-mode #intelligenceTab .marks-section,
body.viewer-mode #intelligenceTab .intelligence-panel,
body.viewer-mode #intelligenceTab .analysis-picker,
body.viewer-mode #intelligenceTab .analysis-explainer,
body.viewer-mode #intelligenceTab .why-panel,
body.viewer-mode #intelligenceTab .intelligence-no-data-card,
body.viewer-mode #intelligenceTab .pi-start-panel,
body.admin-mode #intelligenceTab .card,
body.admin-mode #intelligenceTab .wide-card,
body.admin-mode #intelligenceTab .marks-section,
body.admin-mode #intelligenceTab .intelligence-panel,
body.admin-mode #intelligenceTab .analysis-picker,
body.admin-mode #intelligenceTab .analysis-explainer,
body.admin-mode #intelligenceTab .why-panel,
body.admin-mode #intelligenceTab .intelligence-no-data-card,
body.admin-mode #intelligenceTab .pi-start-panel,
body.superadmin-mode #intelligenceTab .card,
body.superadmin-mode #intelligenceTab .wide-card,
body.superadmin-mode #intelligenceTab .marks-section,
body.superadmin-mode #intelligenceTab .intelligence-panel,
body.superadmin-mode #intelligenceTab .analysis-picker,
body.superadmin-mode #intelligenceTab .analysis-explainer,
body.superadmin-mode #intelligenceTab .why-panel,
body.superadmin-mode #intelligenceTab .intelligence-no-data-card,
body.superadmin-mode #intelligenceTab .pi-start-panel{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-left:0 !important;
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(0,35,85,.07) !important;
  color:var(--ink) !important;
}
body.viewer-mode #intelligenceTab .section-heading h3,
body.admin-mode #intelligenceTab .section-heading h3,
body.superadmin-mode #intelligenceTab .section-heading h3,
body.viewer-mode #intelligenceTab .card-title,
body.admin-mode #intelligenceTab .card-title,
body.superadmin-mode #intelligenceTab .card-title{
  color:var(--ink) !important;
}
body.viewer-mode #intelligenceTab .harm-kpi,
body.viewer-mode #intelligenceTab .dashboard-kpi,
body.viewer-mode #intelligenceTab .stat-card,
body.admin-mode #intelligenceTab .harm-kpi,
body.admin-mode #intelligenceTab .dashboard-kpi,
body.admin-mode #intelligenceTab .stat-card,
body.superadmin-mode #intelligenceTab .harm-kpi,
body.superadmin-mode #intelligenceTab .dashboard-kpi,
body.superadmin-mode #intelligenceTab .stat-card{
  border-left-color:var(--accent) !important;
}
body.viewer-mode #intelligenceTab .section-heading > span,
body.admin-mode #intelligenceTab .section-heading > span,
body.superadmin-mode #intelligenceTab .section-heading > span{
  background:var(--accent) !important;
  color:#ffffff !important;
}
body.viewer-mode #intelligenceTab .analysis-pill.active,
body.viewer-mode #intelligenceTab .intelligence-subnav button.active,
body.viewer-mode #intelligenceTab .mini-switch-card.active,
body.admin-mode #intelligenceTab .analysis-pill.active,
body.admin-mode #intelligenceTab .intelligence-subnav button.active,
body.admin-mode #intelligenceTab .mini-switch-card.active,
body.superadmin-mode #intelligenceTab .analysis-pill.active,
body.superadmin-mode #intelligenceTab .intelligence-subnav button.active,
body.superadmin-mode #intelligenceTab .mini-switch-card.active{
  border-color:var(--accent) !important;
  background:#ffffff !important;
  box-shadow:inset 0 -5px 0 var(--accent),0 10px 24px rgba(0,51,153,.10) !important;
}

/* v155: PI uses the same orange/corporate panel background treatment requested
   for the main working area. Internal cards stay white for readability. */
body.viewer-mode #intelligenceTab.tab-panel{
  background:
    radial-gradient(circle at 0% 0%, rgba(255,204,4,.34), transparent 31%),
    radial-gradient(circle at 92% 0%, rgba(242,124,0,.18), transparent 30%),
    linear-gradient(135deg,#fff0a8 0%,#fff7d6 46%,#eef5ff 100%) !important;
  border-color:rgba(246,168,0,.48) !important;
}
body.admin-mode #intelligenceTab.tab-panel{
  background:
    radial-gradient(circle at 0% 0%, rgba(246,168,0,.38), transparent 31%),
    radial-gradient(circle at 92% 0%, rgba(238,124,0,.24), transparent 30%),
    linear-gradient(135deg,#ffe38a 0%,#fff1bd 44%,#eef5ff 100%) !important;
  border-color:rgba(246,168,0,.58) !important;
}
body.viewer-mode #intelligenceTab .intelligence-focus-bar,
body.admin-mode #intelligenceTab .intelligence-focus-bar{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(246,168,0,.38) !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head h2,
body.admin-mode #intelligenceTab .harmonisation-head h2{
  color:#003399 !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head p,
body.admin-mode #intelligenceTab .harmonisation-head p{
  color:#274067 !important;
}

/* v156: PI content surface must match View Catalogue.
   Keep the page-level warm background, but do not tint the PI tab content
   itself. This makes PI visually consistent with Catalogue/Data/Harmonisation. */
body.viewer-mode #intelligenceTab.tab-panel,
body.admin-mode #intelligenceTab.tab-panel{
  background:rgba(255,255,255,.93) !important;
  border:1px solid rgba(220,226,238,.9) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 12px 32px rgba(0,35,85,.08) !important;
}
body.viewer-mode #intelligenceTab .intelligence-focus-bar,
body.admin-mode #intelligenceTab .intelligence-focus-bar{
  background:#f8fafc !important;
  border:1px solid var(--line) !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head h2,
body.admin-mode #intelligenceTab .harmonisation-head h2{
  color:var(--ink) !important;
}
body.viewer-mode #intelligenceTab .harmonisation-head p,
body.admin-mode #intelligenceTab .harmonisation-head p{
  color:var(--muted) !important;
}

/* v157: keep the global page background visually identical across tabs.
   The warm page gradient moved with document height/scroll, so PI could show a
   different part of the background than Catalogue or Harmonisation. */
body.viewer-mode,
body.admin-mode,
body.superadmin-mode{
  background-attachment:fixed !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* v160: Super Admin Security & Users alignment and contrast cleanup */
body.superadmin-mode #adminTab .management-section[data-management="security"]{
  width:100% !important;
  max-width:none !important;
}
body.superadmin-mode .security-users-card{
  width:100% !important;
  max-width:none !important;
  padding:18px !important;
}
body.superadmin-mode .security-layout{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
body.superadmin-mode .security-main-column{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
body.superadmin-mode .security-side-column{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
body.superadmin-mode .security-panel{
  min-width:0 !important;
}
body.superadmin-mode .security-editor-panel{
  max-width:none !important;
}
body.superadmin-mode .security-user-form{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(180px,1fr)) !important;
  column-gap:16px !important;
  row-gap:12px !important;
}
body.superadmin-mode .security-form-actions{
  grid-column:1 / -1 !important;
  justify-content:flex-start !important;
}
body.superadmin-mode .security-accounts-panel{
  width:100% !important;
}
body.superadmin-mode .security-users-list{
  gap:8px !important;
}
body.superadmin-mode .security-user-row{
  display:grid !important;
  grid-template-columns:minmax(190px,1.15fr) minmax(230px,1.25fr) minmax(150px,.7fr) minmax(96px,.45fr) minmax(280px,auto) !important;
  gap:12px !important;
  align-items:center !important;
  min-width:0 !important;
  padding:12px 14px !important;
}
body.superadmin-mode .security-user-row .user-main,
body.superadmin-mode .security-user-row .user-email{
  min-width:0 !important;
}
body.superadmin-mode .security-user-row .user-main strong,
body.superadmin-mode .security-user-row .user-main span,
body.superadmin-mode .security-user-row .user-email{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.superadmin-mode .security-user-row .user-main span,
body.superadmin-mode .security-user-row .user-email{
  display:block !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
body.superadmin-mode .security-badge{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:24px !important;
  min-width:92px !important;
  white-space:nowrap !important;
}
body.superadmin-mode .security-badge.role-badge.superadmin,
body.superadmin-mode .security-badge.superadmin{
  background:#111827 !important;
  color:#ffffff !important;
  border-color:#111827 !important;
}
body.superadmin-mode .security-badge.role-badge.admin,
body.superadmin-mode .security-badge.role-badge.viewer{
  background:#eef4ff !important;
  color:#003399 !important;
}
body.superadmin-mode .security-badge.status-badge.active{
  background:#e8f7ee !important;
  color:#08713d !important;
  min-width:72px !important;
}
body.superadmin-mode .security-badge.status-badge.inactive{
  background:#fee2e2 !important;
  color:#991b1b !important;
  min-width:72px !important;
}
body.superadmin-mode .security-row-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
body.superadmin-mode .security-row-actions .btn,
body.superadmin-mode .security-more-actions summary{
  min-height:28px !important;
  padding:7px 11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body.superadmin-mode .security-more-actions{
  flex:0 0 auto !important;
}
body.superadmin-mode .security-more-actions div{
  min-width:180px !important;
}
body.superadmin-mode .security-event-row{
  grid-template-columns:minmax(110px,.7fr) minmax(0,1.15fr) minmax(0,1fr) !important;
}
@media(max-width:1320px){
  body.superadmin-mode .security-user-row{
    grid-template-columns:minmax(180px,1fr) minmax(210px,1fr) minmax(145px,.65fr) minmax(90px,.45fr) !important;
  }
  body.superadmin-mode .security-row-actions{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
  }
}
@media(max-width:900px){
  body.superadmin-mode .security-side-column,
  body.superadmin-mode .security-user-form,
  body.superadmin-mode .security-user-row,
  body.superadmin-mode .security-event-row{
    grid-template-columns:1fr !important;
  }
}

/* v161: Super Admin panels must use the available workspace without overflow */
body.superadmin-mode #adminTab.tab-panel{
  padding:18px 20px !important;
  overflow:visible !important;
}
body.superadmin-mode #adminTab .management-section{
  max-width:none !important;
}
body.superadmin-mode #adminTab .management-section[data-management="security"]{
  width:100% !important;
}
body.superadmin-mode .security-users-card{
  width:100% !important;
  max-width:none !important;
  overflow:visible !important;
}
body.superadmin-mode .security-hero,
body.superadmin-mode .security-panel{
  width:100% !important;
  max-width:none !important;
}
body.superadmin-mode .security-section-title{
  align-items:flex-start !important;
}
body.superadmin-mode .security-events-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
}
body.superadmin-mode .security-events-head span{
  display:block !important;
  margin-top:3px !important;
  color:#667085 !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
}
body.superadmin-mode .security-user-row{
  grid-template-columns:minmax(170px,1fr) minmax(220px,1.25fr) minmax(150px,.75fr) minmax(92px,.45fr) minmax(260px,max-content) !important;
  overflow:visible !important;
}
body.superadmin-mode .security-row-actions{
  min-width:0 !important;
}
body.superadmin-mode .security-row-actions .btn.warning{
  background:#fff1d1 !important;
  color:#8a5a00 !important;
}
body.superadmin-mode .security-row-actions .btn.secondary,
body.superadmin-mode .security-more-actions summary{
  background:#eef4ff !important;
  color:#17335f !important;
}
body.superadmin-mode .security-badge.role-badge.superadmin{
  min-width:156px !important;
}
body.superadmin-mode .security-badge.status-badge.active,
body.superadmin-mode .security-badge.status-badge.inactive{
  min-width:86px !important;
}
@media(max-width:1700px){
  body.superadmin-mode .security-user-row{
    grid-template-columns:minmax(170px,1fr) minmax(220px,1.15fr) minmax(150px,.7fr) minmax(92px,.45fr) !important;
  }
  body.superadmin-mode .security-row-actions{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    padding-top:2px !important;
  }
}
@media(max-width:1180px){
  body.superadmin-mode .security-side-column{
    grid-template-columns:1fr !important;
  }
  body.superadmin-mode .security-user-form{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* v162: final Super Admin alignment and safe password reset dialog */
body.superadmin-mode #adminTab .admin-grid{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
body.superadmin-mode #adminTab .management-section[data-management="security"]{
  display:block !important;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
body.superadmin-mode .security-users-card,
body.superadmin-mode .security-main-column,
body.superadmin-mode .security-accounts-panel,
body.superadmin-mode .security-editor-panel{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
body.superadmin-mode .security-layout{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
  width:100% !important;
}
body.superadmin-mode .security-side-column{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  order:3 !important;
}
body.superadmin-mode .security-main-column{
  display:grid !important;
  gap:18px !important;
}
body.superadmin-mode .security-hero{
  min-height:112px !important;
  align-items:center !important;
}
body.superadmin-mode .security-hero .card-title,
body.superadmin-mode .security-hero .subtle,
body.superadmin-mode .security-eyebrow{
  color:#fff !important;
}
body.superadmin-mode .security-user-form{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
}
body.superadmin-mode .security-form-actions{
  grid-column:1 / -1 !important;
}
body.superadmin-mode .security-user-row{
  display:grid !important;
  grid-template-columns:minmax(180px,1.1fr) minmax(220px,1.35fr) minmax(170px,.72fr) minmax(110px,.45fr) !important;
  gap:12px 16px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}
body.superadmin-mode .security-user-row .security-row-actions{
  grid-column:1 / -1 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  border-top:1px solid #edf1f7 !important;
  padding-top:8px !important;
}
body.superadmin-mode .security-row-actions .btn,
body.superadmin-mode .security-more-actions summary{
  min-height:32px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
body.superadmin-mode .security-badge.role-badge.superadmin,
body.superadmin-mode .security-badge.role-badge.superadmin *{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}
body.superadmin-mode .security-badge.role-badge.admin{
  min-width:150px !important;
}
body.superadmin-mode .security-badge.status-badge.active,
body.superadmin-mode .security-badge.status-badge.inactive{
  min-width:96px !important;
}
.superadmin-password-dialog{
  border:0;
  padding:0;
  background:transparent;
  width:min(520px, calc(100vw - 28px));
}
.superadmin-password-dialog::backdrop{
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(2px);
}
.superadmin-password-box{
  display:grid;
  gap:12px;
  padding:22px;
  background:#fff;
  border:1px solid #d8e4f5;
  border-radius:24px;
  box-shadow:0 28px 70px rgba(15,23,42,.28);
}
.superadmin-password-box label{
  display:grid;
  gap:6px;
  font-weight:850;
  color:#1f2a44;
}
.superadmin-password-box input{
  border:1px solid #cbd8ea;
  border-radius:12px;
  padding:11px 12px;
}
.security-reset-warning{
  margin:0;
  padding:12px 14px;
  border-radius:16px;
  background:#fff7e8;
  border:1px solid #ffd890;
  color:#4b3410;
}
@media(max-width:1050px){
  body.superadmin-mode .security-user-form,
  body.superadmin-mode .security-side-column,
  body.superadmin-mode .security-user-row{
    grid-template-columns:1fr !important;
  }
  body.superadmin-mode .security-user-row .security-row-actions{
    justify-content:flex-start !important;
  }
}


/* v163: white active underline in Admin and Super Admin main navigation */
body.admin-mode .tab.active::after,
body.admin-mode .tab:hover::after,
body.admin-mode .management-tab.active::after,
body.admin-mode .management-tab:hover::after,
body.admin-mode .ref-tab.active::after,
body.admin-mode .ref-tab:hover::after{
  background:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(255,255,255,.18) !important;
}

body.superadmin-mode .tab.active::after,
body.superadmin-mode .tab:hover::after,
body.superadmin-mode .management-tab.active::after,
body.superadmin-mode .management-tab:hover::after,
body.superadmin-mode .ref-tab.active::after,
body.superadmin-mode .ref-tab:hover::after{
  background:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(255,255,255,.18) !important;
}


/* v164: force Admin active navigation underline to white.
   Admin mode has older high-specificity orange/blue navigation rules; this final layer wins them. */
html body.admin-mode section.tabs .tab.active::after,
html body.admin-mode section.tabs .tab:hover::after,
html body.admin-mode .tabs .tab.active::after,
html body.admin-mode .tabs .tab:hover::after,
html body.admin-mode #catalogueTabButton.active::after,
html body.admin-mode #tableTabButton.active::after,
html body.admin-mode #harmonisationTabButton.active::after,
html body.admin-mode #intelligenceTabButton.active::after,
html body.admin-mode #adminTabButton.active::after,
html body.admin-mode #auditTabButton.active::after,
html body.admin-mode button.tab.active::after,
html body.admin-mode button.tab:hover::after{
  background:#ffffff !important;
  background-color:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(255,255,255,.22) !important;
  opacity:1 !important;
}

/* Some legacy Admin rules use an inner underline element instead of ::after. */
html body.admin-mode section.tabs .tab.active .tab-underline,
html body.admin-mode .tabs .tab.active .tab-underline,
html body.admin-mode button.tab.active .tab-underline{
  background:#ffffff !important;
  background-color:#ffffff !important;
}


/* v165: Admin active top navigation final override
   PI and Admin Management had legacy high-specificity rules keeping blue underline/text.
   This layer forces all active Admin main tabs to the same orange/white treatment. */
html body.admin-mode .tabs button.tab.active,
html body.admin-mode .tabs .tab.active,
html body.admin-mode button.tab[data-tab].active,
html body.admin-mode .tab[data-tab="catalogue"].active,
html body.admin-mode .tab[data-tab="table"].active,
html body.admin-mode .tab[data-tab="harmonisation"].active,
html body.admin-mode .tab[data-tab="intelligence"].active,
html body.admin-mode .tab[data-tab="admin"].active,
html body.admin-mode .tab[data-tab="audit"].active{
  background:linear-gradient(135deg,var(--admin-orange),var(--admin-orange-dark)) !important;
  background-color:var(--admin-orange) !important;
  border-color:var(--admin-orange) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  box-shadow:0 16px 34px rgba(242,169,0,.30) !important;
}

html body.admin-mode .tabs button.tab.active *,
html body.admin-mode .tabs .tab.active *,
html body.admin-mode button.tab[data-tab].active *,
html body.admin-mode .tab[data-tab="intelligence"].active *,
html body.admin-mode .tab[data-tab="admin"].active *{
  color:#ffffff !important;
  fill:#ffffff !important;
}

html body.admin-mode .tabs button.tab.active::after,
html body.admin-mode .tabs .tab.active::after,
html body.admin-mode button.tab[data-tab].active::after,
html body.admin-mode .tab[data-tab="catalogue"].active::after,
html body.admin-mode .tab[data-tab="table"].active::after,
html body.admin-mode .tab[data-tab="harmonisation"].active::after,
html body.admin-mode .tab[data-tab="intelligence"].active::after,
html body.admin-mode .tab[data-tab="admin"].active::after,
html body.admin-mode .tab[data-tab="audit"].active::after{
  background:#ffffff !important;
  background-color:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(255,255,255,.22) !important;
  opacity:1 !important;
}

/* Internal Admin Management selected buttons: keep the same visual language. */
html body.admin-mode #adminTab .management-tabs button.management-tab.active,
html body.admin-mode #adminTab .management-tabs .management-tab.active,
html body.admin-mode #adminTab .reference-tabs button.ref-tab.active,
html body.admin-mode #adminTab .reference-tabs .ref-tab.active{
  background:linear-gradient(135deg,var(--admin-orange),var(--admin-orange-dark)) !important;
  background-color:var(--admin-orange) !important;
  color:#ffffff !important;
  border-color:var(--admin-orange) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.16) !important;
}

html body.admin-mode #adminTab .management-tabs button.management-tab.active *,
html body.admin-mode #adminTab .management-tabs .management-tab.active *,
html body.admin-mode #adminTab .reference-tabs button.ref-tab.active *,
html body.admin-mode #adminTab .reference-tabs .ref-tab.active *{
  color:#ffffff !important;
}

html body.admin-mode #adminTab .management-tabs button.management-tab.active::after,
html body.admin-mode #adminTab .management-tabs .management-tab.active::after,
html body.admin-mode #adminTab .reference-tabs button.ref-tab.active::after,
html body.admin-mode #adminTab .reference-tabs .ref-tab.active::after{
  background:#ffffff !important;
  background-color:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(255,255,255,.22) !important;
}


/* v166: definitive Admin underline fix for Pedagogical Intelligence and Admin Management.
   These two tabs had legacy special rules that still produced a blue underline.
   Target both data-tab selectors and their positions in the main navigation. */
html body.admin-mode .tabs .tab[data-tab="intelligence"].active::after,
html body.admin-mode .tabs .tab[data-tab="admin"].active::after,
html body.admin-mode .tabs button.tab[data-tab="intelligence"].active::after,
html body.admin-mode .tabs button.tab[data-tab="admin"].active::after,
html body.admin-mode .tabs > .tab:nth-child(4).active::after,
html body.admin-mode .tabs > .tab:nth-child(5).active::after,
html body.admin-mode .tabs > button.tab:nth-child(4).active::after,
html body.admin-mode .tabs > button.tab:nth-child(5).active::after{
  background:#ffffff !important;
  background-color:#ffffff !important;
  border-color:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 5px 12px rgba(255,255,255,.22) !important;
  opacity:1 !important;
}

html body.admin-mode .tabs .tab[data-tab="intelligence"].active,
html body.admin-mode .tabs .tab[data-tab="admin"].active,
html body.admin-mode .tabs button.tab[data-tab="intelligence"].active,
html body.admin-mode .tabs button.tab[data-tab="admin"].active,
html body.admin-mode .tabs > .tab:nth-child(4).active,
html body.admin-mode .tabs > .tab:nth-child(5).active,
html body.admin-mode .tabs > button.tab:nth-child(4).active,
html body.admin-mode .tabs > button.tab:nth-child(5).active{
  color:#ffffff !important;
  background:linear-gradient(135deg,var(--admin-orange),var(--admin-orange-dark)) !important;
  border-bottom-color:#ffffff !important;
  box-shadow:
    0 16px 34px rgba(242,169,0,.30),
    inset 0 -5px 0 #ffffff !important;
}

html body.admin-mode .tabs .tab[data-tab="intelligence"].active *,
html body.admin-mode .tabs .tab[data-tab="admin"].active *,
html body.admin-mode .tabs button.tab[data-tab="intelligence"].active *,
html body.admin-mode .tabs button.tab[data-tab="admin"].active *,
html body.admin-mode .tabs > .tab:nth-child(4).active *,
html body.admin-mode .tabs > .tab:nth-child(5).active *,
html body.admin-mode .tabs > button.tab:nth-child(4).active *,
html body.admin-mode .tabs > button.tab:nth-child(5).active *{
  color:#ffffff !important;
  fill:#ffffff !important;
  text-decoration-color:#ffffff !important;
}

/* Remove/override any legacy child underline element for those tabs. */
html body.admin-mode .tabs .tab[data-tab="intelligence"].active .tab-underline,
html body.admin-mode .tabs .tab[data-tab="admin"].active .tab-underline,
html body.admin-mode .tabs .tab[data-tab="intelligence"].active .active-underline,
html body.admin-mode .tabs .tab[data-tab="admin"].active .active-underline,
html body.admin-mode .tabs .tab[data-tab="intelligence"].active .nav-underline,
html body.admin-mode .tabs .tab[data-tab="admin"].active .nav-underline,
html body.admin-mode .tabs > .tab:nth-child(4).active .tab-underline,
html body.admin-mode .tabs > .tab:nth-child(5).active .tab-underline{
  background:#ffffff !important;
  background-color:#ffffff !important;
  border-color:#ffffff !important;
}


/* v167: Inspector mode */
body.inspector-mode{
  --accent:#93B8D1;
  --accent-dark:#5f91b5;
  --role-accent:#93B8D1;
  --role-accent-2:#5f91b5;
  --role-soft:#eef6fb;
  --role-glow:rgba(147,184,209,.30);
  background:
    radial-gradient(circle at 10% 0%, rgba(147,184,209,.32), transparent 30%),
    radial-gradient(circle at 92% 3%, rgba(255,204,4,.10), transparent 28%),
    linear-gradient(135deg,#e7f1f7 0%, #f7fbfd 48%, #eef6fb 100%) fixed !important;
}

body.inspector-mode .tab.active{
  background:linear-gradient(135deg,#93B8D1,#5f91b5) !important;
  color:#ffffff !important;
  border-color:#93B8D1 !important;
  box-shadow:0 16px 34px rgba(95,145,181,.28) !important;
}
body.inspector-mode .tab.active::after{
  background:#ffffff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.24), 0 6px 14px rgba(255,255,255,.20) !important;
}
body.inspector-mode .tab.active *,
body.inspector-mode .tab.active span{
  color:#ffffff !important;
}

body.inspector-mode .mode-card,
body.inspector-mode .filters-panel,
body.inspector-mode .summary-card,
body.inspector-mode .side-card{
  border-left:7px solid #93B8D1 !important;
}
body.inspector-mode .intro-card{
  background:
    radial-gradient(circle at 7% 0%, rgba(147,184,209,.20), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(255,204,4,.12), transparent 28%),
    linear-gradient(135deg,#ffffff 0%, #f8fcff 52%, #eef6fb 100%) !important;
}
body.inspector-mode .power-card{
  background:
    radial-gradient(circle at 12% 8%, rgba(147,184,209,.16), transparent 35%),
    linear-gradient(145deg,#ffffff 0%, #f8fcff 62%, #eef6fb 100%) !important;
}
body.inspector-mode .btn.primary,
body.inspector-mode .analysis-pill.active{
  background:linear-gradient(135deg,#93B8D1,#5f91b5) !important;
  color:#fff !important;
  border-color:#93B8D1 !important;
}
.security-badge.role-badge.inspector{
  background:#e7f1f7 !important;
  color:#355f7c !important;
}


/* v168: Super Admin initial password options */
.security-password-mode{
  grid-column:1 / -1;
  border:1px solid #d8e4f2;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  padding:14px;
}
.security-password-options{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(220px,1fr) minmax(220px,1fr);
  gap:12px;
  align-items:end;
}
.security-password-mode .subtle{
  margin:8px 0 0;
}
body.superadmin-mode .security-password-mode{
  border-left:5px solid #111827;
}
body.inspector-mode #connectedUsername{
  color:#355f7c;
}
@media(max-width:900px){
  .security-password-options{
    grid-template-columns:1fr;
  }
}


/* v169: password visibility and reset password options */
.security-password-options .password-field,
.user-password-reset-box .password-field{
  display:flex;
  align-items:center;
  gap:8px;
}
.security-password-options .password-field input,
.user-password-reset-box .password-field input{
  flex:1 1 auto;
  min-width:0;
}
.user-password-reset-box select{
  width:100%;
  margin-top:6px;
}
#userResetManualFields{
  display:grid;
  gap:12px;
}
#userResetManualFields.hidden{
  display:none !important;
}
.user-password-reset-dialog .security-reset-warning{
  border-left:5px solid #f2a900;
}


/* v171: global password visibility helper */
.auto-password-field{
  display:flex;
  align-items:center;
  gap:8px;
}
.auto-password-field input{
  flex:1 1 auto;
  min-width:0;
}


/* v175: management sections must never bleed into another Admin subtab */
#adminTab .management-section.hidden,
body.superadmin-mode #adminTab .management-section.hidden,
body.admin-mode #adminTab .management-section.hidden{
  display:none !important;
}
#adminTab .management-section[data-management="security"].hidden{
  display:none !important;
}

/* v182: restore a confident institutional blue header.
   Keep utility controls distinct from the background so the school-year
   selector and status indicators remain legible at a glance. */
html body.viewer-mode .app-header,
html body.admin-mode .app-header,
html body.inspector-mode .app-header,
html body.superadmin-mode .app-header{
  min-height:92px !important;
  padding:12px 28px !important;
  background:linear-gradient(135deg,#233e90 0%,#3284c6 100%) !important;
  color:#ffffff !important;
  border-top:4px solid #3cdbc0 !important;
  border-bottom:4px solid #172d70 !important;
  box-shadow:0 8px 24px rgba(23,45,112,.24) !important;
}
html body .app-header .brand{
  min-height:68px;
}
html body .app-header .brand-logo{
  width:154px !important;
  height:62px !important;
  padding:5px 9px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.65) !important;
  border-radius:4px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
}
html body .app-header .eyebrow,
html body .app-header h1{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,25,80,.24);
}
html body .app-header .header-actions{
  gap:9px;
}
html body .app-header .status-pill,
html body .app-header .admin-entry-btn{
  min-height:40px;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:4px !important;
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(0,25,80,.14) !important;
}
html body .app-header .header-year-pill{
  min-width:126px;
  padding:10px 14px !important;
  background:#ffffff !important;
  color:#233e90 !important;
  border-color:#ffffff !important;
  text-align:center;
}
html body .app-header .header-icon-pill{
  min-width:42px;
  padding:8px 11px !important;
  text-align:center;
}
html body .app-header .admin-entry-btn{
  width:42px;
  padding:8px 0 !important;
  border-radius:50% !important;
}
html body .app-header .status-pill:hover,
html body .app-header .admin-entry-btn:hover{
  background:rgba(255,255,255,.26) !important;
  border-color:#ffffff !important;
  color:#ffffff !important;
}
html body .app-header .header-year-pill:hover{
  background:#f4f8ff !important;
  color:#172d70 !important;
}

/* v183: public catalogue clarity, formal context, and accessible states. */
.skip-link {
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  padding:10px 14px;
  border-radius:3px;
  background:#ffcc04;
  color:#172d70;
  font-weight:900;
}
.skip-link:focus { top:12px; }
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.intro-title-sub { display:block; margin-top:5px; color:#5b6f91; font-size:14px; font-weight:700; }
.catalogue-context {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:10px 0 8px;
  padding:14px 16px;
  border:1px solid rgba(35,62,144,.14);
  border-left:4px solid #3cdbc0;
  border-radius:4px;
  background:#fff;
}
.catalogue-context strong { display:block; color:#233e90; font-size:15px; }
.catalogue-context span { display:block; margin-top:3px; color:#686657; font-size:12px; }
.search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.active-filter-chips { display:flex; flex-wrap:wrap; gap:7px; min-height:4px; margin:0 0 12px; }
.filter-chip {
  border:1px solid rgba(35,62,144,.18);
  border-radius:3px;
  padding:6px 9px;
  background:#eef5fb;
  color:#233e90;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.filter-chip:hover, .filter-chip:focus-visible { background:#233e90; color:#fff; }
.catalogue-status {
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:4px;
  background:#eef5fb;
  color:#233e90;
  font-weight:800;
}
.catalogue-status.error { background:#fff0ed; color:#b42318; }
.catalogue-status.search-hint { background:#eef5fb; color:#233e90; }
.catalogue-empty {
  grid-column:1 / -1;
  display:grid;
  justify-items:start;
  gap:8px;
  padding:34px;
  border:1px dashed rgba(35,62,144,.24);
  border-radius:4px;
  background:#fff;
  color:#686657;
}
.catalogue-empty strong { color:#233e90; font-size:18px; }
.catalogue-empty.error-state strong { color:#b42318; }
.institutional-footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:24px max(28px, calc((100vw - 1780px) / 2 + 24px));
  border-top:4px solid #233e90;
  background:#172d70;
  color:#fff;
}
.footer-brand, .footer-meta { display:flex; flex-direction:column; gap:5px; }
.footer-brand strong { font-size:14px; }
.footer-brand span, .footer-meta { color:rgba(255,255,255,.78); font-size:12px; }
.footer-meta { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

@media (max-width:760px) {
  .catalogue-context, .institutional-footer { align-items:flex-start; flex-direction:column; }
  .footer-meta { justify-content:flex-start; }
}

/* v188: management sections use all available width at every viewport size. */
#adminTab .management-tabs {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  align-items:stretch;
  width:100%;
}
#adminTab .management-tabs .management-tab {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:60px;
  padding:10px 12px;
  border-radius:4px;
  line-height:1.25;
  text-align:center;
  white-space:normal;
}
@media (max-width:760px) {
  #adminTab .management-tabs {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:420px) {
  #adminTab .management-tabs {
    grid-template-columns:1fr;
  }
}

/* v190: make the public and staff workspaces use the full available viewport. */
html body main.shell,
html body.presentation-mode main.shell {
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  padding:clamp(16px, 2vw, 32px) !important;
  grid-template-columns:minmax(250px, clamp(250px, 20vw, 340px)) minmax(0, 1fr) !important;
}
html body.presentation-mode main.shell {
  display:block !important;
}
html body.viewer-mode .mode-card {
  display:none !important;
}
html body.viewer-mode .database-status-pill,
html body.viewer-mode .server-status-pill,
html body.viewer-mode .intro-badges {
  display:none !important;
}
@media (max-width:1200px) {
  html body main.shell,
  html body.presentation-mode main.shell {
    grid-template-columns:minmax(0, 1fr) !important;
  }
}
@media (max-width:760px) {
  html body main.shell,
  html body.presentation-mode main.shell {
    padding:14px !important;
  }
}
@media (max-width:760px){
  html body .app-header{
    align-items:flex-start;
    padding:12px 16px !important;
  }
  html body .app-header .header-actions{
    width:100%;
    justify-content:flex-start;
  }
}