/* ═══════════════════════════════════════════════════════════════
   دوحة الأفكار — نظام التصميم
   مستمد من هويتي دوحة الأفكار وبُناة: تدرّج من الأخضر المزرق إلى الكحلي.
   الخط: ثمانية (Thmanyah) — ملفات المالك، محمّلة ذاتياً من assets/fonts.css.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ألوان الهوية */
  --teal: #0B6F68;  --teal-2: #0E857C;  --navy: #2F4574;  --navy-2: #3B5A94;
  --grad: linear-gradient(135deg, #0E857C 0%, #0B6F68 38%, #2F4574 100%);
  --grad-soft: linear-gradient(135deg, rgba(14,133,124,.12), rgba(47,69,116,.12));
  /* السطوح والنصوص */
  --ground: #F3F6F5; --paper: #FFFFFF; --paper-2: #F8FAF9;
  --ink: #16231F; --ink-2: #4A5854; --muted: #8A9490; --rule: #E1E7E4; --rule-2: #CFD8D3;
  --accent: var(--teal); --accent-ink: #085A54; --accent-soft: #E4F1EF;
  /* دلالية */
  --ok: #1F8A5B; --ok-soft: #E3F4EB; --bad: #C24141; --bad-soft: #FBE7E7; --warn: #B7791F; --warn-soft: #FBF0DA; --info: var(--navy); --info-soft: #E8ECF6;
  --radius: 16px; --radius-s: 10px;
  --shadow: 0 1px 2px rgba(22,35,31,.05), 0 12px 32px -20px rgba(22,35,31,.28);
  --shadow-lg: 0 24px 60px -30px rgba(22,35,31,.45);
  --tap: 48px;
  --font-ui: "Thmanyah", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Thmanyah Serif Display", "Thmanyah", "Amiri", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --teal: #4FB8AE; --teal-2: #6BC9BF; --navy: #7D93C9; --navy-2: #98ABDC;
    --grad: linear-gradient(135deg, #0E857C 0%, #0B6F68 38%, #2F4574 100%);
    --grad-soft: linear-gradient(135deg, rgba(79,184,174,.14), rgba(125,147,201,.14));
    --ground: #0F1614; --paper: #17201D; --paper-2: #1C2622;
    --ink: #E9EEEB; --ink-2: #B9C3BE; --muted: #7F8A85; --rule: #26312C; --rule-2: #364440;
    --accent: #4FB8AE; --accent-ink: #8FD8D0; --accent-soft: #163632;
    --ok: #5CC48D; --ok-soft: #173325; --bad: #E47575; --bad-soft: #3A1F1F; --warn: #E0B25A; --warn-soft: #3A2E14; --info: #98ABDC; --info-soft: #1E2740;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.7); --shadow-lg: 0 24px 60px -30px rgba(0,0,0,.8);
  }
}

/* ── الأساس ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); direction: rtl; min-height: 100dvh;
       font-family: var(--font-ui); font-size: 16px; line-height: 1.7;
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1, .display, .stat .v, .hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.15rem; font-weight: 700; margin: 26px 0 10px; } h3 { font-size: 1rem; font-weight: 700; }
p { margin: 8px 0; }
.sub { color: var(--ink-2); margin: 2px 0 14px; font-size: .95rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* مدى وقت مختصر («٥:٣٠ – ٦:١٥»): كل طرف معزول وحده في النص، والترتيب يتبع اتجاه الصفحة
   فتقع البداية يميناً والنهاية يساراً. لا تستعمل .num للمدى — تقلبه. */
.trng { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:focus-visible { outline: 3px solid var(--teal-2); outline-offset: 2px; border-radius: 6px; }

/* ── الحاويات ── */
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.wrap.wide { max-width: 1120px; }
.grid { display: grid; gap: 12px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid.three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ── الشريط العلوي ── */
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); margin: 0 -16px 14px;
          background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
          border-bottom: 1px solid var(--rule); }
.appbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar .brand img { height: 34px; width: auto; display: block; }
.appbar .brand .t { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .brand .s { font-size: .76rem; color: var(--muted); margin-top: -2px; }
.userchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); font-size: .84rem; max-width: 46vw; }
.userchip .avatar { width: 28px; height: 28px; font-size: .8rem; }
.userchip .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }

/* ── شريط التبويبات السفلي (جوال) ── */
.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
          background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
          border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.tabbar button, .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; background: none; border: 0; color: var(--muted); font-size: .74rem; font-weight: 600; cursor: pointer; min-height: 56px; }
.tabbar .ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 10px; font-size: 1.05rem; }
.tabbar .active { color: var(--accent-ink); } .tabbar .active .ic { background: var(--accent-soft); }
@media (min-width: 900px) { .tabbar { position: sticky; top: 64px; bottom: auto; inset-inline: auto; grid-auto-flow: row; border: 1px solid var(--rule); border-radius: var(--radius); margin: 0 0 14px; max-width: 260px; } }

/* ── البطاقات ── */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; } .card.soft { background: var(--paper-2); border-color: transparent; }
.card.hero { background: var(--grad); color: #fff; border: 0; box-shadow: var(--shadow-lg); }
.card.hero .muted, .card.hero .sub { color: rgba(255,255,255,.8); }
.stat { display: grid; gap: 2px; padding: 14px 16px; }
.stat .v { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .82rem; color: var(--ink-2); }
.stat.accent .v { color: var(--accent-ink); }

/* ── القوائم ── */
.list { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.row .lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .meta { font-size: .8rem; color: var(--muted); }
.row.done { border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); }
.empty { text-align: center; color: var(--muted); padding: 36px 14px; }
.empty .big { font-size: 2rem; display: block; margin-bottom: 6px; }

/* ── الأزرار ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; min-height: var(--tap); border-radius: 12px;
       border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font-weight: 700; cursor: pointer; transition: transform .08s, background .15s, box-shadow .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -14px rgba(11,111,104,.7); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }
.btn.block { width: 100%; } .btn.sm { min-height: 38px; padding: 0 12px; font-size: .88rem; border-radius: 10px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.btn.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.btn.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.btn.active { box-shadow: inset 0 0 0 2px currentColor; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* مجموعة أزرار الحالة (حاضر/غائب/معذور — أُنجز/جزئي/لم يُنجز) */
.seg { display: inline-grid; grid-auto-flow: column; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { min-height: 40px; min-width: 62px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-weight: 700; font-size: .86rem; cursor: pointer; }
.seg button.on.ok { background: var(--ok); color: #fff; } .seg button.on.bad { background: var(--bad); color: #fff; } .seg button.on.warn { background: var(--warn); color: #fff; }
.seg button.on { box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); }

/* ── الحقول ── */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 700; font-size: .9rem; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; min-height: var(--tap); border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-2) 18%, transparent); }
.field .hint { font-size: .8rem; color: var(--muted); }

/* ── الشارات والرسائل ── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.info { background: var(--info-soft); color: var(--info); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 800; }
.msg { padding: 12px 14px; border-radius: 12px; font-size: .92rem; margin: 10px 0; }
.msg.bad { background: var(--bad-soft); color: var(--bad); } .msg.ok { background: var(--ok-soft); color: var(--ok); } .msg.warn { background: var(--warn-soft); color: var(--warn); } .msg.info { background: var(--info-soft); color: var(--info); }

/* ── شرائح الأيام / التبويبات الداخلية ── */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--paper); font-size: .85rem; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.tabs { display: grid; grid-auto-flow: column; background: var(--paper-2); border-radius: 12px; padding: 4px; gap: 4px; margin: 6px 0 14px; }
.tabs button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.tabs button.on { background: var(--paper); color: var(--accent-ink); box-shadow: var(--shadow); }

/* ── نافذة سفلية (جوال) ── */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.4); display: none; align-items: flex-end; justify-content: center; }
.sheet.open { display: flex; }
.sheet .panel { width: min(100%, 560px); background: var(--paper); border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88dvh; overflow: auto; }
@media (min-width: 900px) { .sheet { align-items: center; } .sheet .panel { border-radius: 20px; } }

/* ── تنبيه ── */
#toast { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 16px); background: var(--ink); color: var(--ground); padding: 11px 16px; border-radius: 12px;
         opacity: 0; pointer-events: none; transition: .22s; z-index: 99; max-width: 90vw; font-size: .92rem; font-weight: 600; box-shadow: var(--shadow-lg); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--bad); color: #fff; } #toast.ok { background: var(--ok); color: #fff; }

/* ── تحميل ── */
.skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 10px; min-height: 18px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ── العلامة التجارية في الصفحات ── */
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { height: 44px; width: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .appbar, .tabbar, #toast { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }