/* ============================================================================
 * THEME BASE LAYER (الطبقة الأساسية لنظام التصميم)
 * FILE: css/themes/_base.css
 * DESCRIPTION: Structural rules for every themed component. Each of the 10
 *              design files only re-declares the design tokens below, so all
 *              components (cards, buttons, tabs, inputs, tables, charts,
 *              navigation layouts) reshape themselves automatically.
 * TOKENS ARE ALWAYS OVERRIDDEN PER THEME + MODE (dark/light).
 * ============================================================================ */

:root {
  /* --- typography --- */
  --ui-font: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --ui-heading-weight: 800;
  --ui-heading-tracking: -0.01em;
  --ui-body-size: 13.5px;
  --ui-control-h: 46px;

  /* --- canvas & surfaces --- */
  --ui-canvas: #070d19;
  --ui-canvas-2: #0b1325;
  --ui-pattern: none;
  --ui-card-bg: rgba(15, 23, 42, 0.72);
  --ui-card-bg-hover: rgba(23, 33, 54, 0.86);
  --ui-subtle: rgba(148, 163, 184, 0.06);
  --ui-border: rgba(148, 163, 184, 0.16);
  --ui-border-w: 1px;
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-radius-pill: 999px;
  --ui-blur: blur(16px);
  --ui-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --ui-shadow-hover: 0 18px 36px -14px rgba(0, 0, 0, 0.6);
  --ui-inset: none;

  /* --- text --- */
  --ui-text: #e8edf6;
  --ui-heading: #ffffff;
  --ui-muted: #93a1b8;
  --ui-faint: #64748b;

  /* --- brand & semantic --- */
  --ui-primary: #10b981;
  --ui-primary-soft: rgba(16, 185, 129, 0.14);
  --ui-primary-contrast: #04120c;
  --ui-primary-glow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 10px 26px -12px rgba(16, 185, 129, 0.55);
  --ui-accent: #f59e0b;
  --ui-accent-soft: rgba(245, 158, 11, 0.14);
  --ui-danger: #f43f5e;
  --ui-danger-soft: rgba(244, 63, 94, 0.14);
  --ui-success: #10b981;
  --ui-warn: #f59e0b;
  --ui-info: #38bdf8;
  --ui-info-soft: rgba(56, 189, 248, 0.14);

  /* --- density --- */
  --ui-gap: 16px;
  --ui-card-pad: 20px;
  --ui-row-pad: 12px;
  --ui-motion: 150ms;

  /* --- data viz defaults --- */
  --ui-chart-1: #10b981;
  --ui-chart-2: #f59e0b;
  --ui-chart-3: #38bdf8;
  --ui-chart-4: #8b5cf6;
  --ui-chart-5: #f43f5e;
  --ui-grid: rgba(148, 163, 184, 0.14);
}

/* ============================================================================
 * 0. SEMANTIC COLOURS IN LIGHT MODE
 * Brand colours (primary/accent) come from each design, while semantic colours
 * (danger/warning/info/success) stay constant for predictability — but they need
 * darker inks so they remain legible on light surfaces.
 * ============================================================================ */
html[data-mode="light"] {
  --ui-danger: #d81e46;
  --ui-danger-soft: color-mix(in srgb, #d81e46 11%, transparent);
  --ui-success: #047857;
  --ui-success-soft: color-mix(in srgb, #047857 12%, transparent);
  --ui-warn: #a3590a;
  --ui-warn-soft: color-mix(in srgb, #a3590a 13%, transparent);
  --ui-info: #0369a1;
  --ui-info-soft: color-mix(in srgb, #0369a1 11%, transparent);
}

/* ============================================================================
 * 1. PAGE CANVAS
 * ============================================================================ */
.ui-themed {
  font-family: var(--ui-font);
  font-size: var(--ui-body-size);
  color: var(--ui-text);
  background-color: var(--ui-canvas);
  background-image: var(--ui-pattern);
  background-repeat: repeat;
  min-height: 100vh;
}

.ui-themed .ambient-mesh {
  background: var(--ui-canvas);
}

.ui-heading {
  color: var(--ui-heading);
  font-weight: var(--ui-heading-weight);
  letter-spacing: var(--ui-heading-tracking);
}

/* ============================================================================
 * 2. SURFACES: PANELS / CARDS / STAT TILES
 * ============================================================================ */
.ui-themed .glass-panel,
.ui-themed .ui-panel {
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  box-shadow: var(--ui-inset), var(--ui-shadow);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
}

.ui-themed .glass-card,
.ui-themed .ui-card {
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  box-shadow: var(--ui-inset), var(--ui-shadow);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
  transition: transform var(--ui-motion) ease, box-shadow var(--ui-motion) ease,
    border-color var(--ui-motion) ease, background-color var(--ui-motion) ease;
}

.ui-themed .glass-card:hover,
.ui-themed .ui-card:hover {
  background: var(--ui-card-bg-hover);
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  box-shadow: var(--ui-shadow-hover);
}

.ui-themed .glass-card-interactive:hover {
  transform: translateY(-3px);
}

.ui-themed .ui-subtle {
  background: var(--ui-subtle);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

.ui-gap {
  gap: var(--ui-gap);
}
.ui-pad {
  padding: var(--ui-card-pad);
}
.ui-row-pad {
  padding-top: var(--ui-row-pad);
  padding-bottom: var(--ui-row-pad);
}

/* ============================================================================
 * 3. BUTTONS
 * ============================================================================ */
.ui-themed .ui-btn,
.ui-themed button.ui-btn {
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
  border: var(--ui-border-w) solid transparent;
  border-radius: var(--ui-radius-sm);
  height: var(--ui-control-h);
  padding-inline: 18px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--ui-motion) ease, box-shadow var(--ui-motion) ease,
    background-color var(--ui-motion) ease;
}

.ui-themed .ui-btn:hover:not(:disabled) {
  box-shadow: var(--ui-primary-glow);
  transform: translateY(-1px);
}

.ui-themed .ui-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-themed .ui-btn-ghost {
  background: var(--ui-subtle);
  color: var(--ui-text);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  height: var(--ui-control-h);
  padding-inline: 16px;
  font-weight: 700;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--ui-motion) ease, color var(--ui-motion) ease;
}

.ui-themed .ui-btn-ghost:hover {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
}

.ui-themed .ui-btn-accent {
  background: var(--ui-accent);
  color: var(--ui-primary-contrast);
}
.ui-themed .ui-btn-danger {
  background: var(--ui-danger);
  color: #fff;
}

/* ============================================================================
 * 4. CHIPS / TABS / BADGES
 * ============================================================================ */
.ui-themed .ui-chip,
.ui-themed .ui-tab {
  border: var(--ui-border-w) solid var(--ui-border);
  background: var(--ui-subtle);
  color: var(--ui-muted);
  border-radius: var(--ui-radius-pill);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--ui-motion) ease;
  white-space: nowrap;
}

.ui-themed .ui-chip:hover,
.ui-themed .ui-tab:hover {
  color: var(--ui-heading);
  border-color: color-mix(in srgb, var(--ui-primary) 45%, var(--ui-border));
}

.ui-themed .ui-chip[aria-selected="true"],
.ui-themed .ui-chip.is-active,
.ui-themed .ui-tab[aria-selected="true"],
.ui-themed .ui-tab.is-active {
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
  border-color: var(--ui-primary);
}

.ui-themed .ui-badge {
  border: var(--ui-border-w) solid var(--ui-border);
  background: var(--ui-subtle);
  border-radius: var(--ui-radius-pill);
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 800;
}

.ui-themed .ui-pill-primary {
  background: var(--ui-primary-soft);
  border: var(--ui-border-w) solid color-mix(in srgb, var(--ui-primary) 45%, transparent);
  color: var(--ui-primary);
  border-radius: var(--ui-radius-pill);
}
.ui-themed .ui-pill-accent {
  background: var(--ui-accent-soft);
  border: var(--ui-border-w) solid color-mix(in srgb, var(--ui-accent) 45%, transparent);
  color: var(--ui-accent);
  border-radius: var(--ui-radius-pill);
}

/* ============================================================================
 * 5. FORM FIELDS
 * ============================================================================ */
.ui-themed input.ui-field,
.ui-themed select.ui-field,
.ui-themed textarea.ui-field {
  width: 100%;
  background: var(--ui-subtle);
  color: var(--ui-text);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  font-family: var(--ui-font);
  outline: none;
  transition: border-color var(--ui-motion) ease, box-shadow var(--ui-motion) ease;
}

.ui-themed input.ui-field:focus,
.ui-themed select.ui-field:focus,
.ui-themed textarea.ui-field:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-primary-soft);
}

.ui-themed label.ui-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ui-muted);
}

/* ============================================================================
 * 6. AVATARS / ICON TILES
 * ============================================================================ */
.ui-themed .ui-avatar {
  display: grid;
  place-items: center;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  border: var(--ui-border-w) solid color-mix(in srgb, var(--ui-primary) 35%, transparent);
  border-radius: var(--ui-avatar-radius, 12px);
  font-weight: 900;
}

.ui-themed .ui-icon-tile {
  display: grid;
  place-items: center;
  background: var(--ui-subtle);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-primary);
}

/* ============================================================================
 * 7. NAVIGATION (layout modes: static | iconrail | topbar)
 * ============================================================================ */
.ui-themed .app-aside {
  background: var(--ui-card-bg);
  border-inline-start: 1px solid var(--ui-border);
  border-inline-end: none;
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
  transition: width var(--ui-motion) ease;
}

/* ---------- layout: static (right sidebar) — desktop only ---------- */
@media (min-width: 1024px) {
  html[data-layout="static"] .app-aside {
    width: 248px;
  }
  html[data-layout="static"] .app-main,
  html[data-layout="static"] .app-header {
    margin-inline-end: 248px;
  }
}

/* ---------- layout: iconrail (narrow icon rail) ---------- */
@media (min-width: 1024px) {
  html[data-layout="iconrail"] .app-aside {
    width: 84px;
    padding-inline: 10px;
    align-items: center;
  }
  html[data-layout="iconrail"] .app-aside .nav-label,
  html[data-layout="iconrail"] .app-aside .aside-foot-copy,
  html[data-layout="iconrail"] .app-aside .aside-brand-copy,
  html[data-layout="iconrail"] .app-aside .aside-account {
    display: none;
  }
  html[data-layout="iconrail"] .app-aside .aside-nav .nav-item {
    justify-content: center;
    padding-inline: 0;
  }
  html[data-layout="iconrail"] .app-aside .aside-foot {
    width: 100%;
  }
  html[data-layout="iconrail"] .app-main,
  html[data-layout="iconrail"] .app-header {
    margin-inline-end: 84px;
  }
}

/* ---------- layout: topbar (horizontal nav — works on mobile too) ---------- */
html[data-layout="topbar"] .app-aside {
  display: flex !important;
  position: sticky;
  top: 0;
  inset-inline: 0;
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-inline-start: none;
  border-bottom: 1px solid var(--ui-border);
  z-index: 45;
}
html[data-layout="topbar"] .app-aside .aside-nav {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
html[data-layout="topbar"] .app-aside .aside-nav .nav-item {
  width: auto;
  white-space: nowrap;
  padding-inline: 12px;
}
html[data-layout="topbar"] .app-aside .aside-account {
  display: none;
}
html[data-layout="topbar"] .app-aside .aside-brand-copy {
  display: none;
}
html[data-layout="topbar"] .app-aside .aside-foot {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
html[data-layout="topbar"] .app-aside .aside-foot button span.aside-foot-copy {
  display: none;
}
html[data-layout="topbar"] .app-header {
  position: sticky;
  top: 58px;
}
html[data-layout="topbar"] .bottom-nav {
  display: none;
}

.ui-themed .nav-item {
  border: var(--ui-border-w) solid transparent;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-muted);
  transition: all var(--ui-motion) ease;
}
.ui-themed .nav-item:hover {
  background: var(--ui-subtle);
  color: var(--ui-heading);
}
.ui-themed .nav-item.is-active {
  background: var(--ui-primary-soft);
  border-color: color-mix(in srgb, var(--ui-primary) 50%, transparent);
  color: var(--ui-primary);
}

.ui-themed .bottom-nav {
  background: var(--ui-card-bg);
  border-top: 1px solid var(--ui-border);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
}

/* ============================================================================
 * 8. TABLES
 * ============================================================================ */
.ui-themed .ui-table thead tr {
  border-bottom: var(--ui-border-w) solid var(--ui-border);
}
.ui-themed .ui-table th {
  color: var(--ui-muted);
  font-weight: 800;
  font-size: 11px;
}
.ui-themed .ui-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent);
}
.ui-themed .ui-table tbody tr:hover {
  background: var(--ui-subtle);
}

/* ============================================================================
 * 9. PROGRESS / CHARTS
 * ============================================================================ */
.ui-themed .ui-bar {
  display: block;
  height: 100%;
  border-radius: var(--ui-radius-pill);
  background: linear-gradient(to left, var(--ui-chart-1), color-mix(in srgb, var(--ui-chart-1) 55%, var(--ui-canvas-2)));
  transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-themed .ui-bar.is-accent {
  background: linear-gradient(to left, var(--ui-chart-2), color-mix(in srgb, var(--ui-chart-2) 55%, var(--ui-canvas-2)));
}
.ui-themed .ui-bar.is-info {
  background: linear-gradient(to left, var(--ui-chart-3), color-mix(in srgb, var(--ui-chart-3) 55%, var(--ui-canvas-2)));
}
.ui-themed .ui-bar.is-violet {
  background: linear-gradient(to left, var(--ui-chart-4), color-mix(in srgb, var(--ui-chart-4) 55%, var(--ui-canvas-2)));
}
.ui-themed .ui-track {
  background: color-mix(in srgb, var(--ui-border) 70%, transparent);
}

.ui-chart-svg text {
  fill: var(--ui-muted);
  font-family: var(--ui-font);
  font-size: 10px;
  font-weight: 700;
}
.ui-chart-svg .grid-line {
  stroke: var(--ui-grid);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.ui-chart-svg .axis-line {
  stroke: var(--ui-border);
  stroke-width: 1.5;
}

/* ============================================================================
 * 10. TOASTS / MODALS
 * ============================================================================ */
.ui-themed .ui-toast {
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
}

.ui-themed #modal-root > div > div {
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
}

/* ============================================================================
 * 11. RANK BADGES & HELPER SURFACES
 * ============================================================================ */
.ui-themed .ui-rank {
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 900;
}

.ui-themed .ui-stat-tile {
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

/* Print-friendliness for financial reports */
@media print {
  .ui-themed {
    background: #fff;
    color: #000;
  }
  .app-aside,
  .bottom-nav,
  .app-header {
    display: none !important;
  }
}

/* ============================================================================
 * 12. DESIGN GALLERY (معرض التصميمات العشرة)
 * Live mini-previews: each card carries data-preview-theme + data-preview-mode
 * so the real theme tokens cascade into the mock UI. Markup is presentational
 * only (pointer-events disabled) — actions live in the card footer.
 * ============================================================================ */
.ui-themed .design-preview {
  background-color: var(--ui-canvas);
  background-image: var(--ui-pattern);
  background-size: cover;
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 11px;
  border: var(--ui-border-w) solid var(--ui-border);
  border-radius: 20px;
  padding: 14px;
  min-height: 282px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}
.design-preview .dp-row { display: flex; align-items: center; gap: 8px; }
.design-preview .dp-between { justify-content: space-between; }
.design-preview .dp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.design-preview .dp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.design-preview .dp-kpi { display: flex; flex-direction: column; gap: 3px; }
.design-preview .dp-label { font-size: 9.5px; font-weight: 700; color: var(--ui-muted); }
.design-preview .dp-value { font-size: 15px; font-weight: 800; color: var(--ui-heading); letter-spacing: -0.01em; }
.design-preview .dp-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.design-preview .dp-bar {
  flex: 1;
  border-radius: var(--dp-bar-radius, 4px) var(--dp-bar-radius, 4px) 2px 2px;
  background: var(--ui-primary);
  opacity: .92;
}
.design-preview .dp-bar.alt { background: var(--ui-chart-2); }
.design-preview .dp-bar.alt2 { background: var(--ui-chart-3); }
.design-preview .dp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: var(--ui-radius-pill);
  border: var(--ui-border-w) solid var(--ui-border);
  background: var(--ui-subtle);
  color: var(--ui-text);
}
.design-preview .dp-chip.on { background: var(--ui-primary); color: var(--ui-primary-contrast); border-color: transparent; }
.design-preview .dp-btn {
  flex: 1;
  text-align: center;
  padding: calc((var(--ui-control-h) - 26px) / 2 + 7px) 10px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
  box-shadow: var(--ui-primary-glow);
}
.design-preview .dp-btn.ghost {
  background: transparent;
  color: var(--ui-text);
  border: var(--ui-border-w) solid var(--ui-border);
  box-shadow: none;
}
.design-preview .dp-avatar {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--ui-avatar-radius, 999px);
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  border: var(--ui-border-w) solid var(--ui-border);
}
.design-preview .dp-tile {
  display: grid; place-items: center;
  height: 30px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  border: var(--ui-border-w) solid var(--ui-border);
  box-shadow: var(--ui-inset);
}
.design-preview .dp-surface { box-shadow: var(--ui-inset); }
.design-preview .dp-mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-card-bg);
  border: var(--ui-border-w) solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  color: var(--ui-muted);
  margin-top: auto;
}
.design-preview .dp-mini-nav .on { color: var(--ui-primary); }

/* the preview frame sits inside a normal themed card */
.design-card { transition: box-shadow var(--ui-motion) ease, border-color var(--ui-motion) ease; }
.design-card:hover { border-color: color-mix(in srgb, var(--ui-primary) 55%, transparent); }
.design-card.is-active { border-color: var(--ui-primary); box-shadow: var(--ui-primary-glow); }
.design-swatch { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(148, 163, 184, .35); }
.design-spec { font-size: 10.5px; line-height: 1.7; color: var(--ui-muted); }
.design-spec b { color: var(--ui-text); font-weight: 800; }