/* هوية النظام من الداخل بألوان حساب المعلم وشعار جمعية بناء: أزرق مخضر عميق (#1d4750 → #3c7884)
   وذهبي غامق (#c8a96a / #9a7b45) على خلفية فاتحة دافئة. يُربط في index.html عبر scripts/patch-system-theme.mjs.
   الألوان تُعرَّف كمتغيرات --c-* التي يبني عليها التنسيق الأساسي، فتتبدل الأزرار والروابط
   والشارات (indigo/blue/violet/purple/sky/primary) دفعة واحدة دون المساس بالمكوّنات. */
:root {
  --c-primary-50: 242 248 248;
  --c-primary-100: 226 238 240;
  --c-primary-200: 195 220 224;
  --c-primary-300: 149 192 200;
  --c-primary-400: 90 154 166;
  --c-primary-500: 60 120 132;
  --c-primary-600: 46 104 116;
  --c-primary-700: 36 85 95;
  --c-primary-800: 29 71 80;
  --c-primary-900: 22 56 64;

  --c-accent-50: 251 247 238;
  --c-accent-100: 248 241 225;
  --c-accent-200: 234 217 176;
  --c-accent-300: 220 196 142;
  --c-accent-400: 200 169 106;
  --c-accent-500: 179 146 85;
  --c-accent-600: 154 123 69;
  --c-accent-700: 125 98 50;
  --c-accent-800: 99 77 40;
  --c-accent-900: 74 58 31;

  --c-canvas: 247 245 238;
  --c-surface: 255 255 255;
  --c-ink: 29 71 80;
  --c-ink-muted: 84 110 117;
  --c-ink-subtle: 140 156 156;
  --c-line: 228 224 210;
  --c-line-strong: 216 208 186;
  --c-separator: 236 231 218;
  --c-sidebar: 29 71 80;
  --c-sidebar-idle: 226 238 240;
  --c-sidebar-icon: 234 217 176;

  --shadow-card: 0 1px 2px 0 rgb(29 71 80 / .06), 0 8px 20px -14px rgb(29 71 80 / .28);
  --shadow-card-pop: 0 12px 28px -12px rgb(29 71 80 / .32);
  --shadow-overlay: 0 24px 54px -14px rgb(29 71 80 / .35);

  /* المتغيرات القديمة (بنفسجية) لبعض الصفحات */
  --primary: #2e6874;
  --primary-dark: #1d4750;
  --primary-light: #5a9aa6;
  --primary-bg: #f2f8f8;
  --secondary: #b39255;
  --secondary-dark: #9a7b45;
  --secondary-light: #dcc48e;
  --gradient-primary: linear-gradient(135deg, #1d4750 0%, #3c7884 100%);
  --gradient-secondary: linear-gradient(135deg, #e3c98f 0%, #c8a96a 100%);
  --shadow-glow: 0 0 20px rgba(46, 104, 116, .35);
  --pd-teal: #2e6874;
  --pd-teal-dark: #1d4750;
  --pd-teal-line: #95c0c8;

  --tb-900: #1d4750;
  --tb-800: #24555f;
  --tb-700: #2e6874;
  --tb-600: #3c7884;
  --tb-500: #5a9aa6;
  --tb-100: #e2eef0;
  --tb-50: #f2f8f8;
  --tb-gold: #c8a96a;
  --tb-gold-dark: #9a7b45;
  --tb-gold-light: #ead9b0;
  --tb-gold-soft: #f8f1e1;
  --tb-gold-ink: #7d6232;
  --bina-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ead9b0' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  --bina-pattern-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ead9b0' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  --bina-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c8a96a' stroke-width='1'%3E%3Cpath d='M28 6l6.5 15.5L50 28l-15.5 6.5L28 50l-6.5-15.5L6 28l15.5-6.5z'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== الخلفية العامة: فاتحة دافئة بلمسة من لوني الهوية ===== */
body {
  background-color: rgb(var(--c-canvas));
  background-image:
    radial-gradient(1100px 520px at 100% -10%, rgba(46, 104, 116, .10), transparent 60%),
    radial-gradient(900px 480px at -5% 110%, rgba(200, 169, 106, .16), transparent 60%);
  background-attachment: fixed;
}
::selection { background: rgba(200, 169, 106, .42); color: #1d4750; }

/* ===== ترويسة «مرحباً بك» للموظف ومدير النظام: بتصميم ترويسة المعلم ===== */
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] {
  background:
    radial-gradient(circle at 8% 0%, rgba(200, 169, 106, .28), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(90, 154, 166, .45), transparent 42%),
    linear-gradient(135deg, var(--tb-900) 0%, var(--tb-700) 48%, var(--tb-600) 100%);
  border-bottom: 3px solid var(--tb-gold);
  box-shadow: 0 14px 30px -18px rgba(29, 71, 80, .75);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image: var(--bina-pattern);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] > .absolute.top-0.left-0 { background: rgba(200, 169, 106, .16); }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] > .absolute.bottom-0.right-0 { background: rgba(255, 255, 255, .05); }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] .bg-white\/95.rounded-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35), inset 0 0 0 2px var(--tb-gold-light);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] .bg-white\/95.rounded-lg img { width: 44px; height: 44px; }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] h1 { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] h1 svg { color: var(--tb-gold-light); }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] p.text-white\/80 { margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--tb-gold-light); }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] p.text-white\/60 {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-gold-light);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(234, 217, 176, .35);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] .bg-white\/15.rounded-lg {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(234, 217, 176, .32);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] button.bg-emerald-500 {
  color: var(--tb-900);
  background: linear-gradient(135deg, #e3c98f, var(--tb-gold));
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55);
}
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] button.bg-emerald-500:hover { background: linear-gradient(135deg, #ead5a3, #d2b678); }
#root .from-\[\#4a7c83\].via-\[\#5d8f96\] button.bg-emerald-500 svg { color: var(--tb-900); }

/* ===== بطاقات الأقسام في الرئيسة: بتصميم تبويبات حساب المعلم ===== */
#root .bina-garden-grid {
  border-color: var(--tb-100) !important;
  background: linear-gradient(180deg, #fff, var(--tb-50)) !important;
  box-shadow: 0 8px 22px -16px rgba(29, 71, 80, .45) !important;
}
#root .bina-garden-grid > .bina-garden-tile {
  --t-bg: #fff !important;
  --t-line: var(--tb-100) !important;
  --t-ink: var(--tb-800) !important;
  --t-accent: var(--tb-700) !important;
}
#root .bina-garden-grid > .bina-garden-tile:nth-of-type(even) { --t-accent: var(--tb-gold-dark) !important; }
#root .bina-garden-grid > .bina-garden-tile::before { background: var(--tb-gold); opacity: .16; }
#root .bina-garden-grid > .bina-garden-tile:hover { background: var(--tb-gold-soft); border-color: var(--tb-gold-light); }
#root .bina-garden-grid > .bina-garden-tile.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--tb-800), var(--tb-600));
  border: 1.5px solid var(--tb-700);
  box-shadow: inset 0 -3px 0 var(--tb-gold), 0 8px 16px -10px rgba(29, 71, 80, .8);
}
#root .bina-garden-grid > .bina-garden-tile.is-active svg { background: var(--tb-gold); color: var(--tb-900); }
#root .bina-garden-grid > .bina-garden-tile.is-active::before { background: var(--tb-gold); }

/* شرائح التصفية النشطة بلون الهوية بدل الأسود */
#root .esu-chip[aria-pressed=true] { background: var(--tb-700); border-color: var(--tb-700); color: #fff; }
#root .esu-chip:focus-visible { outline-color: var(--tb-gold); }


/* ===== صفحات المشاريع والإدارات والأقسام والوحدات: هوية خاصة لكل كيان من ألوان الجمعية =====
   الترويسة يرسمها BinaEntityBrandV1 (scripts/frontend/system-entity-brand.jsx) وتضع data-bina-entity-palette،
   فتأخذ الصفحة متغيرات --be-* للتبويبات والأقسام الداخلية. الترتيب يطابق ENTITY_PALETTES. */
#root main:has([data-bina-entity-palette="turquoise"]) { --be-dark: #163840; --be-mid: #24555f; --be-light: #3c7884; --be-accent: #c8a96a; --be-line: #d6e7ea; }
#root main:has([data-bina-entity-palette="gold"]) { --be-dark: #3a2d17; --be-mid: #6b5228; --be-light: #9a7b45; --be-accent: #ead9b0; --be-line: #eadfc6; }
#root main:has([data-bina-entity-palette="olive"]) { --be-dark: #1f3a2c; --be-mid: #2f5a43; --be-light: #4f8165; --be-accent: #dcc48e; --be-line: #d5e5da; }
#root main:has([data-bina-entity-palette="ink"]) { --be-dark: #1c2c45; --be-mid: #2d4569; --be-light: #4a6894; --be-accent: #d0b880; --be-line: #d6deeb; }
#root main:has([data-bina-entity-palette="clay"]) { --be-dark: #3d241b; --be-mid: #6b3f2c; --be-light: #9a6146; --be-accent: #ead9b0; --be-line: #ecd9cf; }
#root main:has([data-bina-entity-palette="sea"]) { --be-dark: #103a3d; --be-mid: #1a5f63; --be-light: #2f8a86; --be-accent: #e3c98f; --be-line: #cfe6e4; }
#root main:has([data-bina-entity-palette="lavender"]) { --be-dark: #2b2540; --be-mid: #463c64; --be-light: #6a5d8e; --be-accent: #dcc48e; --be-line: #ddd8ea; }
#root main:has([data-bina-entity-palette="night"]) { --be-dark: #17262d; --be-mid: #273f4a; --be-light: #3d5d6b; --be-accent: #c8a96a; --be-line: #d3dde1; }

/* لوحة التبويبات: إطار بلون الكيان، والأيقونات بلونه، والنشط بتدرجه مع خط ذهبي */
#root [data-feature="elegant-project-tabs-v1"] {
  border-color: var(--be-line, #e2eef0);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--be-line, #e2eef0) 35%, #fff));
  box-shadow: 0 8px 22px -16px rgba(29, 71, 80, .45);
}
#root [data-feature="elegant-project-tabs-v1"] button { border-radius: 14px; font-weight: 800; }
/* لكل تبويب لونه (--tab-color من BINA_taskTabStyle)، وتفاصيل الأيقونة في task-page-compact.css */
#root [data-feature="elegant-project-tabs-v1"] button svg { flex-shrink: 0; color: var(--tab-color, var(--be-light, #3c7884)); }
#root [data-feature="elegant-project-tabs-v1"] button[style*="gradient"] svg { color: #fff; }
#root [data-feature="elegant-project-tabs-v1"] button:not([style*="gradient"]):hover {
  background: var(--tab-tint, color-mix(in srgb, var(--be-line, #e2eef0) 45%, #fff)) !important;
  border-color: var(--tab-color, var(--be-light, #3c7884)) !important;
}

/* الأقسام الملونة داخل تبويبات الكيان (المواد والتقارير ونحوها) بتدرج الكيان نفسه، إلا ألوان الدلالة */
#root main:has([data-bina-entity-palette]) :is(section, header, div)[class*="bg-gradient-to-"].text-white:not([class*="from-red"]):not([class*="from-rose"]):not([class*="from-emerald"]):not([class*="from-green"]) {
  background-image:
    radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--be-accent) 35%, transparent), transparent 38%),
    linear-gradient(135deg, var(--be-dark) 0%, var(--be-mid) 55%, var(--be-light) 100%);
  border-bottom: 3px solid var(--be-accent);
}

/* ===== المحتوى ===== */
/* الأقسام الداكنة بلون الهوية بدل الأسود */
#root main .bg-slate-900, #root main .bg-gray-900, #root main .bg-zinc-900, #root main .bg-neutral-900 { background-color: var(--tb-900); }
#root main .bg-slate-800, #root main .bg-gray-800, #root main .bg-zinc-800 { background-color: var(--tb-800); }
#root main .hover\:bg-slate-800:hover, #root main .hover\:bg-slate-700:hover,
#root main .hover\:bg-gray-800:hover, #root main .hover\:bg-gray-700:hover { background-color: #163840; }
#root main .from-slate-900, #root main .from-slate-800, #root main .from-gray-900 {
  --tw-gradient-from: #1d4750 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 71 80 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
#root main .to-slate-900, #root main .to-slate-800, #root main .to-gray-900 { --tw-gradient-to: #2e6874 var(--tw-gradient-to-position); }
#root main .via-slate-800, #root main .via-slate-900 {
  --tw-gradient-to: rgb(36 85 95 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #24555f var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* الترويسات الملونة في الصفحات (أزرق/بنفسجي/أساسي): بتصميم ترويسة المعلم مع النقش والخط الذهبي */
#root main [class*="bg-gradient-to-"].text-white:is([class*="from-primary-"], [class*="from-indigo-"], [class*="from-blue-"], [class*="from-purple-"], [class*="from-violet-"], [class*="from-sky-"]) {
  background-image:
    var(--bina-pattern-soft),
    radial-gradient(circle at 8% 0%, rgba(200, 169, 106, .28), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(90, 154, 166, .45), transparent 42%),
    linear-gradient(135deg, var(--tb-900) 0%, var(--tb-700) 48%, var(--tb-600) 100%);
  background-size: 56px 56px, auto, auto, auto;
  border-bottom: 3px solid var(--tb-gold);
  box-shadow: 0 14px 30px -20px rgba(29, 71, 80, .8);
}
#root main [class*="bg-gradient-to-"].text-white:is([class*="from-primary-"], [class*="from-indigo-"], [class*="from-blue-"], [class*="from-purple-"], [class*="from-violet-"], [class*="from-sky-"]) .bg-white\/20 {
  background-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(234, 217, 176, .4);
}

/* الأزرار الأساسية: تدرج الهوية مع خط ذهبي خفيف */
#root main button.bg-primary-600, #root main a.bg-primary-600,
#root main button.bg-indigo-600, #root main a.bg-indigo-600,
#root main button.bg-blue-600, #root main a.bg-blue-600 {
  background-image: linear-gradient(135deg, var(--tb-800), var(--tb-600));
  box-shadow: inset 0 -2px 0 rgba(200, 169, 106, .85), 0 6px 14px -10px rgba(29, 71, 80, .8);
}
#root main button.bg-primary-600:hover:not(:disabled), #root main a.bg-primary-600:hover,
#root main button.bg-indigo-600:hover:not(:disabled), #root main a.bg-indigo-600:hover,
#root main button.bg-blue-600:hover:not(:disabled), #root main a.bg-blue-600:hover {
  background-image: linear-gradient(135deg, var(--tb-900), var(--tb-700));
}

/* البرتقالي النشط (تبويبات ونحوها) بالذهبي الغامق */
#root main .bg-amber-500, #root main .bg-amber-600, #root main .bg-orange-500.text-white { background-color: var(--tb-gold-dark); }
#root main .hover\:bg-amber-600:hover, #root main .hover\:bg-amber-700:hover { background-color: var(--tb-gold-ink); }

/* العناوين بلون الهوية العميق */
#root main h1, #root main h2 { color: var(--tb-900); }
#root main .text-white h1, #root main .text-white h2, #root main h1.text-white, #root main h2.text-white { color: #fff; }

/* أيقونة عنوان الصفحة: مربع بلون الهوية */
#root main .bg-primary-50.text-primary-600, #root main .bg-primary-50 > .text-primary-600 { color: var(--tb-700); }

/* حقول الإدخال: تركيز بلون الهوية */
#root main input:not([type=checkbox]):not([type=radio]):focus,
#root main select:focus,
#root main textarea:focus { border-color: var(--tb-500); }
#root input[type=checkbox], #root input[type=radio], #root input[type=range] { accent-color: var(--tb-700); }

/* أشرطة التمرير */
#root ::-webkit-scrollbar-thumb { background-color: #b9d2d7; border-radius: 999px; }
#root ::-webkit-scrollbar-thumb:hover { background-color: #8fb6be; }

/* ===== الشريط الجانبي: ترويسة بلون الهوية العميق ومتن فاتح ملوّن ===== */
#root aside.bg-sidebar {
  background:
    var(--bina-pattern-gold) 0 0 / 56px 56px,
    linear-gradient(180deg, #eef6f6 0%, #f7f3e8 100%);
  background-blend-mode: soft-light, normal;
  border-left: 1px solid #dcd2b8;
  box-shadow: 10px 0 34px -24px rgba(29, 71, 80, .55);
  color: var(--tb-900);
}
#root aside.bg-sidebar .border-slate-700,
#root aside.bg-sidebar .border-slate-600,
#root aside.bg-sidebar .border-slate-600\/70,
#root aside.bg-sidebar .border-slate-700\/30,
#root aside.bg-sidebar .border-slate-800,
#root aside.bg-sidebar .border-white\/5 { border-color: #e2d8bf; }

/* ترويسة الشعار */
#root aside.bg-sidebar > div > div:first-child {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(200, 169, 106, .32), transparent 45%),
    linear-gradient(135deg, var(--tb-900) 0%, var(--tb-700) 60%, var(--tb-600) 100%);
  border-bottom: 3px solid var(--tb-gold);
}
#root aside.bg-sidebar > div > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: var(--bina-pattern);
  background-size: 48px 48px;
  pointer-events: none;
}
#root aside.bg-sidebar > div > div:first-child > * { position: relative; }
#root aside.bg-sidebar > div > div:first-child img[src="/logo.png"] {
  flex-shrink: 0;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4), inset 0 0 0 2px var(--tb-gold-light);
}
#root aside.bg-sidebar > div > div:first-child h1 { color: #fff; font-weight: 800; font-size: 15px; }
#root aside.bg-sidebar > div > div:first-child button { color: var(--tb-gold-light); }
#root aside.bg-sidebar > div > div:first-child button:hover { color: #fff; background-color: rgba(255, 255, 255, .12); }
#root aside.bg-sidebar > div > div:first-child select { background-color: rgba(255, 255, 255, .1); border-color: rgba(234, 217, 176, .45); color: #fff; }
#root aside.bg-sidebar > div > div:first-child select option { color: var(--tb-900); background: #fff; }

/* النصوص: واضحة لا باهتة */
#root aside.bg-sidebar .text-white,
#root aside.bg-sidebar .text-slate-100,
#root aside.bg-sidebar .text-slate-200,
#root aside.bg-sidebar .text-slate-300 { color: var(--tb-900); }
#root aside.bg-sidebar .text-slate-400 { color: var(--tb-800); }
#root aside.bg-sidebar .text-slate-500 { color: var(--tb-gold-ink); }
#root aside.bg-sidebar .placeholder-slate-400::placeholder { color: #7f9599; }

/* الأقسام الرئيسية: شرائط بلون الهوية العميق */
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 {
  color: #fff;
  background: linear-gradient(135deg, var(--tb-800), var(--tb-600));
  box-shadow: inset -3px 0 0 var(--tb-gold), 0 6px 14px -10px rgba(29, 71, 80, .9);
}
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 .text-white,
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 span { color: #fff; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 > div:last-child svg { color: var(--tb-gold-light); }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40:hover { background: linear-gradient(135deg, var(--tb-900), var(--tb-700)); }

/* المجموعات الفرعية: شرائط ذهبية فاتحة */
#root aside.bg-sidebar nav li > button.bg-slate-700\/20 {
  color: var(--tb-gold-ink);
  background: linear-gradient(135deg, #fbf4e3, #f3e6c6);
  border: 1px solid #e8d7ab;
}
#root aside.bg-sidebar nav li > button.bg-slate-700\/20 span { font-size: 11px; letter-spacing: 0; color: var(--tb-gold-ink); }
#root aside.bg-sidebar nav li > button.bg-slate-700\/20 svg { color: var(--tb-gold-dark); }
#root aside.bg-sidebar nav li > button.bg-slate-700\/20:hover { background: linear-gradient(135deg, #f8eccf, #eedcb0); }
#root aside.bg-sidebar nav ul.border-r { border-color: #dcc48e; }

/* أيقونات الأقسام الملونة على الشرائط العميقة: ألوان مضيئة */
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-blue-400, .text-indigo-400, .text-sky-400, .text-blue-300, .text-indigo-300) { color: #9fd3dc; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-violet-300, .text-violet-400, .text-purple-300, .text-purple-400) { color: #c9c0f2; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-amber-300, .text-amber-400, .text-orange-400) { color: #f1d79c; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400, .text-lime-400) { color: #a9e2bb; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-cyan-300, .text-cyan-400, .text-teal-400) { color: #8fe0dc; }
#root aside.bg-sidebar nav li > button.bg-slate-700\/40 :is(.text-rose-300, .text-rose-400, .text-fuchsia-300, .text-fuchsia-400) { color: #f5b7c6; }

/* الصفحات: نص واضح وأيقونة داخل مربع ملوّن */
#root aside.bg-sidebar nav a:not(.bg-primary-600) { color: var(--tb-900); }
#root aside.bg-sidebar nav a { font-weight: 600; transition: background-color .18s, color .18s, box-shadow .18s, transform .18s; }
#root aside.bg-sidebar nav a > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--tb-700);
  background: #dcecef;
  box-shadow: inset 0 0 0 1px rgba(46, 104, 116, .12);
  transition: background-color .18s, color .18s;
}
#root aside.bg-sidebar nav li:nth-child(3n+2) > a > span:first-child { color: var(--tb-gold-ink); background: #f5e9cc; box-shadow: inset 0 0 0 1px rgba(154, 123, 69, .18); }
#root aside.bg-sidebar nav li:nth-child(3n+3) > a > span:first-child { color: #3b6f58; background: #dcefe4; box-shadow: inset 0 0 0 1px rgba(59, 111, 88, .15); }
#root aside.bg-sidebar nav a > span:first-child svg { width: 16px; height: 16px; }
#root aside.bg-sidebar nav a > span + span { font-size: 12.5px; }
#root aside.bg-sidebar nav a:not(.bg-primary-600):hover {
  color: var(--tb-900);
  background-color: #fff;
  box-shadow: 0 4px 12px -8px rgba(29, 71, 80, .45);
  transform: translateX(-2px);
}
#root aside.bg-sidebar nav li:nth-child(n) > a:not(.bg-primary-600):hover > span:first-child { color: #fff; background: var(--tb-700); }

/* الصفحة النشطة: ذهبي الهوية */
#root aside.bg-sidebar nav a.bg-primary-600 {
  color: var(--tb-900);
  background: linear-gradient(135deg, #ecd8a6 0%, var(--tb-gold) 100%);
  box-shadow: inset -3px 0 0 var(--tb-800), 0 8px 16px -10px rgba(154, 123, 69, .9);
  font-weight: 800;
}
#root aside.bg-sidebar nav a.bg-primary-600 .text-white,
#root aside.bg-sidebar nav a.bg-primary-600 span { color: var(--tb-900); }
#root aside.bg-sidebar nav li:nth-child(n) > a.bg-primary-600 > span:first-child { color: #fff; background: var(--tb-800); box-shadow: none; }
#root aside.bg-sidebar nav li:nth-child(n) > a.bg-primary-600 > span:first-child svg { color: var(--tb-gold-light); }

/* الخلفيات العامة والتحويم */
#root aside.bg-sidebar .bg-slate-900 { background-color: #fff; }
#root aside.bg-sidebar .bg-slate-800,
#root aside.bg-sidebar .bg-slate-800\/80 { background-color: #ffffff; }
#root aside.bg-sidebar .bg-slate-700 { background-color: #ffffff; }
#root aside.bg-sidebar .bg-slate-600 { background-color: var(--tb-100); }
#root aside.bg-sidebar .bg-slate-700\/10,
#root aside.bg-sidebar .bg-slate-700\/30 { background-color: rgba(46, 104, 116, .08); }
#root aside.bg-sidebar :is(.hover\:bg-slate-700, .hover\:bg-slate-700\/30, .hover\:bg-slate-700\/50, .hover\:bg-slate-700\/60):hover { background-color: #fff; }
#root aside.bg-sidebar .hover\:bg-slate-600:hover { background-color: #d5e7ea; }
#root aside.bg-sidebar .hover\:text-white:hover,
#root aside.bg-sidebar .group:hover .group-hover\:text-white { color: var(--tb-900); }
#root aside.bg-sidebar .group:hover .group-hover\:text-slate-300 { color: var(--tb-800); }
#root aside.bg-sidebar .group:hover .group-hover\:text-indigo-400 { color: var(--tb-700); }

/* زر «فتح الجميع» */
#root aside.bg-sidebar nav > button {
  color: var(--tb-gold-ink);
  background: #fff;
  border-color: #e3cf9c;
  border-style: dashed;
}
#root aside.bg-sidebar nav > button:hover { color: var(--tb-900); background: var(--tb-gold-soft); }

/* حقل البحث وقائمة النتائج */
#root aside.bg-sidebar input[type=text] {
  background-color: #fff;
  border: 1px solid #cfe0e3;
  color: var(--tb-900);
}
#root aside.bg-sidebar input[type=text]:focus { border-color: var(--tb-500); box-shadow: 0 0 0 3px rgba(46, 104, 116, .16); --tw-ring-shadow: 0 0 #0000; }
#root aside.bg-sidebar .search-container > .absolute {
  border: 1px solid #e2d8bf;
  box-shadow: 0 18px 40px -16px rgba(29, 71, 80, .4);
}
#root aside.bg-sidebar .search-container button:hover { background-color: var(--tb-50); }

/* تحديث الصفحة وتسجيل الخروج */
#root aside.bg-sidebar button.bg-slate-700 {
  color: #fff;
  background: linear-gradient(135deg, var(--tb-800), var(--tb-600));
  border: 0;
  box-shadow: inset 0 -2px 0 var(--tb-gold);
}
#root aside.bg-sidebar button.bg-slate-700 .text-white,
#root aside.bg-sidebar button.bg-slate-700 span { color: #fff; }
#root aside.bg-sidebar button.bg-slate-700:hover { background: linear-gradient(135deg, var(--tb-900), var(--tb-700)); }
#root aside.bg-sidebar button.bg-red-600 {
  color: #fff;
  background: linear-gradient(135deg, #9f1d14 0%, #c8321f 100%);
  border: 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 8px 16px -10px rgba(159, 29, 20, .9);
  font-weight: 700;
}
#root aside.bg-sidebar button.bg-red-600 .text-white,
#root aside.bg-sidebar button.bg-red-600 span,
#root aside.bg-sidebar button.bg-red-600 svg { color: #fff; }
#root aside.bg-sidebar button.bg-red-600:hover { background: linear-gradient(135deg, #85170f 0%, #b02a19 100%); }

/* ===== زرا الرجوع والتقدم أسفل الشعار ===== */
.bina-hnav {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2d8bf;
  background: linear-gradient(180deg, rgba(248, 241, 225, .9), rgba(248, 241, 225, .35));
}
.bina-hnav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e3cf9c;
  border-radius: 10px;
  background: #fff;
  color: var(--tb-800, #24555f);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #ead9b0;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.bina-hnav-btn svg { flex-shrink: 0; color: var(--tb-gold-dark, #9a7b45); }
.bina-hnav-btn:hover:not(:disabled) { color: #fff; background: linear-gradient(135deg, #24555f, #3c7884); border-color: #24555f; }
.bina-hnav-btn:hover:not(:disabled) svg { color: #ead9b0; }
.bina-hnav-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.bina-hnav-btn:focus-visible { outline: 3px solid rgba(200, 169, 106, .7); outline-offset: 1px; }
.bina-hnav-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@media (min-width: 1024px) {
  .bina-hnav[data-collapsed] { flex-direction: column; gap: 6px; padding: 8px 10px; }
  .bina-hnav[data-collapsed] .bina-hnav-btn { flex: none; width: 100%; padding: 0; }
  .bina-hnav[data-collapsed] .bina-hnav-label { display: none; }
}
/* حساب المعلم بلا شريط جانبي: الزران نفسهما في الشريط العلوي (scripts/patch-teacher-subject-focus.mjs) */
.bina-tsf-hnav { display: flex; align-items: center; min-width: 0; }
.bina-tsf-hnav .bina-hnav { padding: 0; gap: 6px; border: 0; background: none; }
.bina-tsf-hnav .bina-hnav-btn { flex: none; height: 34px; padding: 0 12px; }
@media (max-width: 520px) {
  .bina-tsf-hnav .bina-hnav-btn { width: 36px; padding: 0; }
  .bina-tsf-hnav .bina-hnav-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #root aside.bg-sidebar nav a:hover { transform: none !important; }
}

/* أزرار ترويسة الكيان: زجاجية بيضاء بإطار ذهبي فوق لون الكيان */
#root main div:has(> [aria-hidden] > [data-bina-entity-palette]) > div:last-child :is(button, a) {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--be-accent, #c8a96a) 70%, transparent);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}
#root main div:has(> [aria-hidden] > [data-bina-entity-palette]) > div:last-child :is(button, a):hover {
  color: var(--be-dark, #163840);
  background: var(--be-accent, #c8a96a);
}

/* الأزرار والتبويبات الفرعية النشطة داخل صفحة الكيان بلونه */
#root main:has([data-bina-entity-palette]) :is(button, a):is(.bg-primary-600, .bg-indigo-600, .bg-blue-600) {
  background-image: linear-gradient(135deg, var(--be-mid), var(--be-light));
  box-shadow: inset 0 -2px 0 var(--be-accent), 0 6px 14px -10px var(--be-dark);
}

/* ===== وضوح الكتابة في البحث والمحاكاة داخل الشريط الجانبي ===== */
/* النص المكتوب في خانات البحث: أغمق وأعرض */
#root aside.bg-sidebar input[type=text] {
  color: #12323a;
  -webkit-text-fill-color: #12323a;
  font-weight: 600;
  caret-color: var(--tb-700);
}
#root aside.bg-sidebar input[type=text]::placeholder { color: #6f878c; -webkit-text-fill-color: #6f878c; font-weight: 400; opacity: 1; }

/* نتائج البحث: الأسماء واضحة والتفاصيل مقروءة */
#root aside.bg-sidebar .search-container > .absolute { background: #fff; }
#root aside.bg-sidebar .search-container > .absolute button span,
#root aside.bg-sidebar .search-container > .absolute button .font-medium { color: #12323a; font-weight: 700; font-size: 13.5px; }
#root aside.bg-sidebar .search-container > .absolute button .text-xs { color: var(--tb-gold-ink); font-size: 12px; font-weight: 500; }
#root aside.bg-sidebar .search-container > .absolute button svg { color: var(--tb-700); }
#root aside.bg-sidebar .search-container > .absolute .uppercase { color: var(--tb-gold-ink); font-size: 11.5px; font-weight: 800; }
#root aside.bg-sidebar .search-container > .absolute button:hover { background-color: var(--tb-gold-soft); }
#root aside.bg-sidebar .search-container > .absolute .text-center { color: var(--tb-800); font-weight: 600; }

/* قائمة «محاكاة مستخدم»: الاسم بخط أوضح والبريد بالذهبي الغامق */
#root aside.bg-sidebar .bg-slate-900.rounded-lg { border: 1px solid #dcc48e; box-shadow: 0 10px 24px -16px rgba(29, 71, 80, .5); }
#root aside.bg-sidebar .bg-slate-900.rounded-lg input[type=text] { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg button { border-color: #efe6d0; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg button > span:first-child { color: #12323a; font-size: 13px; font-weight: 700; line-height: 1.5; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg button > span:last-child { color: var(--tb-gold-ink); font-size: 11.5px; font-weight: 500; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg button:hover { background-color: var(--tb-gold-soft); }
#root aside.bg-sidebar .bg-slate-900.rounded-lg p { color: var(--tb-800); font-weight: 600; font-size: 12px; }

/* خانة البحث في «محاكاة مستخدم»: بارزة بإطار الهوية وخلفية ملوّنة وتلميح داكن */
#root aside.bg-sidebar .bg-slate-900.rounded-lg > div:first-child { background: var(--tb-gold-soft); border-bottom-color: #e3cf9c; padding: 8px; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg > div:first-child input[type=text] {
  height: 36px;
  padding: 0 12px 0 34px !important;
  border: 1.5px solid var(--tb-500);
  border-radius: 9px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e6874' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 10px center;
  color: #0f2a31;
  -webkit-text-fill-color: #0f2a31;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 2px 6px -3px rgba(29, 71, 80, .35);
}
#root aside.bg-sidebar .bg-slate-900.rounded-lg > div:first-child input[type=text]::placeholder { color: #3f5f66; -webkit-text-fill-color: #3f5f66; font-weight: 600; opacity: 1; }
#root aside.bg-sidebar .bg-slate-900.rounded-lg > div:first-child input[type=text]:focus { border-color: var(--tb-700); box-shadow: 0 0 0 3px rgba(46, 104, 116, .2); --tw-ring-shadow: 0 0 #0000; outline: none; }

/* أزرار «محاكاة مستخدم» (موظف/معلم/طالب): غير المختار أبيض بإطار الهوية، والمختار ذهبي واضح */
#root aside.bg-sidebar .grid.grid-cols-3 > button {
  color: var(--tb-800);
  background: #fff;
  border: 1.5px solid #bcd6db;
  box-shadow: 0 2px 0 #dcebee;
  font-weight: 700;
}
#root aside.bg-sidebar .grid.grid-cols-3 > button:hover { background: var(--tb-50); border-color: var(--tb-500); }
#root aside.bg-sidebar .grid.grid-cols-3 > button:is(.bg-amber-500, .bg-emerald-600, .bg-rose-500) {
  color: var(--tb-900);
  background: linear-gradient(135deg, #ecd8a6, var(--tb-gold));
  border-color: var(--tb-gold-dark);
  box-shadow: inset 0 -2px 0 var(--tb-gold-dark), 0 6px 12px -8px rgba(154, 123, 69, .9);
  font-weight: 800;
}

#root aside.bg-sidebar [data-bina-sim-name] { display: block; min-height: 1.4em; color: #12323a !important; -webkit-text-fill-color: #12323a !important; font-size: 13px; font-weight: 700; }
#root aside.bg-sidebar [data-bina-sim-email] { color: #7d6232 !important; -webkit-text-fill-color: #7d6232 !important; }

/* حجم معتدل على اللابتوب والشاشات الكبيرة: تصغير أساس rem الذي تُبنى عليه النصوص والمسافات
   (بما يعادل تكبير المتصفح ~88%) دون استخدام zoom الذي يُفسد ارتفاعات 100vh. الجوال والتابلت كما هما. */
@media (min-width: 1024px) {
  html { font-size: 14px; }
}

/* قلم المعلم على الشاشة (scripts/frontend/teacher-subject-focus.jsx): طبقة فوق الصفحة كلها تتحرك معها،
   وشريط أدوات ثابت أسفل الشاشة. لا يُحفظ شيء. */
.bina-pen-canvas { position: absolute; top: 0; left: 0; z-index: 2147483000; pointer-events: none; touch-action: auto; }
.bina-pen-canvas.is-drawing { pointer-events: auto; touch-action: none; cursor: crosshair; }
.bina-pen-bar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2147483001;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: calc(100vw - 16px); overflow-x: auto;
  padding: 4px 6px; border: 1px solid #c8a96a; border-radius: 999px; background: rgba(29, 71, 80, .96); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55);
  scrollbar-width: none;
}
.bina-pen-handle { flex: none; padding: 0 4px; color: #ead9b0; font-size: 14px; letter-spacing: -2px; cursor: grab; touch-action: none; user-select: none; }
.bina-pen-handle:active { cursor: grabbing; }
.bina-pen-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(234, 217, 176, .3); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.bina-pen-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.bina-pen-btn.is-on { background: #ead9b0; color: #1d4750; border-color: #ead9b0; }
.bina-pen-btn:disabled { opacity: .4; cursor: not-allowed; }
.bina-pen-close { background: #b42318; border-color: #b42318; }
.bina-pen-color { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: var(--pen); cursor: pointer; padding: 0; }
.bina-pen-color.is-on { outline: 2px solid #ead9b0; outline-offset: 2px; }
.bina-pen-dot { display: block; border-radius: 50%; background: currentColor; }
.bina-pen-sep { flex: none; width: 1px; height: 20px; margin: 0 2px; background: rgba(234, 217, 176, .3); }
.bina-pen-fab {
  position: fixed; left: 22px; bottom: 158px; z-index: 2147483002;
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0;
  border: 2px solid #ead9b0; border-radius: 50%; color: #ead9b0; cursor: pointer;
  background: linear-gradient(135deg, #1d4750, #3c7884); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55);
  transition: transform .15s, box-shadow .15s;
}
.bina-pen-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .6); }
.bina-pen-fab:focus-visible { outline: 3px solid #c8a96a; outline-offset: 3px; }
.bina-pen-fab.is-on { background: #b42318; border-color: #fff; color: #fff; }
@media print { .bina-pen-fab, .bina-pen-bar, .bina-pen-canvas { display: none !important; } }