/* ============================================================================
   AURORA — Light theme
   ----------------------------------------------------------------------------
   A clean, professional light theme with neutral warm-cool palette, deep teal
   accent, subtle elevation, and refined typography. Designed for long working
   sessions with minimal eye strain.
   ============================================================================ */

:root {
  /* ---------- Typography ---------- */
  --font: "Segoe UI", "Noto Sans Arabic", "Cairo", "Tahoma", system-ui, -apple-system, sans-serif;
  --font-head: "Segoe UI", "Noto Sans Arabic", "Cairo", "Tahoma", system-ui, -apple-system, sans-serif;

  /* ---------- Surfaces & backgrounds ---------- */
  --bg: #f5f7f9;
  --bg-image: radial-gradient(80rem 40rem at 100% -10%, rgba(15, 118, 110, 0.04), transparent 60%),
              radial-gradient(60rem 30rem at 0% 110%, rgba(15, 118, 110, 0.03), transparent 60%);
  --bg-attachment: fixed;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --field-bg: #ffffff;
  --field-disabled: rgba(127, 127, 127, 0.08);

  /* ---------- Text colors ---------- */
  --ink: #0f1c20;
  --ink-2: #5a6b71;
  --ink-3: #88939980;

  /* ---------- Borders ---------- */
  --line: #e4eaec;
  --line-strong: #c8d2d6;

  /* ---------- Accent ---------- */
  --accent: #0f766e;
  --accent-hover: #0c615b;
  --accent-ink: #ffffff;
  --accent-bg: rgba(15, 118, 110, 0.08);

  /* ---------- Status colors ---------- */
  --danger: #b42318;
  --danger-bg: rgba(180, 35, 24, 0.07);
  --ok: #15803d;
  --ok-bg: rgba(21, 128, 61, 0.08);
  --warn: #b45309;
  --warn-bg: rgba(180, 83, 9, 0.09);
  --info: #1f6feb;
  --info-bg: rgba(31, 111, 235, 0.08);

  /* ---------- Header ---------- */
  --head-bg: rgba(255, 255, 255, 0.85);
  --head-ink: #0f1c20;
  --head-hover: rgba(127, 127, 127, 0.12);
  --head-blur: blur(12px);
  -webkit-backdrop-filter-blur: blur(12px);
  --shadow-head: 0 1px 0 rgba(15, 60, 60, 0.04), 0 1px 3px rgba(15, 60, 60, 0.05);

  /* ---------- Sidebar ---------- */
  --side-bg: rgba(255, 255, 255, 0.95);
  --side-ink: #234246;
  --side-mute: #7d9093;
  --side-hover: #eef4f5;
  --side-active-bg: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(15, 118, 110, 0.06));
  --side-active-ink: #0b544e;

  /* ---------- Table header ---------- */
  --th-bg: #f3f7f8;
  --th-ink: #35555a;
  --row-hover: #f5fafa;
  --row-group: #eef4f5;
  --row-total: #e3eeeb;

  /* ---------- Buttons ---------- */
  --btn-hover: #f5f7f8;
  --shadow-btn: 0 1px 2px rgba(15, 60, 60, 0.08);

  /* ---------- Elevation (3 shadow levels) ---------- */
  --shadow: 0 1px 2px rgba(15, 60, 60, 0.04), 0 4px 12px rgba(15, 60, 60, 0.04);
  --shadow-pop: 0 8px 24px rgba(15, 60, 60, 0.10), 0 2px 6px rgba(15, 60, 60, 0.06);

  /* ---------- Geometry ---------- */
  --radius: 12px;
  --radius-sm: 8px;
  --ctl-h: 2.45rem;
  --cell-pad: 0.6rem 0.85rem;
  --main-pad: 1.5rem;
  --side-w: 16rem;
  --head-h: 3.5rem;

  /* ---------- Select arrow (light) ---------- */
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b71' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* ---------- Theme-specific component polish ---------- */
.btn-primary:hover {
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25), 0 1px 2px rgba(15, 118, 110, 0.18);
}

.card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
}

.table thead th {
  background: linear-gradient(180deg, #f3f7f8 0%, #eef4f5 100%);
}

/* Subtle hover lift on cards */
.card:hover {
  box-shadow: 0 2px 4px rgba(15, 60, 60, 0.05), 0 8px 20px rgba(15, 60, 60, 0.06);
}

/* Focus ring refinement */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
  outline: 0;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
  outline: 0;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #c8d2d6;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #88939980; background-clip: content-box; }

/* Selection */
::selection { background: rgba(15, 118, 110, 0.2); color: inherit; }

/* Code / LTR text polish */
.ltr, code, kbd, pre { font-feature-settings: "tnum"; }

/* Nav link icon polish */
.nav-link.is-current {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-inline-start: calc(0.75rem - 3px);
}
[dir="rtl"] .nav-link.is-current {
  box-shadow: inset -3px 0 0 var(--accent);
  padding-inline-start: 0.75rem;
  padding-inline-end: calc(0.75rem - 3px);
}