/* ✨ لوحة المنصة — طبقة «فخامة» (24 أكتوبر 2026، المشرف: «ابيك تعيد تصميم المواقع كلها وتشوف لها ديزاين جميل جدا»).
   نفس لغة لوحة الملاك المعتمدة (web/static/luxe.css — §84): الأسطح **بترولي من عائلة التركوازي** بحافة متدرّجة مضيئة، والأرقام بتدرّج أبيض،
   والحركة أنعم وأطول. كانت «أسود مسطّح» (flat.css 19 أكتوبر) — وبعدها قال عن نفس الشكل بلوحة الملاك «شفافة غير مرئية… يدخل لون ثاني يكسره».
   ثوابت: الخلفية #000 بالضبط، التركوازي للفعل والحالة، الأحمر/الأخضر للمعنى، لا letter-spacing سالب، ولا بطاقة داخل بطاقة (الداخلي بئر).
   تُحمَّل بعد flat.css ولا تلمسه ولا admin.js — محددات بس (والحركة بـlux.js: مع التنقل بين الصفحات بس، مو بعد كل حفظ). */
:root {
  color-scheme: dark;   /* ⚠️ بدونها الوضع الداكن التلقائي بكروم يغمّق النص الأبيض المتدرّج */
  --lx-r: 20px;
  --lx-r-sm: 14px;
  --lx-ease: cubic-bezier(.16, 1, .3, 1);
  --lx-card: linear-gradient(225deg, #10302e 0%, #0e2325 50%, #0b1719 100%);
  --lx-glow: radial-gradient(120% 90% at 100% 0%, rgba(44, 196, 179, .14), transparent 62%);
  --lx-edge: linear-gradient(225deg, rgba(130, 240, 225, .30), rgba(255, 255, 255, .07) 40%, rgba(44, 196, 179, .16));
  --lx-edge-hot: linear-gradient(225deg, rgba(130, 240, 225, .55), rgba(255, 255, 255, .10) 40%, rgba(44, 196, 179, .32));
  --lx-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 24px 60px -36px rgba(0, 0, 0, .9);
  --lx-well: rgba(0, 0, 0, .26);
  --lx-glass: rgba(255, 255, 255, .055);
  --lx-glass-edge: rgba(255, 255, 255, .11);
  --rule: rgba(255, 255, 255, .08);
}

/* ═══ الأرضية: أسود صافي + توهّج محيطي خافت أعلى الصفحة (اللون نفسه يبقى #000) ═══ */
body {
  background: radial-gradient(1200px 460px at 72% -160px, rgba(44, 196, 179, .11), transparent 70%) no-repeat, #000;
}

/* ═══ الشريط العلوي: زجاج داكن فوق المحتوى ═══ */
.topbar { background: rgba(0, 0, 0, .55); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.topbar.scrolled { border-bottom-color: rgba(255, 255, 255, .07); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(160deg, rgba(44, 196, 179, .22), rgba(44, 196, 179, .04)); border: 1px solid rgba(90, 216, 201, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px -6px rgba(44, 196, 179, .6);
}
.brand-mark svg { width: 20px; height: 20px; }
/* التنقل النشط: خط تركوازي مضيء بدل الأبيض */
.nav a.active { box-shadow: inset 0 -2px 0 var(--primary); text-shadow: 0 0 18px rgba(44, 196, 179, .35); }
.flag { background: rgba(242, 198, 109, .12); border: 1px solid rgba(242, 198, 109, .25); }

/* ═══ عنوان الصفحة: أكبر بتدرّج أبيض هادي ═══ */
.page-head h1, .owner-head h1 {
  font-size: 32px; font-weight: 800; line-height: 1.3; padding-block: .06em;
  background: linear-gradient(180deg, #ffffff 30%, #b9bec8); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ الأسطح: بترولي بحافة متدرّجة — كل الأسطح بنفس اللون (لا خليط) ═══ */
.card, .stats, details.unit, .guide ol.steps > li, .otable {
  border-radius: var(--lx-r); border: 1px solid transparent;
  background: var(--lx-glow) padding-box, var(--lx-card) padding-box, var(--lx-edge) border-box;
  box-shadow: var(--lx-shadow);
}
/* داخل أي سطح: المتغيرات شفافة فتاخذ لون البطاقة (الحقول والملاحظات ما تطلع ألواح سودا) — والداخلي بئر لا سطح */
:is(.card, .stats, .otable, details.unit, .modal) {
  --surface: rgba(0, 0, 0, .24); --surface-2: rgba(255, 255, 255, .05); --surface-3: rgba(255, 255, 255, .085);
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .15);
}
.card .card, .card details.unit { background: var(--lx-well); border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; }
.card { padding: 22px; }

/* ═══ شريط الأرقام: أرقام كبيرة بتدرّج أبيض، والسالب يبقى أحمر ═══ */
.stats { padding: 20px 6px; }
.stat { border-inline-start-color: rgba(255, 255, 255, .08); }
.stat .label { font-size: 13.5px; color: var(--text-2); }
.stat .value { font-size: 30px; font-weight: 700; line-height: 1.2; margin-top: 6px; }
.stat .value:not(.neg):not(.pos) {
  background: linear-gradient(180deg, #ffffff 35%, #c3c7cf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .value small { -webkit-text-fill-color: var(--text-2); color: var(--text-2); }
.stat .value.neg { text-shadow: 0 0 24px rgba(255, 122, 128, .25); }
.card .grid.k .kpi .value { font-size: 24px; font-weight: 700; }

/* ═══ «يحتاجك الحين»: نقطة الحالة تضيء ═══ */
.lvl.bad { box-shadow: 0 0 0 3px rgba(255, 122, 128, .16), 0 0 12px rgba(255, 122, 128, .6); }
.lvl.warn { box-shadow: 0 0 0 3px rgba(242, 198, 109, .16), 0 0 12px rgba(242, 198, 109, .55); }
.lvl.info { box-shadow: 0 0 0 3px rgba(44, 196, 179, .16), 0 0 12px rgba(44, 196, 179, .6); }
.attn-row, .alert-row, .checklist li, .ticket-row, .orow, .empty-row, th, td { border-color: var(--rule); }

/* ═══ قائمة الملاك: لوح واحد، والصف يضيء عند المرور ═══ */
.otable { padding: 6px 12px; }
.orow { border-radius: 12px; border-top-color: rgba(255, 255, 255, .06); transition: background-color .5s var(--lx-ease), box-shadow .5s var(--lx-ease); }
.orow.head { padding-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .orow:not(.head):hover { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(90, 216, 201, .18); }
}
.orow .o-num { font-weight: 600; }

/* ═══ التبويبات: النشط بخط تركوازي مضيء ═══ */
.tab.on::after { background: var(--primary); box-shadow: 0 0 12px rgba(44, 196, 179, .7); }
.tab .count { color: var(--text-3); }

/* ═══ الشارات: زجاج بنقطة مضيئة ═══ */
.chip { background: var(--lx-glass); border: 1px solid var(--lx-glass-edge); backdrop-filter: blur(8px); }
.chip::before { box-shadow: 0 0 8px currentColor; }

/* ═══ الأزرار ═══ */
.btn { transition: background-color .3s var(--lx-ease), transform .14s var(--lx-ease), box-shadow .4s var(--lx-ease), opacity .15s; }
.btn:not(.primary):not(.danger):not(.ghost), .card .btn:not(.primary):not(.danger):not(.ghost) {
  background: var(--lx-glass); border: 1px solid var(--lx-glass-edge); color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .btn:not(.primary):not(.danger):not(.ghost):hover, .card .btn:not(.primary):not(.danger):not(.ghost):hover { background: rgba(255, 255, 255, .09); }
}
.btn.primary {
  background: linear-gradient(180deg, #45d9c8, #25b6a5); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -14px rgba(44, 196, 179, .85);
}
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { background: linear-gradient(180deg, #5fe3d3, #2cc4b3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 38px -14px rgba(44, 196, 179, .95); }
}
.btn.danger { background: rgba(255, 122, 128, .10); border: 1px solid rgba(255, 122, 128, .24); }
.btn:active { transform: scale(.97); }

/* ═══ الحقول: بئر داخل البطاقة، والتركيز بهالة تركوازية ═══ */
input, select, textarea, .card input, .card select, .card textarea {
  background: var(--lx-well); border: 1px solid rgba(255, 255, 255, .10);
}
input:focus, select:focus, textarea:focus { border-color: rgba(90, 216, 201, .7); box-shadow: 0 0 0 3px rgba(44, 196, 179, .18), 0 0 20px -6px rgba(44, 196, 179, .6); }
.radio-row label { background: var(--lx-glass); border: 1px solid var(--lx-glass-edge); }
.radio-row label.on { border-color: rgba(90, 216, 201, .7); background: rgba(44, 196, 179, .12); }

/* ═══ الملاحظات والتنبيهات: زجاج بلون معناها ═══ */
.note, .card .note { background: var(--lx-glass); border: 1px solid rgba(255, 255, 255, .08); }
.note.warn, .banner { background: linear-gradient(170deg, rgba(242, 198, 109, .12), rgba(242, 198, 109, .03)); border: 1px solid rgba(242, 198, 109, .24); }
.note.bad { background: linear-gradient(170deg, rgba(255, 122, 128, .12), rgba(255, 122, 128, .03)); border: 1px solid rgba(255, 122, 128, .24); }
.note.ok { background: linear-gradient(170deg, rgba(63, 211, 154, .12), rgba(63, 211, 154, .03)); border: 1px solid rgba(63, 211, 154, .24); }
.banner { border-radius: var(--lx-r-sm); }

/* ═══ الخطوات (الدليل/التشغيل) ═══ */
.step.on { color: var(--text); }
.guide ol.steps > li::before {
  background: linear-gradient(160deg, rgba(44, 196, 179, .26), rgba(44, 196, 179, .06)); border: 1px solid rgba(90, 216, 201, .3);
  box-shadow: 0 0 16px -6px rgba(44, 196, 179, .7); color: #e9fbf8;
}

/* ═══ النوافذ والإشعارات: زجاج ═══ */
.modal {
  border-radius: var(--lx-r); border: 1px solid transparent;
  background: var(--lx-glow) padding-box, var(--lx-card) padding-box, var(--lx-edge-hot) border-box;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02);
}
.ask-back { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.toast { background: rgba(14, 35, 37, .82); border: 1px solid rgba(90, 216, 201, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ═══ الجوال: الشريط السفلي زجاج ═══ */
.bottom-nav { background: rgba(0, 0, 0, .62); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, .07); }
.bottom-nav a.active svg.ic { filter: drop-shadow(0 0 8px rgba(44, 196, 179, .7)); }

/* ═══ صفحة الدخول: بطاقة بترولية فوق شفق يتنفّس ببطء ═══ */
.login-wrap { position: relative; isolation: isolate; overflow: hidden; background: #000; }
.login-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 760px; height: 760px; inset: 50% auto auto 50%; translate: -50% -58%;
  background: radial-gradient(closest-side, rgba(44, 196, 179, .30), rgba(34, 211, 238, .08) 55%, transparent 72%);
  filter: blur(30px);
}
.login-card {
  padding: 34px 28px 30px; border-radius: 24px; border: 1px solid transparent;
  background: var(--lx-glow) padding-box, var(--lx-card) padding-box, var(--lx-edge-hot) border-box;
  box-shadow: 0 40px 100px -40px rgba(44, 196, 179, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.login-card .brand { font-size: 20px; font-weight: 700; }
.login-card .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
.login-card .brand-mark svg { width: 24px; height: 24px; }
.login-card input { background: var(--lx-well); border-color: rgba(255, 255, 255, .12); min-height: 46px; }

/* ═══ الحركة: مع التنقل بين الصفحات بس (lux.js يحط data-enter) — البطاقات تطلع وحدة ورا الثانية ═══ */
@media (prefers-reduced-motion: no-preference) {
  #app[data-enter] > * { animation: lx-rise 1s var(--lx-ease) backwards; }
  #app[data-enter] > :nth-child(2) { animation-delay: 70ms; }
  #app[data-enter] > :nth-child(3) { animation-delay: 140ms; }
  #app[data-enter] > :nth-child(4) { animation-delay: 210ms; }
  #app[data-enter] > :nth-child(5) { animation-delay: 280ms; }
  #app[data-enter] > :nth-child(6) { animation-delay: 350ms; }
  #app[data-enter] > :nth-child(n+7) { animation-delay: 420ms; }
  #app[data-enter] .stat .value { animation: lx-focus 1.1s var(--lx-ease) .25s backwards; }
  .login-card { animation: lx-rise 1.1s var(--lx-ease) .1s backwards; }
  .login-wrap::before { animation: lx-aurora 2.4s var(--lx-ease) both, lx-drift 18s ease-in-out 2.4s infinite alternate; }
}
@keyframes lx-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lx-focus { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lx-aurora { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes lx-drift { from { transform: none; } to { transform: translate3d(-6%, 5%, 0) scale(1.1); } }

@media (max-width: 720px) {
  .page-head h1, .owner-head h1 { font-size: 26px; }
  .stat .value { font-size: 24px; }
  .card { padding: 18px; }
  .otable { padding: 4px 8px; }
}