/* =====================================================================
   هوية لنكات v1.0 (انظر brand/lnkat-brand-guidelines.html)
   الألوان والخطوط والشعار المشتركة بين الصفحة الرئيسية وتسجيل الدخول ولوحة المستخدم ولوحة الأدمن
   ===================================================================== */
:root {
    --lnk-ink: #0E0E10;
    --lnk-paper: #E6E6E3;
    --lnk-white: #FFFFFF;
    --lnk-indigo: #4B45FF;   /* العلامة، الأزرار الرئيسية، الروابط */
    --lnk-pink: #FF5FA8;     /* الضغطات والعدادات */
    --lnk-green: #3AD44A;    /* منشور / تم */
    --lnk-amber: #FFB01F;    /* النجوم والتقييمات */

    --lnk-font-latin: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --lnk-font-arabic: 'Readex Pro', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
    --lnk-font: 'Schibsted Grotesk', 'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --lnk-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --lnk-radius-pill: 999px;
    --lnk-radius-card: 18px;
    --lnk-ease-snap: cubic-bezier(.2, .9, .25, 1.15);
    --lnk-dur-snap: 420ms;
}

body { font-family: var(--lnk-font); }

/* الأرقام (الإحصائيات) والروابط والأكواد بخط IBM Plex Mono كما في دليل الهوية */
.tabular-nums, .lnk-mono { font-family: var(--lnk-font-mono); }

/* عناوين لاتينية مشدودة كما في دليل الهوية. لا تباعد أحرف للعربية أبداً (يكسر اتصال الحروف) */
html[lang="en"] h1, html[lang="en"] h2 { letter-spacing: -.03em; }
html[lang="en"] h3 { letter-spacing: -.015em; }
h1, h2 { text-wrap: balance; }

/* ---------- الشعار: الاسم داخل زر رابط مع مقبض مفتاح "مُفعّل" ----------
   الاسم والمقبض مقصوصان من الزر، فيأخذان لون الخلفية: اضبط --lnk-knock على لون الخلفية خلف الشعار.
   اللون نفسه يأتي من color (مثلاً text-brand-600 أو text-white). */
.lnk-logo {
    --lnk-knock: #fff;
    display: inline-flex; align-items: center; gap: .28em;
    background: currentColor; border-radius: 999px;
    padding: .14em .2em .14em .5em; line-height: 1; white-space: nowrap;
    direction: ltr; text-decoration: none; vertical-align: middle;
}
.lnk-logo .lnk-t {
    color: var(--lnk-knock); font-family: var(--lnk-font-latin);
    font-weight: 800; letter-spacing: -.06em; padding-bottom: .04em;
}
.lnk-logo .lnk-k {
    width: .72em; height: .72em; border-radius: 50%;
    background: var(--lnk-knock); flex: none;
}
.lnk-logo-ar { direction: rtl; padding: .14em .5em .14em .2em; }
.lnk-logo-ar .lnk-t { font-family: var(--lnk-font-arabic); font-weight: 700; letter-spacing: 0; padding-bottom: .1em; }
a.lnk-logo:hover { opacity: .88; }

/* =====================================================================
   لغة الرسوم: عناصر الواجهة نفسها كعناصر جمالية (دليل الهوية، الفصل 07)
   ===================================================================== */

/* ---------- الشريحة (Link pill / Chip): دائماً بحواف دائرية كاملة ---------- */
.lnk-chip {
    display: inline-flex; align-items: center; gap: .45em;
    padding: .5em 1em; border-radius: 999px; line-height: 1.1;
    font-weight: 600; white-space: nowrap;
    background: #fff; color: var(--lnk-ink);
    box-shadow: inset 0 0 0 1.5px var(--lnk-ink);
}
.lnk-chip-ink    { background: var(--lnk-ink);    color: #fff; box-shadow: none; }
.lnk-chip-indigo { background: var(--lnk-indigo); color: #fff; box-shadow: none; }
.lnk-chip-pink   { background: var(--lnk-pink);   color: var(--lnk-ink); box-shadow: none; }
.lnk-chip-green  { background: var(--lnk-green);  color: var(--lnk-ink); box-shadow: none; }
.lnk-chip-amber  { background: var(--lnk-amber);  color: var(--lnk-ink); box-shadow: none; }
.lnk-chip-soft   { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }

/* كلمة داخل عنوان تتحول إلى زر رابط (تقاطع الكلمة كما في الحملات) */
.lnk-word {
    display: inline-flex; align-items: center; gap: .18em;
    background: var(--lnk-indigo); color: #fff;
    border-radius: 999px; padding: 0 .38em .04em; margin: 0 .04em;
    line-height: 1.15; vertical-align: baseline;
}
.lnk-word::after {   /* مقبض المفتاح "مُفعّل" كما في الشعار */
    content: ''; width: .5em; height: .5em; border-radius: 50%; background: #fff; flex: none;
}

/* ---------- المفتاح (Toggle): مُفعّل = منشور ---------- */
.lnk-toggle {
    --w: 2.1em;
    position: relative; display: inline-block; flex: none;
    width: var(--w); height: 1.2em; border-radius: 999px;
    background: var(--lnk-green); vertical-align: middle;
}
.lnk-toggle::after {
    content: ''; position: absolute; top: .15em; inset-inline-start: calc(var(--w) - 1.05em);
    width: .9em; height: .9em; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(14,14,16,.25);
}
.lnk-toggle.is-off { background: var(--lnk-paper); }
.lnk-toggle.is-off::after { inset-inline-start: .15em; }
.lnk-toggle.lnk-animate::after { animation: lnk-switch 2.8s var(--lnk-ease-snap) infinite; }
@keyframes lnk-switch {
    0%, 12% { inset-inline-start: .15em; }
    28%, 100% { inset-inline-start: calc(var(--w) - 1.05em); }
}

/* ---------- النقطة الحيّة: منشور / متصل ---------- */
.lnk-live-dot {
    position: relative; display: inline-block; flex: none;
    width: .55em; height: .55em; border-radius: 50%; background: var(--lnk-green);
}
.lnk-live-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: lnk-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes lnk-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- مؤشر الضغط: يشير إلى الإجراء ويضغط ضغطة قصيرة ---------- */
.lnk-cursor {
    display: inline-block; width: 1.6em; height: 1.6em; color: var(--lnk-ink);
    /* حد أبيض حتى يظهر فوق الخلفيات الداكنة */
    filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 3px 4px rgba(14,14,16,.35));
    animation: lnk-tap 2.4s var(--lnk-ease-snap) infinite;
}
@keyframes lnk-tap {
    0%, 60%, 100% { transform: translate(0, 0) scale(1); }
    70% { transform: translate(-2px, -2px) scale(.86); }
    80% { transform: translate(0, 0) scale(1); }
}

/* ---------- نجوم التقييم: كهرماني دائماً ---------- */
.lnk-stars { color: var(--lnk-amber); letter-spacing: .05em; }

/* ---------- رسالة قصيرة على شكل فقاعة كلام ---------- */
.lnk-bubble {
    position: relative; display: inline-flex; align-items: center; gap: .45em;
    background: var(--lnk-ink); color: #fff; font-weight: 600;
    padding: .55em .85em; border-radius: 12px; line-height: 1.2;
}
.lnk-bubble::after {
    content: ''; position: absolute; bottom: -5px; inset-inline-start: 18px;
    width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px;
}

/* ---------- الحركة: دخول بارتداد خفيف، وتكديس الأزرار واحداً تلو الآخر ---------- */
@keyframes lnk-snap-in {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
.lnk-snap { animation: lnk-snap-in var(--lnk-dur-snap) var(--lnk-ease-snap) both; animation-delay: calc(var(--i, 0) * 60ms + var(--delay, 0ms)); }

@keyframes lnk-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.lnk-float { animation: lnk-float 5s ease-in-out infinite; animation-delay: var(--float-delay, 0s); }

/* الضغط: يصغر الزر قليلاً ثم يعود (للأزرار في كل الصفحات) */
.lnk-press, .lnk-ui button:not(:disabled), .lnk-ui a.lnk-btn {
    transition: transform 120ms ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
.lnk-press:active, .lnk-ui button:not(:disabled):not([role="switch"]):active, .lnk-ui a.lnk-btn:active { transform: scale(.96); }

/* بطاقة الهوية: حواف 18px */
.lnk-card { border-radius: var(--lnk-radius-card); }

/* التنبيه السفلي في اللوحات بشكل فقاعة الهوية */
.lnk-ui #toast {
    background: var(--lnk-ink) !important; color: #fff !important;
    border-radius: 14px !important; font-weight: 600;
    box-shadow: 0 12px 30px -8px rgba(14,14,16,.45);
    animation: lnk-snap-in var(--lnk-dur-snap) var(--lnk-ease-snap) both;
}

/* اللوحات على الشاشات الأصغر من 1280px: القائمة صف أفقي من الأزرار بدل عمود طويل يدفع المحتوى للأسفل */
@media (max-width: 1279px) {
    .lnk-ui aside > nav {
        display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
        margin-inline: -1.5rem; padding: .25rem 1.5rem .5rem;
    }
    .lnk-ui aside > nav::-webkit-scrollbar { display: none; }
    .lnk-ui aside > nav > * { margin: 0 !important; flex: none; white-space: nowrap; }
    .lnk-ui aside > nav > * > span[id$="Badge"] { margin-inline-start: .45rem !important; }
    .lnk-ui aside > h1 { margin-bottom: 1rem !important; }
    /* الحساب وموقع لنكات واللغة: صف واحد يلتف بدل عمود */
    .lnk-ui aside:not(.preview-aside) > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
    .lnk-ui aside:not(.preview-aside) > div:last-child > * { margin: 0 !important; flex: 1 1 170px; width: auto; }
    .lnk-ui aside:not(.preview-aside) > div:last-child > .hidden { display: none; }
}

/* شريط تمرير هادئ داخل اللوحات */
.lnk-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
.lnk-ui ::-webkit-scrollbar-thumb { background: #D4D4CF; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.lnk-ui ::-webkit-scrollbar-thumb:hover { background-color: #A6A6A9; }

@media (prefers-reduced-motion: reduce) {
    .lnk-snap, .lnk-float, .lnk-cursor, .lnk-toggle.lnk-animate::after, .lnk-live-dot::after, .lnk-ui #toast { animation: none !important; }
    .lnk-press:active, .lnk-ui button:active, .lnk-ui a.lnk-btn:active { transform: none; }
}