/*
  هوية بصرية عصرية مستوحاة من لوحات تحكم الاستضافة الحديثة (Railway / Vercel / Render):
  بطاقات زجاجية ناعمة، حواف دائرية كبيرة، إشارة نيلية-كهربائية (Indigo Electric)،
  توهّج خفيف حول العناصر النشطة، ودعم كامل لوضع غامق (Dark) عبر class="dark" على body،
  يُحفَظ اختيار المستخدم في localStorage عبر theme.js

  التوافق: جميع أسماء المتغيرات والكلاسات الأصلية محفوظة بالكامل — لا حاجة لتعديل أي HTML/JS.
*/

:root {
  /* ---------- الوضع الفاتح (افتراضي) ---------- */
  --bg: #f2f4fb;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fe;
  --bg-soft: #f4f6fc;
  --line: #e4e8f5;
  --line-soft: #edf0fa;
  --ink: #161b2e;
  --ink-dim: #7a819a;
  --ink-faint: #aab0c4;
  --accent: #4f46e5;
  --accent-2: #7c3aed;
  --accent-ink: #ffffff;
  --accent-soft: rgba(79, 70, 229, 0.10);
  --accent-dim: #d7d3fb;
  --good: #10b981;
  --good-soft: rgba(16, 185, 129, 0.12);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --bad: #ef4444;
  --bad-soft: rgba(239, 68, 68, 0.10);
  --shadow-card: 0 1px 2px rgba(22, 27, 46, 0.04), 0 12px 32px -14px rgba(22, 27, 46, 0.14);
  --shadow-pop: 0 28px 70px -16px rgba(22, 27, 46, 0.30);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 8px 24px -8px rgba(79, 70, 229, 0.35);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

body.dark {
  /* ---------- الوضع الغامق ---------- */
  --bg: #090b13;
  --bg-elevated: #10131e;
  --bg-card: #131725;
  --bg-card-hover: #191e30;
  --bg-soft: #0e111c;
  --line: #232941;
  --line-soft: #1b2033;
  --ink: #eef0fb;
  --ink-dim: #8991ac;
  --ink-faint: #545c78;
  --accent: #818cf8;
  --accent-2: #a78bfa;
  --accent-ink: #0a0c16;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-dim: #2c2f57;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, 0.14);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 28px 70px -16px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 8px 28px -6px rgba(129, 140, 248, 0.45);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

body {
  margin: 0;
  background:
    radial-gradient(1100px 480px at 85% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

.mono { font-family: var(--font-mono); }

h1, h2, h3 { letter-spacing: -0.02em; font-weight: 700; margin: 0; }
p { color: var(--ink-dim); line-height: 1.6; }

a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============ شريط علوي ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* أزرار التوب بار النصية (تغيير كلمة المرور / 2FA): على الشاشات
   الضيقة جداً (أقل من موبايل قياسي) يختفي النص ويبقى الإيموجي فقط،
   لمنع الصف من الازدحام أو الخروج عن عرض الشاشة. */
@media (max-width: 420px) {
  .btn-topbar-text .btn-label { display: none; }
  .btn-topbar-text { padding: 10px 12px; }
}

@media (min-width: 640px) {
  .topbar { padding: 16px 28px; }
}

/* مجموعة أزرار التوب بار (تغيير باسورد / 2FA / خروج...) تلتف بدل ما
   تدفع عرض الصفحة على الشاشات الضيقة، وتتراص من اليمين لليسار طبيعياً */
.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
  color: var(--ink);
}

.brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 5px var(--accent-soft);
  display: inline-block;
  flex-shrink: 0;
}

/* ============ أزرار ============ */
.btn {
  font-family: var(--font-display);
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.65);
}
.btn-accent:hover {
  filter: brightness(1.08);
  color: var(--accent-ink);
  box-shadow: 0 14px 30px -10px rgba(79, 70, 229, 0.75);
  transform: translateY(-1px);
}

.btn-danger { color: var(--bad); border-color: transparent; background: var(--bad-soft); }
.btn-danger:hover { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }

.btn-good { color: var(--good); border-color: transparent; background: var(--good-soft); }
.btn-good:hover { border-color: var(--good); background: var(--good-soft); color: var(--good); }

/* زر تبديل الوضع الفاتح/الغامق */
.theme-toggle {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.theme-toggle:hover { transform: translateY(-1px) rotate(-8deg); }

/* ============ تخطيط عام ============ */
.container { max-width: 1100px; margin: 0 auto; padding: 28px 16px 56px; }

@media (min-width: 640px) {
  .container { padding: 36px 24px 64px; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .card { padding: 24px; }
}

/* ============ بطاقة البوت ============ */
.bot-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .bot-card { padding: 20px 22px; margin-bottom: 14px; }
}

.bot-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line);
  transition: background .2s ease;
}

.bot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.bot-card.running { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); box-shadow: var(--shadow-card), 0 0 0 1px var(--good-soft); }
.bot-card.running::before { background: linear-gradient(90deg, var(--good), transparent); }
.bot-card.stopped { border-color: var(--line); }
.bot-card.error { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); box-shadow: var(--shadow-card), 0 0 0 1px var(--bad-soft); }
.bot-card.error::before { background: linear-gradient(90deg, var(--bad), transparent); }

.status-pill {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.status-pill.running { color: var(--good); background: var(--good-soft); }
.status-pill.stopped { color: var(--ink-dim); background: var(--bg-soft); }
.status-pill.expired { color: var(--warn); background: var(--warn-soft); }
.status-pill.error { color: var(--bad); background: var(--bad-soft); }

.status-pill .blip {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.status-pill.running .blip { animation: pulse 1.4s infinite; box-shadow: 0 0 0 3px var(--good-soft); }
@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.3; }
}

/* ============ مقاييس الاستهلاك ============ */
.gauge-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gauge-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); width: 38px; flex-shrink: 0; }
.gauge-track { flex: 1; height: 8px; background: var(--bg-soft); border-radius: var(--radius-pill); overflow: hidden; }
.gauge-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }
.gauge-fill.mem { background: linear-gradient(90deg, var(--good), #6ee7b7); }
.gauge-fill.disk { background: linear-gradient(90deg, var(--warn), #fcd34d); }
.gauge-value { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); width: 76px; text-align: left; flex-shrink: 0; }

/* ============ حقول الإدخال ============ */
textarea, input, select {
  font-family: var(--font-display);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea, .mono-input { font-family: var(--font-mono); }
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--bg-card);
}
textarea::placeholder, input::placeholder { color: var(--ink-faint); }

label { font-size: 12.5px; color: var(--ink-dim); display: block; margin-bottom: 7px; font-weight: 600; }

/* ============ الطرفية / Console ============ */
.console {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
body.dark .console { color: #86efac; }

/* ============ جداول ============ */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: right; color: var(--ink-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px; border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: var(--bg-soft); }

/* عمود الإجراءات (آخر عمود بكل جدول) لا يجب أن ينكمش أو تلتف أزراره على
   سطرين، وإلا قد تتزاحم الأزرار أو "تهرب" بصرياً خارج حدود الخلية على
   الشاشات الضيقة. نجعله بعرضه الطبيعي دائماً ونمنع كسر الأزرار داخله. */
td:last-child, th:last-child { white-space: nowrap; }
td:last-child .btn, td:last-child button { white-space: nowrap; }

/* جدول قابل للتمرير أفقيًا على الشاشات الصغيرة: بدلاً من أن يخرج أي عمود
   (مثل زر الحذف) خارج حدود الشاشة فعلياً ويصبح غير قابل للوصول باللمس،
   نجعل الجدول نفسه هو الذي يتمرر أفقياً داخل حاويته، فيبقى كل شيء - بما
   فيه الأزرار - في متناول اليد دائماً عبر السحب الأفقي بالإصبع أو الماوس. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* هامش سفلي بسيط يفصل شريط التمرير الأفقي (لو ظهر) عن حافة البطاقة */
  padding-bottom: 2px;
}
.table-scroll table { min-width: 480px; }

@media (max-width: 640px) {
  /* على الشاشات الضيقة جداً نقلّل الحشو الداخلي قليلاً لإفساح مساحة أكبر
     لمحتوى الجدول قبل الحاجة الفعلية للتمرير */
  .table-scroll table { min-width: 560px; }
  td, th { padding: 11px 10px; }
}

/* ============ تبويبات (تنقل حديث) ============ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 11px 18px;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab:hover { color: var(--ink); background: var(--bg-soft); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }

/* ============ تنقل جانبي / علوي بأيقونات (Nav) ============ */
.nav {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.nav-item:hover { color: var(--ink); }
.nav-item.active {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.6);
}

/* شريط تنقل سفلي للهواتف */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
  justify-content: space-around;
  align-items: center;
}

@media (max-width: 720px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 12px;
  transition: color .15s ease, background-color .15s ease;
}
.bottom-nav-item svg, .bottom-nav-item .icon { width: 20px; height: 20px; }
.bottom-nav-item.active { color: var(--accent); background: var(--accent-soft); }

/* ============ صفوف الملفات ============ */
.file-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; font-family: var(--font-mono); font-size: 12.5px;
  background: var(--bg-card);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.file-row:hover { border-color: var(--accent-dim); background: var(--bg-soft); box-shadow: var(--shadow-card); transform: translateX(-2px); }

.folder-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; background: var(--bg-card);
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.folder-row:hover { border-color: var(--accent); background: var(--bg-soft); transform: translateX(-2px); }
.folder-row .icon { margin-left: 8px; }

/* ============ تنبيهات عائمة ============ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--accent);
  padding: 13px 24px; border-radius: var(--radius-pill); font-size: 13.5px; z-index: 50;
  display: none;
  box-shadow: var(--shadow-pop), var(--shadow-glow);
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .toast { bottom: 78px; }
}

/* ============ Modal عام ============ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(9, 11, 19, 0.55);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center; z-index: 40;
  padding: 16px;
}
.modal-overlay .card { box-shadow: var(--shadow-pop); width: 100%; max-width: 480px; }

hr.divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ============ مسار التنقل (Breadcrumb) ============ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; }
.breadcrumb .crumb { cursor: pointer; padding: 4px 10px; border-radius: var(--radius-pill); transition: background-color .15s ease, color .15s ease; }
.breadcrumb .crumb:hover { background: var(--bg-soft); color: var(--ink); }
.breadcrumb .sep { color: var(--ink-faint); }

/* ============ شبكة بطاقات متجاوبة ============ */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============ أزرار أيقونات دائرية ============ */
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .12s ease;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }