/* ============================================================
   KWS Admin — Design Tokens (مصدر وحيد للألوان)
   هوية اللوجو: بني الخبز · بني الشاورما · ذهبي القشرة · أحمر الطماطم
   ============================================================ */
:root {
    /* ---- Brand / Ember ---- */
    --brand-300:#E8A06B; --brand-400:#DE7F42; --brand-500:#C0562A;
    --brand-600:#A5461F; --brand-700:#833715;

    /* ---- Semantic (الحالات فقط) ---- */
    --gold-500:#E0A44E;    --gold-600:#C9883A;
    --success-500:#2F8F5B; --success-600:#237045;
    --danger-500:#D93A2B;  --danger-600:#BB2C20;
    /* درجات مشتقّة من نفس العائلات (تدرّجات الأشرطة والشارات) */
    --success-400:#3AA76D; --success-50:#DFF3E8;  --success-150:#CBEBDA;
    --danger-400:#E5584A;  --danger-50:#FDE4E0;   --danger-150:#FAD3CD;
    --scroll:#CBD2DA;
    --scrim:rgba(19,25,34,.55);   /* حجاب النوافذ المنبثقة — من عائلة cocoa-900 */

    /* ---- Graphite neutrals ---- */
    --bg:#F3F4F6; --surface:#FFFFFF; --surface-2:#F8F9FB;
    --border:#E6E8EC; --border-2:#EDEFF2;
    --text:#1C2530; --text-muted:#6B7686; --text-soft:#9AA4B2;

    /* ---- Sidebar (فحمي غامق) ---- */
    --side1:#2A3340; --side2:#1B222C; --side-ico:#9DA8B6;
    --cocoa-800:#1B222C; --cocoa-900:#131922;   /* tooltip / أغمق */

    /* ---- أسطح مساعدة ---- */
    --bg-grad: radial-gradient(1100px 460px at 88% -10%, #FBEADD 0%, transparent 55%);
    --grid:#EDEFF2; --barbg:#EDEFF2;
    --icbg1:#FCE7D6; --icbg2:#F6CBAA;
    --topbar1:rgba(255,255,255,.9); --topbar2:rgba(255,255,255,.72);

    /* ---- الشكل والظل والحركة ---- */
    --radius:20px; --radius-card:20px; --radius-ctl:13px;
    --shadow-sm:0 1px 2px rgba(20,28,40,.05), 0 4px 12px rgba(30,41,59,.06);
    --shadow:0 2px 6px rgba(20,28,40,.05), 0 18px 40px -14px rgba(30,41,59,.16);
    --shadow-lg:0 10px 26px -6px rgba(30,41,59,.20), 0 30px 60px -20px rgba(15,23,42,.24);
    --t-fast:160ms; --t-base:220ms; --ease:cubic-bezier(.4,0,.2,1);

    /* ============================================================
       Aliases — الأسماء المستهلكة بالكود تشير للتوكنز أعلاه
       (كل var قائم يظل شغّال بدون لمس بنية الصفحات)
       ============================================================ */
    --brand: var(--brand-500);   --brand-dark: var(--brand-600);
    --caramel: var(--gold-500);  --caramel-soft: var(--icbg1);
    --bread: var(--text-muted);  --bread-dark: var(--text);
    --cocoa: var(--cocoa-900);
    --page-bg: var(--bg);        --bg-base: var(--bg);
    --text-dim: var(--text-muted);
    --text-faint: var(--text-soft);
    --line: var(--border);       --card-border: var(--border-2);
    --card-shadow: var(--shadow);
    --card-shadow-hover: var(--shadow-lg);
    --success: var(--success-600);  --success-100:#E8F3ED;  --success-bg: var(--success-100);
    --danger:  var(--danger-600);   --danger-100:#FDE7E4;   --danger-bg:  var(--danger-100);
    --danger-200: var(--danger-150);
    --warn:    var(--gold-600);     --gold-100:#FBEEDC;     --warn-bg:    var(--gold-100);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', 'Poppins', 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--page-bg);
    min-height: 100vh;
}

/* خلفية فاتحة دافئة + توهّجات خفيفة جدًا */
body {
    background: var(--bg-grad), var(--bg);
    background-attachment: fixed;
}

/* ===== كرت مرتفع (Elevated surface) — أبيض بظِل دافي وزوايا كبيرة ===== */
.glass {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
/* شريط علوي 4px بتدرّج brand → gold */
.glass::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-400), var(--gold-500));
    opacity: .9;
    pointer-events: none;
    z-index: 1;
}
.glass:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.glass > * { position: relative; z-index: 2; }

/* ===== كروت الإحصاءات ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.stat-card {
    padding: 24px 26px;
    animation: fadeUp 0.5s ease both;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-lg);
}
.stat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: 0.95rem;
    font-weight: 600;
}
.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--icbg1), var(--icbg2));
    border: none;
    color: var(--brand-600);
}
.stat-value {
    margin-top: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}
.v-brand   { color: var(--brand); }
.v-caramel { color: var(--caramel); }
.v-success { color: var(--success); }
.v-danger  { color: var(--danger); }
.stat-sub {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-dim);
}

/* ===== أزرار العلامة ===== */
.brand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 18px;
    border: none;
    border-radius: var(--radius-ctl);
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 10px 22px -8px rgba(192,86,42,.6), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.brand-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.brand-btn.ghost {
    background: rgba(192, 86, 42, .07);
    color: var(--brand-600);
    border: 1px solid rgba(192, 86, 42, .26);
    box-shadow: none;
}
.brand-btn.ghost:hover { background: rgba(192, 86, 42, .12); }
.brand-btn.caramel {
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(192,86,42,.6), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ===== تسجيل الدخول ===== */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
/* كرت الدخول: بلا الشريط العلوي (يبان "مقصوص" بكرت واحد) وفراغ مجمّع */
.login-card {
    width: 100%;
    max-width: 400px;
    padding: 34px 36px 30px;
    text-align: center;
    animation: fadeUp 0.6s ease both;
}
.login-card::before { display: none; }
.login-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 12px 26px -8px rgba(192,86,42,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
/* لون صلب — التدرّج بهالحجم بيطلع متقطّع */
.login-title {
    font-size: 1.55rem; font-weight: 800; margin: 0 0 5px;
    color: var(--text);
    background: none; -webkit-text-fill-color: currentColor; letter-spacing: -.3px;
}
.login-sub { color: var(--text-dim); margin: 0 0 26px; font-size: 0.9rem; }
.field { text-align: right; margin-bottom: 18px; }
.field label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; }

/* حقل بأيقونة جوّاه — خلفية بيضا وحد واضح */
.input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: var(--radius-ctl);
    border: 1.5px solid var(--border);
    background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-wrap .mud-icon-root { color: var(--text-soft); flex-shrink: 0; font-size: 1.15rem; transition: color .2s ease; }
.input-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 0;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}
.input-wrap input::placeholder { color: var(--text-soft); }
.input-wrap:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(192, 86, 42, .12);
}
.input-wrap:focus-within .mud-icon-root { color: var(--brand-500); }

.login-btn { margin-top: 22px; padding: 15px; font-size: 1.02rem; }
/* نلغي خلفية المتصفّح الزرقا للملء التلقائي — تكسر لون الثيم */
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
    caret-color: var(--text);
}
.login-error {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    background: var(--danger-bg);
    border: 1px solid rgba(187, 44, 32, .22);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

/* ===== الشريط الجانبي + الرأس ===== */
.admin-shell { display: flex; min-height: 100vh; }
.side-rail {
    width: 88px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    background: linear-gradient(180deg, var(--side1), var(--side2));
    border-right: none;
    box-shadow: -6px 0 30px -10px rgba(15, 23, 42, .40);   /* الظل يقع باتجاه المحتوى (يسار) */
    position: relative;
    z-index: 5;
}
.rail-logo {
    width: 52px; height: 52px; border-radius: 16px;
    display: grid; place-items: center; margin-bottom: 18px;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff; font-weight: 900; font-size: 15px; letter-spacing: .5px;
    box-shadow: 0 8px 20px -6px rgba(192,86,42,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.rail-item {
    width: 50px; height: 50px; border-radius: 15px;
    display: grid; place-items: center; color: var(--side-ico);
    cursor: pointer; text-decoration: none; position: relative;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.rail-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.rail-item.active {
    color: #fff;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 8px 18px -5px rgba(192,86,42,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
/* مؤشّر على الحافة الداخلية (جهة المحتوى) */
.rail-item.active::after {
    content: "";
    position: absolute; inset-inline-end: -20px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 26px; border-radius: 5px;
    background: var(--brand-400);
    box-shadow: 0 0 14px 1px rgba(222,127,66,.8);
}
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-bar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    background: linear-gradient(180deg, var(--topbar1), var(--topbar2));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-2);
    box-shadow: 0 6px 22px -14px rgba(30,41,59,.30);
    position: sticky; top: 0; z-index: 4;
}
.top-title { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: 0; }
/* افتراضيًا على خلفية فاتحة (داخل الصفحات) */
.icon-btn {
    width: 42px; height: 42px; border-radius: var(--radius-ctl); border: none;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(192, 86, 42, .08); color: var(--brand-600);
    transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
    text-decoration: none;
}
.icon-btn:hover { background: rgba(192, 86, 42, .16); transform: scale(1.04); }
/* زر الطاقة بالتوب بار — برتقالي متدرّج */
.top-bar .icon-btn {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(192,86,42,.55);
}
.top-bar .icon-btn:hover { background: linear-gradient(145deg, var(--brand-400), var(--brand-700)); }
.page-body { padding: 30px 34px 40px; flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; }

/* ===== أدوات ===== */
.section-title {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    margin: 6px 0 16px; display: flex; align-items: center; gap: 10px;
}
.chip-date {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 14px;
    background: var(--surface); color: var(--cocoa);
    border: 1px solid var(--line);
    font-weight: 700; font-size: 0.95rem;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   التايبوغرافي — تدرّج واضح + أرقام جدولية
   ============================================================ */
.page-h1 {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem);
    font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
    background: linear-gradient(120deg, var(--text), var(--brand-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}
.hero-value, .kpi-value, .stat-value, .quick-num, .pay-value, .cell-num, .cell-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.hero-value { font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); }
.section-title, .cell-title { color: var(--text); }

/* ============================================================
   الحركة — هادفة فقط، مع احترام تفضيل تقليل الحركة
   ============================================================ */
.stat-card, .setting-btn, .quick-link, .brand-btn, .icon-btn, .rail-item,
.filter-field, .form-input, .form-textarea, .field input, .seg button {
    transition-duration: var(--t-base);
    transition-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .stat-card:hover, .setting-btn:hover, .quick-link:hover,
    .brand-btn:hover, .icon-btn:hover { transform: none !important; }
}

/* زر أيقونة بحالة خطر (حذف) */
.icon-btn.danger { background: var(--danger-100); color: var(--danger-600); }
.icon-btn.danger:hover { background: var(--danger-200); }

/* شريط تمرير رفيع */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== شبكة Bento ===== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.bento-grid > .span2 { grid-column: span 2; }
@media (max-width: 1100px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-grid > .span2 { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-grid > .span2 { grid-column: span 1; }
}

/* ===== كرت HERO (الرقم البطل) ===== */
.hero {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    animation: fadeUp 0.5s ease both;
    /* تدرّج دافي خفيف بدل التوهّج الداكن */
    background-image: none;
}
.hero-label { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-weight: 600; }
.hero-value {
    font-family: 'Poppins', sans-serif;
    font-size: 4.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--brand-500);
    text-shadow: 0 10px 30px rgba(192, 86, 42, .22);
}
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }

/* شارة الفرق (delta) */
.delta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 800;
}
.delta { padding: 7px 12px; border-radius: 11px; font-size: 13px; }
.delta.up   { background: linear-gradient(145deg, var(--success-50), var(--success-150)); color: var(--success-600); }
.delta.down { background: linear-gradient(145deg, var(--danger-50), var(--danger-150)); color: var(--danger-600); }
.delta.flat { background: var(--surface-2); color: var(--text-muted); }

/* ===== كرت KPI صغير + شريط نسبة ===== */
.kpi { padding: 22px 24px; animation: fadeUp 0.5s ease both; display: flex; flex-direction: column; gap: 0; }
.kpi::before { display: none; }          /* كروت الحالة بدون شريط علوي — زي المرجع */
.kpi-head { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 15px; font-weight: 700; }
.kpi-dot { width: 11px; height: 11px; border-radius: 50%; }
.kpi-value { font-size: 44px; font-weight: 900; line-height: 1; margin: 16px 0 14px; }
.share-bar { height: 7px; border-radius: 6px; background: var(--barbg); overflow: hidden; }
.share-fill { height: 100%; border-radius: 6px; transition: width .9s var(--ease); }
.share-sub { margin-top: 12px; font-size: 13px; color: var(--text-muted); font-weight: 600; }

.c-brand   { color: var(--brand-500); }
.c-caramel { color: var(--gold-600); }
.c-success { color: var(--success-600); }
.c-danger  { color: var(--danger-500); }
.bg-brand   { background: var(--brand-500); }
.bg-caramel { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }
.bg-success { background: linear-gradient(90deg, var(--success-400), var(--success-600)); }
.bg-danger  { background: linear-gradient(90deg, var(--danger-400), var(--danger-600)); }
/* نقطة الحالة تاخذ لون الحالة الفاتح */
.kpi-dot.bg-caramel { background: var(--gold-500); }
.kpi-dot.bg-success { background: var(--success-500); }
.kpi-dot.bg-danger  { background: var(--danger-500); }

/* كرت الرسم/الرابط داخل البنتو */
.bento-cell { padding: 22px 24px; animation: fadeUp 0.5s ease both; display: flex; flex-direction: column; }
.bento-cell .cell-title { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; margin-bottom: 12px; }

/* رابط سريع */
/* كرت المستخدمين — hero برتقالي متدرّج بنص أبيض */
.quick-link {
    padding: 26px; animation: fadeUp 0.5s ease both;
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
    border: none; color: #fff;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.quick-link::before { display: none; }
/* دائرة توهّج بالزاوية */
.quick-link::after {
    content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
    top: -60px; inset-inline-start: -40px; pointer-events: none;
}
.quick-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.quick-link .kpi-head { color: #fff; font-size: 16px; }
.quick-link .stat-icon { background: rgba(255,255,255,.16); border: none; color: #fff; width: 48px; height: 48px; border-radius: 14px; }
.quick-link .share-sub { color: #fff; opacity: .95; font-size: 14px; font-weight: 700; margin-top: 0; }
.quick-num { font-size: 46px; font-weight: 900; color: #fff; text-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* ===== رأس الصفحة ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.page-h1 { font-size: 1.8rem; font-weight: 800; margin: 0; }
.page-hint { color: var(--text-dim); font-size: .85rem; margin-top: 2px; }

/* ===== شريط الفلاتر ===== */
.filter-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 16px 18px; margin-bottom: 20px;
}
.filter-bar .mud-input-control { min-width: 200px; }
.filter-field {
    padding: 11px 15px; border-radius: var(--radius-ctl);
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-sm);
    font-family: inherit; font-size: 14px; outline: none; min-width: 190px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.filter-field:focus { border-color: var(--brand-500); background: var(--surface); box-shadow: 0 0 0 3px rgba(192, 86, 42, .13); }
.filter-field::placeholder { color: var(--text-faint); }
/* حقل التاريخ الأصلي — تقويم فاتح */
.date-input { color-scheme: light; min-width: 160px; cursor: pointer; }
.date-label { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--text-dim); font-weight: 700; }

/* فلتر الحالة (شرائح) */
.seg { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-ctl); border: 1px solid var(--border); }
.seg button {
    border: none; background: transparent; color: var(--text-dim);
    padding: 8px 14px; border-radius: 9px; cursor: pointer; font-family: inherit;
    font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s ease;
}
.seg button:hover { color: var(--text); }
.seg button.on { color: #fff; background: linear-gradient(145deg, var(--brand-400), var(--brand-600)); box-shadow: 0 6px 14px -6px rgba(192,86,42,.6); }

/* ===== الجدول ===== */
.table-wrap { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data-table thead th {
    /* start = يمين بالعربي، يسار بالإنجليزي — نفس محاذاة الخلايا تحتها بالضبط */
    text-align: start; padding: 15px 18px; white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-muted); font-weight: 800; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .4px;
    position: sticky; top: 0; z-index: 1;
    border-bottom: 1px solid var(--line);
}
table.data-table tbody td { text-align: start; padding: 14px 18px; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--border-2); }
table.data-table tbody tr { transition: background .18s ease; }
table.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
table.data-table tbody tr:hover { background: var(--surface-2); }
.cell-num { font-family: 'Poppins'; font-weight: 700; color: var(--brand); }
.cell-money { font-family: 'Poppins'; font-weight: 700; }
.cell-muted { color: var(--text-dim); }
.table-empty { padding: 50px; text-align: center; color: var(--text-dim); }

/* شارات الحالة/النوع */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge { padding: 5px 12px; border-radius: 11px; font-weight: 700; }
.badge.b-pending  { background: var(--gold-100);    color: var(--gold-600); }
.badge.b-accepted { background: var(--success-100); color: var(--success-600); }
.badge.b-rejected { background: var(--danger-100);  color: var(--danger-600); }
.badge.b-neutral  { background: var(--surface-2);   color: var(--text-muted); }
.badge.b-delivery { background: var(--icbg1);       color: var(--brand-600); }
.badge.b-pickup   { background: var(--surface-2);   color: var(--text-muted); }

/* نجوم التقييم */
.stars { color: var(--gold-500); letter-spacing: 2px; font-size: 1rem; }
.stars .off { color: var(--border-2); }

/* ===== قائمة الإعدادات (أزرار) ===== */
.settings-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 860px; margin: 0 auto; }
.setting-btn {
    display: flex; align-items: center; gap: 16px; text-align: right;
    padding: 22px 24px; cursor: pointer; text-decoration: none; color: var(--text);
    animation: fadeUp .5s ease both;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.setting-btn:hover { transform: translateY(-3px); border-color: var(--brand-300); box-shadow: var(--shadow-lg); }
.setting-btn[disabled], .setting-btn.soon { opacity: .5; pointer-events: none; }
.setting-ic {
    width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--icbg1), var(--icbg2));
    border: none; color: var(--brand-600);
}
.setting-txt b { display: block; font-size: 1.05rem; font-weight: 800; }
.setting-txt span { font-size: .8rem; color: var(--text-dim); }

/* ===== نماذج ===== */
.form-card { max-width: 640px; margin: 0 auto; padding: 30px 32px; animation: fadeUp .5s ease both; }
.form-row { margin-bottom: 20px; }
.form-row > label { display: block; font-size: .88rem; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; }
.form-input, .form-textarea {
    width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: var(--radius-ctl);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-sm);
    font-family: inherit; font-size: 1rem; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-textarea { resize: vertical; min-height: 90px; }
.form-input:focus, .form-textarea:focus { border-color: var(--brand-500); background: var(--surface); box-shadow: 0 0 0 3px rgba(192, 86, 42, .13); }
.form-hint { font-size: .76rem; color: var(--text-dim); margin-top: 6px; }
/* حقل اختيار صورة */
.file-input { cursor: pointer; padding: 10px 12px; }
.file-input::file-selector-button {
    margin-inline-end: 12px; padding: 8px 16px; border: none; border-radius: 9px;
    background: var(--brand-500);
    color: #fff; font-family: inherit; font-weight: 700; cursor: pointer;
}
.file-input::file-selector-button:hover { filter: brightness(1.08); }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid2 { grid-template-columns: 1fr; } }

/* مفتاح تبديل (toggle) */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
/* المفاتيح تظل تشتغل شمال→يمين حتى داخل صفحة RTL */
.switch { position: relative; width: 58px; height: 32px; flex-shrink: 0; direction: ltr; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--barbg); transition: background var(--t-base) var(--ease); cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; border-radius: 50%; background: #fff; transition: transform .25s ease; }
.switch input:checked + .track { background: var(--success-500); }
.switch input:checked + .track::before { transform: translateX(26px); }

/* حالة الحفظ */
.save-toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: .88rem; animation: fadeUp .3s ease both; }
.save-toast.ok { background: var(--success-bg); color: var(--success); }
.save-toast.err { background: var(--danger-bg); color: var(--danger); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); text-decoration: none; font-weight: 700; margin-bottom: 18px; }
.back-link:hover { color: var(--bread-dark); }

/* كروت المدفوعات */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pay-card { padding: 28px 30px; animation: fadeUp .5s ease both; }
.pay-card.big { grid-column: 1 / -1; text-align: center; }
.pay-label { color: var(--text-dim); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.pay-value { font-family: 'Poppins'; font-weight: 800; line-height: 1; }
.pay-card.big .pay-value { font-size: 3.6rem; }
.pay-card:not(.big) .pay-value { font-size: 2.2rem; }
/* مبلغ العملة ينقرأ LTR دايمًا (EGP ثم الرقم) — فالمسافة فيزيائية مش منطقية */
.egp { font-size: .5em; color: var(--text-dim); font-weight: 700; margin-right: 6px; }

/* ===== نافذة منبثقة: اختيار الفروع (Selected shops) ===== */
.kws-modal { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(4px); animation: fadeUp .22s var(--ease) both; }
.kws-modal-card { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); padding: 32px 34px 28px; max-height: 86vh; overflow-y: auto; }
.kws-modal-title { font-family: 'Poppins'; font-weight: 800; font-size: 1.25rem; text-align: center; margin-bottom: 26px; background: linear-gradient(135deg, var(--text), var(--brand-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kws-modal-actions { display: flex; gap: 12px; margin-top: 28px; }
.shop-row { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 12px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.shop-row:hover { border-color: var(--brand-300); background: var(--surface); }
.shop-row .shop-name { flex: 1; min-width: 0; font-weight: 700; line-height: 1.6; }
.shop-row .shop-addr { display: block; font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.shop-hint { font-size: .82rem; color: var(--text-dim); text-align: center; margin-top: 4px; }

/* ===== عزل الرسوم البيانية عن اتجاه الصفحة (RTL) ===== */
/* مكتبات الشارت ترسم إحداثياتها فيزيائيًا — نخلّيها LTR حتى ما تنقلب المحاور */
.apexcharts-canvas, .apexcharts-canvas * { direction: ltr; }

/* ===== صف قابل للضغط + نافذة تفاصيل التقييم ===== */
tr.row-click { cursor: pointer; }
tr.row-click:hover { background: var(--icbg1) !important; }
.rv-block { text-align: center; padding: 16px 0; border-bottom: 1px solid var(--border-2); }
.rv-block:last-child { border-bottom: none; padding-bottom: 4px; }
.rv-label { font-size: .78rem; font-weight: 800; color: var(--text-soft); letter-spacing: .5px; margin-bottom: 6px; }
.rv-value { font-size: 1.02rem; font-weight: 700; color: var(--text); }
.rv-sub { font-size: .88rem; color: var(--text-dim); margin-top: 4px; }

/* ============================================================
   الشاشة الحيّة (Orders Monitor)
   حالات العمر: اللون طبقة تعزيز فقط — الرقم والأيقونة والكلمة
   هي الإشارة الأساسية (لأن ثلاثية أخضر/ذهبي/أحمر ترسب في عمى الألوان)
   ============================================================ */
.live-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; }
.live-stat { display: flex; flex-direction: column; gap: 2px; padding-inline-end: 20px; border-inline-end: 1px solid var(--border-2); }
.live-stat:last-of-type { border-inline-end: none; }
.live-stat-n { font-family: 'Poppins'; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--brand-500); }
.live-stat-l { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success-500); flex-shrink: 0; }
.live-dot.off { background: var(--danger-500); }

/* شريط انقطاع الاتصال */
.live-offline { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px;
  background: var(--danger-50); color: var(--danger-600); border: 1px solid var(--danger-150);
  border-radius: var(--radius-ctl); font-weight: 800; margin-bottom: 16px; }

/* اللوحة */
.live-board { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .live-board { grid-template-columns: 1fr; } }
.live-col { padding: 0; overflow: hidden; }
.live-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.live-col-title { font-weight: 800; font-size: .95rem; }
.live-count { font-family: 'Poppins'; font-weight: 800; font-size: .82rem; padding: 3px 11px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.live-list { padding: 14px; display: flex; flex-direction: column; gap: 12px; max-height: 68vh; overflow-y: auto; }
.live-empty { padding: 34px 14px; text-align: center; color: var(--text-soft); font-size: .88rem; }

/* كرت الطلب */
.live-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; background: var(--surface); }
.live-card.calm  { border-inline-start: 4px solid var(--border); }
.live-card.warn  { border-inline-start: 4px solid var(--gold-700); background: var(--warn-bg); }
.live-card.late  { border-inline-start: 5px solid var(--danger-600); background: var(--danger-50); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(187,44,32,.34); } 50% { box-shadow: 0 0 0 7px rgba(187,44,32,0); } }

.live-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.live-id { font-family: 'Poppins'; font-weight: 800; font-size: 1.06rem; color: var(--brand-500); }
/* شارة العمر: أيقونة + رقم + كلمة — ثلاث إشارات غير لونية */
.live-age { display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins'; font-weight: 800;
  font-size: .95rem; padding: 4px 10px; border-radius: 10px; background: var(--surface); border: 1px solid currentColor; }
.live-age.calm { color: var(--text-muted); }
.live-age.warn { color: var(--gold-700); }
.live-age.late { color: var(--danger-600); }
.live-age-word { font-family: 'Cairo'; font-size: .74rem; font-weight: 800; }

.live-row { display: flex; align-items: center; gap: 7px; font-size: .87rem; margin-top: 5px; color: var(--text); }
.live-row .k { color: var(--text-soft); font-size: .8rem; font-weight: 700; }
.live-note { margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2);
  border: 1px dashed var(--border); font-size: .83rem; line-height: 1.6; white-space: normal; }
.live-actions { display: flex; gap: 9px; margin-top: 13px; }
.live-actions .brand-btn { padding: 12px 10px; font-size: .92rem; }
.live-actions .reject { background: var(--surface); color: var(--danger-600); border: 1px solid var(--danger-150); box-shadow: none; }
.live-actions .reject:hover { background: var(--danger-50); }

/* وضع الشاشة الكبيرة — يكبّر كل إشي للعرض من بعيد */
body.tv .side-rail, body.tv .top-bar { display: none; }
body.tv .live-card { padding: 18px 20px; }
body.tv .live-id { font-size: 1.35rem; }
body.tv .live-age { font-size: 1.2rem; padding: 6px 13px; }
body.tv .live-row { font-size: 1rem; }
body.tv .live-col-title { font-size: 1.15rem; }
body.tv .live-list { max-height: 82vh; }

/* ===== نافذة تفاصيل الطلب (مشتركة) ===== */
.od-card { width: min(620px, 100%); }
.od-loading { padding: 40px; text-align: center; color: var(--text-dim); }
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.od-id { font-family: 'Poppins'; font-weight: 800; font-size: 1.5rem; color: var(--brand-500); line-height: 1.1; }
.od-when { font-size: .84rem; color: var(--text-dim); margin-top: 4px; }

.od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .od-grid { grid-template-columns: 1fr; } }
.od-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.od-field.od-wide { margin-top: 12px; }
.od-k { font-size: .74rem; font-weight: 800; color: var(--text-soft); }
.od-v { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.od-note { margin-top: 14px; padding: 11px 13px; border-radius: 11px; background: var(--surface-2);
  border: 1px dashed var(--border); font-size: .88rem; line-height: 1.7; }

.od-section { margin: 20px 0 10px; font-weight: 800; font-size: .82rem; color: var(--text-soft);
  padding-bottom: 7px; border-bottom: 1px solid var(--border-2); }
.od-empty { padding: 18px; text-align: center; color: var(--text-soft); font-size: .85rem;
  background: var(--surface-2); border-radius: 11px; }

.od-items { display: flex; flex-direction: column; gap: 9px; }
.od-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px; }
.od-qty { font-family: 'Poppins'; font-weight: 800; color: var(--brand-500); flex-shrink: 0; }
.od-sub { font-size: .82rem; color: var(--text-dim); line-height: 1.6; }
.od-line { font-family: 'Poppins'; font-size: .88rem; white-space: nowrap; flex-shrink: 0; }

.od-sum { padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; }
.od-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 4px 0; }
.od-sum-row.total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
  font-weight: 800; font-size: 1.06rem; color: var(--brand-500); }

.od-reject { background: var(--surface); color: var(--danger-600); border: 1px solid var(--danger-150); box-shadow: none; }
.od-reject:hover:not(:disabled) { background: var(--danger-50); }
.kws-modal-actions .brand-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* حقل قابل للنسخ بضغطة (الزبون / الهاتف / العنوان) */
.od-copy { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin-inline-start: -6px;
  transition: background var(--t-fast) var(--ease); }
.od-copy:hover { background: var(--surface-2); }
.od-copy-ico { font-size: .95rem !important; color: var(--text-soft); flex-shrink: 0; }
.od-copy:hover .od-copy-ico { color: var(--brand-500); }
.od-copy-ico.ok { color: var(--success-600); }

/* ===== نافذة تأكيد مخصّصة (بدل confirm المتصفّح) ===== */
.kws-confirm-scrim { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center;
  padding: 20px; background: var(--scrim); backdrop-filter: blur(5px); animation: fadeUp .18s var(--ease) both; }
.kws-confirm { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg); padding: 30px 28px 24px; text-align: center; }
.kws-confirm-icon { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--brand-500); }
.kws-confirm-icon.danger { background: var(--danger-50); color: var(--danger-600); }
.kws-confirm-icon .mud-icon-root { font-size: 2rem; }
.kws-confirm-msg { font-weight: 700; font-size: 1.04rem; line-height: 1.75; color: var(--text); margin-bottom: 24px; }
.kws-confirm-actions { display: flex; gap: 10px; }
.kws-confirm-actions .brand-btn { flex: 1; }
/* كرت قابل للضغط بالشاشة الحيّة */
.od-clickable { cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.od-clickable:hover { border-color: var(--brand-300); transform: translateY(-2px); }
/* دروب داون الفرع — نفس ارتفاع حقول التاريخ بشريط الفلاتر */
.shop-select select { min-width: 190px; cursor: pointer; }

/* شارة الطلبات المنتظرة بالتوب بار (مع التنبيه الصوتي) */
.alarm-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--danger-50); color: var(--danger-600); border: 1px solid var(--danger-150);
  font-weight: 800; font-size: .83rem; margin-inline-start: 14px;
  animation: alarmPulse 1.8s ease-in-out infinite; }
@keyframes alarmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(187,44,32,.32); } 50% { box-shadow: 0 0 0 7px rgba(187,44,32,0); } }
@media (prefers-reduced-motion: reduce) { .alarm-pill { animation: none; } }