/* ==========================================================================
   مسطر — لوحة المبرمج بثيم لوحة الإدارة (xPanal الداكن)
   --------------------------------------------------------------------------
   dashboard.css وmanage.css مبنيتان على رموز ألوان؛ نعيد تعريفها هنا بالألوان الداكنة
   نفسها فتتحوّل الصفحتان (الإعدادات العامة، والخدمات والنصوص) بلا تغيير بنيتهما، ثم نضبط
   الشريط الجانبي واللوكو بنمط لوحة الإدارة. يُحمَّل بعد dashboard.css وmanage.css. بلا أنماط مضمّنة (CSP).
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #0f1923;
  --bg-2: #111c26;
  --panel: #16242f;
  --panel-strong: #1b2c38;
  --panel-solid: #16242f;
  --field: #101b25;
  --field-2: #132029;

  --line: rgba(140, 180, 210, 0.13);
  --line-2: rgba(140, 180, 210, 0.22);
  --line-hot: rgba(34, 211, 238, 0.55);

  --accent: #22d3ee;
  --accent-strong: #0fb5cf;
  --accent-weak: rgba(34, 211, 238, 0.12);
  --accent-ring: rgba(34, 211, 238, 0.22);

  --green: #22c55e;
  --amber: #eab308;
  --red: #ef4444;

  --ink: #e9f2f8;
  --ink-2: #b7c7d4;
  --muted: #7f94a6;
  --muted-2: #6b8091;
  --on-accent: #06232b;

  --shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

  --radius: 16px;
  --radius-sm: 12px;
}

html, body { background: var(--bg); color: var(--ink); }
code { background: rgba(255, 255, 255, 0.07); }
* { scrollbar-color: #2b4254 transparent; }
::-webkit-scrollbar-thumb { background: #2b4254; }

/* ---------------------------------------------------------- الشريط الجانبي */

.shell { grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  background: var(--bg-2);
  border-inline-end: 1px solid var(--line);
}
.sidebar .brand { margin: 0; padding: 18px 22px 14px; }
.sidebar .brand a { display: block; line-height: 0; }
.xp-brand-logo { display: block; width: 112px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.sidebar .dev-tag { display: block; margin: 0 22px 10px; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.4px; }
.sidebar .nav { gap: 6px; padding: 8px 12px; }
.sidebar .nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 13px;
  color: var(--ink);
  border: 1px solid transparent;
}
.sidebar .nav a svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav a span { margin-inline-end: auto; }
.sidebar .nav a:hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; }
.sidebar .nav a.active,
.sidebar .nav a.is-active {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-weak);
  border-color: rgba(34, 211, 238, 0.45);
}
.sidebar .nav a.active::before { display: none; }
.sidebar .nav a.nav-feature { margin-bottom: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2); display: block; }
.sidebar .nav a.nav-feature:hover { background: var(--accent-weak); }
.sidebar .nav a small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.sidebar .nav-label { margin: 10px 22px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sidebar footer { position: static; margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--line); }
.sidebar footer .who { display: grid; gap: 2px; margin-bottom: 10px; }
.sidebar footer .who strong { color: #fff; font-size: 14px; }
.sidebar footer .who small { color: var(--muted); font-size: 12px; }
.sidebar footer .who a { color: inherit; }
.sidebar footer .who a:hover strong { color: var(--accent); }

/* ---------------------------------------------------------- المحتوى */

.main { background: var(--bg); }
.topbar h1 { color: #fff; }
.panel, .card, .quick-link {
  background: linear-gradient(160deg, #1b2e3c, #15232f);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.card .card, .panel .card { background: rgba(255, 255, 255, 0.03); }
.quick-link:hover { border-color: var(--accent); }
.panel-head { border-bottom: 1px solid var(--line); }
.panel-head h2, h2, h3 { color: #fff; }
input, select, textarea {
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-2);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
select option { background: #101b25; color: var(--ink); }
label { color: var(--ink-2); }
.button { color: var(--ink); background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); }
.button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: var(--accent); }
.button.orange, .button.primary, .button[type="submit"]:not(.ghost):not(.danger) { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.button.orange:hover, .button.primary:hover, .button[type="submit"]:not(.ghost):not(.danger):hover { background: var(--accent-strong); color: var(--on-accent); }
.button.ghost { background: transparent; }
.button.danger { color: #fecaca; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
.button.danger:hover { background: var(--red); color: #fff; }
table th { color: var(--ink-2); background: rgba(255, 255, 255, 0.03); }
table td, table th { border-color: var(--line); }
tbody tr:hover { background: rgba(34, 211, 238, 0.05); }

.notice { color: #bbf7d0; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); }
.error { color: #fecaca; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.45); }
.warn { color: #fde68a; background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.35); }
.stepbar, .envtag { border-color: rgba(34, 211, 238, 0.3); }
.status { color: var(--ink); }
.status.active { color: #bbf7d0; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); }

/* ---------------------------------------------------------- صفحة الخدمات والنصوص (manage.css) */

.chip { color: var(--ink-2); background: rgba(255, 255, 255, 0.05); border-color: var(--line-2); }
.chip.is-on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.chip-count { background: rgba(255, 255, 255, 0.1); }
.toast { color: var(--ink); background: #16242f; border-color: var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.toast[data-kind="ok"] { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.5); }
.toast[data-kind="err"] { color: #fecaca; border-color: rgba(239, 68, 68, 0.55); }
.drawer, .modal, .sheet { background: #131f29; color: var(--ink); }
.draft-pill { color: var(--ink-2); }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; }
}

.svc-tile, .drawer-thumb, .media-preview, .icon-pick { background: #1a2c39; }
.drawer-thumb.is-new { background: var(--accent); }
.drawer { box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45); }
.drawer-backdrop { background: rgba(5, 10, 15, 0.6); }

/* ---------------------------------------------------------- صفحات الدخول والإعداد والجذر (اللوكو) */
.login-logo { display: block; width: 180px; max-width: 70%; height: auto; margin: 0 auto 12px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.login-card { text-align: start; }
.login-card h1:not(.sr-only) { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.login-card .links a { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); }
.login-card .links a:hover { border-color: var(--accent); }
.hint code { background: rgba(255, 255, 255, 0.08); }