/* ==========================================================================
   MileAhead — نظام التصميم المشترك (الهبوط + الإدارة)
   الهوية من التطبيق: «ليلي أزرق + كهرماني». الكهرماني محجوز لنداء الفعل وللحلقة،
   وألوان الحالة (نجاح/خطر) منفصلة عنه تمامًا.
   التوقيع البصري: الحلقة الكهرمانية المفتوحة مع سهم الملاحة (أيقونة التطبيق وحلقة الجلسة).
   ========================================================================== */

:root {
    /* العلامة */
    --navy-900: #0B1E31;
    --navy-800: #0F2A44;
    --navy-700: #16324F;
    --navy-600: #1F4166;
    --navy-500: #2B5683;
    --amber: #F5A524;
    --amber-strong: #E0910C;
    --amber-soft: #FDF0D8;

    /* ألوان الحالة — لا تُستعمل للزينة */
    --ok: #2E9E6A;
    --ok-soft: #DDF3E8;
    --danger: #D9434B;
    --danger-soft: #FBE3E4;
    --info: #3A7BD5;

    /* عائلات الأنواع، كما في التطبيق */
    /* تصنيفات المعالم، نفس ألوان خريطة التطبيق */
    --tone-enforce: #E5484D;
    --tone-watch: #3B7BF6;
    --tone-quiet: #64748B;
    --tone-temp: #F2711C;
    --tone-hazard: #D9A400;
    --tone-svc: #3FA796;

    /* الأسطح (فاتح) */
    --bg: #F2F5F9;
    --bg-tint: #E8EEF5;
    --card: #FFFFFF;
    --card-hi: #F6F8FB;
    --line: #DCE4EE;
    --text: #0B1E31;
    --muted: #5B7290;
    --accent: var(--amber);
    --on-accent: var(--navy-900);
    --focus: 0 0 0 3px rgba(245, 165, 36, .45);
    --shadow-sm: 0 1px 2px rgba(11, 30, 49, .06), 0 1px 3px rgba(11, 30, 49, .06);
    --shadow: 0 10px 30px -12px rgba(11, 30, 49, .22);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 26px;
    --ff: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

/* الوضع الداكن: تلقائي حسب الجهاز، أو يدوي عبر data-theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0B1726;
        --bg-tint: #0F2033;
        --card: #13283F;
        --card-hi: #1A3350;
        --line: rgba(255, 255, 255, .09);
        --text: #F3F6FA;
        --muted: #A9BCD0;
        --ok-soft: rgba(46, 158, 106, .16);
        --danger-soft: rgba(217, 67, 75, .16);
        --amber-soft: rgba(245, 165, 36, .14);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow: 0 14px 36px -14px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #0B1726;
    --bg-tint: #0F2033;
    --card: #13283F;
    --card-hi: #1A3350;
    --line: rgba(255, 255, 255, .09);
    --text: #F3F6FA;
    --muted: #A9BCD0;
    --ok-soft: rgba(46, 158, 106, .16);
    --danger-soft: rgba(217, 67, 75, .16);
    --amber-soft: rgba(245, 165, 36, .14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 14px 36px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ff);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0; }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
[hidden] { display: none !important; }
.btn svg { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }

/* ---------- العلامة: الحلقة + السهم ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: .2px; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-mark .bm-bg { fill: var(--navy-800); }
.brand-mark .bm-ring { fill: none; stroke: var(--amber); stroke-width: 4.2; stroke-linecap: round; }
.brand-mark .bm-arrow { fill: #F3F6FA; }
.brand-name { font-size: 1.15rem; direction: ltr; }

/* حلقة النسبة (من Charts.Ring) */
.ring .ring-track { fill: none; stroke: var(--line); stroke-width: 4.5; }
.ring .ring-fill { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); }

/* ---------- الأزرار ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 999px;
    font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform .15s var(--ease), background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 20px -10px rgba(245, 165, 36, .9); }
.btn-accent:hover { background: var(--amber-strong); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--card-hi); }
.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-light:hover { background: rgba(255, 255, 255, .16); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: .85rem; }
.btn-icon { width: 38px; min-height: 38px; padding: 0; border-radius: 12px; }

/* ---------- أيقونة نوع المعلم ---------- */
.type-badge {
    --tone: var(--tone-enforce);
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 12px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 14%, transparent);
}
.type-badge.lg { width: 48px; height: 48px; border-radius: 15px; }
.tone-enforce { --tone: var(--tone-enforce); }
.tone-watch { --tone: var(--tone-watch); }
.tone-quiet { --tone: var(--tone-quiet); }
.tone-temp { --tone: var(--tone-temp); }
.tone-hazard { --tone: var(--tone-hazard); }
.tone-svc { --tone: var(--tone-svc); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--card-hi); color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.chip-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.chip-accent { background: var(--amber-soft); color: var(--amber-strong); border-color: transparent; }

/* ---------- الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}