/* =========================================================
   الألوان — الوضع النهاري
   ========================================================= */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --bar: rgba(255, 255, 255, .78);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #aeaeb2;
  --line: rgba(0, 0, 0, .06);
  --line-2: rgba(0, 0, 0, .1);
  --seg-bg: rgba(118, 118, 128, .12);
  --seg-on: #ffffff;
  --hover: rgba(0, 0, 0, .045);
  --weekend: rgba(0, 0, 0, .018);
  --today: #ff3b30;
  --today-tint: rgba(255, 59, 48, .035);
  --tint: 10%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .05);

  --p-mazeed: #f2b300;
  --p-anwar: #ff2d55;
  --p-saif: #28b04b;
  --p-aziz: #007aff;

  --name-w: 148px;
  --panel-w: 380px;
  --font: -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI Variable Text", "Segoe UI", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  color-scheme: light;
}

/* ---------- الوضع الليلي ---------- */
:root[data-theme="dark"] {
  --bg: #111113;
  --surface: #1c1c1e;
  --bar: rgba(28, 28, 30, .78);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #636366;
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .11);
  --seg-bg: rgba(118, 118, 128, .24);
  --seg-on: rgba(255, 255, 255, .16);
  --hover: rgba(255, 255, 255, .06);
  --weekend: rgba(255, 255, 255, .015);
  --today: #ff453a;
  --today-tint: rgba(255, 69, 58, .05);
  --tint: 15%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);

  --p-mazeed: #ffd60a;
  --p-anwar: #ff375f;
  --p-saif: #30d158;
  --p-aziz: #0a84ff;
  color-scheme: dark;
}

/* =========================================================
   الأساس
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .3s, color .3s;
}
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   الشريط العلوي
   ========================================================= */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; margin-inline-end: 6px; }
.logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--text); color: var(--surface);
  display: grid; place-items: center; font-weight: 600; font-size: 16px;
}
h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.spacer { flex: 1; }

.seg {
  display: inline-flex; background: var(--seg-bg);
  border-radius: 9px; padding: 2px; gap: 2px;
}
.seg button {
  padding: 5px 14px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--text-2); transition: background .2s, color .2s, box-shadow .2s;
}
.seg button:hover { color: var(--text); }
.seg button.on {
  background: var(--seg-on); color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
}

.tools { display: inline-flex; align-items: center; gap: 2px; }
.divider { width: 1px; height: 18px; background: var(--line-2); margin: 0 6px; }
.icon-btn, .text-btn {
  height: 32px; min-width: 32px; border-radius: 8px;
  display: inline-grid; place-items: center; color: var(--text-2);
  transition: background .15s, color .15s;
}
.text-btn { padding: 0 12px; font-size: 13px; font-weight: 500; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover, .text-btn:hover { background: var(--hover); color: var(--text); }
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }


/* =========================================================
   تنبيهات
   ========================================================= */
#toasts {
  position: fixed; bottom: 24px; right: 50%; transform: translateX(50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 50; align-items: center; pointer-events: none;
}
.toast {
  padding: 10px 18px; border-radius: 99px; font-size: 13.5px; font-weight: 500;
  background: var(--text); color: var(--surface);
  box-shadow: var(--shadow-lg); animation: tin .3s cubic-bezier(.2, .8, .2, 1); max-width: 90vw;
}
.toast.out { opacity: 0; transform: translateY(6px); transition: all .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (max-width: 760px) {
  :root { --name-w: 92px; }
  .pname { padding: 0 10px; }
  .pname .avatar { display: none; }
  .brand h1 { display: none; }
  .topbar { gap: 8px; padding: 8px 10px; }
  .seg button { padding: 5px 10px; }
}