@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  --font: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --bg: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #eeede6;
  --text: #14201d;
  --muted: #5f6b67;
  --faint: #8d9692;
  --border: #e1dfd6;
  --primary: #0d7a6f;
  --primary-ink: #ffffff;
  --primary-soft: #e3f1ee;
  --ok: #1f8a4c; --ok-soft: #e4f4ea;
  --warn: #b26b00; --warn-soft: #fdf1dc;
  --bad: #c0392b; --bad-soft: #fbe7e4;
  --info: #3b5b8c; --info-soft: #e7edf6;
  --chart-1: #0d7a6f; --chart-2: #c48a2c; --chart-3: #3b5b8c; --chart-4: #b5473b;
  --radius: 16px;
  --sidebar: 268px;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1413; --surface: #161d1b; --surface-2: #1d2624; --text: #ecf1ef; --muted: #a3afab; --faint: #76827e; --border: #27322f;
    --primary: #2fb3a3; --primary-ink: #06201c; --primary-soft: #143430;
    --ok: #4cc27f; --ok-soft: #163322; --warn: #e3a64a; --warn-soft: #3a2b12; --bad: #ef7466; --bad-soft: #3d1d19; --info: #8fb0e0; --info-soft: #1b2638;
    --chart-1: #2fb3a3; --chart-2: #e3a64a; --chart-3: #8fb0e0; --chart-4: #ef7466;
  }
}

* { box-sizing: border-box; }
html { direction: rtl; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.h-xl { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; }
.h-lg { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; }
.h-md { font-size: 1.15rem; font-weight: 600; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: .85rem; }
.hidden { display: none !important; }

/* ---------- التخطيط ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100svh; }
.sidebar { position: sticky; top: 0; height: 100svh; overflow-y: auto; background: var(--surface); border-inline-start: 1px solid var(--border); padding: var(--s3) var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.brand { display: flex; align-items: center; gap: .6rem; padding: 0 .5rem var(--s2); font-weight: 700; font-size: 1.25rem; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.brand small { display: block; font-weight: 400; font-size: .72rem; color: var(--faint); margin-top: -.2rem; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s1); }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 12px; color: var(--text); font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--primary-soft); color: var(--primary); }
.nav a .count { margin-inline-start: auto; font-size: .78rem; color: var(--faint); }
.nav svg { width: 19px; height: 19px; flex: none; }
.nav-sep { height: 1px; background: var(--border); margin: var(--s1) .5rem; }
.chatlist { display: flex; flex-direction: column; margin: 0 1.9rem 0 0; }
.chatlist a { padding: .25rem .6rem; font-size: .88rem; color: var(--muted); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatlist a:hover, .chatlist a.active { color: var(--primary); background: var(--surface-2); }
.sidebar-foot { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.main { min-width: 0; padding: var(--s4) clamp(1rem, 4vw, 3.5rem) var(--s5); }
.page { max-width: 1120px; margin: 0 auto; }
.page.narrow { max-width: 780px; }
.topbar { display: none; }
.crumbs { font-size: .85rem; color: var(--faint); margin-bottom: var(--s1); }
.crumbs a { color: var(--faint); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  html, body { overflow-x: clip; }
  .sidebar { position: fixed; inset: 0 0 0 auto; width: min(86vw, 300px); z-index: 30; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; box-shadow: -20px 0 50px rgba(0,0,0,.15); }
  body.menu-open .sidebar { transform: none; visibility: visible; }
  .decision { grid-template-columns: 1fr; }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
  .main { padding: var(--s3) 1rem var(--s5); }
}

/* ---------- عناصر ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px; padding: .55rem 1.3rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; cursor: pointer; background: var(--primary); color: var(--primary-ink); transition: opacity .15s ease; white-space: nowrap; }
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--text); opacity: 1; }
.btn.small { min-height: 34px; padding: .3rem .9rem; font-size: .88rem; }
.btn.block { width: 100%; }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad-soft); }
.btn svg { width: 18px; height: 18px; }
.iconbtn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); }
.card.flat { background: transparent; }
.card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; }
.grid { display: grid; gap: var(--s2); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.primary { background: var(--primary-soft); color: var(--primary); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button:not(.btn) { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .35rem 1rem; cursor: pointer; font-weight: 500; }
.filters button:not(.btn).on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.banner { border-radius: 14px; padding: .9rem 1.1rem; display: flex; gap: .8rem; align-items: flex-start; }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.info { background: var(--info-soft); color: var(--info); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner strong { display: block; }
.banner p { margin: 0; color: var(--text); opacity: .85; }

/* نماذج */
label.field { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 500; }
.field .hint { font-weight: 400; color: var(--faint); font-size: .78rem; }
input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .85rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input[type=number] { direction: ltr; text-align: right; }
textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.checkbox input { margin-top: .4rem; accent-color: var(--primary); }

/* جداول */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .65rem .9rem; text-align: right; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-weight: 600; color: var(--muted); font-size: .82rem; background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 700; background: var(--surface-2); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }

/* ---------- الرئيسية والمحادثة ---------- */
.hero { text-align: center; padding: clamp(2rem, 10vh, 7rem) 0 var(--s3); }
.hero p { color: var(--muted); margin: .6rem 0 0; }
.composer { position: relative; max-width: 760px; margin: var(--s3) auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: .5rem .5rem .5rem 6.6rem; box-shadow: 0 18px 40px -28px rgba(13,60,55,.35); }
.composer textarea { border: 0; min-height: 52px; max-height: 220px; box-shadow: none !important; background: transparent; padding: .7rem .8rem; }
.composer .send { position: absolute; left: .55rem; bottom: .55rem; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; cursor: pointer; }
.composer .send:disabled { opacity: .4; }
.composer-note { text-align: center; font-size: .8rem; color: var(--faint); margin-top: .6rem; }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s2); }
.suggest button { border: 1px dashed var(--border); background: transparent; border-radius: 999px; padding: .35rem .95rem; cursor: pointer; color: var(--muted); font-size: .88rem; }
.suggest button:hover { border-color: var(--primary); color: var(--primary); }

.chat { display: flex; flex-direction: column; min-height: calc(100svh - 8rem); }
.messages { flex: 1; display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s3); }
.msg { max-width: 82%; padding: .8rem 1.1rem; border-radius: 18px; white-space: pre-wrap; }
.msg.user { align-self: flex-start; background: var(--primary); color: var(--primary-ink); border-end-start-radius: 6px; }
.msg.assistant { align-self: flex-end; background: var(--surface); border: 1px solid var(--border); border-end-end-radius: 6px; }
.msg.error { border-color: var(--bad-soft); background: var(--bad-soft); }
.msg .cta { margin-top: .7rem; }
.chat .composer { position: sticky; bottom: 1rem; margin-top: 0; width: 100%; }
.typing::after { content: '…'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* بطاقات */
.study-card { display: block; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; transition: border-color .15s ease; }
.study-card:hover { border-color: var(--primary); }
.study-card .t { font-weight: 600; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.stat .label { font-size: .82rem; color: var(--muted); }
.stat .value { font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 700; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: .78rem; color: var(--faint); }
.stat.bad .value { color: var(--bad); } .stat.ok .value { color: var(--ok); } .stat.warn .value { color: var(--warn); }

/* ---------- التقرير ---------- */
.decision { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: center; border-radius: var(--radius); padding: var(--s3); background: var(--surface); border: 1px solid var(--border); border-inline-start: 6px solid var(--primary); }
.decision.bad { border-inline-start-color: var(--bad); } .decision.warn { border-inline-start-color: var(--warn); } .decision.ok { border-inline-start-color: var(--ok); }
.decision .big { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
.tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.test { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1rem; }
.test .head { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; }
.test p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.65; }
.section { margin-top: var(--s4); }
.section > h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--s2); display: flex; align-items: baseline; gap: .6rem; }
.section > h2 .idx { color: var(--faint); font-weight: 500; font-size: .95rem; }
.prose { max-width: 75ch; }
.prose p { margin: 0 0 .9rem; }
.prose ul { margin: 0 0 .9rem; padding-inline-start: 1.2rem; }
.prose h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; } .prose h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.prose table { margin: .8rem 0 1.2rem; border: 1px solid var(--border); }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); fill: var(--muted); font-size: 11px; }
.chart .grid-line { stroke: var(--border); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: .5rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: .35rem; vertical-align: middle; }
.origin { font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; font-weight: 600; }
.origin.user { background: var(--primary-soft); color: var(--primary); }
.origin.benchmark { background: var(--surface-2); color: var(--muted); }
.origin.mixed { background: var(--info-soft); color: var(--info); }

/* لوحة "ماذا لو" */
.whatif { position: sticky; top: 1rem; max-height: calc(100svh - 2rem); overflow-y: auto; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s3); align-items: start; }
@media (max-width: 1150px) { .report-grid { grid-template-columns: minmax(0, 1fr); } .whatif { position: static; } }
.slider { margin-bottom: .9rem; }
.slider .row { display: flex; justify-content: space-between; font-size: .85rem; }
.slider input[type=range] { width: 100%; accent-color: var(--primary); }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); }

/* المراجعة */
.review-group { margin-bottom: var(--s3); }
.review-group > h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: .8rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem 1rem; }
.field .lbl { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.review-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: var(--s2); }

/* تسجيل الدخول */
.login { min-height: 100svh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: min(400px, 100%); text-align: center; padding: var(--s4) var(--s3); }
.login input { text-align: center; letter-spacing: .3em; direction: ltr; font-size: 1.2rem; margin: var(--s2) 0; }
.err { color: var(--bad); font-size: .88rem; min-height: 1.3em; }

.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .6rem 1.2rem; border-radius: 999px; z-index: 50; font-size: .9rem; }
.empty { text-align: center; padding: var(--s4) var(--s2); color: var(--muted); }
.steps { display: flex; gap: .4rem; margin-bottom: var(--s3); }
.steps span { flex: 1; height: 5px; border-radius: 9px; background: var(--border); }
.steps span.on { background: var(--primary); }
.typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.typegrid button { text-align: right; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: .75rem .9rem; cursor: pointer; }
.typegrid button small { display: block; color: var(--faint); font-size: .75rem; }
.typegrid button.on, .typegrid button:hover { border-color: var(--primary); background: var(--primary-soft); }

@media print {
  .sidebar, .topbar, .whatif, .no-print, .composer { display: none !important; }
  .shell { display: block; } .main { padding: 0; } body { background: #fff; font-size: 12pt; }
  .report-grid { display: block; } .card, .test, .stat, .table-wrap { break-inside: avoid; }
  .section { break-inside: auto; }
}
svg:not(.chart) { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.card h3 { display: flex; align-items: center; gap: .45rem; }
#staff select { min-width: 5.5rem; } #staff input[type=text] { min-width: 8rem; }
@media (max-width: 600px) { .decision { grid-template-columns: minmax(0, 1fr); } }

/* المرفقات */
.composer .attach { position: absolute; left: 3.35rem; bottom: .55rem; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.composer .attach:hover { color: var(--primary); border-color: var(--primary); }
.composer .attach svg { width: 20px; height: 20px; }
.attach-list { display: none; flex-wrap: wrap; gap: .4rem; padding: .3rem .4rem 0; }
.attach-list.on { display: flex; }
.file-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .25rem .5rem .25rem .7rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; color: var(--text); }
.file-chip b { font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.file-chip small { color: var(--faint); }
.file-chip button { border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 1.05rem; line-height: 1; padding: 0 .2rem; }
.file-chip.uploading { opacity: .65; } .file-chip.error { border-color: var(--bad); } .file-chip.error b { background: var(--bad-soft); color: var(--bad); }
.msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msg.user .file-chip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: inherit; }
.msg.user .file-chip b { background: rgba(255,255,255,.9); }
.msg.user .file-chip small { color: inherit; opacity: .75; }
.drop-hint { display: none; position: absolute; inset: 0; border-radius: 22px; border: 2px dashed var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; place-items: center; pointer-events: none; }
.composer.dragging .drop-hint { display: grid; }