/* Booktino platform — layout: sidebar (inline-start) + top bar on desktop, bottom tab bar on phones.
   Type and palette follow booktino.net; the four-colour band comes from the riso covers. */
:root{
  --bg:#F3F3F6; --surface:#FFFFFF; --surface-2:#ECECF0; --line:#D9D9DE;
  --ink:#111112; --ink-2:#55565C; --ink-3:#86878E;
  --accent:#2340C9; --accent-ink:#FFFFFF; --accent-soft:#E0E5FA;
  --c-blue:#2340C9; --c-yellow:#E6A419; --c-red:#D9475C; --c-green:#1F7A5A; --c-pink:#EAA3B0;
  --side:#111112; --side-ink:#F1F1F3; --side-ink-2:#9A9BA3; --side-hover:#1F1F24;
  --done:#1F7A5A; --done-soft:#DCEFE6;
  --active:#9A6A00; --active-soft:#FBEFD3;
  --late:#C3364B; --late-soft:#FBE1E5;
  --blocked:#9B3550; --blocked-soft:#F7DDE3;
  --shadow:0 1px 2px rgba(17,17,18,.06),0 6px 20px rgba(17,17,18,.08);
  --f:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --side-w:248px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111114; --surface:#1A1A1F; --surface-2:#232329; --line:#2C2C33;
  --ink:#F1F1F3; --ink-2:#A3A4AB; --ink-3:#74757C;
  --accent:#7F97FF; --accent-ink:#0D0E14; --accent-soft:#1E2550;
  --c-blue:#7F97FF; --c-yellow:#F0B93E; --c-red:#EE6B7E; --c-green:#4FB58C;
  --side:#0B0B0D; --side-hover:#18181C;
  --done:#4FB58C; --done-soft:#16302A; --active:#F0B93E; --active-soft:#3A2E12;
  --late:#F07A8C; --late-soft:#3D1C24; --blocked:#EAA3B0; --blocked-soft:#38212A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.3); color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
a{color:var(--accent)}

/* shell */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.side-brand{padding:22px 20px 18px;display:flex;flex-direction:column;gap:6px}
.side-brand .logo{height:34px;width:auto;color:var(--side-ink);display:block}
.side-brand span{font-size:12px;color:var(--side-ink-2);letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1;overflow-y:auto}
.nav a,.nav .soonitem{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;color:var(--side-ink);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--side-hover)}
.nav a[aria-current="page"]{background:var(--side-hover);box-shadow:inset 3px 0 0 var(--c-yellow)}
[dir="rtl"] .nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--c-yellow)}
.nav svg{width:18px;height:18px;flex:none;opacity:.9}
.nav .sep{font-size:11.5px;color:var(--side-ink-2);padding:16px 12px 4px;letter-spacing:.03em}
.nav .soonitem{color:var(--side-ink-2);cursor:default}
.nav .tag{margin-inline-start:auto;font-size:10.5px;border:1px solid #3a3a42;border-radius:99px;padding:0 7px;color:var(--side-ink-2)}
.side-foot{padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #26262c;display:flex;gap:8px;align-items:center}
.side-foot button{background:transparent;border:1px solid #33333a;color:var(--side-ink);border-radius:8px;height:32px;padding:0 10px;font-size:13px}
.side-foot button:hover{background:var(--side-hover)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:12px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.topbar h1{font-size:19px;font-weight:700;margin:0;margin-inline-end:auto;display:flex;align-items:baseline;gap:10px;min-width:0}
.topbar h1 small{font-size:13px;color:var(--ink-3);font-weight:400}
.m-logo{display:none}
select.year,.btn,.search{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);padding:0 12px}
.search{width:240px;max-width:100%}
.btn{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--late);border-color:var(--late-soft)}
.btn.small{height:30px;padding:0 10px;font-size:13px}
.btn.ghost{border-color:transparent;background:transparent}
.content{padding-block:22px 90px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px;max-width:1360px;width:100%}

/* bottom bar (phones) */
.tabbar{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .m-logo{display:block;height:22px;width:auto;color:var(--ink)}
  .topbar h1{font-size:16px}
  .topbar h1 small{display:none}
  .search{width:100%;order:9}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 6px;font-size:11px;color:var(--ink-3);text-decoration:none}
  .tabbar a[aria-current="page"]{color:var(--accent)}
  .tabbar svg{width:22px;height:22px}
  .content{padding-inline:16px}
}

/* blocks */
.notice{border:1px dashed var(--active);background:var(--active-soft);border-radius:var(--r);padding:10px 14px;font-size:13.5px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.panel h2{font-size:15px;font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel h2 .hint{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-inline-start:auto}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media (max-width:1000px){.g-2{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.kpi .l{color:var(--ink-3);font-size:12.5px}
.kpi .v{font-size:26px;font-weight:700;line-height:1.3}
.kpi .v.sm{font-size:21px}
.kpi .s{color:var(--ink-2);font-size:12.5px}
.kpi.warn .v{color:var(--late)}
.ring{display:flex;align-items:center;gap:14px}
.ring svg{flex:none}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;position:relative}
.bar>i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent);border-radius:99px}
.bar.done>i{background:var(--done)} .bar.late>i{background:var(--late)} .bar.blocked>i{background:var(--c-pink)}

.pipe{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pcol{background:var(--bg);border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:120px;flex:1 1 0;min-width:92px}
.pcol.has{flex:4 1 0;min-width:220px}
.pcol .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.pcol h3{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between}
.pcol h3 b{color:var(--ink)}
.pcol.fin{background:var(--done-soft)} .pcol.fin h3{color:var(--done)}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 8px;font-size:12.5px;text-align:start;display:flex;flex-direction:column;gap:4px;width:100%}
.chip:hover{border-color:var(--accent)}
.chip .t{font-weight:500;line-height:1.35}
.chip.late{border-inline-start:3px solid var(--late)}
.chip.blocked{border-inline-start:3px solid var(--c-pink)}
.chip .bar{height:4px}

.list{display:flex;flex-direction:column}
.row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);background:none;border-inline:0;border-top:0;width:100%;text-align:start}
.row:last-child{border-bottom:0}
.row .main{flex:1;min-width:0}
.row .main b{font-weight:600}
.meta{color:var(--ink-3);font-size:12.5px}
.empty{color:var(--ink-3);font-size:13.5px;padding:8px 0;margin:0}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:1px 9px;border-radius:99px;white-space:nowrap;font-weight:500}
.p-done{background:var(--done-soft);color:var(--done)} .p-active{background:var(--active-soft);color:var(--active)}
.p-late{background:var(--late-soft);color:var(--late)} .p-blocked{background:var(--blocked-soft);color:var(--blocked)}
.p-todo{background:var(--surface-2);color:var(--ink-2)}
.date-box{flex:none;width:48px;text-align:center;border:1px solid var(--line);border-radius:8px;line-height:1.15;padding:4px 0}
.date-box b{display:block;font-size:16px}
.date-box span{font-size:11px;color:var(--ink-3)}
.date-box.late{border-color:var(--late);color:var(--late)}

/* matrix */
.scroll{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%}
.mx th,.mx td{padding:5px;text-align:center;border-bottom:1px solid var(--line)}
.mx thead th{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface);white-space:nowrap}
.mx th.bk,.mx td.bk{text-align:start;min-width:230px;position:sticky;inset-inline-start:0;background:var(--surface);z-index:1}
.mx td.bk button{border:0;background:none;padding:0;text-align:start;width:100%}
.mx td.bk .t{font-weight:600;display:block;line-height:1.4}
.cell{width:100%;min-width:64px;height:42px;border-radius:8px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;position:relative}
.cell:hover{border-color:var(--ink-3)}
.cell.todo{background:var(--surface-2);color:var(--ink-3);font-weight:400}
.cell.done{background:var(--done);color:#fff}
.cell.late{box-shadow:inset 0 0 0 2px var(--late)}
.cell.blocked{background:var(--blocked-soft);color:var(--blocked)}
.cell.na{background:repeating-linear-gradient(-45deg,transparent 0 5px,var(--surface-2) 5px 7px);color:var(--ink-3);font-weight:400}
.cell .who{position:absolute;bottom:1px;inset-inline:0;font-size:9.5px;font-weight:400;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.tot{min-width:110px} .tot .n{font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--ink-2);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:12px;border-radius:3px;display:inline-block}

/* timeline */
.tl{min-width:1000px}
.tl-head,.tl-row{display:grid;grid-template-columns:240px 1fr;align-items:center}
.tl-months{display:grid;grid-template-columns:repeat(15,1fr);font-size:12px;color:var(--ink-3)}
.tl-months div{padding:4px 6px;border-inline-start:1px solid var(--line)}
.tl-months div.yr{color:var(--ink);font-weight:600}
.tl-row{border-top:1px solid var(--line);min-height:46px}
.tl-row.sub{min-height:26px;border-top:0}
.tl-name{padding:6px 0;padding-inline-end:10px;min-width:0}
.tl-name button{border:0;background:none;padding:0;font-weight:600;text-align:start}
.tl-row.sub .tl-name{font-size:12px;color:var(--ink-2);padding-inline-start:14px}
.tl-track{position:relative;height:100%;min-height:inherit}
.tl-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr);pointer-events:none}
.tl-grid i{border-inline-start:1px solid var(--line)}
.tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:18px;border-radius:5px;background:var(--accent-soft);overflow:hidden;min-width:6px}
.tl-bar>i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent)}
.tl-bar.late{outline:2px solid var(--late)} .tl-bar.done>i{background:var(--done)} .tl-bar.blocked{outline:2px dashed var(--c-pink)}
.tl-row.sub .tl-bar{height:10px}
.tl-bar.s-done{background:var(--done)} .tl-bar.s-active{background:var(--c-yellow)} .tl-bar.s-late{background:var(--late)}
.tl-bar.s-todo{background:var(--surface-2);outline:1px solid var(--line)} .tl-bar.s-blocked{background:var(--c-pink)}
.tl-line{position:absolute;inset-block:0;width:0;border-inline-start:2px solid var(--late);z-index:2}
.tl-fair{position:absolute;inset-block:0;width:0;border-inline-start:2px dashed var(--accent);z-index:1}
.tl-flags{position:relative;height:28px}
.tl-flag{position:absolute;top:2px;font-size:11px;white-space:nowrap;background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:4px}
.tl-flag.today{background:var(--late-soft);color:var(--late)}

/* finance */
.stack{height:14px;border-radius:99px;background:var(--surface-2);display:flex;overflow:hidden}
.stack i{display:block;height:100%}
.hb{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:13px}
.hb .bar{height:10px}
.ft th{font-size:12.5px;color:var(--ink-3);font-weight:500;text-align:start;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ft td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ft td.amt{font-weight:600;white-space:nowrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 12px;font-size:13px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer}

/* soon */
.soon{display:grid;place-items:center;text-align:center;padding:56px 20px;gap:10px}
.soon .badge{display:inline-flex;gap:4px}
.soon .badge i{width:22px;height:6px;border-radius:2px}
.soon h2{margin:6px 0 0;font-size:19px}
.soon p{max-width:52ch;color:var(--ink-2);margin:0}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,10,14,.4);z-index:40}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(740px,100%);background:var(--surface);z-index:41;display:flex;flex-direction:column;box-shadow:var(--shadow);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.dr-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dr-head h2{font-size:17px;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line)}
.tab{border:0;background:none;padding:10px 14px;border-bottom:2px solid transparent;color:var(--ink-2);font-weight:500;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.dr-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.dr-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.dr-foot .sp{flex:1}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2);min-width:0}
.in{height:38px;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:0 10px;width:100%;min-width:0;unicode-bidi:plaintext;text-align:start}
textarea.in{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
.st-card{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.st-card.na{opacity:.6}
.st-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-top b{font-size:14px;font-weight:600;min-width:120px}
.st-top .sp{flex:1}
.pctrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pctrow input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}
.pv{font-weight:700;width:52px;text-align:center}
.quick{display:flex;gap:4px}
.quick button{border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:12px;padding:2px 8px}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.st-grid{grid-template-columns:minmax(0,1fr)}}
.cost-row{display:grid;grid-template-columns:120px minmax(0,1fr) 110px 140px auto auto;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){.cost-row{grid-template-columns:1fr 1fr}}
.sum-line{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.sum-line b{color:var(--ink)}

.pop{position:fixed;z-index:45;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);width:300px;max-width:calc(100vw - 24px);padding:14px;display:flex;flex-direction:column;gap:10px}
.pop h4{margin:0;font-size:14px}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:8px 16px;border-radius:9px;z-index:60;font-size:13.5px}
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap}

/* login */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px}
.login form{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.login .logo{height:40px;width:auto;color:var(--ink);align-self:center;margin:10px 0 4px}
@media (prefers-reduced-motion:no-preference){.drawer.enter{animation:slide .18s ease-out}@keyframes slide{from{opacity:.5;transform:translateY(8px)}}}

/* phase two: accounting, people, contracts */
tr.click,.row.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px;background:var(--c-red)}
.dot.income{background:var(--c-green)}
.ft td.amt.income{color:var(--done)}
.mchart{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:170px;align-items:end;padding-top:6px}
.mcol{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:0}
.mbars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--line)}
.mbars i{display:block;width:40%;max-width:14px;border-radius:3px 3px 0 0;min-height:1px}
.mbars i.e{background:var(--c-red)} .mbars i.i{background:var(--c-green)}
.mcol span{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.pcard{display:flex;gap:12px;align-items:flex-start;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;width:100%}
.pcard:hover{border-color:var(--accent)}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:16px}
.avatar.org{border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.pc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.pc-main b{font-weight:600;line-height:1.4}
.chips2{display:flex;flex-wrap:wrap;gap:4px}
.chips2 i{font-style:normal;font-size:11.5px;background:var(--surface-2);color:var(--ink-2);border-radius:99px;padding:0 8px}
.chips3{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.rolepick{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.f.full>div,.f>.rolepick{font-size:13.5px}
a.kpi:hover{border-color:var(--accent)}

/* single quiet accent instead of the four-colour band */
.soon .badge{display:none}