/* ============================================================
   مفتاح — طبقة البريميوم v7.0.0
   تحسينات بصرية دقيقة وموسّعة فوق style.css بدون كسر أي سلوك.
   مبادئ: عمق خفيف، إيقاع حركي هادئ، تركيز بصري، وصول كامل.
   ============================================================ */

/* ملاحظة جوهرية: هذه الطبقة لا تعيد تعريف متغيّرات الألوان الأساسية
   (--bg / --surface / --text / --primary / --border ...) لأنها هنا في :root
   على عنصر html ستتجاوز قاعدة [data-bs-theme="dark"] في style.css
   (نفس الأولوية + تحميل متأخر) فتُبقي الوضع الليلي فاتحًا = مظهر مشطور.
   نكتفي برمز pk- إضافية + أسماء مرادفة تشير إلى متغيّرات style.css الحيّة،
   فتتكيّف تلقائياُ مع الوضع الفاتح والداكن. */
:root {
    --radius-lg: 16px;                      /* غير معرّف في style.css */
    --bg-light: var(--surface);             /* مرادف يشير للمتغيّر الحيّ */
    --text-muted: var(--muted);
    --muted-foreground: var(--muted);
    --border-color: var(--border);
    --surface-hover: var(--surface-2);

    /* ظلال وحلقات تراكب باسم pk- فقط (لا تصادم) */
    --pk-shadow-sm: 0 1px 2px rgba(34, 32, 27, .05), 0 2px 8px rgba(34, 32, 27, .05);
    --pk-shadow-md: 0 4px 12px rgba(34, 32, 27, .09), 0 14px 34px rgba(34, 32, 27, .10);
    --pk-shadow-lg: 0 8px 20px rgba(34, 32, 27, .12), 0 26px 54px rgba(34, 32, 27, .16);
    --pk-ring: 0 0 0 4px var(--primary-ring, color-mix(in srgb, var(--primary) 22%, transparent));
    --pk-grad: linear-gradient(135deg, var(--primary) 0%, #061e3d 100%);
    --pk-accent: #a9761b;
    --pk-accent-faint: color-mix(in srgb, var(--pk-accent) 40%, transparent);
    --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 30%, #fff9f0);

    /* خطوط متطورة */
    --font-ui: 'Readex Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Readex Pro', 'Segoe UI', system-ui, sans-serif;
}

/* في الوضع الداكن: ظلال أعمق وأنعم تناسب الخلفية الغامقة */
[data-bs-theme="dark"] {
    --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --pk-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --pk-shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
    --pk-accent-faint: color-mix(in srgb, var(--pk-accent) 25%, transparent);
    --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 20%, #1e293b);
}

/* ---------- حركة وصول محترمة ---------- */
:focus-visible { outline: none; box-shadow: var(--pk-ring); border-radius: 8px; }

/* ---------- الأزرار ---------- */
.btn-primary { background-image: var(--pk-grad); border-color: transparent; box-shadow: var(--pk-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--pk-shadow-md); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(0) scale(.985); box-shadow: var(--pk-shadow-sm); }
.btn-outline-primary, .btn-outline-secondary { transition: transform .16s ease, box-shadow .16s ease; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { transform: translateY(-1px); box-shadow: var(--pk-shadow-sm); }

/* ---------- الشريط الجانبي ---------- */
.sidebar { box-shadow: 1px 0 0 rgba(255,255,255,.04) inset, 8px 0 24px rgba(9, 40, 43, .10); }
.sidebar .nav-link, .sidebar .reports-nav-link, .sidebar a[class*="nav"] {
    border-radius: 10px; margin-inline: 8px; padding-inline: 12px;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
    position: relative;
}
.sidebar .nav-link:hover, .sidebar .reports-nav-link:hover { transform: translateX(-2px); }
.sidebar .nav-link.active, .sidebar .reports-nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 85%, #000) 0%, color-mix(in srgb, var(--primary) 55%, #0a2e33) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--pk-shadow-sm);
}
.sidebar .nav-link.active::before, .sidebar .reports-nav-link.active::before {
    content: ""; position: absolute; inset-inline-start: -8px; top: 22%; height: 56%;
    width: 4px; border-radius: 99px; background: #f2c66d;
}
.nav-badge { box-shadow: 0 0 0 2px rgba(0,0,0,.18); }

/* ---------- التوب بار ---------- */
.topbar { backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(11,103,112,.06), 0 4px 18px rgba(11,103,112,.05); border-bottom: 0; }
.icon-btn { transition: background-color .16s ease, transform .16s ease; }
.icon-btn:hover { transform: translateY(-1px); }

/* ---------- بطاقات الإحصاء ---------- */
.stat-card { position: relative; overflow: hidden; box-shadow: var(--pk-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; border-radius: 16px; }
.stat-card::after {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: var(--pk-grad); opacity: .9;
}
.stat-card.green::after  { background: linear-gradient(90deg, #0f9d6e, #34c98f); }
.stat-card.amber::after  { background: linear-gradient(90deg, #c98a12, #f2c66d); }
.stat-card.red::after    { background: linear-gradient(90deg, #c0392b, #e77a6a); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-md); }

/* ---------- البطاقات والجداول المتطورة ---------- */
.card { box-shadow: var(--pk-shadow-sm); border-radius: 16px; transition: transform .16s ease, box-shadow .16s ease; }
.card:hover { box-shadow: var(--pk-shadow-md); }

.table-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--pk-shadow-sm); }
.table thead th { font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--muted, #5b7a7c); background: color-mix(in srgb, var(--primary) 4%, transparent); border-bottom: 1px solid var(--border); }
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:nth-child(even) { background: var(--surface-2); }
[data-bs-theme="dark"] .table tbody tr:nth-child(even) { background: var(--surface-3); }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.table-responsive { border-radius: 14px; }
.table-actions { white-space: nowrap; flex-shrink: 0; }
.table-actions .icon-btn { width: 28px; height: 28px; margin-left: 4px; opacity: .7; transition: opacity .15s ease; }
.table-actions .icon-btn:hover { opacity: 1; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-title a { color: inherit; text-decoration: none; }
.cell-title a:hover { text-decoration: underline; }

/* ---------- شارات الحالة والنظام ---------- */
.badge { border-radius: 999px; padding-inline: .65em; font-weight: 600; letter-spacing: .01em; }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    border-radius: 99px; font-size: 12.5px; font-weight: 500;
    background: var(--surface-2); color: var(--muted); transition: all .15s ease;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .8; }
.status-pill.ready { background: var(--success-soft); color: var(--success); }
.status-pill.warning { background: var(--warning-soft); color: var(--warning); }
.status-pill.danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- التنبيهات ---------- */
.alert { border: 1px solid transparent; border-radius: 12px; box-shadow: var(--pk-shadow-sm); }
.alert-danger { background: color-mix(in srgb, #c0392b 8%, var(--surface)); border-color: color-mix(in srgb, #c0392b 25%, var(--surface)); }
.alert-info   { background: color-mix(in srgb, var(--primary) 8%, var(--surface));  border-color: color-mix(in srgb, var(--primary) 24%, var(--surface)); }
/* الوضع الداكن: الخلفية تُمزج مع سطح داكن (لا مع الأبيض) حتى يبقى النص الفاتح مقروءاً بتباين عالٍ */
[data-bs-theme="dark"] .alert-danger { background: color-mix(in srgb, #c0392b 18%, var(--surface)); border-color: color-mix(in srgb, #c0392b 45%, var(--surface)); color: #f6cbd7; }
[data-bs-theme="dark"] .alert-info { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 45%, var(--surface)); color: #cfe3f5; }

/* ---------- الحقول والتبويبات ---------- */
.form-control, .form-select { transition: border-color .16s ease, box-shadow .16s ease; }
.form-control:focus, .form-select:focus { box-shadow: var(--pk-ring); border-color: var(--primary); }

.nav-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; box-shadow: var(--pk-shadow-sm); }
.nav-tabs .nav-link { border-radius: 99px; margin: 0; color: var(--muted); background: transparent; border: none; padding: 6px 16px; font-size: 13.5px; font-weight: 500; transition: all .16s ease; }
.nav-tabs .nav-link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.nav-tabs .nav-link.active { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* ---------- المكان الخالي والهياكل النموذجية ---------- */
.card-skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-3) 64%, var(--surface-2) 75%);
    background-size: 200% 100%; border-radius: var(--radius); animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.chart-placeholder { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--muted); }
.chart-placeholder i { font-size: 48px; opacity: .5; margin-bottom: 8px; }

/* ---------- قائمة الإشعارات ---------- */
.notification-dropdown { border-radius: 16px; box-shadow: var(--pk-shadow-lg); border: 1px solid rgba(11,103,112,.08); overflow: hidden; }

/* ---------- شريط تمرير راقٍ ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 55%, transparent); background-clip: content-box; }

/* تحسين محتوى QR Code Card: تباين عالٍ */
.totp-qr, .totp-qr svg {
  background: #fff !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(11,103,112,.12);
  color: #000; /* ضبط تباين QR */
 }

 /* تحسين رأس وصف QR Code Card */
 .card-header.totp-qr-header {
   background: color-mix(in srgb, var(--primary) 6%, var(--surface));
   color: var(--text);
   border-bottom: 1px solid var(--border-color);
 }

 /* تحسين نص QR Code Card */
 .qr-secret-code {
   font-family: 'Consolata', 'Courier New', monospace;
   font-size: 18px;
   font-weight: 600;
   background: var(--surface-hover);
   color: var(--text);
   border-radius: var(--radius);
   padding: 12px 16px;
   direction: ltr;
   letter-spacing: .04em;
 }

 /* تحسين زر "عرض رمز التفعيل" */
 .btn-show-qr {
   background: var(--pk-grad);
   color: #fff;
   font-weight: 600;
   border: 0;
   box-shadow: var(--pk-shadow-sm);
   transition: all .2s var(--ease);
 }
 .btn-show-qr:hover {
   transform: translateY(-2px);
   box-shadow: var(--pk-shadow-md);
   filter: brightness(1.05);
 }

 /* تحسين "أو أدخل المفتاح يدويًا" */
 .manual-entry {
   background: var(--surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   padding: 16px;
   margin-top: 16px;
 }

 /* تحسين "صفحة التأكيد" */
 .success-banner {
   background: linear-gradient(135deg, var(--success), var(--primary));
   color: #fff;
   border-radius: var(--radius-lg);
   box-shadow: var(--pk-shadow-lg);
   animation: pk-entrance .5s ease both;
 }
 @keyframes pk-entrance {
   from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: none; }
 }

 /* حقل إدخال رمز التحقق: أرقام متباعدة عالية الوضوح */
 .totp-input {
   text-align: center; letter-spacing: .28em; text-indent: .28em;
   font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
   width: 190px; height: 62px;
   border: 2px solid var(--border-strong); border-radius: var(--radius);
   background: var(--surface); color: var(--text);
   transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
 }
 .totp-input:focus { border-color: var(--primary); box-shadow: var(--pk-ring); }

 /* إصلاح "الرجوع لتسجيل الدخول" */
 .back-to-login {
    display: inline-block; margin-top: 16px; color: var(--muted-foreground); text-decoration: none; transition: color .2s;
 }
 .back-to-login:hover { color: var(--primary); text-decoration: underline; }

 /* ============================================================
    v6.5.0 — الهوية الذهبية · بطاقات ذكية · حالة فراغ بطولية
    القاعدة: الذهبي (--pk-accent) عنصر تمييز زخرفي فقط — أشرطة،
    أيقونات، نقاط، خلفيات طفيفة — لا نصوص أساسية (تباينه على
    الفاتح يفشل). كل الألوان الأخرى عبر var() لتتكيّف مع الوضعين.
    ============================================================ */

 /* --- الهوية: العنصر النشط في القائمة الرئيسية --- */
 .side-nav a.active { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
 .side-nav a.active::before {
     width: 4px; border-radius: 0 4px 4px 0;
     background: linear-gradient(var(--pk-accent), color-mix(in srgb, var(--pk-accent) 65%, var(--primary)));
     box-shadow: 0 0 10px color-mix(in srgb, var(--pk-accent) 55%, transparent);
 }
 .side-nav a.active i { color: color-mix(in srgb, var(--pk-accent) 82%, #96700f); }
[data-bs-theme="dark"] .side-nav a.active i { color: var(--pk-accent); }
 .side-nav a.active .nav-badge {
     background: linear-gradient(180deg, #f6d189, color-mix(in srgb, var(--pk-accent) 80%, #d9a52f));
     color: #4a3a08;
 }

 /* شريط النسبة في بطاقات الإحصاء (متطابق مع nav-badge الذهبي للحيّز) */
 .stat-meter {
     display: block; height: 6px; margin-top: 12px; border-radius: 99px;
     background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden;
 }
 [data-bs-theme="dark"] .stat-meter { background: rgba(255,255,255,.10); }
 .stat-meter > b { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: var(--pk-grad); transition: width .5s var(--ease); }
 .stat-card.green .stat-meter > b { background: linear-gradient(90deg, #0f9d6e, #34c98f); }
 .stat-card.amber .stat-meter > b { background: linear-gradient(90deg, #c98a12, #f2c66d); }
 .stat-card.red   .stat-meter > b { background: linear-gradient(90deg, #c0392b, #e77a6a); }
 .stat-card.teal  .stat-meter > b { background: var(--pk-grad); }
 .stat-card:hover .stat-meter > b { filter: brightness(1.06); }

 /* --- الإشعارات الحرجة: شريط ذهبي جانبي + تلميح خلفية (بلا إزاحة) --- */
 .notification-dropdown .notification-item { position: relative; }
 .notification-item.notification-danger,
 .notification-item.notification-warning { background: color-mix(in srgb, var(--pk-accent) 7%, transparent); }
 .notification-item.notification-danger::before,
 .notification-item.notification-warning::before {
     content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px;
     width: 3px; border-radius: 99px; opacity: .9;
     background: linear-gradient(var(--pk-accent), color-mix(in srgb, var(--pk-accent) 55%, #d9a52f));
 }
 .notification-count {
     background: linear-gradient(135deg, #e6b24a, var(--pk-accent));
     color: #3a2c07 !important; box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(190,140,30,.40);
 }

 /* --- حالة الفراغ البطولية: ابدأ الاستيراد --- */
 .empty-hero {
     display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
     padding: 28px 30px; border-radius: var(--radius-lg); overflow: hidden; position: relative;
     background:
         radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--primary) 15%, var(--surface)), transparent 62%),
         var(--surface);
 }
 .empty-hero::before {
     content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px;
     background: linear-gradient(var(--pk-accent), var(--primary));
 }
 .empty-hero-art {
     width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center;
     font-size: 31px; color: #fff; background: var(--pk-grad); box-shadow: var(--pk-shadow-md);
 }
 .empty-hero-kicker {
     font-size: 12px; font-weight: 700; letter-spacing: .05em;
     color: color-mix(in srgb, #b8860b 85%, var(--text));
 }
 [data-bs-theme="dark"] .empty-hero-kicker { color: var(--pk-accent); }
 .empty-hero-body h3 { margin: 3px 0 6px; font-size: 21px; font-weight: 700; }
 .empty-hero-body > p { margin: 0 0 15px; color: var(--muted); max-width: 62ch; line-height: 1.9; }
 .empty-hero-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0 0 17px; }
 .empty-hero-steps li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); }
 .empty-hero-steps li i {
     flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
     font-style: normal; font-size: 12px; font-weight: 700; color: var(--primary);
     background: color-mix(in srgb, var(--primary) 12%, var(--surface));
     border: 1px solid color-mix(in srgb, var(--pk-accent) 55%, var(--border));
 }
 .empty-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
 @media (max-width: 640px) { .empty-hero { grid-template-columns: 1fr; gap: 16px; padding: 22px; } .empty-hero-art { width: 60px; height: 60px; font-size: 25px; } }

 /* --- احترام تفضيل تقليل الحركة (لا يُخفى المحتوى، يُلغى الحركة فقط) --- */
 @media (prefers-reduced-motion: reduce) {
     .stat-meter > b, .btn-primary, .stat-card, .side-nav a { transition: none !important; }
     .stat-card:hover, .btn-primary:hover, .sidebar .nav-link:hover { transform: none !important; }
     .success-banner { animation: none; }
 }