/* ============================================================
   Basira portal: the look approved as "F"
   ------------------------------------------------------------
   Navy sidebar on the left (right in Arabic), cream page, warm white cards with a thin rule, colour
   pills for people, projects, labels and priority. Laptop first; on a phone the sidebar becomes a
   compact top bar with icons and a "Menu" button. Dark mode follows the device, with the main
   site's dark tokens. Logical properties throughout so Arabic (dir=rtl) mirrors itself.
   ============================================================ */
:root {
  --bg: #F7F4EE; --card: #FFFDF9; --rule: #DDD6C8; --ink: #0C2B4B; --ink2: #3E5875; --muted: #63676F; --red: #B8322A; --blue: #1E5596;
  --side: #0C2B4B; --side-on: #1A4675; --side-t: #C9D3DE; --side-ton: #F7F4EE; --badge: #B8322A;
  --wash: #EFEAE1; --soft: #F3EFE7; --focus: #1E5596;
  --c-blue-bg: #DCE8F5; --c-blue: #1E5596; --c-red-bg: #F7E3DF; --c-red: #8F221B; --c-gold-bg: #F3E9D2; --c-gold: #6B5320;
  --c-lavender-bg: #E6E1F7; --c-lavender: #2E2B52; --c-mint-bg: #DDF1E7; --c-mint: #145B3D;
  --shadow: 0 1px 2px rgba(12,43,75,.05), 0 10px 28px -18px rgba(12,43,75,.28);
  --r: 10px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C2B4B; --card: #0F3152; --rule: #2F4C6C; --ink: #F7F4EE; --ink2: #C9D3DE; --muted: #A9B4C2; --red: #E67A70; --blue: #8DB6EA;
    --side: #08213A; --side-on: #1A4675; --wash: #143D66; --soft: #11365C; --focus: #8DB6EA;
    --c-blue-bg: #1D4A78; --c-blue: #CFE2F7; --c-red-bg: #5A2A2C; --c-red: #F6C9C2; --c-gold-bg: #4E4429; --c-gold: #F1DFAF;
    --c-lavender-bg: #3A3866; --c-lavender: #E0DBFA; --c-mint-bg: #1D4B3E; --c-mint: #C5EEDA;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 14px 30px -18px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 15.5px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.25; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-family: "Noto Naskh Arabic", var(--serif); font-weight: 600; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
.ti { font-size: 1.15em; line-height: 1; vertical-align: -0.12em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--card); padding: 8px 12px; z-index: 100; border-radius: 6px; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .red { color: var(--red); }
.grow { flex: 1; }

/* ---------------------------------------------------------------- the shell */
.shell { display: flex; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; width: 226px; flex: none; background: var(--side); color: var(--side-t); display: flex; flex-direction: column; padding: 18px 12px; z-index: 20; }
.side-brand { text-decoration: none; color: var(--side-ton); display: block; padding: 4px 10px 18px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .b-ar { font: 600 30px/1 "Noto Naskh Arabic", serif; color: inherit; }
.brand .b-en { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.side-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--side-t); text-decoration: none; font-weight: 500; position: relative; }
.side-nav a .ti { font-size: 20px; }
.side-nav a:hover { background: rgba(255,255,255,.06); color: var(--side-ton); }
.side-nav a.on { background: var(--side-on); color: var(--side-ton); }
.side-nav a.on::before { content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #E67A70; }
.side-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.side .badge, .bell .badge { margin-inline-start: auto; background: var(--badge); color: #fff; font: 600 11px/1 var(--sans); padding: 4px 6px; border-radius: 99px; min-width: 20px; text-align: center; }
.side-menu { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.search { position: relative; flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: 0 14px; }
.search .ti { color: var(--muted); }
.search input { border: 0 !important; background: none !important; outline: none !important; padding: 9px 0 !important; min-height: 0 !important; width: 100%; }
.q-res { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; max-height: 70vh; overflow: auto; z-index: 30; }
.q-res h3 { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.q-res a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.q-res a:hover, .q-res a:focus { background: var(--wash); }
.q-res a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-res small { color: var(--muted); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.demo-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--c-gold-bg); color: var(--c-gold); font: 600 12px/1.2 var(--sans); white-space: nowrap; }
.offline-note { margin: 0; padding: 10px 28px; background: var(--c-gold-bg); color: var(--c-gold); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.view { padding: 26px 28px 60px; outline: none; }
.page { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* ---------------------------------------------------------------- buttons, fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--wash); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.warn { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--rule)); }
.btn.sm { padding: 5px 10px; font-size: 13.5px; }
.btn.big { padding: 16px 28px; font-size: 18px; }
.btn.wide { width: 100%; }
.btn.wa { background: #1F8F55; border-color: #1F8F55; color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.focus.on { background: var(--c-lavender-bg); color: var(--c-lavender); border-color: transparent; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; color: var(--ink2); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-btn.sm { width: 28px; height: 28px; } .icon-btn.xs { width: 22px; height: 22px; font-size: 12px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.bell .badge { position: absolute; top: 2px; inset-inline-end: 0; padding: 3px 5px; min-width: 18px; font-size: 10px; }
.av-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 99px; }
.link { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.link:hover { text-decoration: underline; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld > span, .fld legend { font-size: 13px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; gap: 6px; padding: 0; }
.fld small, .hint { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.hint { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; min-height: 38px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 0; border-color: var(--focus); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 17px; height: 17px; }
.with-unit { display: flex; align-items: center; gap: 8px; } .with-unit em { font-style: normal; color: var(--muted); font-size: 13px; }
.fld.two { flex-direction: row; gap: 8px; } .fld.two label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.fld.inline { flex-direction: row; align-items: center; gap: 8px; }
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chk.big { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--soft); }
.chk.big > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .chk.big small { flex-basis: 100%; color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks .chk { padding: 6px 10px 6px 8px; border: 1px solid var(--rule); border-radius: 99px; background: var(--card); }
.checks .chk:has(input:checked) { background: var(--c-blue-bg); border-color: transparent; color: var(--c-blue); }
.seg { display: inline-flex; background: var(--wash); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg-b { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 500; color: var(--ink2); display: inline-flex; gap: 6px; align-items: center; }
.seg-b.on, .seg-b:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-b input { position: absolute; opacity: 0; pointer-events: none; }
.seg-b.pri-urgent.on { color: var(--red); } .wide-seg { display: flex; } .wide-seg .seg-b { flex: 1; justify-content: center; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.sw-ui { width: 42px; height: 24px; border-radius: 99px; background: var(--rule); position: relative; flex: none; transition: background .15s; }
.sw-ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 99px; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .sw-ui { background: #1F8F55; } .switch input:checked + .sw-ui::after { inset-inline-start: 21px; }
.switch input:focus-visible + .sw-ui { outline: 2px solid var(--focus); outline-offset: 2px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-end { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.row-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .row-form .fld { flex: 1; min-width: 200px; }
.form-err, .dlg-err { color: var(--red); margin: 0; font-size: 14px; }
.form-ok { color: #1F8F55; margin: 0; }
.ok-t { color: #1F8F55; display: flex; gap: 6px; align-items: center; } .warn-t { color: var(--red); display: flex; gap: 6px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------- cards, headings, pills */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.card.pad { padding: 24px; }
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; display: flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.page-head h1 .ti { color: var(--red); font-size: 26px; }
.page-head h1 small { font: 500 15px/1 var(--sans); color: var(--muted); margin-inline-start: 6px; }
.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-head h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.h-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--c-blue-bg); color: var(--c-blue); font-size: 15px; }
.sub-h { font: 600 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; display: flex; gap: 6px; align-items: center; }
html[dir="rtl"] .sub-h { letter-spacing: 0; font-family: "IBM Plex Sans Arabic", var(--sans); }
.count { font: 600 12px/1 var(--sans); background: var(--wash); color: var(--ink2); padding: 4px 8px; border-radius: 99px; }
.count.red { background: var(--c-red-bg); color: var(--c-red); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12.5px; font-weight: 500; line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--wash); color: var(--ink2); text-decoration: none; }
.pill .ti { font-size: 13px; }
.pill.person { padding: 2px 9px 2px 2px; } html[dir="rtl"] .pill.person { padding: 2px 2px 2px 9px; }
.c-blue { --cb: var(--c-blue-bg); --cf: var(--c-blue); } .c-red { --cb: var(--c-red-bg); --cf: var(--c-red); } .c-gold { --cb: var(--c-gold-bg); --cf: var(--c-gold); } .c-lavender { --cb: var(--c-lavender-bg); --cf: var(--c-lavender); } .c-mint { --cb: var(--c-mint-bg); --cf: var(--c-mint); }
.pill[class*="c-"] { background: var(--cb); color: var(--cf); }
.pill.muted { background: var(--wash); color: var(--muted); }
.pri-urgent { background: var(--c-red-bg) !important; color: var(--c-red) !important; } .pri-low { background: var(--wash); color: var(--muted); }
.st-todo { background: var(--wash); } .st-doing { background: var(--c-blue-bg); color: var(--c-blue); } .st-approval { background: var(--c-lavender-bg); color: var(--c-lavender); } .st-done { background: var(--c-mint-bg); color: var(--c-mint); }
.stuck-pill { background: var(--c-red-bg); color: var(--c-red); }
.av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: var(--cb); color: var(--cf); font: 600 12px/1 var(--sans); flex: none; letter-spacing: .02em; }
.av-xs { width: 20px; height: 20px; font-size: 9px; } .av-sm { width: 26px; height: 26px; font-size: 10.5px; } .av-lg { width: 42px; height: 42px; font-size: 15px; }
.avs { display: inline-flex; } .avs .av { box-shadow: 0 0 0 2px var(--card); } .avs .av + .av { margin-inline-start: -4px; }
.av.more { background: var(--wash); color: var(--ink2); }
.bar { display: block; height: 7px; border-radius: 99px; background: var(--wash); overflow: hidden; min-width: 40px; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 60%, #8DB6EA)); }
.bar.mini { width: 34px; height: 5px; display: inline-block; vertical-align: middle; }
.due { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.due.today { color: var(--blue); font-weight: 600; } .due.late { color: var(--red); font-weight: 600; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px; color: var(--muted); text-align: center; }
.empty .ti { font-size: 30px; color: var(--rule); } .empty p { margin: 0; max-width: 420px; }
.empty-s { color: var(--muted); padding: 14px; display: flex; gap: 8px; align-items: center; margin: 0; }
.note-box { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--cb); color: var(--cf); }
.note-box > .ti { font-size: 22px; margin-top: 2px; } .note-box p { margin: 4px 0 8px; } .note-box small { opacity: .8; }
.gentle { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--c-gold-bg); color: var(--c-gold); display: flex; gap: 8px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.p-grid.narrow { max-width: 620px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; background: var(--soft); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; }
.chip:hover { background: var(--wash); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 12.5px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; background: var(--wash); }
.lg.exam::before { background: var(--c-red-bg); border: 1px solid var(--red); } .lg.off::before { background: var(--c-lavender-bg); } .lg.task::before { background: var(--c-blue-bg); } .lg.meet::before { background: var(--c-gold-bg); } .lg.busy::before { background: var(--wash); border: 1px dashed var(--muted); }
.lg.lg-doing::before { background: var(--blue); } .lg.lg-approval::before { background: #6F64B8; } .lg.lg-todo::before { background: color-mix(in srgb, var(--blue) 25%, var(--rule)); }

/* ---------------------------------------------------------------- gate (sign in, first run) */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 500px at 10% -10%, var(--c-blue-bg), transparent), radial-gradient(900px 400px at 110% 110%, var(--c-red-bg), transparent), var(--bg); }
.gate-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--red); border-radius: var(--r); padding: 30px 30px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.gate-card .brand { color: var(--ink); margin-bottom: 6px; } .gate-card .brand .b-ar { font-size: 38px; }
.gate-card h1 { font-size: 26px; } .gate-card p { margin: 0; }
.gate-card .demo-tag { align-self: flex-start; }
.gate-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--cb); color: var(--cf); font-size: 26px; }
.gate-lang { margin-top: 14px; }
.gate .offline-note { position: fixed; top: 0; inset-inline: 0; justify-content: center; }
.lang-pick { display: flex; gap: 12px; } .lang-pick .btn { flex: 1; } .btn.ar { font-family: "IBM Plex Sans Arabic", var(--sans); }
.step-of { color: var(--muted); font-size: 13px; }
.dots { display: flex; gap: 6px; margin: 4px 0; } .dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--rule); } .dots span.on { background: var(--red); width: 22px; }

/* ---------------------------------------------------------------- My page */
.hello h1 { font-size: 34px; }
.hello .sub { margin: 6px 0 0; color: var(--ink2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hello .dot { color: var(--rule); }
.offday { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: var(--c-lavender-bg); color: var(--c-lavender); }
.offday > .ti { font-size: 28px; } .offday p { margin: 2px 0 0; opacity: .85; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); cursor: pointer; text-align: start; }
.tile:hover { border-color: var(--cf); }
.tile-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cb); color: var(--cf); font-size: 22px; }
.tile-n { font: 500 30px/1 var(--serif); } .tile-l { color: var(--ink2); font-size: 13.5px; }
.tile.hot .tile-n { color: var(--red); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 86px; width: 2px; background: var(--wash); }
.tl { display: grid; grid-template-columns: 74px 26px 1fr; gap: 0 12px; align-items: start; padding: 7px 0; position: relative; }
.tl time { font-weight: 600; font-size: 13.5px; text-align: end; display: flex; flex-direction: column; } .tl time small { color: var(--muted); font-weight: 400; }
.tl-dot { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--cb); color: var(--cf); font-size: 13px; z-index: 1; box-shadow: 0 0 0 3px var(--card); }
.tl b { display: block; font-weight: 600; } .tl small { color: var(--muted); } .tl a { color: var(--ink); text-decoration: none; } .tl a:hover b { text-decoration: underline; }
.tl.past { opacity: .5; } .tl.busy b { color: var(--ink2); }
.site-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--soft); border: 1px solid transparent; }
.site-item.lead { border-color: color-mix(in srgb, #1F8F55 35%, transparent); }
.si-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 17px; background: var(--c-blue-bg); color: var(--c-blue); }
.si-ic.s-lead { background: #D6F1E2; color: #146B3E; } .si-ic.s-payment { background: var(--c-gold-bg); color: var(--c-gold); } .si-ic.s-work { background: var(--c-lavender-bg); color: var(--c-lavender); }
.si-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .si-body a { color: var(--ink); font-weight: 500; text-decoration: none; } .si-body a:hover { text-decoration: underline; } .si-body small { color: var(--muted); }
.cd { color: #1F8F55; } .cd.late { color: var(--red); }
.mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini-col { background: var(--soft); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mini-col h3, .col h2 { font: 600 13px/1.2 var(--sans); display: flex; align-items: center; gap: 6px; color: var(--ink2); }
html[dir="rtl"] .mini-col h3, html[dir="rtl"] .col h2 { font-family: "IBM Plex Sans Arabic", var(--sans); }
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.news li, .comments li, .stuck-list li { display: flex; gap: 10px; align-items: flex-start; } .news p, .comments p { margin: 0; } .news li > div, .comments li > div { min-width: 0; flex: 1; }
.c-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; } .c-meta time { color: var(--muted); }
.at { color: var(--blue); font-weight: 600; }
.proj-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--soft); text-decoration: none; color: var(--ink); }
.pm:hover { background: var(--wash); }
.pm-ic, .pc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--cb); color: var(--cf); font-size: 19px; flex: none; }
.pm-body { flex: 1; display: flex; flex-direction: column; gap: 4px; } .pm-body small { color: var(--muted); }
.flash { animation: flash 1.2s; } @keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--c-gold-bg); } 100% { box-shadow: var(--shadow); } }

/* ---------------------------------------------------------------- task cards and rows */
.tcard { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-inline-start: 3px solid transparent; box-shadow: 0 1px 2px rgba(12,43,75,.06); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tcard[class*="pc-"] { border-inline-start-color: var(--pcol); }
.pc-blue { --pcol: #7FA7D6; } .pc-red { --pcol: #D99088; } .pc-gold { --pcol: #C9AC67; } .pc-lavender { --pcol: #9C93D6; } .pc-mint { --pcol: #6FBF97; }
.tcard.stuck { border-inline-start-color: var(--red); border-inline-start-width: 4px; background: color-mix(in srgb, var(--c-red-bg) 35%, var(--card)); }
.tc-top { display: flex; gap: 6px; align-items: flex-start; }
.tc-title { flex: 1; color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.35; }
.tc-title:hover { text-decoration: underline; }
.tc-move { margin: -6px -6px 0 0; width: 28px; height: 28px; } html[dir="rtl"] .tc-move { margin: -6px 0 0 -6px; }
.tc-meta, .tc-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tc-foot { font-size: 12.5px; color: var(--muted); gap: 12px; }
.tc-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.tc-ap { color: #6F64B8; } .tc-ap.ok { color: #1F8F55; } .tc-stuck { color: var(--red); font-weight: 600; font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; } .tc-site { color: var(--c-gold); }
.tlist { list-style: none; margin: 0; padding: 0; }
.trow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--wash); flex-wrap: wrap; }
.trow:last-child { border-bottom: 0; }
.tick { border: 0; background: none; color: var(--ink2); font-size: 20px; cursor: pointer; padding: 0; display: inline-grid; place-items: center; width: 26px; }
.tick:hover { color: #1F8F55; }
.tr-title { flex: 1; min-width: 180px; color: var(--ink); text-decoration: none; font-weight: 500; } .tr-title:hover { text-decoration: underline; }
.tr-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.trow.is-done .tr-title { text-decoration: line-through; color: var(--muted); } .trow.is-done .tick { color: #1F8F55; }
.trow.stuck .tr-title { color: var(--red); }
.trow.auto { opacity: .6; } .trow.auto .ti { color: var(--muted); }
.group + .group { margin-top: 14px; } .group h3 { font: 600 14px/1.2 var(--sans); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; color: var(--ink2); }
.group.auto { background: var(--soft); border-radius: var(--r); padding: 10px 12px; } .group.auto h3 small { font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------- board */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }
.filter select { min-height: 34px; padding: 5px 30px 5px 10px; border-radius: 99px; width: auto; max-width: 190px; font-size: 13.5px; }
html[dir="rtl"] .filter select { padding: 5px 10px 5px 30px; }
.filter select.set { background: var(--c-blue-bg); color: var(--c-blue); border-color: transparent; font-weight: 600; }
.search-f { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: 0 10px; }
.search-f input { border: 0 !important; min-height: 32px !important; padding: 4px 0 !important; outline: none !important; }
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.col { background: var(--soft); border: 1px solid var(--rule); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; transition: background .15s, box-shadow .15s; }
.col h2 { padding: 4px 4px 2px; } .col h2 small { font-weight: 400; color: var(--muted); } .col h2 .count { margin-inline-start: auto; }
.col-todo h2 .ti { color: var(--muted); } .col-doing h2 .ti { color: var(--blue); } .col-approval h2 .ti { color: #6F64B8; } .col-done h2 .ti { color: #1F8F55; }
.col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.col.over { background: var(--c-blue-bg); box-shadow: inset 0 0 0 2px var(--blue); }
.col-empty { color: var(--muted); text-align: center; font-size: 13px; margin: 18px 0; }
.col-done .tcard { opacity: .8; }
.tcard.dragging { opacity: .35; }
.tcard.ghost { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; box-shadow: 0 18px 40px -10px rgba(12,43,75,.45); opacity: .95; cursor: grabbing; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------------------------------------------------------------- the task panel */
.scrim { position: fixed; inset: 0; background: rgba(12,43,75,.28); z-index: 40; }
.panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(560px, 100vw); background: var(--bg); border-inline-start: 1px solid var(--rule); z-index: 50; display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(12,43,75,.35); animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: .4; } } html[dir="rtl"] .panel { animation-name: slide-r; } @keyframes slide-r { from { transform: translateX(-30px); opacity: .4; } }
.p-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--card); border-top: 4px solid var(--pcol, var(--red)); }
.p-head-l { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.p-body { flex: 1; overflow: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.p-title { font: 500 24px/1.25 var(--serif); border: 1px solid transparent !important; background: transparent !important; padding: 4px 6px !important; margin: -4px -6px 0; resize: none; overflow: hidden; }
html[dir="rtl"] .p-title { font-family: "Noto Naskh Arabic", var(--serif); font-weight: 600; }
.p-title:hover, .p-title:focus { border-color: var(--rule) !important; background: var(--card) !important; }
.plan { border: 1px dashed color-mix(in srgb, var(--blue) 50%, var(--rule)); border-radius: var(--r); padding: 10px 14px 12px; margin: 0; background: color-mix(in srgb, var(--c-blue-bg) 35%, transparent); }
.plan legend { font-weight: 600; display: flex; gap: 6px; align-items: center; padding: 0 4px; color: var(--blue); }
.plan > .hint:first-of-type { margin: 0 0 8px; }
.site-btn { align-self: flex-start; background: #1F8F55; color: #fff; border-color: #1F8F55; }
.p-sec h3 { font: 600 14px/1.2 var(--sans); display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .p-sec h3 small { color: var(--muted); font-weight: 400; }
html[dir="rtl"] .p-sec h3 { font-family: "IBM Plex Sans Arabic", var(--sans); }
.steps { list-style: none; margin: 0 0 8px; padding: 0; }
.steps li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.steps .step-t { border-color: transparent !important; background: transparent !important; min-height: 32px !important; padding: 4px 6px !important; }
.steps .step-t:hover, .steps .step-t:focus { border-color: var(--rule) !important; background: var(--card) !important; }
.steps li.done .step-t { text-decoration: line-through; color: var(--muted); }
.step-btns { display: flex; opacity: .35; } .steps li:hover .step-btns, .steps li:focus-within .step-btns { opacity: 1; }
.add-row { display: flex; gap: 8px; }
.files-mini { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.files-mini li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .files-mini small { color: var(--muted); }
.comments { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.composer { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; position: relative; }
.history { color: var(--muted); font-size: 12.5px; margin: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 12px; }
.p-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--card); flex-wrap: wrap; }
body.panel-open { overflow: hidden; }
.mention-box { position: absolute; bottom: 100%; inset-inline-start: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; z-index: 60; min-width: 220px; }
.mention-opt { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: start; }
.mention-opt.on, .mention-opt:hover { background: var(--c-blue-bg); color: var(--c-blue); }

/* ---------------------------------------------------------------- menus, dialogs, toasts */
.menu { position: fixed; z-index: 80; min-width: 220px; max-width: 360px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow), 0 20px 40px -20px rgba(12,43,75,.35); padding: 5px; }
.menu-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: start; }
.menu-item:hover, .menu-item:focus { background: var(--wash); outline: none; }
.menu-item.danger { color: var(--red); } .menu-item .end { margin-inline-start: auto; }
.menu-sep { height: 1px; background: var(--rule); margin: 4px 6px; }
.menu-head { padding: 8px 10px 6px; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.bell-menu { width: 380px; max-width: calc(100vw - 16px); padding: 0; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.bell-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow: auto; }
.note { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.note:hover { background: var(--wash); }
.note.unread { background: color-mix(in srgb, var(--c-blue-bg) 45%, transparent); } .note.unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--red); margin-inline-start: 6px; vertical-align: 2px; }
.n-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--c-blue-bg); color: var(--c-blue); }
.n-ic.k-stuck, .n-ic.k-lead { background: var(--c-red-bg); color: var(--c-red); } .n-ic.k-approval, .n-ic.k-approved { background: var(--c-lavender-bg); color: var(--c-lavender); } .n-ic.k-news { background: var(--c-gold-bg); color: var(--c-gold); } .n-ic.k-moved { background: var(--c-mint-bg); color: var(--c-mint); }
.n-txt { display: flex; flex-direction: column; min-width: 0; } .n-txt b { font-weight: 600; font-size: 14px; } .n-txt small { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .n-txt time { color: var(--muted); font-size: 12px; }
dialog.dlg { border: 1px solid var(--rule); border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 24px)); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(12,43,75,.5); max-height: calc(100vh - 40px); }
dialog.dlg.wide { width: min(720px, calc(100vw - 24px)); }
dialog.dlg::backdrop { background: rgba(12,43,75,.35); }
.dlg-form { display: flex; flex-direction: column; max-height: calc(100vh - 42px); }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--rule); background: var(--card); }
.dlg-head h2 { font-size: 20px; flex: 1; }
.dlg-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--c-blue-bg); color: var(--c-blue); }
.dlg-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.dlg-err { padding: 0 20px 6px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--card); }
.dlg-foot:empty { display: none; }
#toasts { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: calc(100vw - 36px); }
body.panel-open #toasts { inset-inline-end: auto; inset-inline-start: 18px; align-items: flex-start; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); max-width: 440px; animation: pop .2s ease-out; }
.toast .link { color: inherit; text-decoration: underline; margin-inline-start: 6px; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
.toast-bad { background: var(--red); color: #fff; } .toast-urgent { background: var(--c-red-bg); color: var(--c-red); border: 1px solid var(--red); }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; }
.way { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); cursor: pointer; position: relative; }
.way input { position: absolute; top: 12px; inset-inline-end: 12px; }
.way:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.way.off { opacity: .5; cursor: not-allowed; }
.way b { display: block; } .way small { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: block; }
.way-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cb); color: var(--cf); font-size: 18px; }
.way-pane { display: flex; flex-direction: column; gap: 12px; }
.meter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.meter .bar { flex: 1; min-width: 120px; } .meter small { flex-basis: 100%; color: var(--muted); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-b { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); cursor: pointer; }
.choice-b:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- calendar */
.cal-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cal-arrows { display: flex; gap: 4px; align-items: center; }
.cal-card { padding: 0; overflow: hidden; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wday { border-inline-end: 1px solid var(--rule); min-height: 420px; display: flex; flex-direction: column; min-width: 0; }
.wday:last-child { border-inline-end: 0; }
.wday-h, .mday-h { border: 0; background: none; cursor: pointer; text-align: start; }
.wday-h { display: flex; align-items: baseline; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--rule); background: var(--soft); }
.wday-h b { font-weight: 600; font-size: 13px; color: var(--ink2); } .wday-h span { font: 500 20px/1 var(--serif); }
.wday-h .add-ic { margin-inline-start: auto; opacity: 0; color: var(--blue); } .wday-h:hover .add-ic, .wday-h:focus .add-ic { opacity: 1; }
.wday-b { padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.is-today .wday-h, .is-today .mday-h { color: var(--red); } .is-today .wday-h span { color: var(--red); }
.is-today .wday-h { box-shadow: inset 0 -3px 0 var(--red); }
.weekend { background: color-mix(in srgb, var(--wash) 40%, transparent); }
.exam-day { background: color-mix(in srgb, var(--c-red-bg) 55%, var(--card)); }
.off-day { background: color-mix(in srgb, var(--c-lavender-bg) 70%, var(--card)); }
.ev { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; font-size: 12.5px; line-height: 1.3; text-decoration: none; color: var(--ink); background: var(--wash); min-width: 0; }
.ev span:not(.av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wday .ev span:not(.av) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wday .ev { align-items: flex-start; } .wday .ev time { padding-top: 1px; } .ev time { font-weight: 600; font-size: 11.5px; white-space: nowrap; } .ev .ti { flex: none; font-size: 13px; }
.ev-task { background: var(--c-blue-bg); color: var(--c-blue); border-inline-start: 3px solid var(--pcol, transparent); } .ev-task.is-done { opacity: .55; text-decoration: line-through; } .ev-task.stuck { background: var(--c-red-bg); color: var(--c-red); }
.ev-plan { background: transparent; border: 1px dashed var(--blue); color: var(--blue); }
.ev-meet { background: var(--c-gold-bg); color: var(--c-gold); }
.ev-busy { background: transparent; border: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); color: var(--ink2); }
.ev-exam { background: var(--red); color: #fff; font-weight: 600; } .ev-off { background: var(--c-lavender-bg); color: var(--c-lavender); }
.ev-summary { background: transparent; color: var(--muted); font-size: 11.5px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.month .m-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--soft); border-bottom: 1px solid var(--rule); }
.month .m-head span { padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.m-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mday { min-height: 118px; border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mday:nth-child(7n) { border-inline-end: 0; }
.mday.out { opacity: .45; }
.mday-h { font: 500 14px/1 var(--serif); padding: 4px 6px; border-radius: 6px; align-self: flex-start; }
.mday-h:hover { background: var(--wash); } .is-today .mday-h { background: var(--red); color: #fff; }
.mday-b { display: flex; flex-direction: column; gap: 3px; } .mday .ev { padding: 2px 5px; font-size: 11.5px; } .mday .more { font-size: 12px; }

/* ---------------------------------------------------------------- projects */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.proj-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); border-top: 4px solid var(--cf); transition: transform .12s; }
.proj-card:hover { transform: translateY(-2px); }
.proj-card h2 { font-size: 21px; } .proj-card p { margin: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.proj-card.archived { opacity: .55; }
.pc-foot { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink2); } .pc-foot > span { display: inline-flex; gap: 4px; align-items: center; } .pc-foot .avs { margin-inline-start: auto; }
.proj-head { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--cf); box-shadow: var(--shadow); flex-wrap: wrap; }
.pc-ic.big { width: 58px; height: 58px; font-size: 28px; border-radius: 14px; }
.ph-main { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; } .ph-main h1 { font-size: 30px; } .ph-main p { margin: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.crumb { font-size: 13px; } .crumb a { color: var(--muted); }
.ph-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tab { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; color: var(--ink2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; white-space: nowrap; }
.tab.on { color: var(--ink); border-bottom-color: var(--red); }
.tab-body { min-height: 200px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.person-card { display: flex; gap: 12px; align-items: center; box-shadow: none; } .person-card div { display: flex; flex-direction: column; } .person-card small { color: var(--muted); }
.tpl-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; text-align: center; background: var(--card); position: relative; }
.tpl input { position: absolute; opacity: 0; } .tpl:has(input:checked) { border-color: var(--cf); box-shadow: inset 0 0 0 2px var(--cf); background: color-mix(in srgb, var(--cb) 40%, var(--card)); }
.tpl:has(input:focus-visible) { outline: 2px solid var(--focus); }
.tpl small { color: var(--muted); }
.preview { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); }
.preview li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--wash); font-size: 13.5px; align-items: center; }
.preview li.auto { opacity: .5; font-style: italic; } .preview small { color: var(--muted); display: inline-flex; gap: 4px; align-items: center; } .preview .due { color: var(--ink2); }
.swatches { display: flex; gap: 8px; } .sw { width: 34px; height: 34px; border-radius: 99px; background: var(--cb); border: 2px solid var(--cf); cursor: pointer; position: relative; }
.sw input { position: absolute; opacity: 0; } .sw:has(input:checked) { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--cf); } .sw:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 5px; }
.icons-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ip { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer; font-size: 18px; background: var(--card); position: relative; }
.ip input { position: absolute; opacity: 0; } .ip:has(input:checked) { background: var(--ink); color: var(--bg); } .ip:has(input:focus-visible) { outline: 2px solid var(--focus); }

/* ---------------------------------------------------------------- team */
.week-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wp { display: flex; gap: 14px; align-items: center; } .wp-main { flex: 1; min-width: 0; } .wp-main p { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wp-n { font: 500 26px/1 var(--serif); min-width: 34px; text-align: end; }
.stack-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--wash); min-width: 20px; margin: 2px 0 4px; }
.stack-bar span { display: block; height: 100%; } .sb-doing { background: var(--blue); } .sb-approval { background: #6F64B8; } .sb-todo { background: color-mix(in srgb, var(--blue) 25%, var(--rule)); }
.off-pill { background: var(--c-lavender-bg); color: var(--c-lavender); }
.stuck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stuck-list a { color: var(--ink); text-decoration: none; } .stuck-list a:hover { text-decoration: underline; }
.quote { margin: 4px 0; padding: 6px 10px; border-inline-start: 3px solid var(--red); background: var(--c-red-bg); color: var(--c-red); border-radius: 0 8px 8px 0; font-size: 14px; }
html[dir="rtl"] .quote { border-radius: 8px 0 0 8px; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; font: 600 12px/1.2 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
html[dir="rtl"] .tbl th { letter-spacing: 0; font-family: "IBM Plex Sans Arabic", var(--sans); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--wash); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl select, .tbl input { min-width: 140px; }
.who { display: flex; gap: 10px; align-items: center; } .who > span { display: flex; flex-direction: column; } .who small { color: var(--muted); }
.tbl tr.inactive { opacity: .55; } .tbl td.acts { white-space: nowrap; } .tbl td.acts .btn + .btn { margin-inline-start: 6px; }

/* ---------------------------------------------------------------- chat */
.chat-wrap { display: grid; grid-template-columns: 240px 1fr; padding: 0; overflow: hidden; height: calc(100vh - 190px); min-height: 460px; }
.rooms { border-inline-end: 1px solid var(--rule); background: var(--soft); padding: 10px; display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.room { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.room:hover { background: var(--wash); } .room.on { background: var(--card); box-shadow: 0 1px 3px rgba(12,43,75,.1); font-weight: 600; }
.room-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .badge { background: var(--badge); color: #fff; font: 600 11px/1 var(--sans); padding: 4px 6px; border-radius: 99px; }
.room-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cb); color: var(--cf); flex: none; }
.room-view { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.room-view.embedded { height: 560px; margin: -18px -20px; }
.room-head { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .room-head h2 { font-size: 20px; } .room-head small { color: var(--muted); }
.msgs { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.older { align-self: center; }
.day-sep { text-align: center; margin: 4px 0; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 10px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.msg { display: flex; gap: 10px; align-items: flex-start; } .m-body { min-width: 0; max-width: 680px; } .m-body > p:last-child { margin: 2px 0 0; padding: 8px 12px; background: var(--soft); border-radius: 4px 12px 12px 12px; overflow-wrap: anywhere; }
html[dir="rtl"] .m-body > p:last-child { border-radius: 12px 4px 12px 12px; }
.msg.mine .m-body > p:last-child { background: var(--c-blue-bg); color: var(--c-blue); }
.msg.urgent .m-body > p:last-child { background: var(--c-red-bg); color: var(--c-red); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.m-del { opacity: 0; } .msg:hover .m-del, .m-del:focus { opacity: 1; }
.chat-form { border-top: 1px solid var(--rule); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); position: relative; }
.cf-row { display: flex; align-items: center; gap: 10px; } .cf-row .btn { margin-inline-start: auto; }
.urgent-t { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--rule); cursor: pointer; font-size: 13.5px; }
.urgent-t input { width: 15px; height: 15px; accent-color: var(--red); } .urgent-t:has(input:checked) { background: var(--c-red-bg); color: var(--c-red); border-color: transparent; }
.ro-note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--rule); color: var(--muted); display: flex; gap: 8px; align-items: center; background: var(--soft); }

/* ---------------------------------------------------------------- bookings, files, settings */
.bk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--soft); flex-wrap: wrap; }
.bk.st-cancelled, .bk.st-missed { opacity: .6; } .bk.st-cancelled .bk-main b { text-decoration: line-through; }
.bk-when { display: flex; flex-direction: column; min-width: 96px; } .bk-when span { color: var(--ink2); font-size: 13px; }
.bk-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c-blue-bg); color: var(--c-blue); flex: none; }
.bk-ic.k-team { background: var(--c-gold-bg); color: var(--c-gold); } .bk-ic.k-feedback { background: var(--c-mint-bg); color: var(--c-mint); } .bk-ic.k-office { background: var(--c-lavender-bg); color: var(--c-lavender); }
.bk-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; } .bk-main small { color: var(--ink2); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bk-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-booked { background: var(--c-blue-bg); color: var(--c-blue); } .bs-done { background: var(--c-mint-bg); color: var(--c-mint); } .bs-cancelled, .bs-missed { background: var(--wash); color: var(--muted); }
.past-d { margin-top: 12px; } .past-d summary { cursor: pointer; color: var(--ink2); font-weight: 500; margin-bottom: 8px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.slot { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; background: var(--card); }
.slot span { display: flex; flex-direction: column; font-size: 13.5px; } .slot:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--c-blue-bg); }
.file-list { list-style: none; margin: 0; padding: 0; }
.file { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--wash); flex-wrap: wrap; } .file:last-child { border-bottom: 0; }
.f-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--c-blue-bg); color: var(--c-blue); flex: none; }
.file.k-link .f-ic { background: var(--c-mint-bg); color: var(--c-mint); } .file.k-sent .f-ic { background: var(--c-gold-bg); color: var(--c-gold); }
.f-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; } .f-main small { color: var(--muted); } .f-main small a { color: var(--ink2); }
.f-name { font-weight: 600; color: var(--ink); text-align: start; }
.pill.kind.k-file { background: var(--c-blue-bg); color: var(--c-blue); } .pill.kind.k-link { background: var(--c-mint-bg); color: var(--c-mint); } .pill.kind.k-sent { background: var(--c-gold-bg); color: var(--c-gold); }
.set-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; }
.set-nav a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-weight: 500; }
.set-nav a:hover { background: var(--wash); } .set-nav a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.set-nav hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 6px; width: calc(100% - 12px); }
.set-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alert-state { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0; } .alert-state p { margin: 0; }
.rule { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--c-lavender-bg); color: var(--c-lavender); margin: 10px 0; }
.busy-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.busy-list li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r); background: var(--soft); } .busy-list li > div { flex: 1; display: flex; flex-direction: column; } .busy-list small { color: var(--ink2); }
.bl-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--c-lavender-bg); color: var(--c-lavender); }
.busy-list .k-exam .bl-ic, .busy-list .k-final .bl-ic { background: var(--c-red-bg); color: var(--c-red); }
.weekly-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .weekly-row .fld { flex: 1; }
.hours { display: flex; flex-direction: column; gap: 6px; } .hrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hrow .chk { min-width: 130px; } .hrow input[type=time] { width: 130px; }
.hrow:not(:has(input[type=checkbox]:checked)) input[type=time] { opacity: .4; }
.em-frame { width: 100%; height: 640px; border: 1px solid var(--rule); border-radius: var(--r); background: #F7F4EE; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1180px) {
  .board { grid-template-columns: repeat(4, minmax(230px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .set-wrap { grid-template-columns: 1fr; } .set-nav { position: static; flex-direction: row; overflow-x: auto; } .set-nav hr { display: none; } .set-nav a { white-space: nowrap; }
  .chat-wrap { grid-template-columns: 1fr; height: auto; } .rooms { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--rule); } .room { flex: none; } .room-view { height: 70vh; }
  .tpl-pick { grid-template-columns: repeat(2, 1fr); }
}
/* phones: the sidebar becomes a compact top bar with icons and a "Menu" button */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .side { position: sticky; top: 0; height: auto; width: 100%; flex-direction: row; align-items: center; padding: 6px 8px; gap: 2px; }
  .side-brand { padding: 0 8px 0 4px; } .side-brand .b-en { display: none; } .brand .b-ar { font-size: 24px; }
  .side-nav { flex-direction: row; gap: 0; } .side-nav li { display: none; } .side-nav li:nth-child(-n+3), .side-nav li:nth-child(6) { display: block; }
  .side-nav a { padding: 8px 9px; flex-direction: column; gap: 0; } .side-nav a span:not(.badge) { display: none; } .side-nav a .badge { position: absolute; top: 0; inset-inline-end: 0; padding: 3px 4px; min-width: 16px; font-size: 9.5px; }
  .side-nav a.on::before { display: none; }
  .side-bottom { display: none; margin: 0; border: 0; padding: 0; }
  .side-menu { display: inline-flex; margin-inline-start: auto; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 0; color: var(--side-ton); padding: 7px 12px; border-radius: 8px; font-weight: 500; cursor: pointer; }
  .side.open { flex-wrap: wrap; } .side.open .side-nav, .side.open .side-bottom { display: flex; flex-direction: column; flex-basis: 100%; order: 3; padding: 4px 0; }
  .side.open .side-nav li { display: block; } .side.open .side-nav a { flex-direction: row; gap: 12px; } .side.open .side-nav a span { display: inline; }
  .top { padding: 8px 12px; gap: 8px; position: static; flex-wrap: wrap; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .top-actions { gap: 6px; } .top-actions .btn span { display: none; } .top-actions .btn { padding: 8px 10px; }
  .top .demo-tag { order: 4; }
  .view { padding: 16px 12px 50px; }
  .page-head h1 { font-size: 24px; } .hello h1 { font-size: 26px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .tile { padding: 12px; } .tile-ic { width: 36px; height: 36px; font-size: 18px; } .tile-n { font-size: 24px; }
  .mini-board { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; } .col { scroll-snap-align: start; }
  .p-grid { grid-template-columns: 1fr; }
  .panel { width: 100vw; }
  .week { grid-template-columns: 1fr; } .wday { min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--rule); } .wday-b:empty { display: none; }
  .mday { min-height: 70px; } .mday .ev span, .mday .ev time { display: none; } .mday-b { flex-direction: row; flex-wrap: wrap; }
  .ways { grid-template-columns: 1fr; } .choice { grid-template-columns: 1fr; }
  .timeline::before { inset-inline-start: 72px; } .tl { grid-template-columns: 60px 26px 1fr; gap: 0 10px; }
  .bell-menu { inset-inline: 8px !important; width: auto; }
  .card { padding: 14px; }
  .room-view.embedded { margin: -14px; }
  .preview li { grid-template-columns: 1fr; gap: 2px; }
  .filters { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* text people type can be in either language: each paragraph takes its own direction */
.m-body > p:last-child, .news li p:last-child, .comments li p:last-child, .tc-title, .tr-title, .quote, .p-title, .ev span:not(.av), .si-body a, .chip, .n-txt b, .n-txt small, .stuck-list b, .bk-main b, .f-name, .tl b, textarea, .step-t { unicode-bidi: plaintext; }