/* ============================================================================
SMI Technical Tracker — visual theme
Corporate navy + teal identity, refreshed: layered shadows, soft radii,
gradient surfaces, coloured KPI accents and quiet micro-interactions.
Every class name is unchanged; print / certificate / gantt layouts kept intact.
========================================================================= */
:root{
/* brand */
--navy:#0f2544;
--navy-2:#1b3a6b;
--navy-3:#274c86;
--teal:#0d7a82;
--teal-2:#12a3ad;
--teal-light:#e6f3f4;
/* surfaces */
--bg:#eef1f6;
--bg-2:#f6f8fb;
--card:#ffffff;
--line:#e4e8ee;
--line-strong:#d4dae2;
/* text */
--text:#182131;
--muted:#697585;
--muted-2:#8a95a4;
/* semantic */
--red:#c1442d; --red-bg:#fbe9e6;
--amber:#a5690a; --amber-bg:#fbf1de;
--green:#1c7a4d; --green-bg:#e5f4ec;
--purple:#5b3a9c; --purple-bg:#efe9f8;
--blue:#2563c9; --blue-bg:#e6eefc;
/* KPI accent rotation */
--k1:#2f6bed; --k2:#12a3ad; --k3:#7c56d6; --k4:#e08421; --k5:#1f9d63; --k6:#d9466a;
/* elevation */
--sh-1:0 1px 2px rgba(19,38,66,.06), 0 1px 3px rgba(19,38,66,.05);
--sh-2:0 2px 6px rgba(19,38,66,.07), 0 8px 24px -10px rgba(19,38,66,.18);
--sh-3:0 10px 40px -12px rgba(19,38,66,.30);
--sh-teal:0 6px 20px -8px rgba(13,122,130,.55);
--radius:12px;
--radius-lg:16px;
--radius-sm:8px;
--ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; color:var(--text);
background:
radial-gradient(900px 420px at 100% -8%, rgba(18,163,173,.10), transparent 60%),
radial-gradient(760px 380px at -6% 0%, rgba(47,107,237,.10), transparent 55%),
var(--bg);
background-attachment:fixed;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:14px; line-height:1.5;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
font-feature-settings:"cv11","ss01"; font-variant-numeric:tabular-nums;
}
::selection{background:rgba(18,163,173,.24);}
img{max-width:100%;}
@keyframes modalIn{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
/* ===== App shell: left module sidebar + module content area ===== */
.app-shell{display:flex; min-height:100vh; align-items:stretch;}
.module-sidebar{
flex:none; width:90px; position:sticky; top:0; align-self:flex-start;
height:100vh; overflow-y:auto;
background:linear-gradient(180deg,#14315c 0%,#0d2142 60%,#0a1c39 100%);
border-right:1px solid rgba(255,255,255,.06);
display:flex; flex-direction:column; align-items:stretch; padding:14px 10px 18px; gap:3px;
scrollbar-width:none;
}
.module-sidebar::-webkit-scrollbar{display:none;}
.module-sidebar-title{
padding:0 4px 14px; margin-bottom:10px;
border-bottom:1px solid rgba(255,255,255,.10);
display:flex; align-items:center; justify-content:center;
}
.module-sidebar-title img{
width:100%; height:auto; max-width:62px; background:#fff;
padding:5px 6px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.module-btn{
position:relative; background:none; border:none; color:#aab8cc; cursor:pointer;
padding:11px 4px 10px; border-radius:12px;
display:flex; flex-direction:column; align-items:center; gap:6px;
font-size:10px; font-weight:600; letter-spacing:.2px;
transition:background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.module-btn-icon{
font-size:19px; line-height:1;
filter:grayscale(.35) opacity(.9);
transition:transform .18s var(--ease), filter .18s var(--ease);
}
.module-btn-label{text-align:center; line-height:1.15;}
.module-btn:hover{background:rgba(255,255,255,.07); color:#eef4fb;}
.module-btn:hover .module-btn-icon{transform:translateY(-1px) scale(1.06); filter:none;}
.module-btn.active{
background:linear-gradient(180deg,rgba(18,163,173,.30),rgba(18,163,173,.14));
color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.module-btn.active .module-btn-icon{filter:none; transform:scale(1.05);}
.module-btn.active::before{
content:""; position:absolute; left:-10px; top:14%; bottom:14%; width:4px;
border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--teal-2),var(--teal));
box-shadow:0 0 12px rgba(18,163,173,.7);
}
/* One soft fade of the whole content area on initial load. .module-content is
never display-toggled, so switching modules does NOT replay it — panes just
swap instantly, with no per-navigation fade/slide "blink". */
.module-content{flex:1; min-width:0; animation:fadeIn .2s var(--ease) both;}
.module-pane{min-height:100vh;}
@media(max-width:640px){
.module-sidebar{width:62px; padding:12px 6px;}
.module-btn-label{display:none;}
.module-btn-icon{font-size:21px;}
.module-btn.active::before{left:-6px;}
}
/* ===== Header ===== */
header{
color:#fff; padding:22px 26px 20px; position:relative; overflow:hidden;
background:linear-gradient(120deg,#0f2748 0%,#1b3a6b 52%,#12525c 120%);
}
header::after{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
background:
radial-gradient(420px 220px at 88% -40%, rgba(18,163,173,.55), transparent 70%),
radial-gradient(360px 200px at 12% 150%, rgba(47,107,237,.40), transparent 70%);
}
header h1{margin:0; font-size:20px; font-weight:800; letter-spacing:.2px; position:relative;}
header p{margin:5px 0 0; font-size:12.5px; color:#bcd0e6; position:relative;}
.role-switcher-slot{
position:absolute; top:18px; right:22px; display:flex; align-items:center; gap:6px; z-index:1;
}
.role-switcher-slot select{
-webkit-appearance:none; appearance:none;
background:rgba(255,255,255,.14); color:#fff;
border:1px solid rgba(255,255,255,.32); border-radius:999px;
padding:6px 30px 6px 14px; font-size:12px; font-weight:700; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center;
transition:background-color .15s var(--ease), border-color .15s var(--ease);
}
.role-switcher-slot select:hover{background-color:rgba(255,255,255,.22);}
.role-switcher-slot select option{color:#182131;}
.role-switcher-slot .btn.secondary{
background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.32);
}
.role-switcher-slot .btn.secondary:hover{background:rgba(255,255,255,.24);}
@media(max-width:520px){ .role-switcher-slot{position:static; margin-top:12px; justify-content:flex-start;} }
/* ===== Auth ===== */
.auth-screen{
position:fixed; inset:0; z-index:100; padding:20px;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(680px 420px at 16% 8%, rgba(18,163,173,.24), transparent 62%),
radial-gradient(680px 420px at 92% 96%, rgba(47,107,237,.22), transparent 62%),
linear-gradient(180deg,#eef2f8,#e6ebf3);
}
.auth-card{
background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:30px 28px; width:100%; max-width:390px; box-shadow:var(--sh-3);
animation:modalIn .35s var(--ease) both;
}
.auth-card h2{margin:0 0 4px; font-size:19px; font-weight:800; color:var(--navy-2);}
.auth-error{
background:var(--red-bg); color:var(--red); border:1px solid #f3c9c1; border-radius:var(--radius-sm);
padding:9px 12px; font-size:12.5px; margin-bottom:12px;
}
.auth-actions{display:flex; flex-direction:column; gap:9px; margin-top:8px;}
/* ===== Tab nav ===== */
nav{
display:flex; gap:2px; background:#fff; border-bottom:1px solid var(--line);
padding:0 14px; overflow-x:auto; position:sticky; top:0; z-index:20;
box-shadow:0 1px 0 rgba(19,38,66,.04);
}
nav button{
position:relative; border:none; background:none; padding:13px 15px 12px;
font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
white-space:nowrap; border-radius:8px 8px 0 0;
transition:color .15s var(--ease), background .15s var(--ease);
}
nav button:hover{color:var(--navy-2); background:var(--bg-2);}
nav button::after{
content:""; position:absolute; left:12px; right:12px; bottom:0; height:2.5px; border-radius:3px;
background:linear-gradient(90deg,var(--teal-2),var(--teal)); transform:scaleX(0);
transition:transform .2s var(--ease); transform-origin:center;
}
nav button.active{color:var(--navy);}
nav button.active::after{transform:scaleX(1);}
main{padding:20px 18px 40px; max-width:1120px; margin:0 auto;}
/* Some tabs' tables need the full content width instead of the shared
1120px cap — the POCs tab (js/poc.js), the Projects tab (js/
implementation.js), and the Calendar tab (js/activity.js) each toggle
this class on their #main element only while that specific tab is
active, since every other tab in the same module shares that same
element and must keep the cap. */
#pocMain.wide, #implMain.wide, #activityMain.wide, #requesttechMain.wide{max-width:none;}
/* ===== KPI / stat cards ===== */
.cards{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px; margin-bottom:20px;
}
.card{
position:relative; background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); padding:15px 15px 14px 18px; overflow:hidden;
box-shadow:var(--sh-1);
transition:box-shadow .18s var(--ease), transform .14s var(--ease), border-color .18s var(--ease);
}
.card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--kacc,var(--teal));
}
.cards .card:nth-child(6n+1){--kacc:var(--k1);}
.cards .card:nth-child(6n+2){--kacc:var(--k2);}
.cards .card:nth-child(6n+3){--kacc:var(--k3);}
.cards .card:nth-child(6n+4){--kacc:var(--k4);}
.cards .card:nth-child(6n+5){--kacc:var(--k5);}
.cards .card:nth-child(6n){--kacc:var(--k6);}
.card .num{
font-size:25px; font-weight:800; color:var(--navy-2); letter-spacing:-.5px;
line-height:1.1; font-variant-numeric:tabular-nums;
}
.card .lbl{font-size:11.5px; color:var(--muted); margin-top:3px; font-weight:500;}
.card.warn{background:linear-gradient(180deg,#fdece9,#fff 60%); border-color:#f2cec6;}
.card.warn::before{background:var(--red);}
.card.warn .num{color:var(--red);}
.card.clickable{cursor:pointer;}
.card.clickable:hover{
box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--kacc,var(--teal));
}
.card.clickable:active{transform:translateY(0);}
tr.clickable-row{cursor:pointer; transition:background .12s var(--ease);}
tr.clickable-row:hover{background:var(--teal-light);}
.section-title{
font-size:15px; font-weight:800; margin:26px 0 12px; color:var(--navy-2);
display:flex; align-items:center; gap:8px; letter-spacing:.1px;
}
.section-title::before{
content:""; width:4px; height:16px; border-radius:3px;
background:linear-gradient(180deg,var(--teal-2),var(--teal));
}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap;}
/* ===== Buttons ===== */
.btn{
background:linear-gradient(180deg,var(--navy-3),var(--navy-2));
color:#fff; border:none; border-radius:9px; padding:9px 15px;
font-size:13px; font-weight:650; cursor:pointer; letter-spacing:.15px;
box-shadow:0 1px 2px rgba(19,38,66,.18), inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .1s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.btn:hover{filter:brightness(1.08); box-shadow:0 4px 14px -4px rgba(19,38,66,.4);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none; box-shadow:none;}
.btn:focus-visible{outline:2px solid var(--teal-2); outline-offset:2px;}
.btn.secondary{
background:#fff; color:var(--navy-2); border:1px solid var(--line-strong);
box-shadow:var(--sh-1);
}
.btn.secondary:hover{filter:none; background:var(--bg-2); border-color:var(--teal);}
.btn.danger{background:linear-gradient(180deg,#d0533b,#b23a26);}
.btn.small{padding:6px 11px; font-size:12px; border-radius:7px;}
/* ===== Tables ===== */
.table-scroll-wrap{
overflow-x:auto; border-radius:var(--radius); margin-bottom:0;
box-shadow:var(--sh-1); border:1px solid var(--line);
}
table{
width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
border-radius:var(--radius); overflow:hidden;
}
.table-scroll-wrap table{border:none; border-radius:0; box-shadow:none;}
th,td{padding:10px 12px; text-align:left; font-size:12.6px; border-bottom:1px solid var(--line); vertical-align:top;}
th{
background:linear-gradient(180deg,#eef4f5,#e5eff0);
color:var(--navy-2); font-size:10.8px; font-weight:800;
text-transform:uppercase; letter-spacing:.5px; position:relative; white-space:nowrap;
border-bottom:1.5px solid var(--line-strong);
}
tbody tr{transition:background .12s var(--ease);}
tbody tr:nth-child(even) td{background:rgba(238,244,246,.45);}
tbody tr:hover td{background:var(--teal-light);}
tr:last-child td{border-bottom:none;}
td .muted-small{color:var(--muted-2);}
.pagination-bar{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 4px;}
.pagination-bar[hidden]{display:none;} /* the plain [hidden] UA rule alone loses to .pagination-bar{display:flex} above */
.pagination-bar .btn.small{min-width:34px;}
/* ===== Implementation module: RAG, Kanban, Timeline ===== */
.rag-green{background:var(--green);}
.rag-amber{background:var(--amber);}
.rag-red{background:var(--red);}
.progress-track{background:#e9edf2; border-radius:999px; height:8px; width:100%; overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--teal-2),var(--teal));}
.kc-who{display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:11.5px; color:var(--text);}
.kc-avatar{flex:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy-3)); color:#fff; font-size:9.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.kc-avatar-none{background:var(--line-strong);}
.kc-due{flex:none; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--muted); white-space:nowrap;}
.kc-due-late{background:var(--red-bg); color:var(--red);} .kc-due-soon{background:var(--amber-bg); color:var(--amber);}
.pa-task{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; margin-bottom:10px; background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:10px; transition:box-shadow .15s var(--ease);}
.pa-task:hover{box-shadow:var(--sh-1);}
.pa-task.is-late{border-left-color:var(--red);} .pa-task.is-soon{border-left-color:var(--amber);} .pa-task.is-done{border-left-color:var(--green);}
.pa-task.is-done .pa-task-title > a, .pa-task.is-done .pa-task-title{color:var(--muted);}
.pa-task-main{flex:1 1 280px; min-width:0;}
.pa-task-title{font-weight:700; font-size:13.5px; color:var(--navy-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.pa-task-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}
.gantt-row{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.gantt-label{width:190px; flex:none; font-size:12px;}
.gantt-label .proj-name{font-weight:700; color:var(--navy-2); display:block;}
.gantt-label .phase-name{color:var(--muted); font-size:10.5px;}
.gantt-track{flex:1; background:#e9edf2; border-radius:7px; height:24px; position:relative; min-width:120px;}
.gantt-bar{
position:absolute; top:0; height:100%; border-radius:7px; display:flex; align-items:center;
padding:0 8px; color:#fff; font-size:9.5px; font-weight:700; white-space:nowrap; overflow:hidden;
}
.gantt-bar.done, .gantt-bar.st-done{background:linear-gradient(180deg,#2f9463,var(--green));}
.gantt-bar.active, .gantt-bar.st-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
.gantt-bar.upcoming, .gantt-bar.st-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
.gantt-bar.st-review{background:linear-gradient(180deg,#7b57c4,var(--purple));}
/* ── Weekly Schedule (24-week grid, shiftable) ── */
.week-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}
.week-nav .btn{padding:3px 10px; font-size:11px;}
.week-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; scrollbar-width:thin; box-shadow:var(--sh-1);}
.week-grid{border-collapse:separate; border-spacing:0; font-size:11px; width:100%; table-layout:fixed;}
.week-grid col.wk-c{width:42px;}
.week-grid col.wk-c0{width:184px;}
.week-grid th, .week-grid td{padding:0; text-align:center; vertical-align:middle;}
.week-grid thead .wk-month th{
font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
padding:6px 0 4px; border-bottom:1px solid var(--line); background:#f7f9fb;
}
.week-grid thead .wk-month th.wk-m-sep{border-left:1px solid var(--line);}
.week-grid thead .wk-head th{
background:#f7f9fb; font-weight:800; padding:5px 2px 6px; font-size:10px; line-height:1.2;
border-bottom:2px solid var(--line); color:var(--navy-2);
}
.week-grid thead .wk-head th .wk-date{display:block; font-weight:500; font-size:8.5px; color:var(--muted); margin-top:2px;}
.week-grid .wk-c0h, .week-grid td.wk-phase{
text-align:left; padding:8px 12px; white-space:nowrap; position:sticky; left:0; z-index:1;
box-shadow:1px 0 0 var(--line);
}
.week-grid .wk-c0h{background:#f7f9fb; z-index:3; font-weight:800; color:var(--navy-2); font-size:10px; text-transform:uppercase; letter-spacing:.4px;}
.week-grid td.wk-phase{background:#fff; font-weight:700; color:var(--navy-2); font-size:11.5px;}
.week-grid td.wk-phase .wk-sub{display:block; font-weight:500; font-size:9.5px; color:var(--muted); margin-top:1px;}
.week-grid tbody tr:nth-child(even) td.wk-phase{background:#fbfcfd;}
.week-grid tbody tr:hover td{background:#eef4f5;}
.week-grid tbody tr:hover td.wk-phase{background:#e7eff0;}
.week-grid tbody td.wk-cell{height:34px; border-bottom:1px solid var(--line); position:relative;}
.week-grid tbody td.wk-cell .wk-seg{position:absolute; top:8px; bottom:8px; left:-1px; right:-1px;}
.week-grid tbody td.wk-s0 .wk-seg{left:4px; border-top-left-radius:7px; border-bottom-left-radius:7px;}
.week-grid tbody td.wk-s1 .wk-seg{right:4px; border-top-right-radius:7px; border-bottom-right-radius:7px;}
.week-grid .wk-seg.tone-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
.week-grid .wk-seg.tone-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
.week-grid .wk-seg.tone-review{background:linear-gradient(180deg,#7b57c4,#5b3a9c);}
.week-grid .wk-seg.tone-done{background:linear-gradient(180deg,#2f9463,#1c7a4d);}
.week-grid tbody td.wk-cell.wk-now, .week-grid thead th.wk-now{background:rgba(15,107,114,.07);}
.week-grid thead th.wk-now{box-shadow:inset 0 -3px 0 var(--teal);}
.week-grid td.wk-cell.wk-now::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--teal); opacity:.55;}
.week-legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; font-size:10.5px; color:var(--muted);}
.week-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.week-legend i.tone-todo{background:#9aa6b5;}
.week-legend i.tone-inprogress{background:#c9791f;}
.week-legend i.tone-review{background:#5b3a9c;}
.week-legend i.tone-done{background:#1c7a4d;}
.week-legend i.tone-now{background:transparent; box-shadow:inset 0 0 0 2px var(--teal);}
.col-resizer{
position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize;
user-select:none; touch-action:none; z-index:2;
}
.col-resizer:hover, .col-resizer.resizing{background:var(--teal);}
th.sortable{cursor:pointer; padding-right:18px;}
th.sortable:hover{background:#dcecec;}
.th-sort-indicator{font-size:9px; color:var(--navy-2); margin-left:3px;}
a.cell-link{color:var(--navy-2); font-weight:700; text-decoration:none;}
a.cell-link:hover{text-decoration:underline; color:var(--teal);}
/* ===== Badges ===== */
.badge{
display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
font-size:10.8px; font-weight:800; white-space:nowrap; letter-spacing:.2px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.b-red{background:var(--red-bg); color:var(--red);}
.b-amber{background:var(--amber-bg); color:var(--amber);}
.b-green{background:var(--green-bg); color:var(--green);}
.b-gray{background:#eef0f3; color:var(--muted);}
.b-purple{background:var(--purple-bg); color:var(--purple);}
.b-blue{background:var(--blue-bg); color:var(--blue);}
.b-gold{background:#fff1cc; color:#8a5a00;}
/* ===== Modal + forms ===== */
.modal-bg{
position:fixed; inset:0; background:rgba(11,22,38,.5); backdrop-filter:blur(3px);
display:none; align-items:center; justify-content:center; padding:16px; z-index:50; overflow-y:auto;
}
.modal-bg.open{display:flex; animation:fadeIn .15s var(--ease);}
.modal{
background:#fff; border-radius:var(--radius-lg); padding:22px; width:100%; max-width:480px;
max-height:88vh; overflow-y:auto; margin:auto;
box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.6);
animation:modalIn .26s var(--ease) both;
}
/* ----- Wide detail modal (Implementation project detail) ----- */
.modal.modal-wide{max-width:1060px; padding:0; overflow-x:hidden;}
.modal.modal-form{max-width:900px; padding:0; overflow-x:hidden;}
.modal.modal-mid{max-width:760px; padding:0; overflow-x:hidden;}
.pd-hero{
position:relative; color:#fff; padding:24px 28px 20px;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 58%,var(--teal) 135%);
}
.modal .pd-hero h3{margin:2px 0 4px; padding:0; border:none; color:#fff; font-size:23px; letter-spacing:.2px;}
.pd-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.7);}
.pd-sub{font-size:13px; color:rgba(255,255,255,.85);}
.pd-hero-badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
.pd-chip{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; background:rgba(255,255,255,.16); color:#fff;}
.pd-chip-red{background:var(--red); color:#fff;}
.pd-close{position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; font-size:13px; transition:background .15s var(--ease);}
.pd-close:hover{background:rgba(255,255,255,.3);}
.pd-progress{height:8px; border-radius:99px; background:rgba(255,255,255,.2); margin-top:16px; overflow:hidden;}
.pd-progress-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal-2),#7be0e6); transition:width .4s var(--ease);}
.pd-progress-label{font-size:11px; margin-top:5px; color:rgba(255,255,255,.8); font-weight:700;}
.pd-body{padding:20px 28px 24px;}
.pd-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px;}
.pd-kpi{background:#fff; border:1px solid var(--line); border-left:4px solid var(--ac,var(--teal)); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--sh-1);}
.pd-kpi-l{font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);}
.pd-kpi-v{font-size:17px; font-weight:800; color:var(--navy-2); margin-top:3px; word-break:break-word;}
.pd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-bottom:16px;}
.pd-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--sh-1); min-width:0;}
.pd-card h4{margin:0 0 12px; font-size:13px; font-weight:800; color:var(--navy-2); padding-bottom:8px; border-bottom:1px solid var(--line);}
.pd-kvgrid{display:grid; grid-template-columns:120px 1fr; gap:9px 12px; align-items:center;}
.pd-k{font-size:11.5px; font-weight:700; color:var(--muted);}
.pd-v{font-size:13px; color:var(--text); word-break:break-word;}
.pd-chips{display:flex; flex-wrap:wrap; gap:8px;}
.pd-eng{display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:999px; background:var(--teal-light); font-size:12.5px; font-weight:600; color:var(--navy-2);}
.pd-avatar{width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy-3)); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.pd-phases{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto;}
.pd-phase{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:12.5px; background:var(--bg-2);}
.pd-phase.is-active{border-color:var(--teal-2); background:var(--teal-light);}
.pd-phase.is-done{background:var(--green-bg); border-color:transparent;}
.pd-phase-dot{flex:none; width:24px; height:24px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.pd-phase.is-active .pd-phase-dot{background:var(--teal);}
.pd-phase.is-done .pd-phase-dot{background:var(--green);}
.pd-item{border:1px solid var(--line); border-radius:10px; padding:8px 11px; margin-bottom:8px; font-size:12.5px; background:var(--bg-2);}
.modal-mid .pd-kpis{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));}
/* Activity Dashboard — Top 10 / Bottom 10 Performance leaderboards */
.lb-section{--lb-ac:var(--teal); margin-top:26px;}
.lb-section.bottom{--lb-ac:#8a95a4;}
.lb-banner{padding:2px 0 10px 12px; margin-bottom:12px; border-left:4px solid var(--lb-ac); border-bottom:1px solid var(--line);
border-bottom-left-radius:0;}
.lb-banner-t{font-size:15px; font-weight:800; color:var(--navy-2); letter-spacing:.1px;}
.lb-banner-s{font-size:12px; color:var(--muted); margin-top:2px;}
.lb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; align-items:start;}
.lb-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px 6px;
box-shadow:var(--sh-1); min-width:0;}
.lb-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px;}
.lb-title{font-size:13.5px; font-weight:800; color:var(--navy-2);}
.lb-sub{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.lb-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);}
.lb-rank{font-size:12px; font-weight:600; color:var(--muted-2); font-variant-numeric:tabular-nums; text-align:left;}
.lb-rank.lead{font-weight:800; color:var(--navy-2);}
.lb-name{display:block; font-size:13px; font-weight:600; color:var(--navy-2); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-name:hover{color:var(--teal); text-decoration:underline;}
.lb-track{height:5px; border-radius:99px; background:#eef0f3; margin-top:6px; overflow:hidden;}
.lb-fill{height:100%; border-radius:99px; background:var(--lb-ac); min-width:3px;}
.lb-val{text-align:right; font-size:13px; font-weight:700; color:var(--navy-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.lb-val small{display:block; font-size:11px; font-weight:500; color:var(--muted);}
.pd-act{display:flex; gap:14px; align-items:flex-start; padding:11px 13px; margin-bottom:9px; border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:10px; background:var(--bg-2);}
.pd-act-h{font-size:18px; font-weight:800; color:var(--navy-2);}
.modal.modal-form.fm-sm{max-width:540px;}
.modal.modal-form.fm-md{max-width:740px;}
.fm-hero-danger{background:linear-gradient(135deg,#4a1710 0%,#8f2f1d 60%,var(--red) 135%);}
.fm-body{background:var(--bg-2);}
.fm-section > .notice:first-child{margin-top:0;}
.fm-section > h4:first-child{margin-top:0;}
.fm-section > .field:last-child, .fm-section > .field-row:last-child{margin-bottom:0;}
.fm-hero{padding:20px 28px 18px;}
.fm-body{padding:20px 28px 0;}
.fm-section{margin-bottom:16px;}
.fm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 16px;}
.fm-grid .field{margin-bottom:0; min-width:0;}
.fm-grid .fm-full{grid-column:1/-1;}
.fm-grid.fm-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:560px){ .fm-grid.fm-2{grid-template-columns:1fr;} }
.poc-unit-row{margin-bottom:14px;}
.poc-unit-type{display:flex; gap:18px; margin-bottom:8px;}
.field .poc-unit-type label{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--navy-2); cursor:pointer; margin:0;}
.field .poc-unit-type input[type="checkbox"]{width:16px; height:16px; padding:0; margin:0; flex:none; accent-color:var(--teal); box-shadow:none;}
.poc-unit-row .poc-unit-hint:empty{display:none;}
.poc-unit-row .poc-unit-hint{margin-top:4px;}
.fm-subbox{margin:4px 0 14px; padding:14px 16px; border:1px dashed var(--teal-2); border-radius:12px; background:rgba(230,243,244,.55);}
.fm-subtitle{font-size:12.5px; font-weight:800; color:var(--navy-2); margin-bottom:10px;}
.fm-req{color:var(--red); font-weight:800;}
.fm-money{display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-2); overflow:hidden; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
.fm-money span{display:flex; align-items:center; padding:0 12px; font-weight:800; font-size:12.5px; color:var(--teal); background:var(--teal-light); border-right:1px solid var(--line);}
.fm-money input{border:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important;}
.fm-money:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,163,173,.16); background:#fff;}
.fm-actions{position:sticky; bottom:0; z-index:2; margin:0 -28px; padding:14px 28px; background:rgba(255,255,255,.97); backdrop-filter:blur(4px); border-top:1px solid var(--line);}
.fm-body > #modalErrorMsg{margin-bottom:14px;}
/* Compact icon-only "remove row" button used in repeatable form rows (engineers, units, licenses, devices, PICs) */
.btn.row-remove{width:34px; height:34px; min-width:34px; padding:0; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; border-radius:8px;}
.field-row:has(> .row-remove){grid-template-columns:1fr 1fr 34px; align-items:end;}
.field-row:has(> .row-remove):has(> .field:only-of-type){grid-template-columns:1fr 34px;}
.field-row:has(> .row-remove):has(> .field:nth-of-type(3)){grid-template-columns:1fr 1fr 1fr 34px;}
.field-row > .row-remove{margin-bottom:8px; align-self:end;}
.pic-remove.row-remove{width:26px; height:26px; min-width:26px; top:-11px; right:12px; font-size:11px;}
.pic-row{position:relative; border:1px solid var(--line); border-radius:10px; padding:12px 14px 4px; margin-bottom:10px; background:var(--bg-2);}
.pic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:4px 12px; padding-right:0;}
.pic-remove{position:absolute; top:-9px; right:10px;}
.pic-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;}
.pic-card{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); font-size:13px;}
.pic-line{font-size:12px; margin-top:3px; word-break:break-all;}
.pic-line a{color:var(--teal); text-decoration:none;} .pic-line a:hover{text-decoration:underline;}
.pa-picker{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:16px; box-shadow:var(--sh-1);}
.pa-picker select{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:var(--bg-2); color:var(--text);}
.pa-picker select:focus{outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(18,163,173,.16);}
.pa-label{display:block; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
.pa-timeline{position:relative; margin-left:8px; padding-left:22px; border-left:2px solid var(--line);}
.pa-note{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:10px; font-size:12.5px;}
.pa-dot{position:absolute; left:-30px; top:13px; width:12px; height:12px; border-radius:50%; background:var(--teal-2); border:3px solid #fff; box-shadow:0 0 0 2px var(--teal-light);}
.pa-note.is-status{background:var(--blue-bg); border-color:transparent;}
.pa-note.is-status .pa-dot{background:var(--blue); box-shadow:0 0 0 2px var(--blue-bg);}
/* ---- Activity log notes (POC Activity / Project Activity) ---- */
.pa-note-v2{padding:12px 14px; background:#fff; box-shadow:var(--sh-1); border-left:3px solid var(--teal-2);}
.pa-note-v2.is-status{background:var(--blue-bg); border-left-color:var(--blue); box-shadow:none; padding:9px 12px;}
.pa-note-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.pa-note-titlewrap{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; min-width:0;}
.pa-note-by{font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap;} /* date · engineer, plain text beside the title */
.pa-note-title{font-size:13px; font-weight:700; line-height:1.5; color:var(--navy-2); overflow-wrap:anywhere;} /* same size as the notes text, bold */
.pa-note-v2.is-status .pa-note-title{font-size:13px; font-weight:700; color:var(--blue);}
.pa-note-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.pa-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px;}
.pa-chip.is-blue{background:#fff; color:var(--blue); border-color:transparent;}
.pa-note-body{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; line-height:1.5; white-space:pre-wrap; color:var(--text);}
.pa-composer-v2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; padding:14px; margin:14px 0 0; background:linear-gradient(180deg,var(--bg-2),#fff); border:1px solid var(--line-strong); border-radius:12px;}
.pa-composer-v2 .pa-cmp-full{grid-column:1/-1;}
.pa-composer-v2 label{display:block; font-size:11.5px; font-weight:700; letter-spacing:.2px; color:var(--muted); margin-bottom:5px;} /* same as the other form labels */
.pa-composer-v2 input,.pa-composer-v2 select,.pa-composer-v2 textarea{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:#fff;}
.pa-composer-v2 textarea{resize:vertical; min-height:74px;}
.pa-composer-v2 input:focus,.pa-composer-v2 select:focus,.pa-composer-v2 textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,163,173,.16);}
.pa-composer-v2 .pa-cmp-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.pd-steps{display:flex; flex-wrap:wrap; gap:8px;}
.pd-step{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bg-2); border:1px solid var(--line); color:var(--muted);}
.pd-step-n{width:20px; height:20px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.pd-step.is-done{background:var(--green-bg); border-color:transparent; color:var(--green);}
.pd-step.is-done .pd-step-n{background:var(--green);}
.pd-step.is-active{background:var(--teal-light); border-color:var(--teal-2); color:var(--teal);}
.pd-step.is-active .pd-step-n{background:var(--teal);}
.pd-step.is-drop{background:var(--red-bg); border-color:transparent; color:var(--red);}
.pd-step.is-drop .pd-step-n{background:var(--red);}
.pd-card + .pd-card{margin-top:0;}
/* Request Technical detail popups: cards stacked with an even gap (cards sit directly in .pd-body there) */
.rq-stack{display:flex; flex-direction:column; gap:16px; margin-bottom:16px;}
@media (max-width:560px){
.fm-body{padding:16px 16px 0;} .fm-hero{padding:18px;} .fm-actions{margin:0 -16px; padding:12px 16px;}
.pd-hero{padding:20px 18px 16px;} .pd-body{padding:16px 16px 20px;} .pd-kvgrid{grid-template-columns:1fr; gap:2px 0;} .pd-k{margin-top:6px;}
}
.modal h3{
margin:0 0 16px; font-size:16px; font-weight:800; color:var(--navy-2);
padding-bottom:12px; border-bottom:1px solid var(--line);
}
.field{margin-bottom:13px;}
.field label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; letter-spacing:.2px;}
.field input, .field select, .field textarea{
width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
font-size:13px; font-family:inherit; background:var(--bg-2); color:var(--text);
transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
outline:none; border-color:var(--teal); background:#fff;
box-shadow:0 0 0 3px rgba(18,163,173,.16);
}
.field textarea{resize:vertical; min-height:58px;}
.rt-toolbar{display:flex; flex-wrap:wrap; gap:4px; align-items:center; border:1px solid var(--line-strong); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:5px; background:#f4f6f8;}
.rt-toolbar button, .rt-toolbar select{width:auto; padding:3px 7px; font-size:11.5px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--navy-2); cursor:pointer;}
.rt-toolbar button:hover{border-color:var(--teal);}
.rich-editor{width:100%; min-height:120px; max-height:320px; overflow-y:auto; padding:9px 11px; border:1px solid var(--line-strong); border-radius:0 0 var(--radius-sm) var(--radius-sm); font-size:13px; background:#fff; color:var(--text);}
.rich-editor:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
.rich-render{font-size:13px; color:var(--text);}
.rich-render p, .rich-render div{margin:0 0 4px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line);}
/* ===== Notices, empty, misc ===== */
.empty{
text-align:center; padding:36px 16px; color:var(--muted); font-size:13px;
background:linear-gradient(180deg,#fbfcfe,#f4f6fa);
border:1px dashed var(--line-strong); border-radius:var(--radius);
}
.empty::before{
content:""; display:block; width:34px; height:34px; margin:0 auto 10px;
border-radius:10px; border:2px dashed var(--line-strong);
background:radial-gradient(circle at 50% 45%, rgba(18,163,173,.14), transparent 62%);
}
.muted-small{font-size:11.5px; color:var(--muted);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
/* An action cell inside a table must stay a real table-cell — as display:flex it stops stretching to the row, so the row line, the zebra /
hover background and the vertical alignment of its buttons no longer match the other cells. Buttons wrap on their own when narrow. */
td.row-actions, th.row-actions{display:table-cell;}
td.row-actions > .btn, td.row-actions > button{margin:0 4px 4px 0; vertical-align:top;}
.notice{
position:relative; background:linear-gradient(180deg,#eef6f6,#fbfdfd);
border:1px solid #cfe4e4; color:var(--navy-2);
padding:10px 12px 10px 14px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:16px;
}
.notice::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; background:linear-gradient(180deg,var(--teal-2),var(--teal));}
details.techbox{border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:12px; background:var(--bg-2);}
details.techbox summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--teal); padding:2px 0;}
details.techbox .field{margin-top:10px;}
details.collapse-group{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--card); overflow:hidden; box-shadow:var(--sh-1);}
details.collapse-group>summary{cursor:pointer; list-style:none; padding:11px 14px; font-size:14px; font-weight:800; color:var(--navy-2); background:linear-gradient(180deg,#f5f7f9,#eef1f4); display:flex; align-items:center; gap:8px;}
details.collapse-group>summary::-webkit-details-marker{display:none;}
details.collapse-group>summary:before{content:"\25B8"; color:var(--muted); font-size:11px; transition:transform .15s var(--ease);}
details.collapse-group[open]>summary:before{transform:rotate(90deg);}
details.collapse-group>summary .cg-count{font-weight:500; font-size:11.5px; color:var(--muted);}
details.collapse-group>.cg-body{padding:12px 14px;}
/* Compact variant for a project's folded tasks inside a narrow Kanban
column — same collapse mechanics, smaller type, cards keep their own
spacing so .cg-body doesn't double up the padding. Every project gets
its own collapsed-by-default group per column (not just Completed ones). */
.filter-bar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.filter-bar select{
-webkit-appearance:none; appearance:none;
padding:7px 28px 7px 11px; border:1px solid var(--line-strong); border-radius:999px;
font-size:12.5px; font-weight:600; color:var(--navy-2); background:#fff; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 11px center;
transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.filter-bar select:hover{border-color:var(--teal);}
.filter-bar select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,163,173,.14);}
.filter-bar input[type="text"], .filter-bar input[type="date"]{
padding:7px 12px; border:1px solid var(--line-strong); border-radius:999px; font-size:12.5px;
background:#fff; min-width:180px; flex:1;
transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.filter-bar input[type="text"]:focus, .filter-bar input[type="date"]:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,163,173,.14);}
.filter-bar label.muted-small{display:inline-flex; align-items:center; gap:5px;}
.export-bar{display:flex; gap:8px; flex-wrap:wrap;}
/* ===== Calendar ===== */
.cal-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--sh-1);}
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.cal-head .cal-title{font-weight:800; color:var(--navy-2); font-size:15px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;}
.cal-dow{font-size:10.5px; font-weight:800; color:var(--muted); text-align:center; padding:4px 0; text-transform:uppercase; letter-spacing:.4px;}
.cal-cell{min-height:66px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px; background:var(--bg-2); font-size:11px; transition:background .12s var(--ease);}
.cal-cell:hover{background:#fff;}
.cal-cell.other-month{opacity:.4;}
.cal-cell.today{border-color:var(--teal); border-width:2px; background:var(--teal-light);}
.cal-daynum{font-weight:800; color:var(--navy-2); margin-bottom:3px;}
.cal-item{display:block; background:var(--teal-light); color:var(--navy-2); border-radius:5px; padding:2px 5px; margin-bottom:2px; font-size:10px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-item.overdue{background:var(--red-bg); color:var(--red);}
.cal-item.soon{background:var(--amber-bg); color:var(--amber);}
@media(max-width:640px){ .cal-cell{min-height:46px; font-size:9.5px;} .cal-item{font-size:8.5px;} }
/* ===== Scrollbars ===== */
::-webkit-scrollbar{height:9px; width:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c4ccd6; border-radius:999px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#a9b3bf; background-clip:content-box;}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
/* ============================================================================
PRINT + CERTIFICATE — unchanged (tuned for A4)
========================================================================= */
#printArea{display:none;}
@media print{
@page{ size: A4; margin: 0; }
html, body{ width:210mm; margin:0; padding:0; }
body *{visibility:hidden;}
#printArea, #printArea *{visibility:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
#printArea{display:block; position:absolute; top:0; left:0; width:210mm; padding:0; margin:0;}
.no-print{display:none !important;}
/* A4 landscape print (Implementation timeline) — see printLandscape() */
html.print-landscape, html.print-landscape body{ width:297mm; }
html.print-landscape #printArea{ width:297mm; }
}
#printArea{box-sizing:border-box; padding:24px; font-family:-apple-system,Segoe UI,Roboto,sans-serif; color:#1c2531;}
#printArea .print-page-break{break-before:page; page-break-before:always;} /* starts on a new printed page (Weekly Schedule) */
#printArea h1{font-size:19px; color:#1f3864; margin-bottom:2px;}
#printArea .sub{font-size:12px; color:#6b7686; margin-bottom:18px;}
#printArea h2{font-size:14px; color:#0f6b72; border-bottom:1px solid #ccc; padding-bottom:4px; margin-top:22px;}
#printArea table{width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px;}
#printArea th, #printArea td{border:1px solid #ccc; padding:6px 8px; text-align:left;}
#printArea th{background:#eaf1f1;}
#printArea .sumgrid{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
#printArea .sumbox{border:1px solid #ccc; border-radius:6px; padding:8px 14px;}
#printArea .sumbox b{display:block; font-size:18px; color:#1f3864;}
#printArea .section-title{font-size:13px; font-weight:700; color:#1f3864; margin:18px 0 4px;}
#printArea .week-wrap{overflow:visible; border:1px solid #bbb; border-radius:6px;}
#printArea table.week-grid{width:100%; table-layout:fixed; font-size:7.5px; margin-top:0; border-collapse:collapse;}
#printArea table.week-grid col.wk-c0{width:auto;}
#printArea table.week-grid th, #printArea table.week-grid td{border:1px solid #cbd2d9; padding:1px 2px; text-align:center; overflow:hidden;}
#printArea table.week-grid .wk-c0h, #printArea table.week-grid td.wk-phase{width:auto; white-space:nowrap; text-align:left; padding:2px 6px; box-shadow:none;}
#printArea table.week-grid thead .wk-month th{background:#eef1f4; font-size:6.5px;}
#printArea table.week-grid thead .wk-head th{background:#eef1f4;}
#printArea table.week-grid th .wk-date{display:block; font-weight:400; font-size:6px; color:#6b7686;}
#printArea table.week-grid td.wk-cell{height:16px; position:relative;}
#printArea table.week-grid td.wk-cell .wk-seg{position:absolute; top:2px; bottom:2px; left:0; right:0;}
#printArea table.week-grid .wk-seg.tone-todo{background:#a9b3c1;}
#printArea table.week-grid .wk-seg.tone-inprogress{background:#c9791f;}
#printArea table.week-grid .wk-seg.tone-review{background:#5b3a9c;}
#printArea table.week-grid .wk-seg.tone-done{background:#1c7a4d;}
#printArea table.week-grid .wk-sub{display:block; font-size:6px; font-weight:400; color:#6b7686;}
#printArea .week-legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:7px; color:#6b7686;}
#printArea .week-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px;}
#printArea .week-legend i.tone-todo{background:#9aa6b5;}
#printArea .week-legend i.tone-inprogress{background:#c9791f;}
#printArea .week-legend i.tone-review{background:#5b3a9c;}
#printArea .week-legend i.tone-done{background:#1c7a4d;}
#printArea .week-legend i.tone-now{background:#fff; box-shadow:inset 0 0 0 1.5px #0f6b72;}
/* Certificate of Maintenance print layout */
#printArea.cert-mode{box-sizing:border-box; width:210mm; padding:8mm 15mm 13mm 15mm; border:2.5px solid #1f3864; position:relative;}
#printArea.cert-mode::before{
content:""; position:absolute; inset:5mm; border:1px solid #b8892b; pointer-events:none;
}
#printArea.cert-mode .cert-header{width:100%; border-collapse:collapse; border-bottom:1.5px solid #1f3864; margin-bottom:10px;}
#printArea.cert-mode .cert-header td{border:none; padding:0 0 8px 0; vertical-align:baseline;}
#printArea.cert-mode .cert-header .vendor{font-size:14px; font-weight:800; color:#1f3864; text-align:left;}
#printArea.cert-mode .cert-header .tagline{font-size:10px; color:#5b6b7d; text-align:right;}
#printArea.cert-mode .cert-title{text-align:center; font-size:22px; font-weight:800; color:#1f3864; line-height:1.2; letter-spacing:.5px; margin:2px 0 1px;}
#printArea.cert-mode .cert-number{text-align:center; font-style:italic; color:#0f6b72; font-size:11px; margin-bottom:10px;}
#printArea.cert-mode .cert-intro{text-align:center; font-size:10.5px; line-height:1.5; margin:0 auto 12px; max-width:600px; color:#1c2531;}
#printArea.cert-mode table.cert-details{width:100%; border-collapse:collapse; background:#eaf1f1; border:1px solid #d8dee5; margin-bottom:12px;}
#printArea.cert-mode table.cert-details td{width:50%; padding:6px 14px; border:1px solid #d8dee5; vertical-align:top;}
#printArea.cert-mode .cert-label{font-size:8.5px; text-transform:uppercase; letter-spacing:.3px; color:#5b6b7d; display:block;}
#printArea.cert-mode .cert-value{font-size:12px; font-weight:700; color:#1f3864; margin-top:2px; display:block;}
#printArea.cert-mode .cert-section-title{font-size:11px; font-weight:800; color:#1f3864; margin:0 0 6px;}
#printArea.cert-mode table.cert-assets{width:100%; border-collapse:collapse; font-size:10px; margin-bottom:6px;}
#printArea.cert-mode table.cert-assets th{background:#1f3864; color:#fff; padding:6px 8px; text-align:left; font-size:9px;}
#printArea.cert-mode table.cert-assets td{border:1px solid #d8dee5; padding:6px 8px;}
#printArea.cert-mode table.cert-assets tr:nth-child(even) td{background:#eaf1f1;}
#printArea.cert-mode .cert-total{font-size:9.5px; color:#5b6b7d; margin-bottom:12px;}
#printArea.cert-mode table.cert-seal-row{width:100%; border-collapse:collapse; margin-bottom:16px;}
#printArea.cert-mode table.cert-seal-row td{border:none; padding:0; vertical-align:middle;}
#printArea.cert-mode table.cert-seal-row .seal-cell{width:70px; padding-right:16px;}
#printArea.cert-mode .cert-seal{
width:54px; height:54px; border-radius:50%; border:2px solid #b8892b; box-shadow:0 0 0 4px #fff, 0 0 0 5px #b8892b;
display:table-cell; text-align:center; vertical-align:middle;
}
#printArea.cert-mode .cert-seal span{display:block; font-weight:800; color:#1f3864; line-height:1.15;}
#printArea.cert-mode .cert-seal .s1{font-size:6px;}
#printArea.cert-mode .cert-seal .s2{font-size:9px; color:#b8892b; margin-top:2px;}
#printArea.cert-mode .cert-disclaimer{font-size:9px; font-style:italic; color:#5b6b7d; line-height:1.5;}
#printArea.cert-mode table.cert-sig-row{width:100%; border-collapse:collapse;}
#printArea.cert-mode table.cert-sig-row td{border:none; width:50%; text-align:center; padding:0 15px; vertical-align:top;}
#printArea.cert-mode .cert-sig-line{border-top:1px solid #333; margin-bottom:6px; padding-top:6px;}
#printArea.cert-mode .cert-sig-name{font-weight:700; font-size:11px; color:#1c2531;}
#printArea.cert-mode .cert-sig-role{font-size:9px; color:#5b6b7d;}
#printArea.cert-mode .cert-footer{text-align:center; font-size:8px; color:#5b6b7d; margin-top:12px; border-top:1px solid #d8dee5; padding-top:5px;}
/* Request Technical — dashboard panels, star rating */
/* Request ratings: SVG stars (see requestStarSvg in js/requesttech.js; the gradient #rqStarGrad lives in a hidden