/* ============================================================
   دَورَك | نظام التصميم الموحّد  (Design System)
   الألوان + الخطوط + الحركات + المكوّنات المشتركة بين كل الواجهات
   ملاحظة: هذا ملف تصميم فقط — لا يحتوي أي منطق عمل.
   ============================================================ */

:root{
  --dw-bg:        #0b0f19;   /* الخلفية الأساسية */
  --dw-bg-deep:   #070a10;   /* أعمق درجة */
  --dw-surface:   #111827;   /* البطاقات والأسطح */
  --dw-line:      #1f2937;   /* الحدود */
  --dw-text:      #f1f5f9;   /* النص الأساسي */
  --dw-muted:     #94a3b8;   /* النص الثانوي */

  --dw-gold-1:    #f59e0b;
  --dw-gold-2:    #d4af37;   /* الذهبي اللامع */
  --dw-gold-3:    #b45309;
  --dw-gold-soft: rgba(212,175,55,.25);

  --dw-green:     #22c55e;
  --dw-red:       #ef4444;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Cairo',sans-serif;
  background:var(--dw-bg);
  color:var(--dw-text);
  -webkit-tap-highlight-color:transparent;
}

/* ===== الذهبي اللامع ===== */
.gold-gradient{ background:linear-gradient(135deg,#f59e0b 0%,#d4af37 50%,#b45309 100%); }
.gold-text{
  background:linear-gradient(90deg,#fcd34d,#f59e0b,#b45309);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dw-radial{
  background:var(--dw-bg);
}

/* ===== المكوّنات المشتركة ===== */
.dw-card{
  background:rgba(17,24,39,.95);
  border:1px solid var(--dw-gold-soft);
  border-radius:24px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
}
.dw-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(17,24,39,.9);
  border:1px solid var(--dw-gold-soft);
  border-radius:18px;
}
.dw-logo{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#0b0f19; font-size:15px;
}
.dw-btn-gold{
  background:linear-gradient(135deg,#f59e0b 0%,#d4af37 50%,#b45309 100%);
  color:#0b0f19; font-weight:800; border:none;
  border-radius:14px; padding:14px; cursor:pointer; transition:all .2s;
}
.dw-btn-gold:hover{ opacity:.95; }
.dw-btn-gold:active{ transform:scale(.97); }
.dw-btn-gold:disabled{ opacity:.5; cursor:not-allowed; }
.dw-btn-ghost{
  background:var(--dw-bg-deep); color:var(--dw-text);
  border:1px solid var(--dw-line); border-radius:14px; padding:12px; cursor:pointer; transition:all .2s;
}
.dw-btn-ghost:hover{ border-color:var(--dw-gold-2); color:var(--dw-gold-2); }

.dw-input, .dw-select{
  width:100%; background:var(--dw-bg-deep); color:var(--dw-text);
  border:1px solid var(--dw-line); border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:14px; outline:none; transition:border .2s;
}
.dw-input:focus, .dw-select:focus{ border-color:var(--dw-gold-2); }
.dw-label{ font-size:12px; color:var(--dw-muted); margin-bottom:6px; display:block; }

.dw-stat{
  background:var(--dw-bg-deep); border:1px solid var(--dw-gold-soft);
  border-radius:18px; padding:16px; text-align:center;
}
.dw-stat .v{ font-size:22px; font-weight:900; }
.dw-stat .k{ font-size:11px; color:var(--dw-muted); margin-top:4px; }

.dw-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--dw-bg-deep); border:1px solid var(--dw-gold-soft);
  border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700;
}
.dw-badge.ok{ color:var(--dw-green); border-color:rgba(34,197,94,.4); }
.dw-badge.warn{ color:var(--dw-gold-2); }
.dw-badge.off{ color:var(--dw-red); border-color:rgba(239,68,68,.4); }

/* الجداول */
.dw-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dw-table th{
  text-align:right; color:var(--dw-gold-2); font-weight:700;
  padding:10px 12px; border-bottom:1px solid var(--dw-line);
}
.dw-table td{ padding:12px; border-bottom:1px solid rgba(31,41,55,.5); }
.dw-table tr:hover td{ background:rgba(212,175,55,.04); }

/* التبويبات */
.dw-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; cursor:pointer;
  color:var(--dw-muted); font-weight:700; font-size:14px; transition:all .2s;
}
.dw-nav-item:hover{ color:var(--dw-text); background:rgba(212,175,55,.06); }
.dw-nav-item.active{ background:linear-gradient(135deg,#f59e0b,#d4af37); color:#0b0f19; }

/* خلية رقم في شبكة السحب */
.dw-cell{
  position:relative; overflow:hidden; height:48px;
  background:var(--dw-bg-deep); border:1px solid var(--dw-line);
  border-radius:12px; color:var(--dw-text); font-weight:800;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;
}
.dw-cell:hover{ border-color:var(--dw-gold-2); color:var(--dw-gold-2); }
.dw-cell:active{ transform:scale(.95); }
.dw-cell.selected{
  background:linear-gradient(135deg,#f59e0b,#d4af37,#b45309);
  color:#0b0f19; box-shadow:0 8px 20px -4px rgba(212,175,55,.5); transform:scale(1.08);
}
.dw-cell .rose{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; opacity:.22; pointer-events:none; }
.dw-cell .num{ position:relative; z-index:1; }

/* المودال */
.dw-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px);
  z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
}

/* ===== الحركات ===== */
@keyframes dropArabic{0%{opacity:0;transform:translateY(-40px) scale(.9);filter:blur(8px);}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(.5);filter:blur(10px);}70%{transform:translateY(8px) scale(1.05);filter:blur(0);}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
@keyframes goldGlow{0%,100%{text-shadow:0 0 10px rgba(212,175,55,.4),0 0 20px rgba(212,175,55,.2);}50%{text-shadow:0 0 25px rgba(212,175,55,.9),0 0 35px rgba(212,175,55,.6);}}
@keyframes fadeInSlide{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}}
@keyframes screenShake{0%,100%{transform:translate(0,0);}20%{transform:translate(-4px,3px);}40%{transform:translate(4px,-3px);}60%{transform:translate(-2px,2px);}80%{transform:translate(2px,-1px);}}
@keyframes bloomBox{0%{opacity:0;transform:scale(.6) rotateX(-20deg);filter:blur(4px);}100%{opacity:1;transform:scale(1) rotateX(0);filter:blur(0);}}
@keyframes popUp{0%{opacity:0;transform:scale(.8) translateY(20px);}100%{opacity:1;transform:scale(1) translateY(0);}}
@keyframes spinSlow{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}

.arabic-title{
  opacity:0;
  background:linear-gradient(90deg,#b45309 0%,#f59e0b 20%,#fff7cc 50%,#f59e0b 80%,#b45309 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:dropArabic 1s cubic-bezier(.175,.885,.32,1.275) .2s forwards, goldShine 3.2s linear infinite 1.1s, goldGlow 2.5s infinite ease-in-out 1s;
}
@keyframes goldShine{ 0%{ background-position:220% center; } 100%{ background-position:-220% center; } }
.anim-gold-glow{ animation:goldGlow 2.5s infinite ease-in-out; }
.anim-fade{ opacity:0; animation:fadeInSlide 1s ease forwards; }
.anim-bloom{ animation:bloomBox .5s cubic-bezier(.175,.885,.32,1.275) forwards; }
.anim-pop{ animation:popUp .35s cubic-bezier(.175,.885,.32,1.275) forwards; }
.anim-shake{ animation:screenShake .4s ease-in-out; }
.anim-spin-slow{ animation:spinSlow 3s linear infinite; }

/* شريط التمرير */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:var(--dw-bg-deep); }
::-webkit-scrollbar-thumb{ background:var(--dw-gold-2); border-radius:10px; }

/* أدوات مساعدة للتخطيط */
.dw-hidden{ display:none !important; }
.dw-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.dw-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.dw-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dw-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:640px){
  .dw-grid-4{ grid-template-columns:repeat(2,1fr); }
  .dw-grid-3{ grid-template-columns:repeat(1,1fr); }
}

/* ===== اسم DAWROK المتحرّك (تساقط الحروف) ===== */
.letter{ display:inline-block; opacity:0; animation:dropIn .8s cubic-bezier(.175,.885,.32,1.275) forwards, goldGlow 2.5s infinite ease-in-out 1.2s; }
.letter-1{ animation-delay:.4s,1.2s; }
.letter-2{ animation-delay:.5s,1.2s; }
.letter-3{ animation-delay:.6s,1.2s; }
.letter-4{ animation-delay:.7s,1.2s; }
.letter-5{ animation-delay:.8s,1.2s; }
.letter-6{ animation-delay:.9s,1.2s; }

/* ===== تجاوب لوحة التحكم (هاتف/لابتوب) ===== */
.dw-hamb{ display:none; }
.dw-side-backdrop{ display:none; }
@media (max-width:860px){
  .dw-hamb{
    display:flex; position:fixed; top:10px; right:12px; z-index:80;
    width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center;
    background:var(--dw-card); border:1px solid rgba(212,175,55,.45); color:var(--dw-gold-2);
    font-size:22px; cursor:pointer;
  }
  .dw-side{
    position:fixed !important; top:0 !important; right:0; left:auto;
    height:100vh !important; width:250px !important; max-width:82vw;
    transform:translateX(105%); transition:transform .28s ease; z-index:90;
    border-left:1px solid rgba(212,175,55,.25) !important;
  }
  .dw-side.open{ transform:translateX(0); }
  .dw-side-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:85; }
  .dw-main{ padding:66px 14px 22px !important; }
  .dw-grid-5{ grid-template-columns:repeat(4,1fr); }
  .dw-table{ font-size:12px; }
}