/* بصيرة | الأنماط. واجهة عربية RTL للجوال أولاً. الألوان رموز، وفيها وضع داكن. */
:root{
  --bg:#f3f5f2; --surface:#ffffff; --fg:#1d2a24; --muted:#5f6f67; --line:#dde4df;
  --palm:#1f5b47; --palm-soft:#e3eee8; --saffron:#c98a12; --saffron-soft:#fbf1dc;
  --good:#24804f; --warn:#b7791f; --bad:#c0392b;
  --bad-soft:#fbe7e4; --warn-soft:#fcf3e1; --good-soft:#e4f3ea; --overlay:rgba(20,30,25,.45);
  --display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121a16; --surface:#1a241f; --fg:#e6ece8; --muted:#9aaba2; --line:#2c3a33;
  --palm:#6cc3a0; --palm-soft:#1f3229; --saffron:#e8b04a; --saffron-soft:#33291a;
  --good:#5fca8e; --warn:#e6ad55; --bad:#ef7a6c;
  --bad-soft:#3a201d; --warn-soft:#352a17; --good-soft:#1b3326; --overlay:rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121a16; --surface:#1a241f; --fg:#e6ece8; --muted:#9aaba2; --line:#2c3a33;
  --palm:#6cc3a0; --palm-soft:#1f3229; --saffron:#e8b04a; --saffron-soft:#33291a;
  --good:#5fca8e; --warn:#e6ad55; --bad:#ef7a6c;
  --bad-soft:#3a201d; --warn-soft:#352a17; --good-soft:#1b3326; --overlay:rgba(0,0,0,.6); color-scheme:dark}

html{direction:rtl}   /* النوافذ والجولة تنضاف على body خارج #app، فلازم الاتجاه من الأعلى */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6}
.wrap{max-width:720px;margin:0 auto;padding-block:16px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px}
.wrap.wide{max-width:1080px}
.wrap.narrow{max-width:420px;padding-top:12vh}
body.tour-on .wrap{padding-bottom:300px}
h1{font-family:var(--display);font-weight:700;font-size:1.9rem;margin:0;color:var(--palm);letter-spacing:0}
h2{font-family:var(--display);font-weight:500;font-size:1.15rem;margin:0;text-wrap:balance}
h3{font-size:1rem;margin:0}
p{margin:0}
.hint{color:var(--muted);font-size:.82rem;margin:0;font-weight:400}
.boot{text-align:center;color:var(--muted);padding:20vh 16px 0}
.err{color:var(--bad);font-size:.88rem;min-height:1.4em}
a{color:var(--palm)}

/* الرأس */
.top{display:flex;align-items:center;gap:10px;position:relative}
.top .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.badge{display:inline-block;font-size:.72rem;border-radius:999px;padding:1px 9px;background:var(--saffron-soft);color:var(--saffron);align-self:flex-start}
.badge.market{background:var(--palm-soft);color:var(--palm)}
.icon{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:10px;width:40px;height:40px;font-size:1.3rem;cursor:pointer}
.menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:260px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menu button,.menu a{font:inherit;text-align:start;border:none;background:transparent;color:var(--fg);padding:10px 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:block}
.menu button:hover,.menu a:hover{background:var(--palm-soft)}

/* الأقسام */
.sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:12px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:7px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--palm);border-color:var(--palm);color:var(--bg)}
.chip.add{border-style:dashed;color:var(--palm)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.tile .k{font-size:.78rem;color:var(--muted)}
.tile .v{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{border-radius:12px;padding:10px 12px;font-size:.9rem;border-inline-start:4px solid}
.alert.bad{background:var(--bad-soft);border-color:var(--bad)}
.alert.warn{background:var(--warn-soft);border-color:var(--warn)}
.alert.good{background:var(--good-soft);border-color:var(--good)}
.alert b{display:block}
.result{display:flex;flex-direction:column;gap:12px;border-radius:14px}
.up{color:var(--good)} .down{color:var(--bad)}

/* الحقول */
label{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:4px;min-width:0}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;min-width:0;font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:80px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.full{grid-column:1/-1}
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 92px 34px;gap:8px;align-items:center}
.row.src{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr) 34px}
.x{border:none;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer;border-radius:8px;height:34px}
.x:hover{color:var(--bad);background:var(--bad-soft)}
.btn{font:inherit;font-size:.9rem;border:1px solid var(--palm);color:var(--palm);background:transparent;border-radius:9px;padding:8px 14px;cursor:pointer;align-self:flex-start}
.btn.solid{background:var(--palm);color:var(--bg)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.block{align-self:stretch;text-align:center}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* التكلفة والسعر */
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.bar span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:5px}
.price-box{background:var(--saffron-soft);border-radius:12px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.price-box .big{font-family:var(--display);font-size:1.9rem;color:var(--saffron);font-variant-numeric:tabular-nums;line-height:1.2}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;padding-block:5px;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.kv:last-child{border-bottom:none}
.rate-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.88rem}
.rate-row .btn{padding:5px 12px}
.pos{position:relative;height:40px;margin-top:6px}
.pos .track{position:absolute;inset:18px 0 auto;height:4px;background:var(--line);border-radius:2px}
.pos .dot{position:absolute;top:12px;width:16px;height:16px;border-radius:50%;transform:translateX(50%);background:var(--muted);opacity:.6}
.pos .me{background:var(--saffron);opacity:1;width:20px;height:20px;top:10px;border:3px solid var(--surface)}
.pos-l{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.slider{display:flex;flex-direction:column;gap:2px}
.slider .top2{display:flex;justify-content:space-between;font-size:.88rem}
.slider .top2 b{font-variant-numeric:tabular-nums;color:var(--palm)}
input[type=range]{padding:0;border:none;background:transparent;accent-color:var(--palm)}
.compare{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:4px 8px;font-size:.9rem;font-variant-numeric:tabular-nums}
.compare .h{font-size:.78rem;color:var(--muted)}
.recs{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.cases-list{display:flex;flex-direction:column;gap:12px}
.case{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}

/* لافتات وإشعارات */
.banner{background:var(--palm-soft);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.9rem}
.banner.warn{background:var(--warn-soft)}
.toast{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:420px;background:var(--fg);color:var(--bg);border-radius:12px;padding:10px 14px;text-align:center;z-index:80;font-size:.9rem}

/* النوافذ السفلية والجولة */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:18px max(16px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
fieldset{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
legend{font-weight:600;padding:0;margin-bottom:4px}
.opt{flex-direction:row;align-items:center;gap:8px;color:var(--fg);font-size:.92rem;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.opt input{width:auto}
.tour-card{position:fixed;inset-inline:0;bottom:0;z-index:70;background:var(--surface);border-top:3px solid var(--saffron);box-shadow:0 -8px 28px rgba(0,0,0,.18);padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.tour-card .inner{max-width:560px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:10px}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--saffron)}
.tour-hl{outline:3px solid var(--saffron);outline-offset:4px}

/* ---------- لوحة المدير ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:6px}
.tab{flex:none;border:none;background:transparent;color:var(--muted);font:inherit;padding:8px 14px;border-radius:9px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--palm);color:var(--bg)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap;vertical-align:top}
.tbl th{color:var(--muted);font-weight:500;font-size:.78rem}
.tbl td.wrap-cell{white-space:normal;min-width:200px}
.pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.78rem}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.mute{background:var(--line);color:var(--muted)}
.verdict{border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line)}
.verdict.go{background:var(--good-soft);border-color:var(--good)}
.verdict.adjust{background:var(--warn-soft);border-color:var(--warn)}
.verdict.stop{background:var(--bad-soft);border-color:var(--bad)}
.verdict .big{font-family:var(--display);font-size:1.5rem}
.crit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;font-size:.92rem}
.crit input{width:64px}
.stat{display:flex;justify-content:space-between;gap:10px;padding-block:6px;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.stat:last-child{border-bottom:none}
pre.report{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--body);font-size:.88rem;line-height:1.8;margin:0;max-height:480px;overflow:auto}
.bars{display:flex;flex-direction:column;gap:6px}
.bars .b{display:grid;grid-template-columns:minmax(90px,1fr) 3fr auto;gap:8px;align-items:center;font-size:.85rem}
.bars .b i{display:block;height:10px;border-radius:5px;background:var(--palm)}

@media (min-width:560px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.cols{grid-template-columns:minmax(0,1fr)}.row.src{grid-template-columns:minmax(0,1fr) 72px 34px}.row.src .srcin{grid-column:1/-1;order:5}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
#view{display:flex;flex-direction:column;gap:16px}

/* دائرة الشرح */
.lbl{display:block}
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--saffron);color:var(--saffron);font-size:.58rem;font-weight:700;line-height:1;cursor:help;margin-inline-start:5px;vertical-align:middle;user-select:none;opacity:.85;transition:background .2s,color .2s,transform .2s}
.info::after{content:"";position:absolute;inset:-9px}
.info:hover,.info:focus-visible{background:var(--saffron);color:var(--bg);outline:none;opacity:1;transform:scale(1.15)}
.tip{position:fixed;z-index:90;background:var(--fg);color:var(--bg);border-radius:12px;padding:10px 12px;font-size:.86rem;line-height:1.75;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none;font-weight:400}
.more{font-size:.88rem}
.more summary{cursor:pointer;color:var(--palm);font-weight:600;padding:4px 0}