/* =====================================================================
   TMERP 2027 — الستايل الموحد (تصميم كتيب TMERP 2027)
   - القيم الافتراضية هنا = استيل "TMERP". كل استيل في Code/Themes.cs يكتب نفس المتغيرات
     في <style id="ezTheme"> بعد هذا الملف، والمستخدم يختار من زر الألوان في الشريط العلوي.
   - الوضع الليلي: html[data-mode="dark"] (خلفيات عامة هنا + لون التمييز من الاستيل).
   ===================================================================== */
:root {
    /* الألوان */
    --ez-bg: #f3f5fa;
    --ez-surface: #ffffff;
    --ez-surface-2: #f8f9fc;
    --ez-line: #e2e6ee;
    --ez-line-soft: #edf0f5;
    --ez-ink: #111827;
    --ez-ink-2: #4b5563;
    --ez-ink-3: #8a93a3;
    --ez-accent: #4f46e5;
    --ez-accent-2: #4338ca;
    --ez-accent-ink: #ffffff;
    --ez-accent-soft: #eef0ff;
    --ez-focus: color-mix(in srgb, var(--ez-accent) 28%, transparent);
    --ez-hl: #f59e0b;              /* لون التمييز: البرتقالي في هوية TMERP */
    --ez-good: #16a34a;
    --ez-good-soft: #e7f6ec;
    --ez-warn: #b45309;
    --ez-warn-soft: #fdf3e1;
    --ez-bad: #dc2626;
    --ez-bad-soft: #fdeceb;
    --ez-info: #2563eb;
    --ez-info-soft: #e8f0fe;
    --ez-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .05);
    --ez-pop: 0 12px 32px rgba(15, 23, 42, .16);

    /* شكل العناصر */
    --ez-radius: 12px;
    --ctl-radius: 8px;
    --btn-radius: 8px;
    --btn-weight: 600;
    --btn-shadow: none;
    --btn-primary-bg: var(--ez-accent);
    --brand-ic-bg: var(--btn-primary-bg);

    /* الشريط العلوي */
    --top-bg: #ffffff;
    --top-ink: #111827;
    --top-ink-2: #4b5563;
    --top-line: #e2e6ee;
    --top-hover: rgba(15, 23, 42, .05);
    --top-on-bg: var(--ez-accent-soft);
    --top-on-ink: var(--ez-accent);
    --top-on-line: color-mix(in srgb, var(--ez-accent) 45%, transparent);

    /* القائمة الجانبية */
    --side-bg: #0f172a;
    --side-ink: #cbd5e1;
    --side-ink-2: #7c8aa3;
    --side-hover: rgba(255, 255, 255, .06);
    --side-on: #1e293b;
    --side-on-ink: #ffffff;
    --side-title: #ffffff;
    --side-icon: var(--ez-hl);
    --side-line: rgba(255, 255, 255, .08);

    --ez-font: "Cairo", Tahoma, "Segoe UI", sans-serif;
    --side-w: 250px;
    --top-h: 60px;
    --gut: 24px;
    color-scheme: light;
}

/* ===== الوضع الليلي ===== */
html[data-mode="dark"] {
    --ez-bg: #0b1020;
    --ez-surface: #121829;
    --ez-surface-2: #182036;
    --ez-line: #263049;
    --ez-line-soft: #1c2540;
    --ez-ink: #e6e9f2;
    --ez-ink-2: #aab3c6;
    --ez-ink-3: #76809a;
    --ez-accent-soft: color-mix(in srgb, var(--ez-accent) 20%, #121829);
    --ez-focus: color-mix(in srgb, var(--ez-accent) 40%, transparent);
    --ez-good: #4ade80;
    --ez-good-soft: #12301f;
    --ez-warn: #fbbf24;
    --ez-warn-soft: #33270c;
    --ez-bad: #f87171;
    --ez-bad-soft: #3a1717;
    --ez-info: #93c5fd;
    --ez-info-soft: #142640;
    --ez-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
    --ez-pop: 0 12px 32px rgba(0, 0, 0, .5);
    --top-bg: #0f1526;
    --top-ink: #e6e9f2;
    --top-ink-2: #aab3c6;
    --top-line: #1e2740;
    --top-hover: rgba(255, 255, 255, .06);
    --top-on-bg: color-mix(in srgb, var(--ez-accent) 22%, transparent);
    --top-on-ink: var(--ez-accent);
    --top-on-line: color-mix(in srgb, var(--ez-accent) 45%, transparent);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ez-bg);
    color: var(--ez-ink);
    font-family: var(--ez-font);
    font-size: 14px;
    line-height: 1.55;
}
a { color: var(--ez-accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ez-focus); outline-offset: 1px; }
.ez-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ez-muted { color: var(--ez-ink-3); }
.ez-good-text { color: var(--ez-good) !important; }
.ez-bad-text { color: var(--ez-bad) !important; }

/* =====================================================================
   الهيكل: شريط علوي بالأقسام + قائمة جانبية للقسم الحالي + المحتوى
   ===================================================================== */
.app { min-height: 100vh; }

.top {
    position: sticky; top: 0; z-index: 40; height: var(--top-h);
    display: flex; align-items: center; gap: 16px; padding: 0 16px;
    background: var(--top-bg); color: var(--top-ink); border-bottom: 1px solid var(--top-line);
}

/* الشعار: TMERP 2027 — كتاب مفتوح */
.brand { display: flex; align-items: center; gap: 8px; flex: none; color: var(--top-ink); text-decoration: none; }
.brand:hover { color: var(--top-ink); }
.brand-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--brand-ic-bg); color: #fff; font-size: 15px; }
.brand-book { width: 70%; height: 70%; display: block; }
.brand-t { direction: ltr; font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.brand-t b { color: var(--ez-hl); font-weight: 800; }
.brand-yr { direction: ltr; font-size: 11px; font-weight: 800; line-height: 1; color: #fff; padding: 4px 9px; border-radius: 999px; background: linear-gradient(90deg, #ec4899, #8b5cf6); }

/* الأقسام في الشريط العلوي */
.tnav { flex: 1 1 auto; min-width: 0; }
.tn { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.tn-item { position: relative; flex: none; }
.tn-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px;
    border: 1px solid transparent; border-radius: 9px; background: none; color: var(--top-ink);
    font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.tn-btn > i:first-child { color: var(--top-ink-2); font-size: 13px; }
.tn-caret { font-size: 9px; opacity: .55; }
.tn-btn:hover, .tn-btn[aria-expanded="true"] { background: var(--top-hover); }
.tn-item.on > .tn-btn { background: var(--top-on-bg); color: var(--top-on-ink); border-color: var(--top-on-line); }
.tn-item.on > .tn-btn > i:first-child { color: inherit; }

/* القوائم المنسدلة (الأقسام + المستخدم) */
.dd { position: relative; }
.dd-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 60;
    min-width: 230px; max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; padding: 6px;
    background: var(--ez-surface); color: var(--ez-ink); border: 1px solid var(--ez-line); border-radius: 12px; box-shadow: var(--ez-pop);
}
.user-dd .dd-menu, .help-dd .dd-menu { inset-inline-start: auto; inset-inline-end: 0; }
.dd-sep { height: 1px; margin: 4px 6px; background: var(--ez-line-soft); }
.help-dd > .tool[aria-expanded="true"] { background: var(--top-hover); color: var(--top-ink); }
.dd-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--ez-ink); font: inherit; font-size: 13px; text-align: start; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.dd-item i { width: 16px; text-align: center; color: var(--ez-ink-3); font-size: 13px; }
.dd-item:hover, .dd-item.on { background: var(--ez-accent-soft); color: var(--ez-accent); }
.dd-item:hover i, .dd-item.on i { color: var(--ez-accent); }
.dd-item.on { font-weight: 700; }
.dd-head { display: grid; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ez-line-soft); line-height: 1.35; }
.dd-head small { color: var(--ez-ink-3); }
.tn-menu-h { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; color: var(--ez-ink-3); }
.tn-sec:not([hidden]) ~ .tn-sec:not([hidden]) { border-top: 1px solid var(--ez-line-soft); margin-top: 4px; padding-top: 4px; }

/* أدوات الشريط العلوي */
.tools { display: flex; align-items: center; gap: 4px; flex: none; margin-inline-start: auto; }
.tool {
    position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    border: 0; background: none; color: var(--top-ink-2); font-size: 15px; cursor: pointer; text-decoration: none;
}
.tool:hover { background: var(--top-hover); color: var(--top-ink); }
.tool-badge {
    position: absolute; top: 2px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
    background: var(--ez-bad); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
html[data-mode="dark"] .m-dark, html:not([data-mode="dark"]) .m-light { display: none; }
.user-btn {
    display: flex; align-items: center; gap: 8px; height: 42px; padding: 4px; padding-inline-end: 10px;
    border: 0; border-radius: 999px; background: none; color: var(--top-ink); font: inherit; cursor: pointer;
}
.user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--top-hover); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-ic-bg); color: #fff; font-weight: 700; }
.user-t { display: grid; line-height: 1.25; text-align: start; }
.user-t b { font-size: 12.5px; }
.user-t small { font-size: 11px; color: var(--top-ink-2); }
.user-btn > .fa-chevron-down { font-size: 9px; color: var(--top-ink-2); }

/* القائمة الجانبية */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.side {
    position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto;
    padding: 14px 10px 24px; background: var(--side-bg); color: var(--side-ink); border-inline-end: 1px solid var(--side-line);
    scrollbar-width: thin; scrollbar-color: var(--side-line) transparent;
}
.side-search { position: relative; margin-bottom: 10px; }
.side-search i { position: absolute; inset-inline-start: 11px; top: 10px; font-size: 12px; color: var(--side-ink-2); }
.side-search input {
    width: 100%; padding: 6px 10px; padding-inline-start: 30px; border: 1px solid var(--side-line); border-radius: 9px;
    background: var(--side-hover); color: var(--side-ink); font: inherit; font-size: 12.5px;
}
.side-search input::placeholder { color: var(--side-ink-2); }
.nav-home, .nav-g li a { position: relative; display: flex; align-items: center; gap: 10px; color: var(--side-ink); text-decoration: none; font-size: 13px; }
.nav-home { padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--side-line); border-radius: 10px; font-weight: 700; }
.nav-home i { width: 18px; text-align: center; color: var(--side-ink-2); }
.nav-home:hover, .nav-g li a:hover { background: var(--side-hover); }
.nav-home.on, .nav-g li a.on { background: var(--side-on); color: var(--side-on-ink); font-weight: 700; }
.nav-home.on i { color: inherit; }
.nav-home.on::after, .nav-g li a.on::after {
    content: ""; position: absolute; inset-block: 6px; inset-inline-end: -1px; width: 3px; border-radius: 3px; background: var(--ez-hl);
}
.nav-g { margin: 2px 0; }
.nav-g > summary {
    list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
    cursor: pointer; user-select: none; font-weight: 800; font-size: 13.5px; color: var(--side-title);
}
.nav-g > summary::-webkit-details-marker { display: none; }
.nav-g > summary > i { width: 18px; text-align: center; color: var(--side-icon); }
.nav-g > summary::after { content: "\f104"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-inline-start: auto; font-size: 11px; color: var(--side-ink-2); transition: transform .15s; }
.nav-g[open] > summary::after { transform: rotate(-90deg); }
.nav-g > summary:hover { background: var(--side-hover); }
.nav-g ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 1px; }
.nav-g li a { padding: 7px 12px; padding-inline-start: 22px; border-radius: 9px; }
.nav-g li a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; flex: none; background: var(--side-ink-2); }
.nav-g li a.on::before { background: var(--ez-hl); }

.main { min-width: 0; }
.content { padding: 0 var(--gut) 48px; }
.side-scrim { display: none; }

/* على الكمبيوتر: القائمة الجانبية تعرض القسم الحالي فقط، وزر ≡ يخفيها */
@media (min-width: 961px) {
    .side[data-cur]:not(.searching) .nav-g:not(.cur) { display: none; }
    .side[data-cur]:not(.searching) .nav-g.cur > summary { pointer-events: none; }
    .side[data-cur]:not(.searching) .nav-g.cur > summary::after { display: none; }
    html.side-off .shell { grid-template-columns: minmax(0, 1fr); }
    html.side-off .side { display: none; }
}
@media (max-width: 1280px) { .user-t, .user-btn > .fa-chevron-down { display: none; } .user-btn { padding-inline-end: 4px; } }
@media (max-width: 960px) {
    :root { --gut: 12px; }
    .tnav { display: none; }
    .top { gap: 8px; padding: 0 10px; }
    .shell { grid-template-columns: minmax(0, 1fr); }
    .side {
        position: fixed; top: var(--top-h); bottom: 0; inset-inline-start: 0; z-index: 50; width: min(300px, 86vw); height: auto;
        transform: translateX(100%); transition: transform .2s; visibility: hidden;
    }
    .app.nav-open .side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
    .app.nav-open .side-scrim { display: block; position: fixed; inset: var(--top-h) 0 0; z-index: 45; background: rgba(2, 6, 23, .45); }
}
@media (max-width: 420px) {
    .brand-yr { display: none; } .brand-t { font-size: 16px; } .tool { width: 34px; }
    /* الاستيل والوضع موجودين في قائمة المستخدم — نخفي زرارهم عشان الشريط يكفي زر "مساعدة" */
    .tools > .tool[data-act] { display: none; }
}

/* ===== رأس الشاشة ===== */
.ez-bar {
    position: sticky; top: var(--top-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    margin: 0 calc(var(--gut) * -1) 18px; padding: 14px var(--gut); background: var(--ez-bg); border-bottom: 1px solid var(--ez-line-soft);
}
.ez-crumb { font-size: 12px; color: var(--ez-ink-3); }
.ez-crumb a { color: inherit; text-decoration: none; }
.ez-crumb a:hover { color: var(--ez-accent); }
.ez-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ez-doc h1 { font-size: 20px; font-weight: 800; margin: 0; }
.ez-docno { font-size: 13px; color: var(--ez-accent); background: var(--ez-accent-soft); border: 1px solid var(--top-on-line); border-radius: 999px; padding: 1px 10px; font-weight: 600; }
.ez-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.ez-hello h1 { font-size: 22px; font-weight: 800; margin: 0; }
.ez-hello span { font-size: 12.5px; color: var(--ez-ink-3); }

/* ===== الأزرار (الشكل من الاستيل: --btn-*) ===== */
.ez-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--ez-line); background: var(--ez-surface); color: var(--ez-ink);
    border-radius: var(--btn-radius); padding: 7px 15px; font: inherit; font-weight: var(--btn-weight); line-height: 1.4;
    white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, filter .15s, box-shadow .15s;
}
.ez-btn:hover { background: var(--ez-surface-2); border-color: var(--top-on-line); color: var(--ez-ink); text-decoration: none; }
.ez-btn-primary { background: var(--btn-primary-bg); border-color: transparent; color: var(--ez-accent-ink); box-shadow: var(--btn-shadow); }
.ez-btn-primary:hover { background: var(--btn-primary-bg); border-color: transparent; color: var(--ez-accent-ink); filter: brightness(1.08); }
.ez-btn-danger { color: var(--ez-bad); }
.ez-btn-danger:hover { background: var(--ez-bad-soft); color: var(--ez-bad); border-color: var(--ez-bad-soft); }
.ez-btn-sm { padding: 4px 11px; font-size: 12px; }
.ez-btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }
.ez-kbd { font-size: 11px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: .7; font-weight: 500; }
.ez-link { border: 0; background: none; padding: 0; color: var(--ez-accent); font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.ez-link:hover { text-decoration: underline; }
.ez-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: min(var(--btn-radius), 9px); color: var(--ez-ink-3); text-decoration: none; border: 1px solid transparent; background: none; cursor: pointer; }
.ez-icon-btn:hover { color: var(--ez-accent); background: var(--ez-accent-soft); border-color: var(--top-on-line); }
.ez-icon-btn.danger:hover { color: var(--ez-bad); background: var(--ez-bad-soft); border-color: var(--ez-bad-soft); }

/* ===== الشارات ===== */
.ez-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ez-pill:empty { display: none; }
.ez-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ez-pill-good { background: var(--ez-good-soft); color: var(--ez-good); }
.ez-pill-warn { background: var(--ez-warn-soft); color: var(--ez-warn); }
.ez-pill-bad { background: var(--ez-bad-soft); color: var(--ez-bad); }
.ez-pill-info { background: var(--ez-info-soft); color: var(--ez-info); }
.ez-pill-muted { background: var(--ez-surface-2); color: var(--ez-ink-3); border: 1px solid var(--ez-line); }

/* ===== التخطيط ===== */
.ez-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; max-width: 1500px; margin: 0 auto; }
.ez-main { display: grid; gap: 16px; min-width: 0; }
.ez-side { position: sticky; top: calc(var(--top-h) + 80px); display: grid; gap: 16px; }
.ez-full { max-width: 1500px; margin: 0 auto; display: grid; gap: 16px; }
.ez-narrow { max-width: 920px; margin: 0 auto; display: grid; gap: 16px; }
@media (max-width: 1100px) { .ez-layout { grid-template-columns: minmax(0, 1fr); } .ez-side { position: static; } }

.ez-panel { background: var(--ez-surface); border: 1px solid var(--ez-line); border-radius: var(--ez-radius); box-shadow: var(--ez-shadow); }
.ez-panel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid var(--ez-line-soft); }
.ez-panel-h h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; margin: 0; }
.ez-panel-h h2 > i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--ez-accent-soft); color: var(--ez-accent); font-size: 13px; }
.ez-panel-h .ez-meta { font-size: 12px; color: var(--ez-ink-3); }
.ez-panel-h .ez-push { margin-inline-start: auto; }
.ez-panel-b { padding: 16px; }
.ez-panel-f { padding: 12px 16px; border-top: 1px solid var(--ez-line-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ===== الحقول ===== */
.ez-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: start; }
.ez-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ez-wide { grid-column: span 2; }
@media (max-width: 560px) { .ez-wide { grid-column: auto; } }
.ez-field > label, .ez-label { font-size: 12px; font-weight: 600; color: var(--ez-ink-2); margin: 0; }
.ez-req { color: var(--ez-bad); }
.ez-hint { font-size: 12px; color: var(--ez-ink-3); }
.ez-hint b { color: var(--ez-ink); }
.ez-ctl {
    display: block; width: 100%; min-height: 38px; padding: 6px 11px; border: 1px solid var(--ez-line); border-radius: var(--ctl-radius);
    background: var(--ez-surface); color: var(--ez-ink); font: inherit; transition: border-color .15s, box-shadow .15s;
}
textarea.ez-ctl { resize: vertical; }
.ez-ctl:focus { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); outline: none; }
.ez-ctl[readonly] { background: var(--ez-surface-2); color: var(--ez-ink-2); }
.ez-ctl.ez-invalid { border-color: var(--ez-bad); box-shadow: 0 0 0 3px var(--ez-bad-soft); }
.ez-num-in { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.ez-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: 13px; color: var(--ez-ink); }
.ez-switch input { width: 18px; height: 18px; accent-color: var(--ez-accent); margin: 0; }
.ez-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ez-filters .ez-ctl { width: auto; min-width: 150px; }
.ez-search { position: relative; flex: 1 1 240px; }
.ez-search i { position: absolute; inset-inline-start: 11px; top: 12px; color: var(--ez-ink-3); font-size: 13px; }
.ez-search .ez-ctl { padding-inline-start: 32px; width: 100%; }

/* ===== الجداول ===== */
.ez-table-wrap { overflow: auto; }
table.ez-table { width: 100%; border-collapse: collapse; }
.ez-table th {
    position: sticky; top: 0; z-index: 1; background: var(--ez-surface-2); color: var(--ez-ink-2); font-size: 11.5px; font-weight: 700;
    text-align: start; padding: 10px; border-bottom: 1px solid var(--ez-line); white-space: nowrap;
}
.ez-table td { padding: 8px 10px; border-bottom: 1px solid var(--ez-line-soft); vertical-align: middle; }
.ez-table tbody tr:hover > td { background: var(--ez-surface-2); }
.ez-table .ez-n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ez-table .ez-act { width: 1%; white-space: nowrap; text-align: end; }
.ez-table tr.ez-foot td, .ez-table tfoot td { background: var(--ez-surface-2); font-weight: 700; border-bottom: 0; }
.ez-table tr.ez-row-bad > td { background: var(--ez-bad-soft); }
.ez-table td.ez-trunc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-empty { display: grid; justify-items: center; gap: 4px; padding: 32px 16px; color: var(--ez-ink-3); text-align: center; }
.ez-empty i { font-size: 24px; margin-bottom: 4px; }
.ez-empty b { color: var(--ez-ink-2); font-weight: 600; }
.ez-pager { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--ez-line-soft); font-size: 12px; color: var(--ez-ink-3); }
.ez-pager .ez-push { margin-inline-start: auto; display: flex; gap: 4px; }

/* خلايا قابلة للتحرير في جداول السطور */
.ez-cell {
    width: 100%; min-width: 80px; padding: 5px 7px; border: 1px solid var(--ez-line); border-radius: min(var(--ctl-radius), 6px); background: var(--ez-surface);
    color: var(--ez-ink); font: inherit; font-variant-numeric: tabular-nums;
}
input.ez-cell { direction: ltr; text-align: right; }
.ez-cell:focus { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); outline: none; }
.ez-cell[readonly] { background: var(--ez-surface-2); border-color: transparent; }
.ez-pname b { display: block; font-weight: 600; }
.ez-pname small { font-size: 11px; color: var(--ez-ink-3); }

/* ===== البحث السريع عن الأصناف ===== */
.ez-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; background: var(--ez-surface-2); border-bottom: 1px solid var(--ez-line-soft); }
.ez-suggest { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 40; background: var(--ez-surface); border: 1px solid var(--ez-line); border-radius: 10px; box-shadow: var(--ez-pop); overflow: hidden; max-height: 340px; overflow-y: auto; }
.ez-sug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--ez-line-soft); cursor: pointer; }
.ez-sug:last-child { border-bottom: 0; }
.ez-sug:hover, .ez-sug.on { background: var(--ez-accent-soft); }
.ez-sug code { font-family: inherit; font-size: 11px; color: var(--ez-ink-2); background: var(--ez-surface-2); border: 1px solid var(--ez-line-soft); border-radius: 4px; padding: 0 5px; }
.ez-sug small { color: var(--ez-ink-3); }
/* ===== قوائم الاختيار مع مربع بحث (ERP.pick في app.js) ===== */
.ez-pick {
    position: fixed; z-index: 1150; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--ez-surface); color: var(--ez-ink); border: 1px solid var(--ez-line); border-radius: 10px; box-shadow: var(--ez-pop); font-family: var(--ez-font);
}
.ez-pick[hidden] { display: none; }
.ez-pick-q { position: relative; flex: none; padding: 8px; border-bottom: 1px solid var(--ez-line-soft); background: var(--ez-surface-2); }
.ez-pick-q i { position: absolute; inset-inline-start: 19px; top: 50%; transform: translateY(-50%); color: var(--ez-ink-3); font-size: 12px; pointer-events: none; }
.ez-pick-q input {
    display: block; width: 100%; min-height: 34px; padding: 5px 10px; padding-inline-start: 30px; border: 1px solid var(--ez-line);
    border-radius: min(var(--ctl-radius), 8px); background: var(--ez-surface); color: var(--ez-ink); font: inherit; font-size: 13px;
}
.ez-pick-q input:focus { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); outline: none; }
.ez-pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.ez-pick-opt { padding: 7px 10px; border-radius: 6px; font-size: 13px; line-height: 1.45; cursor: pointer; overflow-wrap: anywhere; }
.ez-pick-opt.on { background: var(--ez-accent-soft); color: var(--ez-accent); }
.ez-pick-opt.sel { font-weight: 700; }
.ez-pick-opt.sel::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--ez-accent); margin-inline-start: 8px; }
.ez-pick-opt.off { color: var(--ez-ink-3); cursor: default; }
.ez-pick-grp { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; color: var(--ez-ink-3); }
.ez-pick-none { padding: 14px 10px; text-align: center; font-size: 13px; color: var(--ez-ink-3); }
select.ez-pick-open { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); }
.ez-tbl-hint { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; font-size: 12px; color: var(--ez-ink-3); border-top: 1px solid var(--ez-line-soft); }

/* ===== الملخص والدفع ===== */
.ez-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--ez-ink-2); }
.ez-sum-row > span:last-child { color: var(--ez-ink); font-variant-numeric: tabular-nums; }
.ez-sum-row.ez-minus > span:last-child { color: var(--ez-bad); }
.ez-grand { display: grid; gap: 2px; margin-top: 12px; padding: 14px; border-radius: min(var(--ez-radius), 12px); background: var(--ez-accent-soft); }
.ez-grand > span { font-size: 12px; color: var(--ez-ink-2); }
.ez-grand strong { font-size: 28px; font-weight: 800; line-height: 1.2; text-align: end; font-variant-numeric: tabular-nums; color: var(--ez-accent); }
.ez-disc { display: flex; align-items: center; gap: 6px; }
.ez-disc .ez-ctl { width: 80px; min-height: 30px; padding: 3px 8px; }
.ez-seg { display: inline-flex; border: 1px solid var(--ez-line); border-radius: min(var(--btn-radius), 8px); overflow: hidden; }
.ez-seg button { border: 0; background: var(--ez-surface); color: var(--ez-ink-2); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ez-seg button + button { border-inline-start: 1px solid var(--ez-line); }
.ez-seg button.on { background: var(--btn-primary-bg); color: var(--ez-accent-ink); font-weight: 600; }
.ez-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ez-choice { border: 1px solid var(--ez-line); background: var(--ez-surface); color: var(--ez-ink-2); border-radius: min(var(--btn-radius), 10px); padding: 8px 4px; font: inherit; font-size: 12px; cursor: pointer; }
.ez-choice:hover { border-color: var(--ez-accent); }
.ez-choice.on { border-color: var(--ez-accent); background: var(--ez-accent-soft); color: var(--ez-ink); font-weight: 600; }
.ez-paid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ez-paid-row .ez-link { padding-bottom: 9px; }
.ez-bar-track { height: 6px; border-radius: 99px; background: var(--ez-line-soft); overflow: hidden; }
.ez-bar-track i { display: block; height: 100%; width: 0; background: var(--ez-good); transition: width .25s; }
.ez-remain { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ez-ink-2); }
.ez-remain > span:last-child { font-weight: 700; font-size: 16px; color: var(--ez-ink); }

/* ===== كروت الأرقام (مثل لوحة "مبيعات الخزن اليوم") ===== */
.ez-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ez-stat {
    --c: var(--ez-accent);
    background: var(--ez-surface); border: 1px solid var(--ez-line); border-inline-start: 3px solid var(--c);
    border-radius: var(--ez-radius); box-shadow: var(--ez-shadow); padding: 14px 16px; display: grid; gap: 4px;
}
.ez-stat > span { font-size: 12.5px; font-weight: 700; color: var(--ez-ink); display: flex; align-items: center; gap: 7px; }
.ez-stat > span i { color: var(--c); font-size: 12px; }
.ez-stat strong { font-size: 22px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.ez-stat small { font-size: 12px; color: var(--ez-ink-3); }
.ez-stat.c-blue { --c: #2563eb; }
.ez-stat.c-green { --c: #16a34a; }
.ez-stat.c-purple { --c: #9333ea; }
.ez-stat.c-orange { --c: #ea580c; }
.ez-stat.c-red { --c: #dc2626; }
html[data-mode="dark"] .ez-stat.c-blue { --c: #60a5fa; }
html[data-mode="dark"] .ez-stat.c-green { --c: #4ade80; }
html[data-mode="dark"] .ez-stat.c-purple { --c: #c084fc; }
html[data-mode="dark"] .ez-stat.c-orange { --c: #fb923c; }
html[data-mode="dark"] .ez-stat.c-red { --c: #f87171; }
.ez-stat.ez-stat-hero { background: linear-gradient(135deg, var(--ez-accent), var(--ez-accent-2)); border: 0; color: var(--ez-accent-ink); }
.ez-stat.ez-stat-hero > span, .ez-stat.ez-stat-hero > span i, .ez-stat.ez-stat-hero strong, .ez-stat.ez-stat-hero small { color: inherit; }
.ez-stat.ez-stat-hero small { opacity: .85; }
.ez-stat.ez-stat-accent { background: var(--ez-accent-soft); border-color: var(--ez-accent-soft); }
.ez-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ez-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--ez-line); border-radius: min(var(--ez-radius), 12px); background: var(--ez-surface); color: var(--ez-ink); text-decoration: none; font-weight: 600; transition: border-color .15s, transform .15s; }
.ez-tile i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ez-accent-soft); color: var(--ez-accent); }
.ez-tile:hover { border-color: var(--ez-accent); color: var(--ez-ink); transform: translateY(-1px); }

/* ===== الرسائل ===== */
.ez-msg { display: flex; align-items: center; gap: 8px; max-width: 1500px; margin: 0 auto 16px; padding: 10px 14px; border-radius: min(var(--ez-radius), 10px); font-weight: 600; }
.ez-msg.success { background: var(--ez-good-soft); color: var(--ez-good); }
.ez-msg.error { background: var(--ez-bad-soft); color: var(--ez-bad); }
.ez-msg.warning { background: var(--ez-warn-soft); color: var(--ez-warn); }
.ez-msg.info { background: var(--ez-info-soft); color: var(--ez-info); }
.ez-toasts { position: fixed; top: calc(var(--top-h) + 12px); inset-inline-end: 20px; z-index: 1200; display: grid; gap: 8px; }
.ez-toast { padding: 10px 14px; border-radius: 10px; box-shadow: var(--ez-pop); font-weight: 600; background: var(--ez-good-soft); color: var(--ez-good); }
.ez-toast.bad { background: var(--ez-bad-soft); color: var(--ez-bad); }
.ez-toast.warn { background: var(--ez-warn-soft); color: var(--ez-warn); }

/* ===== النوافذ المنبثقة ===== */
.ez-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, .5); }
.ez-modal[hidden] { display: none; }
.ez-modal-box { background: var(--ez-surface); color: var(--ez-ink); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, .3); width: min(760px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ez-modal-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--ez-line-soft); font-weight: 700; }
.ez-modal-h i { color: var(--ez-accent); }
.ez-modal-h .ez-icon-btn { margin-inline-start: auto; }
.ez-modal-b { padding: 16px 18px; overflow: auto; }
.ez-modal-f { padding: 12px 18px; border-top: 1px solid var(--ez-line-soft); display: flex; gap: 8px; justify-content: flex-end; }

/* قائمة "مساعدة": فيديو الشرح + عن البرنامج (Site.Master) */
.video-modal .ez-modal-box { width: min(1000px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.video-modal .ez-modal-b { padding: 0; background: #000; border-radius: 0 0 14px 14px; }
.video-modal video { display: block; width: 100%; max-height: calc(100vh - 100px); background: #000; border-radius: 0 0 14px 14px; }
.about-modal .ez-modal-box { width: min(440px, 100%); }
.about-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--ez-line-soft); }
.about-logo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ez-accent-soft); }
.about-logo img { width: 30px; height: 30px; }
.about-brand b { display: block; font-size: 18px; font-weight: 800; }
.about-brand b span { color: var(--ez-accent); }
.about-brand small { color: var(--ez-ink-3); font-size: 12px; }
.about-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; margin: 0; }
.about-list dt, .about-list dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--ez-line-soft); font-size: 13.5px; }
.about-list dt:nth-last-of-type(1), .about-list dd:last-of-type { border-bottom: 0; }
.about-list dt { color: var(--ez-ink-3); white-space: nowrap; }
.about-list dt i { width: 16px; text-align: center; color: var(--ez-accent); }
.about-list dd { font-weight: 700; text-align: left; overflow-wrap: anywhere; }
.about-list a { color: var(--ez-accent); text-decoration: none; }
.about-list a:hover { text-decoration: underline; }

/* =====================================================================
   نافذة اختيار الاستيل — كل كارت عليه متغيرات استيله (style) فالمعاينة بألوانه هو
   ===================================================================== */
.ezt-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 23, .5); }
.ezt-dialog {
    width: min(960px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
    background: var(--ez-surface); color: var(--ez-ink); border: 1px solid var(--ez-line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.ezt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ez-line-soft); }
.ezt-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.ezt-head p { margin: 2px 0 0; font-size: 12px; color: var(--ez-ink-3); }
.ezt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 18px; overflow-y: auto; }
.ezt-card {
    display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer; text-align: start; font: inherit; color: var(--ez-ink);
    border: 2px solid var(--ez-line); border-radius: 14px; background: var(--ez-surface); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ezt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.ezt-card.selected { border-color: var(--ez-accent); box-shadow: 0 0 0 3px var(--ez-focus); }
.ezt-prev { display: flex; flex-direction: column; height: 120px; background: var(--ez-bg); }
.ezt-top { height: 20px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 7px; background: var(--top-bg); border-bottom: 1px solid var(--top-line); }
.ezt-top i { width: 20px; height: 6px; border-radius: 3px; background: var(--top-ink-2); opacity: .4; }
.ezt-top i.on { background: var(--top-on-ink); opacity: 1; }
.ezt-top i.logo { width: 10px; height: 10px; border-radius: 3px; background: var(--brand-ic-bg); opacity: 1; }
.ezt-row { flex: 1; display: flex; min-height: 0; }
.ezt-side { width: 32%; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--side-bg); border-inline-end: 1px solid var(--side-line); }
.ezt-side i { height: 6px; border-radius: 3px; background: var(--side-ink-2); opacity: .7; }
.ezt-side i.on { height: 11px; background: var(--side-on); opacity: 1; border-inline-end: 3px solid var(--ez-hl); }
.ezt-body { flex: 1; min-width: 0; padding: 9px; }
.ezt-mini { display: flex; flex-direction: column; gap: 6px; padding: 7px; background: var(--ez-surface); border: 1px solid var(--ez-line); border-radius: min(var(--ez-radius), 8px); }
.ezt-line { height: 6px; width: 65%; border-radius: 3px; background: var(--ez-ink-3); opacity: .5; }
.ezt-input { height: 12px; border: 1px solid var(--ez-line); border-radius: min(var(--ctl-radius), 6px); background: var(--ez-surface-2); }
.ezt-btns { display: flex; gap: 5px; }
.ezt-btn-p { height: 14px; width: 42%; border-radius: min(var(--btn-radius), 7px); background: var(--btn-primary-bg); box-shadow: var(--btn-shadow); }
.ezt-btn-s { height: 14px; width: 28%; border-radius: min(var(--btn-radius), 7px); border: 1px solid var(--ez-line); background: var(--ez-surface); }
.ezt-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--ez-surface); border-top: 1px solid var(--ez-line-soft); }
.ezt-name b { display: block; font-size: 13px; }
.ezt-name small { display: block; font-size: 11px; color: var(--ez-ink-3); }
.ezt-check { color: var(--ez-accent); visibility: hidden; }
.ezt-card.current .ezt-check { visibility: visible; }
.ezt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--ez-line-soft); background: var(--ez-surface-2); }
.ezt-mode button { padding: 6px 12px; }
.ezt-hint { flex: 1 1 200px; font-size: 12px; color: var(--ez-ink-3); }
.ezt-actions { display: flex; gap: 8px; }

/* تبويبات: الاستيلات الجاهزة / التخصيص */
.ezt-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--ez-line-soft); flex: none; }
.ezt-tabs button {
    position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ez-ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ezt-tabs button:hover { color: var(--ez-ink); }
.ezt-tabs button.on { color: var(--ez-accent); border-bottom-color: var(--ez-accent); }
.ezt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ez-hl); }

/* تبويب التخصيص (Site.Master.cs: AppendCustomPane) */
.ezt-custom { display: grid; gap: 14px; padding: 16px 18px; overflow-y: auto; }
.ezc-base { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: 10px; background: var(--ez-accent-soft); font-size: 12.5px; color: var(--ez-ink-2); }
.ezc-base > i { color: var(--ez-accent); }
.ezc-base > span { flex: 1 1 260px; }
.ezc-base b { color: var(--ez-ink); }
.ezc-base .ez-link { display: inline-flex; align-items: center; gap: 5px; }
.ezc-sec { display: grid; gap: 2px; border: 1px solid var(--ez-line); border-radius: 12px; padding: 4px 14px 10px; }
.ezc-sec h4 { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13.5px; font-weight: 800; }
.ezc-sec h4 i { color: var(--ez-accent); font-size: 12px; }
.ezc-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--ez-line-soft); }
.ezc-sec h4 + .ezc-row { border-top: 0; }
.ezc-label { font-size: 13px; font-weight: 600; }
.ezc-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ez-ink-3); }
.ezc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ezc-opts.ez-seg { flex-wrap: nowrap; justify-self: start; max-width: 100%; overflow-x: auto; }
.ezc-opts.ez-seg button { padding: 6px 12px; }
.ezc-auto {
    height: 28px; padding: 0 10px; border: 1px dashed var(--ez-line); border-radius: 999px; background: var(--ez-surface);
    color: var(--ez-ink-2); font: inherit; font-size: 12px; cursor: pointer;
}
.ezc-auto.on { border-style: solid; border-color: var(--ez-accent); background: var(--ez-accent-soft); color: var(--ez-ink); font-weight: 600; }
.ezc-sw, .ezc-pick {
    position: relative; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--sw); border: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.ezc-sw:hover, .ezc-pick:hover { transform: scale(1.1); }
.ezc-sw.on, .ezc-pick.on { box-shadow: 0 0 0 2px var(--ez-surface), 0 0 0 4px var(--ez-accent); }
.ezc-pick { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.ezc-pick.on { background: var(--sw); }
.ezc-pick i { font-size: 11px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); pointer-events: none; }
.ezc-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ezc-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ez-line-soft); }
.ezc-sample .ez-ctl { width: 160px; }
.ezc-sample .ez-btn { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ezc-sw:hover, .ezc-pick:hover { transform: none; } }
@media (max-width: 640px) {
    .ezc-row { grid-template-columns: minmax(0, 1fr); }
    .ezt-custom { padding: 12px; }
    .ezt-tabs { padding: 0 12px; }
    .ezt-tabs button { padding: 10px 6px; font-size: 12px; }
}
@media (max-width: 576px) {
    .ezt-overlay { padding: 0; align-items: stretch; }
    .ezt-dialog { max-height: none; height: 100%; border-radius: 0; }
    .ezt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
    .ezt-prev { height: 92px; }
    .ezt-mode, .ezt-actions { width: 100%; }
    .ezt-mode button, .ezt-actions .ez-btn { flex: 1; }
}

/* =====================================================================
   شاشة الدخول بهوية TM Webhosting
   ===================================================================== */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ez-bg); }
.login-card { width: min(940px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--ez-surface); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .14); overflow: hidden; }
.login-brand {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; color: #fff; overflow: hidden;
    background: radial-gradient(circle at 15% 85%, rgba(99, 102, 241, .35), transparent 45%), linear-gradient(160deg, #1d4ed8 0%, #1e3a8a 55%, #0f172a 100%);
}
.lb-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; direction: ltr; justify-content: flex-end; }
.lb-logo b { color: #fbbf24; }
.lb-logo i { color: #fbbf24; font-size: 20px; }
.lb-kicker { direction: ltr; text-align: end; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: rgba(255, 255, 255, .65); }
.login-brand h2 { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 40px; font-weight: 800; line-height: 1; }
.login-brand h2 .brand-t { font-size: 40px; }
.login-brand h2 .brand-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fbbf24; }
.login-brand h2 .brand-t b { color: #f59e0b; }
.lb-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; }
.lb-sub { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.lb-feats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-feats li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.lb-feats li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex: none; }
.lb-support { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; background: rgba(255, 255, 255, .08); }
.lb-support > i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #3b82f6; }
.lb-support small { display: block; font-size: 12px; color: rgba(255, 255, 255, .75); }
.lb-support b { font-size: 20px; letter-spacing: .04em; direction: ltr; display: block; text-align: end; }
/* استيل آخر مستخدم على الجهاز (Index.aspx: login-themed) — اللوحة الملونة من لون الاستيل بدل الأزرق الثابت */
html.login-themed .login-brand {
    background: radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--ez-accent) 40%, transparent), transparent 45%),
                linear-gradient(160deg, color-mix(in srgb, var(--ez-accent-2) 75%, #0b1020) 0%, color-mix(in srgb, var(--ez-accent-2) 40%, #0b1020) 55%, #0b1020 100%);
}
html.login-themed .lb-logo b, html.login-themed .lb-logo i, html.login-themed .login-brand h2 .brand-ic, html.login-themed .login-brand h2 .brand-t b { color: var(--ez-hl); }
html.login-themed .lb-feats li::before { background: var(--ez-hl); }
html.login-themed .lb-support > i { background: rgba(255, 255, 255, .16); }
.login-box { position: relative; padding: 36px 32px; display: grid; gap: 16px; align-content: center; }
/* أزرار الاستيل والوضع في ركن شاشة الدخول (Index.aspx) */
.login-tools { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; gap: 4px; }
.login-tools .ez-icon-btn { width: 34px; height: 34px; }
.login-box h1 { margin: 0; font-size: 24px; font-weight: 800; }
.login-box p { margin: 0; color: var(--ez-ink-3); font-size: 13px; }
@media (max-width: 760px) {
    .login-card { grid-template-columns: 1fr; }
    .login-brand { padding: 24px; }
    .lb-feats, .lb-sub { display: none; }
    .login-brand h2, .login-brand h2 .brand-t { font-size: 32px; }
    .lb-title { font-size: 18px; }
}

/* ===== التقويم (flatpickr): بألوان الاستيل الحالي، نهاري وليلي ===== */
.flatpickr-calendar { background: var(--ez-surface); border: 1px solid var(--ez-line); border-radius: var(--ez-radius); box-shadow: var(--ez-pop); font-family: var(--ez-font); color: var(--ez-ink); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowBottom::before { border-bottom-color: var(--ez-line); border-top-color: var(--ez-line); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ez-surface); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--ez-surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year,
span.flatpickr-weekday, .flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .flatpickr-time .flatpickr-time-separator { color: var(--ez-ink); fill: var(--ez-ink); background: transparent; font-family: var(--ez-font); }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--ez-surface); color: var(--ez-ink); }
.flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 6px; left: 10%; width: 80%; padding-top: 4px; font-size: 15px; font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months { width: auto; margin: 0; padding: 0 4px; font-weight: 700; }
.flatpickr-current-month .numInputWrapper { width: 6ch; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--ez-ink-2); fill: var(--ez-ink-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ez-accent); }
span.flatpickr-weekday { color: var(--ez-ink-3); font-weight: 700; }
.flatpickr-day { color: var(--ez-ink); border-radius: var(--ctl-radius); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--ez-surface-2); border-color: var(--ez-line); }
.flatpickr-day.today { border-color: var(--ez-accent); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.today.selected { background: var(--ez-accent); border-color: var(--ez-accent); color: var(--ez-accent-ink); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--ez-ink-3); }
.flatpickr-time { border-top: 1px solid var(--ez-line) !important; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover { background: var(--ez-surface-2); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--ez-ink-2); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--ez-ink-2); }

/* ===== الطباعة ===== */
@media print {
    .side, .top, .ez-bar, .no-print, .ezt-overlay { display: none !important; }
    .shell { display: block; }
    body { background: #fff; }
    .content { padding: 0; }
    .ez-panel { box-shadow: none; border: 0; }
}

@media (max-width: 640px) {
    .ez-actions { margin-inline-start: 0; width: 100%; }
    .ez-actions .ez-btn { flex: 1 1 auto; }
    .ez-kbd { display: none; }
    .ez-entry { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ez-bar-track i, .ez-btn, .ez-ctl, .side, .ezt-card, .ez-tile { transition: none; } }