/* سجل متابعة المكالمات — بهوية إتقان البصرية (دليل الهوية 2026، ومنه عدة المستندات).
   اللوحة 60/30/10: عاجي أرضية، وأسود بنيوي، وذهبي للتأكيد وحده ولا يحمل حالة قط.
   والحالات بألوانها الخمسة: نجاح، وخطر، وتنبيه، ومعلومة، ومحايد.
   الخطوط: كوفي للعناوين، وتجوال للمتن، وInter للأرقام واللاتيني. ملفاتها والشعار يكتبها tools/sync_identity.py
   من الدليل وحزمة الشعار، فلا تُعدَّل بيد. والوضع الداكن يتبع الجهاز بقيم الدليل. */
@font-face { font-family: "ItqanKufi"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/ItqanKufi-400-800.woff2") format("woff2"); }
@font-face { font-family: "ItqanBody"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ItqanBody-400.woff2") format("woff2"); }
@font-face { font-family: "ItqanBody"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ItqanBody-700.woff2") format("woff2"); }
@font-face { font-family: "ItqanInter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/ItqanInter-400-800.woff2") format("woff2"); }

:root {
  --ground: #F7F4EE;
  --surface: #FFFFFF;
  --surface-2: #F1ECE4;
  --structural: #111111;
  --structural-line: transparent;
  --on-structural: #F7F4EE;
  --on-structural-2: #C9C3B8;
  --ink: #111111;
  --ink-2: #3A3733;
  --muted: #6E6A63;
  --line: #E6E0D6;
  --line-2: #D3CABA;
  --gold: #CAA149;
  --gold-ink: #8A6A24;
  --gold-lift: #D8B45F;
  --gold-wash: #F3EAD8;
  --logo-structural: #CAA149;
  --ok: #2F7457;   --ok-wash: #E7F0EB;
  --risk: #B44C44; --risk-text: #9E3B34; --risk-wash: #F7E9E7;
  --warn: #8A6A24; --warn-wash: #F6EDDC;
  --info: #3A5A7A; --info-wash: #E8EEF4;
  --neutral: #6E6A63; --neutral-wash: #F1ECE4;
  --kufi: "ItqanKufi", "ItqanInter", "Segoe UI", Tahoma, sans-serif;
  --body: "ItqanBody", "ItqanInter", "Segoe UI", Tahoma, sans-serif;
  --inter: "ItqanInter", "ItqanBody", "Segoe UI", Arial, sans-serif;
  --r-sm: 8px; --r-md: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #111111; --surface: #1A1917; --surface-2: #232120;
    --structural: #050504; --structural-line: rgba(202, 161, 73, .28); --on-structural: #F7F4EE; --on-structural-2: #9A958C;
    --ink: #F7F4EE; --ink-2: #D9D3C8; --muted: #9A958C; --line: #302D2A; --line-2: #413D38;
    --gold-ink: #D8B45F; --gold-wash: #2D2616; --logo-structural: #D8B45F;
    --ok: #5FA98A; --ok-wash: #1C2B24; --risk: #D4756C; --risk-text: #E08C84; --risk-wash: #34201D;
    --warn: #D8B45F; --warn-wash: #2D2616; --info: #8FAACB; --info-wash: #1B2633; --neutral: #A7A196; --neutral-wash: #232120;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; }
main { max-width: 720px; margin: 0 auto; padding: 14px 16px 48px; }
a { color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--kufi); line-height: 1.45; text-wrap: balance; }
h1 { font-size: 1.4rem; font-weight: 800; margin: 10px 0 6px; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 20px 0 8px; }
b, strong { font-weight: 700; }
/* الأرقام والتواريخ والهواتف والمعرّفات بخط Inter، والعربي داخلها يسقط إلى خط المتن */
[dir=ltr], time, .call { font-family: var(--inter); }
bdi[dir=ltr] { white-space: nowrap; }  /* التاريخ لا ينكسر عند الشرطة فتنقلب أجزاؤه */

/* الشعار قناعٌ يُلوَّن بلون موضعه: ذهبي على الأسود البنيوي */
.itq-logo { display: inline-block; width: 84px; aspect-ratio: 1297 / 580; flex: none; background: var(--logo-structural);
  -webkit-mask: url("logo.svg") center / contain no-repeat; mask: url("logo.svg") center / contain no-repeat; }

/* الرأس: الأسود البنيوي، والشعار في بدايته، والتبويب النشط بخط ذهبي */
.top { position: sticky; top: 0; z-index: 5; background: var(--structural); color: var(--on-structural);
  border-bottom: 1px solid var(--structural-line); }
.top .bar { max-width: 720px; margin: 0 auto; padding: 10px 16px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.top .brand { display: flex; align-items: center; gap: 10px; color: var(--on-structural-2); text-decoration: none;
  font-size: .85rem; }
.top nav { max-width: 720px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; }
.top nav a { padding: 10px 12px 9px; color: var(--on-structural-2); text-decoration: none; font-family: var(--kufi);
  font-weight: 700; font-size: .95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.top nav a.on { color: var(--on-structural); border-bottom-color: var(--gold); }
@media (hover: hover) { .top nav a:hover { color: var(--on-structural); } }
.top .account { display: flex; align-items: center; gap: 16px; font-size: .9rem; }
.top .account a { color: var(--on-structural-2); text-decoration: none; padding: 4px 0; }
.top .account a.on { color: var(--on-structural); box-shadow: inset 0 -2px 0 var(--gold); }
@media (hover: hover) { .top .account a:hover, .top button.link:hover { color: var(--on-structural); } }
.top .nav-gap { height: 10px; }
.logout { margin: 0; }
.top button.link { color: var(--on-structural-2); font-size: inherit; }

/* الأزرار: الأساسي أسود على العاجي (وعاجي في الداكن)، والثانوي إطار */
button, .btn { font: inherit; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; display: inline-block;
  font-weight: 700; }
.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
@media (hover: hover) { .primary:hover { background: var(--ink-2); border-color: var(--ink-2); } }
.wide { width: 100%; padding: 14px; font-size: 1.05rem; }
button.link { border: 0; background: none; color: var(--gold-ink); padding: 4px 0; font-weight: 400; }
button[disabled] { opacity: .6; cursor: wait; }
input, select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); margin-top: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: 2px solid var(--gold-wash); outline-offset: 0; }
label { display: block; margin: 10px 0; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lbl { color: var(--muted); font-weight: 700; }

/* رسائل الحالة بألوان الحالات، لا بالذهبي */
.flash { background: var(--ok-wash); border-inline-start: 4px solid var(--ok); padding: 10px 12px; border-radius: var(--r-sm); }
.error { background: var(--risk-wash); color: var(--risk-text); border-inline-start: 4px solid var(--risk);
  padding: 10px 12px; border-radius: var(--r-sm); }
/* التنبيه كملاحظة الدليل: النص بالحبر، ولون التنبيه في الحدّ. لونه على خلفيته 4.33 إلى 1، دون حدّ نص المتن */
.warn { background: var(--warn-wash); color: var(--ink); border-inline-start: 4px solid var(--warn);
  padding: 8px 10px; border-radius: var(--r-sm); }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.head .progress { margin: 0 0 8px; color: var(--muted); }
.head .progress b { color: var(--ink); font-family: var(--inter); }

/* بطاقة المكالمة: لون الحافة حالتها (متأخرة · اليوم · دافئة · القائمة) */
.card { background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; }
.card.g-overdue { border-inline-start-color: var(--risk); }
.card.g-due { border-inline-start-color: var(--ok); }
.card.g-warm { border-inline-start-color: var(--warn); }
.card h2 { margin: 4px 0; font-size: 1.1rem; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card p { margin: 6px 0; }
.card-top { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.tag { background: var(--neutral-wash); color: var(--ink-2); border-radius: 999px; padding: 1px 10px; font-weight: 700; }
.g-overdue .tag { background: var(--risk-wash); color: var(--risk-text); }
.g-due .tag { background: var(--ok-wash); color: var(--ok); }
.g-warm .tag { background: var(--warn-wash); color: var(--warn); }
.tag.bad { background: var(--risk-wash); color: var(--risk-text); }
.seg { color: var(--muted); }
/* الهاتف أهم ما في البطاقة، فهو موضع التأكيد الذهبي */
.call { display: inline-block; margin: 4px 0; padding: 8px 16px; border-radius: 999px; background: var(--gold-wash);
  border: 1px solid var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; unicode-bidi: isolate; }

/* تسجيل النتيجة */
.outcomes { border: 0; padding: 0; margin: 8px 0; }
.outcomes legend { font-family: var(--kufi); font-weight: 700; margin-bottom: 6px; }
.opt { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); font-weight: 700; }
.opt input { width: auto; margin: 0; transform: scale(1.3); accent-color: var(--ink); }
.opt:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.opt-dnc { color: var(--risk-text); }
details { margin: 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; }
summary { cursor: pointer; font-weight: 700; }

/* ملف الشركة */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.facts dt { color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.timeline, .thread, .results { list-style: none; padding: 0; margin: 0; }
.timeline li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0; }
.timeline time, .thread time { color: var(--muted); font-size: .8rem; display: block; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; }
.inline { margin: 4px 0 0; }

/* خيط ليدو */
.thread li { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-md); max-width: 92%; background: var(--surface);
  border: 1px solid var(--line); }
.thread li.m-me { background: var(--surface-2); border-color: var(--surface-2); margin-inline-start: auto; }
.thread li.m-comment { border-style: dashed; }
.thread .who { font-family: var(--kufi); font-weight: 700; font-size: .9rem; }
.thread .who time { display: inline; margin-inline-start: 6px; font-weight: 400; }
.ask { background: var(--ground); padding: 8px 0; display: flex; gap: 8px; align-items: flex-end; }
.ask.sticky { position: sticky; bottom: 0; }
.ask textarea { margin: 0; }

.search { display: flex; gap: 8px; margin: 8px 0; }
.search input { margin: 0; }
.results li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0; }

/* الدخول: رأس أسود بالشعار فوق النموذج */
.login { max-width: 380px; margin: 9vh auto 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; }
.login .login-head { background: var(--structural); color: var(--on-structural); padding: 22px 20px 18px; }
.login .login-head .itq-logo { width: 112px; }
.login .login-head h1 { margin: 14px 0 2px; font-size: 1.3rem; }
.login .login-head p { margin: 0; color: var(--on-structural-2); }
.login form, .login > .error { margin: 16px 20px; }
.login button { width: 100%; margin-top: 8px; }