/* Alensy Intranet — shared design system. Extracted verbatim from the frozen prototype
   (Alensy_Procurement_Prototype.html) so the hosted build is visually identical. */
:root{
  color-scheme: light;
  /* Alensy Energy Solutions brand palette */
  --teal:#D19D13;        /* Alensy yellow — official R209 G157 B19 */
  --teal-dark:#a87e0e;   /* darkened yellow for hover */
  --teal-light:#f6efdc;  /* pale yellow tint */
  --bg:#ffffff;          /* white page ground (option D) */
  --card:#fafbfb;        /* near-white grey card surface */
  --line:#e8e9e9;        /* light divider RGB 212/212/209 */
  --txt:#343434;         /* charcoal body RGB 52/52/52 */
  --muted:#757575;       /* grey secondary RGB 117/117/117 */
  --ok-bg:#e9efe3; --ok-tx:#4a6b2a;
  --warn-bg:#f5eedd; --warn-tx:#8a5f0f;
  --bad-bg:#f6e3e0; --bad-tx:#a83a2a;
  --info-bg:#e9e9ec; --info-tx:#4a4a58;
  --neu-bg:#ecebe7; --neu-tx:#757575;
  --crit-bg:#a83a2a; --crit-tx:#ffffff;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover{scrollbar-color:#cdc9bd transparent}
::-webkit-scrollbar{height:6px;width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
*:hover::-webkit-scrollbar-thumb{background:#cdc9bd}
::-webkit-scrollbar-button{display:none;width:0;height:0}
body.dark *:hover{scrollbar-color:#56524a transparent}
body.dark *:hover::-webkit-scrollbar-thumb{background:#56524a}
body{font-family:"Aptos","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
.appwrap{position:sticky;top:0;z-index:50}
.hubnav{background:#23211e;color:#b5afa3;font-size:12px;padding:6px 28px;display:flex;align-items:center;gap:20px}
.hubnav .hn{cursor:pointer;position:relative;user-select:none;display:flex;align-items:center;gap:5px;font-weight:500}
.hubnav .hn:hover{color:#fff}
.hubnav .hn.active{color:#D19D13}
.hnmenu{display:none;position:absolute;top:22px;left:0;background:var(--card);border:0.5px solid var(--line);border-radius:9px;padding:5px;z-index:80;min-width:210px;box-shadow:0 8px 22px rgba(20,30,28,.18)}
.hnmenu div{padding:8px 13px;border-radius:6px;font-size:12.5px;color:var(--txt);font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:9px}
.hnmenu div:hover{background:var(--teal-light);color:var(--teal-dark)}
.crumbtxt{margin-left:auto;color:#8a857a;font-size:11.5px}
.crumbtxt b{color:#D19D13;font-weight:600}
.sitetile{cursor:pointer;transition:border-color .15s}
.sitetile:hover{border-color:var(--teal)!important}
.appbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:8px 28px;position:relative;overflow:hidden}
.appbar .arc{position:absolute;right:0;top:0;height:100%;width:360px;pointer-events:none}
.appbar .brand,.appbar .user{position:relative;z-index:1}
.appbar .brand{display:flex;align-items:center;gap:16px}
.appbar .brand .logomark{height:56px;width:auto;flex-shrink:0}
.appbar .brand .app{font-size:17px;font-weight:600;color:#343434;border-left:2.5px solid var(--muted);padding-left:18px;align-self:center}
.appbar .user{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--txt)}
.avatar{width:36px;height:36px;border-radius:50%;background:#fff;color:#23211e;border:1.5px solid #23211e;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.wrap{max-width:1280px;margin:0 auto;padding:12px 28px 60px}
.projhead{margin-bottom:6px}
.projhead h2{font-size:30px;font-weight:800;letter-spacing:-.5px}
.projsub{display:flex;align-items:center;gap:12px;margin-top:0;color:var(--muted);flex-wrap:wrap}
.progress-row{display:flex;align-items:center;gap:14px;margin:10px 0 2px;max-width:560px}
.pbar{flex:1;height:9px;background:#e2e8e7;border-radius:6px;overflow:hidden}
.pbar>div{height:100%;background:var(--teal);border-radius:6px;transition:width .4s}
.tabswrap{position:relative;margin:14px 0 22px}
.tabs{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabfade{position:absolute;top:0;bottom:0;width:46px;display:none;align-items:center;z-index:6;cursor:pointer;color:var(--muted)}
.tabfade:hover{color:var(--teal)}
.tabfade.l{left:0;justify-content:flex-start;padding-left:2px;background:linear-gradient(to right,var(--bg) 35%,transparent)}
.tabfade.r{right:0;justify-content:flex-end;padding-right:2px;background:linear-gradient(to left,var(--bg) 35%,transparent)}
.tabfade.show{display:flex}
.tab{padding:6px 6px 9px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2.5px solid transparent;white-space:nowrap;user-select:none;text-align:center}
.tab .tl{font-size:10.5px;line-height:1.3;margin-top:4px}
.tab svg{display:inline-block;vertical-align:middle}
.tab:hover{color:var(--teal);background:var(--teal-light);border-radius:8px 8px 0 0}
.tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card h3{font-size:16px;font-weight:700;margin-bottom:14px}
.card h3 small{color:var(--muted);font-weight:400;font-size:12px;margin-left:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;text-align:center}
.kpi .n{font-size:30px;font-weight:800;color:var(--teal)}
.kpi .n.bad{color:#b32424}
.kpi .l{font-size:12px;color:var(--muted);margin-top:2px}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok-tx)} .p-warn{background:var(--warn-bg);color:var(--warn-tx)}
.p-bad{background:var(--bad-bg);color:var(--bad-tx)} .p-info{background:var(--info-bg);color:var(--info-tx)}
.p-neu{background:var(--neu-bg);color:var(--neu-tx)} .p-crit{background:var(--crit-bg);color:var(--crit-tx)}
.btn{background:var(--teal);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--teal-dark)}
.btn.sec{background:#fff;color:var(--txt);border:1px solid #cfd8d7}
.btn.sec:hover{background:var(--teal-light);color:var(--teal)}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:7px}
.btn.danger{background:#b32424}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],select,textarea{border:1px solid #cfd8d7;border-radius:9px;padding:8px 11px;font-size:13px;font-family:inherit;background:#fff;color:var(--txt)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:-1px}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid #eef2f1;vertical-align:top}
tr.row:hover{background:#f4f9f8;cursor:pointer}
.subtabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.subtab{padding:7px 15px;border-radius:999px;cursor:pointer;font-weight:600;font-size:13px;background:#fff;border:1px solid #cfd8d7;color:var(--muted)}
.subtab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.subtab svg{vertical-align:-2.5px;margin-right:5px}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bcol{background:#f0f1f1;border-radius:var(--radius);padding:12px}
.bcol h4{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--muted);display:flex;justify-content:space-between}
.bcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px;cursor:grab;font-size:13px}
.bcard:hover{border-color:var(--teal)}
.bcard{user-select:none}
.bcard.dragging{opacity:.45;transform:rotate(1.5deg)}
.bcol.dragover{outline:2.5px dashed var(--teal);outline-offset:-3px;background:var(--teal-light)}
.bcard .t{font-weight:600;margin-bottom:5px}
.bcard .m{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.modal-bg{position:fixed;inset:0;background:rgba(20,40,38,.4);display:none;align-items:stretch;justify-content:flex-end;z-index:45}
.modal{background:#fff;width:min(640px,94vw);height:100%;border-left:3px solid var(--teal);border-radius:0;padding:26px 30px 40px;overflow-y:auto;animation:drawerIn .18s ease}
@keyframes drawerIn{from{transform:translateX(46px);opacity:.4}to{transform:translateX(0);opacity:1}}
.fsec{font-size:10px;letter-spacing:.16em;color:var(--teal-dark);text-transform:uppercase;font-weight:600;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.frm>.fsec:first-child{border-top:none;padding-top:0;margin-top:0}
.qadd{display:flex;gap:6px;margin-top:6px}
body.dark .fsec{color:var(--teal)}
.modal h3{margin-bottom:18px;font-size:17px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.frm .full{grid-column:1/-1}
.frm label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.frm input,.frm select,.frm textarea{width:100%}
.modal .acts{display:flex;gap:10px;margin-top:22px;justify-content:flex-end}
.alert-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #eef2f1;font-size:13px;align-items:baseline}
.alert-item:last-child{border-bottom:none}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative;top:1px}
.disc-row{margin-bottom:12px}
.disc-row .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .hd{font-size:11px;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px}
.cal .day{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:84px;padding:5px;font-size:11px}
.cal .day.out{opacity:.35}
.cal .day .dn{font-weight:700;color:var(--muted);margin-bottom:3px}
.cal .chip{background:var(--teal-light);color:var(--teal-dark);border-radius:5px;padding:2px 5px;margin-bottom:3px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cal .chip.late{background:var(--bad-bg);color:var(--bad-tx)}
.chat{display:flex;flex-direction:column;height:560px}
.chat .msgs{flex:1;overflow-y:auto;padding:6px 2px}
.msg{display:flex;gap:10px;margin-bottom:14px}
.msg .bubble{padding:11px 15px;border-radius:13px;max-width:78%;line-height:1.5;white-space:pre-wrap}
.msg.ai .bubble{background:#fdf8ee;border:1px solid #f0e6cf}
.msg.me{justify-content:flex-end}
.msg.me .bubble{background:var(--teal);color:#fff}
.chat .inrow{display:flex;gap:10px;margin-top:12px}
.chat .inrow input{flex:1}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sugg button{background:var(--teal-light);color:var(--teal-dark);border:none;border-radius:999px;padding:6px 13px;font-size:12px;cursor:pointer;font-weight:600}
.muted{color:var(--muted)} .sm{font-size:12px}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.stat .v{font-size:21px;font-weight:800}
.stat .k{font-size:12px;color:var(--muted);margin-top:3px}
.empty{color:var(--muted);padding:20px;text-align:center;font-size:13px}
.plist td{padding:6px 10px}
.plist .iconbtn{padding:0 2px}
.zebB>td{background:#ebecec}
body.dark .zebB>td{background:#34322c}
.detrow>td{background:#f3f1ea!important;border-left:3px solid var(--teal)}
body.dark .detrow>td{background:#2e2c25!important}
.kzA{background:#fbfaf6}.kzB{background:#eae6d9}
body.dark .kzA{background:#2c2a24}body.dark .kzB{background:#3a372f}
.btable th,.btable td{padding:5px 7px;white-space:nowrap;font-size:11.5px}
.btable .iconbtn{padding:0 2px}
.fb{border-radius:9px;padding:8px 12px;font-size:12px;line-height:1.45;max-width:200px;color:var(--txt)}
.fb-n{background:var(--neu-bg)}.fb-g{background:var(--teal-light)}.fb-a{background:var(--warn-bg)}.fb-ok{background:var(--ok-bg)}
.flowpanel{overflow:hidden;transition:max-height .25s ease}
.detgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;padding:8px 4px}
.detgrid .dl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:2px}
.linkbtn{background:none;border:none;color:var(--teal);font-weight:600;cursor:pointer;font-size:12px;padding:0}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--teal);padding:2px;display:flex;align-items:center}
.iconbtn:hover{color:var(--teal-dark)}

body.dark{--bg:#1d1c1a;--card:#262522;--line:#3a3833;--txt:#e8e6e0;--muted:#9b968c;
 --teal-light:#383219;--ok-bg:#263320;--ok-tx:#a5c982;--warn-bg:#3a3119;--warn-tx:#dfb957;
 --bad-bg:#3b2321;--bad-tx:#e89086;--info-bg:#2b2b33;--info-tx:#bcbcd4;--neu-bg:#2e2d2a;--neu-tx:#aaa69d;}
body.dark .appbar{background:#262522;border-bottom-color:#3a3833}
body.dark .appbar .brand .app{color:#e8e6e0;border-left-color:#9b958a}
body.dark #logoLight{display:none}
body.dark #logoDark{display:block!important}
body.dark .arc path:nth-of-type(2){fill:#bdbdbd;opacity:.4}
body.dark .arc path:nth-of-type(3){fill:#f5f2ea;opacity:.9}
body.dark .avatar{background:#262522;color:#e8e6e0;border-color:#9b968c}
body.dark .bcard,body.dark .modal,body.dark .cal .day{background:#2e2d2a;border-color:#3a3833}
body.dark .bcol{background:#21201d}
body.dark input[type=text],body.dark input[type=password],body.dark input[type=email],body.dark input[type=date],body.dark input[type=number],body.dark select,body.dark textarea{background:#2e2d2a;color:#e8e6e0;border-color:#4a4742}
body.dark .btn.sec{background:#2e2d2a;color:#e8e6e0;border-color:#4a4742}
body.dark tr.row:hover{background:#2b2a26}
body.dark tr[id^=det_]>td{background:#21201d!important}
body.dark .msg.ai .bubble{background:#2e2c25;border-color:#4a452f}
body.dark .pbar{background:#3a3833!important}
body.dark .cal .chip{background:#383219;color:#dfb957}
body.dark input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.82)}
body.dark select{background-image:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.langmenu{display:none;position:absolute;top:26px;right:0;background:var(--card);border:0.5px solid var(--line);border-radius:9px;padding:5px;z-index:70;min-width:130px;box-shadow:0 8px 22px rgba(20,30,28,.16);text-align:left}
.langmenu div{padding:7px 12px;border-radius:6px;font-size:12.5px;color:var(--txt);font-weight:500;white-space:nowrap}
.langmenu div:hover{background:var(--teal-light);color:var(--teal-dark)}
#lockIcon .lockcheck{display:none}
#lockIcon.swap .locksvg{display:none}
#lockIcon.swap .lockcheck{display:block;animation:tickin .35s forwards}
@keyframes tickin{to{opacity:1;transform:scale(1)}}
#lockOv.reveal{animation:lockfade .8s .55s forwards}
@keyframes lockfade{to{opacity:0;visibility:hidden}}
#projForm.reveal{animation:formfocus .8s .55s forwards}
@keyframes formfocus{to{filter:blur(0)}}
#lockOv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(255,255,255,.35);z-index:5}
body.dark #lockOv{background:rgba(28,27,24,.45)}
body.dark .subtab{background:#2e2d2a;border-color:#4a4742;color:#aaa69d}
body.dark .subtab.active{background:var(--teal);border-color:var(--teal);color:#1d1c1a}
@media print{body>*{display:none!important}.modal-bg{display:block!important;position:static!important}.modal{width:100%!important;height:auto!important;border:none!important;animation:none!important}.modal .acts{display:none!important}body{background:#fff!important}}
@media(max-width:760px){.frm{grid-template-columns:1fr}.wrap{padding:16px}}

/* --- Hosted build override: full-screen-width content area (per PJ, matching the
   Schedule Builder layout). The prototype centred .wrap at max-width:1280px; the hosted
   shell spans the full viewport width with the same 28px side gutter as the top bars. --- */
.wrap{max-width:none;margin:0;padding:12px 28px 60px}

/* --- Project-site tab strip. Greyed, non-clickable tabs until each is developed. --- */
.tabswrap{position:relative;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}

/* --- Project tab strip (final): prototype spacing (icons + space-between), but the strip is
   capped and centred so tabs sit close together while #content below spans full width. --- */
.tabswrap{max-width:1180px;margin:14px auto 22px;position:relative;border-bottom:none}
.tabs{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);overflow-x:auto;padding-bottom:0}
.tab{padding:6px 6px 9px;text-align:center}
.tab .tl{font-size:10.5px;line-height:1.3;margin-top:4px}
.tab.disabled{color:var(--muted);cursor:not-allowed;pointer-events:none}
.tab.disabled:hover{color:var(--muted);background:none;border-radius:0}