html,body{height:100%;overflow:hidden}
/* ═══════════════════════════════════════════════════════════════
منظومة Dashboard — style.css v5
Design Direction: Refined Executive Dark-Green
Sharp typography · Intentional hierarchy · Touch-first
═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* ═══════════════════════════════════════════════════════════
MANZOMA DESIGN SYSTEM v2 — recalibrated tokens
Same variable names (no JS / class breakage) · refined values
═══════════════════════════════════════════════════════════ */
/* ── Brand Palette (refined emerald — deeper, richer) ── */
--g1:#0C261A; /* darkest — sidebar bg (deeper for contrast) */
--g2:#143726; /* dark — nav active bg */
--g3:#1B6443; /* mid — primary buttons (more saturated) */
--g4:#2E8A60; /* light-mid — hover */
--g5:#E7F4ED; /* tint bg */
--g6:#F2FAF6; /* very light tint */
--accent:#10B981; /* vivid accent (modern emerald) */
--accent-soft:rgba(16,185,129,.12);
/* ── Surfaces (clearer elevation steps) ── */
--bg:#EEF2F0; /* app canvas — slightly cooler */
--s0:#FFFFFF; /* raised cards */
--s1:#F6F9F7; /* subtle fill */
--s2:#EDF2EF; /* inset / hover */
--s3:#DDE7E2; /* dividers, tracks */
--s4:#C2D4CC; /* strong fill */
/* ── Borders (slightly stronger for definition) ── */
--b0:rgba(12,38,26,.07);
--b1:rgba(12,38,26,.12);
--b2:rgba(12,38,26,.22);
/* ── Semantic (WCAG-AA tuned on white) ── */
--red:#C32B27; --red-bg:#FDEEEC;
--amber:#A85A04; --amber-bg:#FCF3E3;
--blue:#0A66A6; --blue-bg:#E8F2FB;
--purple:#5E32B0; --purple-bg:#F1ECFD;
--green:#107A3E; --green-bg:#E8F8EF;
/* ── Text (stronger contrast hierarchy) ── */
--t1:#0A1912; /* headings */
--t2:#21382B; /* body */
--t3:#4F6E62; /* secondary */
--t4:#7C9C8C; /* muted / captions */
/* ── Radius (consistent ramp) ── */
--r:14px; /* cards, containers */
--r2:10px; /* inner elements */
--r3:8px; /* buttons, chips */
--r4:5px; /* badges, small */
/* ── Shadows (layered, softer ambient + key) ── */
--sh1:0 1px 2px rgba(10,25,18,.04),0 2px 6px rgba(10,25,18,.05);
--sh2:0 2px 6px rgba(10,25,18,.06),0 8px 24px rgba(10,25,18,.08);
--sh3:0 4px 12px rgba(10,25,18,.08),0 18px 48px rgba(10,25,18,.14);
/* ── Motion ── */
--ease:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.22,.68,0,1.2);
/* ── Spacing — 4pt grid (extended) ── */
--sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
--sp6:32px; --sp7:48px; --sp8:64px;
/* ── Font ── */
--ff:'IBM Plex Sans Arabic',system-ui,sans-serif;
/* Type scale — Major Third (1.25), base 16px → larger, readable */
--fz-xs:11px; --fz-sm:13px; --fz-base:14px;
--fz-md:16px; --fz-lg:20px; --fz-xl:25px; --fz-2xl:31px;
}
html,body{
height:100%;font-family:var(--ff);
background:var(--bg);color:var(--t1);
font-size:var(--fz-base);line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
button{font-family:var(--ff);cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:var(--ff)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* ═══════════════════════════════════════════════════════════════
LOGIN
═══════════════════════════════════════════════════════════════ */
#login-screen{
position:fixed;inset:0;z-index:1000;
background:var(--g1);
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
#login-screen::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(16,185,129,.14) 0%,transparent 65%);
}
#login-screen.hidden{display:none}
.login-wrap{
position:relative;z-index:1;
display:flex;flex-direction:column;align-items:center;
gap:28px;width:100%;max-width:400px;padding:20px;
}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.login-logo-mark{
width:64px;height:64px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
display:flex;align-items:center;justify-content:center;
}
.login-logo-mark svg{width:40px;height:40px}
.login-brand-text h1{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.4px}
.login-brand-text span{
display:block;font-size:10px;font-weight:500;
color:rgba(255,255,255,.28);letter-spacing:3px;
text-transform:uppercase;margin-top:4px;
}
.login-card{
width:100%;background:rgba(255,255,255,.97);
border-radius:20px;padding:32px 28px 28px;
box-shadow:0 20px 60px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.1);
}
.login-card-title{
font-size:15px;font-weight:700;color:var(--t2);
margin-bottom:22px;text-align:center;
}
.lf{margin-bottom:16px}
.lf label{
display:block;font-size:10px;font-weight:700;color:var(--t3);
margin-bottom:7px;letter-spacing:.6px;text-transform:uppercase;
}
.lf input{
width:100%;padding:11px 14px;
border:1.5px solid var(--s3);border-radius:var(--r3);
font-size:14px;color:var(--t1);background:var(--s1);
outline:none;transition:border-color .16s,box-shadow .16s;
}
.lf input:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.login-btn{
width:100%;padding:13px;margin-top:4px;
background:var(--g3);color:#fff;
border-radius:var(--r3);font-size:14px;font-weight:700;
transition:background .15s,transform .1s,box-shadow .15s;
box-shadow:0 4px 12px rgba(15,45,30,.28);
}
.login-btn:hover{background:var(--g4);transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,45,30,.34)}
.login-btn:active{transform:none;background:var(--g2)}
.login-btn:disabled{background:var(--s3);color:var(--t4);cursor:not-allowed;transform:none;box-shadow:none}
.login-err{color:var(--red);font-size:12px;margin-top:10px;text-align:center;min-height:18px}
.login-hint{font-size:11px;color:var(--t4);text-align:center;margin-top:14px}
.login-divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--s3)}
.login-divider span{font-size:10px;color:var(--t4)}
/* ═══════════════════════════════════════════════════════════════
PM VIEW — SHELL
═══════════════════════════════════════════════════════════════ */
#app{display:none;height:100vh;overflow:hidden;flex-direction:row}
#app.visible{display:flex;height:100vh;overflow:hidden}
/* ── Portfolio App — base layout ───────────────────────────── */
#portfolio-app{
display:none;
height:100vh;
overflow:hidden;
flex-direction:column;
background:var(--bg);
position:fixed;
inset:0;
z-index:100;
}.view-exit{opacity:0;transform:translateX(20px);transition:opacity .2s,transform .2s}
.view-enter{animation:viewIn .26s cubic-bezier(.22,.68,0,1.2)}
@keyframes viewIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar{
width:236px;min-width:236px;
background:linear-gradient(180deg,var(--g1) 0%,#0A2016 100%);
display:flex;flex-direction:column;
border-left:1px solid rgba(255,255,255,.05);
height:100vh;
flex-shrink:0;
}
.sb-brand{
padding:20px 16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;gap:11px;
}
.sb-logo{
width:34px;height:34px;border-radius:8px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-logo svg{width:20px;height:20px}
.sb-brand-text h1{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.1px}
.sb-brand-text p{font-size:10px;color:rgba(255,255,255,.28);margin-top:1px;letter-spacing:2px;text-transform:uppercase}
.nav-section{padding:12px 8px;flex:1;overflow-y:auto;scrollbar-width:none}
.nav-section::-webkit-scrollbar{display:none}
.nav-label{
font-size:10px;color:rgba(255,255,255,.22);
letter-spacing:2px;text-transform:uppercase;
padding:0 10px;margin-bottom:3px;margin-top:8px;display:block;
}
.nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 12px;border-radius:var(--r3);
cursor:pointer;color:rgba(255,255,255,.5);
font-size:13px;font-weight:500;
transition:background .14s,color .14s;margin-bottom:2px;
position:relative;min-height:42px;
border:1px solid transparent;
overflow:hidden;white-space:nowrap;}
.nav-item:hover{
background:rgba(255,255,255,.07);
color:rgba(255,255,255,.88);
border-color:rgba(255,255,255,.04);
}
.nav-item.active{
background:linear-gradient(90deg,var(--accent-soft),rgba(16,185,129,.04));
color:#fff;font-weight:700;
border-color:rgba(16,185,129,.20);
}
.nav-item.active::before{
content:'';position:absolute;right:0;top:18%;bottom:18%;
width:3px;background:var(--accent);border-radius:4px 0 0 3px;
box-shadow:0 0 10px rgba(16,185,129,.6);
}
.nav-icon{
width:28px;height:28px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:14px;flex-shrink:0;
background:rgba(255,255,255,.05);
color:rgba(255,255,255,.38);
transition:all .14s;border:1px solid rgba(255,255,255,.04);
}
.nav-item.active .nav-icon{
background:rgba(16,185,129,.18);
color:var(--accent);
border-color:rgba(16,185,129,.24);
}
.nav-item:hover .nav-icon{color:rgba(255,255,255,.75);background:rgba(255,255,255,.08)}
.sb-user{
padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;gap:9px;
}
.uav{
width:32px;height:32px;border-radius:50%;
background:rgba(255,255,255,.1);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;flex-shrink:0;
border:1.5px solid rgba(255,255,255,.14);
}
.uinfo{flex:1;min-width:0}
.uname{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urole{font-size:10px;color:rgba(255,255,255,.3);margin-top:1px;text-transform:uppercase;letter-spacing:.5px}
.logout-btn{
background:none;color:rgba(255,255,255,.22);
font-size:15px;padding:6px;border-radius:8px;
transition:all .14s;flex-shrink:0;
}
.logout-btn:hover{color:#ff6b6b;background:rgba(220,50,50,.12)}
/* ── Main area ───────────────────────────────────────────────── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0;min-height:0}
/* ── Topbar ──────────────────────────────────────────────────── */
.topbar{
background:var(--s0);
border-bottom:1px solid var(--b0);
padding:13px 24px;
display:flex;align-items:center;justify-content:space-between;
position:sticky;top:0;z-index:20;
box-shadow:0 1px 0 var(--b0),0 4px 16px rgba(0,0,0,.05);
gap:12px;
}
.topbar-title{font-size:var(--fz-lg);font-weight:800;color:var(--t1);letter-spacing:-.3px;line-height:1.2}
.topbar-sub{
font-size:11px;color:var(--t4);margin-top:3px;
display:flex;align-items:center;gap:6px;
}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;transition:background .3s}
.dot-green{background:#22C55E;animation:pulse-dot 2.5s infinite}
.dot-grey{background:var(--s4)}
.dot-red{background:var(--red);animation:pulse-dot 1.8s infinite}
.dot-loading{background:var(--amber);animation:pulse-dot 1s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.28}}
.topbar-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary{
padding:9px 18px;background:var(--g3);color:#fff;
border-radius:var(--r3);font-size:13px;font-weight:700;
display:inline-flex;align-items:center;gap:6px;
transition:background .14s,transform .1s,box-shadow .14s;
box-shadow:0 2px 8px rgba(15,45,30,.25),0 1px 2px rgba(15,45,30,.15);
letter-spacing:.1px;
}
.btn-primary:hover{background:var(--g4);transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,45,30,.3)}
.btn-primary:active{transform:translateY(1px);background:var(--g2);box-shadow:none}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sec{
padding:8px 14px;background:var(--s0);color:var(--t2);
border-radius:var(--r3);font-size:13px;font-weight:600;
border:1.5px solid var(--b1);
display:inline-flex;align-items:center;gap:5px;
transition:all .14s;
}
.btn-sec:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
.btn-sec:disabled{opacity:.5;cursor:not-allowed}.btn-lbl{display:inline}
.spinning{animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Pages ───────────────────────────────────────────────────── */
.page{padding:var(--sp5) var(--sp5) var(--sp7);display:none;flex-direction:column;gap:var(--sp5)}
.page.active{display:flex;flex-direction:column;animation:pageIn .22s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ═══════════════════════════════════════════════════════════════
KPI CARDS — redesigned for consistency
═══════════════════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp4)}
.kpi-card{
background:var(--s0);border-radius:var(--r);
padding:var(--sp5) var(--sp4) var(--sp4);
box-shadow:var(--sh1);border:1px solid var(--b0);
position:relative;overflow:hidden;
transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
cursor:default;
display:flex;flex-direction:column;
}
.kpi-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
/* accent line top */
.kpi-card::before{
content:'';position:absolute;top:0;right:0;left:0;
height:3px;border-radius:var(--r) var(--r) 0 0;
}
.kpi-card.c-brand::before{background:var(--g4)}
.kpi-card.c-amber::before{background:var(--amber)}
.kpi-card.c-red::before{background:var(--red)}
.kpi-card.c-blue::before{background:var(--blue)}
.kpi-card.c-green::before{background:var(--green)}
.kpi-card.c-purple::before{background:var(--purple)}
/* icon */
.kpi-ic{
width:36px;height:36px;border-radius:var(--r2);
display:flex;align-items:center;justify-content:center;
font-size:var(--fz-md);margin-bottom:var(--sp3);
}
.c-brand .kpi-ic{background:var(--g5);color:var(--g3)}
.c-amber .kpi-ic{background:var(--amber-bg);color:var(--amber)}
.c-red .kpi-ic{background:var(--red-bg);color:var(--red)}
.c-blue .kpi-ic{background:var(--blue-bg);color:var(--blue)}
.c-green .kpi-ic{background:var(--green-bg);color:var(--green)}
.c-purple .kpi-ic{background:var(--purple-bg);color:var(--purple)}
/* value */
.kv{font-size:var(--fz-2xl);font-weight:800;line-height:1;margin-bottom:var(--sp1);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.c-brand .kv{color:var(--g2)} .c-amber .kv{color:var(--amber)} .c-red .kv{color:var(--red)}
.c-blue .kv{color:var(--blue)} .c-green .kv{color:var(--green)} .c-purple .kv{color:var(--purple)}
.kl{font-size:var(--fz-base);color:var(--t1);font-weight:700;line-height:1.3}
.ks{font-size:var(--fz-xs);color:var(--t4);margin-top:var(--sp1);line-height:1.4}
/* ═══════════════════════════════════════════════════════════════
CHART CARDS
═══════════════════════════════════════════════════════════════ */
.charts-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:var(--sp4);margin-bottom:var(--sp1)}
.chart-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1)}
.card-title{
font-size:var(--fz-xs);font-weight:700;margin-bottom:var(--sp4);
color:var(--t3);display:flex;align-items:center;gap:var(--sp2);
text-transform:uppercase;letter-spacing:.6px;
}
.card-title-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.ring-wrap canvas{max-width:130px;max-height:130px}
.ring-legend{display:flex;flex-direction:column;gap:7px;width:100%}
.rl-item{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.rl-dot{width:7px;height:7px;border-radius:4px;margin-left:7px;flex-shrink:0}
.rl-label{color:var(--t2);display:flex;align-items:center}
.rl-val{font-weight:800;color:var(--t1)}
/* team bars */
.tm{margin-bottom:12px}.tm:last-child{margin-bottom:0}
.tm-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.tm-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--t1)}
.av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.av-brand{background:var(--g3)}.av-teal{background:var(--blue)}.av-amber{background:var(--amber)}.av-purple{background:var(--purple)}
.tm-cnt{font-size:12px;color:var(--t3);font-weight:500}
.pb{height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
/* ═══════════════════════════════════════════════════════════════
SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.sec-hd{display:flex;align-items:center;justify-content:space-between}
.sec-hd h2{font-size:var(--fz-md);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.sec-hd p{font-size:var(--fz-sm);color:var(--t3)}
/* ═══════════════════════════════════════════════════════════════
FILTER BAR
═══════════════════════════════════════════════════════════════ */
.filter-bar{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);padding:var(--sp4) var(--sp5);
display:flex;flex-direction:column;gap:var(--sp3);
box-shadow:var(--sh1);
}
.filter-row{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.filter-label{font-size:var(--fz-xs);font-weight:700;color:var(--t4);min-width:70px;letter-spacing:.5px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.chip{
padding:7px 14px;border-radius:999px;
background:var(--s1);border:1.5px solid var(--b1);
color:var(--t3);font-size:var(--fz-sm);cursor:pointer;
transition:background .15s var(--ease),color .15s,border-color .15s,transform .12s;
white-space:nowrap;font-weight:600;
user-select:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;
}
.chip:hover{border-color:var(--g4);color:var(--g3);background:var(--g6);transform:translateY(-1px)}
.chip.on{
background:var(--g3);border-color:var(--g3);color:#fff;
font-weight:700;box-shadow:0 2px 8px rgba(27,100,67,.22);
}
.chip.on::before{content:'✓';font-size:11px;font-weight:800;margin-inline-end:1px}
.chip.danger.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 2px 8px rgba(195,43,39,.25)}
.sw{position:relative;flex:1;min-width:200px}
.sw input{
width:100%;padding:10px 14px;
border:1px solid var(--b1);border-radius:var(--r3);
font-size:var(--fz-base);background:var(--s1);color:var(--t1);
outline:none;transition:border-color .16s,background .16s,box-shadow .16s;
font-family:var(--ff);min-height:40px;
}
.sw input:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.ri{font-size:var(--fz-sm);color:var(--t3);display:flex;align-items:center;gap:var(--sp2)}
.rc{font-weight:700;color:var(--g3);background:var(--g5);padding:3px 11px;border-radius:999px;font-size:var(--fz-xs)}
/* ═══════════════════════════════════════════════════════════════
TABLE
═══════════════════════════════════════════════════════════════ */
.tw{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.dt{width:100%;border-collapse:collapse;table-layout:auto}
.dt thead th{
position:sticky;top:0;z-index:2;
padding:12px 14px;background:var(--s1);
backdrop-filter:blur(8px);
font-size:var(--fz-xs);font-weight:700;color:var(--t4);
text-align:right;border-bottom:1px solid var(--b1);
letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
}
.dt td{
padding:13px 14px;border-bottom:1px solid var(--b0);
font-size:var(--fz-sm);vertical-align:middle;color:var(--t2);
transition:background .12s;
}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:var(--g6);transition:background .14s}
/* ═══════════════════════════════════════════════════════════════
BADGES
═══════════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:var(--fz-xs);font-weight:700}
.b-open{background:var(--g5);color:var(--g3)}
.b-prog{background:var(--amber-bg);color:var(--amber)}
.b-done{background:var(--green-bg);color:var(--green)}
.b-urgent{background:var(--red-bg);color:var(--red)}
.b-high{background:#FFF3EA;color:#B85000}
.b-normal{background:var(--g5);color:var(--g3)}
.b-low{background:var(--s2);color:var(--t3)}
.badge-ext{
display:inline-flex;align-items:center;
background:var(--amber-bg);color:var(--amber);
border:1px solid rgba(168,90,4,.20);
border-radius:6px;font-size:10px;font-weight:700;
padding:1px 6px;margin-right:4px;vertical-align:middle;
}
/* ═══════════════════════════════════════════════════════════════
EMPTY STATE
═══════════════════════════════════════════════════════════════ */
.empty{
text-align:center;padding:48px 20px;
display:flex;flex-direction:column;align-items:center;gap:10px;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);box-shadow:var(--sh1);
}
.empty .ei{font-size:40px;opacity:.3;line-height:1}
.empty p{font-size:13px;color:var(--t4);line-height:1.7;max-width:260px}
/* ═══════════════════════════════════════════════════════════════
ACTION BUTTONS
═══════════════════════════════════════════════════════════════ */
.act-btns{display:flex;gap:var(--sp1);justify-content:center;align-items:center}
.act-btn{
width:34px;height:34px;border-radius:var(--r3);
display:flex;align-items:center;justify-content:center;
font-size:var(--fz-sm);font-weight:700;cursor:pointer;
transition:background .14s var(--ease),color .14s,border-color .14s,transform .1s;
flex-shrink:0;
border:1px solid var(--b1);
}
.act-btn:active{transform:scale(.92)}
/* individual button styles */
.act-btn-start{background:var(--blue-bg);color:var(--blue)}
.act-btn-start:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.act-btn-complete{background:var(--g5);color:var(--g3)}
.act-btn-complete:hover{background:var(--g3);color:#fff;border-color:var(--g3)}
.act-btn-due{background:var(--purple-bg);color:var(--purple);font-size:11px}
.act-btn-due:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.act-btn-ass{background:var(--blue-bg);color:var(--blue);font-size:11px}
.act-btn-ass:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.act-btn-move{background:var(--g5);color:var(--g3);font-size:11px}
.act-btn-move:hover{background:var(--g3);color:#fff;border-color:var(--g3)}
.act-done-mark{color:var(--t4);font-size:13px}
/* ═══════════════════════════════════════════════════════════════
KPI CARD PROGRESS BAR
═══════════════════════════════════════════════════════════════ */
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.kpi-bar-wrap{height:4px;background:var(--s3);border-radius:4px;overflow:hidden;margin-top:8px}
.kpi-bar-fill{height:100%;border-radius:4px;background:currentColor;transition:width .6s var(--ease)}
.c-brand .kpi-bar-fill{background:var(--g4)}
.c-amber .kpi-bar-fill{background:var(--amber)}
.c-red .kpi-bar-fill{background:var(--red)}
.c-blue .kpi-bar-fill{background:var(--blue)}
.c-green .kpi-bar-fill{background:var(--green)}
.c-purple .kpi-bar-fill{background:var(--purple)}
/* ═══════════════════════════════════════════════════════════════
OVERVIEW — URGENT FILTER BAR
═══════════════════════════════════════════════════════════════ */
.urgent-hd{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:10px;margin-bottom:12px;
}
.urgent-hd h2{font-size:14px;font-weight:800;color:var(--t1)}
.urgent-filters{display:flex;gap:5px;flex-wrap:wrap}
.uf-btn{
padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;
background:var(--s2);color:var(--t3);border:1px solid var(--b0);
cursor:pointer;transition:all .16s;white-space:nowrap;
}
.uf-btn:hover{background:var(--s3);color:var(--t1)}
.uf-btn.on{background:var(--g3);color:#fff;border-color:var(--g3)}
/* Row color hints in urgent table */
.trow-tc-red td{background:rgba(192,48,42,.04)}
.trow-tc-purple td{background:rgba(94,50,176,.04)}
.trow-tc-yellow td{background:rgba(200,130,0,.04)}
/* ═══════════════════════════════════════════════════════════════
GANTT
═══════════════════════════════════════════════════════════════ */
.gw{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.gt-row{display:flex;border-bottom:1px solid var(--b0)}
.gn-col{min-width:180px;width:180px;border-left:1px solid var(--b0);background:var(--s1);flex-shrink:0}
.gn-head{padding:9px 13px;font-size:10px;font-weight:700;color:var(--t4);border-bottom:1px solid var(--b1);letter-spacing:.5px;text-transform:uppercase}
.gd-head{flex:1;display:flex;border-bottom:1px solid var(--b1);background:var(--s1);overflow:hidden}
.gday{flex:1;text-align:center;padding:5px 1px;font-size:10px;color:var(--t4);border-left:1px solid var(--b0);min-width:0;line-height:1.3}
.gday.tc{background:var(--g5);color:var(--g3);font-weight:700}
.gb-row{display:flex}
.gn-rows{min-width:180px;width:180px;border-left:1px solid var(--b0);flex-shrink:0}
.gn-cell{padding:7px 13px;height:35px;border-bottom:1px solid var(--b0);display:flex;align-items:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2)}
.gn-cell:last-child{border-bottom:none}
.gc-area{flex:1;position:relative;overflow:hidden}
.gg{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;pointer-events:none}
.ggc{flex:1;border-left:1px solid var(--b0)}.ggc.tc{background:var(--g6)}
.gr-wrap{position:relative;z-index:1}
.gr{height:35px;border-bottom:1px solid var(--b0);position:relative}.gr:last-child{border-bottom:none}
.gbar{position:absolute;height:19px;top:8px;border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:11px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:4px;transition:filter .14s}
.gbar:hover{filter:brightness(1.1)}
.tline{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);z-index:5;opacity:.5}
.nodate-sec{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.nodate-sec h3{padding:11px 15px;font-size:10px;font-weight:700;color:var(--t4);border-bottom:1px solid var(--b0);text-transform:uppercase;letter-spacing:.5px}
/* ═══════════════════════════════════════════════════════════════
REPORTS
═══════════════════════════════════════════════════════════════ */
.rep-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--sp3)}
.rep-header-left h2{font-size:var(--fz-lg);font-weight:800;color:var(--t1);letter-spacing:-.3px}
.rep-header-left p{font-size:var(--fz-sm);color:var(--t3);margin-top:3px}
.rep-badge{background:var(--g2);color:#fff;padding:8px 15px;border-radius:999px;font-size:var(--fz-sm);font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.rep-date-txt{font-size:var(--fz-xs);color:rgba(255,255,255,.55);margin-top:2px}
.board-box{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);border-right:3px solid var(--g4)}
.board-box h3{font-size:var(--fz-xs);font-weight:700;color:var(--g3);margin-bottom:var(--sp3);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.5px}
.board-highlights{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp3)}
.bh-item{background:var(--g6);border:1px solid var(--b0);border-radius:var(--r3);padding:var(--sp3) var(--sp4);display:flex;align-items:center;gap:var(--sp3);transition:background .15s,border-color .15s}
.bh-item:hover{background:var(--g5);border-color:var(--b1)}
.bh-icon{font-size:var(--fz-lg);flex-shrink:0}
.bh-text strong{display:block;font-size:var(--fz-base);font-weight:800;color:var(--t1);line-height:1.3}
.bh-text span{font-size:var(--fz-xs);color:var(--t3)}
.charts-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.rep-table-sec{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.rep-table-hd{padding:var(--sp3) var(--sp5);border-bottom:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between;background:var(--s1)}
.rep-table-hd h3{font-size:var(--fz-sm);font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px}
.rep-cnt{font-size:var(--fz-xs);color:var(--t3);background:var(--s2);padding:3px 10px;border-radius:12px;font-weight:600}
/* KPI cards for reports */
.rep-kpi-card-pro{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);
display:flex;align-items:center;gap:var(--sp4);min-height:108px;
transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
}
.rep-kpi-card-pro:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.rep-kpi-ring{flex-shrink:0}
.rep-kpi-body{flex:1;min-width:0}
.rep-kpi-val{font-size:var(--fz-2xl);font-weight:800;line-height:1.05;margin-bottom:3px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.rep-kpi-title{font-size:var(--fz-sm);font-weight:700;color:var(--t2);margin-bottom:2px}
.rep-kpi-sub{font-size:var(--fz-xs);color:var(--t4)}
.rep-kpi-badge{font-size:var(--fz-xs);font-weight:700;margin-top:6px}
#rep-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp4)}
/* ═══════════════════════════════════════════════════════════════
MODAL
═══════════════════════════════════════════════════════════════ */
.overlay{
position:fixed;inset:0;background:rgba(8,22,14,.48);
z-index:200;display:none;align-items:center;justify-content:center;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.overlay.open{display:flex}
.modal{
background:var(--s0);border-radius:var(--r);
width:560px;max-width:96vw;
box-shadow:var(--sh3);overflow:hidden;
animation:modal-in .24s var(--ease-out);
border:1px solid var(--b0);
}
.modal-sm{width:400px}
@keyframes modal-in{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
/* mhd — see unified modal header section below */
.mx{
width:32px;height:32px;border-radius:50%;
background:var(--s2);display:flex;align-items:center;justify-content:center;
color:var(--t3);font-size:var(--fz-base);cursor:pointer;
transition:background .14s,color .14s,border-color .14s;border:1px solid var(--b0);
}
.mx:hover{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.mbd{padding:var(--sp5);display:flex;flex-direction:column;gap:var(--sp4)}
.fr{display:flex;flex-direction:column;gap:var(--sp2)}
.fr label{font-size:var(--fz-xs);font-weight:700;color:var(--t4);letter-spacing:.5px;text-transform:uppercase}
.fr input,.fr select,.fr textarea{
padding:11px 13px;border:1px solid var(--b1);
border-radius:var(--r3);font-size:var(--fz-base);color:var(--t1);
background:var(--s1);outline:none;transition:border-color .16s,background .16s,box-shadow .16s;
font-family:var(--ff);
}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.fr textarea{resize:vertical;min-height:80px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.mft{
padding:var(--sp4) var(--sp5);border-top:1px solid var(--b0);
display:flex;justify-content:flex-end;gap:var(--sp2);
align-items:center;background:var(--s1);
}
.bc{
padding:10px 18px;background:var(--s2);border-radius:var(--r3);
font-size:var(--fz-base);color:var(--t2);font-weight:600;
transition:background .14s,border-color .14s;border:1px solid var(--b1);
min-height:40px;cursor:pointer;font-family:var(--ff);
}
.bc:hover{background:var(--s3);border-color:var(--b2)}
.mmsg{font-size:var(--fz-sm);flex:1}
.mmsg.ok{color:var(--green)}.mmsg.err{color:var(--red)}.mmsg.wait{color:var(--amber)}
/* ── Unified Modal Header Variants ────────────────────────── */
.mhd{
padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--b0);
display:flex;align-items:center;gap:var(--sp3);
background:var(--s1);
}
.mhd-icon{
width:42px;height:42px;border-radius:var(--r2);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:var(--fz-lg);background:var(--s2);border:1px solid var(--b1);
}
.mhd-info{flex:1;min-width:0}
.mhd-info h2{font-size:var(--fz-md);font-weight:800;color:var(--t1);line-height:1.3;letter-spacing:-.2px}
.mhd-sub{font-size:var(--fz-xs);color:var(--t4);margin-top:3px;font-weight:500}
/* Header accent strips */
.mhd-purple{border-top:3px solid var(--purple)}
.mhd-purple .mhd-icon{background:var(--purple-bg);color:var(--purple);border-color:rgba(99,48,184,.18)}
.mhd-blue{border-top:3px solid var(--blue)}
.mhd-blue .mhd-icon{background:var(--blue-bg);color:var(--blue);border-color:rgba(11,101,163,.18)}
.mhd-green{border-top:3px solid var(--g4)}
.mhd-green .mhd-icon{background:var(--g5);color:var(--g3);border-color:rgba(45,122,87,.18)}
.mhd-amber{border-top:3px solid var(--amber)}
.mhd-amber .mhd-icon{background:var(--amber-bg);color:var(--amber);border-color:rgba(168,90,4,.20)}
/* ── Unified modal task preview ─────────────────────────────── */
.modal-task-preview{
background:var(--s1);border:1px solid var(--b1);
border-radius:var(--r3);padding:11px 14px;
font-size:13px;font-weight:700;color:var(--t1);
line-height:1.5;position:relative;overflow:hidden;
}
.modal-task-preview::before{
content:'';position:absolute;right:0;top:0;bottom:0;
width:3px;background:var(--g4);border-radius:0 3px 3px 0;
}
/* ── Modal info row (current value display) ─────────────────── */
.modal-info-row{
display:flex;align-items:center;gap:8px;
font-size:12px;padding:7px 12px;
background:var(--s2);border-radius:var(--r3);
border:1px solid var(--b0);
}
.modal-info-label{color:var(--t4);font-weight:600;flex-shrink:0}
.modal-info-val{color:var(--t2);font-weight:700}
/* ── Modal hint box ─────────────────────────────────────────── */
.modal-hint{
display:flex;align-items:flex-start;gap:7px;
font-size:12px;color:var(--t3);line-height:1.6;
background:var(--purple-bg);border-radius:var(--r3);
padding:9px 12px;border:1px solid rgba(99,48,184,.12);
}
.modal-hint-icon{flex-shrink:0;color:var(--purple);font-weight:700;font-size:13px}
/* ── Modal select enhanced ─────────────────────────────────── */
.modal-select{
padding:10px 12px;border:1.5px solid var(--b1);
border-radius:var(--r3);font-size:13px;color:var(--t1);
background:var(--s1);outline:none;transition:all .16s;
width:100%;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FB09F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:left 12px center;
padding-left:34px;
}
.modal-select:focus{border-color:var(--g4);background-color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
/* ── Modal date input ─────────────────────────────────────── */
.modal-date-input{
padding:10px 12px;border:1.5px solid var(--b1);
border-radius:var(--r3);font-size:13px;color:var(--t1);
background:var(--s1);outline:none;transition:all .16s;width:100%;
}
.modal-date-input:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(99,48,184,.09)}
/* ── Modal action buttons ──────────────────────────────────── */
.btn-modal-purple{
padding:9px 18px;border-radius:var(--r3);font-size:13px;font-weight:700;
background:var(--purple);color:#fff;border:none;
transition:all .16s;cursor:pointer;letter-spacing:.1px;
}
.btn-modal-purple:hover{background:#7940cc;box-shadow:0 4px 12px rgba(99,48,184,.3)}
.btn-modal-purple:disabled{opacity:.6;cursor:not-allowed}
.btn-modal-blue{
padding:9px 18px;border-radius:var(--r3);font-size:13px;font-weight:700;
background:var(--blue);color:#fff;border:none;
transition:all .16s;cursor:pointer;letter-spacing:.1px;
}
.btn-modal-blue:hover{background:#0a58a0;box-shadow:0 4px 12px rgba(11,101,163,.3)}
.btn-modal-blue:disabled{opacity:.6;cursor:not-allowed}
/* Task name preview in modals — keep for backward compat */
.move-task-preview{
background:var(--g6);border:1px solid var(--b0);
border-right:3px solid var(--g4);
border-radius:var(--r3);padding:10px 13px;
font-size:13px;font-weight:700;color:var(--t1);
}
/* Approval modal */
.approval-task-preview{
background:var(--g6);border:1px solid var(--b0);
border-right:3px solid var(--g4);
border-radius:var(--r3);padding:11px 13px;
font-size:13px;font-weight:700;color:var(--t1);
}
.approval-question{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:9px}
.approval-hint{
font-size:12px;color:var(--t3);line-height:1.65;
background:var(--amber-bg);border-radius:var(--r3);
padding:10px 12px;border:1px solid rgba(168,90,4,.16);
}
.approval-hint strong{color:var(--amber)}
.approval-hint em{color:var(--g3);font-style:normal;font-weight:600}
.approval-no-btn{
background:var(--amber-bg);color:var(--amber);
border:1px solid rgba(168,90,4,.24);
transition:background .13s,color .13s;
}
.approval-no-btn:hover{background:var(--amber);color:#fff;border-color:var(--amber)}
/* ═══════════════════════════════════════════════════════════════
TOAST
═══════════════════════════════════════════════════════════════ */
#toast{
position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--g1);color:#fff;
padding:11px 20px;border-radius:20px;
font-size:13px;font-weight:600;
box-shadow:0 8px 28px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.1);
z-index:9999;opacity:0;pointer-events:none;
transition:opacity .22s var(--ease),transform .22s var(--ease);
white-space:nowrap;max-width:calc(100vw - 40px);
border:1px solid rgba(255,255,255,.08);
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--g3)}
#toast.err{background:var(--red)}
/* ═══════════════════════════════════════════════════════════════
PROJECT GRID (shared by both old pc2 and new prj-card)
═══════════════════════════════════════════════════════════════ */
.pg-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp4)}
.pc2{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);box-shadow:var(--sh1);
overflow:hidden;transition:box-shadow .18s,transform .16s;
}
.pc2:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pc2-top{padding:16px 18px 13px;display:flex;align-items:flex-start;gap:13px}
.pc2-ring{flex-shrink:0}
.pc2-meta{flex:1;min-width:0}
.pc2-name{font-size:13px;font-weight:800;color:var(--t1);line-height:1.3;margin-bottom:6px}
.pc2-stats-row{display:flex;gap:10px;flex-wrap:wrap}
.pc2-stat-item{display:flex;flex-direction:column;align-items:center;min-width:44px}
.pc2-stat-val{font-size:17px;font-weight:800}.pc2-stat-lbl{font-size:10px;color:var(--t4);margin-top:1px}
.pc2-tasks{padding:9px 17px}
.pc2-task-item{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--b0);font-size:12px}
.pc2-task-item:last-child{border-bottom:none}
.pc2-task-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pc2-task-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.pc2-task-date{font-size:11px;color:var(--t4);white-space:nowrap}
.pc2-footer{padding:9px 18px;background:var(--s1);display:flex;align-items:center;justify-content:space-between;gap:9px}
.pc2-pct{font-size:12px;font-weight:700;color:var(--g3);white-space:nowrap}
.pc2-bar{flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.pc2-bar-fill{height:100%;border-radius:4px;transition:width .8s var(--ease)}
.pc2-wbs-btn{
display:flex;align-items:center;justify-content:center;gap:5px;
padding:10px 0;width:100%;background:none;border:none;
border-top:1px solid var(--b0);color:var(--g3);
font-size:12px;font-weight:600;cursor:pointer;
border-radius:0 0 var(--r2) var(--r2);
transition:background .13s,color .13s;font-family:var(--ff);
}
.pc2-wbs-btn:hover{background:var(--g5);color:var(--g2)}
/* ═══════════════════════════════════════════════════════════════
TEAM CARDS V2
═══════════════════════════════════════════════════════════════ */
.tg-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp4)}
.tm2-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s}
.tm2-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.tm2-hd{display:flex;align-items:center;gap:var(--sp4);margin-bottom:var(--sp4)}
.tm2-gauge-wrap{flex-shrink:0}
.tm2-info{flex:1;min-width:0}
.tm2-name{font-size:var(--fz-md);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.tm2-role{font-size:var(--fz-xs);color:var(--t4);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.tm2-load{margin-top:6px}
.tm2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp2);margin-bottom:var(--sp4)}
.tm2-stat{background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);padding:9px 4px;text-align:center;transition:background .15s}
.tm2-stat:hover{background:var(--s2)}
.tm2-stat-val{font-size:var(--fz-md);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums}
.tm2-stat-lbl{font-size:var(--fz-xs);color:var(--t4);margin-top:2px;font-weight:600}
.tm2-tasks{border-top:1px solid var(--b0);padding-top:var(--sp3)}
.tm2-task-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp2)}
.tm2-task-row{display:flex;align-items:center;gap:var(--sp2);padding:5px 0;border-bottom:1px solid var(--b0);font-size:var(--fz-sm)}
.tm2-task-row:last-child{border-bottom:none}
.tm2-task-name{color:var(--t2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm2-task-date{font-size:var(--fz-xs);color:var(--t4);white-space:nowrap}
/* ═══════════════════════════════════════════════════════════════
ORG CHART
═══════════════════════════════════════════════════════════════ */
/* Keep old classes for backward compat in portfolio card view */
.org-tree-wrap{padding:22px 14px;overflow-x:auto}
.org-root{display:flex;flex-direction:column;align-items:center;min-width:fit-content}
.org-proj-bar{height:3px;background:var(--s3);border-radius:4px;overflow:hidden;margin-bottom:8px}
.org-proj-bar-fill{height:100%;border-radius:4px;transition:width .8s var(--ease)}
.org-proj-stat{font-size:10px;padding:2px 6px;border-radius:8px;font-weight:600;display:inline-block}
.org-proj-stat.late{background:var(--red-bg);color:var(--red)}.org-proj-stat.prog{background:var(--amber-bg);color:var(--amber)}
.org-proj-stat.done{background:var(--green-bg);color:var(--green)}.org-proj-stat.total{background:var(--g5);color:var(--g3)}
/* ═══════════════════════════════════════════════════════════════
PORTFOLIO STRUCTURE — نظام الهيكلة الديناميكية
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PORTFOLIO STRUCTURE — Org Chart + Project Page
═══════════════════════════════════════════════════════════════ */
/* ── Toolbar ─────────────────────────────────────────────── */
.ps-wrap{width:100%}
.ps-toolbar{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:10px 14px;background:var(--g1);border-radius:var(--r);
margin-bottom:16px;
}
.ps-tabs{display:flex;gap:3px;background:rgba(255,255,255,.1);border-radius:8px;padding:3px;flex:1}
.ps-tab{
flex:1;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;
color:rgba(255,255,255,.6);background:transparent;border:none;cursor:pointer;
transition:all .18s;white-space:nowrap;
}
.ps-tab.active{background:#fff;color:var(--g2);box-shadow:0 1px 6px rgba(0,0,0,.2)}
.ps-tab:not(.active):hover{color:#fff;background:rgba(255,255,255,.15)}
.ps-btn-edit{
padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
cursor:pointer;transition:all .16s;white-space:nowrap;
}
.ps-btn-edit:hover{background:rgba(255,255,255,.22)}
.ps-btn-save{
padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
background:var(--accent);color:var(--g1);border:none;cursor:pointer;
transition:all .16s;white-space:nowrap;
}
.ps-btn-save:hover{filter:brightness(1.1)}
.ps-btn-save:disabled{opacity:.6;cursor:not-allowed}
.ps-btn-cancel{
padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;
background:rgba(192,48,42,.25);color:#fca5a5;border:1px solid rgba(192,48,42,.3);
cursor:pointer;transition:all .16s;white-space:nowrap;
}
.ps-btn-cancel:hover{background:rgba(192,48,42,.4)}
.ps-edit-hint{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}
/* ── Org Tree container ───────────────────────────────────── */
.ps-org-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.ps-org-tree{
display:flex;flex-direction:column;
align-items:center;
min-width:600px;
padding:4px 16px 20px;
}
/* Root node */
.ps-org-root{
display:flex;flex-direction:column;align-items:center;
width:100%;
}
.ps-org-root-node{
background:var(--g2);color:#fff;
border-radius:var(--r);padding:13px 28px;
display:inline-flex;align-items:center;gap:10px;
box-shadow:0 6px 24px rgba(15,45,30,.4);
white-space:nowrap;
}
.ps-org-root-text{display:flex;flex-direction:column;gap:2px}
.ps-org-root-title{font-size:14px;font-weight:800;letter-spacing:-.2px}
.ps-org-root-sub{font-size:11px;font-weight:400;opacity:.72}
.ps-org-root-stem{width:2px;height:24px;background:var(--g4)}
/* Views — no slider, use display:none/block toggle instead */
.ps-views-slider{width:100%}
.ps-views-track{width:100%}
.ps-org-view{
display:none;
flex-direction:column;
align-items:center;
width:100%;
}
.ps-org-view.active{display:flex}
/* H-rail connecting stem to groups */
.ps-org-h-rail{
height:2px;background:var(--g4);
width:80%;max-width:700px;
margin:0 auto;
flex-shrink:0;
}
.ps-org-groups-row{
display:flex;align-items:flex-start;justify-content:center;
gap:14px;width:100%;padding:0 8px;
flex-wrap:wrap;
}
/* Group */
.ps-org-group{
display:flex;flex-direction:column;align-items:center;
flex:1;min-width:160px;max-width:240px;
}
.ps-org-unassigned{opacity:.7}
.ps-org-connector-v{width:2px;height:20px;background:var(--g4)}
.ps-org-group-box{
width:100%;border-radius:var(--r2);overflow:hidden;
box-shadow:var(--sh2);border:1px solid var(--b0);
background:var(--s0);
}
.ps-org-group-hd{
padding:10px 12px;display:flex;align-items:center;gap:7px;
border-bottom:1px solid var(--b0);
}
.ps-org-group-icon{font-size:15px;flex-shrink:0}
.ps-org-group-label{
font-size:12px;font-weight:800;color:var(--t1);flex:1;min-width:0;
border-radius:4px;padding:1px 2px;outline:none;
}
.ps-org-group-label:focus{background:rgba(45,122,87,.1);box-shadow:0 0 0 2px var(--g4)}
.ps-org-group-pct{font-size:11px;font-weight:700;flex-shrink:0;white-space:nowrap}
/* Cards inside group */
.ps-org-cards{
padding:8px;display:flex;flex-direction:column;gap:6px;min-height:52px;
background:var(--s1);transition:background .15s;
}
.ps-org-cards.ps-drop-active{background:var(--g5);box-shadow:inset 0 0 0 2px var(--g4)}
.ps-org-empty{
text-align:center;padding:12px 8px;font-size:11px;color:var(--t4);
border:1.5px dashed var(--s4);border-radius:var(--r3);
}
/* Individual project card */
.ps-org-card{
background:var(--s0);border:1px solid var(--b1);border-radius:var(--r3);
padding:8px 10px;box-shadow:var(--sh1);
transition:box-shadow .15s,transform .15s,opacity .15s;
}
.ps-org-card:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.ps-org-card.ps-edit-mode{cursor:grab;user-select:none;display:flex;gap:6px;align-items:flex-start}
.ps-org-card.ps-edit-mode:hover{box-shadow:var(--sh2)}
.ps-org-card.ps-dragging{opacity:.35;transform:scale(.96)}
.ps-drag-handle{color:var(--t4);font-size:14px;cursor:grab;padding-top:2px;flex-shrink:0;transition:color .13s}
.ps-org-card:hover .ps-drag-handle{color:var(--g4)}
.ps-card-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:5px;line-height:1.35}
.ps-card-pct{font-size:15px;font-weight:800;margin-bottom:3px;line-height:1}
.ps-card-bar{height:4px;background:var(--s3);border-radius:4px;overflow:hidden;margin-bottom:5px}
.ps-card-bar-fill{height:100%;border-radius:4px;transition:width .6s}
.ps-card-stats{display:flex;gap:4px;flex-wrap:wrap}
.ps-badge{font-size:10px;padding:1px 5px;border-radius:6px;font-weight:600}
.ps-badge-late{background:var(--red-bg);color:var(--red)}
.ps-badge-done{background:var(--g5);color:var(--g3)}
.ps-loading{text-align:center;padding:32px;color:var(--t4);font-size:13px}
/* ═══════════════════════════════════════════════════════════════
PROJECT PAGE OVERLAY
═══════════════════════════════════════════════════════════════ */
.proj-page-overlay{
position:fixed;inset:0;z-index:900;
background:var(--bg);overflow-y:auto;
opacity:0;pointer-events:none;
transform:translateY(20px);
transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.proj-page-overlay.open{opacity:1;pointer-events:all;transform:none}
.proj-page{max-width:1100px;margin:0 auto;padding:20px 20px 60px}
/* Header */
.pp-header{
display:flex;align-items:center;gap:14px;
background:var(--g1);border-radius:var(--r);
padding:16px 20px;margin-bottom:14px;color:#fff;
}
.pp-back-btn{
padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;
background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
cursor:pointer;transition:all .16s;flex-shrink:0;white-space:nowrap;
}
.pp-back-btn:hover{background:rgba(255,255,255,.22)}
.pp-header-info{flex:1;min-width:0}
.pp-header-title{font-size:17px;font-weight:800;letter-spacing:-.3px}
.pp-header-sub{font-size:11px;opacity:.6;margin-top:2px}
.pp-ring-svg{flex-shrink:0}
/* KPI strip */
.pp-kpi-row{
display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.pp-kpi{
flex:1;min-width:80px;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r2);padding:12px 14px;text-align:center;
box-shadow:var(--sh1);
}
.pp-kpi-val{font-size:22px;font-weight:800;line-height:1}
.pp-kpi-lbl{font-size:11px;color:var(--t4);font-weight:600;margin-top:3px}
/* Tabs */
.pp-tabs{
display:flex;gap:3px;
background:var(--s2);border-radius:12px;padding:3px;
margin-bottom:14px;width:fit-content;
}
.pp-tab{
padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
color:var(--t3);background:transparent;border:none;cursor:pointer;
transition:all .18s;
}
.pp-tab.active{background:var(--s0);color:var(--t1);box-shadow:var(--sh1)}
.pp-tab-body.hidden{display:none}
/* ── Weekly Cards ─────────────────────────────────────────── */
.pp-weekly-wrap{padding-bottom:8px}
.pp-weeks-row{
display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.pp-week-card{
min-width:230px;max-width:260px;flex-shrink:0;
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
box-shadow:var(--sh1);overflow:hidden;scroll-snap-align:start;
transition:box-shadow .18s;
}
.pp-week-card:hover{box-shadow:var(--sh2)}
.pp-week-card.current{border:2px solid var(--g4);box-shadow:0 0 0 3px rgba(45,122,87,.12),var(--sh2)}
.pp-week-card.past{opacity:.72}
.pp-week-hd{
padding:10px 13px;background:var(--s1);border-bottom:1px solid var(--b0);
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.pp-week-num{font-size:12px;font-weight:800;color:var(--t1)}
.pp-now-badge{
font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;
background:var(--g3);color:#fff;margin-right:3px;
}
.pp-week-range{font-size:11px;color:var(--t4);flex:1}
.pp-week-late{font-size:10px;color:var(--red);background:var(--red-bg);padding:1px 5px;border-radius:6px;font-weight:700}
.pp-week-cnt{font-size:11px;color:var(--t4);background:var(--s2);padding:1px 7px;border-radius:8px;font-weight:600}
.pp-week-tasks{padding:9px 10px;display:flex;flex-direction:column;gap:5px;min-height:52px}
.pp-wk-task{
display:flex;align-items:flex-start;gap:6px;font-size:12px;
padding:4px 6px;border-radius:6px;background:var(--s1);
}
.pp-wk-task.done{opacity:.55;text-decoration:line-through}
.pp-wk-task.overdue{background:var(--red-bg)}
.pp-wk-task.today{background:var(--amber-bg)}
.pp-wk-dot{font-size:11px;flex-shrink:0;margin-top:1px}
.pp-wk-name{flex:1;min-width:0;color:var(--t1);font-weight:600;line-height:1.4}
.pp-wk-divider{
text-align:center;font-size:10px;color:var(--t4);
border-top:1px solid var(--b0);padding:5px 0 3px;
}
.pp-wk-empty{text-align:center;padding:12px;font-size:11px;color:var(--t4)}
.pp-nodate{
margin-top:14px;background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r2);padding:12px;box-shadow:var(--sh1);
}
.pp-nodate-title{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:8px}
/* ── Gantt Chart — Desktop ───────────────────────────────── */
.ppg-desktop{
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh1);
}
.ppg-scale{
height:26px;position:relative;background:var(--s1);
border-bottom:1px solid var(--b0);overflow:hidden;
}
.ppg-scale-lbl{
position:absolute;font-size:10px;color:var(--t4);font-weight:600;
top:6px;transform:translateX(50%);white-space:nowrap;
}
.ppg-scale-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--b0)}
.ppg-today-tick{
position:absolute;top:0;bottom:0;width:2px;
background:var(--amber);opacity:.8;
}
.ppg-rows{display:flex;flex-direction:column}
.ppg-row{
display:flex;align-items:center;border-bottom:1px solid var(--b0);
min-height:38px;transition:background .13s;
}
.ppg-row:hover{background:var(--s1)}
.ppg-row.done{opacity:.6}
.ppg-label{
width:200px;flex-shrink:0;padding:0 12px;font-size:12px;font-weight:600;
color:var(--t1);display:flex;align-items:center;gap:6px;
border-left:1px solid var(--b0);white-space:nowrap;overflow:hidden;
}
.ppg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ppg-chart{flex:1;position:relative;height:38px;overflow:hidden}
.ppg-today{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);opacity:.6;z-index:2}
.ppg-bar{position:absolute;top:12px;height:14px;border-radius:4px;z-index:1}
.ppg-diamond{
position:absolute;top:6px;font-size:14px;z-index:3;
transform:translateX(50%);line-height:1;
}
.ppg-due-lbl{
position:absolute;bottom:2px;font-size:10px;color:var(--t3);
transform:translateX(50%);white-space:nowrap;z-index:4;
}
/* ── Gantt Chart — Mobile ────────────────────────────────── */
.ppg-mobile{display:none;flex-direction:column;gap:7px;padding-top:4px}
.ppg-m-card{
display:flex;align-items:flex-start;gap:10px;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r2);padding:10px 12px;box-shadow:var(--sh1);
}
.ppg-m-card.done{opacity:.6}
.ppg-m-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.ppg-m-body{flex:1;min-width:0}
.ppg-m-name{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:5px}
.ppg-m-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ppg-m-due{font-size:12px;font-weight:700}
.pp-empty{text-align:center;padding:32px;color:var(--t4);font-size:13px}
/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:767px){
.ppg-desktop{display:none}
.ppg-mobile{display:flex}
.pp-weeks-row{padding-bottom:12px}
.ps-org-groups-row{gap:10px}
.ps-org-group{min-width:130px;max-width:200px}
.ps-org-root-node{padding:10px 16px}
.ps-org-root-title{font-size:13px}
}
@media(min-width:768px){
.ppg-desktop{display:block}
.ppg-mobile{display:none}
}
/* ═══════════════════════════════════════════════════════════════
GANTT V2 (Timeline)
═══════════════════════════════════════════════════════════════ */
.tl2-outer{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.tl2-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.tl2-wrap{min-width:660px}
.tl2-header-row{display:flex;background:var(--s1);border-bottom:2px solid var(--b1)}
.tl2-lbl-col{width:200px;min-width:200px;padding:8px 13px;border-left:1px solid var(--b1);flex-shrink:0;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center}
.tl2-scale-col{flex:1;position:relative;height:28px;overflow:hidden}
.tl2-month-lbl{position:absolute;top:6px;font-size:10px;color:var(--t4);transform:translateX(50%);white-space:nowrap}
.tl2-month-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--b0)}
.tl2-proj-hd-row{display:flex;background:var(--g5);border-top:2px solid var(--g4);border-bottom:1px solid var(--b1)}
.tl2-proj-hd-row.danger{background:var(--red-bg);border-top-color:var(--red)}
.tl2-proj-lbl-cell{width:200px;min-width:200px;padding:7px 13px;border-left:1px solid var(--b1);flex-shrink:0;display:flex;align-items:center;gap:5px;overflow:hidden}
.tl2-proj-icon{font-size:14px;flex-shrink:0}
.tl2-proj-name{font-size:12px;font-weight:800;color:var(--g3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tl2-proj-pct-badge{font-size:11px;font-weight:700;color:var(--g3);background:#fff;padding:1px 6px;border-radius:8px;border:1px solid var(--g4);white-space:nowrap;flex-shrink:0}
.tl2-proj-hd-row.danger .tl2-proj-pct-badge{color:var(--red);border-color:var(--red)}
.tl2-proj-bar-cell{flex:1;position:relative;overflow:hidden;min-height:32px}
.tl2-proj-span-bar{position:absolute;top:9px;height:13px;border-radius:4px}
.tl2-task-row{display:flex;border-bottom:1px solid var(--b0)}
.tl2-task-row:last-child{border-bottom:1px solid var(--b1)}
.tl2-task-row.overdue{background:var(--red-bg)}
.tl2-task-row.done{opacity:.5}
.tl2-task-lbl-cell{width:200px;min-width:200px;padding:5px 13px 5px 19px;border-left:1px solid var(--b0);flex-shrink:0;display:flex;align-items:center;gap:6px;overflow:hidden}
.tl2-task-s-icon{font-size:11px;flex-shrink:0;width:13px;text-align:center}
.tl2-task-name{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tl2-task-name.dn{text-decoration:line-through;color:var(--t4)}
.tl2-task-bar-cell{flex:1;position:relative;overflow:hidden;min-height:32px}
.tl2-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);opacity:.55;z-index:3;pointer-events:none}
.tl2-today-line::after{content:'اليوم';position:absolute;top:4px;font-size:10px;color:var(--g3);font-weight:700;right:4px;white-space:nowrap}
.tl2-task-pill{position:absolute;top:6px;height:19px;min-width:70px;max-width:190px;border-radius:8px;display:flex;align-items:center;padding:0 7px;overflow:hidden;z-index:2;transition:filter .14s,transform .1s;cursor:default}
.tl2-task-pill:hover{filter:brightness(1.1);transform:scaleY(1.04)}
.tl2-pill-lbl{font-size:10px;color:rgba(255,255,255,.95);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl2-nodata{padding:32px;text-align:center;color:var(--t4);font-size:13px}
/* Timeline wrapper */
.tl-wrap{padding:14px 18px 18px;-webkit-overflow-scrolling:touch}
.tl-months-row{display:flex;align-items:flex-end;margin-right:162px;margin-left:106px;height:20px;position:relative;margin-bottom:5px}
.tl-month-lbl{position:absolute;font-size:10px;color:var(--t4);font-weight:600;white-space:nowrap;transform:translateX(50%)}
.tl-months-line{margin-right:162px;margin-left:106px;height:1px;background:var(--b1);margin-bottom:7px;position:relative}
.tl-months-tick{position:absolute;width:1px;height:5px;background:var(--b1);top:-2px}
.tl-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--b0)}
.tl-row:last-child{border-bottom:none}
.tl-proj-lbl{width:154px;min-width:154px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-bar-area{flex:1;height:28px;background:var(--s2);border-radius:6px;position:relative;overflow:hidden}
.tl-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);z-index:5;opacity:.65}
.tl-today-line::before{content:'اليوم';position:absolute;top:-15px;font-size:10px;color:var(--g3);font-weight:700;transform:translateX(50%);white-space:nowrap}
.tl-bar-seg{position:absolute;top:3px;bottom:3px;border-radius:4px;display:flex;align-items:center;padding:0 7px;min-width:22px;overflow:hidden;transition:opacity .14s}
.tl-bar-seg:hover{opacity:.85}
.tl-bar-pct{font-size:11px;font-weight:700;color:rgba(255,255,255,.95);white-space:nowrap}
.tl-date-col{width:102px;min-width:102px;font-size:11px;color:var(--t4);display:flex;flex-direction:column;gap:1px;line-height:1.4}
.tl-date-start{color:var(--t4)}.tl-date-end{color:var(--t2);font-weight:600}
.tl-nodata{text-align:center;padding:28px;color:var(--t4);font-size:13px}
/* ═══════════════════════════════════════════════════════════════
WBS GRID (in reports page)
═══════════════════════════════════════════════════════════════ */
.wbs-grid{display:flex;flex-direction:column;gap:13px;padding:14px 18px}
.wbs-proj-block{border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden;background:var(--s0);box-shadow:var(--sh1)}
.wbs-proj-header{padding:11px 15px;background:var(--s1);display:flex;align-items:center;justify-content:space-between;gap:11px;border-bottom:1px solid var(--b0);border-right:3px solid var(--g4)}
.wbs-proj-icon-name{display:flex;align-items:center;gap:9px}
.wbs-proj-name{font-size:13px;font-weight:800;color:var(--t1)}
.wbs-proj-stats{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wbs-stat-chip{font-size:11px;font-weight:700;background:var(--s2);color:var(--t4);padding:2px 8px;border-radius:8px;white-space:nowrap}
.wbs-stat-chip.danger{background:var(--red-bg);color:var(--red)}
.wbs-stat-chip.prog{background:var(--amber-bg);color:var(--amber)}
.wbs-stat-chip.done{background:var(--green-bg);color:var(--green)}
.wbs-pct{font-size:14px;font-weight:800;color:var(--g3);min-width:34px;text-align:left}
.wbs-mini-bar{width:56px;height:3px;background:var(--s3);border-radius:4px;overflow:hidden;flex-shrink:0}
.wbs-mini-fill{height:100%;background:var(--g4);border-radius:4px;transition:width .6s var(--ease)}
.wbs-mini-fill.warn{background:var(--amber)}.wbs-mini-fill.danger{background:var(--red)}
.wbs-tasks{padding:3px 0}
.wbs-task-row{display:grid;grid-template-columns:20px 1fr 86px 73px 84px;gap:7px;align-items:center;padding:8px 15px;border-bottom:1px solid var(--b0);font-size:12px;transition:background .1s}
.wbs-task-row:last-child{border-bottom:none}
.wbs-task-row:hover{background:var(--g6)}
.wbs-task-row.overdue{background:var(--red-bg)}
.wbs-task-row.overdue:hover{background:#fde8e6}
.wbs-task-icon{text-align:center;font-size:11px;font-weight:700}
.wbs-task-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.wbs-task-name.done{text-decoration:line-through;color:var(--t4)}
.wbs-task-ass{color:var(--t4);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbs-task-due{color:var(--t4);font-size:12px;text-align:left;white-space:nowrap}
.wbs-task-due.overdue{color:var(--red);font-weight:700}.wbs-task-due.today{color:var(--amber);font-weight:700}
.wbs-task-status{text-align:center}
.wbs-col-heads{display:grid;grid-template-columns:20px 1fr 86px 73px 84px;gap:7px;padding:6px 15px;background:var(--s2);border-bottom:1px solid var(--b1);font-size:10px;font-weight:700;color:var(--t4);letter-spacing:.5px;text-transform:uppercase}
.wbs-footer{display:flex;gap:20px;padding:9px 15px;background:var(--g6);border-top:1px solid var(--b0);font-size:12px;color:var(--t3);flex-wrap:wrap}
.wbs-footer-stat strong{color:var(--t1);font-weight:700;margin-left:4px}
/* ═══════════════════════════════════════════════════════════════
WBS MODAL (full-screen panel)
═══════════════════════════════════════════════════════════════ */
.wbs-overlay{display:none;position:fixed;inset:0;background:rgba(8,22,14,.55);z-index:1000;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wbs-overlay.open{display:block}
.wbs-panel{display:none;position:fixed;top:12px;left:12px;right:12px;bottom:12px;background:var(--s0);border-radius:var(--r);z-index:1001;flex-direction:column;overflow:hidden;box-shadow:var(--sh3);border:1px solid var(--b0)}
.wbs-panel.open{display:flex}
.wbs-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;flex-shrink:0;background:var(--g2);color:#fff;gap:11px}
.wbs-hd-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wbs-hd-title{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbs-hd-sub{font-size:11px;color:rgba(255,255,255,.42);font-weight:500;letter-spacing:.3px}
.wbs-close{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .14s}
.wbs-close:hover{background:rgba(255,255,255,.2)}
.wbs-body{flex:1;display:flex;overflow:hidden;min-height:0}
.wbs-tree-panel{width:38%;min-width:230px;max-width:370px;border-left:1px solid var(--b0);overflow-y:auto;padding:16px 14px;background:var(--s1);display:flex;flex-direction:column;gap:9px}
.wbs-gantt-panel{flex:1;min-width:0;overflow:auto;padding:16px 18px;background:var(--s0)}/* Proj cards */
.pf-proj-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh1)}/* Task items */
.pf-filter-wrap{padding:10px 16px 4px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}/* Team in portfolio */
.pf-member-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);margin:0 16px 10px;padding:16px;box-shadow:var(--sh1)}/* Portfolio report */
.pf-rep-section{background:var(--s0);border-radius:var(--r);margin:0 16px 11px;padding:14px;box-shadow:var(--sh1);border:1px solid var(--b0)}/* Portfolio nav */
.pf-bottom-nav{
flex-shrink:0;width:100%;background:var(--s0);
border-top:1px solid var(--b0);
display:flex;padding-bottom:env(safe-area-inset-bottom,0);
box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
/* ═══════════════════════════════════════════════════════════════
PERIODIC REPORTS
═══════════════════════════════════════════════════════════════ */
.period-report{display:flex;flex-direction:column;gap:13px}
.pr-header{background:var(--g2);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pr-title{font-size:14px;font-weight:800;color:#fff}
.pr-saved{font-size:11px;color:rgba(255,255,255,.42)}
.pr-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}
.pr-kpi{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);padding:13px 15px;box-shadow:var(--sh1)}
.pr-kpi.pos{border-top:2px solid var(--green)}.pr-kpi.neg{border-top:2px solid var(--red)}
.pr-kpi-val{font-size:24px;font-weight:800;color:var(--t1);line-height:1.1;margin-bottom:3px;letter-spacing:-.4px}
.pr-kpi.pos .pr-kpi-val{color:var(--green)}.pr-kpi.neg .pr-kpi-val{color:var(--red)}
.pr-kpi-label{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:2px}
.pr-kpi-sub{font-size:11px;color:var(--t4)}
.pr-section{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1)}
.pr-sec-title{padding:10px 15px;background:var(--s1);font-size:10px;font-weight:700;color:var(--t1);border-bottom:1px solid var(--b0);text-transform:uppercase;letter-spacing:.5px}
.pr-task-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 15px;border-bottom:1px solid var(--b0);font-size:13px}
.pr-task-row:last-child{border-bottom:none}
.pr-task-row.done .pr-task-name{color:var(--t4);text-decoration:line-through}
.pr-task-row.late{background:var(--red-bg)}.pr-task-row.late .pr-task-name{color:var(--red);font-weight:600}
.pr-task-row.today{background:var(--amber-bg)}
.pr-task-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--t1)}
.pr-task-proj{font-size:11px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.pr-task-due{font-size:11px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.pr-more{padding:7px 15px;font-size:11px;color:var(--t4);font-style:italic}
/* ═══════════════════════════════════════════════════════════════
LOADING SKELETONS
═══════════════════════════════════════════════════════════════ */
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.skeleton{
border-radius:8px;
background:linear-gradient(90deg,var(--s2) 25%,var(--s1) 50%,var(--s2) 75%);
background-size:200% auto;
animation:shimmer 1.5s ease infinite;
}
.skeleton-kpi{height:100px;border-radius:var(--r)}
.skeleton-row{height:44px;border-radius:var(--r3);margin-bottom:4px}
.skeleton-card{height:150px;border-radius:var(--r)}
/* ═══════════════════════════════════════════════════════════════
MOBILE — PM VIEW
═══════════════════════════════════════════════════════════════ */
.ham-btn{
display:none;width:36px;height:36px;border-radius:var(--r3);
background:var(--s1);border:1px solid var(--b1);
color:var(--t2);font-size:17px;
align-items:center;justify-content:center;flex-shrink:0;
transition:all .14s;
}
.ham-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:49;backdrop-filter:blur(3px)}
.sb-overlay.open{display:block}
@media(max-width:767px){
.ham-btn{display:flex}
.sidebar{position:fixed;right:0;top:0;bottom:0;z-index:50;transform:translateX(110%);transition:transform .26s var(--ease);box-shadow:-4px 0 22px rgba(0,0,0,.26);width:236px;height:auto}
.sidebar.open{transform:translateX(0)}
.topbar{padding:var(--sp3) var(--sp3);flex-wrap:wrap;gap:var(--sp2)}
.topbar-actions{gap:var(--sp2);flex-wrap:wrap}
.btn-lbl{display:none}
.btn-primary,.btn-sec,.btn-portfolio{padding:10px 13px;font-size:var(--fz-sm);min-height:42px}
.page{padding:var(--sp3) var(--sp3);gap:var(--sp4)}
.kpi-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}
.kpi-card{padding:var(--sp4) var(--sp3) var(--sp3)}
.kv{font-size:var(--fz-xl)}
.kpi-ic{width:32px;height:32px;font-size:var(--fz-sm);margin-bottom:var(--sp2)}
.charts-row,.charts-row-2{grid-template-columns:1fr}
.board-highlights{grid-template-columns:1fr 1fr}
.pg-v2,.tg-v2{grid-template-columns:1fr}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt th,.dt td{padding:8px 10px;font-size:var(--fz-sm)}
.dt .hide-sm{display:none}
.dt td:nth-child(2),.dt th:nth-child(2){display:none}
.filter-bar{padding:var(--sp3);gap:var(--sp3)}
.filter-row{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
.filter-label{min-width:auto}
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:8px 14px;font-size:var(--fz-sm);min-height:38px}
.rep-header{flex-direction:column;gap:var(--sp3)}
.rep-header-left h2{font-size:var(--fz-md)}
.gw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sec-hd h2{font-size:var(--fz-sm)}
#rep-kpi-grid{grid-template-columns:1fr 1fr}
.rep-kpi-card-pro{min-height:auto;flex-direction:column;align-items:flex-start;gap:var(--sp3)}
.rep-kpi-val{font-size:var(--fz-xl)}
/* Action buttons — mobile: 44px touch targets (Apple HIG / WCAG 2.5.5) */
.act-btns{gap:var(--sp2)}
.act-btn-due,.act-btn-ass,.act-btn-move{display:none}
.act-btn{width:44px;height:44px}
/* Portfolio mobile: hide move+ass */
.pf-act-ass,.pf-act-move{display:none}
}
@media(min-width:768px){.btn-lbl{display:inline}}
@media(max-width:400px){
.topbar{flex-direction:column;align-items:flex-start;gap:8px;padding:11px}
.topbar-actions{width:100%;justify-content:flex-end}
}
@media(max-width:540px){
.modal{width:100%;max-width:100%;border-radius:var(--r) var(--r) 0 0;position:fixed;bottom:0;left:0;right:0;animation:modal-sheet .24s var(--ease-out)}
.overlay{align-items:flex-end}
@keyframes modal-sheet{from{transform:translateY(100%)}to{transform:none}}
.mbd{max-height:58vh;overflow-y:auto}
.fg{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════
PORTFOLIO TABLET
═══════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1023px){
#portfolio-app{background:var(--bg)}
.pf-header{padding:15px 22px}
.pf-kpi-scroll{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;gap:10px;padding:13px 18px}
.pf-kpi-chip{min-width:0;flex-shrink:unset}
.pf-section{padding:0 18px 14px}
.pf-alert-wrap{padding:13px 18px 0}
.pf-filter-wrap{padding:9px 18px}
#pf-home-proj-list,#pf-proj-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.pf-proj-card{margin-bottom:0}
#pf-team-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.pf-member-card{margin:0}
.pf-task-item{padding:12px 15px}
.pf-rep-section{margin:0 18px 11px;border-radius:var(--r)}
}
/* ═══════════════════════════════════════════════════════════════
PORTFOLIO DESKTOP
═══════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
#portfolio-app{flex-direction:row;align-items:stretch;overflow:hidden}
.pf-pages{flex:1;min-width:0;height:100%;overflow-y:auto}
.pf-header{padding:16px 28px}
.pf-bottom-nav{
flex-shrink:0;width:220px;height:100%;
flex-direction:column;align-items:stretch;
border-top:none;border-left:1px solid var(--b0);
padding:22px 10px 18px;gap:2px;overflow-y:auto;
box-shadow:-2px 0 14px rgba(0,0,0,.04);
background:var(--s0);order:-1;
}
.pf-bottom-nav::before{
content:'محفظة منظومة';display:block;
font-size:13px;font-weight:800;color:var(--g3);
padding:0 9px 14px;border-bottom:1px solid var(--b0);margin-bottom:8px;
}
.pf-nav-btn{
flex-direction:row;align-items:center;justify-content:flex-end;
gap:9px;padding:9px 11px;border-radius:var(--r3);
text-align:right;position:relative;
}
.pf-nav-btn::before{display:none}
.pf-nav-btn.active::after{content:'';position:absolute;right:0;top:22%;bottom:22%;width:3px;background:var(--accent);border-radius:4px 0 0 3px}
.pf-nav-btn:hover{background:var(--g6)}
.pf-nav-btn.active{background:var(--g5);color:var(--g3)}
.pf-nav-icon{font-size:15px;order:1}
.pf-nav-lbl{font-size:13px;font-weight:500;order:0;flex:1}
.pf-nav-btn.active .pf-nav-lbl{font-weight:700}
.pf-kpi-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));overflow-x:visible;gap:11px;padding:16px 26px}
.pf-kpi-chip{min-width:0}
.pf-section{padding:0 26px 20px}
.pf-alert-wrap{padding:14px 26px 0}
.pf-filter-wrap{padding:11px 26px}
#pf-home-proj-list,#pf-proj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}
.pf-proj-card{margin-bottom:0}
#pf-team-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}
.pf-member-card{margin:0}
.pf-task-item{padding:13px 17px}
.pf-rep-section{margin:0 26px 13px;border-radius:var(--r)}
}
/* ═══════════════════════════════════════════════════════════════
LARGE SCREENS
═══════════════════════════════════════════════════════════════ */
@media(min-width:1200px){
.page{padding:24px 32px;gap:22px}
.topbar{padding:13px 32px}
}
/* ═══════════════════════════════════════════════════════════════
WBS MODAL MOBILE
═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.wbs-panel{top:6px;left:6px;right:6px;bottom:6px;border-radius:20px}
.wbs-body{flex-direction:column}
.wbs-tree-panel{width:100%;min-width:0;max-width:none;border-left:none;border-bottom:1px solid var(--b0);max-height:42vh}
.wbs-gantt-panel{overflow-x:auto}
.wbs-hd-title{font-size:13px}
.wbs-foot-pct{font-size:17px}
}
/* ═══════════════════════════════════════════════════════════════
TIMELINE MOBILE
═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
.wbs-task-row,.wbs-col-heads{grid-template-columns:17px 1fr 56px;gap:5px}
.wbs-task-ass,.wbs-task-due{display:none}
.tl-proj-lbl{width:94px;min-width:94px;font-size:11px}
.tl-date-col{display:none}
.tl-months-row,.tl-months-line{margin-right:104px;margin-left:0}
}
/* ═══════════════════════════════════════════════════════════════
SCROLLBARS & FOCUS
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--g4)}
:focus-visible{outline:2px solid var(--g4);outline-offset:2px}
.nav-item:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:-2px}body.wbs-open{overflow:hidden}
/* legacy aliases for JS compatibility */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
/* ═══════════════════════════════════════════════════════════════
UX IMPROVEMENTS — Focus, Accessibility, Polish
═══════════════════════════════════════════════════════════════ */
/* Global focus ring — keyboard nav accessibility */
*:focus-visible{
outline:2px solid var(--g4);
outline-offset:2px;
border-radius:4px;
}
/* Nav SVG icons */
.nav-icon svg{width:15px;height:15px;transition:transform .14s}
.nav-item:hover .nav-icon svg{transform:scale(1.1)}
.nav-item.active .nav-icon svg{color:var(--accent)}
/* Topbar SVG buttons */
.btn-primary svg,.btn-sec svg,.btn-portfolio svg{flex-shrink:0}
.ham-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
/* Skeleton pulse */
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* Empty states */
.ei{font-size:36px;opacity:.5;line-height:1}
.empty p{font-size:13px;color:var(--t4);max-width:260px}
/* Toast color variants */
#toast.ok{background:var(--g2);border-color:rgba(16,185,129,.2)}
#toast.err{background:#7f1d1d;border-color:rgba(239,68,68,.2)}
/* Smooth scrollbar */
.main::-webkit-scrollbar{width:4px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--s4);border-radius:4px}
.main::-webkit-scrollbar-thumb:hover{background:var(--t4)}
/* Better mobile topbar */
@media(max-width:767px){
.topbar{padding:10px 12px;gap:8px}
.topbar-title{font-size:14px}
.topbar-sub{display:none}
.btn-portfolio{display:none}
.btn-sec .btn-lbl{display:none}
.btn-primary{padding:8px 12px;font-size:12px}
}
/* Hover tooltip for nav items */
@media(min-width:768px){
.nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nav-item{cursor:pointer}
}
/* Task card hover cursor */
.task-card{cursor:default}
.tc-name{cursor:pointer}
/* Transition for all interactive elements */
button,a,.chip,.nav-item{transition-property:background,color,border-color,box-shadow,transform,opacity}
/* ═══════════════════════════════════════════════════════════════
TASKS PAGE — Complete Rebuild v4
Design: Linear-inspired · RTL-first · Professional PM tool
═══════════════════════════════════════════════════════════════ */
/* ─── Page layout ────────────────────────────────────────────── */
#page-tasks{gap:0;padding:16px 20px 40px}
/* ─── Header card ────────────────────────────────────────────── */
.tp-header{
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r);
box-shadow:var(--sh1);
margin-bottom:10px;
overflow:hidden;
}
/* Search row */
.tp-search-row{
display:flex;align-items:center;gap:8px;
padding:10px 12px;
border-bottom:1px solid var(--b0);
}
.tp-search-wrap{
flex:1;display:flex;align-items:center;gap:8px;
background:var(--s1);border:1.5px solid var(--b1);
border-radius:var(--r3);padding:9px 13px;
transition:border-color .15s,box-shadow .15s,background .15s;
}
.tp-search-wrap:focus-within{
border-color:var(--g4);background:#fff;
box-shadow:0 0 0 3px var(--accent-soft);
}
.tp-search-icon{color:var(--t4);flex-shrink:0}
.tp-search-input{
flex:1;border:none;background:transparent;
font-size:var(--fz-base);color:var(--t1);outline:none;font-family:var(--ff);
}
.tp-search-input::placeholder{color:var(--t4)}
.tp-search-clear{
background:none;border:none;color:var(--t4);
font-size:14px;cursor:pointer;padding:0;line-height:1;
transition:color .12s;
}
.tp-search-clear:hover{color:var(--t1)}
/* Filter toggle button */
.tp-filter-toggle-btn{
display:inline-flex;align-items:center;gap:6px;
padding:8px 13px;border-radius:var(--r3);
border:1.5px solid var(--b1);background:var(--s1);
font-size:var(--fz-sm);font-weight:600;color:var(--t3);
cursor:pointer;transition:background .14s,border-color .14s,color .14s;white-space:nowrap;
flex-shrink:0;font-family:var(--ff);
position:relative;min-height:36px;
}
.tp-filter-toggle-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.tp-filter-toggle-btn.active{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.tp-filter-toggle-btn.has-filters{border-color:var(--g3);background:var(--g5);color:var(--g3)}
.tp-filter-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;
background:var(--red);color:#fff;border-radius:9px;
font-size:var(--fz-xs);font-weight:800;
}
/* View switcher */
.tp-view-switcher{
display:flex;background:var(--s2);border-radius:8px;padding:2px;
}
.tp-view-btn{
width:34px;height:30px;border-radius:var(--r3);border:none;
display:flex;align-items:center;justify-content:center;
color:var(--t4);background:transparent;cursor:pointer;transition:color .14s,background .14s;
}
.tp-view-btn:hover{color:var(--t2)}
.tp-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* ─── Quick filter tabs ──────────────────────────────────────── */
.tp-quick-tabs{
display:flex;align-items:stretch;
overflow-x:auto;scrollbar-width:none;
padding:0 12px;
border-bottom:1px solid var(--b0);
}
.tp-quick-tabs::-webkit-scrollbar{display:none}
.tp-tab{
display:inline-flex;align-items:center;gap:6px;
padding:11px 13px;font-size:var(--fz-sm);font-weight:600;
color:var(--t3);background:none;border:none;
cursor:pointer;white-space:nowrap;flex-shrink:0;
border-bottom:2.5px solid transparent;
margin-bottom:-1px;min-height:42px;
transition:color .14s,border-color .14s;
font-family:var(--ff);
}
.tp-tab:hover{color:var(--t1)}
.tp-tab.active{color:var(--g3);border-bottom-color:var(--g3)}
.tp-tab-red.active{color:var(--red);border-bottom-color:var(--red)}
.tp-tab-purple.active{color:var(--purple);border-bottom-color:var(--purple)}
.tp-tab-amber.active{color:var(--amber);border-bottom-color:var(--amber)}
.tp-tab-done.active{color:var(--green);border-bottom-color:var(--green)}
.tp-tab-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:19px;height:18px;padding:0 5px;
background:var(--s3);border-radius:9px;
font-size:var(--fz-xs);font-weight:700;color:var(--t3);
transition:background .14s,color .14s;
}
.tp-tab.active .tp-tab-count{background:var(--g5);color:var(--g3)}
.tp-tab-red.active .tp-tab-count{background:var(--red-bg);color:var(--red)}
.tp-tab-purple.active .tp-tab-count{background:var(--purple-bg);color:var(--purple)}
.tp-tab-amber.active .tp-tab-count{background:var(--amber-bg);color:var(--amber)}
.tp-tab-done.active .tp-tab-count{background:var(--green-bg);color:var(--green)}
.tp-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0}
.tp-tab-dot-purple{background:var(--purple)}
.tp-tab-dot-amber{background:var(--amber)}
.tp-tab-dot-prog{background:var(--blue)}
/* ─── Advanced filters panel ─────────────────────────────────── */
.tp-adv-filters{
max-height:0;overflow:hidden;
transition:max-height .28s cubic-bezier(.4,0,.2,1);
}
.tp-adv-filters.open{max-height:360px}
.tp-adv-inner{padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px}
.tp-adv-section{display:flex;flex-direction:column;gap:7px}
.tp-adv-section-title{
display:flex;align-items:center;gap:6px;
font-size:10px;font-weight:700;color:var(--t4);
letter-spacing:.6px;text-transform:uppercase;
}
.tp-adv-hint{
font-size:10px;color:var(--t4);font-weight:400;
letter-spacing:0;text-transform:none;
}
.tp-multi-chips{display:flex;flex-wrap:wrap;gap:5px}
/* Multi-select chips */
.tp-mchip{
display:inline-flex;align-items:center;gap:5px;
padding:4px 11px;border-radius:20px;
background:var(--s2);border:1.5px solid var(--b0);
color:var(--t3);font-size:12px;font-weight:600;
cursor:pointer;transition:all .13s;white-space:nowrap;
font-family:var(--ff);
}
.tp-mchip:hover{border-color:var(--b2);color:var(--t1);background:var(--s3)}
.tp-mchip.active{
background:var(--g5);border-color:var(--g4);color:var(--g3);
box-shadow:0 1px 4px rgba(16,185,129,.15);
}
.tp-mchip-all{background:var(--s2)}
.tp-mchip-all.active{background:var(--s3);border-color:var(--b1);color:var(--t2);box-shadow:none}
.tp-mchip-av{
width:15px;height:15px;border-radius:50%;
font-size:10px;font-weight:800;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
}
/* Active filter tags + footer */
.tp-adv-footer{
display:flex;align-items:center;justify-content:space-between;
gap:8px;flex-wrap:wrap;
padding-top:10px;border-top:1px solid var(--b0);
}
.tp-active-filters{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.taf-tag{
display:inline-flex;align-items:center;gap:3px;
padding:3px 8px;border-radius:20px;
background:var(--g5);border:1px solid var(--g4);
color:var(--g3);font-size:11px;font-weight:600;
}
.tp-reset-btn{
display:inline-flex;align-items:center;gap:5px;
padding:5px 11px;border-radius:8px;
border:1.5px solid var(--b1);background:transparent;
font-size:12px;font-weight:600;color:var(--t3);
cursor:pointer;transition:all .13s;font-family:var(--ff);
white-space:nowrap;
}
.tp-reset-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}
/* ─── Toolbar ────────────────────────────────────────────────── */
.tp-toolbar{
display:flex;align-items:center;gap:10px;
flex-wrap:wrap;margin-bottom:10px;
}
.tp-count{display:flex;align-items:baseline;gap:4px}
.tp-count-num{
font-size:24px;font-weight:800;line-height:1;
color:var(--t1);font-variant-numeric:tabular-nums;
}
.tp-count-lbl{font-size:12px;color:var(--t4)}
.tp-sort-row{display:flex;align-items:center;gap:6px;flex:1}
.tp-sort-lbl{font-size:11px;color:var(--t4);font-weight:600;white-space:nowrap}
.tp-sort-btns{display:flex;gap:3px;flex-wrap:wrap}
#tp-sort-btns .tp-sort-btn{
display:inline-flex;align-items:center;gap:4px;
padding:5px 10px;border-radius:6px;
border:1.5px solid var(--b0);background:var(--s1);
font-size:12px;font-weight:600;color:var(--t3);
cursor:pointer;transition:all .13s;white-space:nowrap;
font-family:var(--ff);
}
#tp-sort-btns .tp-sort-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
#tp-sort-btns .tp-sort-btn.active{
border-color:var(--g4);color:var(--g3);background:var(--g5);
box-shadow:0 1px 4px rgba(16,185,129,.15);
}
.tp-toggle-label{
display:flex;align-items:center;gap:7px;
cursor:pointer;user-select:none;flex-shrink:0;
}
.tp-toggle-label input{display:none}
.tp-toggle-track{
width:32px;height:17px;border-radius:8px;
background:var(--s3);border:1.5px solid var(--b1);
position:relative;transition:all .18s;flex-shrink:0;
}
.tp-toggle-track::after{
content:'';position:absolute;
top:1px;right:1px;width:12px;height:12px;
background:#fff;border-radius:50%;
box-shadow:0 1px 3px rgba(0,0,0,.2);
transition:transform .18s cubic-bezier(.4,0,.2,1);
}
input:checked + .tp-toggle-track{background:var(--g3);border-color:var(--g3)}
input:checked + .tp-toggle-track::after{transform:translateX(-15px)}
.tp-toggle-text{font-size:12px;font-weight:600;color:var(--t3)}
/* ─── Tasks list ─────────────────────────────────────────────── */
.tasks-list{display:flex;flex-direction:column;gap:6px}
/* ─── Task card ──────────────────────────────────────────────── */
.tc{
display:flex;align-items:center;
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r2);
border-right:4px solid transparent;
transition:box-shadow .16s var(--ease),border-color .16s,transform .12s;
cursor:default;overflow:hidden;
position:relative;
}
.tc:hover{
box-shadow:var(--sh2);
border-color:var(--b1);
transform:translateY(-1px);
}
.tc + .tc{margin-top:2px}
/* Color accents */
.tc-red {border-right-color:var(--red);background:#fffafa}
.tc-purple{border-right-color:var(--purple);background:#fbfafe}
.tc-amber {border-right-color:var(--amber);background:#fffdf5}
.tc-yellow{border-right-color:#d4a017;background:#fffef7}
.tc-done {border-right-color:var(--green);opacity:.62}
.tc-grey {border-right-color:var(--s4)}
/* State circle */
.tc-check-wrap{
width:44px;flex-shrink:0;min-height:52px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
}
.tc-state{
width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:2px solid var(--b1);color:var(--t4);background:var(--s0);
transition:all .14s;
}
.tc-state-done{border-color:var(--green);background:var(--green);color:#fff}
.tc-state-prog{border-color:var(--amber);color:var(--amber)}
.tc-check-wrap:hover .tc-state-open{border-color:var(--g4);background:var(--g5);color:var(--g4)}
/* Body */
.tc-main{flex:1;min-width:0;padding:var(--sp3) var(--sp2) var(--sp3) 0}
.tc-top{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp1);flex-wrap:wrap}
.tc-title{
font-size:var(--fz-base);font-weight:600;color:var(--t1);
text-decoration:none;line-height:1.35;flex:1;min-width:0;
display:block;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .12s;
}
.tc-title:hover{color:var(--g3);text-decoration:underline;text-underline-offset:2px}
.tc-title-done{text-decoration:line-through;color:var(--t4)}
/* Priority badge */
.tp-prio{
font-size:var(--fz-xs);font-weight:700;padding:2px 7px;border-radius:var(--r4);
white-space:nowrap;flex-shrink:0;
}
.tp-prio-urgent{background:#fef2f2;color:var(--red);border:1px solid rgba(195,43,39,.2)}
.tp-prio-high {background:var(--amber-bg);color:var(--amber);border:1px solid rgba(168,90,4,.18)}
.tp-prio-low {background:var(--s2);color:var(--t4);border:1px solid var(--b0)}
/* Bottom meta */
.tc-bottom{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}
.tc-project-tag{
font-size:var(--fz-xs);font-weight:600;color:var(--t3);
background:var(--s2);border-radius:var(--r4);padding:2px 8px;
white-space:nowrap;
}
.tc-divider{color:var(--s4);font-size:var(--fz-xs)}
.tc-due{
display:inline-flex;align-items:center;gap:3px;
font-size:var(--fz-sm);font-weight:600;padding:2px 7px;border-radius:var(--r4);
}
.tc-due-overdue{color:var(--red);background:var(--red-bg)}
.tc-due-notstarted{color:var(--purple);background:var(--purple-bg)}
.tc-due-today {color:var(--amber);background:var(--amber-bg)}
.tc-due-soon {color:#0369a1;background:#e0f2fe}
.tc-due-normal {color:var(--t4);background:var(--s2)}
.tc-ext-badge {font-size:10px;color:var(--t4);background:var(--s2);padding:1px 5px;border-radius:4px}
/* Right side */
.tc-side{
display:flex;align-items:center;gap:6px;
padding:0 10px 0 6px;flex-shrink:0;
}
.tc-avatar{
width:26px;height:26px;border-radius:50%;
font-size:10px;font-weight:700;color:#fff;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;border:2px solid rgba(255,255,255,.6);
transition:transform .12s;cursor:default;
}
.tc-avatar:hover{transform:scale(1.1)}
.tc-avatar-empty{background:var(--s3);color:var(--t4);border:1.5px dashed var(--b2)}
/* Actions — show on row hover */
.tc-acts{
display:flex;gap:2px;
opacity:0;transform:translateX(6px);
transition:opacity .14s,transform .14s;
pointer-events:none;
}
.tc:hover .tc-acts,.tc-acts:focus-within{opacity:1;transform:none;pointer-events:all}
.tc-action-btn{
width:26px;height:26px;border-radius:6px;
border:1px solid var(--b1);background:var(--s1);
color:var(--t3);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .12s;
}
.tc-action-btn:hover{background:var(--s3);color:var(--t1);border-color:var(--b2)}
.tc-act-start:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.tc-act-complete:hover{background:var(--g3);color:#fff;border-color:var(--g3)}
/* ─── Grouping — by status/urgency ──────────────────────────── */
.tg-section{margin-bottom:10px}
.tg-header{
display:flex;align-items:center;justify-content:space-between;
padding:6px 10px;cursor:pointer;border-radius:8px;
transition:background .12s;margin-bottom:3px;user-select:none;
}
.tg-header:hover{background:var(--s2)}
.tg-header-left{display:flex;align-items:center;gap:8px}
.tg-chevron{color:var(--t4);transition:transform .2s;flex-shrink:0}
.tg-collapsed{transform:rotate(-90deg)}
.tg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tg-label{font-size:13px;font-weight:700;color:var(--t2)}
.tg-count{
font-size:11px;font-weight:700;
background:var(--s3);border-radius:20px;padding:1px 8px;color:var(--t4);
}
.tg-body{display:flex;flex-direction:column;gap:2px;padding-right:0}
.tg-body-hidden{display:none}
/* ─── Project group sections ─────────────────────────────────── */
.tpg-section{margin-bottom:14px}
.tpg-header{
display:flex;align-items:center;justify-content:space-between;
padding:8px 14px;
border:1px solid var(--b0);border-radius:8px 8px 0 0;
background:var(--s1);
}
.tpg-hd-norm{border-right:3px solid var(--g4)}
.tpg-hd-late{border-right:3px solid var(--red);background:#fff8f8}
.tpg-hd-done{border-right:3px solid var(--green);background:#f3faf5}
.tpg-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.tpg-name{font-size:13px;font-weight:800;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpg-count{font-size:11px;color:var(--t4);background:var(--s3);padding:2px 8px;border-radius:12px;font-weight:600;white-space:nowrap}
.tpg-late-badge{font-size:11px;color:var(--red);background:var(--red-bg);padding:2px 8px;border-radius:12px;font-weight:700;white-space:nowrap}
.tpg-pct{font-size:12px;font-weight:700;color:var(--t3);flex-shrink:0}
.tpg-body{
border:1px solid var(--b0);border-top:none;
border-radius:0 0 8px 8px;overflow:hidden;
background:var(--s0);
}
.tpg-body .tc{border-radius:0;margin-top:0}
.tpg-body .tc + .tc{border-top:1px solid var(--b0)}
.tpg-body .tc:last-child{border-bottom:none}
/* Assignee group sections */
.tag-section{margin-bottom:14px}
.tag-header{
display:flex;align-items:center;gap:10px;
padding:8px 14px;
border:1px solid var(--b0);border-radius:8px 8px 0 0;
background:var(--s1);border-right:3px solid var(--blue);
}
.tag-avatar{
width:28px;height:28px;border-radius:50%;
font-size:11px;font-weight:700;color:#fff;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tag-name{font-size:13px;font-weight:800;color:var(--t1)}
.tag-count{font-size:11px;color:var(--t4);background:var(--s3);padding:2px 8px;border-radius:12px;font-weight:600}
.tag-body{
border:1px solid var(--b0);border-top:none;
border-radius:0 0 8px 8px;overflow:hidden;background:var(--s0);
}
.tag-body .tc{border-radius:0;margin-top:0}
.tag-body .tc + .tc{border-top:1px solid var(--b0)}
/* ─── Empty state ────────────────────────────────────────────── */
.tp-empty{
display:flex;flex-direction:column;align-items:center;
padding:56px 20px;gap:12px;text-align:center;
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
}
.tp-empty-icon{opacity:.3}
.tp-empty-title{font-size:15px;font-weight:700;color:var(--t2)}
.tp-empty-sub{font-size:13px;color:var(--t4);max-width:260px;line-height:1.5}
.tp-empty-reset{
margin-top:4px;padding:8px 18px;
background:var(--g5);border:1.5px solid var(--g4);
border-radius:8px;color:var(--g3);font-size:13px;font-weight:700;
cursor:pointer;transition:all .13s;font-family:var(--ff);
}
.tp-empty-reset:hover{background:var(--g3);color:#fff}
/* ─── Mobile ─────────────────────────────────────────────────── */
@media(max-width:640px){
#page-tasks{padding:10px 12px 30px}
.tc-acts{opacity:1;transform:none;pointer-events:all}
.tc-title{font-size:13px}
.tp-sort-row{display:none}
.tp-count-num{font-size:20px}
.tp-toggle-text{display:none}
.tp-tab{padding:8px 9px;font-size:12px}
.tp-tab-count{display:none}
}
@media(max-width:400px){
.tc-check-wrap{width:36px}
.tc-side{padding:0 8px 0 4px}
}
@media(min-width:1280px){
.kpi-grid{grid-template-columns:repeat(6,1fr)}
.pg-v2{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1600px){
.pg-v2{grid-template-columns:repeat(4,1fr)}
}
/* ═══════════════════════════════════════════════════════════════
SKELETONS — Loading placeholders
═══════════════════════════════════════════════════════════════ */
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.kpi-skeleton{
height:108px;border-radius:var(--r);
background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
background-size:200% 100%;
animation:shimmer 1.6s infinite;
border:1px solid var(--b0);
}
.uc-skeleton{
height:52px;border-radius:8px;margin-bottom:4px;
background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
background-size:200% 100%;
animation:shimmer 1.6s infinite;
}
.uc-skeleton + .uc-skeleton{animation-delay:.15s}
.uc-skeleton + .uc-skeleton + .uc-skeleton{animation-delay:.3s}
/* ═══════════════════════════════════════════════════════════════
KPI CARD — SVG icon sizing
═══════════════════════════════════════════════════════════════ */
.kpi-ic svg{width:16px;height:16px;display:block}
.kpi-ic{
width:34px;height:34px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
margin-bottom:12px;
}
/* ═══════════════════════════════════════════════════════════════
ACCESSIBILITY — Focus trap overlay
═══════════════════════════════════════════════════════════════ */
.overlay:focus{outline:none}
[role="dialog"]{outline:none}
.overlay.open{animation:none}
/* Chart loading state */
#ringChart{min-height:120px}
#team-bars:empty::after{
content:'جارٍ التحميل...';
display:block;padding:20px;
font-size:12px;color:var(--t4);text-align:center;
}
/* ═══════════════════════════════════════════════════════════════
PM IMPROVEMENTS — Team workload + Task comment button
═══════════════════════════════════════════════════════════════ */
/* Team workload badges */
.tm2-badge{
display:inline-flex;align-items:center;gap:4px;
font-size:11px;font-weight:700;
padding:3px 9px;border-radius:20px;
}
.tm2-badge-red {background:var(--red-bg);color:var(--red)}
.tm2-badge-amber {background:var(--amber-bg);color:var(--amber)}
.tm2-badge-green {background:var(--green-bg);color:var(--green)}
.tm2-badge-grey {background:var(--s2);color:var(--t3)}
/* Due rate progress bar */
.tm2-due-rate{
display:flex;align-items:center;gap:8px;
padding:10px 0 0;margin-top:8px;
border-top:1px solid var(--b0);
}
.tm2-due-rate-lbl{font-size:10px;font-weight:700;color:var(--t4);white-space:nowrap;min-width:fit-content}
.tm2-due-rate-bar{flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.tm2-due-rate-fill{height:100%;border-radius:4px;transition:width .7s var(--ease)}
.tm2-due-rate-pct{font-size:11px;font-weight:800;color:var(--t2);white-space:nowrap;min-width:30px;text-align:left}
/* Comment button in task card */
.tc-act-comment:hover{background:var(--g5);color:var(--g3);border-color:var(--g4)}
/* KPI — due-based display */
.kpi-card .kv{letter-spacing:-1px}
/* ═══════════════════════════════════════════════════════════════
PROJECT CARDS — Full CSS (was missing after cleanup)
═══════════════════════════════════════════════════════════════ */
.prj-card{
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r);
box-shadow:var(--sh1);
display:flex;flex-direction:column;
overflow:hidden;
transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
border-top:3px solid var(--g4);
}
.prj-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.prj-card-late{border-top-color:var(--red)}
.prj-card-done{border-top-color:var(--green)}
/* Header */
.prj-card-hd{
display:flex;align-items:center;gap:var(--sp3);
padding:var(--sp4) var(--sp4) var(--sp3);
}
.prj-ring-wrap{flex-shrink:0}
.prj-card-info{flex:1;min-width:0}
.prj-card-name{
font-size:var(--fz-md);font-weight:800;color:var(--t1);
line-height:1.3;margin-bottom:6px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px;
}
.prj-health{
display:inline-flex;align-items:center;gap:5px;
font-size:var(--fz-xs);font-weight:700;
padding:3px 9px;border-radius:999px;
}
.prj-health-done{background:var(--green-bg);color:var(--green)}
.prj-health-late{background:var(--red-bg);color:var(--red)}
.prj-health-good{background:var(--g5);color:var(--g3)}
.prj-health-risk{background:var(--amber-bg);color:var(--amber)}
/* Stats row */
.prj-stats-row{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
padding:8px 14px;
}
.prj-stat{text-align:center}
.prj-stat + .prj-stat{border-right:1px solid var(--b0)}
.prj-stat-num{
font-size:20px;font-weight:800;line-height:1.1;
color:var(--t1);font-variant-numeric:tabular-nums;
}
.prj-stat-lbl{font-size:10px;color:var(--t4);font-weight:600;margin-top:2px}
.prj-stat-prog .prj-stat-num{color:var(--amber)}
.prj-stat-done .prj-stat-num{color:var(--green)}
.prj-stat-late .prj-stat-num{color:var(--red)}
/* Progress bar */
.prj-progress-wrap{
display:flex;align-items:center;gap:10px;
padding:8px 14px;
}
.prj-progress-bar{
flex:1;height:6px;background:var(--s3);border-radius:4px;overflow:hidden;
}
.prj-progress-fill{
height:100%;border-radius:4px;
transition:width .7s var(--ease);
}
.prj-progress-pct{
font-size:12px;font-weight:700;color:var(--t3);
white-space:nowrap;min-width:32px;text-align:left;
}
/* Active tasks */
.prj-tasks-section{
padding:0 14px 8px;display:flex;flex-direction:column;gap:5px;flex:1;
}
.prj-task-row{
display:flex;align-items:center;gap:7px;min-height:22px;
}
.prj-task-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.prj-task-dot-red {background:var(--red)}
.prj-task-dot-amber {background:var(--amber)}
.prj-task-dot-prog {background:var(--blue)}
.prj-task-dot-norm {background:var(--g4)}
.prj-task-name{
flex:1;color:var(--t2);font-size:12px;font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prj-task-date{font-size:11px;color:var(--t4);font-weight:600;white-space:nowrap}
.prj-date-late {color:var(--red)}
.prj-date-today{color:var(--amber)}
.prj-all-done{
display:flex;align-items:center;gap:6px;
font-size:12px;color:var(--green);font-weight:600;padding:4px 0;
}
/* Footer */
.prj-card-footer{
display:flex;align-items:center;justify-content:space-between;
padding:8px 14px;border-top:1px solid var(--b0);
margin-top:auto;background:var(--s1);
}
.prj-wbs-btn{
display:inline-flex;align-items:center;gap:5px;
padding:5px 11px;border-radius:6px;
border:1.5px solid var(--b1);background:var(--s0);
font-size:11px;font-weight:600;color:var(--t3);
cursor:pointer;transition:all .13s;font-family:var(--ff);
}
.prj-wbs-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.prj-active-lbl{font-size:11px;color:var(--t4);font-weight:500}
/* ── Mobile fixes for projects page ─────────────────────────── */
@media(max-width:767px){
.prj-card-hd{padding:12px 12px 8px;gap:10px}
.prj-card-name{font-size:13px}
.prj-stats-row{padding:7px 10px}
.prj-stat-num{font-size:17px}
.prj-progress-wrap{padding:7px 12px}
.prj-tasks-section{padding:0 12px 8px}
.prj-card-footer{padding:7px 12px}
}
/* ── Overview urgent card mobile ─────────────────────────────── */
@media(max-width:767px){
.ov-section-hd{flex-direction:column;align-items:flex-start}
.urgent-filters{gap:4px}
.uf-btn{padding:4px 9px;font-size:11px}
.uf-av{width:14px;height:14px;font-size:7px}
.urgent-card{flex-wrap:wrap}
.uc-acts{opacity:1;transform:none;pointer-events:all}
/* Action buttons in urgent cards always visible on mobile */
}
/* ── Task cards mobile ───────────────────────────────────────── */
@media(max-width:767px){
.tc-side{padding:0 8px 0 4px;gap:4px}
.tc-avatar{width:24px;height:24px;font-size:9px}
.tc-main{padding:9px 6px 9px 0}
.tc-title{font-size:13px}
.tc-bottom{gap:4px}
.tc-project-tag{font-size:10px;padding:1px 5px}
}
/* ── Urgent filters — prevent overflow on mobile ─────────────── */
.urgent-filters{
display:flex;flex-wrap:wrap;gap:4px;align-items:center;
}
.uf-btn{
display:inline-flex;align-items:center;gap:4px;
padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600;
background:var(--s2);color:var(--t3);border:1px solid var(--b0);
cursor:pointer;transition:all .14s;white-space:nowrap;
font-family:var(--ff);
}
.uf-btn:hover{background:var(--s3);color:var(--t1)}
.uf-btn.on{background:var(--g3);color:#fff;border-color:var(--g3)}
.uf-av{
width:16px;height:16px;border-radius:50%;
font-size:8px;font-weight:700;color:#fff;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* ═══════════════════════════════════════════════════════════════
URGENT CARD — overview page (was missing after cleanup)
═══════════════════════════════════════════════════════════════ */
.ov-urgent-list{display:flex;flex-direction:column;gap:4px}
.urgent-card{
display:flex;align-items:center;gap:10px;
background:var(--s0);border:1px solid var(--b0);
border-radius:8px;padding:10px 12px;
transition:box-shadow .14s,transform .12s;
border-right:3px solid transparent;
position:relative;
}
.urgent-card:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.uc-red {border-right-color:var(--red);background:#fff8f8}
.uc-amber {border-right-color:var(--amber);background:#fffcf0}
.uc-left{flex-shrink:0;display:flex;align-items:center}
.uc-status-dot{
width:10px;height:10px;border-radius:50%;
border:2px solid var(--b2);
}
.uc-dot-prog{background:var(--amber);border-color:var(--amber)}
.uc-dot-open{background:transparent}
.uc-body{flex:1;min-width:0}
.uc-name{
font-size:13px;font-weight:600;color:var(--t1);
display:block;margin-bottom:3px;text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .12s;
}
.uc-name:hover{color:var(--g3)}
.uc-meta{
display:flex;align-items:center;gap:5px;
flex-wrap:wrap;
}
.uc-proj{
font-size:11px;color:var(--t4);font-weight:600;
background:var(--s2);padding:1px 6px;border-radius:4px;
white-space:nowrap;
}
.uc-sep{color:var(--s4);font-size:10px}
.uc-member{
display:inline-flex;align-items:center;gap:4px;
font-size:11px;color:var(--t3);
}
.uc-due{
font-size:11px;font-weight:700;
padding:1px 6px;border-radius:4px;
}
.uc-due-red {color:var(--red);background:var(--red-bg)}
.uc-due-amber{color:var(--amber);background:var(--amber-bg)}
.uc-due-norm {color:var(--t4);background:var(--s2)}
.uc-acts{
display:flex;gap:3px;align-items:center;
flex-shrink:0;
opacity:0;transition:opacity .14s;
}
.urgent-card:hover .uc-acts{opacity:1}
/* Mobile — always show actions */
@media(max-width:767px){
.uc-acts{opacity:1}
.urgent-card{padding:9px 10px;gap:8px}
.uc-name{font-size:12px}
}
/* ov-empty */
.ov-empty{
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:32px 20px;
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
text-align:center;
}
.ov-empty-text{font-size:13px;font-weight:600;color:var(--t4)}
/* ═══════════════════════════════════════════════════════════════
PROJECT GANTT (ppg-*) — CSS for buildProjectGantt()
═══════════════════════════════════════════════════════════════ */
.ppg-desktop{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);overflow:hidden;
}
.ppg-scale{
position:relative;height:28px;
background:var(--s2);border-bottom:1px solid var(--b1);
overflow:hidden;
}
.ppg-scale-lbl{
position:absolute;top:6px;
font-size:10px;font-weight:700;color:var(--t4);
transform:translateX(50%);white-space:nowrap;
}
.ppg-scale-tick{
position:absolute;top:0;bottom:0;
width:1px;background:var(--b1);
}
.ppg-today-tick{
position:absolute;top:0;bottom:0;
width:2px;background:var(--g4);opacity:.6;
}
.ppg-rows{display:flex;flex-direction:column}
.ppg-row{
display:flex;align-items:center;
border-bottom:1px solid var(--b0);min-height:36px;
}
.ppg-row:last-child{border-bottom:none}
.ppg-row.done{opacity:.55}
.ppg-label{
width:180px;min-width:180px;
padding:6px 12px;border-left:1px solid var(--b0);
font-size:12px;font-weight:600;color:var(--t2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.ppg-dot{
width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.ppg-chart{
flex:1;position:relative;min-height:36px;overflow:hidden;
}
.ppg-today{
position:absolute;top:0;bottom:0;
width:2px;background:var(--g4);opacity:.5;z-index:2;
}
.ppg-bar{
position:absolute;top:12px;height:10px;
border-radius:4px 0 0 4px;min-width:3px;
transition:opacity .2s;
}
.ppg-diamond{
position:absolute;top:6px;
font-size:16px;line-height:1;z-index:1;
transform:translateX(50%);
}
.ppg-due-lbl{
position:absolute;bottom:3px;
font-size:9px;font-weight:700;color:var(--t4);
transform:translateX(50%);white-space:nowrap;
}
/* Mobile gantt */
.ppg-mobile{display:none}
@media(max-width:640px){
.ppg-desktop{display:none}
.ppg-mobile{
display:flex;flex-direction:column;gap:6px;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);padding:10px;
}
.ppg-m-card{
display:flex;align-items:flex-start;gap:8px;
padding:8px 10px;border-radius:6px;
background:var(--s1);border:1px solid var(--b0);
}
.ppg-m-card.done{opacity:.6}
.ppg-m-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ppg-m-body{flex:1;min-width:0}
.ppg-m-name{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px}
.ppg-m-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ppg-m-due{font-size:11px;font-weight:700}
}
/* ═══════════════════════════════════════════════════════════════
OVERVIEW SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.ov-urgent-section{display:flex;flex-direction:column;gap:10px}
.ov-section-hd{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:8px;
}
.ov-section-title-wrap{display:flex;align-items:baseline;gap:8px}
.ov-section-title{font-size:14px;font-weight:800;color:var(--t1)}
.ov-section-sub{font-size:11px;color:var(--t4);font-weight:500}
/* ═══════════════════════════════════════════════════════════════
WBS — Professional improvements
═══════════════════════════════════════════════════════════════ */
/* Project block hover */
.wbs-proj-block{
transition:box-shadow .15s;
}
.wbs-proj-block:hover{box-shadow:var(--sh2)}
/* Better project header */
.wbs-proj-header{
gap:8px;
}
.wbs-proj-icon-name{
min-width:0;flex:1;
}
.wbs-proj-name{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:260px;
}
/* Task row improvements */
.wbs-task-row{
transition:background .1s;
align-items:center;
}
.wbs-task-name{
font-size:12.5px;
}
/* Mini progress bar — wider */
.wbs-mini-bar{
width:70px;height:4px;
}
/* WBS summary bar */
.wbs-summary-top{
display:flex;align-items:center;gap:16px;
padding:14px 20px;
background:linear-gradient(135deg,var(--g5),var(--g6));
border-radius:var(--r2);margin-bottom:14px;
border:1px solid var(--g4);
flex-wrap:wrap;
}
.wbs-summary-title{font-size:13px;font-weight:800;color:var(--g1)}
.wbs-summary-stats{display:flex;gap:14px;flex-wrap:wrap;flex:1;align-items:center}
.wbs-summary-stat{font-size:12.5px;color:var(--t2)}
.wbs-summary-stat strong{font-weight:800;margin-left:3px}
.wbs-summary-bar-wrap{
flex:1;min-width:100px;height:7px;
background:var(--s3);border-radius:4px;overflow:hidden;
}
.wbs-summary-bar-fill{
height:100%;border-radius:4px;
background:linear-gradient(90deg,var(--g3),var(--g2));
transition:width .8s var(--ease);
}
/* Col heads sticky */
.wbs-col-heads{
position:sticky;top:0;z-index:1;
}
/* Empty WBS */
.wbs-proj-empty{
padding:24px;text-align:center;
color:var(--t4);font-size:12.5px;
}
/* ═══════════════════════════════════════════════════════════════
PERIODIC REPORTS — Professional layout
═══════════════════════════════════════════════════════════════ */
/* Toolbar */
.per-toolbar{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.per-info{
display:flex;align-items:center;gap:6px;
font-size:12px;color:var(--t3);
}
.per-count{
font-size:20px;font-weight:800;color:var(--g3);
font-variant-numeric:tabular-nums;
}
.per-info-lbl{color:var(--t4)}
.per-dot{color:var(--s4)}
/* Period tabs */
.per-tabs{
display:flex;gap:6px;flex-wrap:wrap;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid var(--b0);
}
.per-tab{
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:8px 14px;border-radius:var(--r2);
border:1.5px solid var(--b1);background:var(--s1);
cursor:pointer;transition:all .14s;font-family:var(--ff);
min-width:80px;
}
.per-tab:hover{border-color:var(--g4);background:var(--g5)}
.per-tab.active{
border-color:var(--g4);background:var(--g5);
box-shadow:0 2px 8px rgba(16,185,129,.15);
}
.per-tab-type{
font-size:10px;font-weight:700;color:var(--t4);
text-transform:uppercase;letter-spacing:.3px;
}
.per-tab.active .per-tab-type{color:var(--g3)}
.per-tab-key{
font-size:12.5px;font-weight:700;color:var(--t2);
}
.per-tab.active .per-tab-key{color:var(--g2)}
/* Report body */
.per-body{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);overflow:hidden;
box-shadow:var(--sh1);
}
/* ═══════════════════════════════════════════════════════════════
PDF IMPORT MODAL
═══════════════════════════════════════════════════════════════ */
.modal-lg{width:680px;max-width:96vw}
.pdf-tip{
display:flex;align-items:flex-start;gap:7px;
font-size:11.5px;color:var(--t4);
background:var(--s2);border-radius:6px;
padding:8px 12px;margin-top:6px;line-height:1.5;
}
.pdf-tip svg{flex-shrink:0;margin-top:2px;color:var(--blue)}
.pdf-tasks-count{
font-size:12px;font-weight:700;color:var(--g3);
margin-bottom:8px;padding:6px 10px;
background:var(--g5);border-radius:6px;
border-right:3px solid var(--g3);
}
.pdf-task-list{
display:flex;flex-direction:column;gap:4px;
max-height:340px;overflow-y:auto;
}
.pdf-task-row{
display:flex;align-items:center;gap:8px;
background:var(--s1);border:1px solid var(--b0);
border-radius:6px;padding:7px 10px;
transition:border-color .12s;
}
.pdf-task-row:hover{border-color:var(--g4)}
.pdf-task-num{
font-size:10px;font-weight:800;color:var(--t4);
min-width:18px;text-align:center;
}
.pdf-task-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pdf-task-name{
width:100%;border:1px solid var(--b1);border-radius:4px;
padding:4px 8px;font-size:12.5px;font-family:var(--ff);
background:var(--s0);color:var(--t1);outline:none;
transition:border-color .12s;
}
.pdf-task-name:focus{border-color:var(--g4);box-shadow:0 0 0 2px var(--accent-soft)}
.pdf-task-meta{
display:flex;gap:5px;flex-wrap:wrap;align-items:center;
}
.pdf-task-date,.pdf-task-ass{
padding:3px 7px;font-size:11px;font-family:var(--ff);
border:1px solid var(--b1);border-radius:4px;
background:var(--s0);color:var(--t2);outline:none;
transition:border-color .12s;
}
.pdf-task-date:focus,.pdf-task-ass:focus{border-color:var(--g4)}
.pdf-task-remove{
width:24px;height:24px;border-radius:50%;border:none;
background:transparent;color:var(--t4);font-size:12px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .12s;flex-shrink:0;
}
.pdf-task-remove:hover{background:var(--red-bg);color:var(--red)}
/* ═══════════════════════════════════════════════════════════════
LISTS SETTINGS MODAL
═══════════════════════════════════════════════════════════════ */
.ls-container{
display:flex;flex-direction:column;gap:4px;
max-height:240px;overflow-y:auto;
background:var(--s1);border:1px solid var(--b0);
border-radius:var(--r2);padding:6px;
}
.ls-row{
display:flex;align-items:center;gap:10px;
background:var(--s0);border:1px solid var(--b0);
border-radius:6px;padding:8px 12px;
transition:border-color .12s;
}
.ls-row:hover{border-color:var(--g4)}
.ls-row-info{flex:1;min-width:0}
.ls-row-name{font-size:13px;font-weight:600;color:var(--t1)}
.ls-row-id{font-size:10px;color:var(--t4);margin-top:2px;font-family:monospace}
.ls-remove-btn{
width:24px;height:24px;border-radius:50%;border:none;
background:transparent;color:var(--t4);font-size:12px;
cursor:pointer;transition:all .12s;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.ls-remove-btn:hover{background:var(--red-bg);color:var(--red)}
.ls-add-row{display:flex;gap:8px;align-items:flex-start}
.ls-add-fields{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.ls-add-fields input{
padding:7px 10px;border:1.5px solid var(--b1);border-radius:6px;
font-size:12.5px;font-family:var(--ff);background:var(--s0);color:var(--t1);
outline:none;transition:border-color .13s;min-width:0;
}
.ls-add-fields input:focus{border-color:var(--g4)}
.ls-help-tip{
display:flex;align-items:flex-start;gap:6px;
font-size:11px;color:var(--t4);margin-top:8px;
background:var(--s2);border-radius:6px;padding:7px 10px;
line-height:1.5;
}
.ls-help-tip svg{flex-shrink:0;margin-top:1px}
.ls-help-tip code{
background:var(--s3);padding:1px 5px;border-radius:3px;
font-size:10.5px;color:var(--t2);
}
/* ── Lists Settings — folder grouping ───────────────────────── */
.ls-folder-group{margin-bottom:10px}
.ls-folder-hd{
display:flex;align-items:center;gap:5px;
font-size:10px;font-weight:800;color:var(--t4);
text-transform:uppercase;letter-spacing:.5px;
padding:4px 6px 4px 0;
border-bottom:1px solid var(--b0);margin-bottom:4px;
}
/* ── Lists Settings — folder groups ─────────────────────────── */
.ls-folder-group{margin-bottom:8px}
.ls-folder-hd{
display:flex;align-items:center;gap:5px;
font-size:10px;font-weight:800;color:var(--t4);
text-transform:uppercase;letter-spacing:.5px;
padding:4px 6px;margin-bottom:3px;
}
/* ═══════════════════════════════════════════════════════════════
PROJECTS PAGE — Product section headers
═══════════════════════════════════════════════════════════════ */
.proj-product-grid{display:flex;flex-direction:column;gap:20px}
.proj-product-section{display:flex;flex-direction:column;gap:10px}
.proj-product-hd{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;gap:12px;flex-wrap:wrap;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r2);border-right:4px solid var(--g3);
box-shadow:var(--sh1);
}
.proj-product-hd-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.proj-product-name{font-size:14px;font-weight:800;color:var(--t1)}
.proj-product-count{
font-size:11px;font-weight:600;color:var(--t4);
background:var(--s2);padding:2px 8px;border-radius:10px;
}
.proj-product-late{
font-size:11px;font-weight:700;color:var(--red);
background:var(--red-bg);padding:2px 8px;border-radius:10px;
}
.proj-product-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.proj-product-pct{font-size:12px;font-weight:700;color:var(--t3);white-space:nowrap}
.proj-product-bar{width:80px;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.proj-product-bar-fill{height:100%;border-radius:4px;transition:width .6s var(--ease)}
/* ═══════════════════════════════════════════════════════════════
REPORTS PAGE — Product structure section
═══════════════════════════════════════════════════════════════ */
.rep-product-structure-wrap{
margin-bottom:16px;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden;
}
.rep-struct-hd{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;border-bottom:1px solid var(--b0);
background:var(--s1);
}
.rep-struct-title{
display:flex;align-items:center;gap:7px;
font-size:13px;font-weight:800;color:var(--t1);
}
.rep-struct-sub{font-size:11px;color:var(--t4)}
.rep-proj-structure{padding:12px;display:flex;flex-direction:column;gap:10px}
/* Product block */
.rep-product-block{
border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden;
}
.rep-product-hd{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;gap:10px;
background:var(--s2);border-bottom:1px solid var(--b0);
flex-wrap:wrap;
}
.rep-product-hd-left{display:flex;align-items:center;gap:7px;flex:1}
.rep-product-name{font-size:13px;font-weight:800;color:var(--t1)}
.rep-product-late{
font-size:10px;font-weight:700;color:var(--red);
background:var(--red-bg);padding:2px 7px;border-radius:10px;
}
.rep-product-hd-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.rep-product-pct{font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap}
.rep-product-bar{width:60px;height:4px;background:var(--s4);border-radius:4px;overflow:hidden}
.rep-product-bar-fill{height:100%;border-radius:4px}
/* Project rows */
.rep-proj-rows{display:flex;flex-direction:column}
.rep-proj-row{
display:flex;align-items:center;gap:10px;
padding:9px 14px;border-bottom:1px solid var(--b0);
transition:background .1s;flex-wrap:wrap;
}
.rep-proj-row:last-child{border-bottom:none}
.rep-proj-row:hover{background:var(--s1)}
.rep-proj-row-name{
display:flex;align-items:center;gap:7px;
flex:1;min-width:160px;font-size:12.5px;font-weight:600;color:var(--t2);
}
.rpr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--s4)}
.rpr-late .rpr-dot{background:var(--red)}
.rpr-done .rpr-dot{background:var(--green)}
.rpr-prog .rpr-dot{background:var(--amber)}
.rpr-open .rpr-dot{background:var(--blue)}
.rep-proj-row-stats{
display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.rpr-stat{font-size:11px;color:var(--t4)}
.rpr-done-num{color:var(--green);font-weight:600}
.rpr-late-num{color:var(--red);font-weight:700}
.rep-proj-row-bar{display:flex;align-items:center;gap:6px;min-width:100px}
.rpr-bar-wrap{flex:1;height:4px;background:var(--s3);border-radius:4px;overflow:hidden}
.rpr-bar-fill{height:100%;border-radius:4px;transition:width .6s}
.rpr-pct{font-size:11px;font-weight:700;color:var(--t3);min-width:30px;text-align:left}
/* Lists settings folder header */
.ls-folder-group{margin-bottom:8px}
.ls-folder-hd{
display:flex;align-items:center;gap:5px;
font-size:10px;font-weight:800;color:var(--t4);
letter-spacing:.5px;padding:4px 6px 3px;
}
@media(max-width:640px){
.proj-product-hd{padding:8px 10px}
.proj-product-bar{display:none}
.rep-proj-row{flex-wrap:wrap;gap:6px}
.rep-proj-row-bar{min-width:80px}
}
/* ── Portfolio: Product sections ────────────────────────────── */
.pf-prod-section{margin-bottom:12px}
/* ── Lists Settings — type selector ────────────────────────── */
.ls-type-sel{
padding:3px 8px;border-radius:6px;
border:1.5px solid var(--b1);background:var(--s0);
font-size:11px;font-family:var(--ff);color:var(--t2);
cursor:pointer;transition:border-color .13s;flex-shrink:0;
}
.ls-type-sel:focus{border-color:var(--g4);outline:none}
/* ═══════════════════════════════════════════════════════════════
PENDING PAGE
═══════════════════════════════════════════════════════════════ */
/* Toolbar */
.pend-toolbar{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:16px;flex-wrap:wrap;
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh1);
}
.pend-kpis{display:flex;gap:20px;align-items:center}
.pend-kpi{display:flex;flex-direction:column;align-items:center}
.pend-kpi-num{font-size:24px;font-weight:800;color:var(--t1);line-height:1}
.pend-kpi-lbl{font-size:11px;color:var(--t4);font-weight:600}
.pend-filters{display:flex;gap:8px;flex-wrap:wrap}
.pend-sel{
padding:6px 10px;border-radius:8px;
border:1.5px solid var(--b1);background:var(--s0);
font-size:12px;font-family:var(--ff);color:var(--t2);
cursor:pointer;outline:none;transition:border-color .13s;
}
.pend-sel:focus{border-color:var(--g4)}
/* Groups */
.pend-cards{display:flex;flex-direction:column;gap:12px}
.pend-group{
background:var(--s0);border:1px solid var(--b0);
border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);
}
.pend-group-hd{
display:flex;align-items:center;gap:8px;
padding:10px 14px;background:var(--s1);
border-bottom:1px solid var(--b0);
border-right:3px solid #f59e0b;
}
.pend-group-name{font-size:13px;font-weight:800;color:var(--t1);flex:1}
.pend-group-folder{font-size:11px;color:var(--t4);background:var(--s2);padding:1px 7px;border-radius:8px}
.pend-group-cnt{font-size:11px;font-weight:700;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:10px}
/* Cards */
.pend-card{
display:flex;align-items:center;gap:10px;
padding:10px 14px;border-bottom:1px solid var(--b0);
transition:background .1s;
}
.pend-card:last-child{border-bottom:none}
.pend-card:hover{background:var(--s1)}
.pend-card-main{flex:1;min-width:0}
.pend-card-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap}
.pend-card-name{
font-size:13px;font-weight:600;color:var(--t1);
text-decoration:none;transition:color .12s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pend-card-name:hover{color:var(--g3);text-decoration:underline;text-underline-offset:2px}
.pend-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pend-due{font-size:11px;color:var(--t4)}
.pend-card-side{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pend-restore-btn{
padding:5px 10px;border-radius:6px;
border:1.5px solid var(--g4);background:var(--g5);
font-size:11px;font-weight:700;color:var(--g3);
cursor:pointer;transition:all .13s;font-family:var(--ff);
white-space:nowrap;
}
.pend-restore-btn:hover{background:var(--g3);color:#fff}
/* Pending btn in task card */
.tc-act-pending:hover{background:#fef3c7;color:#92400e;border-color:#f59e0b}
/* Pending status in task card color */
.tc-pending{border-right-color:#f59e0b;background:#fffdf0}
@media(max-width:640px){
.pend-toolbar{flex-direction:column;align-items:flex-start}
.pend-kpis{flex-direction:row}
}
/* ── Filter: product + project hierarchy ────────────────────── */
.tp-proj-group-lbl{
display:inline-flex;align-items:center;
font-size:9px;font-weight:800;color:var(--t4);
letter-spacing:.5px;text-transform:uppercase;
padding:2px 6px;background:var(--s2);
border-radius:4px;margin:2px 2px 0;
white-space:nowrap;
}
#product-chips{display:flex;flex-wrap:wrap;gap:5px}
/* ── Lists Modal — folder order section ─────────────────────── */
.ls-section-title{
display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:700;color:var(--t3);
margin-bottom:8px;
}
.ls-folder-order-wrap{
display:flex;flex-direction:column;gap:3px;
}
.ls-fo-row{
display:flex;align-items:center;gap:8px;
background:var(--s1);border:1.5px solid var(--b0);
border-radius:6px;padding:7px 10px;
cursor:grab;transition:border-color .12s,background .12s;
user-select:none;
}
.ls-fo-row:hover{border-color:var(--g4);background:var(--g5)}
.ls-fo-row.ls-fo-over{border-color:var(--g3);background:var(--g5);border-style:dashed}
.ls-fo-row:active{cursor:grabbing}
.ls-fo-handle{
font-size:14px;color:var(--t4);
cursor:grab;flex-shrink:0;line-height:1;
}
.ls-fo-name{
flex:1;font-size:13px;font-weight:600;color:var(--t1);
}
.ls-fo-arrows{display:flex;gap:3px}
.ls-fo-btn{
width:24px;height:24px;border-radius:5px;
border:1px solid var(--b1);background:var(--s0);
font-size:12px;cursor:pointer;color:var(--t3);
display:flex;align-items:center;justify-content:center;
transition:all .12s;
}
.ls-fo-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
.ls-fo-btn-ph{width:24px;height:24px;flex-shrink:0}
/* ── Product → Project cascade selects ─────────────────────── */
#f-product, #move-product, #pdf-product {
border:1.5px solid var(--g4);
background:var(--g5);
font-weight:600;
color:var(--g2);
}
#f-product:focus, #move-product:focus, #pdf-product:focus {
border-color:var(--g3);
box-shadow:0 0 0 3px var(--accent-soft);
}
/* ── On-Hold Project Styles ─────────────────────────────────── */
.ls-row-onhold{
border-right-color:var(--amber)!important;
background:#fffbf0;
}
.ls-onhold-badge{
display:inline-flex;align-items:center;
font-size:9px;font-weight:800;
background:#f59e0b;color:#fff;
padding:1px 5px;border-radius:4px;
margin-right:4px;vertical-align:middle;
letter-spacing:.3px;
}
.ls-hold-btn{
padding:3px 9px;border-radius:5px;
border:1.5px solid var(--amber);
background:#fffbf0;color:#92400e;
font-size:10px;font-weight:700;
cursor:pointer;transition:all .12s;
font-family:var(--ff);white-space:nowrap;
}
.ls-hold-btn:hover{background:var(--amber);color:#fff}
.ls-hold-active{background:var(--amber);color:#fff}
.ls-hold-active:hover{background:#d97706}
/* On-hold card style in projects page */
.prj-card-onhold{
border-top-color:var(--amber)!important;
opacity:.75;
}
.prj-card-onhold .prj-card-name::after{
content:' (م.م)';
font-size:10px;font-weight:700;
color:var(--amber);
}
/* ── Report: clickable project rows ─────────────────────────── */
.rep-proj-row{cursor:pointer}
.rep-proj-row:hover{background:var(--g5)!important}
.rpr-arrow{
margin-right:auto;opacity:0;
transition:opacity .12s, transform .12s;
color:var(--g3);flex-shrink:0;
}
.rep-proj-row:hover .rpr-arrow{opacity:1;transform:translateX(-3px)}
/* on-hold row style */
.rpr-onhold .rpr-dot{background:var(--amber)!important}
.rpr-onhold{opacity:.7}
/* ── Project page header ─────────────────────────────────────── */
.pp-header-sub span{font-weight:700}
/* Clickable project tags everywhere */
.tc-project-tag{cursor:pointer;transition:background .12s,color .12s}
.tc-project-tag:hover{background:var(--g5)!important;color:var(--g3)!important}
.uc-proj{cursor:pointer;transition:background .12s}
.uc-proj:hover{background:var(--g5)!important;color:var(--g3)!important}
/* ── WBS Inline inside project page ─────────────────────────── */
.wbs-inline{
padding:12px;
background:var(--s0);
min-height:200px;
}
.wbs-inline .wbs-proj-block{
box-shadow:none;
border:1px solid var(--b0);
border-radius:var(--r2);
margin-bottom:8px;
}
/* ═══════════════════════════════════════════════════════════════
WBS TREE — Project page inline + panel
═══════════════════════════════════════════════════════════════ */
/* Inline wrap — tree + gantt side by side */
.wbs-inline-wrap{
display:flex;gap:0;min-height:300px;
}
.wbs-inline-tree{
width:280px;min-width:240px;flex-shrink:0;
border-left:1px solid var(--b0);
overflow-y:auto;max-height:460px;
padding:12px;
}
.wbs-inline-gantt{
flex:1;min-width:0;overflow-x:auto;
padding:12px;
}
/* Root node */
.wbs-root-node{
font-size:13px;font-weight:800;color:var(--t1);
padding:8px 10px;margin-bottom:10px;
background:var(--g5);border-radius:6px;
border-right:3px solid var(--g3);
}
/* Phase blocks */
.wbs-phase{
margin-bottom:8px;border-radius:6px;overflow:hidden;
border:1px solid var(--b0);
}
.wbs-phase-hd{
display:flex;align-items:center;gap:6px;
padding:6px 10px;font-size:11px;font-weight:700;
background:var(--s2);
}
.wbs-phase-cnt{
margin-right:auto;font-size:10px;font-weight:800;
background:var(--s3);padding:1px 7px;border-radius:8px;color:var(--t3);
}
.wbs-phase-done .wbs-phase-hd{background:var(--green-bg);color:var(--green)}
.wbs-phase-late .wbs-phase-hd{background:var(--red-bg);color:var(--red)}
.wbs-phase-prog .wbs-phase-hd{background:var(--amber-bg);color:var(--amber)}
.wbs-phase-pend .wbs-phase-hd{background:var(--s2);color:var(--t3)}
/* Task list */
.wbs-task-list{padding:4px 0}
.wbs-task-item{
display:flex;align-items:center;gap:6px;
padding:5px 10px;transition:background .1s;
border-bottom:1px solid var(--b0);
}
.wbs-task-item:last-child{border-bottom:none}
.wbs-task-item:hover{background:var(--s1)}
.wbs-task-dot{
width:6px;height:6px;border-radius:50%;
flex-shrink:0;background:var(--t4);
}
.wbs-phase-done .wbs-task-dot{background:var(--green)}
.wbs-phase-late .wbs-task-dot{background:var(--red)}
.wbs-phase-prog .wbs-task-dot{background:var(--amber)}
.wbs-task-name{
flex:1;font-size:11.5px;color:var(--t2);font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wbs-task-date{font-size:10px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.wbs-more-lbl{
font-size:10px;color:var(--t4);padding:5px 10px;
font-style:italic;
}
/* Gantt inside WBS */
.wbs-nodate-msg{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:32px;color:var(--t4);font-size:13px;text-align:center;
}
/* Mobile */
@media(max-width:640px){
.wbs-inline-wrap{flex-direction:column}
.wbs-inline-tree{width:100%;max-height:300px;border-left:none;border-bottom:1px solid var(--b0)}
}
/* ═══════════════════════════════════════════════════════════════
PIPELINE GANTT (خط المنتج) — جدول زمني احترافي
─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
TIMELINE / خط المنتج — Task-based Gantt
─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
SINGLE-LINE TIMELINE (خط المنتج)
─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
XTL — Professional Timeline CSS v2
─────────────────────────────────────────────────────────────── */
#page-pipeline {
display: flex; flex-direction: column;
flex: 1; min-height: 0; padding: 0;
background: #f1f5f9; overflow: hidden;
}
/* ── Topbar ─────────────────────────────────────────────────── */
/* ── Filter bar ─────────────────────────────────────────────── */
/* Active filter chips */
/* Toggle chips + legend */
/* ── Stats bar ──────────────────────────────────────────────── */
/* ── Canvas ─────────────────────────────────────────────────── */
/* ── Grid ───────────────────────────────────────────────────── */
/* ── Axis ticks ─────────────────────────────────────────────── */
/* ── Arrow ──────────────────────────────────────────────────── */
/* ── Today needle ───────────────────────────────────────────── */
/* ── Maturity stage bars ────────────────────────────────────── */
/* ── Pins ───────────────────────────────────────────────────── */
/* ── Date tick ──────────────────────────────────────────────── */
/* ── Connector ──────────────────────────────────────────────── */
/* ── Label cards ────────────────────────────────────────────── */
/* Mini chips */
/* ── States ─────────────────────────────────────────────────── */
/* ── Tooltip ────────────────────────────────────────────────── */
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
/* Mobile modal */
@media (max-width: 600px) {
.pl-modal { width: 96%; max-height: 92vh; }
.pl-bulk-row { flex-direction: column; align-items: stretch; gap: 6px; }
.pl-bulk-select { min-width: unset; width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════
PRODUCT PIPELINE — خط المنتج
═══════════════════════════════════════════════════════════════ */
/* Toolbar */
.pipeline-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;background:var(--s0);
border-bottom:1px solid var(--b0);border-radius:var(--r2);
margin-bottom:16px;box-shadow:var(--sh1);
}
.pipeline-view-switcher{
display:flex;background:var(--s2);border-radius:8px;padding:3px;gap:2px;
}
.pl-view-btn{
display:flex;align-items:center;gap:6px;
padding:6px 14px;border-radius:6px;border:none;
font-size:12px;font-weight:600;font-family:var(--ff);
color:var(--t3);background:transparent;cursor:pointer;
transition:all .15s;
}
.pl-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:var(--sh1)}
.pipeline-stage-filter{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.pl-stage-btn{
padding:5px 12px;border-radius:20px;border:1.5px solid var(--b1);
background:var(--s0);font-size:11px;font-weight:600;font-family:var(--ff);
color:var(--t3);cursor:pointer;transition:all .13s;
}
.pl-stage-btn.active{background:var(--g3);color:#fff;border-color:var(--g3)}
.pl-refresh-btn{
width:34px;height:34px;border-radius:8px;
border:1.5px solid var(--b1);background:var(--s0);
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--t3);transition:all .13s;flex-shrink:0;
}
.pl-refresh-btn:hover{background:var(--g5);color:var(--g3)}
.pl-view{min-height:300px}
.pl-loading{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:48px;color:var(--t4);font-size:14px;
}
/* ── Kanban Board ─────────────────────────────────────────── */
.pl-kanban-board{
display:grid;grid-template-columns:repeat(4,1fr);
gap:12px;align-items:start;
}
@media(max-width:900px){.pl-kanban-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.pl-kanban-board{grid-template-columns:1fr}}
.pl-column{
background:var(--col-bg,var(--s1));
border:1.5px solid var(--col-color,var(--b0));
border-top:3px solid var(--col-color,var(--g3));
border-radius:var(--r2);overflow:hidden;
}
.pl-col-hd{
display:flex;align-items:center;gap:7px;
padding:10px 13px;background:rgba(255,255,255,.5);
border-bottom:1px solid var(--b0);
}
.pl-col-icon{font-size:16px}
.pl-col-label{font-size:13px;font-weight:800;color:var(--t1);flex:1}
.pl-col-cnt{
font-size:11px;font-weight:700;background:var(--col-color);
color:#fff;padding:2px 8px;border-radius:10px;
}
.pl-col-cards{display:flex;flex-direction:column;gap:8px;padding:10px}
.pl-empty-col{font-size:12px;color:var(--t4);text-align:center;padding:16px;font-style:italic}
/* Pipeline card */
.pl-card{
background:var(--s0);border:1.5px solid var(--b0);
border-radius:8px;padding:12px;
cursor:pointer;transition:all .15s;
}
.pl-card:hover{border-color:var(--col-color,var(--g4));box-shadow:var(--sh2);transform:translateY(-1px)}
.pl-card-top{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}
.pl-card-name{
flex:1;font-size:13px;font-weight:700;color:var(--t1);
line-height:1.4;
}
.pl-cu-link{
color:var(--t4);transition:color .12s;flex-shrink:0;padding:2px;
}
.pl-cu-link:hover{color:var(--g3)}
.pl-card-dur{font-size:11px;color:var(--t4);margin-bottom:8px}
.pl-card-progress{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pl-card-prog-bar{
flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden;
}
.pl-card-prog-fill{height:100%;border-radius:4px;transition:width .6s}
.pl-card-prog-pct{font-size:11px;font-weight:700;color:var(--t3);min-width:28px;text-align:left}
.pl-card-meta{display:flex;gap:8px}
.pl-card-tasks{font-size:11px;color:var(--t4)}
/* ── Timeline View ────────────────────────────────────────── */
.pl-timeline-wrap{overflow-x:auto;min-height:200px}
.pl-tl-header{
display:flex;border-bottom:1.5px solid var(--b0);
margin-bottom:4px;position:sticky;top:0;background:var(--s0);z-index:2;
}
.pl-tl-label-col{
width:160px;min-width:160px;flex-shrink:0;
font-size:11px;font-weight:700;color:var(--t4);padding:6px 8px;
border-left:1px solid var(--b0);
}
.pl-tl-months{flex:1;position:relative;height:28px;min-width:600px}
.pl-tl-month{
position:absolute;font-size:10px;color:var(--t4);
white-space:nowrap;transform:translateX(-50%);top:6px;
}
.pl-tl-month::before{
content:'';position:absolute;top:-6px;left:50%;
width:1px;height:4px;background:var(--b1);
}
.pl-tl-dur-col{
width:56px;min-width:56px;flex-shrink:0;
font-size:10px;font-weight:700;color:var(--t4);
padding:6px 4px;text-align:center;
}
.pl-tl-rows{display:flex;flex-direction:column;gap:3px}
.pl-tl-row{
display:flex;align-items:center;
padding:5px 0;border-bottom:1px solid var(--b0);
cursor:pointer;transition:background .1s;border-radius:4px;
}
.pl-tl-row:hover{background:var(--g6)}
.pl-tl-row .pl-tl-label-col{
font-size:12px;font-weight:600;color:var(--t2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border-left:none;
}
.pl-tl-track{
flex:1;position:relative;height:28px;min-width:600px;
background:var(--s2);border-radius:4px;overflow:hidden;
}
.pl-tl-bar{
position:absolute;top:4px;height:20px;border-radius:4px;
display:flex;align-items:center;overflow:hidden;
cursor:pointer;transition:opacity .15s;
min-width:20px;
}
.pl-tl-bar:hover{opacity:1!important;filter:brightness(1.1)}
.pl-tl-bar-label{
font-size:10px;font-weight:700;color:#fff;
white-space:nowrap;padding:0 6px;text-shadow:0 1px 2px rgba(0,0,0,.2);
overflow:hidden;text-overflow:ellipsis;
}
.pl-tl-current{
animation:pulse-border 2s infinite;
box-shadow:0 0 0 2px rgba(245,158,11,.4);
}
@keyframes pulse-border{
0%,100%{box-shadow:0 0 0 2px rgba(245,158,11,.3)}
50%{box-shadow:0 0 0 4px rgba(245,158,11,.15)}
}
.pl-tl-row .pl-tl-dur-col{
font-size:11px;font-weight:600;color:var(--t3);text-align:center;
}
/* ── Add task modal — task type (main/subtask) ──────────────── */
.f-task-type-row{
display:flex;gap:12px;flex-wrap:wrap;
}
.f-type-opt{
display:flex;align-items:center;gap:6px;
font-size:13px;color:var(--t2);cursor:pointer;
padding:6px 12px;border-radius:8px;
border:1.5px solid var(--b1);background:var(--s0);
transition:all .12s;
}
.f-type-opt:has(input:checked){
border-color:var(--g3);background:var(--g5);color:var(--g2);font-weight:600;
}
.f-type-opt input{display:none}
/* ── Subtask badge in task list ─────────────────────────────── */
.tc-sub-badge{
display:inline-flex;align-items:center;
font-size:11px;font-weight:700;color:var(--t4);
margin-left:3px;opacity:.8;
}
/* ══════════════════════════════════════════════════════════════
FILTERS REDESIGN + SUBTASK STYLES
══════════════════════════════════════════════════════════════ */
/* ── Filter chip — new tp-fc style ───────────────────────────── */
.tp-adv-filters {
border-top: 1px solid var(--b2);
padding: 12px 16px 14px;
background: var(--bg);
display: flex; flex-direction: column; gap: 10px;
animation: filterSlideDown .18s var(--ease) both;
}
@keyframes filterSlideDown {
from { opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:translateY(0); }
}
.tp-adv-section { display:flex; flex-direction:column; gap:5px; }
.tp-adv-label {
display: flex; align-items: center; gap: 5px;
font-size: 10.5px; font-weight: 600;
color: var(--t3); text-transform: uppercase; letter-spacing: .04em;
}
.tp-fc-row {
display: flex; flex-wrap: wrap; gap: 5px;
}
.tp-fc {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 100px;
font-size: 12px; font-weight: 500;
border: 1.5px solid var(--b2);
background: var(--bg); color: var(--t2);
cursor: pointer; transition: all .15s;
white-space: nowrap;
}
.tp-fc:hover { border-color: var(--s4); color: var(--s4); }
.tp-fc.active {
background: var(--s4); color: #fff;
border-color: var(--s4);
}
/* Priority chips */
.tp-prio-urgent.active { background:#DC2626; border-color:#DC2626; }
.tp-prio-high.active { background:#D97706; border-color:#D97706; }
.tp-prio-normal.active { background:#2563EB; border-color:#2563EB; }
.tp-prio-low.active { background:#6B7280; border-color:#6B7280; }
/* Member chips */
.tp-mchip-av {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
font-size: 9px; font-weight: 700; color: #fff;
}
/* Subtask toggle */
.tp-adv-toggles { border-top: 1px solid var(--b2); padding-top: 10px; }
.tp-toggle-row {
display: flex; align-items: center; gap: 10px; cursor: pointer;
user-select: none;
}
.tp-toggle-track {
width: 34px; height: 18px; border-radius: 100px;
background: var(--b2); position: relative;
transition: background .2s; flex-shrink: 0;
}
.tp-toggle-track.on { background: var(--s4); }
.tp-toggle-thumb {
position: absolute; top: 2px; right: 16px;
width: 14px; height: 14px; border-radius: 50%;
background: #fff; transition: right .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tp-toggle-track.on .tp-toggle-thumb { right: 2px; }
.tp-toggle-label { font-size: 12px; font-weight: 500; color: var(--t1); }
.tp-toggle-hint { font-size: 11px; color: var(--t3); }
/* ── Active filter tags ───────────────────────────────────────── */
.tp-active-tags {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
padding: 8px 12px; border-radius: 8px;
background: color-mix(in srgb, var(--s4) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--s4) 20%, transparent);
}
.tp-active-tags-label { font-size: 11px; color: var(--t3); font-weight: 500; }
.tp-active-tags-list { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.tp-active-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 100px;
font-size: 11.5px; font-weight: 500;
background: var(--s4); color: #fff;
border: none; cursor: pointer;
transition: opacity .15s;
}
.tp-active-tag:hover { opacity: .8; }
.tp-active-tag-x { font-size: 13px; opacity: .7; }
.tp-clear-all {
font-size: 11px; color: var(--t3); border: none;
background: none; cursor: pointer; padding: 2px 6px;
border-radius: 4px; text-decoration: underline;
}
.tp-clear-all:hover { color: var(--s4); }
/* ── Subtask badge on parent task ────────────────────────────── */
.tc-sub-summary {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 5px; font-size: var(--fz-xs); color: var(--t3);
background: var(--s1); border: 1px solid var(--b0);
border-radius: 999px; padding: 3px 10px 3px 8px;
cursor: pointer; font-family: var(--ff);
transition: background .14s, border-color .14s, color .14s;
}
.tc-sub-summary:hover {
background: var(--g5); border-color: var(--g4); color: var(--g3);
}
.tc-sub-summary.expanded {
background: var(--g5); border-color: var(--g4); color: var(--g3); font-weight: 700;
}
.tc-sub-chev {
font-size: 8px; line-height: 1; transition: transform .2s var(--ease);
color: currentColor; opacity: .8;
}
.tc-sub-summary.expanded .tc-sub-chev { color: var(--g3); }
.tc-sub-count {
font-size: var(--fz-xs); font-weight: 600; color: inherit;
}
.tc-sub-progress {
width: 42px; height: 4px; border-radius: 2px;
background: var(--s3); overflow: hidden;
}
.tc-sub-bar {
height: 100%; border-radius: 2px;
background: var(--g4); transition: width .4s var(--ease);
}
.tc-sub-summary.expanded .tc-sub-bar { background: var(--g3); }
.tc-sub-frac {
font-size: 10px; font-weight: 700; color: var(--t4);
font-variant-numeric: tabular-nums; opacity: .85;
}
.tc-sub-summary.expanded .tc-sub-frac { color: var(--g3); }
/* ── Subtask badge ↳ in task rows ────────────────────────────── */
.tc-sub-badge {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700;
color: var(--t4); opacity: .65; margin-inline-end: 3px;
}
/* ══════════════════════════════════════════════════════════════
SUBTASK HIERARCHICAL DISPLAY
══════════════════════════════════════════════════════════════ */
/* Group container under parent card */
.tc-subtask-group {
margin-inline-start: 28px;
margin-top: 2px;
margin-bottom: 4px;
position: relative;
display: flex; flex-direction: column; gap: 4px;
}
/* Vertical connector line */
.tc-subtask-group::before {
content: '';
position: absolute;
inset-inline-start: -14px;
top: 0; bottom: 14px;
width: 2px;
background: var(--g4);
opacity: .35;
border-radius: 1px;
}
/* Each subtask row */
.tc-subtask-row {
position: relative;
padding-inline-start: 14px;
}
/* Horizontal connector */
.tc-subtask-row::before {
content: '';
position: absolute;
inset-inline-start: -14px;
top: 50%;
width: 14px; height: 2px;
background: var(--g4);
opacity: .35;
transform: translateY(-50%);
border-radius: 1px;
}
/* Subtask card — visually nested */
.tc-subtask-row .tc {
background: var(--s1);
border-style: dashed;
font-size: var(--fz-sm);
margin-top: 0 !important;
}
.tc-subtask-row .tc:hover {
background: var(--s0);
border-style: solid;
}
/* ══════════════════════════════════════════════════════════════
ON-HOLD PROJECT CARD — Professional Visual Treatment
══════════════════════════════════════════════════════════════ */
/* Override existing on-hold style with stronger treatment */
.prj-card-onhold {
border-top-color: #94A3B8 !important;
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
opacity: 1 !important;
position: relative;
overflow: hidden;
}
/* Diagonal stripe overlay — subtle "paused" texture */
.prj-card-onhold::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(148, 163, 184, 0.06) 6px,
rgba(148, 163, 184, 0.06) 12px
);
pointer-events: none;
border-radius: inherit;
}
/* On-hold banner — top right corner */
.prj-card-onhold::after {
content: '⏸ متوقف';
position: absolute;
top: 8px;
left: 8px;
background: #64748B;
color: #fff;
font-size: 9.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
letter-spacing: .03em;
font-family: 'IBM Plex Sans Arabic', sans-serif;
}
/* Remove the (م.م) suffix — replaced by badge */
.prj-card-onhold .prj-card-name::after {
display: none;
}
/* Muted text for on-hold */
.prj-card-onhold .prj-card-name {
color: #64748B;
padding-top: 4px; /* space for the banner */
}
/* Health badge — on-hold state */
.prj-health-hold {
background: #EDF2F7;
color: #64748B;
border-color: #CBD5E1;
}
/* Sort on-hold to end of list */
.prj-card-onhold .prj-stats-row {
opacity: .6;
}
.prj-card-onhold .prj-tasks-section {
opacity: .5;
}
/* ═══════════════════════════════════════════════════════════════
ACCESSIBILITY & POLISH LAYER — UX v2 (appended, non-destructive)
WCAG 2.2 AA · Apple HIG touch targets · reading-comfort
═══════════════════════════════════════════════════════════════ */
/* ── 1. Reduced motion (WCAG 2.3.3 / vestibular safety) ── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ── 2. Global keyboard focus ring (WCAG 2.4.7) ── */
:where(button,a,input,select,textarea,[tabindex],.nav-item,.tp-tab,.chip,.act-btn,.kpi-card):focus-visible{
outline:2.5px solid var(--accent);
outline-offset:2px;
border-radius:var(--r4);
}
/* on the dark sidebar use a light ring instead */
.sidebar :where(.nav-item,button,a):focus-visible{
outline-color:rgba(255,255,255,.85);
}
/* ── 3. Reading-comfort max-width on very large screens ── */
@media(min-width:1700px){
.page{max-width:1560px;margin-inline:auto;width:100%}
}
/* ── 4. Minimum touch target safety net (interactive controls) ── */
@media(pointer:coarse){
.nav-item,.tp-tab,.uf-btn,.btn-sec,.btn-primary,.btn-portfolio{min-height:44px}
.tp-search-clear,.act-btn{min-width:40px;min-height:40px}
}
/* ── 5. Reusable Empty State primitive ── */
.empty-state{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:var(--sp3);
padding:var(--sp7) var(--sp5);
color:var(--t3);
}
.empty-state-ic{
width:56px;height:56px;border-radius:50%;
background:var(--g5);color:var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:26px;margin-bottom:var(--sp1);
}
.empty-state-title{font-size:var(--fz-md);font-weight:700;color:var(--t1)}
.empty-state-sub{font-size:var(--fz-sm);color:var(--t4);max-width:340px;line-height:1.6}
/* ── 6. Smoother scroll + selection color ── */
html{scroll-behavior:smooth}
::selection{background:var(--accent-soft);color:var(--g2)}
/* ── 7. Card hover consistency (unified interactive feel) ── */
.chart-card{transition:box-shadow .2s var(--ease),border-color .2s}
.chart-card:hover{box-shadow:var(--sh2);border-color:var(--b1)}
/* ═══════════════════════════════════════════════════════════════
OVERVIEW — DAILY PULSE (نبض اليوم) — package (b)
═══════════════════════════════════════════════════════════════ */
.pl2-board{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp3);min-height:400px;width:100%}
.ov-pulse{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:var(--sp3);
padding:var(--sp4) var(--sp5);
background:linear-gradient(135deg,var(--g1) 0%,#0A2016 100%);
border-radius:var(--r);
box-shadow:var(--sh2);
position:relative;
overflow:hidden;
}
.ov-pulse::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 90% 10%,rgba(16,185,129,.12) 0%,transparent 50%);
pointer-events:none;
}
.ov-pulse-item{
display:flex;align-items:center;gap:var(--sp3);
position:relative;z-index:1;
padding-inline:var(--sp3);
border-inline-start:1px solid rgba(255,255,255,.08);
}
.ov-pulse-item:first-child{border-inline-start:none}
.ov-pulse-ic{
width:42px;height:42px;border-radius:var(--r2);
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.08);
color:#fff;flex-shrink:0;
border:1px solid rgba(255,255,255,.10);
}
.ov-pulse-ic-red{background:rgba(195,43,39,.20);color:#FCA5A1;border-color:rgba(195,43,39,.30)}
.ov-pulse-ic-purple{background:rgba(94,50,176,.22);color:#C4B5FD;border-color:rgba(94,50,176,.32)}
.ov-pulse-ic-amber{background:rgba(168,90,4,.22);color:#FBBF6E;border-color:rgba(168,90,4,.32)}
.ov-pulse-ic-green{background:rgba(16,185,129,.20);color:#6EE7B7;border-color:rgba(16,185,129,.30)}
.ov-pulse-ic-blue{background:rgba(10,102,166,.22);color:#7BC4F5;border-color:rgba(10,102,166,.32)}
.ov-pulse-body{flex:1;min-width:0}
.ov-pulse-val{
font-size:var(--fz-xl);font-weight:800;color:#fff;
line-height:1;letter-spacing:-.5px;
font-variant-numeric:tabular-nums;
display:flex;align-items:baseline;gap:6px;
}
.ov-pulse-val small{font-size:var(--fz-sm);font-weight:600;color:rgba(255,255,255,.55)}
.ov-pulse-lbl{
font-size:var(--fz-xs);
color:rgba(255,255,255,.65);
margin-top:4px;font-weight:600;
text-transform:uppercase;letter-spacing:.5px;
}
.ov-pulse-skeleton{
height:62px;border-radius:var(--r2);
background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);
background-size:200% 100%;
animation:pulse-shimmer 1.4s infinite linear;
grid-column:1/-1;
}
@keyframes pulse-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* KPI trend indicator — package (b) */
.kpi-trend{
display:inline-flex;align-items:center;gap:2px;
font-size:var(--fz-xs);font-weight:700;
padding:2px 7px;border-radius:999px;
margin-inline-start:6px;
font-variant-numeric:tabular-nums;
}
.kpi-trend-up{background:var(--green-bg);color:var(--green)}
.kpi-trend-dn{background:var(--red-bg);color:var(--red)}
.kpi-trend-fl{background:var(--s2);color:var(--t3)}
@media(max-width:767px){
.ov-pulse{grid-template-columns:repeat(2,1fr);padding:var(--sp3);gap:var(--sp2)}
.ov-pulse-item{padding-inline:var(--sp2);border-inline-start:none}
.ov-pulse-ic{width:36px;height:36px}
.ov-pulse-val{font-size:var(--fz-lg)}
}
/* ═══════════════════════════════════════════════════════════════
PIPELINE v2 — رحلة المنتج (Product Journey)
مفهوم → نموذج → منتج → مشروع
═══════════════════════════════════════════════════════════════ */
/* ── 1. Header ─────────────────────────────────────────────── */
.pl2-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.pl2-header-l h2{font-size:var(--fz-xl);font-weight:800;color:var(--t1);letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp2)}
.pl2-header-l p{font-size:var(--fz-sm);color:var(--t3);margin-top:4px}
.pl2-header-r{display:flex;align-items:center;gap:var(--sp2)}
/* ── 2. Pulse strip (4 metrics) ───────────────────────────── */
.pl2-pulse{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:var(--sp3);
width:100%;
padding:var(--sp4) var(--sp5);
background:linear-gradient(135deg,var(--g1) 0%,#0A2016 100%);
border-radius:var(--r);box-shadow:var(--sh2);
position:relative;overflow:hidden;
}
.pl2-pulse::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 90% 10%,rgba(16,185,129,.12) 0%,transparent 50%);
pointer-events:none;
}
.pl2-pulse-item{display:flex;align-items:center;gap:var(--sp3);position:relative;z-index:1;padding-inline:var(--sp3);border-inline-start:1px solid rgba(255,255,255,.08)}
.pl2-pulse-item:first-child{border-inline-start:none}
.pl2-pulse-ic{width:42px;height:42px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;border:1px solid rgba(255,255,255,.10)}
.pl2-pulse-ic-total{background:rgba(255,255,255,.08)}
.pl2-pulse-ic-new{background:rgba(16,185,129,.20);color:#6EE7B7;border-color:rgba(16,185,129,.30)}
.pl2-pulse-ic-up{background:rgba(10,102,166,.22);color:#7BC4F5;border-color:rgba(10,102,166,.32)}
.pl2-pulse-ic-pause{background:rgba(168,90,4,.22);color:#FBBF6E;border-color:rgba(168,90,4,.32)}
.pl2-pulse-body{flex:1;min-width:0}
.pl2-pulse-val{font-size:var(--fz-xl);font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pl2-pulse-lbl{font-size:var(--fz-xs);color:rgba(255,255,255,.65);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
/* ── 3. Toolbar (search + filters + view switch) ──────────── */
.pl2-toolbar{
display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
padding:var(--sp3) var(--sp4);box-shadow:var(--sh1);
}
.pl2-search-wrap{flex:1;min-width:220px;display:flex;align-items:center;gap:var(--sp2);background:var(--s1);border:1.5px solid var(--b1);border-radius:var(--r3);padding:9px 13px;transition:border-color .15s,box-shadow .15s,background .15s}
.pl2-search-wrap:focus-within{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.pl2-search-wrap svg{color:var(--t4);flex-shrink:0}
.pl2-search-wrap input{flex:1;border:none;background:transparent;font-size:var(--fz-base);color:var(--t1);outline:none;font-family:var(--ff);min-height:24px}
.pl2-select{padding:9px 13px;border:1.5px solid var(--b1);border-radius:var(--r3);background:var(--s1);font-family:var(--ff);font-size:var(--fz-base);color:var(--t1);cursor:pointer;min-height:42px;outline:none;transition:border-color .15s,background .15s}
.pl2-select:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.pl2-adv-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--r3);border:1.5px solid var(--b1);background:var(--s1);font-size:var(--fz-sm);font-weight:600;color:var(--t3);cursor:pointer;transition:background .14s,border-color .14s,color .14s;min-height:42px;font-family:var(--ff)}
.pl2-adv-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.pl2-adv-btn.has-filters{border-color:var(--g3);background:var(--g5);color:var(--g3)}
.pl2-adv-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--red);color:#fff;border-radius:9px;font-size:var(--fz-xs);font-weight:800}
.pl2-view-grp{display:flex;background:var(--s2);border-radius:var(--r3);padding:3px;gap:2px;margin-inline-start:auto}
.pl2-view-btn{padding:7px 13px;font-size:var(--fz-sm);font-weight:600;color:var(--t3);background:transparent;border:none;border-radius:var(--r4);cursor:pointer;transition:background .14s,color .14s;font-family:var(--ff);display:inline-flex;align-items:center;gap:5px;min-height:32px}
.pl2-view-btn:hover{color:var(--t1)}
.pl2-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:700}
/* Advanced panel (collapsible) */
.pl2-adv-panel{display:none;padding:var(--sp4);background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);box-shadow:var(--sh1);margin-top:calc(-1 * var(--sp3))}
.pl2-adv-panel.open{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp3)}
.pl2-adv-group{display:flex;flex-direction:column;gap:6px}
.pl2-adv-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
/* ── 4. Stage Board (Kanban) ──────────────────────────────── */
.pl2-toolbar{width:100%;box-sizing:border-box}
.pl2-stage{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;min-height:300px;transition:background .2s,border-color .2s}
.pl2-stage.drag-over{background:var(--g6);border-color:var(--g4);border-style:dashed}
/* Stage header (sticky) */
.pl2-stage-hd{padding:var(--sp4) var(--sp4) var(--sp3);background:var(--s0);border-bottom:1px solid var(--b0);position:sticky;top:0;z-index:2}
.pl2-stage-hd-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);margin-bottom:8px}
.pl2-stage-name{display:flex;align-items:center;gap:7px;font-size:var(--fz-base);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.pl2-stage-emoji{font-size:18px;line-height:1}
.pl2-stage-cnt{font-size:var(--fz-xs);font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;font-variant-numeric:tabular-nums}
.pl2-stage-bar{height:3px;border-radius:3px;width:100%}
/* Stage colors (semantic per journey phase) */
.pl2-stage-concept .pl2-stage-cnt,.pl2-stage-concept .pl2-stage-bar{background:var(--purple)}
.pl2-stage-prototype .pl2-stage-cnt,.pl2-stage-prototype .pl2-stage-bar{background:var(--blue)}
.pl2-stage-product .pl2-stage-cnt,.pl2-stage-product .pl2-stage-bar{background:var(--amber)}
.pl2-stage-project .pl2-stage-cnt,.pl2-stage-project .pl2-stage-bar{background:var(--green)}
.pl2-stage-unset .pl2-stage-cnt,.pl2-stage-unset .pl2-stage-bar{background:var(--t4)}
/* Stage body */
.pl2-stage-body{flex:1;padding:var(--sp3);display:flex;flex-direction:column;gap:var(--sp2);overflow-y:auto;max-height:calc(100vh - 360px)}
.pl2-stage-body::-webkit-scrollbar{width:6px}
.pl2-stage-body::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
.pl2-stage-empty{padding:var(--sp5) var(--sp3);text-align:center;color:var(--t4);font-size:var(--fz-sm);border:2px dashed var(--b1);border-radius:var(--r2);background:var(--s0);margin:auto 0}
/* ── 5. Project Card ──────────────────────────────────────── */
.pl2-card{
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);
padding:var(--sp3);cursor:grab;
transition:box-shadow .16s var(--ease),border-color .16s,transform .12s;
position:relative;
}
.pl2-card:hover{box-shadow:var(--sh2);border-color:var(--b1);transform:translateY(-2px)}
.pl2-card:active{cursor:grabbing}
.pl2-card.dragging{opacity:.5;cursor:grabbing}
.pl2-card.is-onhold{opacity:.65}
.pl2-card.is-onhold::after{content:'متوقف';position:absolute;top:8px;left:8px;font-size:var(--fz-xs);font-weight:700;color:var(--amber);background:var(--amber-bg);padding:2px 8px;border-radius:999px;border:1px solid rgba(168,90,4,.2)}
.pl2-card-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pl2-card-type{font-size:14px;flex-shrink:0;line-height:1}
.pl2-card-name{font-size:var(--fz-base);font-weight:700;color:var(--t1);line-height:1.3;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl2-card-fresh{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--green-bg);flex-shrink:0}
.pl2-card-product{font-size:var(--fz-xs);color:var(--t3);margin-bottom:var(--sp3);font-weight:600}
.pl2-card-prog{margin-bottom:var(--sp2)}
.pl2-card-prog-bar{height:5px;background:var(--s3);border-radius:3px;overflow:hidden}
.pl2-card-prog-fill{height:100%;border-radius:3px;background:var(--g3);transition:width .5s var(--ease)}
.pl2-stage-concept .pl2-card-prog-fill{background:var(--purple)}
.pl2-stage-prototype .pl2-card-prog-fill{background:var(--blue)}
.pl2-stage-product .pl2-card-prog-fill{background:var(--amber)}
.pl2-stage-project .pl2-card-prog-fill{background:var(--green)}
.pl2-card-prog-lbl{display:flex;justify-content:space-between;font-size:var(--fz-xs);color:var(--t3);margin-top:5px;font-weight:600;font-variant-numeric:tabular-nums}
.pl2-card-meta{display:flex;align-items:center;gap:var(--sp2);font-size:var(--fz-xs);color:var(--t4);flex-wrap:wrap}
.pl2-card-meta-item{display:inline-flex;align-items:center;gap:4px}
.pl2-card-meta svg{flex-shrink:0}
.pl2-card-done{background:var(--green-bg);color:var(--green);border-color:var(--green);padding:2px 7px;border-radius:999px;font-weight:700;border:1px solid rgba(16,122,62,.18)}
/* ── 6. Table View ────────────────────────────────────────── */
.pl2-table-wrap{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);overflow-x:auto;-webkit-overflow-scrolling:touch}
.pl2-table{width:100%;border-collapse:collapse}
.pl2-table thead th{position:sticky;top:0;z-index:2;padding:12px 14px;background:var(--s1);font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-align:right;border-bottom:1px solid var(--b1);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.pl2-table td{padding:13px 14px;border-bottom:1px solid var(--b0);font-size:var(--fz-sm);vertical-align:middle;color:var(--t2)}
.pl2-table tr:last-child td{border-bottom:none}
.pl2-table tr{cursor:pointer;transition:background .12s}
.pl2-table tbody tr:hover td{background:var(--g6)}
.pl2-table-stage{display:inline-flex;align-items:center;gap:5px;font-size:var(--fz-xs);font-weight:700;padding:3px 9px;border-radius:999px}
.pl2-table-stage-concept{background:var(--purple-bg);color:var(--purple)}
.pl2-table-stage-prototype{background:var(--blue-bg);color:var(--blue)}
.pl2-table-stage-product{background:var(--amber-bg);color:var(--amber)}
.pl2-table-stage-project{background:var(--green-bg);color:var(--green)}
.pl2-table-stage-unset{background:var(--s2);color:var(--t4)}
.pl2-table-prog{display:flex;align-items:center;gap:8px;min-width:130px}
.pl2-table-prog-bar{flex:1;height:5px;background:var(--s3);border-radius:3px;overflow:hidden}
.pl2-table-prog-fill{height:100%;background:var(--g3);border-radius:3px}
.pl2-table-prog-pct{font-size:var(--fz-xs);font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums;min-width:38px;text-align:end}
/* ── 7. Empty state ──────────────────────────────────────── */
.pl2-empty-page{padding:var(--sp7) var(--sp5);text-align:center;color:var(--t3)}
.pl2-empty-page svg{opacity:.3;margin-bottom:var(--sp3)}
.pl2-empty-page .t{font-size:var(--fz-md);font-weight:700;color:var(--t1);margin-bottom:6px}
.pl2-empty-page .s{font-size:var(--fz-sm);color:var(--t4)}
/* ── 8. Project Detail Modal ─────────────────────────────── */
.pl2-detail-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3) var(--sp4);padding:var(--sp4);background:var(--s1);border-radius:var(--r2);border:1px solid var(--b0)}
.pl2-detail-row{display:flex;flex-direction:column;gap:3px}
.pl2-detail-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.pl2-detail-val{font-size:var(--fz-base);font-weight:700;color:var(--t1)}
.pl2-detail-section-title{font-size:var(--fz-sm);font-weight:700;color:var(--t1);margin-top:var(--sp3);margin-bottom:var(--sp2);display:flex;align-items:center;gap:6px}
.pl2-history-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}
.pl2-history-item{display:flex;align-items:center;gap:var(--sp2);padding:8px var(--sp3);background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);font-size:var(--fz-sm)}
.pl2-history-date{font-size:var(--fz-xs);color:var(--t4);font-variant-numeric:tabular-nums;min-width:90px;font-weight:600}
.pl2-history-arrow{color:var(--t4);font-size:var(--fz-sm)}
.pl2-history-from,.pl2-history-to{font-size:var(--fz-xs);font-weight:700;padding:2px 8px;border-radius:999px}
.pl2-detail-tasks{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.pl2-detail-task{display:flex;align-items:center;gap:var(--sp2);padding:8px var(--sp3);background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);font-size:var(--fz-sm)}
.pl2-detail-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pl2-detail-task-name{flex:1;min-width:0;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl2-detail-task-ass{font-size:var(--fz-xs);color:var(--t4);font-weight:600}
.pl2-stage-picker{display:flex;gap:6px;flex-wrap:wrap}
.pl2-stage-pick{padding:8px 14px;border-radius:999px;border:1.5px solid var(--b1);background:var(--s1);font-size:var(--fz-sm);font-weight:600;color:var(--t3);cursor:pointer;transition:background .14s,border-color .14s,color .14s;font-family:var(--ff)}
.pl2-stage-pick:hover{border-color:var(--g4);color:var(--g3)}
.pl2-stage-pick.current{background:var(--g3);border-color:var(--g3);color:#fff}
/* ── 8.5 ByProduct View — heart of pipeline v2 ───────────── */
.pl2-byproduct{display:flex;flex-direction:column;gap:var(--sp5);width:100%}
.pl2-bp-group{
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r);
padding:var(--sp4) var(--sp5);
box-shadow:var(--sh1);
display:flex;flex-direction:column;gap:var(--sp4);
transition:box-shadow .2s var(--ease),border-color .2s;
}
.pl2-bp-group:hover{box-shadow:var(--sh2);border-color:var(--b1)}
/* Product header */
.pl2-bp-hd{
display:flex;align-items:center;justify-content:space-between;
gap:var(--sp3);padding-bottom:var(--sp3);
border-bottom:1px solid var(--b0);
}
.pl2-bp-hd-l{display:flex;align-items:center;gap:var(--sp2);min-width:0;flex:1}
.pl2-bp-hd-l svg{color:var(--g3);flex-shrink:0}
.pl2-bp-hd-l h3{
font-size:var(--fz-md);font-weight:800;color:var(--t1);
letter-spacing:-.2px;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl2-bp-hd-cnt{
font-size:var(--fz-xs);font-weight:700;
color:var(--g3);background:var(--g5);
padding:3px 10px;border-radius:999px;
border:1px solid rgba(27,100,67,.15);
flex-shrink:0;
}
.pl2-bp-hd-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.pl2-bp-hd-pct{font-size:var(--fz-lg);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.5px}
.pl2-bp-hd-pct-lbl{font-size:var(--fz-xs);color:var(--t4);font-weight:600}
/* Sparkline — stage distribution bar */
.pl2-spark{
display:flex;width:100%;
height:8px;border-radius:999px;
overflow:hidden;
background:var(--s2);
border:1px solid var(--b0);
}
.pl2-spark-seg{height:100%;transition:width .5s var(--ease);min-width:2px}
.pl2-spark .pl2-stage-concept{background:var(--purple)}
.pl2-spark .pl2-stage-prototype{background:var(--blue)}
.pl2-spark .pl2-stage-product{background:var(--amber)}
.pl2-spark .pl2-stage-project{background:var(--green)}
.pl2-spark .pl2-stage-unset{background:var(--t4)}
/* Columns grid — 4 stages (or 5 with unset) */
.pl2-bp-cols{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
gap:var(--sp3);
}
.pl2-bp-col{
background:var(--s1);
border:1px solid var(--b0);
border-radius:var(--r2);
padding:var(--sp3);
display:flex;flex-direction:column;gap:var(--sp2);
min-height:120px;
transition:background .2s,border-color .2s;
}
.pl2-bp-col.drag-over{
background:var(--g6);
border-color:var(--g4);
border-style:dashed;
}
.pl2-bp-col-hd{
display:flex;align-items:center;gap:6px;
padding-bottom:var(--sp2);
border-bottom:1px solid var(--b0);
}
.pl2-bp-col-emoji{font-size:14px;line-height:1}
.pl2-bp-col-name{
flex:1;font-size:var(--fz-xs);font-weight:700;
color:var(--t2);text-transform:uppercase;letter-spacing:.5px;
}
.pl2-bp-col-cnt{
font-size:var(--fz-xs);font-weight:800;
padding:2px 8px;border-radius:999px;
color:#fff;font-variant-numeric:tabular-nums;
}
.pl2-bp-col.pl2-stage-concept .pl2-bp-col-cnt{background:var(--purple)}
.pl2-bp-col.pl2-stage-prototype .pl2-bp-col-cnt{background:var(--blue)}
.pl2-bp-col.pl2-stage-product .pl2-bp-col-cnt{background:var(--amber)}
.pl2-bp-col.pl2-stage-project .pl2-bp-col-cnt{background:var(--green)}
.pl2-bp-col.pl2-stage-unset .pl2-bp-col-cnt{background:var(--t4)}
.pl2-bp-col-body{
display:flex;flex-direction:column;gap:5px;
min-height:42px;flex:1;
}
.pl2-bp-empty{
font-size:var(--fz-xs);color:var(--t4);
text-align:center;padding:var(--sp3) 0;
opacity:.5;
}
/* Mini card (used inside ByProduct columns) */
.pl2-mini{
padding:8px 10px;cursor:grab;
border-radius:var(--r3);
background:var(--s0);
border:1px solid var(--b0);
border-right:3px solid transparent;
transition:box-shadow .14s var(--ease),border-color .14s,transform .12s;
position:relative;
}
.pl2-mini:hover{
box-shadow:var(--sh1);
transform:translateY(-1px);
border-color:var(--b1);
}
.pl2-mini:active{cursor:grabbing}
.pl2-mini.dragging{opacity:.5}
.pl2-mini.pl2-stage-concept{border-right-color:var(--purple)}
.pl2-mini.pl2-stage-prototype{border-right-color:var(--blue)}
.pl2-mini.pl2-stage-product{border-right-color:var(--amber)}
.pl2-mini.pl2-stage-project{border-right-color:var(--green)}
.pl2-mini.pl2-stage-unset{border-right-color:var(--t4);border-right-style:dashed}
.pl2-mini.is-onhold{opacity:.55}
.pl2-mini-name{
font-size:var(--fz-sm);font-weight:700;color:var(--t1);
line-height:1.3;margin-bottom:5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl2-mini-prog{
height:3px;background:var(--s3);border-radius:3px;
overflow:hidden;margin-bottom:4px;
}
.pl2-mini-prog-fill{height:100%;background:var(--g3);border-radius:3px;transition:width .4s var(--ease)}
.pl2-mini.pl2-stage-concept .pl2-mini-prog-fill{background:var(--purple)}
.pl2-mini.pl2-stage-prototype .pl2-mini-prog-fill{background:var(--blue)}
.pl2-mini.pl2-stage-product .pl2-mini-prog-fill{background:var(--amber)}
.pl2-mini.pl2-stage-project .pl2-mini-prog-fill{background:var(--green)}
.pl2-mini-meta{
display:flex;justify-content:space-between;
font-size:var(--fz-xs);color:var(--t4);
font-weight:600;font-variant-numeric:tabular-nums;
}
.pl2-mini-done{color:var(--green);font-weight:800}
/* ── 9. Responsive ───────────────────────────────────────── */
@media(max-width:1023px){
.pl2-board{grid-template-columns:repeat(2,1fr)}
.pl2-bp-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.pl2-header-l h2{font-size:var(--fz-lg)}
.pl2-pulse{grid-template-columns:repeat(2,1fr);padding:var(--sp3);gap:var(--sp2)}
.pl2-pulse-item{padding-inline:var(--sp2);border-inline-start:none}
.pl2-pulse-ic{width:36px;height:36px}
.pl2-pulse-val{font-size:var(--fz-lg)}
.pl2-toolbar{padding:var(--sp3)}
.pl2-view-grp{margin-inline-start:0;width:100%;justify-content:center}
.pl2-view-btn{flex:1}
.pl2-board{grid-template-columns:1fr;gap:var(--sp4)}
.pl2-stage-body{max-height:none}
.pl2-detail-info{grid-template-columns:1fr}
.pl2-table thead th,.pl2-table td{padding:9px 10px;font-size:var(--fz-xs)}
/* ByProduct mobile */
.pl2-bp-group{padding:var(--sp3)}
.pl2-bp-hd{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
.pl2-bp-hd-r{flex-direction:row;align-items:center;gap:6px;align-self:flex-end}
.pl2-bp-hd-pct{font-size:var(--fz-md)}
.pl2-bp-cols{grid-template-columns:1fr;gap:var(--sp2)}
.pl2-bp-col{min-height:auto}
}
/* ═══════════════════════════════════════════════════════════════
METRO LINE (mtr*) — خط مترو المشروع
═══════════════════════════════════════════════════════════════ */
/* ── Header ──────────────────────────────────────────────── */
.mtr-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.mtr-header-l h2{font-size:var(--fz-xl);font-weight:800;color:var(--t1);letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp2)}
.mtr-header-l p{font-size:var(--fz-sm);color:var(--t3);margin-top:4px;max-width:720px}
.mtr-header-r{display:flex;align-items:center;gap:var(--sp2);flex-shrink:0}
/* ── Toolbar (project select + pulse) ─────────────────────── */
.mtr-toolbar{
display:flex;align-items:center;gap:var(--sp4);
background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
padding:var(--sp4) var(--sp5);box-shadow:var(--sh1);
flex-wrap:wrap;
}
.mtr-select{
padding:11px 38px 11px 14px;border:1.5px solid var(--b1);border-radius:var(--r3);
background:var(--s1) url("data:image/svg+xml;utf8,") no-repeat left 14px center;
font-family:var(--ff);font-size:var(--fz-base);font-weight:600;
color:var(--t1);cursor:pointer;min-height:44px;outline:none;
min-width:280px;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.mtr-select:hover{border-color:var(--g4);background-color:#fff}
.mtr-select:focus{border-color:var(--g4);background-color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.mtr-select-label{
display:flex;align-items:center;gap:6px;
font-size:var(--fz-xs);font-weight:700;color:var(--t4);
text-transform:uppercase;letter-spacing:.5px;
margin-inline-end:var(--sp2);
}
/* Pulse summary (5 inline stats) */
.mtr-pulse{display:flex;gap:var(--sp4);flex:1;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.mtr-pulse-item{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-inline-end:var(--sp3);border-inline-end:1px solid var(--b0)}
.mtr-pulse-item:last-child{border-inline-end:none;padding-inline-end:0}
.mtr-pulse-val{font-size:var(--fz-lg);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.3px}
.mtr-pulse-lbl{font-size:var(--fz-xs);color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.mtr-pulse-done .mtr-pulse-val{color:var(--green)}
.mtr-pulse-active .mtr-pulse-val{color:var(--blue)}
.mtr-pulse-blocked .mtr-pulse-val{color:var(--red)}
/* ── Canvas ──────────────────────────────────────────────── */
.mtr-canvas{display:flex;flex-direction:column;gap:var(--sp5)}
/* Project header */
.mtr-proj-hd{
display:flex;align-items:center;justify-content:space-between;
gap:var(--sp3);background:var(--s0);
border:1px solid var(--b0);border-radius:var(--r);
padding:var(--sp4) var(--sp5);box-shadow:var(--sh1);
}
.mtr-proj-hd-l{display:flex;align-items:center;gap:var(--sp3);min-width:0;flex:1}
.mtr-proj-hd-l h3{font-size:var(--fz-lg);font-weight:800;color:var(--t1);letter-spacing:-.2px;line-height:1.2;margin:0}
.mtr-proj-folder{
display:inline-flex;align-items:center;
font-size:var(--fz-xs);font-weight:700;color:var(--g3);
background:var(--g5);padding:4px 11px;border-radius:999px;
border:1px solid rgba(27,100,67,.15);
}
/* ── The metro line itself ───────────────────────────────── */
.mtr-line-wrap{
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r);
padding:var(--sp6) var(--sp5);
box-shadow:var(--sh1);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.mtr-line{
display:flex;align-items:flex-start;
gap:0;min-width:max-content;
padding:var(--sp5) var(--sp3);
position:relative;
}
/* Station — vertical card with circle on top */
.mtr-station{
display:flex;flex-direction:column;align-items:center;
gap:var(--sp3);min-width:200px;
position:relative;z-index:2;
}
.mtr-st-circle{
width:54px;height:54px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:22px;flex-shrink:0;
background:var(--s0);
border:3px solid var(--s4);
position:relative;
transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.mtr-st-emoji{filter:saturate(.7);transition:filter .3s}
/* Train indicator */
.mtr-st-train{
position:absolute;top:-22px;left:50%;transform:translateX(-50%);
font-size:24px;line-height:1;
animation:mtr-train-pulse 1.6s ease-in-out infinite;
filter:drop-shadow(0 2px 6px rgba(10,102,166,.4));
}
@keyframes mtr-train-pulse{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-3px)}
}
/* Station states */
.mtr-st-done .mtr-st-circle{
background:var(--green-bg);border-color:var(--green);
box-shadow:0 4px 14px rgba(16,122,62,.18);
}
.mtr-st-done .mtr-st-emoji{filter:saturate(1.1)}
.mtr-st-done .mtr-st-circle::after{
content:'✓';position:absolute;bottom:-6px;right:-6px;
width:22px;height:22px;border-radius:50%;
background:var(--green);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:900;
box-shadow:0 2px 6px rgba(16,122,62,.35);
border:2px solid var(--s0);
}
.mtr-st-inprogress .mtr-st-circle{
background:var(--blue-bg);border-color:var(--blue);
box-shadow:0 0 0 0 rgba(10,102,166,.4);
animation:mtr-pulse-blue 2s ease-in-out infinite;
}
.mtr-st-inprogress .mtr-st-emoji{filter:saturate(1.1)}
@keyframes mtr-pulse-blue{
0%,100%{box-shadow:0 0 0 0 rgba(10,102,166,.45),0 4px 14px rgba(10,102,166,.18)}
50%{box-shadow:0 0 0 12px rgba(10,102,166,0),0 4px 14px rgba(10,102,166,.25)}
}
.mtr-st-blocked .mtr-st-circle{
background:var(--red-bg);border-color:var(--red);
box-shadow:0 4px 14px rgba(195,43,39,.20);
}
.mtr-st-blocked .mtr-st-emoji{filter:saturate(1.1)}
.mtr-st-blocked .mtr-st-circle::after{
content:'⚠';position:absolute;bottom:-6px;right:-6px;
width:22px;height:22px;border-radius:50%;
background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:900;
box-shadow:0 2px 6px rgba(195,43,39,.35);
border:2px solid var(--s0);
}
.mtr-st-notstarted .mtr-st-circle{
background:var(--s2);border-color:var(--s4);opacity:.7;
}
.mtr-st-notstarted .mtr-st-emoji{filter:grayscale(.6) opacity(.7)}
/* Current station — extra emphasis */
.mtr-st-current .mtr-st-circle{transform:scale(1.1)}
/* Station info card below circle */
.mtr-st-info{
background:var(--s0);
border:1px solid var(--b0);
border-radius:var(--r2);
padding:var(--sp3);
width:100%;
display:flex;flex-direction:column;gap:5px;
text-align:center;
transition:box-shadow .18s var(--ease),border-color .18s,transform .15s;
}
.mtr-station:hover .mtr-st-info{box-shadow:var(--sh2);border-color:var(--b1);transform:translateY(-2px)}
.mtr-st-current .mtr-st-info{border-color:var(--blue);box-shadow:0 2px 14px rgba(10,102,166,.12)}
.mtr-st-title{font-size:var(--fz-base);font-weight:800;color:var(--t1);line-height:1.2}
.mtr-st-stats{display:flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}
.mtr-st-count{font-size:var(--fz-xs);font-weight:700;color:var(--t3);background:var(--s2);padding:2px 8px;border-radius:999px}
.mtr-st-pct{font-size:var(--fz-xs);font-weight:800;color:var(--g3)}
.mtr-st-done .mtr-st-pct{color:var(--green)}
.mtr-st-inprogress .mtr-st-pct{color:var(--blue)}
.mtr-st-blocked .mtr-st-pct{color:var(--red)}
.mtr-st-bar{height:4px;background:var(--s3);border-radius:3px;overflow:hidden;width:100%}
.mtr-st-bar-fill{height:100%;background:var(--g3);border-radius:3px;transition:width .6s var(--ease)}
.mtr-st-done .mtr-st-bar-fill{background:var(--green)}
.mtr-st-inprogress .mtr-st-bar-fill{background:var(--blue)}
.mtr-st-blocked .mtr-st-bar-fill{background:var(--red)}
.mtr-st-tasks{
display:flex;flex-direction:column;gap:3px;
margin-top:var(--sp2);padding-top:var(--sp2);
border-top:1px solid var(--b0);
text-align:start;
}
.mtr-st-task-prev{
font-size:var(--fz-xs);color:var(--t3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.4;
}
.mtr-st-task-more{font-weight:700;color:var(--g3);font-size:10px}
.mtr-st-task-empty{color:var(--t4);font-style:italic;text-align:center;opacity:.7}
/* Connector between stations */
.mtr-connector{
flex:1;height:6px;
background:var(--s4);
align-self:center;
margin-top:-9px;
min-width:40px;max-width:120px;
border-radius:3px;
position:relative;
margin-inline:-2px;
}
.mtr-connector-done{background:linear-gradient(90deg,var(--green),var(--green))}
.mtr-connector-inprogress{
background:linear-gradient(90deg,var(--green) 0%,var(--blue) 100%);
position:relative;overflow:hidden;
}
.mtr-connector-inprogress::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
animation:mtr-flow 1.8s linear infinite;
}
@keyframes mtr-flow{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.mtr-connector-blocked{background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 8px,var(--s0) 8px,var(--s0) 12px)}
.mtr-connector-notstarted{background:repeating-linear-gradient(90deg,var(--s4) 0,var(--s4) 6px,transparent 6px,transparent 10px)}
/* Unclassified tasks footer */
.mtr-unclassified{
background:var(--amber-bg);
border:1px solid rgba(168,90,4,.20);
border-radius:var(--r);
padding:var(--sp4) var(--sp5);
}
.mtr-unc-hd{
display:flex;align-items:center;gap:var(--sp2);
margin-bottom:var(--sp3);font-size:var(--fz-sm);color:var(--amber);
font-weight:700;
}
.mtr-unc-hd > span{flex:1}
.mtr-unc-edit{
font-size:var(--fz-xs);font-weight:700;color:var(--amber);
background:rgba(168,90,4,.10);border:1px solid rgba(168,90,4,.25);
padding:5px 11px;border-radius:var(--r3);cursor:pointer;
font-family:var(--ff);transition:background .14s;
}
.mtr-unc-edit:hover{background:rgba(168,90,4,.20)}
.mtr-unc-tags{display:flex;flex-wrap:wrap;gap:6px}
.mtr-unc-tag{
font-size:var(--fz-xs);color:var(--amber);
background:#fff;border:1px solid rgba(168,90,4,.25);
padding:4px 10px;border-radius:var(--r3);
white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
}
/* Empty state */
.mtr-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:var(--sp7) var(--sp5);text-align:center;color:var(--t3);gap:var(--sp3);
background:var(--s0);border:1px dashed var(--b1);border-radius:var(--r);
}
.mtr-empty svg{opacity:.3}
.mtr-empty .t{font-size:var(--fz-md);font-weight:700;color:var(--t1)}
.mtr-empty .s{font-size:var(--fz-sm);color:var(--t4);max-width:380px;line-height:1.6}
/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1023px){
.mtr-station{min-width:170px}
.mtr-connector{min-width:30px;max-width:80px}
.mtr-pulse{justify-content:flex-start;width:100%}
}
@media(max-width:767px){
.mtr-header-l h2{font-size:var(--fz-lg)}
.mtr-toolbar{padding:var(--sp3);gap:var(--sp3)}
.mtr-select{min-width:100%;width:100%}
.mtr-pulse{justify-content:space-between}
.mtr-pulse-item{padding-inline-end:var(--sp2);border-inline-end:none;align-items:flex-start}
.mtr-pulse-val{font-size:var(--fz-md)}
.mtr-proj-hd{padding:var(--sp3);flex-direction:column;align-items:flex-start;gap:var(--sp2)}
.mtr-proj-hd-l{flex-direction:column;align-items:flex-start;gap:6px}
.mtr-line-wrap{padding:var(--sp4) var(--sp3)}
.mtr-line{padding:var(--sp4) 0;gap:var(--sp2)}
.mtr-station{min-width:140px}
.mtr-st-circle{width:46px;height:46px;font-size:18px}
.mtr-connector{min-width:18px}
.mtr-st-info{padding:var(--sp2)}
.mtr-unclassified{padding:var(--sp3)}
}
/* ══════════════════════════════════════════════════════════════
ORG CHART CARDS — Colors + Alerts Enhancement
══════════════════════════════════════════════════════════════ */
/* Card name row — health icon + name */
.ps-card-name-row {
display: flex;
align-items: flex-start;
gap: 5px;
margin-bottom: 4px;
}
.ps-card-health {
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
line-height: 1.2;
}
/* Badges */
.ps-badge {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 100px;
font-size: 9.5px;
font-weight: 700;
white-space: nowrap;
}
.ps-badge-late {
background: #FEE2E2;
color: #C0302A;
border: 1px solid #FECACA;
}
.ps-badge-done {
background: #F3F4F6;
color: #6B7280;
border: 1px solid #E5E7EB;
}
.ps-badge-count {
background: #F3F4F6;
color: #6B7280;
border: 1px solid #E5E7EB;
}
.ps-badge-done-full {
background: #DCFCE7;
color: #145E2F;
border: 1px solid #BBF7D0;
}
.ps-badge-hold {
background: #F1F5F9;
color: #64748B;
border: 1px solid #CBD5E1;
}
/* On-hold card — muted */
.ps-card-hold {
opacity: .75;
}
.ps-card-hold .ps-card-name {
color: #64748B;
}
/* Card hover — lift */
.ps-org-card:not(.ps-edit-mode):hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.10);
transition: transform .15s, box-shadow .15s;
}
/* ══════════════════════════════════════════════════════════════
PROJECT FILES — 4 Dots + Modal
══════════════════════════════════════════════════════════════ */
/* ── 4 Dots on org card ──────────────────────────────────── */
.ps-card-dots {
display: flex;
gap: 5px;
padding: 6px 0 2px;
border-top: 1px solid var(--b2);
margin-top: 6px;
cursor: pointer;
}
.ps-card-dots:hover { opacity: .8; }
.ps-dot {
width: 10px; height: 10px;
border-radius: 50%;
border: 2px solid #CBD5E1;
background: transparent;
transition: all .2s;
flex-shrink: 0;
}
.ps-dot-done {
background: #2A6B50;
border-color: #2A6B50;
box-shadow: 0 0 0 2px rgba(42,107,80,.15);
}
/* ── Project Files Modal ─────────────────────────────────── */
.pf-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 10px;
border: 1.5px solid var(--b2);
background: var(--bg2);
cursor: pointer;
transition: all .15s;
margin-bottom: 8px;
user-select: none;
}
.pf-item:hover {
border-color: var(--s4);
background: color-mix(in srgb, var(--s4) 5%, var(--bg2));
}
.pf-item-done {
border-color: #2A6B50;
background: #F0FDF4;
}
.pf-item-left {
display: flex; align-items: center; gap: 10px;
}
.pf-item-icon { font-size: 18px; }
.pf-item-label { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.pf-item-done .pf-item-label { color: #2A6B50; }
.pf-dot-wrap {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid #CBD5E1;
background: transparent;
transition: all .2s;
flex-shrink: 0;
}
.pf-item-done .pf-dot-wrap,
.pf-dot-done.pf-dot-wrap {
background: #2A6B50;
border-color: #2A6B50;
}
.pf-dot-done::after {
content: '✓';
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1;
}
.pf-item-done .pf-dot-wrap::after {
content: '✓';
color: #fff;
font-size: 13px;
font-weight: 800;
}
/* ══════════════════════════════════════════════════════════════
PROJECT PAGE — Files Section
══════════════════════════════════════════════════════════════ */
.pp-files-section {
padding: 12px 16px;
background: var(--bg2);
border-radius: 10px;
border: 1px solid var(--b2);
margin-bottom: 14px;
}
.pp-files-title {
font-size: 11px;
font-weight: 700;
color: var(--t3);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 10px;
}
.pp-files-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.pp-file-item {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 8px;
border: 1.5px solid var(--b2);
background: var(--bg);
cursor: pointer;
transition: all .15s;
flex: 1;
min-width: 120px;
}
.pp-file-item:hover {
border-color: var(--s4);
transform: translateY(-1px);
}
.pp-file-done {
border-color: #2A6B50;
background: #F0FDF4;
}
.pp-file-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid #CBD5E1;
background: transparent;
flex-shrink: 0;
transition: all .2s;
display: flex; align-items: center; justify-content: center;
}
.pp-file-dot-done {
background: #2A6B50;
border-color: #2A6B50;
display: flex;
align-items: center;
justify-content: center;
}
.pp-file-dot-done::after {
content: '✓';
color: #fff;
font-size: 8px;
font-weight: 900;
line-height: 1;
}
.pp-file-icon { font-size: 15px; }
.pp-file-label {
font-size: 12px;
font-weight: 600;
color: var(--t2);
}
.pp-file-done .pp-file-label { color: #2A6B50; }
@media(min-width:768px){
.ham-btn{display:none}
}