/* ════════════════════════════════════════
   theme.css
   المسار:
   /assets/css/theme.css
   لازم يتربط قبل أي CSS خاص بالصفحات
   ════════════════════════════════════════ */

/* ────────────────────────────────────────
   Light (افتراضي)
──────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg-body        : #f3f4f6;
  --bg-surface     : #ffffff;
  --bg-surface-2   : #f8fafc;
  --bg-muted       : #f3f4f6;

  --text-primary   : #111827;
  --text-secondary : #6b7280;
  --text-muted     : #9ca3af;

  --border-color   : rgba(0,0,0,0.08);
  --shadow-sm      : 0 1px 6px rgba(0,0,0,0.08);
  --shadow-md      : 0 4px 16px rgba(0,0,0,0.10);

  --accent         : #1d4ed8;
  --accent-hover   : #1e40af;
  --accent-subtle  : rgba(29,78,216,0.10);

  --input-bg       : #ffffff;
  --input-border   : #d1d5db;

  --navbar-bg      : rgba(255,255,255,0.85);
  --navbar-bg-solid: rgba(255,255,255,0.97);
  --card-bg        : #ffffff;

  --body-bg1       : #f0f9ff;
  --body-bg2       : #dbeafe;
}

/* ────────────────────────────────────────
   Dark
──────────────────────────────────────── */
[data-theme="dark"] {
  --bg-body        : #0f1117;
  --bg-surface     : #1a1d27;
  --bg-surface-2   : #1e2330;
  --bg-muted       : #252836;

  --text-primary   : #f1f5f9;
  --text-secondary : #94a3b8;
  --text-muted     : #64748b;

  --border-color   : rgba(255,255,255,0.08);
  --shadow-sm      : 0 1px 6px rgba(0,0,0,0.35);
  --shadow-md      : 0 4px 16px rgba(0,0,0,0.45);

  --accent         : #3b82f6;
  --accent-hover   : #2563eb;
  --accent-subtle  : rgba(59,130,246,0.15);

  --input-bg       : #252836;
  --input-border   : #374151;

  --navbar-bg      : rgba(17,24,39,0.85);
  --navbar-bg-solid: rgba(17,24,39,0.97);
  --card-bg        : #1a1d27;

  --body-bg1       : #0f172a;
  --body-bg2       : #1e2330;
}

/* ────────────────────────────────────────
   System = يعتمد على إعداد الجهاز
──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-body        : #0f1117;
    --bg-surface     : #1a1d27;
    --bg-surface-2   : #1e2330;
    --bg-muted       : #252836;

    --text-primary   : #f1f5f9;
    --text-secondary : #94a3b8;
    --text-muted     : #64748b;

    --border-color   : rgba(255,255,255,0.08);
    --shadow-sm      : 0 1px 6px rgba(0,0,0,0.35);
    --shadow-md      : 0 4px 16px rgba(0,0,0,0.45);

    --accent         : #3b82f6;
    --accent-hover   : #2563eb;
    --accent-subtle  : rgba(59,130,246,0.15);

    --input-bg       : #252836;
    --input-border   : #374151;

    --navbar-bg      : rgba(17,24,39,0.85);
    --navbar-bg-solid: rgba(17,24,39,0.97);
    --card-bg        : #1a1d27;

    --body-bg1       : #0f172a;
    --body-bg2       : #1e2330;
  }
}

/* ────────────────────────────────────────
   Base
──────────────────────────────────────── */
html {
  overflow-x: hidden;
}

body {
  background: linear-gradient(135deg, var(--body-bg1) 0%, var(--body-bg2) 100%);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ────────────────────────────────────────
   Bootstrap overrides
──────────────────────────────────────── */
body,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.navbar,
.table,
.list-group-item,
.offcanvas,
.toast,
.alert {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.card,
.modal-content,
.offcanvas,
.toast {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dropdown-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-muted);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--border-color);
}

.form-control,
.form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.navbar {
  background-color: var(--navbar-bg) !important;
  border-color: var(--border-color) !important;
}

.table {
  color                   : var(--text-primary);
  --bs-table-bg           : var(--card-bg);
  --bs-table-border-color : var(--border-color);
  --bs-table-striped-bg   : var(--bg-surface-2);
  --bs-table-hover-bg     : var(--bg-muted);
}

.list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

hr {
  border-color: var(--border-color);
  opacity: 1;
}

.text-muted {
  color: var(--text-secondary) !important;
}

/* ────────────────────────────────────────
   Generic utility classes
──────────────────────────────────────── */
.bg-surface {
  background-color: var(--bg-surface) !important;
}

.bg-surface-2 {
  background-color: var(--bg-surface-2) !important;
}

.text-primary-theme {
  color: var(--text-primary) !important;
}

.text-secondary-theme {
  color: var(--text-secondary) !important;
}

.border-theme {
  border-color: var(--border-color) !important;
}

.shadow-theme {
  box-shadow: var(--shadow-md) !important;
}