/* Muhkam partner portal. Brand tokens v2: paper / ink / one loud orange, square corners, no native widgets. */
:root {
  --ink:#141110; --ink-2:#3A3330; --mute:#6E6663; --faint:#A39B96;
  --line:#E6E0DC; --line-2:#CFC7C2; --paper:#FAF7F5; --bg:#FDFBFA;
  --orange:#F0530C; --orange-text:#C43F06; --orange-soft:#FEF3EC; --green:#2E7D4F; --green-soft:#F1F8F3;
  --side:#141110;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font:14px/1.7 "IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; color:inherit; }
a { color:inherit; }
.num { font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.muted { color:var(--mute); }
.small { font-size:12px; }
[hidden] { display:none !important; }

/* ---------- login ---------- */
.login { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login .art { background:var(--ink); color:var(--paper); padding:48px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.login .art h1 { font-size:40px; line-height:1.2; margin:0 0 12px; max-width:420px; }
.login .art h1 span { color:var(--orange); }
.login .art p { color:#D9D2CE; max-width:400px; margin:0; font-size:15px; }
.login .art .cube { position:absolute; left:-60px; bottom:-40px; width:380px; opacity:.9; }
.login .art .foot { font-family:"IBM Plex Sans",sans-serif; font-size:11px; letter-spacing:.08em; color:#8E8783; direction:ltr; text-align:right; position:relative; }
.login .form { display:flex; align-items:center; justify-content:center; padding:32px; }
.login .box { width:100%; max-width:360px; }
.login .box h2 { margin:0 0 4px; font-size:24px; }
.login .box p { margin:0 0 22px; color:var(--mute); }
.lockup { width:140px; display:block; direction:ltr; }

.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink-2); }
.input { width:100%; height:46px; border:1.5px solid var(--line-2); background:#fff; padding:0 14px; outline:none; border-radius:0; transition:border-color .15s; }
.input:focus { border-color:var(--ink); }
textarea.input { height:auto; min-height:110px; padding:10px 14px; resize:vertical; line-height:1.7; }
.input.ltr { direction:ltr; text-align:left; font-family:"IBM Plex Mono",monospace; letter-spacing:.04em; }
.phone-row { display:flex; direction:ltr; }
.phone-row .plus { height:46px; width:46px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line-2); border-right:none; background:var(--paper); font-family:"IBM Plex Mono",monospace; }
.code-input { font-size:26px !important; text-align:center !important; letter-spacing:.5em !important; height:58px !important; }
.err { color:#B3261E; font-size:13px; min-height:20px; margin:-4px 0 10px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font-weight:600; cursor:pointer; border-radius:0; white-space:nowrap; text-decoration:none; font-size:13.5px; }
.btn:hover { background:#000; }
.btn.o { background:var(--orange); border-color:var(--orange); }
.btn.o:hover { background:#D94A09; }
.btn.g { background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn.g:hover { border-color:var(--ink); }
.btn.block { width:100%; height:48px; font-size:15px; }
.btn[disabled] { opacity:.5; cursor:default; }
.link { background:none; border:none; padding:0; color:var(--orange-text); cursor:pointer; font-weight:600; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--side); color:#D9D2CE; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.side .brand { display:flex; align-items:center; gap:10px; padding:20px 20px 18px; border-bottom:1px solid #2A2522; }
.side .brand svg { width:30px; height:30px; }
.side .brand b { color:#fff; font-size:17px; display:block; line-height:1.1; }
.side .brand span { font-size:11px; color:#8E8783; }
.side nav { padding:10px 0; flex:1; overflow:auto; }
.side nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#BDB5B1; text-decoration:none; cursor:pointer; font-size:14px; border-right:3px solid transparent; }
.side nav a i { width:7px; height:7px; background:#3A3330; display:block; flex:none; }
.side nav a:hover { color:#fff; background:#1B1716; }
.side nav a.on { background:#231E1C; color:#fff; border-right-color:var(--orange); }
.side nav a.on i { background:var(--orange); }
.side nav a .b { margin-right:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; background:var(--orange); color:#fff; padding:0 7px; line-height:18px; }
.side .me { padding:16px 20px; border-top:1px solid #2A2522; font-size:12.5px; }
.side .me b { color:#fff; display:block; }
.side .me button { background:none; border:none; color:#8E8783; padding:0; cursor:pointer; font-size:12px; margin-top:4px; }
.side .me button:hover { color:#fff; }

.main { padding:26px 32px 60px; min-width:0; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.top h1 { margin:0; font-size:24px; line-height:1.3; }
.top .sub { color:var(--mute); font-size:13px; }
.top .actions { display:flex; gap:8px; flex-wrap:wrap; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.kpi { background:#fff; border:1px solid var(--line); padding:14px 16px; }
.kpi.hl { border-top:3px solid var(--orange); }
.kpi .l { font-size:12px; color:var(--mute); }
.kpi .v { font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:500; direction:ltr; text-align:right; line-height:1.4; white-space:nowrap; }
.kpi .v small { font-size:12px; color:var(--mute); }
.kpi .d { font-size:12px; color:var(--mute); }
.kpi .d.up { color:var(--green); }

.grid { display:grid; grid-template-columns:1.6fr 1fr; gap:12px; margin-bottom:14px; }
.panel { background:#fff; border:1px solid var(--line); margin-bottom:14px; min-width:0; }
.grid .panel { margin-bottom:0; }
.panel > h3 { margin:0; padding:14px 16px 10px; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panel > h3 span { font-weight:400; color:var(--mute); font-size:12px; }
.panel .pad { padding:0 16px 16px; }
.empty { padding:28px 16px; color:var(--mute); text-align:center; }

.chart { display:flex; align-items:flex-end; gap:10px; height:160px; border-bottom:1px solid var(--line); padding:0 4px; direction:ltr; }
.chart .c { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; height:100%; position:relative; }
.chart .c i { display:block; min-height:0; }
.chart .c i.a { background:var(--ink); }
.chart .c i.b { background:var(--orange); }
.chart .c .tip { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--mute); white-space:nowrap; opacity:0; transition:opacity .15s; }
.chart .c:hover .tip { opacity:1; }
.chart-x { display:flex; gap:10px; direction:ltr; padding:4px 4px 0; }
.chart-x span { flex:1; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--faint); }
.legend { display:flex; gap:16px; font-size:12px; color:var(--mute); margin-top:10px; }
.legend i { display:inline-block; width:9px; height:9px; margin-left:6px; }

.feed { list-style:none; margin:0; padding:0 16px 8px; }
.feed li { display:grid; grid-template-columns:10px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.55; }
.feed li:last-child { border-bottom:none; }
.feed li i { width:7px; height:7px; background:var(--orange); margin-top:7px; display:block; }
.feed li i.k-payout, .feed li i.k-client { background:var(--green); }
.feed li i.k-ticket, .feed li i.k-note { background:var(--ink); }
.feed li span { color:var(--faint); font-size:11.5px; display:block; }

.tbl { width:100%; overflow-x:auto; }
table.t { width:100%; border-collapse:collapse; font-size:13.5px; }
table.t th { text-align:right; font-weight:600; color:var(--mute); font-size:12px; padding:9px 12px; border-bottom:1.5px solid var(--ink); white-space:nowrap; }
table.t td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tr:last-child td { border-bottom:none; }
table.t td.n { font-family:"IBM Plex Mono",monospace; direction:ltr; text-align:right; white-space:nowrap; }
table.t tr.click { cursor:pointer; }
table.t tr.click:hover td { background:var(--paper); }
.pill { white-space:nowrap; display:inline-block; font-size:11.5px; padding:1px 9px; font-weight:600; border:1px solid; }
.pill.ok { color:var(--green); border-color:#B9D6C4; background:var(--green-soft); }
.pill.wip { color:var(--orange-text); border-color:#F6C3A8; background:var(--orange-soft); }
.pill.new { color:var(--ink-2); border-color:var(--line-2); background:var(--paper); }
.pill.dark { color:#fff; border-color:var(--ink); background:var(--ink); }
.pill.bad { color:#8A1C14; border-color:#E8B4AE; background:#FCF1EF; }
.prog { height:6px; background:var(--line); width:90px; display:inline-block; vertical-align:middle; margin-left:8px; }
.prog i { display:block; height:100%; background:var(--orange); }

.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1.5px solid var(--line-2); background:#fff; padding:5px 12px; cursor:pointer; font-size:13px; }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip .num { font-size:12px; }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.card { background:#fff; border:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:6px; }
.card h4 { margin:0; font-size:15px; }
.card .k { font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--orange-text); text-transform:uppercase; direction:ltr; text-align:right; }
.card p { margin:0; color:var(--ink-2); font-size:13px; }
.card .foot { margin-top:auto; padding-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

.quote { background:#fff; border:1px solid var(--line); padding:16px; margin-bottom:12px; }
.quote.ready { border-right:3px solid var(--orange); }
.quote .hd { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.quote h4 { margin:0; font-size:16px; }
.quote .prices { display:flex; gap:24px; margin:12px 0 6px; flex-wrap:wrap; }
.quote .prices div .l { font-size:12px; color:var(--mute); }
.quote .prices div .v { font-family:"IBM Plex Mono",monospace; font-size:20px; direction:ltr; text-align:right; }
.quote .req { white-space:pre-wrap; color:var(--ink-2); font-size:13px; background:var(--paper); padding:10px 12px; margin-top:10px; }

.note { background:var(--paper); border-right:3px solid var(--orange); padding:12px 14px; font-size:13px; color:var(--ink-2); margin-bottom:14px; }

/* ---------- sheet (modal) ---------- */
.scrim { position:fixed; inset:0; background:rgba(20,17,16,.45); z-index:40; display:flex; align-items:center; justify-content:center; padding:16px; }
.sheet { background:#fff; width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; }
.sheet .hd { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.sheet .hd h3 { margin:0; font-size:17px; }
.sheet .hd button { background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--mute); padding:4px; }
.sheet .bd { padding:18px 20px 6px; }
.sheet .ft { padding:12px 20px 18px; display:flex; gap:8px; justify-content:flex-start; }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; z-index:60; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:calc(100vw - 32px); }
.toast.bad { background:#8A1C14; }

.mbar { display:none; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .login { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .login .art { padding:28px 22px 30px; min-height:auto; }
  .login .art h1 { font-size:30px; margin-top:34px; }
  .login .art .cube { width:200px; left:-70px; bottom:-90px; opacity:.35; }
  .login .art h1 { margin-top:26px; }
  .login .art .foot { display:none; }
  .shell { grid-template-columns:1fr; }
  .side { display:none; }
  .mbar { display:flex; position:sticky; top:0; z-index:30; background:var(--side); color:#fff; align-items:center; justify-content:space-between; padding:10px 16px; }
  .mbar .brand { display:flex; align-items:center; gap:8px; }
  .mbar svg { width:24px; height:24px; }
  .mbar button { background:none; border:1px solid #3A3330; color:#D9D2CE; padding:4px 10px; font-size:12px; }
  .mnav { display:flex; overflow-x:auto; gap:0; background:var(--side); position:sticky; top:48px; z-index:29; scrollbar-width:none; }
  .mnav::-webkit-scrollbar { display:none; }
  .mnav a { flex:none; color:#BDB5B1; padding:10px 14px; font-size:13px; text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .mnav a.on { color:#fff; border-bottom-color:var(--orange); }
  .mnav a .b { font-family:"IBM Plex Mono",monospace; font-size:10.5px; background:var(--orange); color:#fff; padding:0 5px; margin-right:4px; }
  .main { padding:18px 14px 50px; }
  .top h1 { font-size:20px; }
  .kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi { padding:11px 12px; }
  .kpi .v { font-size:19px; }
  .grid { grid-template-columns:1fr; }
  .chart { height:130px; gap:6px; }
  .chart-x { gap:6px; }
  /* tables become stacked rows */
  table.t.stack thead { display:none; }
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display:block; width:100%; }
  table.t.stack tr { padding:10px 14px; border-bottom:1px solid var(--line); }
  table.t.stack td { border:none; padding:3px 0; display:flex; justify-content:space-between; gap:12px; text-align:left; }
  table.t.stack td::before { content:attr(data-l); color:var(--mute); font-size:12px; font-weight:500; text-align:right; font-family:"IBM Plex Sans Arabic",sans-serif; letter-spacing:0; }
  table.t.stack td.n { text-align:left; }
  table.t.stack td.first { font-size:15px; font-weight:600; }
  table.t.stack td.first::before { content:none; }
  .scrim { align-items:flex-end; padding:0; }
  .sheet { max-width:none; max-height:88vh; }
}
@media (min-width: 901px) { .mnav { display:none; } }

/* materials library */
.card.mat video { width:100%; aspect-ratio:9/16; max-height:420px; background:#000; object-fit:contain; display:block; }
.card.mat .slides { display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
.card.mat .slides img { height:180px; width:auto; display:block; border:1px solid var(--line); }
.card.mat .docthumb { width:100%; max-height:220px; object-fit:cover; object-position:top; border:1px solid var(--line); }
.card.mat .msg { white-space:pre-wrap; background:var(--paper); border-right:3px solid var(--orange); padding:10px 12px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.card.mat .foot .btn { height:36px; padding:0 12px; font-size:12.5px; }

/* AI partner assistant */
.ai-btn { position:fixed; bottom:20px; left:20px; z-index:35; display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border:none; padding:13px 18px; font:600 14px "IBM Plex Sans Arabic",sans-serif; cursor:pointer; box-shadow:6px 6px 0 var(--orange); }
.ai-btn:hover { background:#000; }
.ai-dot { width:9px; height:9px; background:var(--orange); display:block; animation:aiPulse 2s infinite; }
@keyframes aiPulse { 50% { opacity:.35; } }
.ai-box { position:fixed; bottom:20px; left:20px; z-index:36; width:400px; height:min(620px, calc(100vh - 40px)); background:#fff; border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--orange); display:flex; flex-direction:column; }
.ai-hd { background:var(--ink); color:#fff; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ai-hd b { display:block; font-size:15px; } .ai-hd span { font-size:11.5px; color:#BDB5B1; }
.ai-hd-a { display:flex; gap:4px; }
.ai-x { background:none; border:1px solid #3A3330; color:#D9D2CE; width:30px; height:30px; cursor:pointer; font-size:16px; line-height:1; }
.ai-x:hover { color:#fff; border-color:#8E8783; }
.ai-log { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.ai-m { max-width:88%; padding:9px 12px; font-size:13.5px; line-height:1.75; word-wrap:break-word; overflow-wrap:anywhere; }
.ai-m.assistant { align-self:flex-start; background:#fff; border:1px solid var(--line); border-right:3px solid var(--orange); }
.ai-m.user { align-self:flex-end; background:var(--ink); color:#fff; }
.ai-m.err { border-right-color:#B3261E; color:#8A1C14; }
.ai-m a { color:var(--orange-text); font-weight:600; direction:ltr; unicode-bidi:isolate; }
.ai-m.typing { display:flex; gap:5px; padding:13px 14px; }
.ai-m.typing i { width:7px; height:7px; background:var(--faint); display:block; animation:aiPulse 1s infinite; }
.ai-m.typing i:nth-child(2) { animation-delay:.2s; } .ai-m.typing i:nth-child(3) { animation-delay:.4s; }
.ai-hints { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; border-top:1px solid var(--line); background:#fff; }
.ai-hints .chip { font-size:12px; padding:4px 10px; }
.ai-in { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:#fff; align-items:flex-end; }
.ai-in textarea { flex:1; resize:none; border:1.5px solid var(--line-2); padding:9px 11px; font:14px/1.5 "IBM Plex Sans Arabic",sans-serif; outline:none; max-height:120px; border-radius:0; }
.ai-in textarea:focus { border-color:var(--ink); }
.ai-in .btn { height:40px; }
@media (max-width: 900px) {
  .ai-btn { bottom:14px; left:14px; padding:11px 14px; font-size:13px; }
  .ai-box { inset:0; width:auto; height:auto; border:none; box-shadow:none; }
}