/* ============================================================
   Custom admin shell — Bootstrap 5, RTL + dark via CSS variables
   and logical properties (no duplicated RTL rules).
   ============================================================ */
:root {
  --app-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --app-bg: #f4f6fb; --app-surface: #ffffff; --app-surface-2: #fbfcfe;
  --app-text: #1f2a44; --app-muted: #6b7a90; --app-border: #e7ebf3;
  --app-sidebar: #ffffff; --app-sidebar-active: rgba(37, 99, 235, .10);
  --app-accent: #2563eb; --app-accent-2: #1d4ed8; --app-accent-contrast: #fff;
  --app-accent-soft: rgba(37, 99, 235, .10);
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --app-shadow-lg: 0 10px 30px -12px rgba(16, 24, 40, .18);
  --app-radius: .85rem; --sidebar-w: 264px; --topbar-h: 64px;
}
[data-bs-theme="dark"] {
  --app-bg: #0a1020; --app-surface: #111a30; --app-surface-2: #0e1729;
  --app-text: #e6ecf7; --app-muted: #90a0bd; --app-border: #1e2a47;
  --app-sidebar: #0d1528; --app-sidebar-active: rgba(96, 165, 250, .16);
  --app-accent: #60a5fa; --app-accent-2: #3b82f6; --app-accent-contrast: #06122a;
  --app-accent-soft: rgba(96, 165, 250, .14);
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .5); --app-shadow-lg: 0 14px 36px -14px rgba(0, 0, 0, .7);
}
body.app-body { font-family: var(--app-font); background: var(--app-bg); color: var(--app-text); margin: 0; min-height: 100vh; }
/* Accent colour for content links only — NOT sidebar/topbar anchors (they have
   their own colours) and NOT .btn anchors (Bootstrap controls button text). */
.content a:not(.btn):not(.dropdown-item) { color: var(--app-accent); }

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--app-sidebar); border-inline-end: 1px solid var(--app-border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.15rem; min-height: var(--topbar-h); border-bottom: 1px solid var(--app-border); text-decoration: none; color: var(--app-text); }
.brand-logo { width: 38px; height: 38px; border-radius: .7rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); color: #fff; font-size: 1.1rem; box-shadow: var(--app-shadow); flex: 0 0 38px; }
.brand-name { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.brand-sub { font-size: .7rem; color: var(--app-muted); }
.nav-scroll { overflow-y: auto; padding: .6rem .65rem 1.2rem; flex: 1; }
.nav-section { font-size: .68rem; letter-spacing: .04em; color: var(--app-muted); font-weight: 600; text-transform: uppercase; padding: .9rem .8rem .35rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: .6rem; color: var(--app-text); text-decoration: none; font-size: .92rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.nav-item > i:first-child { font-size: 1rem; color: var(--app-muted); width: 1.2rem; text-align: center; transition: color .15s; }
.nav-item:hover { background: var(--app-surface-2); }
.nav-item.active { background: var(--app-sidebar-active); color: var(--app-accent); font-weight: 600; }
.nav-item.active > i:first-child { color: var(--app-accent); }
.nav-item .chev { margin-inline-start: auto; font-size: .8rem; transition: transform .2s; }
.nav-group.open > .nav-item .chev { transform: rotate(-90deg); }
.nav-children { display: none; flex-direction: column; gap: .1rem; padding-inline-start: .9rem; margin: .15rem 0 .2rem; }
.nav-group.open > .nav-children { display: flex; }
.nav-children .nav-item { padding: .5rem .8rem; font-size: .875rem; }
.nav-children .nav-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--app-border); flex: 0 0 6px; }
.nav-children .nav-item.active::before { background: var(--app-accent); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--topbar-h); background: color-mix(in srgb, var(--app-surface) 88%, transparent); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--app-border); display: flex; align-items: center; gap: .55rem; padding: 0 1.1rem; position: sticky; top: 0; z-index: 20; }
.icon-btn { width: 40px; height: 40px; border-radius: .6rem; border: 1px solid transparent; background: transparent; color: var(--app-muted); display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; transition: .15s; }
.icon-btn:hover { background: var(--app-surface-2); color: var(--app-text); }
.searchbox { display: flex; align-items: center; gap: .5rem; background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: .6rem; padding: .45rem .8rem; color: var(--app-muted); min-width: 220px; }
.searchbox input { border: 0; background: transparent; outline: 0; color: var(--app-text); width: 100%; font-size: .9rem; font-family: inherit; }
.app-spacer { flex: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: 0 0 34px; }
.profile { display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .25rem .35rem; border-radius: .6rem; text-decoration: none; color: var(--app-text); }
.profile:hover { background: var(--app-surface-2); }
.profile .pname { font-size: .85rem; font-weight: 600; line-height: 1; }
.profile .prole { font-size: .7rem; color: var(--app-muted); }
.content { padding: 1.4rem 1.5rem; flex: 1; }
.app-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }

.app-scrim { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, .45); z-index: 55; }
.sidebar-toggle { display: none; }
@media (max-width: 991.98px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); z-index: 60; transform: translateX(100%); transition: transform .25s; box-shadow: var(--app-shadow-lg); }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  body.sb-open .sidebar { transform: translateX(0); }
  body.sb-open .app-scrim { display: block; }
  .sidebar-toggle { display: grid; }
  .searchbox { display: none; }
}

/* ============================================================
   Dark-mode overrides for the app's page content (its custom
   <style> blocks hardcode light colors). Higher specificity +
   !important so they win over page styles. Drawing canvases are
   intentionally left light (design-tool convention).
   ============================================================ */
[data-bs-theme="dark"] .builder-card,
[data-bs-theme="dark"] .questions-loading-card,
[data-bs-theme="dark"] .version-history-card,
[data-bs-theme="dark"] .preview-question-card,
[data-bs-theme="dark"] .completion-help-box,
[data-bs-theme="dark"] .completion-answer-row,
[data-bs-theme="dark"] .editor-container,
[data-bs-theme="dark"] .cd-presets-panel,
[data-bs-theme="dark"] .cd-selection-item,
[data-bs-theme="dark"] .cd-selection-draft,
[data-bs-theme="dark"] .shape-row,
[data-bs-theme="dark"] .preview-option,
[data-bs-theme="dark"] .symbol-btn,
[data-bs-theme="dark"] .preview-question-card .prompt-html.prompt-surface-light {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}
[data-bs-theme="dark"] .card { background-color: var(--app-surface); border-color: var(--app-border); }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer { background-color: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text); }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); color: var(--app-text); }
[data-bs-theme="dark"] #QuestionsTable > tbody > tr { background: var(--app-surface) !important; border-color: var(--app-border) !important; }
[data-bs-theme="dark"] #QuestionsTable > tbody > tr:hover { background: var(--app-surface-2) !important; }
[data-bs-theme="dark"] #QuestionsTable thead th,
[data-bs-theme="dark"] .table > thead th { background: var(--app-surface-2) !important; color: var(--app-muted) !important; border-color: var(--app-border) !important; }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-color: var(--app-border); color: var(--app-text); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--app-muted); }
[data-bs-theme="dark"] .input-group-text { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); }
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .list-group-item { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: var(--app-border); }
[data-bs-theme="dark"] .text-dark { color: var(--app-text) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--app-muted) !important; }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light { background-color: var(--app-surface) !important; color: var(--app-text) !important; }
[data-bs-theme="dark"] hr { border-color: var(--app-border); }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--app-border) !important; }

/* Catch-all for native selects / inputs + DataTables controls (page-size, search, paging) */
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .dataTables_length select,
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] div.dataTables_wrapper select,
[data-bs-theme="dark"] div.dataTables_wrapper input {
    background-color: var(--app-surface-2) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] optgroup { background-color: var(--app-surface); color: var(--app-text); }
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_length,
[data-bs-theme="dark"] .dataTables_filter { color: var(--app-text); }
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--app-surface-2) !important; color: var(--app-text) !important; border-color: var(--app-border) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--app-accent) !important; color: #fff !important; border-color: var(--app-accent) !important;
}

/* Broad net: any *-card / *-panel / *-box / *-summary container defaults to a dark
   surface in dark mode. Specificity (0,2,0) beats the pages' single-class light rules
   (no !important, so intentionally higher-specificity colored cards are preserved).
   'background' shorthand also resets light gradients. */
[data-bs-theme="dark"] [class*="-card"],
[data-bs-theme="dark"] [class*="-panel"],
[data-bs-theme="dark"] [class*="-summary"],
[data-bs-theme="dark"] [class*="-box"] {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
/* Let dark modal-content show through custom light modal-body rules */
[data-bs-theme="dark"] .modal-body { background: transparent !important; }

/* Tabs / pills readable in dark mode (pages hardcode dark text e.g. #334155) */
[data-bs-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .nav-pills .nav-link,
[data-bs-theme="dark"] .question-form-tabs .nav-link { color: var(--app-muted) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-pills .nav-link:hover { color: var(--app-text) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .question-form-tabs .nav-link.active {
    color: var(--app-accent) !important;
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) var(--app-border) var(--app-surface) !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active { color: #fff !important; background-color: var(--app-accent) !important; }
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--app-border); }

/* General: headings/labels keep readable text in dark mode */
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--app-text); }

/* CKEditor content/toolbar in dark mode */
[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
[data-bs-theme="dark"] .ck.ck-editor__editable_inline { background: var(--app-surface-2) !important; color: var(--app-text) !important; }
[data-bs-theme="dark"] .ck.ck-toolbar { background: var(--app-surface) !important; border-color: var(--app-border) !important; }

/* CKEditor 5 — full dark theme via its own CSS variables (fixes faint toolbar icons,
   dropdowns, inputs, lists). */
[data-bs-theme="dark"] {
    --ck-color-base-foreground: #16203a;
    --ck-color-base-background: var(--app-surface-2);
    --ck-color-base-border: var(--app-border);
    --ck-color-base-action: var(--app-accent);
    --ck-color-base-text: var(--app-text);
    --ck-color-text: var(--app-text);
    --ck-color-shadow-drop: rgba(0, 0, 0, .4);
    --ck-color-shadow-inner: rgba(0, 0, 0, .3);
    --ck-color-toolbar-background: var(--app-surface);
    --ck-color-toolbar-border: var(--app-border);
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--app-surface-2);
    --ck-color-button-default-active-background: var(--app-surface-2);
    --ck-color-button-on-background: var(--app-accent-soft);
    --ck-color-button-on-hover-background: var(--app-accent-soft);
    --ck-color-button-on-active-background: var(--app-accent-soft);
    --ck-color-button-on-color: var(--app-accent);
    --ck-color-button-action-background: var(--app-accent);
    --ck-color-button-action-hover-background: var(--app-accent-2);
    --ck-color-button-action-text: #fff;
    --ck-color-dropdown-panel-background: var(--app-surface);
    --ck-color-dropdown-panel-border: var(--app-border);
    --ck-color-panel-background: var(--app-surface);
    --ck-color-panel-border: var(--app-border);
    --ck-color-input-background: var(--app-surface-2);
    --ck-color-input-border: var(--app-border);
    --ck-color-input-text: var(--app-text);
    --ck-color-input-disabled-background: var(--app-surface);
    --ck-color-list-background: var(--app-surface);
    --ck-color-list-button-hover-background: var(--app-surface-2);
    --ck-color-list-button-on-background: var(--app-accent);
    --ck-color-list-button-on-text: #fff;
    --ck-color-split-button-hover-background: var(--app-surface-2);
}
[data-bs-theme="dark"] .ck.ck-toolbar .ck-button .ck-icon { color: var(--app-text); }

/* ===== CKEditor dark — bulletproof =====
   html[data-bs-theme] (0,1,1) beats CKEditor's runtime-injected :root (0,1,0),
   plus direct !important on the real editable/toolbar/container selectors. */
html[data-bs-theme="dark"] {
    --ck-color-base-background: #0e1729;
    --ck-color-base-foreground: #16203a;
    --ck-color-text: #e6ecf7;
    --ck-color-base-border: #1e2a47;
    --ck-color-toolbar-background: #111a30;
    --ck-color-toolbar-border: #1e2a47;
    --ck-color-panel-background: #111a30;
    --ck-color-panel-border: #1e2a47;
    --ck-color-dropdown-panel-background: #111a30;
    --ck-color-list-background: #111a30;
    --ck-color-input-background: #0e1729;
    --ck-color-input-text: #e6ecf7;
    --ck-color-button-default-hover-background: #16203a;
    --ck-color-button-on-background: rgba(96, 165, 250, .16);
    --ck-color-button-on-color: #60a5fa;
}
html[data-bs-theme="dark"] .editor-container { background: #0e1729 !important; border-color: #1e2a47 !important; }
html[data-bs-theme="dark"] .ck-editor__editable,
html[data-bs-theme="dark"] .ck-editor__editable_inline,
html[data-bs-theme="dark"] .ck.ck-content { background: #0e1729 !important; color: #e6ecf7 !important; }
html[data-bs-theme="dark"] .ck.ck-toolbar,
html[data-bs-theme="dark"] .ck-editor__top .ck-toolbar { background: #111a30 !important; border-color: #1e2a47 !important; }
html[data-bs-theme="dark"] .ck.ck-button .ck-button__label,
html[data-bs-theme="dark"] .ck.ck-button .ck-icon,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button { color: #e6ecf7 !important; }
html[data-bs-theme="dark"] .ck.ck-dropdown__panel,
html[data-bs-theme="dark"] .ck.ck-list,
html[data-bs-theme="dark"] .ck.ck-balloon-panel { background: #111a30 !important; border-color: #1e2a47 !important; }
html[data-bs-theme="dark"] .ck.ck-list__item .ck-button__label { color: #e6ecf7 !important; }
html[data-bs-theme="dark"] .ck-editor__editable.ck-focused { box-shadow: none !important; }

/* Image upload widget (tb-* classes) */
html[data-bs-theme="dark"] .tb-upload-wrap { background: var(--app-surface) !important; border-color: var(--app-border) !important; }
html[data-bs-theme="dark"] .tb-file-input { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
html[data-bs-theme="dark"] .tb-file-input::file-selector-button { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
html[data-bs-theme="dark"] .tb-upload-file { color: var(--app-text) !important; }
html[data-bs-theme="dark"] .tb-upload-status { color: var(--app-muted) !important; }

/* Remaining named light surfaces on the Questions page */
html[data-bs-theme="dark"] .cd-selection-item,
html[data-bs-theme="dark"] .cd-selection-draft,
html[data-bs-theme="dark"] .cd-selection-panel,
html[data-bs-theme="dark"] .shape-dots-panel,
html[data-bs-theme="dark"] .version-history-empty {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}
html[data-bs-theme="dark"] .cd-selection-item:hover { background: var(--app-surface-2) !important; }
html[data-bs-theme="dark"] .cd-selection-item.active { background: var(--app-accent-soft) !important; border-color: var(--app-accent) !important; }

/* Type-builder wrappers + all *-row containers (choice/pair/node/shape rows across question types) */
html[data-bs-theme="dark"] .type-builder { background: var(--app-surface) !important; border-color: var(--app-border) !important; }
html[data-bs-theme="dark"] [class*="-row"] { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); }

/* ============================================================
   Extended dark-mode net for /Admin page content. Admin pages
   hardcode light surfaces on neutral container classes
   (-wrap / -shell / -toolbar / -section / ...). Scoped to
   .content so the shell chrome is untouched; no !important so
   intentionally-coloured elements (their own higher-specificity
   rules) win. Colour-carrying suffixes (badge/chip/pill/swatch)
   are deliberately excluded. Inline styles also still win.
   ============================================================ */
[data-bs-theme="dark"] .content [class*="-wrap"],
[data-bs-theme="dark"] .content [class*="-shell"],
[data-bs-theme="dark"] .content [class*="-toolbar"],
[data-bs-theme="dark"] .content [class*="-actions"],
[data-bs-theme="dark"] .content [class*="-filter"],
[data-bs-theme="dark"] .content [class*="-section"],
[data-bs-theme="dark"] .content [class*="-container"],
[data-bs-theme="dark"] .content [class*="-cell"],
[data-bs-theme="dark"] .content [class*="-meta"],
[data-bs-theme="dark"] .content [class*="-note"],
[data-bs-theme="dark"] .content [class*="-empty"],
[data-bs-theme="dark"] .content [class*="-tile"],
[data-bs-theme="dark"] .content [class*="-field"] {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

/* ============================================================
   Dashboard stat cards (home/admin KPI tiles) — icon-led and
   theme-aware. Per-card accent comes from an inline `--stat`
   custom property; soft tints derive from it via color-mix,
   so one rule set serves every colour.
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.stat-card {
  --stat: var(--app-accent);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.2rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-lg);
  border-color: color-mix(in srgb, var(--stat) 45%, var(--app-border));
}
/* decorative corner blob in the card's accent colour */
.stat-card::after {
  content: ""; position: absolute; inset-block-start: -34%; inset-inline-end: -12%;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--stat) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.stat-ico {
  position: relative; z-index: 1; flex: 0 0 54px; width: 54px; height: 54px;
  border-radius: .95rem; display: grid; place-items: center; font-size: 1.45rem;
  color: var(--stat); background: color-mix(in srgb, var(--stat) 15%, transparent);
}
.stat-body { position: relative; z-index: 1; min-width: 0; }
.stat-value { font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--app-text); }
.stat-label { margin-top: .4rem; font-size: .85rem; line-height: 1.35; color: var(--app-muted); }