/* BPS.net — Windows Vista/7 era .NET WinForms application style */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #b8c7d6; color: #1a1a1a; font-size: 12px; line-height: 1.4;
  overflow: hidden; height: 100vh;
}
a { color: #0055c4; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== LOGIN ===== */
.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a6ea5 0%, #1e4a7a 50%, #2d5f8a 100%);
  overflow: auto;
}
.login-card {
  background: #f0f0f0; border: 1px solid #888; width: 380px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  border-radius: 4px; overflow: hidden;
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #3a7cc6 0%, #2a5f9e 100%);
  padding: 12px 16px; color: #fff;
}
.login-brand svg { flex-shrink: 0; }
.login-card h1 { font-size: 15px; color: #fff; font-weight: 600; }
.login-card .subtitle { font-size: 10px; color: rgba(255,255,255,.75); margin-left: 2px; }
.login-body { padding: 18px 16px 14px; }
.login-card input {
  width: 100%; padding: 5px 6px; margin-bottom: 10px;
  border: 1px solid #adb2b5; font-size: 12px; border-radius: 2px;
  background: #fff; font-family: inherit; color: #1a1a1a;
}
.login-card input:focus { outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4); }
.fake-pw-input {
  width: 100%; padding: 5px 6px; margin-bottom: 10px;
  border: 1px solid #adb2b5; font-size: 12px; border-radius: 2px;
  background: #fff; font-family: inherit; color: #1a1a1a;
  min-height: 1.4em; cursor: text; box-sizing: border-box;
  letter-spacing: 2px;
}
.fake-pw-input:focus { outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4); }
.login-card button {
  padding: 5px 24px; background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
  color: #1a1a1a; border: 1px solid #adb2b5; font-size: 12px; cursor: pointer;
  font-family: inherit; border-radius: 2px;
}
.login-card button:hover { background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%); border-color: #3a7cc6; }
.login-card button:active { background: #c8d8e8; }
.login-error { color: #c00; font-size: 11px; margin-bottom: 8px; display: none; }
.login-accounts { margin-top: 14px; border-top: 1px solid #ccc; padding-top: 10px; font-size: 11px; color: #555; }
.login-accounts strong { color: #1a1a1a; font-size: 12px; }
.login-accounts table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.login-accounts td { padding: 2px 6px; font-size: 11px; color: #444; }

/* ===== APP SHELL ===== */
.sims-app {
  display: flex; flex-direction: column; height: 100vh;
  background: #e8edf2;
}

/* -- Title Bar (blue gradient, Vista style) -- */
.sims-titlebar {
  height: 28px;
  background: linear-gradient(180deg, #4a8bc2 0%, #2a5f9e 40%, #1e4a7a 100%);
  color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; padding: 0 10px;
  letter-spacing: 0.3px;
  user-select: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.sims-titlebar-right {
  margin-left: auto; display: flex; gap: 2px;
}
.sims-titlebar-btn {
  width: 28px; height: 20px; border: none;
  background: rgba(255,255,255,.1); border-radius: 2px;
  color: #fff; font-size: 13px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-family: inherit;
}
.sims-titlebar-btn:hover { background: rgba(255,255,255,.25); }

/* -- Menu Bar (light grey, Vista/7 style) -- */
.sims-menubar {
  height: 24px; background: linear-gradient(180deg, #f6f7f9 0%, #e8eaed 100%);
  border-bottom: 1px solid #c0c5cc;
  display: flex; align-items: stretch; padding: 0 4px;
  user-select: none;
}
.sims-menu-item {
  padding: 2px 10px; font-size: 12px; color: #1a1a1a;
  cursor: pointer; display: flex; align-items: center;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px;
  font-family: inherit; background: none; margin: 1px 0;
}
.sims-menu-item:hover {
  background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%);
  border-color: #80a8d0;
  text-decoration: none; color: #1a1a1a;
}
.sims-menu-item.active {
  background: linear-gradient(180deg, #d0dcea 0%, #c0d0e2 100%);
  border-color: #80a8d0; font-weight: 600;
}

/* -- Toolbar (Office 2007 ribbon-like icon strip) -- */
.sims-toolbar {
  min-height: 36px; background: linear-gradient(180deg, #f6f7f9 0%, #dfe3e8 100%);
  border-bottom: 1px solid #c0c5cc;
  display: flex; align-items: center; padding: 2px 6px; gap: 2px;
  flex-wrap: wrap;
}
.tb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 3px 8px; min-width: 36px; min-height: 30px;
  border: 1px solid transparent; border-radius: 2px;
  background: transparent; cursor: pointer; color: #333;
  text-decoration: none; font-family: inherit; font-size: 9px;
}
.tb-btn:hover {
  border-color: #80a8d0;
  background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%);
  text-decoration: none; color: #333;
}
.tb-btn svg { width: 16px; height: 16px; }
.tb-btn span { font-size: 9px; line-height: 1; }
.tb-sep { width: 1px; height: 26px; background: #c0c5cc; margin: 0 4px; }
.tb-search {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #444;
}
.tb-search input {
  padding: 3px 6px; border: 1px solid #adb2b5; font-size: 11px;
  width: 150px; font-family: inherit; background: #fff; border-radius: 2px;
}
.tb-search input:focus { outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4); }

/* -- Main Content Area -- */
.sims-main {
  flex: 1; overflow: auto; background: #e8edf2; padding: 6px 8px;
}

/* -- Status Bar -- */
.sims-statusbar {
  height: 24px; background: linear-gradient(180deg, #e8eaed 0%, #d8dce2 100%);
  border-top: 1px solid #c0c5cc;
  display: flex; align-items: center; padding: 0 8px; gap: 14px;
  font-size: 11px; color: #444;
}
.sims-statusbar .sep {
  width: 1px; height: 16px; background: #c0c5cc;
}

/* ===== SIMS PANELS (colored headers like dashboard screenshots) ===== */
.sims-panel {
  background: #fff; border: 1px solid #b8c0c8; margin-bottom: 6px;
  border-radius: 2px; overflow: hidden;
}
.sims-panel-title {
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.sims-panel-title svg { width: 14px; height: 14px; color: #fff; }
.sims-panel-body { padding: 8px 10px; }

/* Panel color variants */
.sims-panel.panel-teal .sims-panel-title { background: linear-gradient(180deg, #4caf86 0%, #3d9070 100%); }
.sims-panel.panel-amber .sims-panel-title { background: linear-gradient(180deg, #e8a840 0%, #d09030 100%); }
.sims-panel.panel-purple .sims-panel-title { background: linear-gradient(180deg, #8878b8 0%, #6f60a0 100%); }
.sims-panel.panel-red .sims-panel-title { background: linear-gradient(180deg, #d05050 0%, #b83838 100%); }
.sims-panel.panel-grey .sims-panel-title { background: linear-gradient(180deg, #8899aa 0%, #6f8090 100%); }

/* ===== BUTTONS (Vista/7 style) ===== */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 14px; font-size: 12px; font-weight: 400;
  cursor: pointer; text-decoration: none;
  border: 1px solid #adb2b5; border-radius: 2px;
  background: linear-gradient(180deg, #f6f7f9 0%, #e0e0e0 100%);
  color: #1a1a1a; font-family: inherit; min-height: 24px;
}
.btn:hover {
  background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%);
  border-color: #80a8d0; text-decoration: none; color: #1a1a1a;
}
.btn:active { background: #c0d0e2; }
.btn-primary {
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  border-color: #3a7cc6; color: #fff; font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #6ba8e0 0%, #5a98d0 100%);
  color: #fff; text-decoration: none; border-color: #2a6aaa;
}
.btn-sm { padding: 2px 10px; font-size: 11px; min-height: 20px; }
.btn:focus { outline: none; box-shadow: 0 0 3px rgba(58,124,198,.5); }

/* ===== TABLES (BPS.net DataGrid style) ===== */
table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #b8c0c8;
}
thead {
  background: linear-gradient(180deg, #f0f2f5 0%, #dde2e8 100%);
}
th {
  text-align: left; padding: 5px 8px; font-size: 12px; font-weight: 600;
  color: #1a1a1a; border: 1px solid #c0c8d0;
  background: linear-gradient(180deg, #f0f2f5 0%, #dde2e8 100%);
}
td {
  text-align: left; padding: 4px 8px; font-size: 12px;
  border: 1px solid #dde2e8; color: #1a1a1a;
}
tbody tr:hover { background: #e0eaf4; }
tbody tr.selected { background: #3399ff; color: #fff; }
tbody tr.selected td { color: #fff; border-color: #2080e0; }
tbody tr.selected td a { color: #fff; }
td a { color: #0055c4; }

/* ===== TYPE LABELS ===== */
.type-label {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  display: inline-block; text-transform: capitalize;
  border: 1px solid; border-radius: 2px;
}
.type-safeguarding { color: #c00; background: #ffe0e0; border-color: #e0a0a0; }
.type-behaviour { color: #b06000; background: #fff0d8; border-color: #e0c8a0; }
.type-welfare { color: #007040; background: #d8f0d8; border-color: #a0d0a0; }
.type-attendance { color: #6030a0; background: #f0e0ff; border-color: #c0a0d0; }
.type-medical { color: #003080; background: #d8e8ff; border-color: #a0b8d0; }
.type-other { color: #444; background: #eee; border-color: #bbb; }

/* ===== DASHBOARD HOME PAGE PANELS ===== */
.home-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.widget {
  background: #fff; border: 1px solid #b8c0c8; border-radius: 2px;
  overflow: hidden;
}
.widget h3 {
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.widget.widget-teal h3 { background: linear-gradient(180deg, #4caf86 0%, #3d9070 100%); }
.widget.widget-amber h3 { background: linear-gradient(180deg, #e8a840 0%, #d09030 100%); }
.widget.widget-purple h3 { background: linear-gradient(180deg, #8878b8 0%, #6f60a0 100%); }
.widget-body { padding: 10px 12px; }
.widget-stat { font-size: 12px; color: #1a1a1a; margin-bottom: 3px; }
.widget-stat strong { font-size: 20px; color: #2a5f9e; font-weight: 700; display: block; }

/* Legacy .widgets grid (dashboard.js uses this) */
.widgets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px;
}

/* ===== STUDENT LIST ===== */
.student-grid {
  background: #fff; border: 1px solid #b8c0c8; border-radius: 2px; overflow: hidden;
}
.student-card {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; text-decoration: none; color: #1a1a1a;
  border-bottom: 1px solid #e8eaed;
}
.student-card:last-child { border-bottom: none; }
.student-card:hover { background: #e0eaf4; text-decoration: none; color: #1a1a1a; }
.student-avatar {
  width: 24px; height: 24px; border-radius: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
}
.student-card-name { font-size: 12px; font-weight: 600; color: #1a1a1a; }
.student-card-info { font-size: 11px; color: #666; }
.student-card-badges { display: flex; gap: 3px; margin-left: auto; }
.student-badge {
  font-size: 9px; font-weight: 600; padding: 1px 4px;
  text-transform: uppercase; border: 1px solid; border-radius: 2px;
}
.badge-sen { background: #f0e0ff; color: #6030a0; border-color: #c0a0d0; }
.badge-pp { background: #d8f0d8; color: #007040; border-color: #a0d0a0; }
.badge-eal { background: #d8e8ff; color: #003080; border-color: #a0b8d0; }

.avatar-1 { background: #2a5f9e; }
.avatar-2 { background: #3d9070; }
.avatar-3 { background: #b07820; }
.avatar-4 { background: #6f60a0; }
.avatar-5 { background: #b03838; }
.avatar-6 { background: #4a8bc2; }
.avatar-7 { background: #3a8050; }
.avatar-8 { background: #5050b0; }

/* ===== PUPIL PROFILE ===== */
.pupil-header {
  background: #fff; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid #b8c0c8; display: flex; align-items: center; gap: 10px;
  border-radius: 2px;
}
.pupil-header-avatar {
  width: 40px; height: 40px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; background: #2a5f9e; flex-shrink: 0;
}
.pupil-header-info { flex: 1; }
.pupil-header h2 { font-size: 14px; color: #1a1a1a; font-weight: 700; }
.pupil-header .meta { font-size: 11px; color: #666; margin-top: 2px; }
.pupil-actions { margin-top: 6px; display: flex; gap: 4px; }

/* ===== CONCERN LOG ===== */
.concern-entry {
  background: #fff; border: 1px solid #b8c0c8;
  padding: 8px 10px; margin-bottom: 4px; border-radius: 2px;
}
.concern-entry .ce-meta { font-size: 11px; color: #666; margin-bottom: 4px; }
.concern-entry .ce-narrative { font-size: 12px; line-height: 1.5; color: #1a1a1a; }

/* ===== CPOMS DASHBOARD ===== */
.cpoms-dashboard {
  display: flex; flex: 1; overflow: hidden;
}
.cpoms-sidebar {
  width: 190px; min-width: 190px; background: #e8ecf0;
  border-right: 1px solid #b0b8c0; overflow-y: auto;
  padding: 0; display: flex; flex-direction: column;
}
.cpoms-sidebar-section {
  border-bottom: 1px solid #c8cdd2;
}
.cpoms-sidebar-title {
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #5a8ab8 0%, #3a6a98 100%);
  padding: 4px 8px; cursor: default;
}
.cpoms-sidebar-body {
  padding: 6px 8px; font-size: 11px;
}
.cpoms-sidebar-body label {
  display: block; font-size: 11px; margin-bottom: 3px; color: #1a1a1a;
}
.cpoms-sidebar-body input[type="date"] {
  width: 100%; font-size: 11px; padding: 2px 4px; margin-top: 1px;
  border: 1px solid #adb2b5; border-radius: 2px; font-family: inherit;
}
.tree-item {
  display: flex; align-items: center; gap: 4px; padding: 1px 0;
  font-size: 11px; cursor: pointer; text-transform: capitalize;
}
.tree-item input[type="checkbox"] { margin: 0; width: 13px; height: 13px; }
.tree-color {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0;
}

/* Main widget grid */
.cpoms-main {
  flex: 1; overflow-y: auto; padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #d0d8e0;
}
.cpoms-widget {
  background: #fff; border: 1px solid #a0a8b0;
  border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column;
}
.cpoms-widget-wide {
  grid-column: 1 / -1;
}
.cpoms-widget-title {
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #5a8ab8 0%, #3a6a98 100%);
  padding: 4px 8px;
}
.cpoms-widget-body {
  padding: 8px; flex: 1; overflow: auto; font-size: 11px;
}
.widget-empty { color: #888; font-style: italic; padding: 12px 0; text-align: center; }
.widget-more { color: #666; font-size: 10px; text-align: center; padding: 4px 0; border-top: 1px solid #e0e0e0; margin-top: 4px; }

/* CPOMS table inside widgets */
.cpoms-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cpoms-table th {
  background: #e8ecf0; text-align: left; padding: 3px 6px;
  border-bottom: 1px solid #b0b8c0; font-weight: 600; font-size: 10px;
  color: #333; white-space: nowrap;
}
.cpoms-table td { padding: 3px 6px; border-bottom: 1px solid #e8e8e8; }
.cpoms-table tr:hover { background: #f0f5fa; }
.td-nowrap { white-space: nowrap; }
.td-summary { color: #555; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category badge */
.cpoms-cat-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; text-transform: capitalize;
}

/* Bar chart (horizontal) */
.bar-chart { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: flex; align-items: center; gap: 6px; }
.bar-label { width: 75px; text-align: right; font-size: 10px; text-transform: capitalize; color: #444; flex-shrink: 0; }
.bar-track { flex: 1; height: 18px; background: #eee; border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 2px; min-width: 2px; transition: width .3s; }
.bar-count { width: 24px; font-size: 11px; font-weight: 700; color: #333; }

/* Timeline (vertical bars) */
.timeline-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 100px; padding-top: 4px;
}
.timeline-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.timeline-bar {
  width: 100%; max-width: 30px; border-radius: 2px 2px 0 0;
  min-height: 2px; transition: height .3s;
}
.timeline-label { font-size: 9px; color: #666; margin-top: 3px; white-space: nowrap; }

/* Stacked horizontal bar */
.stacked-bar {
  display: flex; height: 24px; border-radius: 3px; overflow: hidden;
  margin-bottom: 10px;
}
.stacked-seg { min-width: 3px; transition: width .3s; }

/* Breakdown legend */
.breakdown-legend { display: flex; flex-direction: column; gap: 4px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.legend-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.legend-text { text-transform: capitalize; color: #333; flex: 1; }
.legend-val { color: #666; font-weight: 600; }

/* Summary grid */
.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.summary-stat {
  background: #f0f4f8; border: 1px solid #d0d8e0; border-radius: 3px;
  padding: 8px; text-align: center;
}
.summary-number { font-size: 22px; font-weight: 700; color: #2c3e50; }
.summary-label { font-size: 10px; color: #666; margin-top: 2px; }
.summary-top { font-size: 11px; color: #444; text-align: center; padding: 4px 0; }

/* ===== FORMS ===== */
.form-wrap {
  background: #fff; padding: 12px; max-width: 440px;
  border: 1px solid #b8c0c8; border-radius: 2px;
}
.form-row { margin-bottom: 8px; }
.form-row label { display: block; font-size: 12px; font-weight: 400; color: #1a1a1a; margin-bottom: 3px; }
.form-row select, .form-row input, .form-row textarea {
  width: 100%; padding: 4px 6px; border: 1px solid #adb2b5; font-size: 12px;
  font-family: inherit; background: #fff; color: #1a1a1a; border-radius: 2px;
}
.form-row select:focus, .form-row input:focus, .form-row textarea:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ===== NEW CONCERN (CPOMS-style) ===== */
.nc-layout {
  display: flex; gap: 10px; padding: 0 12px 20px; align-items: flex-start;
}
.nc-form-container {
  width: 820px; flex-shrink: 0; padding: 8px 0;
}

/* Student info panel (right side) */
.nc-student-panel {
  flex: 1; min-width: 0; padding: 8px 0;
  position: sticky; top: 8px;
}
.nc-panel-empty {
  background: #fff; border: 1px solid #c0c5cc; border-radius: 3px;
  padding: 20px 14px; text-align: center; font-size: 11px; color: #888;
  font-style: italic;
}
.nc-panel-card {
  background: #fff; border: 1px solid #c0c5cc; border-radius: 3px;
  overflow: hidden;
}
.nc-panel-header {
  background: linear-gradient(180deg, #5a8ab8 0%, #3a6a98 100%);
  padding: 10px 12px; color: #fff; display: flex; align-items: center; gap: 10px;
}
.nc-panel-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #2a5f9e;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.nc-panel-name { font-size: 13px; font-weight: 700; }
.nc-panel-meta { font-size: 10px; opacity: .8; margin-top: 1px; }
.nc-panel-section {
  padding: 8px 12px; border-bottom: 1px solid #e8e8e8;
}
.nc-panel-section:last-child { border-bottom: none; }
.nc-panel-section-title {
  font-size: 10px; font-weight: 700; color: #3a6a98; text-transform: uppercase;
  margin-bottom: 5px; letter-spacing: .3px;
}
.nc-panel-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; padding: 2px 0;
}
.nc-panel-stat-label { color: #555; }
.nc-panel-stat-val { font-weight: 700; color: #1a1a1a; }
.nc-panel-stat-val.att-good { color: #27ae60; }
.nc-panel-stat-val.att-warn { color: #f39c12; }
.nc-panel-stat-val.att-bad { color: #e74c3c; }
.nc-panel-concern-item {
  padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 11px;
}
.nc-panel-concern-item:last-child { border-bottom: none; }
.nc-panel-concern-meta { font-size: 10px; color: #888; }
.nc-panel-concern-text { color: #333; margin-top: 1px; }
.nc-panel-none { font-size: 11px; color: #999; font-style: italic; }
.nc-section {
  background: #fff; border: 1px solid #c0c5cc;
  border-radius: 3px; margin-bottom: 8px;
}
.nc-section-title + * { border-radius: 0 0 3px 3px; }
.nc-section-title {
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #5a8ab8 0%, #3a6a98 100%);
  padding: 4px 10px;
}

/* Category checkboxes */
.nc-categories {
  display: flex; flex-wrap: wrap; gap: 3px 14px; padding: 10px;
}
.nc-cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0; cursor: pointer;
  font-size: 11px; font-weight: 400; text-transform: capitalize;
  color: #1a1a1a; user-select: none;
}
.nc-cat-pill input[type="checkbox"] { margin: 0; width: 13px; height: 13px; accent-color: var(--cat-color, #3a6a98); }
.nc-cat-pill::after {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
  background: var(--cat-color, #888); flex-shrink: 0;
}
.nc-cat-pill:hover { color: #000; }

/* Details row */
.nc-row {
  display: flex; gap: 10px; padding: 10px;
}
.nc-field { display: flex; flex-direction: column; gap: 3px; }
.nc-field label { font-size: 11px; font-weight: 600; color: #333; }
.nc-field select, .nc-field input {
  padding: 4px 6px; border: 1px solid #adb2b5; border-radius: 2px;
  font-size: 12px; font-family: inherit; background: #fff; color: #1a1a1a;
}
.nc-field select:focus, .nc-field input:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}
.nc-field-wide { flex: 1; }
.nc-field-wide select { width: 100%; }

/* Rich text editor */
.nc-editor-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 8px; background: #f0f0f0; border-bottom: 1px solid #d0d0d0;
}
.nc-ed-btn {
  width: 26px; height: 24px; border: 1px solid transparent; background: transparent;
  cursor: pointer; font-size: 12px; border-radius: 2px; display: flex;
  align-items: center; justify-content: center; color: #333; font-family: inherit;
}
.nc-ed-btn:hover { background: #ddd; border-color: #bbb; }
.nc-ed-sep { width: 1px; height: 18px; background: #c0c0c0; margin: 0 4px; }
.nc-editor {
  min-height: 120px; padding: 8px 10px; font-size: 12px; line-height: 1.6;
  color: #1a1a1a; outline: none; font-family: inherit;
}
.nc-editor:empty::before {
  content: attr(data-placeholder); color: #999; font-style: italic;
}
.nc-editor:focus { box-shadow: inset 0 0 0 1px #3a7cc6; }

/* Actions textarea */
.nc-textarea-sm {
  width: 100%; min-height: 50px; resize: vertical;
  padding: 8px 10px; font-size: 12px; font-family: inherit;
  border: none; outline: none; color: #1a1a1a; line-height: 1.5;
}
.nc-textarea-sm:focus { box-shadow: inset 0 0 0 1px #3a7cc6; }

/* Assign-to search dropdown */
.nc-assign-wrap { padding: 10px; }
.nc-assign-pill-wrap { position: relative; }
.nc-assign-pill {
  width: 100%; padding: 7px 14px; border: 1px solid #adb2b5; border-radius: 20px;
  font-size: 12px; font-family: inherit; background: #fff; color: #1a1a1a;
}
.nc-assign-pill:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 4px rgba(58,124,198,.35);
}
.nc-assign-dropdown {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid #b0b8c0; border-radius: 6px;
  max-height: 180px; overflow-y: auto; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.nc-assign-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 11px;
}
.nc-assign-dd-item:hover { background: #f0f4fa; }
.nc-assign-dd-item input[type="checkbox"] {
  margin: 0; width: 14px; height: 14px; flex-shrink: 0;
  accent-color: #3a6a98; pointer-events: none;
}
.nc-assign-dd-name { font-weight: 600; color: #1a1a1a; }
.nc-assign-dd-role { color: #888; font-size: 10px; margin-left: auto; }
.nc-assign-dd-empty { padding: 10px; color: #888; font-size: 11px; text-align: center; }
.nc-assign-selected { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.nc-assign-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e0e8f0; border: 1px solid #b0c0d0; border-radius: 14px;
  padding: 3px 10px; font-size: 11px; color: #1a3a6a; font-weight: 500;
}
.nc-assign-tag-x {
  cursor: pointer; font-size: 14px; font-weight: 700; color: #888;
  line-height: 1;
}
.nc-assign-tag-x:hover { color: #c00; }

/* Attachments */
.nc-attach-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 10px;
  border: 2px dashed #c0c5cc; margin: 10px; border-radius: 4px;
  color: #888; font-size: 11px;
}
.nc-attach-icon svg { width: 28px; height: 28px; }
.nc-attach-area a { color: #2a5f9e; }
.nc-attach-note { font-size: 10px; color: #aaa; font-style: italic; }

/* Footer */
.nc-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 0;
}
.nc-recorded { font-size: 12px; color: #333; }
.nc-footer-actions { display: flex; gap: 6px; }

/* ===== BEHAVIOUR PAGE ===== */
.bh-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid #c0c5cc; background: #f0f0f0;
}
.bh-actions { display: flex; gap: 6px; }
.bh-action-btn {
  padding: 5px 14px; border: none; border-radius: 3px; font-size: 12px;
  font-weight: 700; cursor: pointer; font-family: inherit; color: #fff;
}
.bh-positive { background: #27ae60; }
.bh-positive:hover { background: #219a52; }
.bh-negative { background: #e74c3c; }
.bh-negative:hover { background: #d43d2f; }
.bh-filters { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.bh-filters label { display: flex; align-items: center; gap: 4px; }
.bh-filters select { font-size: 11px; padding: 3px 6px; border: 1px solid #adb2b5; border-radius: 2px; font-family: inherit; }
.bh-period-tabs { display: flex; gap: 0; border: 1px solid #adb2b5; border-radius: 3px; overflow: hidden; }
.bh-period {
  padding: 3px 10px; font-size: 11px; border: none; background: #fff;
  cursor: pointer; font-family: inherit; color: #333;
}
.bh-period.active { background: #3a6a98; color: #fff; }
.bh-period:hover:not(.active) { background: #e8ecf0; }
.bh-select-all { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; }
.bh-select-all input { margin: 0; }

/* Behaviour student cards */
.bh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; padding: 10px 12px;
}
.bh-card {
  background: #fff; border: 1px solid #d0d5da; border-radius: 4px;
  padding: 8px; text-align: center; position: relative;
  transition: border-color .15s, box-shadow .15s; cursor: default;
}
.bh-card.selected { border-color: #3a6a98; box-shadow: 0 0 0 2px rgba(58,106,152,.25); }
.bh-card:hover { border-color: #a0a8b0; }
.bh-card-cb { position: absolute; top: 6px; left: 6px; cursor: pointer; }
.bh-card-cb input { margin: 0; width: 14px; height: 14px; accent-color: #3a6a98; }
.bh-card-name { font-size: 11px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; line-height: 1.3; }
.bh-surname { font-weight: 400; color: #555; }
.bh-card-avatar {
  width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
}
.bh-card-avatar:hover { opacity: .85; }
.bh-card-points { display: flex; justify-content: center; gap: 4px; }
.bh-pts-pos, .bh-pts-neg {
  display: inline-block; min-width: 28px; padding: 1px 6px; border-radius: 10px;
  font-size: 11px; font-weight: 700; text-align: center;
}
.bh-pts-pos { background: #27ae60; color: #fff; }
.bh-pts-neg { background: #e74c3c; color: #fff; }

/* ===== DETENTIONS PAGE ===== */
.dt-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid #c0c5cc; background: #f0f0f0;
}
.dt-filters { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.dt-filters label { display: flex; align-items: center; gap: 4px; }
.dt-filters select { font-size: 11px; padding: 3px 6px; border: 1px solid #adb2b5; border-radius: 2px; font-family: inherit; }

/* Detention cards */
.dt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; padding: 10px 12px;
}
.dt-card {
  background: #fff; border: 1px solid #d0d5da; border-radius: 4px;
  padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.dt-card:hover { border-color: #a0a8b0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.dt-card-date { font-size: 15px; font-weight: 700; color: #1a1a1a; text-align: center; }
.dt-card-location {
  text-align: center; font-size: 11px; color: #fff; background: #e8a0b0;
  border-radius: 12px; padding: 2px 10px; display: inline-block;
  margin: 0 auto;
}
.dt-card-covered { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #555; }
.dt-card-covered-label { display: flex; align-items: center; gap: 4px; }
.dt-card-type {
  font-size: 10px; font-weight: 600; color: #3a6a98; background: #e0e8f0;
  padding: 1px 6px; border-radius: 3px;
}
.dt-card-students { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.dt-student-chip {
  font-size: 10px; padding: 1px 6px; border: 1px solid; border-radius: 10px;
  font-weight: 500;
}
.dt-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.dt-card-btn {
  font-size: 11px; padding: 4px 10px; border-radius: 3px; cursor: pointer;
  font-family: inherit; border: 1px solid;
}
.dt-btn-att { background: #fff; color: #3a6a98; border-color: #3a6a98; }
.dt-btn-att:hover { background: #e0e8f4; }
.dt-btn-view { background: #fff; color: #555; border-color: #c0c5cc; }
.dt-btn-view:hover { background: #f0f0f0; }
.dt-card-count { font-size: 10px; color: #888; }

/* Slide-out attendance panel */
.dt-panel-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.25); z-index: 200;
}
.dt-panel-overlay.open { display: block; }
.dt-panel {
  position: fixed; top: 0; right: -320px; width: 310px; height: 100%;
  background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.15);
  z-index: 201; display: flex; flex-direction: column;
  transition: right .25s ease;
}
.dt-panel.open { right: 0; }
.dt-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: linear-gradient(180deg, #5a8ab8 0%, #3a6a98 100%);
  color: #fff; font-size: 14px; font-weight: 700;
}
.dt-panel-close {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
  line-height: 1;
}
.dt-panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; font-size: 12px; }
.dt-panel-footer { padding: 10px 14px; border-top: 1px solid #e0e0e0; display: flex; gap: 6px; }

.dt-att-location {
  text-align: center; font-size: 11px; background: #e8a0b0; color: #fff;
  border-radius: 12px; padding: 3px 12px; margin-bottom: 6px;
}
.dt-att-markall {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 6px 0; border-bottom: 1px solid #e8e8e8; margin-bottom: 8px; cursor: pointer;
}
.dt-att-markall input { margin: 0; accent-color: #3a6a98; }
.dt-att-student {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #f0f0f0;
}
.dt-att-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.dt-att-info { flex: 1; min-width: 0; }
.dt-att-name { font-size: 12px; font-weight: 600; color: #1a1a1a; }
.dt-att-reason { font-size: 10px; color: #888; }
.dt-att-status {
  font-size: 10px; padding: 3px 4px; border: 1px solid #d0d5da;
  border-radius: 3px; font-family: inherit; width: 100px;
}

/* ===== TAKE REGISTER (BPS.net style from screenshots) ===== */

/* Register page title: "Take Register: 10A English Mr Ahmed 16/02/2026" */
.reg-page-title {
  font-size: 13px; font-weight: 700; color: #1a1a1a;
  padding: 4px 0 2px; border-bottom: 1px solid #c0c5cc; margin-bottom: 2px;
}

/* Register toolbar — flat icon+text style matching BPS.net */
.reg-toolbar {
  display: flex; align-items: center; gap: 0; padding: 2px 4px;
  background: #eef2f7; border-bottom: 1px solid #b8c0cc;
  flex-wrap: wrap;
}
.reg-tb-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; font-size: 11px; color: #1a3a6a;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; white-space: nowrap; text-decoration: none;
}
.reg-tb-btn:hover { text-decoration: underline; }
.reg-tb-btn.disabled { color: #999; cursor: default; text-decoration: none; }
.reg-tb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Preserve / Overwrite toggle buttons */
.reg-tb-mode {
  border-radius: 3px; padding: 2px 8px;
  text-decoration: none !important;
  font-weight: 600;
  opacity: 0.55;
}
.reg-tb-mode:hover { opacity: 0.8; }
.reg-tb-mode.active {
  opacity: 1; font-weight: 700;
}
#btn-preserve.active {
  background: #70b850; color: #fff;
}
#btn-preserve:not(.active) { color: #1a3a6a; }
#btn-overwrite.active {
  background: #d06030; color: #fff;
}
#btn-overwrite:not(.active) { color: #1a3a6a; }
.reg-tb-sep { width: 1px; height: 18px; background: #c0c5cc; margin: 0 2px; }
/* Right-side toolbar buttons */
.reg-tb-right { margin-left: auto; display: flex; align-items: center; gap: 0; }

/* Current View bar */
.reg-view-bar {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px;
  background: #f0f0f0; border-bottom: 1px solid #c0c5cc;
  font-size: 11px; color: #1a1a1a;
}
.reg-view-bar label { display: flex; align-items: center; gap: 3px; cursor: pointer; font-weight: 400; }
.reg-view-bar input[type="radio"] { margin: 0; }
.reg-view-label { font-weight: 600; color: #000; margin-right: 6px; }
/* "Present 25" counter on the right */
.reg-present-count {
  margin-left: auto; font-size: 13px; font-weight: 700; color: #000;
}

/* Register tabs */
.reg-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #b8c0c8;
}
.reg-tab {
  padding: 5px 14px; font-size: 12px; color: #444; cursor: pointer;
  background: linear-gradient(180deg, #e8eaed 0%, #d8dce2 100%);
  border: 1px solid #b8c0c8; border-bottom: none;
  margin-bottom: -1px; font-family: inherit; border-radius: 2px 2px 0 0;
}
.reg-tab.active {
  background: #fff; color: #1a1a1a; font-weight: 600;
  border-bottom-color: #fff;
}
.reg-tab:hover:not(.active) { background: #e0eaf4; }

/* Register controls (class, date) */
.reg-controls {
  display: flex; align-items: center; gap: 8px; margin-bottom: 0; flex-wrap: wrap;
  padding: 6px 0;
}
.reg-controls label { font-size: 12px; font-weight: 400; color: #1a1a1a; }
.reg-controls select, .reg-controls input[type="date"] {
  padding: 3px 6px; border: 1px solid #adb2b5; font-size: 12px;
  background: #fff; font-family: inherit; color: #1a1a1a; border-radius: 2px;
}
.reg-controls select:focus, .reg-controls input[type="date"]:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}

/* Session pills (AM/PM/P1-P4 tabs) */
.session-pills { display: flex; gap: 0; margin: 4px 0; }
.session-pill {
  padding: 4px 10px; font-size: 11px; font-weight: 400; cursor: pointer;
  border: 1px solid #b8c0c8; border-left-width: 0;
  background: linear-gradient(180deg, #e8eaed 0%, #d8dce2 100%);
  color: #1a1a1a; font-family: inherit;
}
.session-pill:first-child { border-left-width: 1px; border-radius: 2px 0 0 2px; }
.session-pill:last-child { border-radius: 0 2px 2px 0; }
.session-pill:hover { background: #e0eaf4; }
.session-pill.active {
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  color: #fff; font-weight: 600; border-color: #3a7cc6;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}

/* Register grid — exact BPS.net DataGridView style */
.reg-table-wrap {
  border: 1px solid #808080; background: #fff; overflow: auto;
  display: inline-block; max-width: 100%;
}
.reg-table {
  border-collapse: collapse; white-space: nowrap;
}
.reg-table th {
  padding: 2px 6px; font-size: 11px; font-weight: 600; text-align: left;
  background: #e8e8e0; border: 1px solid #a0a0a0; color: #000;
  white-space: nowrap;
}
.reg-table th.col-mark {
  text-align: center; width: 38px; min-width: 38px; max-width: 38px; padding: 2px 2px;
}
.reg-table th.col-reg { text-align: center; width: 38px; min-width: 38px; }
.reg-table th.col-name { width: 180px; min-width: 180px; }
.reg-table td {
  padding: 1px 6px; font-size: 11px; border: 1px solid #c0c0c0; color: #000;
  white-space: nowrap;
}
.reg-table td.col-name { font-weight: 400; width: 180px; min-width: 180px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.reg-table td.col-reg { font-size: 10px; color: #444; text-align: center; width: 38px; }

/* Mark cells — clean white like BPS.net DataGridView */
.reg-table td.col-mark {
  text-align: center; font-weight: 600; font-size: 11px;
  padding: 1px 0; width: 38px; min-width: 38px; max-width: 38px;
  background: #fff; color: #000;
}
.reg-table td.col-mark.mark-empty {
  background: #fff; color: #b0b0b0;
}

/* Late mark — red text to stand out */
.reg-table td.col-mark.mark-late {
  color: #cc0000; font-weight: 700;
}

/* Comment indicator — small red triangle in top-right corner */
.reg-table td.col-mark.has-comment {
  position: relative;
}
.reg-table td.col-mark.has-comment::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-top: 6px solid #d9534f;
  border-left: 6px solid transparent;
}

/* Locked columns (AM/PM) — greyed out, not directly editable */
.reg-table th.col-locked {
  background: #d8d8d0; color: #666;
}
.reg-table td.col-mark.col-locked {
  background: #eaeaea; color: #666; cursor: default;
}
.reg-table td.col-mark.col-locked.mark-empty {
  background: #eaeaea; color: #ccc;
}
.reg-table td.col-mark.col-locked.mark-late {
  color: #cc0000;
}

/* Row states */
.reg-table tbody tr { cursor: pointer; user-select: none; height: 20px; }
.reg-table tbody tr:hover td { background: #d0e8ff; }
.reg-table tbody tr:hover td.col-mark { background: #d0e8ff; }
.reg-table tbody tr:hover td.col-mark.mark-late { color: #cc0000; }
.reg-table tbody tr:hover td.col-locked { background: #dde0e4; }
.reg-table tbody tr.selected td { background: #3366cc; color: #fff; border-color: #2850a0; }
.reg-table tbody tr.selected td.col-mark { background: #3366cc; color: #fff; border-color: #2850a0; }
.reg-table tbody tr.selected td.col-mark.mark-empty { background: #3366cc; color: #8888bb; }

/* Yellow tooltip popup (SIMS info popup) */
.reg-tooltip {
  position: absolute; z-index: 100; pointer-events: none;
  background: #ffffcc; border: 1px solid #808080;
  padding: 4px 8px; font-size: 11px; color: #000;
  box-shadow: 2px 2px 4px rgba(0,0,0,.2);
  max-width: 250px; line-height: 1.4;
}
.reg-tooltip strong { font-weight: 700; }
.reg-tooltip .tt-line { margin-top: 1px; }

/* Right-click context menu */
.reg-context-menu {
  display: none; position: absolute; z-index: 200;
  background: #f6f6f6; border: 1px solid #888;
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
  min-width: 180px; padding: 2px 0; font-size: 12px;
}
.ctx-item {
  padding: 3px 18px; cursor: pointer; color: #1a1a1a;
  white-space: nowrap;
}
.ctx-item:hover { background: #3366cc; color: #fff; }
.ctx-sep { height: 1px; background: #c0c0c0; margin: 2px 4px; }

/* ===== SIMS-style Modal Dialog ===== */
.sims-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.35); z-index: 500;
  align-items: center; justify-content: center;
}
.sims-modal-overlay.active { display: flex; }
.sims-modal {
  background: #f0f0f0; border: 1px solid #666;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  min-width: 340px; max-width: 520px; max-height: 80vh;
  display: flex; flex-direction: column;
  border-radius: 3px; overflow: hidden;
}
.sims-modal-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #4a8bc2 0%, #2a5f9e 100%);
  padding: 5px 8px; color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  user-select: none;
}
.sims-modal-close {
  background: none; border: none; color: #fff; font-size: 16px; cursor: pointer;
  padding: 0 4px; line-height: 1; font-family: inherit;
}
.sims-modal-close:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
.sims-modal-body {
  padding: 12px 14px; font-size: 12px; color: #1a1a1a;
  overflow-y: auto; flex: 1; line-height: 1.5;
}
.sims-modal-body label {
  display: block; font-weight: 600; margin-bottom: 4px; font-size: 11px; color: #333;
}
.sims-modal-body input[type="text"],
.sims-modal-body input[type="number"],
.sims-modal-body textarea {
  width: 100%; padding: 4px 6px; border: 1px solid #adb2b5; font-size: 12px;
  font-family: inherit; border-radius: 2px; background: #fff; color: #1a1a1a;
  margin-bottom: 8px;
}
.sims-modal-body textarea { min-height: 60px; resize: vertical; }
.sims-modal-body input:focus,
.sims-modal-body textarea:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}
.sims-modal-footer {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 8px 14px; border-top: 1px solid #ccc; background: #e8e8e8;
}
.sims-modal-footer button {
  padding: 4px 20px; font-size: 12px; cursor: pointer; font-family: inherit;
  border: 1px solid #adb2b5; border-radius: 2px;
  background: linear-gradient(180deg, #f6f7f9 0%, #e0e0e0 100%); color: #1a1a1a;
}
.sims-modal-footer button:hover {
  border-color: #80a8d0; background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%);
}
.sims-modal-footer button.btn-primary {
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  color: #fff; border-color: #3a7cc6;
}
.sims-modal-footer button.btn-primary:hover {
  background: linear-gradient(180deg, #6baae0 0%, #5a9bd2 100%);
}

/* Codes table inside modal */
.codes-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.codes-table td { padding: 2px 6px; font-size: 11px; border-bottom: 1px solid #e0e0e0; }
.codes-table td:first-child { font-weight: 700; width: 28px; text-align: center; }

/* Comment log inside modal */
.comment-log { margin-top: 6px; }
.comment-entry {
  padding: 6px 8px; margin-bottom: 4px; background: #fff;
  border: 1px solid #d0d0d0; border-radius: 2px; font-size: 11px;
}
.comment-entry .ce-meta { font-size: 10px; color: #666; margin-bottom: 2px; }
.comment-entry .ce-text { color: #1a1a1a; }

/* Focused cell (keyboard nav) — black border like SIMS active cell */
.reg-table td.cell-focused {
  outline: 2px solid #000 !important;
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* Register action bar */
.reg-action-bar {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 0;
}
.reg-action-btn {
  padding: 4px 14px; font-size: 12px; font-weight: 400; cursor: pointer;
  border: 1px solid #adb2b5; font-family: inherit; border-radius: 2px;
  background: linear-gradient(180deg, #f6f7f9 0%, #e0e0e0 100%); color: #1a1a1a;
  display: flex; align-items: center; gap: 4px;
}
.reg-action-btn:hover { border-color: #80a8d0; background: linear-gradient(180deg, #e8f0f8 0%, #d0dcea 100%); }
.reg-btn-present { background: linear-gradient(180deg, #c8e8a8 0%, #a8d080 100%); border-color: #88b048; }
.reg-btn-present:hover { background: linear-gradient(180deg, #d0f0b0 0%, #b8d890 100%); }
.reg-btn-late { background: linear-gradient(180deg, #f8e0a0 0%, #e8c880 100%); border-color: #c8a040; }
.reg-btn-late:hover { background: linear-gradient(180deg, #ffe8b0 0%, #f0d090 100%); }
.reg-btn-absent { background: linear-gradient(180deg, #f0b0b0 0%, #e09090 100%); border-color: #c06060; }
.reg-btn-absent:hover { background: linear-gradient(180deg, #f8c0c0 0%, #e8a0a0 100%); }
.reg-btn-clear { background: linear-gradient(180deg, #f6f7f9 0%, #e0e0e0 100%); border-color: #adb2b5; }

.reg-summary {
  margin-left: auto; font-size: 12px; color: #444; display: flex; gap: 10px;
}
.reg-summary span { font-weight: 600; }
.reg-summary .s-present { color: #007040; }
.reg-summary .s-late { color: #b06000; }
.reg-summary .s-absent { color: #c00; }

/* ===== ADMIN ===== */
.admin-section { margin-bottom: 8px; }
.admin-section h2 {
  font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 0;
  background: linear-gradient(180deg, #5b9bd5 0%, #4a8bc2 100%);
  padding: 5px 10px; border: 1px solid #3a7cc6;
  text-shadow: 0 1px 1px rgba(0,0,0,.2); border-radius: 2px 2px 0 0;
}
.admin-section > table { border-top: none; border-radius: 0 0 2px 2px; }

/* ===== FILTER BAR ===== */
.filter-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
  font-size: 12px; color: #1a1a1a; padding: 4px 0;
}
.filter-bar label { font-weight: 400; }
.filter-bar select, .filter-bar input {
  padding: 3px 6px; border: 1px solid #adb2b5; font-size: 12px;
  background: #fff; font-family: inherit; color: #1a1a1a; border-radius: 2px;
}
.filter-bar select:focus, .filter-bar input:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}

/* ===== STATUS MESSAGES ===== */
.status-msg {
  padding: 5px 8px; font-size: 12px; margin-top: 6px;
  display: none; border: 1px solid; border-radius: 2px;
}
.status-msg.show { display: block; }
.status-success { background: #d8f0d8; border-color: #a0d0a0; color: #007040; }
.status-error { background: #ffe0e0; border-color: #e0a0a0; color: #c00; }

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #666; margin-bottom: 6px;
  padding: 2px 0;
}
.breadcrumb a { color: #0055c4; font-size: 11px; }
.breadcrumb .sep { color: #aaa; }
.breadcrumb .current { color: #1a1a1a; font-weight: 600; }

/* Page header */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.page-header h1 { font-size: 14px; font-weight: 700; color: #2a5f9e; }

/* ===== SEATING PLAN ===== */
.sp-controls {
  display: flex; gap: 12px; margin-bottom: 8px; font-size: 11px;
}
.sp-controls label { display: flex; align-items: center; gap: 4px; }
.sp-controls input {
  width: 50px; padding: 2px 4px; border: 1px solid #adb2b5; border-radius: 2px;
  font-size: 11px; font-family: inherit;
}
.sp-grid {
  display: grid; gap: 4px; margin-bottom: 8px;
}
.sp-cell {
  border: 1px solid #c0c8d0; border-radius: 3px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #f0f4f8; padding: 2px;
}
.sp-cell-empty { background: #fafafa; border-style: dashed; border-color: #d0d0d0; }
.sp-cell-edit { cursor: default; }
.sp-cell-dragover { background: #d0e8ff; border-color: #3a7cc6; border-style: solid; }
.sp-cell-placeholder { font-size: 9px; color: #bbb; }
.sp-chip {
  font-size: 10px; font-weight: 600; color: #1a3a6a; background: #dce8f4;
  padding: 3px 8px; border-radius: 12px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: grab; user-select: none;
}
.sp-chip.sp-dragging { opacity: 0.4; }
.sp-chip-x {
  cursor: pointer; font-size: 13px; color: #888; line-height: 1; font-weight: 700;
}
.sp-chip-x:hover { color: #c00; }
.sp-chip-unassigned {
  background: #fff3e0; color: #bf6000; cursor: grab;
}
.sp-teacher-desk {
  text-align: center; background: #e0e0e0; border: 1px solid #b0b0b0;
  border-radius: 3px; padding: 4px; font-size: 11px; font-weight: 600;
  color: #555; margin-bottom: 8px;
}
.sp-unassigned-title {
  font-size: 11px; font-weight: 600; color: #333; margin-bottom: 4px;
}
.sp-unassigned {
  display: flex; flex-wrap: wrap; gap: 4px; max-height: 100px;
  overflow-y: auto; padding: 4px; background: #fafafa;
  border: 1px solid #e0e0e0; border-radius: 3px;
}

/* ===== SEATING PLAN PAGE ===== */
.seating-page { padding: 0; }
.seating-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #b8c0c8; border-radius: 2px;
  padding: 10px 14px; margin-bottom: 6px;
}
.seating-header h2 { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.seating-actions { display: flex; gap: 6px; }
.seating-controls {
  margin-bottom: 6px; font-size: 12px;
}
.seating-controls select {
  padding: 3px 6px; border: 1px solid #adb2b5; font-size: 12px;
  background: #fff; font-family: inherit; border-radius: 2px;
}

.sp-page-controls {
  display: flex; gap: 14px; align-items: center; margin-bottom: 8px;
  padding: 8px 12px; background: #f0f4f8; border: 1px solid #d0d8e0;
  border-radius: 3px; font-size: 11px;
}
.sp-page-controls label { display: flex; align-items: center; gap: 4px; }
.sp-page-controls input[type="number"] {
  width: 52px; padding: 3px 5px; border: 1px solid #adb2b5; border-radius: 2px;
  font-size: 11px; font-family: inherit;
}

.sp-page-grid {
  display: grid; gap: 6px; margin-bottom: 10px;
  padding: 12px; background: #fff; border: 1px solid #b8c0c8; border-radius: 3px;
}
.sp-page-cell {
  border: 1px solid #c0c8d0; border-radius: 4px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #f0f4f8; padding: 4px;
}
.sp-page-cell-empty { background: #fafafa; border-style: dashed; border-color: #d8d8d8; }
.sp-page-cell-edit { cursor: default; transition: background .15s, border-color .15s; }
.sp-page-cell-dragover { background: #d0e8ff !important; border-color: #3a7cc6 !important; border-style: solid !important; }

.sp-page-cell-drop { font-size: 10px; color: #bbb; }

.sp-page-chip {
  font-size: 11px; font-weight: 600; color: #1a3a6a; background: #dce8f4;
  padding: 4px 10px; border-radius: 14px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: grab; user-select: none;
}
.sp-page-chip:active { cursor: grabbing; }
.sp-page-dragging { opacity: 0.35; }
.sp-page-chip-x {
  cursor: pointer; font-size: 14px; color: #888; line-height: 1; font-weight: 700;
}
.sp-page-chip-x:hover { color: #c00; }

.sp-page-chip-unassigned {
  background: #fff3e0; color: #bf6000; cursor: grab;
}

.sp-page-teacher {
  text-align: center; background: #e8e8e8; border: 1px solid #b8b8b8;
  border-radius: 4px; padding: 6px; font-size: 12px; font-weight: 600;
  color: #555; margin-bottom: 10px; max-width: 240px; margin-left: auto; margin-right: auto;
}

.sp-page-unassigned-header {
  font-size: 12px; font-weight: 600; color: #333; margin-bottom: 4px;
}
.sp-page-unassigned {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 10px; background: #fff; border: 1px solid #d0d8e0;
  border-radius: 3px; min-height: 36px;
}

/* ===== CONCERN DETAIL (CPOMS-style timeline) ===== */
.concern-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 12px 16px; margin-bottom: 8px;
  border: 1px solid #b8c0c8; border-radius: 2px;
}
.cdh-left h2 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.cdh-student { font-size: 13px; color: #444; }
.cdh-student a { color: #0055c4; font-weight: 600; }
.cdh-class { color: #888; font-size: 12px; }

.concern-timeline {
  position: relative; padding: 0 0 0 28px; margin: 0 0 12px;
}
.ct-node {
  position: relative; padding-bottom: 16px;
}
.ct-dot {
  position: absolute; left: -28px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px #c2185b;
  z-index: 2;
}
.ct-dot-comment { width: 10px; height: 10px; left: -26px; top: 8px; }
.ct-line {
  position: absolute; left: -22px; top: 20px;
  width: 2px; bottom: 0; opacity: 0.3;
}
.ct-node:last-child .ct-line { display: none; }
.ct-card {
  background: #fff; border: 1px solid #d0d0d0; border-radius: 4px;
  border-left: 3px solid #c2185b; padding: 10px 14px;
}
.ct-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ct-card-by { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.ct-card-date { font-size: 11px; color: #888; }
.ct-card-body { font-size: 12px; line-height: 1.6; color: #333; }
.ct-card-tag {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600;
  color: #c2185b; background: #fce4ec; padding: 1px 8px; border-radius: 10px;
}

.concern-comment-form {
  background: #fff; border: 1px solid #b8c0c8; border-radius: 2px;
  padding: 14px 16px;
}
.concern-comment-form h3 {
  font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;
}
.concern-comment-form textarea {
  width: 100%; min-height: 80px; padding: 8px 10px; font-size: 12px;
  font-family: inherit; border: 1px solid #adb2b5; border-radius: 2px;
  resize: vertical; color: #1a1a1a; line-height: 1.5;
}
.concern-comment-form textarea:focus {
  outline: none; border-color: #3a7cc6; box-shadow: 0 0 3px rgba(58,124,198,.4);
}
.ccf-actions { display: flex; gap: 6px; margin-top: 8px; }

.concern-clickable-entry:hover { background: #f0f5fa; border-color: #a0b8d0; }

/* ===== STUDENT PROFILE DASHBOARD ===== */
.sp-dashboard {
  display: flex; gap: 8px; min-height: 0;
}
.sp-sidebar {
  width: 200px; min-width: 200px; background: #fff;
  border: 1px solid #b8c0c8; border-radius: 2px; padding: 14px 12px;
  text-align: center;
}
.sp-main-area { flex: 1; min-width: 0; }

.spd-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.spd-name { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.spd-info-table {
  width: 100%; border: none; background: transparent; font-size: 11px;
}
.spd-info-table td {
  padding: 2px 4px; border: none; font-size: 11px; text-align: left;
}
.spd-info-table td:first-child { font-weight: 600; color: #666; width: 70px; }
.spd-sidebar-actions { margin-top: 10px; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }

/* Summary cards */
.sp-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px;
}
.spd-card {
  background: #fff; border: 1px solid #b8c0c8; border-radius: 3px;
  padding: 10px 8px; text-align: center; border-top: 3px solid #b8c0c8;
}
.spd-card-green { border-top-color: #27ae60; }
.spd-card-amber { border-top-color: #f39c12; }
.spd-card-red { border-top-color: #e74c3c; }
.spd-card-purple { border-top-color: #8e44ad; }
.spd-card-value { font-size: 22px; font-weight: 700; color: #2c3e50; }
.spd-card-label { font-size: 10px; color: #666; margin-top: 2px; text-transform: uppercase; }

/* Tabs */
.sp-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #b8c0c8; margin-bottom: 6px;
}
.spd-tab {
  padding: 5px 16px; font-size: 12px; color: #444; cursor: pointer;
  background: linear-gradient(180deg, #e8eaed 0%, #d8dce2 100%);
  border: 1px solid #b8c0c8; border-bottom: none;
  margin-bottom: -1px; font-family: inherit; border-radius: 2px 2px 0 0;
}
.spd-tab.active {
  background: #fff; color: #1a1a1a; font-weight: 600; border-bottom-color: #fff;
}
.spd-tab:hover:not(.active) { background: #e0eaf4; }

/* Tab content */
.sp-tab-content {
  background: #fff; border: 1px solid #b8c0c8; border-top: none;
  border-radius: 0 0 2px 2px; padding: 10px 12px; min-height: 200px;
}

.spd-section { margin-bottom: 12px; }
.spd-section h3 { font-size: 13px; font-weight: 700; color: #2a5f9e; margin-bottom: 6px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; }
.spd-empty { font-size: 11px; color: #888; font-style: italic; }

/* Attendance bar */
.spd-att-bar-wrap {
  height: 18px; background: #eee; border-radius: 9px; overflow: hidden; margin-bottom: 4px;
}
.spd-att-bar { height: 100%; border-radius: 9px; transition: width .3s; }
.spd-att-pct { font-size: 11px; color: #444; }

/* Attendance chart (vertical bars) */
.spd-att-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-bottom: 8px;
  padding: 4px 0;
}
.spd-att-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.spd-att-colbar {
  width: 100%; max-width: 30px; border-radius: 2px 2px 0 0;
  min-height: 2px; transition: height .3s;
}
.spd-att-collabel { font-size: 9px; color: #666; margin-top: 2px; white-space: nowrap; }

/* Behaviour overview rows */
.spd-bh-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid #f0f0f0; font-size: 11px;
}
.spd-bh-pts {
  min-width: 32px; text-align: center; font-weight: 700; font-size: 11px;
  padding: 1px 6px; border-radius: 10px;
}
.spd-bh-pts.pos { background: #d4edda; color: #27ae60; }
.spd-bh-pts.neg { background: #f8d7da; color: #e74c3c; }
.spd-bh-reason { flex: 1; color: #333; }
.spd-bh-date { color: #888; font-size: 10px; }

/* Behaviour chart */
.spd-bh-chart { margin-bottom: 10px; }
.spd-bh-chart-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.spd-bh-chart-label { width: 60px; text-align: right; font-size: 11px; color: #444; }
.spd-bh-chart-track { flex: 1; height: 16px; background: #eee; border-radius: 3px; overflow: hidden; }
.spd-bh-chart-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.spd-bh-chart-val { width: 40px; font-size: 11px; font-weight: 700; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .sims-toolbar { display: none; }
  .home-panels { grid-template-columns: 1fr; }
  .widgets { grid-template-columns: 1fr; }
}