/* ===========================================================================
   theme-pro.css — طبقة ترقية المظهر (Premium skin)
   مبنيّة على المرجعين اللذين أرسلهما المستخدم:
     • النهاري  → Hydra Corps "Payment Overview": أبيض هادئ + لون تركوازي + بطاقة
                  مؤشّر رئيسية برسم بياني مصغّر + شارات حالة ناعمة + جدول أنيق.
     • الليلي   → Control AI Policy Platform: أسود شبه كامل بوهج تركوازي + لوحات
                  زجاجية + أرقام كبيرة جريئة.
   الخيط المشترك: اللون التركوازي (teal). تُحمَّل بعد styles.css ولا تغيّر HTML/JS.
   =========================================================================== */

:root{
  /* لون تركوازي فاخر (من زرّ New invoice في Hydra) */
  --accent:#0e7c86; --accent-2:#0a616a; --accent-soft:#e4f3f4; --accent-shadow:rgba(14,124,134,.26);
  --teal:#0e7c86; --gold:#c6a04e; --violet:#7c6bd9;

  --radius:16px;
  /* محايدات بميل تركوازي خفيف بدل الرمادي الأصمّ */
  --bg:#eef3f3; --surface:#ffffff; --surface-2:#f4f8f8; --line:#e6eded; --line-2:#eef3f3;
  --ink:#12201f; --ink-2:#48605e; --muted:#7b918f;
  --green:#12a678; --green-bg:#e4f6ef; --red:#e2554d; --red-bg:#fceceb; --amber:#d69326; --amber-bg:#fbf1de;
  /* أسماء متغيّرات كانت مستخدمة في الكود بلا تعريف (فكانت تسقط على ألوان فاتحة ثابتة
     وتكسر الوضع الليلي — مثل ترويسة جدول المشاريع). نربطها الآن برموز الثيم الحقيقية. */
  --card:var(--surface); --card2:var(--surface-2); --panel:var(--surface); --panel2:var(--surface-2);
  --border:var(--line); --ok:var(--green);

  --shadow:0 1px 2px rgba(15,40,38,.04), 0 16px 34px -18px rgba(15,40,38,.14);
  --shadow-lg:0 34px 80px -24px rgba(15,40,38,.34);

  /* شريط جانبي فاتح وهادئ (على غرار خلفية Hydra البيضاء) */
  --sidebar-bg:#ffffff; --sidebar-text:#55706e; --sidebar-brand:#12201f; --sidebar-muted:#93a5a3;
  --sidebar-active-bg:var(--accent-soft); --sidebar-active-text:var(--accent);
  --sidebar-active-shadow:none; --sidebar-border:#ecf1f1; --sidebar-hover:#f2f7f7;
  --topbar-bg:rgba(255,255,255,.72);

  /* خلفية بطاقة المؤشّر الرئيسية (تدرّج تركوازي فاتح) + رسم بياني مصغّر */
  --hero-bg:linear-gradient(180deg,#e9f5f5 0%,#f3faf9 100%); --hero-line:#d3ebeb;
  --hero-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230e7c86' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%230e7c86' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20 L300,110 L0,110 Z' fill='url(%23g)'/%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20' fill='none' stroke='%230e7c86' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"]{
  /* Control AI: أسود شبه كامل بوهج تركوازي */
  --accent:#2fd4c0; --accent-2:#1fb3a3; --accent-soft:rgba(47,212,192,.14); --accent-shadow:rgba(0,0,0,.55);
  --teal:#2fd4c0; --gold:#d8b768; --violet:#a78bfa;
  --bg:#070b0b; --surface:#0d1514; --surface-2:#111b1a; --line:#1e2b2a; --line-2:#182322;
  --ink:#e9f1f0; --ink-2:#a7bcb9; --muted:#6f8683;
  --green:#2fd48f; --green-bg:rgba(47,212,143,.14); --red:#f0766c; --red-bg:rgba(240,118,108,.14); --amber:#e6ab3f; --amber-bg:rgba(230,171,63,.14);
  --sidebar-bg:#0a100f; --sidebar-text:#9db2af; --sidebar-brand:#ffffff; --sidebar-muted:#5f7573;
  --sidebar-active-bg:linear-gradient(100deg,rgba(47,212,192,.22),rgba(47,212,192,.06));
  --sidebar-active-text:#5fe7d6; --sidebar-active-shadow:0 0 0 1px rgba(47,212,192,.25) inset;
  --sidebar-border:rgba(255,255,255,.06); --sidebar-hover:rgba(255,255,255,.05);
  --topbar-bg:rgba(10,16,15,.66);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
  --hero-bg:linear-gradient(160deg,rgba(47,212,192,.10),rgba(47,212,192,.02)); --hero-line:rgba(47,212,192,.20);
  --hero-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232fd4c0' stop-opacity='0.45'/%3E%3Cstop offset='1' stop-color='%232fd4c0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20 L300,110 L0,110 Z' fill='url(%23g)'/%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20' fill='none' stroke='%232fd4c0' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* خلفية القماش + وهج تركوازي علوي خفيف (أوضح في الوضع الليلي) */
body{ background:
  radial-gradient(1200px 520px at 100% -8%, rgba(14,124,134,.06), transparent 60%),
  var(--bg); }
[data-theme="dark"] body{ background:
  radial-gradient(900px 520px at 82% -6%, rgba(47,212,192,.10), transparent 58%),
  radial-gradient(700px 460px at 0% 8%, rgba(47,212,192,.05), transparent 60%),
  var(--bg); }

/* ---------- الشريط الجانبي ---------- */
.sidebar{ border-inline-end:1px solid var(--sidebar-border); box-shadow:none; }
[data-theme="dark"] .sidebar{ background:linear-gradient(190deg,#0c1413 0%, var(--sidebar-bg) 70%); box-shadow:16px 0 44px -34px rgba(0,0,0,.7); }
.side-brand{padding:22px 18px 18px}
.side-logo{width:46px;height:46px;border-radius:13px}
.nav .tab{border-radius:11px;padding:10px 12px;font-size:13.5px;font-weight:500}
.nav .tab.active{font-weight:700}
.nav-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sidebar-muted);font-weight:700}
.side-profile{margin:12px 12px 4px;padding:12px;border:1px solid var(--sidebar-border);border-radius:14px;background:var(--sidebar-hover)}

/* ---------- الشريط العلوي (زجاجي) ---------- */
.topbar{ background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line); padding-block:14px; }
.add-btn{border-radius:12px;font-weight:700;box-shadow:0 10px 22px -10px var(--accent-shadow);
  background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.notif-btn{border-radius:12px}

/* ---------- المحتوى ---------- */
.content{padding:28px 34px 90px;max-width:1240px}

/* ---------- بطاقات المؤشّرات (KPI) ---------- */
.stats{grid-template-columns:1.75fr 1fr 1fr 1fr;gap:16px;margin-bottom:28px}
.stat{ border-radius:18px;padding:22px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.stat:hover{transform:translateY(-3px);box-shadow:0 24px 46px -22px rgba(15,40,38,.30)}
.stat::before{inset:18px auto 18px 0;width:5px;border-radius:0 6px 6px 0}
/* توهّج زخرفي بلون الحالة */
.stat::after{content:"";position:absolute;top:-46px;inset-inline-end:-46px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at center,var(--accent-soft),transparent 68%);opacity:.85;pointer-events:none}
.stat.green::after{background:radial-gradient(circle at center,var(--green-bg),transparent 68%)}
.stat.red::after{background:radial-gradient(circle at center,var(--red-bg),transparent 68%)}
.stat.amber::after{background:radial-gradient(circle at center,var(--amber-bg),transparent 68%)}
.stat .lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.stat .val{font-size:31px;font-weight:800;margin-top:10px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .val .cur{font-size:14px}
.stat .sub{margin-top:10px;font-size:12px;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:20px;background:var(--surface-2);color:var(--ink-2);font-weight:700}
.stat.green .sub{background:var(--green-bg);color:var(--green)}
.stat.red .sub{background:var(--red-bg);color:var(--red)}
.stat.amber .sub{background:var(--amber-bg);color:var(--amber)}

/* البطاقة الأولى = بطاقة رئيسية (Hero) مميّزة بخلفية ملوّنة ورقم أكبر (بلا مدرّج) */
.stat:first-child{ background:var(--hero-bg); border-color:var(--hero-line); }
.stat:first-child::before{display:none}
.stat:first-child .lbl{color:var(--ink-2)}
.stat:first-child .val{font-size:37px;position:relative;z-index:1}
.stat:first-child .sub{background:var(--green-bg);color:var(--green);position:relative;z-index:1}

/* ---------- عناوين الأقسام ---------- */
.sec-head{margin:28px 0 16px}
.sec-head h2{position:relative;padding-inline-start:14px;font-size:19px;font-weight:800}
.sec-head h2::before{content:"";position:absolute;inset-block:3px;inset-inline-start:0;width:4px;border-radius:3px;
  background:linear-gradient(var(--accent),var(--accent-2))}

/* ---------- اللوحات والجداول ---------- */
.panel{border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.rep-table th{background:var(--surface-2);font-weight:700;font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted)}
.rep-table th,.rep-table td{border-color:var(--line-2);padding:12px 12px}
.rep-table td{font-variant-numeric:tabular-nums}
.rep-table tbody tr:hover td{background:var(--surface-2)}

/* ---------- الأزرار والحقول والرقائق ---------- */
.btn-ghost{border-radius:12px}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.filters input,.filters select{border-radius:12px;padding:11px 14px}
.filters input:focus,.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chip{border-radius:20px;font-weight:700}
.file-row{border-radius:12px}

/* ---------- عناصر كانت فاتحة ثابتة → تتبع الثيم الآن ---------- */
/* ملاحظة: محرّر المستندات (.doc-editor) يبقى أبيض كـ«ورقة» عمدًا (بطلب المستخدم) */
/* الشارة الصغيرة على التبويب النشط */
.nav .tab.active .nav-badge{ background:var(--surface); color:var(--red) }
/* أي جدول عام آخر (احتياطًا) يرث رموز الثيم */
table.rep-table, table.proj-table{ color:var(--ink) }

/* ---------- جدول المشاريع (يرث الآن رموز الثيم عبر الأسماء المُعرّفة أعلاه) ---------- */
.proj-table-wrap{border-radius:14px}
.proj-table thead th{font-size:12px;letter-spacing:.02em;color:var(--muted);font-weight:700}
.proj-table tbody tr:hover{background:var(--surface-2)}

/* ---------- الجوّال: البطاقة الرئيسية بعرض كامل والبقية عمودان ---------- */
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:first-child{grid-column:1 / -1}
  .content{padding:20px 16px 80px}
}

/* كحلي x نحاسي - هوية المكاتب القانونية (فاتح). تُفعَّل بوسم data-palette على <html> من الخادم. */
[data-palette="navybrass"],[data-theme="dark"][data-palette="navybrass"]{
  color-scheme:light;
  --ink:#0E1D2C; --ink-2:#3F5468; --muted:#6B7D90;
  --accent:#14314A; --accent-2:#0C2135; --accent-soft:#E9EEF5; --accent-shadow:rgba(20,49,74,.22);
  --teal:#14314A; --gold:#A97B33; --navy:#14314A; --navy-2:#0C2135;
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F7F9FC; --line:#E1E8EF; --line-2:#EDF1F6;
  --green:#2F7D5B; --green-bg:#E9F3EE; --red:#C0453F; --red-bg:#FBEDEC; --amber:#A97B33; --amber-bg:#F7F0E1;
  --shadow:0 1px 2px rgba(14,29,44,.05),0 16px 34px -18px rgba(14,29,44,.16);
  --shadow-lg:0 34px 80px -24px rgba(14,29,44,.34);
  --sidebar-bg:#FFFFFF; --sidebar-text:#546A80; --sidebar-brand:#0E1D2C; --sidebar-muted:#8A9AAB;
  --sidebar-active-bg:var(--accent-soft); --sidebar-active-text:var(--accent);
  --sidebar-active-shadow:0 0 0 1px rgba(169,123,51,.34) inset;
  --sidebar-border:#E8EDF3; --sidebar-hover:#F2F6FA;
  --topbar-bg:rgba(255,255,255,.75);
  --hero-bg:linear-gradient(180deg,#EDF2F8 0%,#F8FAFC 100%); --hero-line:#DAE3EE;
  --hero-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23A97B33' stop-opacity='0.28'/%3E%3Cstop offset='1' stop-color='%23A97B33' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20 L300,110 L0,110 Z' fill='url(%23g)'/%3E%3Cpath d='M0,86 L25,74 L50,80 L75,58 L100,64 L125,42 L150,50 L175,30 L200,40 L225,20 L250,30 L275,12 L300,20' fill='none' stroke='%23A97B33' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-palette="navybrass"] body,[data-theme="dark"][data-palette="navybrass"] body{
  background:radial-gradient(1200px 520px at 100% -8%, rgba(169,123,51,.07), transparent 60%), var(--bg);
}
[data-theme="dark"][data-palette="navybrass"] .sidebar{ background:var(--sidebar-bg); box-shadow:none; }