/* ═══════════════════════════════════════════════════════════════════
   NIBSS Internal Administration — admin.css
   Dark navy design language matching the main dashboard
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout shell ── */
.admin-shell {
  display: flex;
  min-height: 100vh;
  background: #0b0f15;
  color: #eef4ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Sidebar ── */
.admin-sidebar {
  width: 220px;
  min-width: 220px;
  background: #080c12;
  border-right: 1px solid #151d27;
  display: flex;
  flex-direction: column;
  padding: 20px 0 24px;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 20px;
  border-bottom: 1px solid #151d27;
  margin-bottom: 8px;
}

.admin-nav-section {
  padding: 12px 0 8px;
  display: flex;
  flex-direction: column;
}

.admin-nav-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a5568;
  padding: 0 18px 6px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #8d98a8;
  text-decoration: none;
  border-radius: 0;
  transition: background 140ms, color 140ms;
  border-left: 2px solid transparent;
}

.admin-nav-item:hover {
  background: #0f141d;
  color: #c8d3e0;
}

.admin-nav-item.active {
  color: #60a5fa;
  background: rgba(59,130,246,0.08);
  border-left-color: #3b82f6;
}

.admin-nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.admin-version-info {
  padding: 10px 18px 8px;
  border-bottom: 1px solid #1e2736;
  margin-bottom: 8px;
}

.admin-version-badge {
  font-size: 15px;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.admin-version-date {
  font-size: 11px;
  color: #4a5568;
  margin-top: 2px;
}

.admin-config-status {
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-config-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.admin-config-key { color: #4a5568; }
.admin-config-val { color: #8d98a8; font-weight: 600; }

/* ── Main content ── */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 60px;
  overflow-x: auto;
}

/* ── Page header ── */
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #151d27;
  background: #080c12;
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-page-title {
  font-size: 18px;
  font-weight: 800;
  color: #e8eef8;
  margin: 0;
}

.admin-page-subtitle {
  font-size: 12px;
  color: #687383;
  margin: 3px 0 0;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms, border-color 140ms, transform 100ms;
  white-space: nowrap;
}

.admin-btn:active { transform: scale(0.97); }

.admin-btn-primary {
  background: #1d4ed8;
  color: #fff;
  border-color: #2563eb;
}
.admin-btn-primary:hover { background: #2563eb; }

.admin-btn-secondary {
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  border-color: rgba(59,130,246,0.3);
}
.admin-btn-secondary:hover { background: rgba(59,130,246,0.2); }

.admin-btn-ghost {
  background: transparent;
  color: #8d98a8;
  border-color: #1e2a38;
}
.admin-btn-ghost:hover { background: #0f141d; color: #c8d3e0; border-color: #2a3a4e; }

.admin-btn-danger {
  background: rgba(248,81,73,0.1);
  color: #f85149;
  border-color: rgba(248,81,73,0.25);
}
.admin-btn-danger:hover { background: rgba(248,81,73,0.18); }

.admin-btn-sm { height: 28px; padding: 0 10px; font-size: 11px; }

.admin-changes-badge {
  background: #f2b51d;
  color: #0b0f15;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Tabs ── */
.admin-tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid #151d27;
  background: #080c12;
}

.admin-tab {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #687383;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
  margin-bottom: -1px;
}

.admin-tab:hover { color: #c8d3e0; }
.admin-tab.active { color: #60a5fa; border-bottom-color: #3b82f6; }

/* ── Tab panels ── */
.admin-tab-panel {
  display: none;
  padding: 24px 28px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.admin-tab-panel.active { display: flex; }

/* ── Filter row ── */
.admin-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search-icon {
  position: absolute;
  left: 10px;
  color: #4a5568;
  font-size: 14px;
  pointer-events: none;
}

.admin-search {
  height: 32px;
  padding: 0 10px 0 30px;
  background: #080c12;
  border: 1px solid #1e2a38;
  border-radius: 6px;
  color: #c8d3e0;
  font-size: 12px;
  width: 220px;
  outline: none;
  transition: border-color 140ms;
}
.admin-search:focus { border-color: #3b82f6; }

.admin-select {
  height: 32px;
  padding: 0 10px;
  background: #080c12;
  border: 1px solid #1e2a38;
  border-radius: 6px;
  color: #c8d3e0;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color 140ms;
}
.admin-select:focus { border-color: #3b82f6; }

/* ── Tables ── */
.admin-table-wrap {
  border: 1px solid #151d27;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #080c12;
  -webkit-overflow-scrolling: touch;
}

.admin-table-header {
  display: grid;
  background: #0b0f15;
  border-bottom: 1px solid #1b2430;
  padding: 0;
}

.admin-table-header > div {
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a5568;
}

.admin-table-row {
  display: grid;
  border-bottom: 1px solid #0f141d;
  align-items: center;
  transition: background 120ms;
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row:hover { background: #0d1219; }

.admin-table-row > div {
  padding: 10px 14px;
  font-size: 12px;
  color: #c8d3e0;
}

/* Grid templates */
.admin-inst-grid {
  grid-template-columns: 200px 64px 72px 160px 130px 1fr 90px 148px;
  min-width: 960px;
}
.admin-sys-grid {
  grid-template-columns: 200px 110px 120px 80px 90px 120px 160px;
  min-width: 880px;
}
.admin-ds-grid {
  grid-template-columns: 200px 130px 200px 130px 90px 175px;
  min-width: 900px;
}
/* ── Institution logo cell ── */
.admin-inst-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.admin-inst-logo img { width: 100%; height: 100%; object-fit: contain; }

.admin-inst-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-inst-name { font-weight: 700; color: #e8eef8; font-size: 12px; }
.admin-inst-id { font-size: 10px; color: #4a5568; margin-top: 1px; }

/* ── Status badges ── */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-status-badge.enabled  { background: rgba(39,201,90,0.12); color: #27c95a; border: 1px solid rgba(39,201,90,0.2); }
.admin-status-badge.disabled { background: rgba(141,152,168,0.1); color: #687383; border: 1px solid #1e2a38; }
.admin-status-badge.active   { background: rgba(39,201,90,0.12); color: #27c95a; border: 1px solid rgba(39,201,90,0.2); }
.admin-status-badge.nodata   { background: rgba(242,181,29,0.12); color: #f2b51d; border: 1px solid rgba(242,181,29,0.2); }
.admin-status-badge.error    { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.2); }

/* ── Product tags ── */
.admin-product-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.admin-product-tag {
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(56,133,255,0.12);
  color: #60a5fa;
  border: 1px solid rgba(56,133,255,0.2);
  display: inline-flex;
  align-items: center;
}

/* ── Colour swatch ── */
.admin-colour-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
}

/* ── Threshold layout ── */
.admin-threshold-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.admin-threshold-sidebar {
  width: 180px;
  min-width: 180px;
  background: #080c12;
  border: 1px solid #151d27;
  border-radius: 8px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-threshold-sidebar-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a5568;
  padding: 0 14px 8px;
}

.admin-threshold-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #8d98a8;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, color 120ms;
  border-left: 2px solid transparent;
}
.admin-threshold-scope:hover { background: #0f141d; color: #c8d3e0; }
.admin-threshold-scope.active { color: #60a5fa; background: rgba(59,130,246,0.08); border-left-color: #3b82f6; }

.admin-scope-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-scope-dot.global { background: #60a5fa; }
/* per-system dot colors are set inline via sys.color */

.admin-scope-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #0f141d;
  color: #4a5568;
  text-transform: uppercase;
}
.admin-scope-tag.custom { background: rgba(59,130,246,0.12); color: #60a5fa; }

.admin-threshold-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-threshold-scope-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-threshold-scope-name {
  font-size: 15px;
  font-weight: 800;
  color: #e8eef8;
}

.admin-threshold-scope-desc {
  font-size: 11px;
  color: #687383;
  margin-top: 2px;
}

.admin-threshold-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-threshold-cards-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.admin-threshold-card {
  background: #080c12;
  border: 1px solid #151d27;
  border-radius: 8px;
  padding: 16px;
}

.admin-threshold-card-title {
  font-size: 12px;
  font-weight: 800;
  color: #e8eef8;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-threshold-card-title .unit {
  font-size: 10px;
  font-weight: 600;
  color: #4a5568;
  background: #0f141d;
  padding: 1px 6px;
  border-radius: 3px;
}

.admin-threshold-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.admin-threshold-field:last-child { margin-bottom: 0; }

.admin-threshold-label {
  font-size: 11px;
  font-weight: 700;
  color: #687383;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-threshold-label .warn-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f2b51d; flex-shrink: 0;
}
.admin-threshold-label .fail-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f85149; flex-shrink: 0;
}

.admin-threshold-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-threshold-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  background: #0b0f15;
  border: 1px solid #1e2a38;
  border-radius: 6px;
  color: #e8eef8;
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
  outline: none;
  transition: border-color 140ms;
}
.admin-threshold-input:focus { border-color: #3b82f6; }
.admin-threshold-input.error { border-color: #f85149; }

.admin-threshold-unit {
  font-size: 11px;
  color: #4a5568;
  font-weight: 600;
  min-width: 24px;
}

.admin-threshold-error {
  font-size: 10px;
  color: #f85149;
  display: none;
}
.admin-threshold-error.visible { display: block; }

/* ── Drawer ── */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: none;
}
.admin-drawer-overlay.open { display: block; }

.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: #080c12;
  border-left: 1px solid #1b2430;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.23,1,0.32,1);
}
.admin-drawer.open { transform: translateX(0); }

.admin-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #151d27;
}

.admin-drawer-title {
  font-size: 15px;
  font-weight: 800;
  color: #e8eef8;
}

.admin-drawer-subtitle {
  font-size: 11px;
  color: #687383;
  margin-top: 3px;
}

.admin-drawer-close {
  background: transparent;
  border: none;
  color: #687383;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 120ms;
}
.admin-drawer-close:hover { color: #e8eef8; }

.admin-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid #151d27;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Form fields ── */
.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-label {
  font-size: 11px;
  font-weight: 700;
  color: #8d98a8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
  height: 34px;
  padding: 0 10px;
  background: #0b0f15;
  border: 1px solid #1e2a38;
  border-radius: 6px;
  color: #e8eef8;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms;
  font-family: inherit;
}
.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus { border-color: #3b82f6; }

.admin-form-textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
}

.admin-form-input[readonly] {
  color: #4a5568;
  cursor: not-allowed;
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Logo upload area ── */
.admin-logo-upload {
  border: 1px dashed #1e2a38;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #0b0f15;
  transition: border-color 140ms, background 140ms;
  cursor: pointer;
}
.admin-logo-upload:hover { border-color: #3b82f6; background: rgba(59,130,246,0.04); }

.admin-logo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: #0b0f15;
  border: 1px solid #1e2a38;
  border-radius: 8px;
}

.admin-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a2232;
}
.admin-logo-preview img { width: 100%; height: 100%; object-fit: contain; }

.admin-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.admin-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.admin-toggle-slider {
  position: absolute;
  inset: 0;
  background: #1e2a38;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms;
}
.admin-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #687383;
  border-radius: 50%;
  transition: transform 160ms, background 160ms;
}
.admin-toggle input:checked + .admin-toggle-slider { background: rgba(39,201,90,0.2); }
.admin-toggle input:checked + .admin-toggle-slider::before {
  transform: translateX(16px);
  background: #27c95a;
}

/* ── Modal ── */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1100;
  display: none;
}
.admin-modal-overlay.open { display: block; }

.admin-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 680px;
  max-width: calc(100vw - 40px);
  max-height: 85vh;
  background: #080c12;
  border: 1px solid #1b2430;
  border-radius: 10px;
  z-index: 1101;
  display: none;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transition: transform 200ms cubic-bezier(0.23,1,0.32,1), opacity 200ms;
  opacity: 0;
}
.admin-modal.open {
  display: flex;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.admin-modal-sm { width: 480px; }

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #151d27;
}

.admin-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #e8eef8;
}

.admin-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.admin-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #151d27;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Wizard steps ── */
.admin-wizard-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid #151d27;
  background: #0b0f15;
}

.admin-wizard-step {
  font-size: 11px;
  font-weight: 700;
  color: #4a5568;
  padding: 4px 10px;
  border-radius: 4px;
  transition: color 140ms, background 140ms;
}
.admin-wizard-step.active { color: #60a5fa; background: rgba(59,130,246,0.1); }
.admin-wizard-step.done   { color: #27c95a; }

.admin-wizard-step-sep { color: #2a3444; font-size: 14px; }

/* ── Validate / Publish result ── */
.admin-validate-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-validate-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.admin-validate-item.pass { background: rgba(39,201,90,0.08); border: 1px solid rgba(39,201,90,0.15); color: #3fb950; }
.admin-validate-item.fail { background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.15); color: #f85149; }
.admin-validate-item.warn { background: rgba(242,181,29,0.08); border: 1px solid rgba(242,181,29,0.15); color: #f2b51d; }

.admin-validate-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.admin-validate-text { flex: 1; }
.admin-validate-detail { font-size: 11px; opacity: 0.7; margin-top: 2px; }

/* ── Publish changes list ── */
.admin-publish-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-publish-change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c8d3e0;
  padding: 8px 12px;
  background: #0b0f15;
  border: 1px solid #1e2a38;
  border-radius: 6px;
}
.admin-publish-change-item::before { content: '•'; color: #3b82f6; font-size: 16px; }

.admin-publish-warning {
  font-size: 11px;
  color: #f2b51d;
  padding: 10px 12px;
  background: rgba(242,181,29,0.08);
  border: 1px solid rgba(242,181,29,0.2);
  border-radius: 6px;
}

/* ── Test result box ── */
.admin-test-result {
  background: #0b0f15;
  border: 1px solid #1e2a38;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-test-result.success { border-color: rgba(39,201,90,0.25); }
.admin-test-result.error   { border-color: rgba(248,81,73,0.25); }

.admin-test-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.admin-test-result-key { color: #687383; }
.admin-test-result-val { color: #c8d3e0; font-weight: 600; font-family: monospace; }
.admin-test-result-val.ok  { color: #27c95a; }
.admin-test-result-val.err { color: #f85149; }

/* ── Section divider ── */
.admin-section-divider {
  height: 1px;
  background: #151d27;
  margin: 4px 0;
}

/* ── Scrollbar ── */
.admin-drawer-body::-webkit-scrollbar,
.admin-modal-body::-webkit-scrollbar { width: 4px; }
.admin-drawer-body::-webkit-scrollbar-thumb,
.admin-modal-body::-webkit-scrollbar-thumb { background: #1e2a38; border-radius: 2px; }

/* ── Institution Threshold Overrides ──────────────────────────────────────── */
.admin-inst-thresh-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-inst-thresh-row {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s;
}

.admin-inst-thresh-row:hover {
  border-color: rgba(255,255,255,0.1);
}

.admin-inst-thresh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.admin-inst-thresh-header:hover {
  background: rgba(255,255,255,0.03);
}

.admin-inst-thresh-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.admin-inst-thresh-body {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}

.admin-inst-thresh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .admin-inst-thresh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-inst-thresh-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-inst-thresh-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #687383;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BACKUP & RESTORE TAB
   ══════════════════════════════════════════════════════════════════════════════ */

/* Danger button variant */
.admin-btn-danger {
  background: #7f1d1d;
  color: #fca5a5;
  border: 1px solid #991b1b;
}
.admin-btn-danger:hover {
  background: #991b1b;
  border-color: #b91c1c;
  color: #fee2e2;
}

/* Section card */
.backup-section {
  background: #0d1320;
  border: 1px solid #1e2d42;
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 0;
}

.backup-section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.backup-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.backup-section-icon.export-icon  { background: rgba(59,142,219,0.15); color: #3b8edb; border: 1px solid rgba(59,142,219,0.3); }
.backup-section-icon.import-icon  { background: rgba(32,167,85,0.15);  color: #20a755; border: 1px solid rgba(32,167,85,0.3); }
.backup-section-icon.history-icon { background: rgba(242,181,29,0.12); color: #f2b51d; border: 1px solid rgba(242,181,29,0.25); }

.backup-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #e8eef8;
  margin-bottom: 5px;
}
.backup-section-desc {
  font-size: 12px;
  color: #687383;
  line-height: 1.6;
  max-width: 640px;
}

/* Divider between sections */
.backup-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #1e2d42 20%, #1e2d42 80%, transparent);
  margin: 28px 0;
}

/* Export checkboxes */
.backup-export-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.backup-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #111827;
  border: 1px solid #1e2d42;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.backup-checkbox-row:hover {
  border-color: #2d4a6e;
  background: #131f30;
}
.backup-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #3b8edb;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.backup-checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.backup-module-name {
  font-size: 13px;
  font-weight: 600;
  color: #c9d1d9;
}
.backup-module-desc {
  font-size: 11px;
  color: #4a5568;
  line-height: 1.4;
}

.backup-export-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.backup-hint {
  font-size: 12px;
  color: #4a5568;
}

/* Drop zone */
.backup-dropzone {
  border: 2px dashed #253650;
  border-radius: 10px;
  background: #0a1020;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 20px;
}
.backup-dropzone:hover,
.backup-dropzone.dragover {
  border-color: #3b8edb;
  background: #0d1a2e;
}
.backup-dropzone-icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.backup-dropzone-text {
  font-size: 14px;
  font-weight: 600;
  color: #8d98a8;
  margin-bottom: 4px;
}
.backup-dropzone-sub {
  font-size: 12px;
  color: #4a5568;
  margin-bottom: 2px;
}
.backup-dropzone-hint {
  font-size: 11px;
  color: #4a5568;
  margin-top: 10px;
  font-family: monospace;
}

/* Preview panel */
.backup-preview {
  background: #111827;
  border: 1px solid #1e2d42;
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 4px;
}
.backup-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.backup-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: #c9d1d9;
}

/* Meta key-value rows */
.backup-preview-meta {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 0;
  margin-bottom: 18px;
  font-size: 12px;
}
.backup-meta-key {
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding-top: 1px;
}
.backup-meta-val {
  color: #8d98a8;
  font-family: monospace;
  word-break: break-all;
}

/* Module summary cards */
.backup-preview-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.backup-module-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d1320;
  border: 1px solid #1e2d42;
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
}
.backup-module-card-icon {
  font-size: 18px;
}
.backup-module-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #c9d1d9;
}
.backup-module-card-desc {
  font-size: 11px;
  color: #4a5568;
}

/* Import options inside preview */
.backup-import-options {
  margin-bottom: 18px;
}

/* Warning banner */
.backup-import-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(242,181,29,0.08);
  border: 1px solid rgba(242,181,29,0.25);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: #c9a227;
  line-height: 1.5;
  margin-bottom: 18px;
}
.backup-warn-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.backup-import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* Export history */
.backup-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.backup-history-empty {
  font-size: 12px;
  color: #4a5568;
  padding: 8px 0;
}
.backup-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #111827;
  border: 1px solid #1e2d42;
  border-radius: 8px;
  padding: 12px 16px;
}
.backup-history-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(59,142,219,0.12);
  color: #3b8edb;
  border: 1px solid rgba(59,142,219,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.backup-history-filename {
  font-size: 12px;
  font-weight: 600;
  color: #c9d1d9;
  font-family: monospace;
  margin-bottom: 2px;
}
.backup-history-meta {
  font-size: 11px;
  color: #4a5568;
}

/* Inline code in backup descriptions */
.backup-section-desc code {
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 11px;
  background: rgba(59,142,219,0.12);
  color: #7ec8f7;
  border: 1px solid rgba(59,142,219,0.2);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Per-tab Save Bar ─────────────────────────────────────────────────────── */
.admin-tab-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(30, 38, 55, 0.7);
  border: 1px solid rgba(99, 120, 160, 0.18);
  border-radius: 8px;
}

.admin-tab-save-hint {
  font-size: 11px;
  color: #687383;
  flex: 1;
}

/* ── Institutions Pagination ─────────────────────────────────────────────── */
#instPagination {
  padding: 12px 0 4px;
}
.inst-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.inst-pagination-info {
  font-size: 12px;
  color: #8d98a8;
  white-space: nowrap;
}
.inst-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.inst-pg-btn {
  background: transparent;
  border: 1px solid #2a3347;
  color: #8d98a8;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 36px;
  text-align: center;
}
.inst-pg-btn:hover:not(:disabled) {
  background: #1e2a3d;
  color: #c8d3e0;
  border-color: #3b4d6b;
}
.inst-pg-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}
.inst-pg-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.inst-pg-ellipsis {
  font-size: 12px;
  color: #4a5568;
  padding: 0 4px;
  user-select: none;
}