/* =====================================================================
   مكتب SAS — SAS Office (internal staff workspace)
   ===================================================================== */
.ofc{--bg:#0d1310;--side:#0a0f0c;--panel:#141c17;--panel2:#1a241e;--panel3:#202c25;--line:#ffffff12;--line2:#ffffff1f;--ink:#e9efe9;--soft:#c5d2c9;--muted:#93a69a;
  --gold:#c8a24d;--gold2:#e3c986;--goldbg:#c8a24d1f;--green:#41c283;--greenbg:#41c2831c;--red:#ef6a58;--redbg:#ef6a581c;--orange:#f0a04b;--orangebg:#f0a04b1f;--blue:#62aef0;--bluebg:#62aef01c;--violet:#a78bfa;--violetbg:#a78bfa1f;--gray:#9aa8a0;--graybg:#ffffff0d;
  --r:16px;--r2:12px;--shadow:0 18px 50px -24px #000c;
  display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;background:radial-gradient(1200px 500px at 85% -10%,#c8a24d10,transparent 60%),var(--bg);color:var(--ink);font-family:Cairo,Montserrat,system-ui,sans-serif;font-size:14px;line-height:1.6}
html[lang=en] .ofc{font-family:Montserrat,Cairo,system-ui,sans-serif;font-size:13.5px}
.ofc *,.ofc *::before,.ofc *::after{box-sizing:border-box}
.ofc a{color:inherit;text-decoration:none}
.ofc h1,.ofc h2,.ofc h3,.ofc h4{margin:0;color:var(--ink);font-family:inherit;letter-spacing:0;line-height:1.35}
.ofc p{margin:0;color:var(--soft)}
.ofc button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-shadow:none}
.ofc input,.ofc select,.ofc textarea{font:inherit;color:var(--ink)}
.ofc .oi{width:18px;height:18px;flex:none}
html[dir=rtl] .ofc .oi.flip,html[dir=ltr] .ofc .oi.back{transform:scaleX(-1)}
html[dir=rtl] .ofc .o-alert-row .oi:last-child{transform:scaleX(-1)}
.ofc .o-muted{color:var(--muted)}.ofc .d-block{display:block}.ofc .o-spacer{flex:1}
.ofc .o-pos{color:var(--green)}.ofc .o-neg{color:var(--red)}.ofc .o-late{color:var(--red)}
.ofc code{font-family:ui-monospace,monospace;font-size:12px;color:var(--gold2)}

/* ---------- sidebar ---------- */
.o-side{position:sticky;top:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,#0b120e,#070b09);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;z-index:40}
.o-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.o-brand img{width:44px;height:44px;border-radius:12px;object-fit:contain;background:#ffffff08;padding:3px}
.o-brand b{display:block;font-size:17px;font-weight:800;color:#fff}
.o-brand small{display:block;font:600 9.5px/1.3 Montserrat,sans-serif;letter-spacing:.14em;color:var(--gold)}
.o-nav{flex:1}
.o-nav-g{padding:10px 0 4px}
.o-nav-label{display:block;padding:0 12px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#6f8377;text-transform:uppercase}
.o-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:1px 0;border-radius:11px;color:#b5c4ba;font-weight:600;font-size:13.5px;transition:background .15s,color .15s;position:relative}
.o-nav a:hover{background:#ffffff08;color:#fff}
.o-nav a.on{background:linear-gradient(90deg,#c8a24d26,#c8a24d0d);color:#fff;box-shadow:inset 0 0 0 1px #c8a24d33}
html[dir=rtl] .o-nav a.on{background:linear-gradient(270deg,#c8a24d26,#c8a24d0d)}
.o-nav a.on .oi{color:var(--gold2)}
.o-nav a em{font-style:normal;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font:700 11px/20px Montserrat,sans-serif;text-align:center}
.o-side-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;display:grid;gap:2px}
.o-side-foot a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:#93a69a;font-size:13px}
.o-side-foot a:hover{background:#ffffff08;color:#fff}

/* ---------- top bar ---------- */
.o-main{min-width:0;display:flex;flex-direction:column}
.o-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:68px;padding:0 28px;background:#0d1310d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.o-crumb{flex:1;min-width:0}
.o-crumb small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.o-crumb h1{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-top-actions{display:flex;align-items:center;gap:10px}
.o-menu-btn{display:none!important}
.o-bell{position:relative}
.o-bell b{position:absolute;top:4px;inset-inline-end:4px;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font:700 10px/17px Montserrat,sans-serif;text-align:center;padding:0 4px}
.ofc .o-lang{min-width:46px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:700 12.5px/1 Montserrat,Cairo,sans-serif;padding:0 10px}
.o-me{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:start;max-width:240px}
html[dir=rtl] .o-me{padding:4px 12px 4px 6px}
.o-me span b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.o-me span small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

/* ---------- view ---------- */
.o-view{padding:26px 28px 60px;max-width:1500px;width:100%;outline:none}
.o-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.o-head h2{font-size:24px;font-weight:800}
.o-head p{max-width:760px;margin-top:6px;color:var(--muted);font-size:13.5px}
.o-head-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.ofc .o-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;font-weight:700;font-size:13.5px;white-space:nowrap;transition:transform .12s,filter .15s,background .15s;border:1px solid transparent}
.ofc .o-btn:active{transform:translateY(1px)}
.ofc .o-btn.gold{background:linear-gradient(180deg,#d8b45d,#b98f37);color:#17140b;box-shadow:0 8px 22px -12px #c8a24dcc}
.ofc .o-btn.gold:hover{filter:brightness(1.07)}
.ofc .o-btn.ghost{background:var(--panel2);border-color:var(--line2);color:var(--ink)}
.ofc .o-btn.ghost:hover{background:var(--panel3)}
.ofc .o-btn.danger{background:var(--red);color:#fff}
.ofc .o-btn.danger-ghost{background:transparent;border-color:#ef6a5855;color:var(--red)}
.ofc .o-btn.sm{height:34px;padding:0 12px;font-size:12.5px;border-radius:10px}
.ofc .o-btn.xs{height:28px;padding:0 10px;font-size:12px;border-radius:9px}
.ofc .o-btn:disabled{opacity:.55;pointer-events:none}
.ofc .o-icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);color:var(--soft);flex:none;transition:background .15s,color .15s}
.ofc .o-icon:hover{background:var(--panel3);color:#fff}
.ofc .o-icon.ok{color:var(--green);border-color:#41c28355;background:var(--greenbg)}
.ofc .o-icon.no{color:var(--red);border-color:#ef6a5855;background:var(--redbg)}
.ofc .o-icon.wa{color:#45d07c}
.ofc .o-row-act .o-icon{width:32px;height:32px;border-radius:9px}
.ofc .o-row-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ofc .o-link{color:var(--gold2);font-weight:700;font-size:12.5px}
.ofc .o-link:hover{text-decoration:underline}
.ofc .o-link.danger{color:var(--red)}

/* ---------- pills, tags, avatars ---------- */
.o-pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--graybg);color:var(--gray);border:1px solid #ffffff10}
.o-pill .oi{width:13px;height:13px}
.o-pill.xs{height:20px;padding:0 8px;font-size:10.5px}
.o-pill.green{background:var(--greenbg);color:var(--green);border-color:#41c28333}
.o-pill.gold{background:var(--goldbg);color:var(--gold2);border-color:#c8a24d33}
.o-pill.red{background:var(--redbg);color:var(--red);border-color:#ef6a5833}
.o-pill.blue{background:var(--bluebg);color:var(--blue);border-color:#62aef033}
.o-pill.orange{background:var(--orangebg);color:var(--orange);border-color:#f0a04b33}
.o-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;background:#ffffff0b;color:var(--soft);font-size:11px;font-weight:700}
.o-tag .oi{width:12px;height:12px}
.o-dot{width:9px;height:9px;border-radius:50%;background:var(--gray);flex:none;display:inline-block}
.o-dot.green{background:var(--green)}.o-dot.gold{background:var(--gold)}.o-dot.red{background:var(--red)}.o-dot.blue{background:var(--blue)}.o-dot.orange{background:var(--orange)}
.o-prio{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:7px;vertical-align:middle;background:var(--gray)}
.o-prio.blue{background:#7f9a8b}.o-prio.gold{background:var(--gold)}.o-prio.orange{background:var(--orange)}.o-prio.red{background:var(--red);box-shadow:0 0 0 3px #ef6a5830}
.o-av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2c3c32,#1d2a22);border:1px solid #c8a24d40;color:var(--gold2);font-weight:800;font-size:12.5px;flex:none;letter-spacing:0}
.o-av.sm{width:26px;height:26px;font-size:10.5px}
.o-av.lg{width:52px;height:52px;font-size:17px}
.o-av.xl{width:72px;height:72px;font-size:24px}
.o-person{display:inline-flex;align-items:center;gap:8px;min-width:0}
.o-person>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-person small{display:block;font-size:11px;color:var(--muted)}
.o-due{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.o-due .oi{width:13px;height:13px}
.o-due.late{color:var(--red)}.o-due.now{color:var(--gold2)}
.o-sla{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--soft)}
.o-sla .oi{width:13px;height:13px}
.o-sla.late{color:var(--red)}.o-sla.warn{color:var(--orange)}.o-sla.ok{color:var(--green)}
.o-chips{display:flex;flex-wrap:wrap;gap:6px}
.o-chips span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;background:#ffffff0b;color:var(--soft)}
.o-chips span.gold{background:var(--goldbg);color:var(--gold2)}

/* ---------- cards & KPIs ---------- */
.o-card{background:linear-gradient(180deg,#161f19,#131a16);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow);min-width:0}
.o-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.o-card-head h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.o-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;margin-bottom:20px}
.o-kpis.sm{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.o-kpi{position:relative;display:block;background:linear-gradient(180deg,#18221c,#141b17);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;overflow:hidden;transition:border-color .15s,transform .15s}
a.o-kpi:hover{border-color:#c8a24d55;transform:translateY(-1px)}
.o-kpi::after{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#ffffff14}
.o-kpi.green::after{background:var(--green)}.o-kpi.red::after{background:var(--red)}.o-kpi.gold::after{background:var(--gold)}.o-kpi.orange::after{background:var(--orange)}
.o-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12.5px;font-weight:700}
.o-kpi-top i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#ffffff08;color:var(--gold2)}
.o-kpi strong{display:block;margin-top:6px;font:800 25px/1.2 Montserrat,Cairo,sans-serif;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-kpis.sm .o-kpi strong{font-size:21px}
.o-kpi small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.45}
.o-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.o-split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.o-stack>.o-card:last-child{margin-bottom:0}
.o-split>.o-card,.o-split>div>.o-card{margin-bottom:18px}
.o-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.o-cards>.o-card{margin:0}
.o-empty{display:grid;place-items:center;gap:10px;padding:28px 12px;text-align:center;color:var(--muted)}
.o-empty .oi{width:30px;height:30px;color:#c8a24d88}
.o-empty p{color:var(--muted);font-size:13px;max-width:380px}
.o-loading{display:flex;justify-content:center;gap:7px;padding:60px}
.o-loading span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:o-b 1s infinite ease-in-out}
.o-loading span:nth-child(2){animation-delay:.15s}.o-loading span:nth-child(3){animation-delay:.3s}
@keyframes o-b{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
.o-alert{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r2);margin-bottom:16px;background:var(--panel2);border:1px solid var(--line2)}
.o-alert .oi{margin-top:2px}
.o-alert.gold{background:var(--goldbg);border-color:#c8a24d40;color:var(--gold2)}
.o-alert.red{background:var(--redbg);border-color:#ef6a5840;color:var(--red)}
.o-alert p,.o-alert div{color:var(--soft)}
.o-alert b{color:var(--ink)}

/* ---------- bars, tabs, filters ---------- */
.o-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.o-tabs{display:inline-flex;gap:3px;padding:4px;border-radius:13px;background:var(--panel);border:1px solid var(--line);flex-wrap:wrap}
.o-tabs button{height:34px;padding:0 14px;border-radius:10px;font-weight:700;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.o-tabs button:hover{color:var(--ink)}
.o-tabs button.on{background:var(--panel3);color:#fff;box-shadow:inset 0 0 0 1px #c8a24d40}
.o-tabs button b{font:700 11px Montserrat,sans-serif;background:#ffffff12;border-radius:8px;padding:1px 7px}
.o-filter{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700}
html[dir=rtl] .o-filter{padding:0 12px 0 4px}
.o-filter select,.o-filter input{height:32px;border:0;background:transparent;color:var(--ink);font-weight:700;font-size:13px;outline:none;max-width:190px;color-scheme:dark}
.o-filter select option{background:#141c17}
.o-search{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--muted);flex:1;min-width:180px;max-width:320px}
.o-search input{border:0;background:transparent;outline:none;width:100%;height:36px;color:var(--ink)}
.o-search:focus-within,.o-filter:focus-within{border-color:#c8a24d66}
.o-toggle{display:inline-flex;padding:3px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.o-toggle button{width:36px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.o-toggle button.on{background:var(--panel3);color:var(--gold2)}
.o-month{display:inline-flex;align-items:center;gap:10px}
.o-month b{min-width:150px;text-align:center;font-size:15px}
.o-legend{display:flex;flex-wrap:wrap;gap:6px}
.o-legend button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--soft)}
.o-legend button.off{opacity:.4}
.o-legend i{width:9px;height:9px;border-radius:3px}

/* color swatches used by charts & calendar */
.ofc i.green,.ofc .o-cal-ev.green{--c:var(--green)}.ofc i.red,.ofc .o-cal-ev.red{--c:var(--red)}.ofc i.gold,.ofc .o-cal-ev.gold{--c:var(--gold)}.ofc i.blue,.ofc .o-cal-ev.blue{--c:var(--blue)}.ofc i.orange,.ofc .o-cal-ev.orange{--c:var(--orange)}.ofc i.violet,.ofc .o-cal-ev.violet{--c:var(--violet)}.ofc i.gray,.ofc .o-cal-ev.gray{--c:var(--gray)}
.o-legend i,.o-cols-legend i,.o-donut li i{background:var(--c,var(--gold))}

/* ---------- table ---------- */
.o-table{overflow-x:auto;margin:-4px -8px}
.o-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:none;border:0;margin:0}
.o-table th{text-align:start;font-size:11.5px;font-weight:800;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap;background:none;letter-spacing:0;text-transform:none}
.o-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--soft);background:none}
.o-table td b{color:var(--ink)}
.o-table tr:last-child td{border-bottom:0}
.o-table tr.o-click{cursor:pointer}
.o-table tr.o-click:hover td{background:#ffffff05}
.o-cell-input{height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);padding:0 10px;min-width:110px;max-width:100%;outline:none;color-scheme:dark}
.o-cell-input:focus{border-color:var(--gold)}
.o-inline-prog{display:flex;align-items:center;gap:8px;min-width:110px}
.o-inline-prog .o-progress{flex:1}
.o-inline-prog small{font:700 11.5px Montserrat,sans-serif;color:var(--soft);min-width:34px}
.o-matrix th{writing-mode:initial}
.o-matrix th span{display:block;max-width:90px;white-space:normal;line-height:1.3}
.o-matrix th small{color:var(--gold2)}
.o-matrix td.c{text-align:center}
.o-yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--greenbg);color:var(--green)}
.o-yes .oi{width:14px;height:14px}
.o-mini-bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.o-mini-bars span{width:8px;height:100%;background:#ffffff0d;border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
.o-mini-bars i{display:block;width:100%;background:var(--gold);border-radius:3px}
.o-more{text-align:center;padding-top:14px}

/* ---------- progress, charts ---------- */
.o-progress{height:8px;border-radius:8px;background:#ffffff10;overflow:hidden}
.o-progress i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#b98f37,#e3c986)}
.o-progress.green i{background:linear-gradient(90deg,#2f9d68,#55d595)}
.o-progress.red i{background:linear-gradient(90deg,#c84a3a,#f08070)}
.o-progress.gold i{background:linear-gradient(90deg,#c88a2d,#f0b14b)}
.o-hbars{display:grid;gap:12px}
.o-hbar-l{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.o-hbar-l span{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-hbar-l b{font-family:Montserrat,Cairo,sans-serif;white-space:nowrap}
.o-hbar-l small{color:var(--muted);font-weight:600;font-size:11px}
.o-hbar-t{height:9px;border-radius:9px;background:#ffffff0c;overflow:hidden}
.o-hbar-t i{display:block;height:100%;border-radius:9px;background:var(--c,linear-gradient(90deg,#b98f37,#e3c986))}
.o-hbar-t i:not([class]),.o-hbar-t i[class=""]{background:linear-gradient(90deg,#b98f37,#e3c986)}
.o-cols-legend{display:flex;gap:16px;margin-bottom:12px;font-size:12px;color:var(--muted);font-weight:700}
.o-cols-legend span{display:inline-flex;align-items:center;gap:6px}
.o-cols-legend i{width:10px;height:10px;border-radius:3px}
.o-cols-plot{display:flex;align-items:stretch;gap:8px;height:200px;border-bottom:1px solid var(--line2);padding-top:6px}
.o-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.o-col-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.o-col-bars i{flex:1;max-width:22px;border-radius:6px 6px 2px 2px;background:var(--c);opacity:.9;transition:opacity .15s;min-height:2px}
.o-col-bars i:hover{opacity:1}
.o-col span{font-size:10.5px;color:var(--muted);white-space:nowrap;margin-bottom:-22px;transform:translateY(4px)}
.o-cols{padding-bottom:22px}
.o-ring{display:flex;align-items:center;gap:14px}
.o-ring svg{width:96px;height:96px;transform:rotate(-90deg);flex:none}
.o-ring circle{fill:none;stroke-width:8}
.o-ring .bg{stroke:#ffffff12}
.o-ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.o-ring strong{display:block;font:800 26px/1 Montserrat,sans-serif;color:#fff}
.o-ring span{display:block;font-size:12.5px;color:var(--soft);font-weight:700;margin-top:4px}
.o-ring small{display:block;font-size:11.5px;color:var(--muted)}
.o-donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.o-donut svg{width:130px;height:130px;flex:none}
.o-donut .hole{fill:none;stroke:#ffffff0d;stroke-width:5}
.o-donut .seg{fill:none;stroke-width:5;stroke:var(--gray)}
.o-donut .seg.green{stroke:var(--green)}.o-donut .seg.gold{stroke:var(--gold)}.o-donut .seg.blue{stroke:var(--blue)}.o-donut .seg.red{stroke:var(--red)}
.o-donut ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;min-width:140px}
.o-donut li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft)}
.o-donut li i{width:10px;height:10px;border-radius:3px}
.o-donut li b{margin-inline-start:auto;font-family:Montserrat,sans-serif;color:#fff}
.o-funnel{display:grid;gap:8px}
.o-funnel-step{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:10px;overflow:hidden;background:#ffffff07}
.o-funnel-step::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:linear-gradient(90deg,#c8a24d40,#c8a24d18);border-radius:10px}
html[dir=rtl] .o-funnel-step::before{background:linear-gradient(270deg,#c8a24d40,#c8a24d18)}
.o-funnel-step>*{position:relative}
.o-funnel-step span{flex:1;font-weight:700;color:var(--ink)}
.o-funnel-step b{font:800 16px Montserrat,sans-serif}
.o-funnel-step small{color:var(--muted);font:700 11.5px Montserrat,sans-serif;min-width:38px;text-align:end}

/* ---------- my day ---------- */
.o-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:20px;border-radius:20px;background:radial-gradient(600px 220px at 10% 0%,#c8a24d26,transparent 70%),linear-gradient(135deg,#18241d,#111813);border:1px solid #c8a24d2b;box-shadow:var(--shadow)}
.o-hero-text{flex:1;min-width:0}
.o-hero-text>span{font-size:12.5px;color:var(--gold2);font-weight:700}
.o-hero h2{font-size:26px;font-weight:800;margin:4px 0}
.o-hero p{color:var(--soft)}
.o-att{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border-radius:14px;background:#00000033;border:1px dashed #c8a24d55;max-width:560px}
.o-att.on{border-style:solid;border-color:#41c28344}
.o-att b{display:block;font-size:14px}
.o-att small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-top:2px}
.o-check-sec{margin-bottom:14px}
.o-check-sec h4{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:800;margin-bottom:6px}
.o-check-sec h4 b{font:700 11px Montserrat,sans-serif;background:#ffffff10;border-radius:8px;padding:1px 7px}
.o-check-sec.late h4{color:var(--red)}
.o-check-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;transition:background .15s}
.o-check-row:hover{background:#ffffff06}
.o-check-main{flex:1;min-width:0;text-align:start;display:block}
.o-check-main b{display:block;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-check-main small{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--muted);font-size:11.5px}
.o-check-main small .oi{width:12px;height:12px}
.o-check-row.done .o-check-main b{text-decoration:line-through;color:var(--muted)}
.o-tick{position:relative;display:inline-grid;flex:none;cursor:pointer}
.o-tick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.o-tick span,span.o-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:2px solid #ffffff33;color:transparent;transition:all .15s}
.o-tick input:checked+span,span.o-tick.on{background:var(--green);border-color:var(--green);color:#0b1a12}
.o-tick input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.o-tick .oi{width:14px;height:14px;stroke-width:3}
.o-mini{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;border-bottom:1px solid var(--line);text-align:start}
.o-mini:last-child{border-bottom:0}
.o-mini>.oi{color:var(--gold2);flex:none}
.o-mini>span:nth-child(2){flex:1;min-width:0}
.o-mini b{display:block;font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-mini small{display:flex;flex-wrap:wrap;gap:4px;align-items:center;color:var(--muted);font-size:11.5px}
button.o-mini:hover,a.o-mini:hover{background:#ffffff05}
.o-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.o-shortcuts button{display:grid;justify-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--soft)}
.o-shortcuts button:hover{border-color:#c8a24d55;color:#fff}
.o-shortcuts .oi{width:22px;height:22px;color:var(--gold2)}

/* ---------- approvals ---------- */
.o-appr{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.o-appr:last-child{border-bottom:0}
.o-appr-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--goldbg);color:var(--gold2);flex:none}
.o-appr-body{flex:1;min-width:0}
.o-appr-body b{display:block;color:var(--ink)}
.o-appr-body small{color:var(--muted);font-size:11.5px}
.o-appr-body p{font-size:12.5px;margin-top:4px}
.o-appr-act{display:flex;gap:6px}
.o-appr-by{display:block;color:var(--muted);font-size:11px;padding:0 54px 10px;margin-top:-6px}
.o-alerts{display:grid;gap:8px}
.o-alert-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#ffffff06;border:1px solid var(--line);font-weight:600;font-size:13px}
.o-alert-row span{flex:1;color:var(--ink)}
.o-alert-row>.oi:first-child{color:var(--c,var(--gold))}
.o-alert-row.red{--c:var(--red)}.o-alert-row.gold{--c:var(--gold)}.o-alert-row.orange{--c:var(--orange)}.o-alert-row.blue{--c:var(--blue)}
.o-alert-row:hover{border-color:#ffffff2a}
.o-proj-mini{display:grid;grid-template-columns:minmax(0,1fr) 90px 38px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.o-proj-mini:last-child{border-bottom:0}
.o-proj-mini b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-proj-mini small{color:var(--muted);font-size:11px}
.o-proj-mini>span{font:700 12px Montserrat,sans-serif;text-align:end}

/* ---------- kanban ---------- */
.o-board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px;align-items:start}
.o-board:has(.o-col-k:nth-child(5)){grid-template-columns:repeat(5,minmax(220px,1fr))}
.o-col-k{background:#ffffff05;border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:200px;transition:background .15s,border-color .15s}
.o-col-k.over{background:#c8a24d12;border-color:#c8a24d66}
.o-col-h{display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.o-col-h b{flex:1;font-size:13px}
.o-col-h em{font:700 11.5px Montserrat,sans-serif;font-style:normal;color:var(--muted);background:#ffffff0d;border-radius:8px;padding:1px 8px}
.o-col-b{display:grid;gap:10px}
.o-col-empty{text-align:center;color:#ffffff40;font-size:12px;padding:22px 6px;border:1px dashed #ffffff14;border-radius:12px}
.o-tcard{display:grid;gap:8px;padding:12px;border-radius:13px;background:linear-gradient(180deg,#1c2721,#18211c);border:1px solid var(--line2);cursor:grab;transition:border-color .15s,transform .12s,box-shadow .15s}
.o-tcard:hover{border-color:#c8a24d55;box-shadow:0 10px 26px -16px #000}
.o-tcard.dragging{opacity:.5;transform:rotate(1deg)}
.o-tcard-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.o-tcard-top .o-due{margin-inline-start:auto}
.o-tcard b{font-size:13.5px;line-height:1.45;color:var(--ink)}
.o-tcard small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11.5px}
.o-tcard small .oi{width:12px;height:12px}
.o-tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.o-tcard .o-progress{height:5px}

/* ---------- projects, routines, campaigns, people ---------- */
.o-click{cursor:pointer}
.o-proj{display:grid;gap:10px;transition:border-color .15s,transform .15s}
.o-proj:hover{border-color:#c8a24d55;transform:translateY(-2px)}
.o-proj h3,.o-camp h3{font-size:16px;font-weight:800}
.o-proj p,.o-camp p{font-size:12.5px;color:var(--muted);min-height:18px}
.o-proj-top,.o-role-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.o-proj-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.o-proj-meta>span{display:inline-flex;align-items:center;gap:5px}
.o-proj-meta .oi{width:14px;height:14px}
.o-detail-progress{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:700}
.o-detail-progress .o-progress{flex:1}
.o-detail-progress b{font:700 12px Montserrat,sans-serif;color:var(--ink);white-space:nowrap}
.o-routine-prog{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:10px}
.o-routine-prog .o-progress{flex:1}
.o-routine{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;border-top:1px solid var(--line);text-align:start}
.o-routine span{flex:1;min-width:0}
.o-routine b{display:block;font-size:13px;color:var(--ink)}
.o-routine small{color:var(--muted);font-size:11.5px}
.o-routine .oi{color:var(--muted);width:15px}
.o-routine.off{opacity:.5}
.o-routine:hover b{color:var(--gold2)}
.o-camp{display:grid;gap:10px}
.o-camp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;border-radius:12px;background:#ffffff06}
.o-camp-stats div{text-align:center}
.o-camp-stats b{display:block;font:800 15px Montserrat,Cairo,sans-serif;color:#fff;white-space:nowrap}
.o-camp-stats small{font-size:10.5px;color:var(--muted)}
.o-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.o-person-card{display:grid;justify-items:center;gap:6px;padding:20px 14px 14px;border-radius:var(--r);background:linear-gradient(180deg,#18221c,#141b17);border:1px solid var(--line);text-align:center;transition:border-color .15s,transform .15s}
.o-person-card:hover{border-color:#c8a24d55;transform:translateY(-2px)}
.o-person-card.dim{opacity:.55}
.o-person-card>b{font-size:14.5px;color:var(--ink)}
.o-person-card>small{color:var(--muted);font-size:12px;min-height:18px}
.o-person-card .o-chips{justify-content:center;min-height:24px}
.o-person-foot{display:flex;align-items:center;justify-content:space-between;width:100%;padding-top:8px;margin-top:4px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.o-person-foot span{display:inline-flex;align-items:center;gap:4px}
.o-person-foot .oi{width:13px;height:13px}
.o-emp-head{display:flex;align-items:center;gap:16px}
.o-emp-head h3{font-size:18px}
.o-review{display:flex;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.o-review:last-child{border-bottom:0}
.o-review p{font-size:13px;margin-bottom:4px}
.o-role{display:grid;gap:12px}
.o-role.dim{opacity:.5}
.o-role-top>div{flex:1;min-width:0}
.o-role-top h3{font-size:15px}
.o-role-top small{color:var(--muted);font:600 10.5px Montserrat,monospace}
.o-level{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--goldbg);color:var(--gold2);font:800 15px Montserrat,sans-serif;flex:none}
.o-reports{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.o-report{display:grid;gap:8px;justify-items:start;padding:18px;border-radius:var(--r);background:linear-gradient(180deg,#18221c,#141b17);border:1px solid var(--line);text-align:start;transition:border-color .15s,transform .15s}
.o-report:hover{border-color:#c8a24d66;transform:translateY(-2px)}
.o-report>.oi{width:26px;height:26px;color:var(--gold2)}
.o-report b{font-size:14px;color:var(--ink)}
.o-report small{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:11.5px;font-weight:700}
.o-report small .oi{width:13px;height:13px}
.o-settings{display:grid;gap:4px}
.o-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.o-setting:last-child{border-bottom:0}
.o-setting b{display:block;color:var(--ink)}
.o-setting small{color:var(--muted);font-size:12px}
.o-branches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.o-branches b{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.o-note-small{font-size:12px;color:var(--muted);margin:-8px 0 18px}

/* ---------- shoots, content week ---------- */
.o-shoot{display:flex;align-items:center;gap:14px;width:100%;padding:12px 4px;border-bottom:1px solid var(--line);text-align:start}
.o-shoot:last-child{border-bottom:0}
.o-shoot:hover{background:#ffffff04}
.o-shoot-time{display:grid;justify-items:center;min-width:64px;padding:8px;border-radius:12px;background:var(--goldbg);color:var(--gold2);font:800 15px Montserrat,sans-serif}
.o-shoot-time small{font-size:11px;color:var(--muted);font-weight:700}
.o-shoot-body{flex:1;min-width:0}
.o-shoot-body b{display:block;color:var(--ink)}
.o-shoot-body small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.o-shoot-body small .oi{width:13px;height:13px}
.o-shoot-side{display:grid;justify-items:end;gap:6px}
.o-week{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:10px;overflow-x:auto;margin-bottom:18px}
.o-week-day{background:#ffffff05;border:1px solid var(--line);border-radius:14px;padding:10px;min-height:220px;display:flex;flex-direction:column;gap:8px}
.o-week-day.today{border-color:#c8a24d66;background:#c8a24d0d}
.o-week-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--line)}
.o-week-h b{font-size:13px}.o-week-h span{font-size:11.5px;color:var(--muted)}
.o-week-add{margin-top:auto;height:30px;border-radius:9px;border:1px dashed #ffffff22;color:var(--muted);display:grid;place-items:center}
.o-week-add:hover{border-color:var(--gold);color:var(--gold2)}
.o-post{display:grid;gap:3px;padding:9px 10px;border-radius:11px;background:var(--panel2);border:1px solid var(--line2);border-inline-start:3px solid var(--pc,var(--gold));text-align:start;width:100%}
.o-post:hover{background:var(--panel3)}
.o-post b{font-size:12.5px;color:var(--ink);line-height:1.4}
.o-post small{font-size:11px;color:var(--muted)}
.o-post-plat{font:700 10px Montserrat,sans-serif;color:var(--pc,var(--gold2));letter-spacing:.04em;text-transform:uppercase}
.o-post.facebook{--pc:#5b8def}.o-post.instagram{--pc:#e1306c}.o-post.tiktok{--pc:#25f4ee}.o-post.youtube{--pc:#ff4e45}.o-post.whatsapp{--pc:#45d07c}.o-post.x{--pc:#d0d0d0}.o-post.website{--pc:var(--gold)}

/* ---------- calendar ---------- */
.o-cal{padding:12px}
.o-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.o-cal-wd{text-align:center;font-size:12px;font-weight:800;color:var(--muted);padding:6px 0}
.o-cal-cell{min-height:118px;border-radius:12px;background:#ffffff05;border:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.o-cal-cell.off{background:none;border-color:transparent}
.o-cal-cell.today{border-color:#c8a24d88;background:#c8a24d10}
.o-cal-n{font:700 12px Montserrat,sans-serif;color:var(--muted)}
.o-cal-cell.today .o-cal-n{color:var(--gold2)}
.o-cal-cell small{font-size:10.5px;color:var(--muted)}
.o-cal-ev{display:block;width:100%;text-align:start;font-size:11px;font-weight:700;padding:3px 7px;border-radius:7px;background:color-mix(in srgb,var(--c,var(--gold)) 18%,transparent);color:color-mix(in srgb,var(--c,var(--gold)) 80%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-start:2px solid var(--c,var(--gold))}
.o-agenda{display:none}
.o-agenda-day{padding:10px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.o-agenda-day h4{font-size:13px;color:var(--gold2)}
.o-agenda .o-cal-ev{font-size:12.5px;padding:7px 10px;white-space:normal}

/* ---------- ticket page ---------- */
.o-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;font-size:13px;margin-bottom:14px}
.o-back:hover{color:var(--gold2)}
.o-ticket{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.o-ticket-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.o-ticket-head h2{font-size:19px;margin-bottom:6px}
.o-ticket-head p{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.o-tk-no{display:inline-grid;place-items:center;min-width:56px;height:44px;padding:0 10px;border-radius:12px;background:var(--goldbg);color:var(--gold2);font:800 15px Montserrat,sans-serif;flex:none}
.o-tk-no.sm{min-width:0;height:auto;padding:3px 8px;font-size:12px;border-radius:8px}
.o-thread{display:grid;gap:10px;margin:10px 0}
.o-msg{padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.o-msg p{white-space:pre-line;font-size:13.5px;color:var(--ink)}
.o-msg-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.o-msg-h b{font-size:12.5px}
.o-msg-h small{margin-inline-start:auto;color:var(--muted);font-size:11px}
.o-msg-h>.oi{color:var(--muted)}
.o-msg.agent{background:#c8a24d10;border-color:#c8a24d30;margin-inline-start:28px}
.o-msg.customer{background:#62aef00d;border-color:#62aef02a;margin-inline-end:28px}
.o-msg.internal{background:repeating-linear-gradient(135deg,#ffffff05 0 8px,transparent 8px 16px),#1a201c;border-style:dashed}
.o-compose{display:grid;gap:10px;margin-top:12px}
.o-compose textarea,.o-form textarea{width:100%;border-radius:12px;border:1px solid var(--line2);background:#0f1612;color:var(--ink);padding:10px 12px;outline:none;resize:vertical;min-height:70px}
.o-compose textarea:focus{border-color:var(--gold)}
.o-compose>.o-btn{justify-self:end}
.o-compose-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.o-canned{display:flex;gap:6px;flex-wrap:wrap}
.o-canned button{height:28px;padding:0 10px;border-radius:8px;background:#ffffff0a;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--soft)}
.o-canned button:hover{border-color:var(--gold);color:var(--gold2)}
.o-cust{display:grid;gap:6px}
.o-cust>b{font-size:15px}
.o-cust>span{color:var(--soft);font-family:Montserrat,sans-serif}
.o-cust-player{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px;border-radius:12px;background:#ffffff06}
.o-cust-player>span{flex:1;min-width:0}
.o-cust-player b{display:block;font-size:13px}
.o-cust-player small{color:var(--muted);font-size:11.5px}
.o-timeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.o-timeline li{display:grid;gap:2px;padding-inline-start:16px;position:relative}
.o-timeline li::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.o-timeline b{font-size:12px;color:var(--muted)}
.o-timeline span{font-size:13px;color:var(--ink)}
.o-stars{color:var(--gold2);letter-spacing:2px}

/* ---------- detail (drawer) ---------- */
.o-detail{display:grid;gap:14px}
.o-detail-pills{display:flex;gap:6px;flex-wrap:wrap}
.o-detail-desc{white-space:pre-line;color:var(--ink);background:#ffffff06;padding:12px 14px;border-radius:12px;font-size:13.5px}
.o-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.o-dl.one{grid-template-columns:1fr}
.o-dl div{min-width:0}
.o-dl dt{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.o-dl dd{margin:0;color:var(--ink);font-size:13px}
.o-dl.one .o-cell-input{width:100%}
.o-seg{display:flex;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);gap:3px;flex-wrap:wrap}
.o-seg button{flex:1;height:34px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;padding:0 8px}
.o-seg button.on{background:var(--gold);color:#17140b}
.o-sub{font-size:13px;color:var(--muted);font-weight:800;margin-top:4px}
.o-intro{font-size:13px;color:var(--soft);background:#c8a24d10;border:1px solid #c8a24d2a;border-radius:12px;padding:10px 12px;margin-bottom:14px}
.o-confirm{font-size:15px;color:var(--ink);margin-bottom:18px}

/* ---------- modal ---------- */
.ofc-modal{border:0;padding:0;margin:auto;width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 40px);border-radius:20px;background:#141c17;color:var(--ink);box-shadow:0 30px 90px -20px #000;border:1px solid var(--line2);overflow:hidden;display:none;flex-direction:column}
.ofc-modal[open]{display:flex;animation:o-pop .18s ease}
.ofc-modal.wide{width:min(860px,calc(100vw - 24px))}
.ofc-modal.side{margin:0;margin-inline-start:auto;height:100vh;max-height:100vh;width:min(520px,100vw);border-radius:0;border-width:0;border-inline-start:1px solid var(--line2);animation:o-slide .22s ease}
html[dir=rtl] .ofc-modal.side{animation-name:o-slide-r}
.ofc-modal::backdrop{background:#030605b3;backdrop-filter:blur(3px)}
@keyframes o-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes o-slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes o-slide-r{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.o-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.o-modal-head h3{font-size:16.5px;font-weight:800}
.o-modal-body{padding:20px;overflow-y:auto;flex:1}
.o-form .o-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.ofc-modal.wide .o-form .o-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.o-field{display:grid;gap:6px;min-width:0;align-content:start}
.o-field.full{grid-column:1/-1}
.o-field>label{font-size:12.5px;font-weight:700;color:var(--soft)}
.o-field>label i{color:var(--red);font-style:normal}
.o-field>small{font-size:11.5px;color:var(--muted)}
.o-field input:not([type=checkbox]):not([type=range]),.o-field select,.o-field textarea{width:100%;height:42px;border-radius:11px;border:1px solid var(--line2);background:#0f1612;color:var(--ink);padding:0 12px;outline:none;transition:border-color .15s;color-scheme:dark}
.o-field textarea{height:auto;padding:10px 12px}
.o-field select option{background:#141c17}
.o-field input:focus,.o-field select:focus,.o-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c8a24d22}
.o-checks{display:flex;flex-wrap:wrap;gap:8px}
.o-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--soft)}
.o-checks .o-check{padding:7px 11px;border-radius:10px;border:1px solid var(--line2);background:#0f1612}
.o-checks .o-check:has(input:checked){border-color:var(--gold);background:#c8a24d18;color:var(--gold2)}
.o-check input{accent-color:var(--gold);width:16px;height:16px}
.o-check.solo{padding-top:26px}
.o-range{display:flex;align-items:center;gap:12px}
.o-range input{flex:1;accent-color:var(--gold)}
.o-range output{font:700 13px Montserrat,sans-serif;min-width:44px;color:var(--gold2)}
.o-form-err{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--redbg);color:var(--red);font-size:13px;font-weight:700}
.o-form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}

/* ---------- popover ---------- */
.o-pop{position:fixed;z-index:60;min-width:250px;max-width:min(360px,calc(100vw - 16px));background:#18221c;border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 60px -18px #000;padding:6px;animation:o-pop .15s ease}
.o-pop-list{display:grid}
.o-pop-list a,.o-pop-list button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:700;font-size:13px;color:var(--soft);text-align:start;width:100%}
.o-pop-list a:hover,.o-pop-list button:hover{background:#ffffff0a;color:#fff}
.o-pop-list .oi{color:var(--gold2)}
.o-pop-who{display:flex;align-items:center;gap:12px;padding:10px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.o-pop-who b{display:block}.o-pop-who small{color:var(--muted);font-size:11.5px}
.o-pop-bell{max-height:440px;overflow-y:auto;width:340px;max-width:100%}
.o-pop-bell-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px;border-bottom:1px solid var(--line)}
.o-note{padding:10px 12px;border-bottom:1px solid var(--line)}
.o-note:last-child{border-bottom:0}
.o-note b{display:block;font-size:13px}
.o-note p{font-size:12.5px;color:var(--soft)}
.o-note small{font-size:11px;color:var(--muted)}
.o-note.unread{background:#c8a24d0d;border-inline-start:3px solid var(--gold)}

/* ---------- denied ---------- */
.ofc-denied{display:grid;place-items:center;grid-template-columns:1fr;padding:20px}
.ofc-denied .o-card{max-width:520px;text-align:center;display:grid;justify-items:center;gap:14px;padding:36px}
.ofc-denied h2{font-size:22px}

/* ---------- responsive ---------- */
.o-scrim{display:none}
@media (max-width:1180px){
  .o-split,.o-split.even{grid-template-columns:minmax(0,1fr)}
  .o-ticket{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  .ofc{grid-template-columns:minmax(0,1fr)}
  .o-side{position:fixed;inset-block:0;inset-inline-start:0;width:284px;transform:translateX(-105%);transition:transform .25s ease;box-shadow:20px 0 60px -20px #000}
  html[dir=rtl] .o-side{transform:translateX(105%)}
  body.o-nav-open .o-side{transform:none}
  body.o-nav-open .o-scrim{display:block;position:fixed;inset:0;background:#000a;z-index:35}
  .o-menu-btn{display:inline-grid!important}
  .o-top{padding:0 16px;gap:10px}
  .o-view{padding:20px 16px 60px}
  .o-me span{display:none}
  .o-me{padding:3px!important;border-radius:50%}
}
@media (max-width:760px){
  .o-top{height:60px}
  .o-crumb small{display:none}
  .o-crumb h1{font-size:16px}
  .o-quick span{display:none}
  .ofc .o-quick{width:40px;padding:0}
  .o-head h2{font-size:20px}
  .o-hero{flex-direction:column;align-items:flex-start;padding:18px}
  .o-hero h2{font-size:21px}
  .o-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .o-kpis.sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o-kpi{padding:12px}
  .o-kpi strong{font-size:19px}
  .o-kpi-top i{display:none}
  .o-card{padding:14px;border-radius:14px}
  .o-search{max-width:none;min-width:100%}
  .o-filter{flex:1 1 auto}
  .o-filter select{max-width:none;flex:1}
  .o-board,.o-board:has(.o-col-k:nth-child(5)){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82vw;scroll-snap-type:x mandatory}
  .o-col-k{scroll-snap-align:start}
  .o-cal{display:none}
  .o-agenda{display:block}
  .o-form .o-grid,.ofc-modal.wide .o-form .o-grid{grid-template-columns:minmax(0,1fr)}
  .o-dl{grid-template-columns:minmax(0,1fr)}
  .ofc-modal{width:100vw;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .ofc-modal.side{width:100vw;height:auto;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0;border-inline-start:0}
  .o-camp-stats{grid-template-columns:repeat(2,1fr)}
  .o-week{grid-template-columns:repeat(7,72vw);scroll-snap-type:x mandatory}
  .o-week-day{scroll-snap-align:start}
  /* tables become cards */
  .o-table{margin:0;overflow:visible}
  .o-table table,.o-table tbody,.o-table tr,.o-table td{display:block;width:100%}
  .o-table thead{display:none}
  .o-table tr{padding:12px 0;border-bottom:1px solid var(--line2)}
  .o-table tr:last-child{border-bottom:0}
  .o-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:0;text-align:end}
  .o-table td::before{content:attr(data-l);color:var(--muted);font-size:11.5px;font-weight:700;text-align:start;flex:none}
  .o-table td[data-l=""]::before{display:none}
  .o-table td>*{min-width:0}
  .o-matrix table{display:table}.o-matrix thead{display:table-header-group}.o-matrix tbody{display:table-row-group}.o-matrix tr{display:table-row}.o-matrix td{display:table-cell;padding:8px}.o-matrix td::before{display:none}.o-matrix{overflow-x:auto}
  .o-appr-by{padding:0 0 10px}
  .o-msg.agent{margin-inline-start:12px}.o-msg.customer{margin-inline-end:12px}
  .o-cols-plot{height:160px;gap:4px}
  .o-col span{font-size:9px}
  .o-shoot{flex-wrap:wrap}
  .o-shoot-side{justify-items:start;width:100%;padding-inline-start:78px}
}

/* ---------- print (dashboard report) ---------- */
@media print{
  .o-side,.o-top,.o-head-actions,.o-bar,.o-scrim,#toast{display:none!important}
  .ofc{display:block;background:#fff;color:#111}
  .o-view{padding:0;max-width:none}
  .o-card,.o-kpi,.o-hero{background:#fff!important;border:1px solid #ddd!important;box-shadow:none!important;break-inside:avoid}
  .ofc h1,.ofc h2,.ofc h3,.ofc b,.ofc strong,.o-kpi strong{color:#111!important}
  .ofc p,.ofc small,.o-hbar-l span{color:#444!important}
}