/* ====================================================================== */
/* POSuna — Modern UI (Light content + Dark Navbar)                       */
/* ====================================================================== */

/* 0) Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
img, video { max-width: 40%; height: auto; display: block; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
input, button, textarea, select { font: inherit; }

/* 1) Design tokens (base) */
:root {
  /* Page + surfaces */
  --page:      #f5f7fb;  /* page background */
  --surface:   #ffffff;  /* cards/forms/tables */
  --surface-2: #f0f3fa;  /* subtle blocks */
  --line:      #e1e6f0;  /* borders */

  /* Text */
  --ink:     #111827;    /* main text */
  --ink-dim: #4b5563;    /* muted text */

  /* Brand / accents */
  --brand-600: #1e3a8a;
  --brand-500: #2563eb;
  --brand-700: #16326d;

  /* Semantic */
  --danger:    #c62828;
  --danger-700:#b71c1c;
  --success:   #16a34a;
  --warn:      #f59e0b;

  /* Navbar */
  --nav-bg:    #0f1a33;
  --nav-border:#203252;
  --nav-ink:   #e7eefc;
  --nav-ink-d: #cfe0ff;

  /* Radii + space + shadows */
  --r: 12px; --r-lg: 14px; --r-sm: 10px;
  --pad: 16px; --pad-lg: 22px; --gap: 14px; --gap-lg: 22px;
  --shadow-1: 0 8px 18px rgba(15,24,51,.10);
  --shadow-2: 0 18px 40px rgba(15,24,51,.18);

  /* Typography */
  --font: "Segoe UI", Roboto, Arial, sans-serif;

  /* Gallery modal defaults */
  --modalW: 1200px;
  --thumb: 160px;
}

/* 2) Base */
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
}

/* 3) Centered Section/Container */
.form-section,
.container {
  max-width: 1400px;
  margin: 22px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: var(--pad-lg);
}
.container.centered { max-width: 880px; }

/* 4) Headings */
h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--brand-600);
  font-weight: 800;
}
h2 {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--brand-600);
  font-weight: 700;
}
h3 {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.muted { color: var(--ink-dim); }

/* 5) Buttons */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-600);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
button:hover,
.btn:hover {
  transform: translateY(-1px);
  background: var(--brand-500);
}
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-700); }
.btn-success { background: var(--success); }
.btn-ghost {
  background: transparent;
  color: var(--brand-600);
}

/* 6) Inputs & Forms */
label {
  font-weight: 600;
  color: var(--ink);
}
input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #c0c0c0;
  background: #fff;
  color: var(--ink);
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}
.form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.form-table td {
  padding: 6px 8px;
  vertical-align: top;
}

/* 7) Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}
thead th {
  text-align: left;
  padding: 12px;
  background: var(--surface-2);
  color: var(--brand-600);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  font-size: .88rem;
}
tbody td {
  padding: 12px;
  border-top: 1px solid var(--line);
}
tbody tr:nth-child(even) {
  background: #fbfcff;
}

/* 8) Alerts */
.alert {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.alert.success {
  border-color: #90e4a6;
  background: #ecfdf5;
}
.alert.warn {
  border-color: #fde68a;
  background: #fffbeb;
}
.alert.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

/* 9) Modal (system) */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(3,10,24,.45);
  z-index: 9000;
}
.modal.open { display: grid; }
.modal .modal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  width: min(680px, 94vw);
}
.modal .modal-head {
  padding: 14px var(--pad-lg);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal .modal-body {
  padding: var(--pad-lg);
}
.modal .modal-foot {
  padding: 14px var(--pad-lg);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 10) Legacy PO (gold/black) modal (kept for compatibility) */
#modalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9500;
}
#modalOverlay.open { display: block; }
#modalBox {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #ffea00;
  border: 2px solid #ffd700;
  border-radius: 10px;
  width: min(700px, 70vw);
  min-height: 300px;
  padding: 20px;
  box-shadow: 0 0 10px #ffd700;
}
#modalHeader {
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 12px;
  border-bottom: 1px solid #ffd700;
  padding-bottom: 6px;
}
#modalContent {
  max-height: 65vh;
  overflow: auto;
  margin-bottom: 12px;
}
#modalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#modalCloseBtn {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
table.po-list {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  color: #ffea00;
  background: #000;
  border: 1px solid #ffd700;
}
table.po-list th,
table.po-list td {
  border: 1px solid #ffd700;
  padding: 10px;
  text-align: left;
}
table.po-list th {
  background: #0a0a0a;
  font-weight: 800;
}

/* ====================================================================== */
/* NAVBAR                                                                 */
/* ====================================================================== */

#navbar-container {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 6px rgba(2,6,23,.25);
  overflow: visible;
}
#navbar-container .navbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  isolation: isolate;
  position: relative;
}
#navbar-container .business-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--nav-ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
#navbar-container .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--nav-ink);
}

/* Menu row */
#navbar-container .nav-menu {
  flex: 1 1 auto;
  margin: 0 10px;
  min-width: 0;
}
#navbar-container .nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  flex-wrap: nowrap;
}

/* Links */
#navbar-container .nav-menu li { position: relative; }
#navbar-container .nav-menu a,
#navbar-container .nav-menu .menu-btn {
  display: block;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--nav-ink);
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
#navbar-container .nav-menu a:hover,
#navbar-container .nav-menu .menu-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--nav-ink-d);
}

/* Active link helper */
#navbar-container .nav-menu a.active {
  color: var(--nav-ink-d);
  box-shadow: inset 0 -3px 0 var(--brand-500);
}

/* First-level dropdown */
#navbar-container .nav-menu .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  padding: 6px 0;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(2,6,23,.45);
  z-index: 10002;
}
#navbar-container .nav-menu li:hover > .dropdown { display: block; }
#navbar-container .nav-menu .dropdown a {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0 6px;
}
#navbar-container .nav-menu .dropdown a:hover {
  background: rgba(255,255,255,.08);
  color: var(--nav-ink-d);
}

/* Nested submenus (flyout) */
#navbar-container .has-submenu { position: relative; }
#navbar-container .has-submenu > .submenu {
  display: none;
  position: absolute;
  top: 0; left: 100%;
  min-width: 200px;
  padding: 6px 0;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(2,6,23,.45);
  z-index: 10003;
}
#navbar-container .has-submenu:hover > .submenu { display: block; }

/* Right-side buttons */
#navbar-container .return-admin-btn,
#navbar-container .logout-btn {
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
#navbar-container .return-admin-btn { background: var(--brand-600); }
#navbar-container .return-admin-btn:hover { background: var(--brand-700); }
#navbar-container .logout-btn { background: var(--danger); }
#navbar-container .logout-btn:hover { background: var(--danger-700); }

/* Responsive navbar tweaks */
@media (max-width: 1200px) {
  #navbar-container .nav-menu a,
  #navbar-container .nav-menu .menu-btn {
    padding: 8px 10px;
    font-size: .92rem;
  }
}
@media (max-width: 980px) {
  #navbar-container .nav-menu ul { flex-wrap: wrap; }
  #navbar-container .nav-menu { margin: 0 6px; }
}

/* ====================================================================== */
/* SETTINGS PAGE LAYOUT                                                   */
/* ====================================================================== */

.settings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
@media (max-width: 1000px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-nav {
  position: sticky;
  top: 82px;
  align-self: start;
}
.settings-nav nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tab-link {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}
.tab-link:hover { background: #eef2ff; }
.tab-link.active {
  background: #dce7ff;
  border-color: #c9dcff;
  color: #0f1a33;
}
.tab-link.danger { color: #8b0000; }

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Theme chooser UI (matches settings.html: #themeList.theme-list) */
.theme-list,
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.theme-card input { margin-right: 8px; }
.theme-card .swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}
.theme-card .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
}
.theme-card .theme-name {
  font-weight: 700;
  color: var(--ink);
}

/* Repeatable list/table */
.repeatable .rows tr td { vertical-align: middle; }
.repeatable .row-actions .btn {
  padding: 6px 10px;
}

/* Danger zone card */
.danger-zone { border-color: #fecaca; }

/* ====================================================================== */
/* SUPERADMIN TOP BAR                                                     */
/* ====================================================================== */

.superadmin-wrapper {
  width: 100%;
  background: var(--nav-bg, #0f1a33);
  border-bottom: 1px solid var(--line, #e6e9f3);
  box-shadow: var(--shadow-1, 0 2px 8px rgba(16,24,40,.08));
  margin: 0;
}
.superadmin-navbar {
  max-width: 90%;
  margin: 0 auto;
  padding: 10px 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.superadmin-navbar .nav-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.superadmin-navbar .nav-left .brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.superadmin-navbar .nav-left .brand img {
  height: 50px;
  width: 100px;
  display: block;
}
.superadmin-navbar .nav-left a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #e7eefc;
  background: transparent;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.superadmin-navbar .nav-left a:hover {
  background: #1b2744;
  color: #ffffff;
}
.superadmin-navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.superadmin-navbar button {
  appearance: none;
  border: 1px solid var(--line, #c9d2ec);
  background: var(--surface-2, #eef2ff);
  color: var(--ink, #0f172a);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.superadmin-navbar button:hover {
  background: #e2e8ff;
  border-color: #c0cdfc;
  transform: translateY(-1px);
}
@media (min-width: 1100px) {
  .superadmin-navbar .nav-left { gap: 16px; }
}
@media (max-width: 720px) {
  .superadmin-navbar {
    flex-wrap: wrap;
    padding: 10px 16px;
  }
  .superadmin-navbar .nav-left {
    order: 2;
    width: 100%;
    gap: 6px;
  }
  .superadmin-navbar .nav-right {
    order: 1;
    margin-left: auto;
  }
}

/* ====================================================================== */
/* AUTH (Login / Reset)                                                   */
/* ====================================================================== */

.container--auth {
  width: 100%;
  max-width: 420px;
  margin: 8vh auto 0;
  padding: 24px;
  border: 1px solid var(--line, #e6e9f3);
  border-radius: 14px;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(16,24,40,.08));
}
.container--auth h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink, #111827);
}
.form-group { margin-bottom: 16px; }
.form-label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ink, #111827);
}
.form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line, #c9d2ec);
  border-radius: 10px;
  background: var(--surface-2, #f7f9ff);
  color: var(--ink, #0f172a);
}
.btn-primary {
  display: inline-block;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  margin-block: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
}
.container--auth .link {
  display: block;
  margin: 8px 0 10px;
  text-align: center;
}
.superadmin-btn {
  margin-top: 8px;
  width: 100%;
}

/* Match auth layout when wrapped in generic .container */
.container:has(#loginForm) {
  max-width: 420px;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid var(--line, #e6e9f3);
  border-radius: 14px;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(16,24,40,.08));
}

/* ====================================================================== */
/* WELCOME / LANDING                                                      */
/* ====================================================================== */

.welcome-hero {
  min-height: 90dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(14,165,233,.18), transparent 55%),
    var(--surface, #ffffff);
}
.welcome-card {
  width: 100%;
  max-width: 980px;
  padding: 28px;
  border: 1px solid var(--line, #e6e9f3);
  border-radius: 16px;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(16,24,40,.08));
  text-align: center;
}
.welcome-card .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink, #0f172a);
  margin: 0 0 6px;
}
.welcome-card .lead {
  color: var(--muted, #475569);
  margin: 0 0 18px;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.btn-secondary {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--line, #c9d2ec);
  border-radius: 10px;
  background: var(--surface-2, #f7f9ff);
  color: var(--ink, #0f172a);
  font-weight: 700;
  text-decoration: none;
  min-width: 160px;
  text-align: center;
}
.btn-secondary:hover {
  background: #e9efff;
  border-color: #c0cdfc;
}

/* Rotate overlay */
#rotateOverlay[hidden] { display: none !important; }
#rotateOverlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.65);
  backdrop-filter: blur(2px);
}
.rotate-card {
  width: min(92vw, 520px);
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--line, #e6e9f3);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-2, 0 12px 32px rgba(16,24,40,.18));
}
.rotate-card p {
  margin: 8px 0 0;
  color: var(--muted, #475569);
}
body.noscroll { overflow: hidden; }

/* Welcome illustration layout */
.welcome-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}
.welcome-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-illustration { display: none; }
}

/* Inline SVG icons sizing */
.report-link .report-icon {
  width: 84px;
  height: 84px;
  display: block;
}
@media (max-width: 700px) {
  .report-link .report-icon {
    width: 72px;
    height: 72px;
  }
}

/* ====================================================================== */
/* GALLERY / IMAGE MODALS                                                 */
/* ====================================================================== */

/* New gallery modal (#galleryModal) */
#galleryModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
#galleryModal[aria-hidden="false"] { display: flex; }
#galleryModal .gallery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}
#galleryModal .gallery-content {
  position: relative;
  width: min(95vw, var(--modalW));
  max-height: min(90vh, 900px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#galleryModal .gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e8eef5;
  background: #f9fbfd;
}
#galleryModal .close-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d50000;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  font-size: 18px;
}
#galleryModal .tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0 16px;
}
#galleryModal .tab-btn {
  border: 1px solid #d6deea;
  background: #000080;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
}
#galleryModal .tab-btn.active {
  background: #c0c0c0;
  color: #fff;
  border-color: #0b1c2c;
}
#galleryModal .gallery-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px dashed #e8eef5;
}
#galleryModal .gallery-tip {
  margin: 10px 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef5ff;
  border: 1px solid #cfe3ff;
  color: #22324f;
}
#galleryModal .gallery-body {
  overflow: auto;
  padding: 14px 16px 18px;
  min-height: 300px;
}
#galleryImages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr));
  gap: 14px;
}
#galleryImages img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  background: #f3f4f6;
}
#galleryImages img:hover { border-color: #0b1c2c; }
#galleryModal select {
  min-height: 38px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 6px 10px;
}

/* Older gallery modal (.gallery-modal) retained if still used */
.gallery-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
.gallery-content {
  width: min(1100px, 96vw);
  max-height: 88vh;
  background: var(--surface-2, #1e2330);
  color: var(--text, #e7edf5);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gallery-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2, #1e2330);
  border-bottom: 1px solid var(--line-2, #2f3848);
}
.tabs { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2, #2f3848);
  background: var(--surface-1, #161b22);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tab.active {
  background: var(--brand-700, #2b59ff);
  border-color: var(--brand-700, #2b59ff);
  color: #fff;
}
.close-x {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-2, #2f3848);
  background: #e91616 !important;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tab-body {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 18px;
}
.tab-body.active { display: block; }
.body-controls {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 12px;
  margin-bottom: 10px;
  background: inherit;
  border-bottom: 1px solid var(--line-2, #2f3848);
}
.control label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: .9;
}
.control select {
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-3, #3a4556);
  background: var(--surface-1, #161b22);
  color: var(--text, #e7edf5);
}
.help-tips {
  margin: 12px 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground, #a8b3c7);
  background: var(--surface-1, #161b22);
  border: 1px dashed var(--line-2, #2f3848);
  border-radius: 12px;
}
.help-tips strong { color: var(--brand-300, #bcd1ff); }
.help-tips kbd {
  font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid var(--line-3, #3a4556);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .05em .4em;
  background: var(--surface-2, #1e2330);
}
.images-grid {
  --thumb-h: 120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  align-content: start;
}
.images-grid img {
  width: 10%;
  height: 20%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--line-3, #3a4556);
  background: var(--surface-1, #131820);
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease;
}
.images-grid img:hover {
  transform: translateY(-1px);
  border-color: var(--brand-600, #4a72ff);
}
.tab-body::-webkit-scrollbar { width: 10px; }
.tab-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--line-3,#3a4556) 65%, transparent);
  border-radius: 10px;
}
.tab-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--brand-600,#4a72ff) 40%, #3a4556);
}
#selectedImagePreview img {
  max-height: 80px;
  max-width: 80px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* ====================================================================== */
/* PERMISSIONS GRID                                                       */
/* ====================================================================== */

#permList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 1rem;
}
.perm-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e1e6f0);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-1, 0 4px 12px rgba(0,0,0,0.05));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease;
}
.perm-card:hover { transform: translateY(-3px); }
.perm-head h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--brand-600, #1e3a8a);
}
.perm-desc {
  font-size: 0.9rem;
  color: #374151;
  margin: 8px 0 12px;
}
.perm-allow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink, #111827);
}
.perm-allow input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}

/* Actions buttons (edit/delete) */
.actions,
td.actions {
  display: flex !important;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
td.actions .btn-edit,
td.actions .btn-del,
.actions .btn-edit,
.actions .btn-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  height: 40px;
  min-width: 110px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn-edit { background-color: #008000 !important; }
.btn-edit:hover { background: #008040; }
.btn-del { background: #f10e0e; }
.btn-del:hover { background: #ff0f0f; }
.actions button.danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #fecaca;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.actions button.danger:hover { background: #b91c1c; }
.actions button.danger:focus-visible {
  outline: 2px solid #fecaca;
  outline-offset: 2px;
}
.actions button.danger:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ====================================================================== */
/* THEME PACKS (data-theme="...")                                         */
/* ====================================================================== */
/* These override the base tokens and drive the navbar + page look        */

/* NAVY (Default) */
:root[data-theme="navy"] {
  --page:      #f5f7fb;
  --surface:   #ffffff;
  --surface-2: #f0f3fa;
  --line:      #e1e6f0;

  --ink:       #111827;
  --ink-dim:   #4b5563;

  --brand-600: #1e3a8a;
  --brand-500: #2563eb;
  --brand-700: #16326d;

  --nav-bg:    #0f1a33;
  --nav-border:#203252;
  --nav-ink:   #e7eefc;
  --nav-ink-d: #cfe0ff;
}

/* SLATE */
:root[data-theme="slate"] {
  --page:      #f3f4f6;
  --surface:   #ffffff;
  --surface-2: #f3f4f6;
  --line:      #e5e7eb;

  --ink:       #0f172a;
  --ink-dim:   #475569;

  --brand-600: #334155;
  --brand-500: #475569;
  --brand-700: #1f2937;

  --nav-bg:    #0f172a;
  --nav-border:#1f2a3a;
  --nav-ink:   #e5e7eb;
  --nav-ink-d: #f1f5f9;
}

/* EMERALD */
:root[data-theme="emerald"] {
  --page:      #f0fdf4;
  --surface:   #ffffff;
  --surface-2: #ecfdf5;
  --line:      #dcfce7;

  --ink:       #052e26;
  --ink-dim:   #065f46;

  --brand-600: #059669;
  --brand-500: #10b981;
  --brand-700: #047857;

  --nav-bg:    #064e3b;
  --nav-border:#0b6b54;
  --nav-ink:   #e7f9f3;
  --nav-ink-d: #c7ffee;
}

/* VIOLET */
:root[data-theme="violet"] {
  --page:      #f6f4ff;
  --surface:   #ffffff;
  --surface-2: #f3e8ff;
  --line:      #e9d5ff;

  --ink:       #1a1033;
  --ink-dim:   #4c1d95;

  --brand-600: #6d28d9;
  --brand-500: #8b5cf6;
  --brand-700: #5b21b6;

  --nav-bg:    #29104d;
  --nav-border:#3f1a73;
  --nav-ink:   #efe9ff;
  --nav-ink-d: #ffffff;
}

/* LIGHT (Blue nav) */
:root[data-theme="light"] {
  --page:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f7fafc;
  --line:      #e5e7eb;

  --ink:       #111827;
  --ink-dim:   #4b5563;

  --brand-600: #1e3a8a;
  --brand-500: #2563eb;
  --brand-700: #16326d;

  --nav-bg:    #0f1a33;
  --nav-border:#203252;
  --nav-ink:   #e7eefc;
  --nav-ink-d: #cfe0ff;
}

/* HIGH CONTRAST */
:root[data-theme="contrast"] {
  --page:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --line:      #000000;

  --ink:       #000000;
  --ink-dim:   #111111;

  --brand-600: #000000;
  --brand-500: #111111;
  --brand-700: #000000;

  --nav-bg:    #000000;
  --nav-border:#000000;
  --nav-ink:   #ffffff;
  --nav-ink-d: #ffffff;
}

/* SUNSET */
:root[data-theme="sunset"] {
  --page:      #fde68a;
  --surface:   #fff7ed;
  --surface-2: #fed7aa;
  --line:      #ea580c;

  --ink:       #2d1b1b;
  --ink-dim:   #7c2d12;

  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #b91c1c;

  --nav-bg:    #2d1b1b;
  --nav-border:#b91c1c;
  --nav-ink:   #fefce8;
  --nav-ink-d: #fee9b2;
}

/* FOREST */
:root[data-theme="forest"] {
  --page:      #ecfdf3;
  --surface:   #ffffff;
  --surface-2: #dcfce7;
  --line:      #16a34a;

  --ink:       #0b1f0b;
  --ink-dim:   #166534;

  --brand-500: #22c55e;
  --brand-600: #16a34a;
  --brand-700: #166534;

  --nav-bg:    #0b1f0b;
  --nav-border:#166534;
  --nav-ink:   #dcfce7;
  --nav-ink-d: #bbf7d0;
}

/* ROSE */
:root[data-theme="rose"] {
  --page:      #ffe4e6;
  --surface:   #fff1f2;
  --surface-2: #fecdd3;
  --line:      #be123c;

  --ink:       #3b0a0a;
  --ink-dim:   #9f1239;

  --brand-500: #f43f5e;
  --brand-600: #e11d48;
  --brand-700: #be123c;

  --nav-bg:    #3b0a0a;
  --nav-border:#be123c;
  --nav-ink:   #ffe4e6;
  --nav-ink-d: #fecdd3;
}

/* AQUA */
:root[data-theme="aqua"] {
  --page:      #ecfeff;
  --surface:   #ffffff;
  --surface-2: #cffafe;
  --line:      #0d9488;

  --ink:       #022c22;
  --ink-dim:   #0f766e;

  --brand-500: #06b6d4;
  --brand-600: #0d9488;
  --brand-700: #115e59;

  --nav-bg:    #022c22;
  --nav-border:#0d9488;
  --nav-ink:   #ecfeff;
  --nav-ink-d: #bae6fd;
}

/* AMBER */
:root[data-theme="amber"] {
  --page:      #fffbeb;
  --surface:   #fff7e6;
  --surface-2: #fef3c7;
  --line:      #b45309;

  --ink:       #2a1a00;
  --ink-dim:   #92400e;

  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-700: #b45309;

  --nav-bg:    #2a1a00;
  --nav-border:#b45309;
  --nav-ink:   #fef3c7;
  --nav-ink-d: #fed7aa;
}

/* STEEL */
:root[data-theme="steel"] {
  --page:      #f3f4f6;
  --surface:   #ffffff;
  --surface-2: #e5e7eb;
  --line:      #d1d5db;

  --ink:       #111827;
  --ink-dim:   #4b5563;

  --brand-500: #60a5fa;
  --brand-600: #3b82f6;
  --brand-700: #1d4ed8;

  --nav-bg:    #111827;
  --nav-border:#374151;
  --nav-ink:   #e5e7eb;
  --nav-ink-d: #f9fafb;
}

/* MINT */
:root[data-theme="mint"] {
  --page:      #ecfdf5;
  --surface:   #ffffff;
  --surface-2: #d1fae5;
  --line:      #0d9488;

  --ink:       #0f2f24;
  --ink-dim:   #0f766e;

  --brand-500: #5eead4;
  --brand-600: #14b8a6;
  --brand-700: #0f766e;

  --nav-bg:    #0f2f24;
  --nav-border:#0d9488;
  --nav-ink:   #ecfdf5;
  --nav-ink-d: #d1fae5;
}

/* GRAPE */
:root[data-theme="grape"] {
  --page:      #f5f3ff;
  --surface:   #ffffff;
  --surface-2: #e9d5ff;
  --line:      #7c3aed;

  --ink:       #2b0a3d;
  --ink-dim:   #6d28d9;

  --brand-500: #a78bfa;
  --brand-600: #8b5cf6;
  --brand-700: #6d28d9;

  --nav-bg:    #2b0a3d;
  --nav-border:#6d28d9;
  --nav-ink:   #f5f3ff;
  --nav-ink-d: #e9d5ff;
}

/* SAND */
:root[data-theme="sand"] {
  --page:      #fefae0;
  --surface:   #fffaf0;
  --surface-2: #f5e0b8;
  --line:      #d6a86b;

  --ink:       #3a2f1b;
  --ink-dim:   #7c4a33;

  --brand-500: #d4a373;
  --brand-600: #b67b3f;
  --brand-700: #7c4a33;

  --nav-bg:    #3a2f1b;
  --nav-border:#7c4a33;
  --nav-ink:   #fefae0;
  --nav-ink-d: #f5e0b8;
}

/* SKY */
:root[data-theme="sky"] {
  --page:      #e0f2fe;
  --surface:   #ffffff;
  --surface-2: #bae6fd;
  --line:      #0284c7;

  --ink:       #0c1e33;
  --ink-dim:   #0369a1;

  --brand-500: #38bdf8;
  --brand-600: #0ea5e9;
  --brand-700: #0369a1;

  --nav-bg:    #0c1e33;
  --nav-border:#0369a1;
  --nav-ink:   #e0f2fe;
  --nav-ink-d: #bae6fd;
}

/* ====================================================================== */
/* EXTRA THEME PACKS (append-only)                                         */
/* ====================================================================== */

/* EMERALD */
:root[data-theme="emerald"] {
  --page:      #ecfdf5;
  --surface:   #ffffff;
  --surface-2: #d1fae5;
  --line:      #a7f3d0;

  --ink:       #05211d;
  --ink-dim:   #065f46;

  --brand-600: #065f46;
  --brand-500: #10b981;
  --brand-700: #064e3b;

  --nav-bg:    #05211d;
  --nav-border:#0b3b2f;
  --nav-ink:   #ecfdf5;
  --nav-ink-d: #d1fae5;
}

/* FOREST */
:root[data-theme="forest"] {
  --page:      #f0fdf4;
  --surface:   #ffffff;
  --surface-2: #dcfce7;
  --line:      #bbf7d0;

  --ink:       #062012;
  --ink-dim:   #166534;

  --brand-600: #166534;
  --brand-500: #22c55e;
  --brand-700: #14532d;

  --nav-bg:    #062012;
  --nav-border:#123a22;
  --nav-ink:   #f0fdf4;
  --nav-ink-d: #dcfce7;
}

/* GRAPE */
:root[data-theme="grape"] {
  --page:      #faf5ff;
  --surface:   #ffffff;
  --surface-2: #f3e8ff;
  --line:      #e9d5ff;

  --ink:       #12031a;
  --ink-dim:   #6b21a8;

  --brand-600: #6b21a8;
  --brand-500: #a855f7;
  --brand-700: #581c87;

  --nav-bg:    #12031a;
  --nav-border:#2a0a3b;
  --nav-ink:   #faf5ff;
  --nav-ink-d: #f3e8ff;
}

/* LAVENDER */
:root[data-theme="lavender"] {
  --page:      #f5f3ff;
  --surface:   #ffffff;
  --surface-2: #ede9fe;
  --line:      #ddd6fe;

  --ink:       #120a22;
  --ink-dim:   #5b21b6;

  --brand-600: #5b21b6;
  --brand-500: #8b5cf6;
  --brand-700: #4c1d95;

  --nav-bg:    #120a22;
  --nav-border:#241044;
  --nav-ink:   #f5f3ff;
  --nav-ink-d: #ede9fe;
}

/* MIDNIGHT */
:root[data-theme="midnight"] {
  --page:      #e0f2fe;
  --surface:   #ffffff;
  --surface-2: #bae6fd;
  --line:      #7dd3fc;

  --ink:       #04121c;
  --ink-dim:   #075985;

  --brand-600: #075985;
  --brand-500: #0ea5e9;
  --brand-700: #0c4a6e;

  --nav-bg:    #04121c;
  --nav-border:#0b2a3d;
  --nav-ink:   #e0f2fe;
  --nav-ink-d: #bae6fd;
}

/* MONO (clean black/white) */
:root[data-theme="mono"] {
  --page:      #f7f7f7;
  --surface:   #ffffff;
  --surface-2: #f1f1f1;
  --line:      #e5e5e5;

  --ink:       #0a0a0a;
  --ink-dim:   #3f3f3f;

  --brand-600: #111111;
  --brand-500: #111111;
  --brand-700: #000000;

  --nav-bg:    #0a0a0a;
  --nav-border:#1f1f1f;
  --nav-ink:   #ffffff;
  --nav-ink-d: #e5e5e5;
}

/* CITRUS */
:root[data-theme="citrus"] {
  --page:      #fffbeb;
  --surface:   #ffffff;
  --surface-2: #fef3c7;
  --line:      #fde68a;

  --ink:       #201304;
  --ink-dim:   #92400e;

  --brand-600: #92400e;
  --brand-500: #f59e0b;
  --brand-700: #78350f;

  --nav-bg:    #201304;
  --nav-border:#3b2508;
  --nav-ink:   #fffbeb;
  --nav-ink-d: #fef3c7;
}

/* RUBY */
:root[data-theme="ruby"] {
  --page:      #fff1f2;
  --surface:   #ffffff;
  --surface-2: #ffe4e6;
  --line:      #fecdd3;

  --ink:       #2a0711;
  --ink-dim:   #9f1239;

  --brand-600: #9f1239;
  --brand-500: #fb7185;
  --brand-700: #881337;

  --nav-bg:    #2a0711;
  --nav-border:#4b0f1e;
  --nav-ink:   #fff1f2;
  --nav-ink-d: #ffe4e6;
}

/* AMBER */
:root[data-theme="amber"] {
  --page:      #fffbeb;
  --surface:   #ffffff;
  --surface-2: #fef3c7;
  --line:      #fcd34d;

  --ink:       #1f1406;
  --ink-dim:   #92400e;

  --brand-600: #92400e;
  --brand-500: #fbbf24;
  --brand-700: #78350f;

  --nav-bg:    #1f1406;
  --nav-border:#3a260b;
  --nav-ink:   #fffbeb;
  --nav-ink-d: #fef3c7;
}
/* ====================================================================== */
/* BACK OFFICE THEMES — chips + theme packs (paste at END of styles.css)   */
/* ====================================================================== */

/* Chips container (if not already defined elsewhere) */
.theme-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Chip base */
.theme-chip{
  appearance:none;
  border:0;
  cursor:pointer;
  border-radius:14px;
  padding:14px 18px;
  min-width: 260px;
  text-align:center;
  font-weight: 900;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease, outline-color .12s ease;
}

/* Hover */
.theme-chip:hover{
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.02);
}

/* Active */
.theme-chip.active,
.theme-chip[aria-pressed="true"]{
  outline: 4px solid rgba(254,196,0,.55);
  box-shadow: 0 0 0 3px rgba(0,60,118,.18), 0 12px 24px rgba(0,0,0,.12);
}

/* ? Chip colours per theme id */
.theme-chip[data-theme="navy"]      { background:#1e3a8a; color:#ffffff; }
.theme-chip[data-theme="sky"]       { background:#0ea5e9; color:#06233a; }
.theme-chip[data-theme="sunset"]    { background:#fb923c; color:#2a1406; }
.theme-chip[data-theme="aqua"]      { background:#14b8a6; color:#05211d; }
.theme-chip[data-theme="rose"]      { background:#fb7185; color:#2a0b12; }
.theme-chip[data-theme="sandstone"] { background:#e7c69b; color:#2a1e10; }
.theme-chip[data-theme="cyberpunk"] { background:#0b0b16; color:#fef3c7; }

.theme-chip[data-theme="slate"]     { background:#0f172a; color:#e7edf5; }
.theme-chip[data-theme="emerald"]   { background:#10b981; color:#05211d; }
.theme-chip[data-theme="forest"]    { background:#22c55e; color:#062012; }
.theme-chip[data-theme="grape"]     { background:#a855f7; color:#12031a; }
.theme-chip[data-theme="lavender"]  { background:#8b5cf6; color:#120a22; }
.theme-chip[data-theme="midnight"]  { background:#0ea5e9; color:#04121c; }
.theme-chip[data-theme="mono"]      { background:#111111; color:#ffffff; }
.theme-chip[data-theme="citrus"]    { background:#f59e0b; color:#201304; }
.theme-chip[data-theme="ruby"]      { background:#fb7185; color:#2a0711; }
.theme-chip[data-theme="amber"]     { background:#fbbf24; color:#1f1406; }

/* ====================================================================== */
/* Theme packs (what the rest of the dashboard uses)                       */
/* Keep token names aligned with your existing system vars.                */
/* If your base uses --page/--surface/--line/--ink/--brand-*, this works.   */
/* ====================================================================== */

:root[data-theme="navy"]{
  --page:#f5f7fb; --surface:#ffffff; --surface-2:#e7eefc; --line:#c9d2ec;
  --ink:#0f172a; --ink-dim:#475569;
  --brand-500:#2563eb; --brand-600:#1e3a8a; --brand-700:#16326d;
  --nav-bg:#0f1a33; --nav-border:#203252; --nav-ink:#e7eefc; --nav-ink-d:#cfe0ff;
}

:root[data-theme="sky"]{
  --page:#e0f2fe; --surface:#ffffff; --surface-2:#bae6fd; --line:#7dd3fc;
  --ink:#0c1e33; --ink-dim:#0369a1;
  --brand-500:#38bdf8; --brand-600:#0ea5e9; --brand-700:#0369a1;
  --nav-bg:#0c1e33; --nav-border:#0369a1; --nav-ink:#e0f2fe; --nav-ink-d:#bae6fd;
}

:root[data-theme="sunset"]{
  --page:#fff7ed; --surface:#ffffff; --surface-2:#ffedd5; --line:#fed7aa;
  --ink:#2d1b1b; --ink-dim:#7c2d12;
  --brand-500:#fb923c; --brand-600:#ea580c; --brand-700:#c2410c;
  --nav-bg:#2d1b1b; --nav-border:#7c2d12; --nav-ink:#fff7ed; --nav-ink-d:#ffedd5;
}

:root[data-theme="aqua"]{
  --page:#ecfeff; --surface:#ffffff; --surface-2:#cffafe; --line:#99f6e4;
  --ink:#05211d; --ink-dim:#0f766e;
  --brand-500:#14b8a6; --brand-600:#0f766e; --brand-700:#115e59;
  --nav-bg:#05211d; --nav-border:#0f766e; --nav-ink:#ecfeff; --nav-ink-d:#cffafe;
}

:root[data-theme="rose"]{
  --page:#fff1f2; --surface:#ffffff; --surface-2:#ffe4e6; --line:#fecdd3;
  --ink:#2a0b12; --ink-dim:#9f1239;
  --brand-500:#fb7185; --brand-600:#e11d48; --brand-700:#9f1239;
  --nav-bg:#2a0b12; --nav-border:#9f1239; --nav-ink:#fff1f2; --nav-ink-d:#ffe4e6;
}

:root[data-theme="sandstone"]{
  --page:#fefae0; --surface:#fffaf0; --surface-2:#f5e0b8; --line:#e7c69b;
  --ink:#3a2f1b; --ink-dim:#7c4a33;
  --brand-500:#d4a373; --brand-600:#b67b3f; --brand-700:#7c4a33;
  --nav-bg:#3a2f1b; --nav-border:#7c4a33; --nav-ink:#fefae0; --nav-ink-d:#f5e0b8;
}

:root[data-theme="cyberpunk"]{
  --page:#070712; --surface:#0b0b16; --surface-2:#111127; --line:#2a2a4a;
  --ink:#fef3c7; --ink-dim:#f5d0fe;
  --brand-500:#f472b6; --brand-600:#a855f7; --brand-700:#22d3ee;
  --nav-bg:#0b0b16; --nav-border:#2a2a4a; --nav-ink:#fef3c7; --nav-ink-d:#f5d0fe;
}

:root[data-theme="slate"]{
  --page:#0b1220; --surface:#0f172a; --surface-2:#111c33; --line:#22304a;
  --ink:#e7edf5; --ink-dim:#a8b3c7;
  --brand-500:#60a5fa; --brand-600:#3b82f6; --brand-700:#1d4ed8;
  --nav-bg:#0f172a; --nav-border:#22304a; --nav-ink:#e7edf5; --nav-ink-d:#b8c3d7;
}

:root[data-theme="emerald"]{
  --page:#ecfdf5; --surface:#ffffff; --surface-2:#d1fae5; --line:#a7f3d0;
  --ink:#05211d; --ink-dim:#065f46;
  --brand-500:#34d399; --brand-600:#10b981; --brand-700:#047857;
  --nav-bg:#05211d; --nav-border:#0b3b2f; --nav-ink:#ecfdf5; --nav-ink-d:#d1fae5;
}

:root[data-theme="forest"]{
  --page:#f0fdf4; --surface:#ffffff; --surface-2:#dcfce7; --line:#bbf7d0;
  --ink:#062012; --ink-dim:#166534;
  --brand-500:#22c55e; --brand-600:#16a34a; --brand-700:#15803d;
  --nav-bg:#062012; --nav-border:#123a22; --nav-ink:#f0fdf4; --nav-ink-d:#dcfce7;
}

:root[data-theme="grape"]{
  --page:#faf5ff; --surface:#ffffff; --surface-2:#f3e8ff; --line:#e9d5ff;
  --ink:#12031a; --ink-dim:#6b21a8;
  --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce;
  --nav-bg:#12031a; --nav-border:#2a0a3b; --nav-ink:#faf5ff; --nav-ink-d:#f3e8ff;
}

:root[data-theme="lavender"]{
  --page:#f5f3ff; --surface:#ffffff; --surface-2:#ede9fe; --line:#ddd6fe;
  --ink:#120a22; --ink-dim:#5b21b6;
  --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#5b21b6;
  --nav-bg:#120a22; --nav-border:#241044; --nav-ink:#f5f3ff; --nav-ink-d:#ede9fe;
}

:root[data-theme="midnight"]{
  --page:#e0f2fe; --surface:#ffffff; --surface-2:#bae6fd; --line:#7dd3fc;
  --ink:#04121c; --ink-dim:#075985;
  --brand-500:#38bdf8; --brand-600:#0ea5e9; --brand-700:#0c4a6e;
  --nav-bg:#04121c; --nav-border:#0b2a3d; --nav-ink:#e0f2fe; --nav-ink-d:#bae6fd;
}

:root[data-theme="mono"]{
  --page:#f7f7f7; --surface:#ffffff; --surface-2:#f1f1f1; --line:#e5e5e5;
  --ink:#0a0a0a; --ink-dim:#3f3f3f;
  --brand-500:#111111; --brand-600:#111111; --brand-700:#000000;
  --nav-bg:#0a0a0a; --nav-border:#1f1f1f; --nav-ink:#ffffff; --nav-ink-d:#e5e5e5;
}

:root[data-theme="citrus"]{
  --page:#fffbeb; --surface:#ffffff; --surface-2:#fef3c7; --line:#fde68a;
  --ink:#201304; --ink-dim:#92400e;
  --brand-500:#f59e0b; --brand-600:#d97706; --brand-700:#b45309;
  --nav-bg:#201304; --nav-border:#3b2508; --nav-ink:#fffbeb; --nav-ink-d:#fef3c7;
}

:root[data-theme="ruby"]{
  --page:#fff1f2; --surface:#ffffff; --surface-2:#ffe4e6; --line:#fecdd3;
  --ink:#2a0711; --ink-dim:#9f1239;
  --brand-500:#fb7185; --brand-600:#e11d48; --brand-700:#9f1239;
  --nav-bg:#2a0711; --nav-border:#4b0f1e; --nav-ink:#fff1f2; --nav-ink-d:#ffe4e6;
}

:root[data-theme="amber"]{
  --page:#fffbeb; --surface:#ffffff; --surface-2:#fef3c7; --line:#fcd34d;
  --ink:#1f1406; --ink-dim:#92400e;
  --brand-500:#fbbf24; --brand-600:#f59e0b; --brand-700:#b45309;
  --nav-bg:#1f1406; --nav-border:#3a260b; --nav-ink:#fffbeb; --nav-ink-d:#fef3c7;
}
/* ====================================================================== */
/* BACK OFFICE THEME CHIPS (merged from settings-page.css + extended)      */
/* Keeps nav stable: uses existing --nav-* tokens already referenced        */
/* ====================================================================== */

/* settings.html uses: <div id="themeList" class="theme-list"></div> */
.theme-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.theme-chip{
  border-radius:999px;
  padding:6px 12px;
  border:1px solid var(--line, #e6e9f3);
  background: var(--surface-2, #f3f4f6);
  cursor:pointer;
  font-size:0.9rem;
  text-transform:capitalize;
  font-weight:800;
  opacity:1;
  filter:saturate(1.15);
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}

.theme-chip[data-theme]{
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-color: rgba(15,23,42,.15);
}

.theme-chip:hover{
  filter:saturate(1.5);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.theme-chip.is-active,
.theme-chip[aria-pressed="true"]{
  outline: 3px solid rgba(254,196,0,.55);
  box-shadow: 0 0 0 3px rgba(0,60,118,.12);
}

/* Chip palette (per theme) */
.theme-chip[data-theme="navy"]      { --chip-bg:#0b1b3a; --chip-fg:#ffffff; }
.theme-chip[data-theme="sky"]       { --chip-bg:#0ea5e9; --chip-fg:#06233a; }
.theme-chip[data-theme="sunset"]    { --chip-bg:#fb923c; --chip-fg:#2a1406; }
.theme-chip[data-theme="aqua"]      { --chip-bg:#14b8a6; --chip-fg:#05211d; }
.theme-chip[data-theme="rose"]      { --chip-bg:#fb7185; --chip-fg:#2a0b12; }
.theme-chip[data-theme="sandstone"] { --chip-bg:#e7c69b; --chip-fg:#2a1e10; }
.theme-chip[data-theme="cyberpunk"] { --chip-bg:#0b0b16; --chip-fg:#fef3c7; }
.theme-chip[data-theme="slate"]     { --chip-bg:#0f172a; --chip-fg:#e7edf5; }
.theme-chip[data-theme="emerald"]   { --chip-bg:#065f46; --chip-fg:#ecfdf5; }
.theme-chip[data-theme="forest"]    { --chip-bg:#166534; --chip-fg:#f0fdf4; }
.theme-chip[data-theme="grape"]     { --chip-bg:#6b21a8; --chip-fg:#faf5ff; }
.theme-chip[data-theme="lavender"]  { --chip-bg:#5b21b6; --chip-fg:#f5f3ff; }
.theme-chip[data-theme="midnight"]  { --chip-bg:#0c4a6e; --chip-fg:#e0f2fe; }
.theme-chip[data-theme="mono"]      { --chip-bg:#111111; --chip-fg:#ffffff; }
.theme-chip[data-theme="citrus"]    { --chip-bg:#f59e0b; --chip-fg:#201304; }
.theme-chip[data-theme="ruby"]      { --chip-bg:#9f1239; --chip-fg:#fff1f2; }
.theme-chip[data-theme="amber"]     { --chip-bg:#fbbf24; --chip-fg:#1f1406; }

/* ====================================================================== */
/* THEME TOKEN PACKS — drives navbar + pages (uses your existing vars)     */
/* styles.css already uses var(--nav-bg/--nav-ink/--brand-*) in navbar.    */
/* ====================================================================== */

:root[data-theme="navy"]{
  --page:#f5f7fb; --surface:#ffffff; --surface-2:#eef2ff; --line:#c9d2ec;
  --ink:#0f172a; --ink-dim:#475569;
  --brand-500:#2563eb; --brand-600:#1e3a8a; --brand-700:#16326d;

  --nav-bg:#0f1a33; --nav-border:#203252; --nav-ink:#e7eefc; --nav-ink-d:#cfe0ff;
}

:root[data-theme="sky"]{
  --page:#e0f2fe; --surface:#ffffff; --surface-2:#bae6fd; --line:#7dd3fc;
  --ink:#0c1e33; --ink-dim:#0369a1;
  --brand-500:#38bdf8; --brand-600:#0ea5e9; --brand-700:#0369a1;

  --nav-bg:#0c1e33; --nav-border:#0369a1; --nav-ink:#e0f2fe; --nav-ink-d:#bae6fd;
}

:root[data-theme="sunset"]{
  --page:#fff7ed; --surface:#ffffff; --surface-2:#ffedd5; --line:#fed7aa;
  --ink:#2d1b1b; --ink-dim:#7c2d12;
  --brand-500:#fb923c; --brand-600:#ea580c; --brand-700:#c2410c;

  --nav-bg:#2d1b1b; --nav-border:#7c2d12; --nav-ink:#fff7ed; --nav-ink-d:#ffedd5;
}

:root[data-theme="aqua"]{
  --page:#ecfeff; --surface:#ffffff; --surface-2:#cffafe; --line:#99f6e4;
  --ink:#05211d; --ink-dim:#0f766e;
  --brand-500:#14b8a6; --brand-600:#0f766e; --brand-700:#115e59;

  --nav-bg:#05211d; --nav-border:#0f766e; --nav-ink:#ecfeff; --nav-ink-d:#cffafe;
}

:root[data-theme="rose"]{
  --page:#fff1f2; --surface:#ffffff; --surface-2:#ffe4e6; --line:#fecdd3;
  --ink:#2a0b12; --ink-dim:#9f1239;
  --brand-500:#fb7185; --brand-600:#e11d48; --brand-700:#9f1239;

  --nav-bg:#2a0b12; --nav-border:#9f1239; --nav-ink:#fff1f2; --nav-ink-d:#ffe4e6;
}

:root[data-theme="sandstone"]{
  --page:#fefae0; --surface:#fffaf0; --surface-2:#f5e0b8; --line:#e7c69b;
  --ink:#3a2f1b; --ink-dim:#7c4a33;
  --brand-500:#d4a373; --brand-600:#b67b3f; --brand-700:#7c4a33;

  --nav-bg:#3a2f1b; --nav-border:#7c4a33; --nav-ink:#fefae0; --nav-ink-d:#f5e0b8;
}

:root[data-theme="cyberpunk"]{
  --page:#070712; --surface:#0b0b16; --surface-2:#111127; --line:#2a2a4a;
  --ink:#fef3c7; --ink-dim:#f5d0fe;
  --brand-500:#22d3ee; --brand-600:#a855f7; --brand-700:#f472b6;

  --nav-bg:#0b0b16; --nav-border:#2a2a4a; --nav-ink:#fef3c7; --nav-ink-d:#f5d0fe;
}

:root[data-theme="slate"]{
  --page:#0b1220; --surface:#0f172a; --surface-2:#111c33; --line:#22304a;
  --ink:#e7edf5; --ink-dim:#a8b3c7;
  --brand-500:#60a5fa; --brand-600:#3b82f6; --brand-700:#1d4ed8;

  --nav-bg:#0f172a; --nav-border:#22304a; --nav-ink:#e7edf5; --nav-ink-d:#b8c3d7;
}

:root[data-theme="emerald"]{
  --page:#ecfdf5; --surface:#ffffff; --surface-2:#d1fae5; --line:#a7f3d0;
  --ink:#05211d; --ink-dim:#065f46;
  --brand-500:#34d399; --brand-600:#10b981; --brand-700:#047857;

  --nav-bg:#05211d; --nav-border:#0b3b2f; --nav-ink:#ecfdf5; --nav-ink-d:#d1fae5;
}

:root[data-theme="forest"]{
  --page:#f0fdf4; --surface:#ffffff; --surface-2:#dcfce7; --line:#bbf7d0;
  --ink:#062012; --ink-dim:#166534;
  --brand-500:#22c55e; --brand-600:#16a34a; --brand-700:#15803d;

  --nav-bg:#062012; --nav-border:#123a22; --nav-ink:#f0fdf4; --nav-ink-d:#dcfce7;
}

:root[data-theme="grape"]{
  --page:#faf5ff; --surface:#ffffff; --surface-2:#f3e8ff; --line:#e9d5ff;
  --ink:#12031a; --ink-dim:#6b21a8;
  --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce;

  --nav-bg:#12031a; --nav-border:#2a0a3b; --nav-ink:#faf5ff; --nav-ink-d:#f3e8ff;
}

:root[data-theme="lavender"]{
  --page:#f5f3ff; --surface:#ffffff; --surface-2:#ede9fe; --line:#ddd6fe;
  --ink:#120a22; --ink-dim:#5b21b6;
  --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#5b21b6;

  --nav-bg:#120a22; --nav-border:#241044; --nav-ink:#f5f3ff; --nav-ink-d:#ede9fe;
}

:root[data-theme="midnight"]{
  --page:#e0f2fe; --surface:#ffffff; --surface-2:#bae6fd; --line:#7dd3fc;
  --ink:#04121c; --ink-dim:#075985;
  --brand-500:#38bdf8; --brand-600:#0ea5e9; --brand-700:#0c4a6e;

  --nav-bg:#04121c; --nav-border:#0b2a3d; --nav-ink:#e0f2fe; --nav-ink-d:#bae6fd;
}

:root[data-theme="mono"]{
  --page:#f7f7f7; --surface:#ffffff; --surface-2:#f1f1f1; --line:#e5e5e5;
  --ink:#0a0a0a; --ink-dim:#3f3f3f;
  --brand-500:#111111; --brand-600:#111111; --brand-700:#000000;

  --nav-bg:#0a0a0a; --nav-border:#1f1f1f; --nav-ink:#ffffff; --nav-ink-d:#e5e5e5;
}

:root[data-theme="citrus"]{
  --page:#fffbeb; --surface:#ffffff; --surface-2:#fef3c7; --line:#fde68a;
  --ink:#201304; --ink-dim:#92400e;
  --brand-500:#f59e0b; --brand-600:#d97706; --brand-700:#b45309;

  --nav-bg:#201304; --nav-border:#3b2508; --nav-ink:#fffbeb; --nav-ink-d:#fef3c7;
}

:root[data-theme="ruby"]{
  --page:#fff1f2; --surface:#ffffff; --surface-2:#ffe4e6; --line:#fecdd3;
  --ink:#2a0711; --ink-dim:#9f1239;
  --brand-500:#fb7185; --brand-600:#e11d48; --brand-700:#9f1239;

  --nav-bg:#2a0711; --nav-border:#4b0f1e; --nav-ink:#fff1f2; --nav-ink-d:#ffe4e6;
}

:root[data-theme="amber"]{
  --page:#fffbeb; --surface:#ffffff; --surface-2:#fef3c7; --line:#fcd34d;
  --ink:#1f1406; --ink-dim:#92400e;
  --brand-500:#fbbf24; --brand-600:#f59e0b; --brand-700:#b45309;

  --nav-bg:#1f1406; --nav-border:#3a260b; --nav-ink:#fffbeb; --nav-ink-d:#fef3c7;
}




.card-separator {
  margin: 32px auto;              /* bigger gap above & below, centered */
  border-top: 1px solid var(--line);
  width: 80%;                     /* line shorter than cards */
  opacity: 0.8;                   /* optional: soften a touch */
}


/* ===========================
   Register Settings Modal (scoped)
   =========================== */

#regSettingsBackdrop.rs-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 99999; /* above navbar (10000) + most modals */
}

#regSettingsBackdrop.rs-backdrop[aria-hidden="false"]{
  display: flex;
}

#regSettingsBackdrop .rs-modal{
  width: min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e1e6f0);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  color: var(--ink, #111827);
}
#regSettingsBackdrop[aria-hidden="false"]{
  display:flex;
}

/* ====================================================================== */
/* REGISTER SETTINGS MODAL (SuperAdmin Registers page)                     */
/* Uses #regSettingsBackdrop + .rs-modal to avoid conflicts with .modal     */
/* ====================================================================== */

#regSettingsBackdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  align-items:center;
  justify-content:center;
  padding:18px;
}

#regSettingsBackdrop[aria-hidden="false"]{ display:flex; }

#regSettingsBackdrop .rs-modal{
  width:min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow:auto;
  background: var(--surface, #ffffff);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  color: var(--ink, #111827);
}

#regSettingsBackdrop .modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.10);
  background: var(--surface-2, #f7fafc);
}

#regSettingsBackdrop .modal-title{ display:flex; flex-direction:column; gap:4px; }
#regSettingsBackdrop .modal-title h3{ margin:0; font-size:18px; }
#regSettingsBackdrop .modal-title .sub{ opacity:.75; font-size:12px; }

#regSettingsBackdrop .modal-close{
  border:1px solid rgba(15,23,42,.15);
  background: rgba(15,23,42,.04);
  color: inherit;
  border-radius: 10px;
  padding:8px 10px;
  cursor:pointer;
}

#regSettingsBackdrop .modal-body{ padding:14px 16px 16px; }

#regSettingsBackdrop .statusline{
  font-size:12px;
  opacity:.85;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

#regSettingsBackdrop .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  font-size:12px;
}

#regSettingsBackdrop .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px; }

#regSettingsBackdrop .tab-btn{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: inherit;
  border-radius: 999px;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
  font-weight:700;
}

#regSettingsBackdrop .tab-btn.active{
  background: rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.22);
}

#regSettingsBackdrop .tab-panel{ display:none; }
#regSettingsBackdrop .tab-panel.active{ display:block; }

#regSettingsBackdrop .grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 820px){
  #regSettingsBackdrop .grid{ grid-template-columns: 1fr; }
}

#regSettingsBackdrop .field{
  background: rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding:12px;
}

#regSettingsBackdrop .field label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  opacity:.95;
  margin-bottom:8px;
}

#regSettingsBackdrop .field .hint{
  font-size:12px;
  opacity:.7;
  margin-top:6px;
  line-height:1.35;
}

#regSettingsBackdrop .field input[type="text"],
#regSettingsBackdrop .field input[type="number"],
#regSettingsBackdrop .field select,
#regSettingsBackdrop .field textarea{
  width:100%;
  box-sizing:border-box;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.12);
  background: var(--surface, #ffffff);
  color: inherit;
  padding:10px 12px;
  outline:none;
}

#regSettingsBackdrop .field textarea{
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
}

#regSettingsBackdrop .row-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

#regSettingsBackdrop .modal-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 16px 14px;
  border-top:1px solid rgba(15,23,42,.10);
  background: var(--surface-2, #f7fafc);
}

#regSettingsBackdrop .btn{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: inherit;
  border-radius: 12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}

#regSettingsBackdrop .btn.primary{
  background: rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.22);
  font-weight:800;
}

#regSettingsBackdrop .btn.danger{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
}

body.rs-noscroll{ overflow:hidden; }

/* ====================================================================== */
/* REGISTER SETTINGS MODAL — hard display rules                            */
/* Fix: backdrop dims but modal not visible                                */
/* ====================================================================== */
#regSettingsBackdrop.rs-backdrop { display:none; }
#regSettingsBackdrop.rs-backdrop[aria-hidden="false"] { display:flex !important; }
#regSettingsBackdrop.rs-backdrop[aria-hidden="false"] .rs-modal {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
#regSettingsBackdrop.rs-backdrop[aria-hidden="true"] .rs-modal { display:none !important; }

/* Ensure the modal panel looks like a modal even if other rules clash */
#regSettingsBackdrop .rs-modal{
  background: var(--surface, #ffffff);
  color: var(--ink, #111827);
}
#regSettingsBackdrop .modal-header,
#regSettingsBackdrop .modal-footer{
  background: var(--surface-2, #f0f3fa);
  color: inherit;
}

/* --- HARD OVERRIDES: Register Settings Modal (SuperAdmin registers page) --- */
/* Backdrop is the element with id="regSettingsBackdrop" */
#regSettingsBackdrop{
  display:none;
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important;
  background: rgba(3,10,24,.55) !important;  /* dim */
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}

#regSettingsBackdrop[aria-hidden="false"]{
  display:flex !important;
}

/* The modal card inside */
#regSettingsBackdrop .rs-modal{
  position:relative !important;
  width:min(980px, calc(100vw - 36px)) !important;
  max-height:calc(100vh - 36px) !important;
  overflow:auto !important;
  background: var(--surface, #ffffff) !important;
  color: var(--ink, #111827) !important;
  border: 1px solid var(--line, #e1e6f0) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15,24,51,.35) !important;
}

/* Ensure header/footer look like your system modal */
#regSettingsBackdrop .modal-header,
#regSettingsBackdrop .modal-footer{
  background: var(--surface-2, #f0f3fa) !important;
  border-color: var(--line, #e1e6f0) !important;
}

#regSettingsBackdrop .modal-close{
  background: var(--danger, #c62828) !important;
  color:#fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding:8px 10px !important;
  cursor:pointer !important;
}

#regSettingsBackdrop .tab-btn.active{
  background: var(--brand-600, #1e3a8a) !important;
  color:#fff !important;
  border-color: transparent !important;
}

#regSettingsBackdrop .btn.primary{
  background: var(--brand-600, #1e3a8a) !important;
  color:#fff !important;
  border-color: transparent !important;
}
#regSettingsBackdrop .btn.danger{
  background: var(--danger, #c62828) !important;
  color:#fff !important;
  border-color: transparent !important;
}

/* =========================================================
   HARD OVERRIDES — ensure modal panel shows regardless of
   any global styles.css modal rules
========================================================= */

/* When JS adds .open, FORCE it visible */
.rsdlg-backdrop.open{
  display: flex !important;
}

/* If any global CSS messes with hidden/display, force the card visible */
.rsdlg-backdrop[aria-hidden="false"]{
  display: flex !important;
}

/* Ensure the panel is not transparent / not collapsed */
.rsdlg-panel{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  /* make it obviously visible even on dark themes */
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* Make sure backdrop wins against anything else */
.rsdlg-backdrop{
  z-index: 2147483000 !important;
}