/* =========================================================
   مراحل تتبع ملف المتقدم — CSS موحّد كامل
   يدعم الوضع الفاتح والداكن عبر [data-theme="dark"]
========================================================= */

/* =======================
   1. المتغيرات — Light Mode
======================= */

:root {
  /* الخلفيات */
  --bg:       #e8ecf4;          /* خلفية الصفحة — رمادي مزرق */
  --card:     #f0f4fb;          /* بطاقات — أبيض مُطعّم بزرقة خفيفة جداً */
  --surface:  #ffffff;          /* حقول الإدخال / داخل الجداول */
  --th-bg:    #dde4f0;          /* رأس الجدول — أغمق بخطوة واحدة */

  /* النصوص */
  --text:     #1a2033;          /* نص رئيسي — كحلي داكن */
  --muted:    #5a6480;          /* نص ثانوي */

  /* الحدود */
  --border:   #c8d2e8;          /* حدود واضحة بما يكفي على الخلفية */

  /* علامات/ألوان وظيفية */
  --primary:  #1565c0;          /* أزرق داكن */
  --primary-h:#1251a0;          /* hover */
  --gold:     #b45309;          /* ذهبي/عنبري داكن للقراءة على البطاقات */
  --gold-bg:  #fef3c7;
  --gold-border:#fde68a;
  --gold-hi:  #92400e;          /* hover على الذهبي */
  --success:  #15803d;
  --danger:   #b91c1c;
  --warning:  #d97706;

  /* ظل / زوايا */
  --shadow:   0 1px 6px rgba(26,32,51,.09), 0 3px 14px rgba(26,32,51,.06);
  --radius:   12px;
}

/* =======================
   2. المتغيرات — Dark Mode
======================= */

[data-theme="dark"] {
  --bg:       #0f1219;
  --card:     #181c2a;
  --surface:  #20253a;
  --th-bg:    #1c2133;

  --text:     #dde3f4;
  --muted:    #8b93b2;

  --border:   #2d3454;

  --primary:  #4d8ef0;
  --primary-h:#6aa3ff;
  --gold:     #f6c84a;
  --gold-bg:  #2c2000;
  --gold-border:#5c4200;
  --gold-hi:  #ffd96b;
  --success:  #34d470;
  --danger:   #fc5e5e;
  --warning:  #fbbf24;

  --shadow:   0 1px 6px rgba(0,0,0,.35), 0 3px 14px rgba(0,0,0,.25);
}

/* =========================================================
   PALETTES — 8 ثيمات للشركات
   كل palette تُفعَّل بـ [data-palette="X"] على <html>
   وتتضمن light + dark معاً
========================================================= */

/* ── 1. blue — الافتراضي (يرث :root) ── */
[data-palette="blue"] { /* يرث :root */ }
[data-palette="blue"][data-theme="dark"] { /* يرث dark */ }

/* ── 2. emerald — أخضر زمردي + ذهبي ── */
[data-palette="emerald"] {
  --bg:#e6f2ee; --card:#eef7f3; --surface:#ffffff; --th-bg:#d0ebe2;
  --text:#0e2a1f; --muted:#3d6b57; --border:#a8d5c0;
  --primary:#1a7a52; --primary-h:#136040;
  --gold:#a16207; --gold-bg:#fefce8; --gold-border:#fde68a; --gold-hi:#854d0e;
}
[data-palette="emerald"][data-theme="dark"] {
  --bg:#071410; --card:#0d1f18; --surface:#122b20; --th-bg:#0f2319;
  --text:#d4f0e6; --muted:#6bab8e; --border:#1d4a35;
  --primary:#34c987; --primary-h:#4ddfa0;
}

/* ── 3. royal — بنفسجي ملكي ── */
[data-palette="royal"] {
  --bg:#ede8f5; --card:#f3f0f9; --surface:#ffffff; --th-bg:#ddd5f0;
  --text:#1a0f33; --muted:#5b4d80; --border:#c3b4e8;
  --primary:#6d28d9; --primary-h:#5b21b6;
  --gold:#a16207; --gold-bg:#fefce8; --gold-border:#fde68a; --gold-hi:#854d0e;
}
[data-palette="royal"][data-theme="dark"] {
  --bg:#0d0a18; --card:#16102a; --surface:#1e183a; --th-bg:#1a1330;
  --text:#e8dfff; --muted:#9d8ec8; --border:#2e225a;
  --primary:#a78bfa; --primary-h:#c4b5fd;
}

/* ── 4. sunset — برتقالي دافئ ── */
[data-palette="sunset"] {
  --bg:#fdf0e8; --card:#fef6f0; --surface:#ffffff; --th-bg:#fce3cf;
  --text:#2d1408; --muted:#7a3d1a; --border:#f5c4a0;
  --primary:#c2410c; --primary-h:#9a3409;
  --gold:#b45309; --gold-bg:#fef3c7; --gold-border:#fde68a; --gold-hi:#92400e;
}
[data-palette="sunset"][data-theme="dark"] {
  --bg:#180a02; --card:#261206; --surface:#331a0a; --th-bg:#2b1307;
  --text:#ffe8d6; --muted:#c4784a; --border:#5c2c10;
  --primary:#fb923c; --primary-h:#fdba74;
}

/* ── 5. ocean — أزرق بحري + فيروزي (مزج) ── */
[data-palette="ocean"] {
  --bg:#e0f0f8; --card:#eaf6fb; --surface:#ffffff; --th-bg:#c8e8f4;
  --text:#082033; --muted:#2a6080; --border:#90cce8;
  --primary:#0369a1; --primary-h:#025482;
  --gold:#0e7490; --gold-bg:#ecfeff; --gold-border:#a5f3fc; --gold-hi:#0c5a6e;
}
[data-palette="ocean"][data-theme="dark"] {
  --bg:#020f18; --card:#071a28; --surface:#0b2235; --th-bg:#091d2e;
  --text:#d0edff; --muted:#5baad0; --border:#0d3350;
  --primary:#38bdf8; --primary-h:#7dd3fc;
}

/* ── 6. rosegold — وردي ذهبي (مزج) ── */
[data-palette="rosegold"] {
  --bg:#fce8ee; --card:#fef0f4; --surface:#ffffff; --th-bg:#f9d5df;
  --text:#2d0a14; --muted:#8b3a52; --border:#f0a8bc;
  --primary:#be185d; --primary-h:#9d174d;
  --gold:#b45309; --gold-bg:#fef9e7; --gold-border:#fde68a; --gold-hi:#92400e;
}
[data-palette="rosegold"][data-theme="dark"] {
  --bg:#180407; --card:#250810; --surface:#320c18; --th-bg:#2b0a13;
  --text:#ffe0ec; --muted:#c06a88; --border:#5c1028;
  --primary:#f472b6; --primary-h:#f9a8d4;
}

/* ── 7. slate — رمادي احترافي ── */
[data-palette="slate"] {
  --bg:#e8eaed; --card:#f1f2f4; --surface:#ffffff; --th-bg:#dde0e4;
  --text:#0f1117; --muted:#505868; --border:#c4c9d4;
  --primary:#374151; --primary-h:#1f2937;
  --gold:#b45309; --gold-bg:#fef3c7; --gold-border:#fde68a; --gold-hi:#92400e;
}
[data-palette="slate"][data-theme="dark"] {
  --bg:#0a0c0f; --card:#131619; --surface:#1c2025; --th-bg:#181c20;
  --text:#e2e6ef; --muted:#8892a4; --border:#262c35;
  --primary:#94a3b8; --primary-h:#cbd5e1;
}

/* ── 8. forest — أخضر غابي + ترابي (مزج) ── */
[data-palette="forest"] {
  --bg:#eaefe6; --card:#f2f5ef; --surface:#ffffff; --th-bg:#d8e4d2;
  --text:#142008; --muted:#4a6635; --border:#b0c9a0;
  --primary:#3d6b1e; --primary-h:#2f5218;
  --gold:#92400e; --gold-bg:#fefce8; --gold-border:#d4a76a; --gold-hi:#78350f;
}
[data-palette="forest"][data-theme="dark"] {
  --bg:#060e03; --card:#0c1808; --surface:#122210; --th-bg:#0f1d0d;
  --text:#d8f0cc; --muted:#6a9b52; --border:#1c3c14;
  --primary:#86d46a; --primary-h:#a8e890;
}

/* ── الألوان الجديدة ──────────────────────────────────────── */
[data-palette="sky"] {
  --bg:#e6f4fb; --card:#eef8fd; --surface:#fff; --th-bg:#cce8f6;
  --text:#022a3a; --muted:#2a7090; --border:#99d4ee;
  --primary:#0284c7; --primary-h:#016da0;
}
[data-palette="sky"][data-theme="dark"] {
  --bg:#020e16; --card:#061824; --surface:#0a2030; --th-bg:#082038;
  --text:#cceeff; --muted:#4aaecc; --border:#0e4060;
  --primary:#38bdf8; --primary-h:#7dd3fc;
}
[data-palette="navy"] {
  --bg:#e8eaf4; --card:#eef0f8; --surface:#fff; --th-bg:#d0d4ec;
  --text:#0d1133; --muted:#3a4070; --border:#b0b8e0;
  --primary:#1e3a8a; --primary-h:#162c6e;
}
[data-palette="navy"][data-theme="dark"] {
  --bg:#04060f; --card:#080c1c; --surface:#0d1228; --th-bg:#0e1432;
  --text:#c8d4f8; --muted:#5566aa; --border:#1a2460;
  --primary:#6382d8; --primary-h:#8aa0e8;
}
[data-palette="indigo"] {
  --bg:#eceef8; --card:#f2f3fb; --surface:#fff; --th-bg:#d8dcf4;
  --text:#111330; --muted:#3d3f72; --border:#bcc2e8;
  --primary:#3730a3; --primary-h:#2b258a;
}
[data-palette="indigo"][data-theme="dark"] {
  --bg:#05050e; --card:#0c0c1e; --surface:#11112c; --th-bg:#141438;
  --text:#d4d4f8; --muted:#6060b0; --border:#222280;
  --primary:#818cf8; --primary-h:#a5b4fc;
}
[data-palette="teal"] {
  --bg:#e4f4f2; --card:#ecf8f6; --surface:#fff; --th-bg:#c8ecea;
  --text:#042422; --muted:#1f6b68; --border:#90d8d4;
  --primary:#0d9488; --primary-h:#087770;
}
[data-palette="teal"][data-theme="dark"] {
  --bg:#020c0b; --card:#071816; --surface:#0a2220; --th-bg:#0e2c2a;
  --text:#ccf0ee; --muted:#30b0a8; --border:#104c48;
  --primary:#2dd4bf; --primary-h:#5eead4;
}
[data-palette="lime"] {
  --bg:#eef5e2; --card:#f4f9ec; --surface:#fff; --th-bg:#dbecc8;
  --text:#182005; --muted:#3a5c12; --border:#b4d87e;
  --primary:#65a30d; --primary-h:#4d7b0a;
}
[data-palette="lime"][data-theme="dark"] {
  --bg:#050800; --card:#0c1202; --surface:#101a04; --th-bg:#162206;
  --text:#d8f0a0; --muted:#70a030; --border:#243c08;
  --primary:#a3e635; --primary-h:#bef264;
}
[data-palette="violet"] {
  --bg:#f0ebf8; --card:#f5f1fb; --surface:#fff; --th-bg:#e2d8f2;
  --text:#1c0f30; --muted:#6040a0; --border:#ccb8e8;
  --primary:#7c3aed; --primary-h:#6830cc;
}
[data-palette="violet"][data-theme="dark"] {
  --bg:#07030f; --card:#100820; --surface:#160c2e; --th-bg:#1c1040;
  --text:#e8d8ff; --muted:#9060d0; --border:#2e1870;
  --primary:#a78bfa; --primary-h:#c4b5fd;
}
[data-palette="pink"] {
  --bg:#fce8f2; --card:#fef0f7; --surface:#fff; --th-bg:#f8cce4;
  --text:#2d0820; --muted:#8a3060; --border:#f0a0cc;
  --primary:#db2777; --primary-h:#b81f60;
}
[data-palette="pink"][data-theme="dark"] {
  --bg:#0f020a; --card:#1e0414; --surface:#2a061c; --th-bg:#360828;
  --text:#ffd4ec; --muted:#cc5090; --border:#600840;
  --primary:#f472b6; --primary-h:#f9a8d4;
}
[data-palette="fuchsia"] {
  --bg:#faeaf8; --card:#fcf0fb; --surface:#fff; --th-bg:#f2ccf0;
  --text:#280828; --muted:#801878; --border:#e8a0e0;
  --primary:#a21caf; --primary-h:#88188f;
}
[data-palette="fuchsia"][data-theme="dark"] {
  --bg:#0c020c; --card:#1a041c; --surface:#240628; --th-bg:#300836;
  --text:#f8d0f8; --muted:#c040c0; --border:#581060;
  --primary:#e879f9; --primary-h:#f0abfc;
}
[data-palette="crimson"] {
  --bg:#fce8ea; --card:#fef0f1; --surface:#fff; --th-bg:#f8ccd0;
  --text:#2d060a; --muted:#8a1020; --border:#f0a0a8;
  --primary:#be123c; --primary-h:#9c0f32;
}
[data-palette="crimson"][data-theme="dark"] {
  --bg:#0f0204; --card:#1e040a; --surface:#2a0610; --th-bg:#360818;
  --text:#ffd4d8; --muted:#cc3050; --border:#600820;
  --primary:#fb7185; --primary-h:#fda4af;
}
[data-palette="amber"] {
  --bg:#fdf4e0; --card:#fef8ec; --surface:#fff; --th-bg:#fce8be;
  --text:#2d1a00; --muted:#8a5200; --border:#f8d888;
  --primary:#d97706; --primary-h:#b86005;
}
[data-palette="amber"][data-theme="dark"] {
  --bg:#0e0800; --card:#1c1000; --surface:#281600; --th-bg:#382000;
  --text:#ffeec0; --muted:#c08020; --border:#604000;
  --primary:#fbbf24; --primary-h:#fcd34d;
}
[data-palette="orange"] {
  --bg:#fdf2e8; --card:#fef7f0; --surface:#fff; --th-bg:#fce0c8;
  --text:#2d1000; --muted:#8a3c00; --border:#f8c090;
  --primary:#ea580c; --primary-h:#c44a08;
}
[data-palette="orange"][data-theme="dark"] {
  --bg:#0f0500; --card:#1e0c00; --surface:#2c1200; --th-bg:#3a1800;
  --text:#ffe0c0; --muted:#cc6020; --border:#663000;
  --primary:#fb923c; --primary-h:#fdba74;
}
[data-palette="cyan"] {
  --bg:#e2f6f8; --card:#eafafc; --surface:#fff; --th-bg:#c8f0f4;
  --text:#022430; --muted:#0a7080; --border:#88e0e8;
  --primary:#0891b2; --primary-h:#067490;
}
[data-palette="cyan"][data-theme="dark"] {
  --bg:#010c10; --card:#031820; --surface:#04222e; --th-bg:#052c3c;
  --text:#c0f4ff; --muted:#20b0cc; --border:#085070;
  --primary:#22d3ee; --primary-h:#67e8f9;
}
[data-palette="zinc"] {
  --bg:#f2f2f3; --card:#f7f7f8; --surface:#fff; --th-bg:#e2e2e4;
  --text:#131316; --muted:#52525b; --border:#d4d4d8;
  --primary:#52525b; --primary-h:#3f3f46;
}
[data-palette="zinc"][data-theme="dark"] {
  --bg:#090909; --card:#141418; --surface:#1c1c22; --th-bg:#222228;
  --text:#e4e4e8; --muted:#80808a; --border:#303038;
  --primary:#a1a1aa; --primary-h:#d4d4d8;
}
[data-palette="stone"] {
  --bg:#f3f1ef; --card:#f8f6f4; --surface:#fff; --th-bg:#e5e0da;
  --text:#1c1917; --muted:#6b5f58; --border:#d6cfc8;
  --primary:#78716c; --primary-h:#5e5550;
}
[data-palette="stone"][data-theme="dark"] {
  --bg:#0a0908; --card:#141210; --surface:#1e1a18; --th-bg:#282420;
  --text:#e8e0d8; --muted:#908070; --border:#3a3430;
  --primary:#a8a09a; --primary-h:#d0c8c0;
}
[data-palette="gold"] {
  --bg:#faf5e4; --card:#fdf9ee; --surface:#fff; --th-bg:#f4e8c0;
  --text:#2d2000; --muted:#806000; --border:#ecd880;
  --primary:#ca8a04; --primary-h:#a87003;
}
[data-palette="gold"][data-theme="dark"] {
  --bg:#0e0b00; --card:#1c1600; --surface:#282000; --th-bg:#342c00;
  --text:#fff0a0; --muted:#c0a020; --border:#605000;
  --primary:#eab308; --primary-h:#fde047;
}
[data-palette="ivory"] {
  --bg:#f9f6ee; --card:#fdfaf4; --surface:#fff; --th-bg:#ede8d8;
  --text:#2a2010; --muted:#7a6848; --border:#d8cca8;
  --primary:#a67c52; --primary-h:#886040;
}
[data-palette="ivory"][data-theme="dark"] {
  --bg:#0c0a06; --card:#181408; --surface:#221e0e; --th-bg:#2c2814;
  --text:#f0e8d0; --muted:#a09060; --border:#484030;
  --primary:#d4a870; --primary-h:#e8c090;
}



/* Smooth transitions when switching themes */
*, *::before, *::after {
  transition:
    background-color .22s ease,
    border-color     .22s ease,
    color            .18s ease,
    box-shadow       .22s ease;
}

/* =======================
   3. Reset بسيط
======================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 14px;
  font-family: "Segoe UI", Tahoma, Arial, system-ui, -apple-system, sans-serif;
  direction: rtl;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

/* =======================
   4. Layout
======================= */

.page {
  padding: 14px;
  max-width: 1150px;
  margin: 0 auto;
}

.card {
  background: var(--card);
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

h1, h2, h3, h4 {
  margin: 0 0 10px 0;
  line-height: 1.35;
  color: var(--text);
}

.small {
  font-size: 13px;
  color: var(--muted);
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.nowrap { white-space: nowrap; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

a {
  color: var(--primary);
  text-decoration: none;
}

/* =======================
   5. الأزرار
   ─────────────────────
   أنواع متاحة:
   .btn                 → رمادي ثانوي (الافتراضي)
   .btn.btn-primary     → أزرق رئيسي
   .btn.btn-gold        → ذهبي/عنبري ✨
   .btn.btn-success     → أخضر
   .btn.btn-danger      → أحمر
   .btn.btn-outline     → مخطط شفاف (يتكيف مع الثيم)
======================= */

.btn,
a.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .1s ease;
  user-select: none;
}

.btn:hover,
a.button:hover,
button:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* ── أزرق رئيسي ── */
.btn.btn-primary,
.btn-primary,
a.button.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn.btn-primary:hover,
.btn-primary:hover {
  background: var(--primary-h);
  border-color: var(--primary-h);
}

/* ── ذهبي / عنبري ── */
.btn.btn-gold,
.btn-gold,
a.button.btn-gold {
  background: var(--gold-bg);
  color: var(--gold);
  border-color: var(--gold-border);
  font-weight: 700;
}
.btn.btn-gold:hover,
.btn-gold:hover {
  background: var(--gold-border);
  color: var(--gold-hi);
  border-color: var(--gold-hi);
}

/* ── أخضر ── */
.btn.btn-success,
.btn-success,
.btn.btn-green,
.btn-green,
a.button.btn-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.btn.btn-success:hover,
.btn-success:hover {
  filter: brightness(1.08);
}

/* ── أحمر خطر ── */
.btn.btn-danger,
.btn-danger,
a.button.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn.btn-danger:hover,
.btn-danger:hover {
  filter: brightness(1.08);
}

/* ── مخطط Outline ── */
.btn.btn-outline,
a.button.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* ── (توافق قديم) secondary ── */
.btn.secondary,
a.button.secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Disabled */
.btn:disabled,
button:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =======================
   6. عناصر الإدخال
======================= */

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(69,130,236,.18);
}

label {
  display: block;
  margin: 10px 0 6px 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* =======================
   7. الجداول
======================= */

.table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-size: 14px;
}

td {
  background: var(--surface);
  color: var(--text);
}

th {
  background: var(--th-bg);
  font-weight: 700;
  color: var(--text);
}

tr:last-child td { border-bottom: none; }

/* =======================
   8. البادجات
======================= */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-success {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d;
}
.badge-warning {
  background: #fef9c3;
  border-color: #fde68a;
  color: #92400e;
}
.badge-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.badge-info {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.badge-muted {
  background: var(--th-bg);
  border-color: var(--border);
  color: var(--muted);
}
.badge-gold {
  background: var(--gold-bg);
  border-color: var(--gold-border);
  color: var(--gold);
  font-weight: 700;
}

/* Dark Mode badge adjustments */
[data-theme="dark"] .badge-success { background:#052e16; border-color:#14532d; color:#4ade80; }
[data-theme="dark"] .badge-warning { background:#1c1000; border-color:#451a03; color:#fbbf24; }
[data-theme="dark"] .badge-danger  { background:#1c0000; border-color:#450a0a; color:#f87171; }
[data-theme="dark"] .badge-info    { background:#0a1628; border-color:#1e3a5f; color:#60a5fa; }

/* =======================
   9. الملفات
======================= */

.file-link {
  display: block;
  margin-top: 6px;
  word-break: break-word;
}

/* =======================
   10. Topbar + Breadcrumb
======================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.topbar a {
  font-weight: 700;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.crumbs a       { color: var(--primary); font-weight: 700; }
.crumbs .sep    { opacity: .55; }
.crumb-current  { color: var(--text); font-weight: 700; }

.topbar-title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* =======================
   11. zأيقونة تقويم Flatpickr
======================= */

.fp-wrap { position: relative; }
.fp-wrap .flatpickr-input,
.fp-wrap input {
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 00-2 2v2h18V6a2 2 0 00-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 002 2h14a2 2 0 002-2V10z'/%3E%3C/svg%3E");
}

/* =======================
   12. Filters bar
======================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}

.field input,
.field select {
  padding: 8px 10px;
  min-width: 160px;
}

/* =======================
   13. Pagination
======================= */

.pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
}

.page-link {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.page-link:hover       { border-color: var(--primary); color: var(--primary); }
.page-link.active      { border-color: var(--primary); color: var(--primary); }

/* =======================
   14. Dashboard Stats
======================= */

.dashboard-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 22px;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stats-total {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4fa3ff, #1565c0 68%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(25,118,210,.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-align: center;
}

.stats-total strong { font-size: 28px; line-height: 1; display: block; }
.stats-total span   { font-size: 11px; opacity: .95; margin-top: 5px; }

.stats-panel {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.status-bar {
  display: flex;
  width: 100%;
  min-height: 42px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--th-bg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.status-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s;
}
.status-seg:hover { filter: brightness(.94); }

.seg-active   { background: #1565c0; }
.seg-done     { background: #15803d; }
.seg-hold     { background: #d97706; }
.seg-canceled { background: #b91c1c; }

.stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.stage-pill b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 11px;
  border: 1px solid var(--border);
}

.stage-pill:hover { background: var(--th-bg); border-color: var(--primary); }

/* =======================
   15. Bulk Actions Bar
======================= */

.bulkbar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  margin: 12px 0 14px;
}

.bulkbar-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bulkbar-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulkchip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  transition: border-color .14s, background .14s;
}
.bulkchip:hover { border-color: var(--primary); }
.bulkchip input { transform: scale(1.05); }

.bulkchip.danger {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}
[data-theme="dark"] .bulkchip.danger {
  border-color: #450a0a;
  background: #1c0000;
  color: #fc5e5e;
}

.bulkbar-actions {
  margin-right: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.bulkbar-bottom {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.bulkfield {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
}

.bulkfield select,
.bulkfield input[type="text"] {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  min-width: 180px;
}

.bulkfield input[type="checkbox"] { transform: scale(1.1); }
.bulk-note { font-size: 12px; color: var(--muted); line-height: 1.4; }
.bulk-hidden { display: none; }

.bulk-confirm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(198, 40, 40, .25);
  background: rgba(198, 40, 40, .08);
  border-radius: 999px;
  color: #b71c1c;
  font-weight: 700;
}

.bulk-confirm-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  transform: none;
  accent-color: #c62828;
  flex: 0 0 auto;
}

/* =======================
   16. زر Dark-Mode Toggle
======================= */

.topbar-theme-toggle {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}

.topbar-theme-toggle:hover {
  border-color: var(--primary);
  background: var(--th-bg);
  color: var(--primary);
  transform: translateY(-1px);
}

/* =======================
   17. Mini KPI cards (statistics)
======================= */

.mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mini-kpi {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface);
}

.mini-kpi .k { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mini-kpi .v { font-size: 24px; font-weight: 700; color: var(--text); }

/* =======================
   18. Responsive
======================= */

@media (min-width: 900px) {
  .page  { padding: 18px; }
  .card  { padding: 18px; }
}

@media (max-width: 768px) {
  body { padding: 10px; }
  .field input, .field select { min-width: 135px; }
  .stats-row { align-items: stretch; }
  .stats-total { width: 78px; height: 78px; }
  .status-bar { min-height: 38px; }
  .status-seg { font-size: 11px; padding: 0 8px; }
  .mini-kpis  { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 480px) {
  .mini-kpis { grid-template-columns: 1fr 1fr; }
}

/* =======================
   19. مبدّل اللغة (Lang Switcher)
======================= */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  background: var(--surface);
  flex-shrink: 0;
}

.lang-btn {
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
  transition: background .13s, color .13s;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* حجم أصغر داخل hero المتقدم */
.hero-card .lang-btn {
  padding: 3px 7px;
  font-size: 11px;
}
.hero-card .lang-switcher {
  padding: 2px;
  border-radius: 8px;
}

.lang-btn:hover {
  background: var(--th-bg);
  color: var(--text);
}

.lang-btn.lang-active {
  background: var(--primary);
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(21,101,192,.25);
}

/* =======================
   20. دعم LTR (EN / FR)
   يعمل تلقائياً عبر dir="ltr" على <html>
======================= */

html[dir="ltr"] body {
  direction: ltr;
}

html[dir="ltr"] th,
html[dir="ltr"] td {
  text-align: left;
}

html[dir="ltr"] .filters,
html[dir="ltr"] .crumbs,
html[dir="ltr"] .pagination,
html[dir="ltr"] .topbar-actions {
  direction: ltr;
}

html[dir="ltr"] .bulkbar-actions {
  margin-right: 0;
  margin-left: auto;
}


html[dir="ltr"] .fp-wrap .flatpickr-input,
html[dir="ltr"] .fp-wrap input {
  padding-left: 12px;
  padding-right: 40px;
  background-position: right 12px center;
}

html[dir="ltr"] .stage-number {
  inset-inline-start: auto;
  inset-inline-end: -10px;
}

/* Country Flag Token Image Fix */
.country-flag-token.is-image { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  vertical-align: middle; 
}
.country-flag-token.is-image img { 
  max-width: 1.5em; 
  max-height: 1.5em; 
  border-radius: 4px; 
  object-fit: contain; 
}


/* =========================================================
   SHARED UI COMPONENTS
========================================================= */
.ui-alert{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;margin-bottom:14px;border:1px solid transparent;border-radius:12px;font-size:13px;font-weight:700;line-height:1.75}.ui-alert-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:900}.ui-alert-message{flex:1;min-width:0}.ui-alert.success{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.28);color:#166534}.ui-alert.success .ui-alert-icon{background:#166534;color:#fff}.ui-alert.error{background:rgba(220,38,38,.09);border-color:rgba(220,38,38,.25);color:#991b1b}.ui-alert.error .ui-alert-icon{background:#b91c1c;color:#fff}.ui-alert.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#92400e}.ui-alert.warning .ui-alert-icon{background:#b45309;color:#fff}.ui-alert.info{background:rgba(37,99,235,.09);border-color:rgba(37,99,235,.25);color:#1d4ed8}.ui-alert.info .ui-alert-icon{background:#1d4ed8;color:#fff}
[data-theme="dark"] .ui-alert{color:var(--text)}
.ui-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.ui-badge.success{background:#dcfce7;color:#166534}.ui-badge.danger{background:#fee2e2;color:#991b1b}.ui-badge.warning{background:#fef3c7;color:#92400e}.ui-badge.info{background:#dbeafe;color:#1d4ed8}.ui-badge.neutral{background:var(--th-bg);color:var(--muted)}
.ui-empty-state{display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;color:var(--muted)}.ui-empty-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--primary);font-size:22px}.ui-empty-state h3{margin:0;color:var(--text);font-size:16px}.ui-empty-state p{max-width:520px;margin:7px 0 0;line-height:1.8}.ui-empty-state .btn{margin-top:14px}
.ui-field{display:flex;flex-direction:column;gap:6px}.ui-field>label{margin:0;font-weight:700;color:var(--text)}.ui-field-help{display:block;color:var(--muted);font-size:11px;line-height:1.6}.ui-required{margin-inline-start:3px;color:var(--danger)}
.ui-modal[hidden]{display:none}.ui-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px}.ui-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgba(2,6,23,.6);cursor:default}.ui-modal-panel{position:relative;z-index:1;width:min(620px,100%);max-height:min(86vh,820px);overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:0 24px 80px rgba(2,6,23,.35)}.ui-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}.ui-modal-header h2{margin:0;font-size:18px}.ui-modal-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:22px;cursor:pointer}.ui-modal-body{padding:18px}.ui-modal-open body{overflow:hidden}
@media(max-width:640px){.ui-alert{padding:12px}.ui-modal{padding:10px}.ui-modal-panel{max-height:92vh;border-radius:14px}}
.ui-table-shell{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:12px}.ui-table{width:100%;border-collapse:collapse}.ui-table th,.ui-table td{text-align:start;vertical-align:middle;padding:11px 12px;border-bottom:1px solid var(--border)}.ui-table th{background:var(--th-bg);color:var(--muted);font-size:12px}.ui-table tbody tr:last-child td{border-bottom:0}

/* =======================
   20. Unified application sidebar
======================= */
:root{--app-sidebar-width:264px;--app-sidebar-collapsed-width:78px}
body.has-app-sidebar{padding-inline-start:calc(var(--app-sidebar-width) + 14px);transition:padding-inline-start .22s ease}
body.has-app-sidebar.app-sidebar-collapsed{padding-inline-start:calc(var(--app-sidebar-collapsed-width) + 14px)}
.app-sidebar{position:fixed;z-index:1100;inset-block:0;inset-inline-start:0;display:flex;width:var(--app-sidebar-width);flex-direction:column;border-inline-end:1px solid var(--border);background:color-mix(in srgb,var(--card) 96%,var(--primary) 4%);box-shadow:0 0 34px rgba(15,23,42,.08);transition:width .22s ease,transform .22s ease;color:var(--text)}
.app-sidebar-brand{display:flex;min-height:78px;align-items:center;gap:8px;padding:14px 12px;border-bottom:1px solid var(--border)}
.app-sidebar-brand-link{display:flex;min-width:0;flex:1;align-items:center;gap:11px;color:inherit;text-decoration:none}
.app-sidebar-brand-mark{display:inline-flex;width:42px;height:42px;flex:0 0 42px;align-items:center;justify-content:center;overflow:hidden;padding:3px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:14px;background:var(--surface);box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 18%,transparent)}.app-sidebar-brand-image{display:block;width:100%;height:100%;border-radius:10px;object-fit:contain}
.app-sidebar-brand-copy,.app-sidebar-account-copy{display:flex;min-width:0;flex-direction:column}.app-sidebar-brand-copy strong,.app-sidebar-account-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sidebar-brand-copy small,.app-sidebar-account-copy small{color:var(--muted);font-size:11px}
.app-sidebar-collapse{display:inline-flex;width:30px;height:30px;flex:0 0 30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:22px;cursor:pointer;transition:.18s ease}.app-sidebar-collapse:hover{border-color:var(--primary);color:var(--primary)}
html[dir=ltr] .app-sidebar-collapse{transform:rotate(180deg)}
.app-sidebar-nav{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:14px 10px;scrollbar-width:thin}
.app-sidebar-group{display:flex;flex-direction:column;gap:4px}.app-sidebar-group-label{padding:5px 11px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.app-sidebar-tone-blue{--nav-accent:#2878d4}.app-sidebar-tone-violet{--nav-accent:#7656d8}.app-sidebar-tone-amber{--nav-accent:#d17a08}.app-sidebar-tone-cyan{--nav-accent:#168fa3}.app-sidebar-tone-emerald{--nav-accent:#168b6b}.app-sidebar-tone-slate{--nav-accent:#64748b}
.app-sidebar-link{position:relative;display:flex;min-height:46px;align-items:center;gap:12px;padding:7px 10px;border:1px solid transparent;border-radius:13px;color:var(--text);font-size:13px;font-weight:750;text-decoration:none;transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s}.app-sidebar-link:hover{border-color:color-mix(in srgb,var(--nav-accent) 28%,var(--border));background:color-mix(in srgb,var(--nav-accent) 8%,var(--surface));color:var(--nav-accent);transform:translateX(-1px)}html[dir=ltr] .app-sidebar-link:hover{transform:translateX(1px)}.app-sidebar-link:focus-visible{outline:3px solid color-mix(in srgb,var(--nav-accent) 24%,transparent);outline-offset:2px}.app-sidebar-link.active{border-color:color-mix(in srgb,var(--nav-accent) 28%,transparent);background:color-mix(in srgb,var(--nav-accent) 12%,var(--surface));color:var(--nav-accent);box-shadow:inset 3px 0 0 var(--nav-accent)}html[dir=rtl] .app-sidebar-link.active{box-shadow:inset -3px 0 0 var(--nav-accent)}
.app-sidebar-icon{display:inline-flex;width:32px;height:32px;flex:0 0 32px;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--nav-accent) 20%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--nav-accent) 9%,var(--surface));color:var(--nav-accent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 38%,transparent);transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s}.app-sidebar-icon-svg{display:block;width:18px;height:18px}.app-sidebar-icon-fallback{font-size:12px;font-weight:900;line-height:1}.app-sidebar-link:hover .app-sidebar-icon{background:color-mix(in srgb,var(--nav-accent) 15%,var(--surface));border-color:color-mix(in srgb,var(--nav-accent) 34%,var(--border));transform:scale(1.04)}.app-sidebar-link.active .app-sidebar-icon{border-color:var(--nav-accent);background:var(--nav-accent);color:#fff;box-shadow:0 5px 13px color-mix(in srgb,var(--nav-accent) 28%,transparent)}.app-sidebar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-sidebar-footer{display:grid;gap:8px;padding:12px 10px;border-top:1px solid var(--border)}.app-sidebar-account{display:flex;min-width:0;align-items:center;gap:10px;padding:6px 9px}.app-sidebar-avatar{display:inline-flex;width:34px;height:34px;flex:0 0 34px;align-items:center;justify-content:center;border-radius:11px;background:var(--th-bg);color:var(--primary);font-weight:900}.app-sidebar-account-copy strong{font-size:12px}.app-sidebar-logout{--nav-accent:var(--danger);color:var(--danger)}
.app-sidebar-overlay{position:fixed;z-index:1090;inset:0;background:rgba(2,6,23,.48);backdrop-filter:blur(2px)}.app-sidebar-overlay[hidden]{display:none}.app-sidebar-mobile-trigger{display:none}
body.app-sidebar-collapsed .app-sidebar{width:var(--app-sidebar-collapsed-width)}body.app-sidebar-collapsed .app-sidebar-brand{padding-inline:10px}body.app-sidebar-collapsed .app-sidebar-brand-copy,body.app-sidebar-collapsed .app-sidebar-group-label,body.app-sidebar-collapsed .app-sidebar-label,body.app-sidebar-collapsed .app-sidebar-account-copy{display:none}body.app-sidebar-collapsed .app-sidebar-brand-link{justify-content:center}body.app-sidebar-collapsed .app-sidebar-collapse{position:absolute;inset-block-start:61px;inset-inline-end:-14px;background:var(--card);transform:rotate(180deg)}html[dir=ltr] body.app-sidebar-collapsed .app-sidebar-collapse{transform:none}body.app-sidebar-collapsed .app-sidebar-link{justify-content:center;padding-inline:8px}body.app-sidebar-collapsed .app-sidebar-account{justify-content:center}
@media(min-width:1025px){
  body.app-sidebar-collapsed .app-sidebar-nav{gap:3px;padding:10px 8px}
  body.app-sidebar-collapsed .app-sidebar-group{gap:1px}
  body.app-sidebar-collapsed .app-sidebar[data-sidebar-role="superadmin"] .app-sidebar-group{gap:8px}
  body.app-sidebar-collapsed .app-sidebar-link{min-height:42px;padding:2px 7px;border-radius:12px}
  body.app-sidebar-collapsed .app-sidebar-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px}
  body.app-sidebar-collapsed .app-sidebar-icon-svg{width:22px;height:22px}
  body.app-sidebar-collapsed .app-sidebar-footer{gap:4px;padding:8px}
  body.app-sidebar-collapsed .app-sidebar-account{padding:2px 7px}
  body.app-sidebar-collapsed .app-sidebar-avatar{width:38px;height:38px;flex-basis:38px;font-size:16px}
}@media(max-width:1024px){body.has-app-sidebar,body.has-app-sidebar.app-sidebar-collapsed{padding-inline-start:10px}.app-sidebar{width:min(304px,88vw);box-shadow:0 18px 70px rgba(2,6,23,.25)}html[dir=rtl] .app-sidebar{transform:translateX(105%)}html[dir=ltr] .app-sidebar{transform:translateX(-105%)}body.app-sidebar-open .app-sidebar{transform:translateX(0)}.app-sidebar-collapse{display:none}.app-sidebar-mobile-trigger{position:fixed;z-index:1080;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow);color:var(--text);font-size:20px;cursor:pointer}.has-app-sidebar .topbar{padding-inline-start:48px}.has-app-sidebar .page{padding-inline:4px}.app-sidebar-open{overflow:hidden}}
@media(max-width:620px){.has-app-sidebar .topbar{align-items:flex-start}.has-app-sidebar .topbar-actions{width:100%}.has-app-sidebar .topbar-actions>.btn{flex:1;justify-content:center}.app-sidebar-mobile-trigger{width:38px;height:38px}}
.public-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px}.public-legal-links a{color:inherit;text-decoration:none}.public-legal-links a:hover{text-decoration:underline}