/* Inter (SIL Open Font License 1.1), self-hosted. See fonts/README.txt */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --brand:#dc2626;--brand2:#b91c1c;--brandD:#7f1d1d;--brandL:#fee2e2;
  --ink:#171717;--ink2:#334155;--muted:#586579;
  --line:#e2e8f0;--bg:#f8fafc;--card:#fff;--field:#cbd5e1;
  --surface:#fff;--surface-2:#f8fafc;--surface-3:#f1f5f9;--input-bg:#fff;--inp-line:#e2e8f0;--field-hover:#cbd5e1;--edge-hover:#94a3b8;
  --row-line:#f1f5f9;--soft-red:#fef2f2;--red-text:#b91c1c;--danger-line:#fecaca;--faint:#6e6e6e;--bar-dark:#404040;
  --hover:rgba(0,0,0,.02);--hl:#fff;--topbar-bg:rgba(255,255,255,.9);
  --login-from:#f8fafc;--login-to:#eef2f6;
  color-scheme:light;
  --tc:#16a34a;--tb:#f0fdf4;--tst-ms:4500ms;--bi:none;
  --grey:#a3a3a3;--greyL:#d4d4d4;--greyD:#404040;
  --sh:0 1px 3px 0 rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.04);
  --sh-float:0 10px 25px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.03);
  --ease:150ms cubic-bezier(.16,1,.3,1);
  --st:#94a3b8;--st-ok:#16a34a;--st-warn:#d97706;--st-bad:#dc2626;--sp-3:12px;--sp-4:16px;--sp-5:22px;--sp-6:32px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"cv11","ss03";font-variant-numeric:tabular-nums;
  background:var(--bg);color:var(--ink);font-size:13.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ================= LOGIN ================= */
#login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,var(--login-from) 0%,var(--login-to) 100%);padding:20px;transition:opacity .25s}
/* real site photo, slowly zooming and drifting. Transform only, so it stays light. */
.login-photo{position:absolute;inset:-4%;background:url("images/login-bg.jpg") center 35%/cover no-repeat;
  animation:kenburns 45s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.6%,-1.2%,0)}}
/* soft veil: keeps the card readable and ties the photo to the brand */
#login::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(15,23,42,.38) 0%,rgba(15,23,42,.12) 42%,rgba(15,23,42,.5) 100%),
    radial-gradient(ellipse at 50% 55%,rgba(15,23,42,.28) 0%,transparent 62%)}
/* clouds drifting across the sky */
.scene{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.scene svg{position:absolute;display:block}
.scene .cloud{top:9%;width:170px;height:56px;animation:drift 110s linear infinite;animation-delay:-45s}
.scene .cloud path{fill:rgba(255,255,255,.55)}
.scene .cloud.two{top:23%;width:120px;height:40px;animation-duration:160s;animation-delay:-100s}
.scene .cloud.two path{fill:rgba(255,255,255,.4)}
@keyframes drift{from{transform:translateX(-240px)}to{transform:translateX(calc(100vw + 240px))}}
html[data-theme="dark"] .login-photo{filter:brightness(.5) saturate(.85)}
html[data-theme="dark"] #login::before{background:linear-gradient(180deg,rgba(2,6,23,.55) 0%,rgba(2,6,23,.3) 45%,rgba(2,6,23,.7) 100%)}
html[data-theme="dark"] .scene{opacity:.35}
@media(max-width:760px){
  .login-photo{background-image:url("images/login-bg-sm.jpg");background-position:left 20%}
  .scene .cloud{width:110px;height:36px}
}

.lcard{width:420px;max-width:100%;background:var(--surface);border-radius:16px;padding:38px 34px;
  box-shadow:var(--sh-float),0 0 0 1px var(--line);
  position:relative;z-index:4}
.lbrand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
/* logos: the light-theme file has a dark tagline, the dark-theme file has a white one */
.logo{display:block;height:auto}
.logo-dark{display:none}
html[data-theme="dark"] .logo-light{display:none}
html[data-theme="dark"] .logo-dark{display:block}
.lbrand{flex-direction:column;align-items:flex-start;gap:10px}
.lbrand .logo{width:176px}
.lbrand-sub{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding-left:2px}
.lsub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55}
.rlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;margin-bottom:10px;display:block}
.roles{display:grid;gap:9px;margin-bottom:22px}
.role{display:flex;align-items:center;gap:12px;padding:14px 15px;border:1.5px solid var(--line);
  border-radius:8px;cursor:pointer;transition:.15s}
.role:hover{border-color:var(--field-hover);background:var(--surface-2)}
.role.sel{border-color:var(--brand);background:var(--soft-red)}
.role .ric{width:38px;height:38px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;font-size:17px}
.role.sel .ric{background:var(--brand);color:#fff}
.role b{display:block;font-size:13.5px;font-weight:600}
.role small{color:var(--muted);font-size:11.5px;font-weight:500}
.pwrap{position:relative}
.pwrap .inp{padding-right:46px}
.pw-toggle{position:absolute;top:0;right:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--muted);cursor:pointer;border-radius:0 8px 8px 0;transition:color var(--ease)}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(220,38,38,.35)}
.pw-toggle .ic{width:18px;height:18px}
.pw-toggle .ic + .ic,.pw-toggle.on .ic:first-child{display:none}
.pw-toggle.on .ic + .ic{display:block}
.lbtn{width:100%;padding:14px;border:0;border-radius:10px;background:#dc2626;color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.12);
  transition:background-color var(--ease),transform var(--ease);font-family:inherit}
.lbtn:hover{background:#b91c1c}
.lbtn:active{transform:translateY(1px)}

/* ================= SHELL ================= */
#app{display:flex;min-height:100vh;overflow-x:clip}
.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:50}
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid var(--line);
  background:var(--surface)}
.sb-logo{display:flex;flex-direction:column;gap:7px;min-width:0}
.sb-logo .logo{width:138px}
.sb-logo span{font-size:9px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding-left:2px}
.sb-nav{flex:1;overflow-y:auto;padding:14px 10px}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--field);border-radius:4px}
.navsec{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:14px 12px 7px;display:flex;align-items:center;gap:7px}
.navsec::before{display:none}
button.navsec{width:100%;border:0;background:none;font-family:inherit;cursor:pointer;text-align:left;justify-content:space-between;border-radius:8px;margin-top:2px}
button.navsec:hover{background:var(--surface-3);color:var(--ink)}
.gchev{display:inline-flex;transition:transform .18s ease}
.gchev .ic{width:14px;height:14px}
.navgrp.collapsed .gchev{transform:rotate(-90deg)}
.navgrp.collapsed .navbody{display:none}
.navgrp.recent .navsec{color:var(--red-text)}
.recent-item .rname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.skip{position:fixed;left:12px;top:-60px;z-index:10001;background:#171717;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;transition:top .15s}
.skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
#content:focus{outline:none}
.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--ink2);border:0;background:none;width:100%;text-align:left;
  transition:background-color var(--ease),color var(--ease);font-weight:600;font-family:inherit;margin-bottom:2px}
.nav:hover{background:var(--surface-3);color:var(--ink)}
.nav:focus-visible,button.navsec:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(220,38,38,.55)}
.nav.active{background:#dc2626;color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.1)}
.nav .ni{width:18px;text-align:center;font-size:15px}
.sb-foot{padding:14px 18px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);
  font-weight:500;display:flex;align-items:center;gap:6px}
.sb-foot .dot{width:6px;height:6px;border-radius:50%;background:#16a34a}

.main{flex:1;margin-left:240px;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--topbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:0 26px;height:64px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:40}
.tb-title-wrap{display:flex;flex-direction:column;gap:2px}
.tb-eyebrow{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);
  font-weight:700;display:flex;align-items:center;gap:6px}
.tb-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#dc2626}
.tb-title{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.tb-sub{font-size:11.5px;color:var(--muted);margin-top:1px;font-weight:600}
.tb-spacer{flex:1}
.psel{display:flex;align-items:center;gap:9px;border:1px solid var(--field);border-radius:8px;
  padding:7px 12px;font-size:12.5px;background:var(--surface);box-shadow:var(--sh);cursor:pointer;font-weight:500;transition:border-color var(--ease),background-color var(--ease);position:relative}
.psel:hover{border-color:var(--brand);background:var(--soft-red)}
.psel .plbl{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1}
.psel .pname{color:var(--ink);font-weight:600;line-height:1.2;margin-top:2px}
.avatar{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#b91c1c;
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:12.5px}
.logout{border:1px solid var(--field);background:var(--surface);box-shadow:var(--sh);border-radius:8px;padding:7px 12px;
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;color:var(--ink2);transition:.15s}
.logout:hover{border-color:var(--brand);color:var(--brand)}

.content{padding:22px 26px 40px;flex:1}
.view{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================= COMPONENTS ================= */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g2{grid-template-columns:repeat(2,1fr)}
.g21{grid-template-columns:2fr 1fr}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--sh)}
.card.pad0{padding:0;overflow:hidden}
.ch{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ch h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.ch h3::before{content:"";width:4px;height:16px;border-radius:3px;background:var(--brand);flex-shrink:0}
.ch .right{margin-left:auto;font-size:12px;color:var(--brand);font-weight:600;cursor:pointer;
  background:none;border:0;font-family:inherit;padding:6px 12px;border-radius:6px;transition:.15s}
.ch .right:hover{background:var(--soft-red)}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;position:relative;overflow:hidden;
  box-shadow:var(--sh);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-float);border-color:var(--field)}
.kpi::after{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;background:var(--soft-red);pointer-events:none}
.kpi.ok::after,.kpi.warn::after{background:var(--surface-3)}
.kpi .kl{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.kpi .kl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex-shrink:0}
.kpi.ok .kl::before{background:var(--bar-dark)}
.kpi.warn .kl::before{background:var(--faint)}
.kpi .kv{position:relative;z-index:1;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:10px 0 10px;color:var(--ink)}
.kpi .ks{position:relative;z-index:1;font-size:11.5px;color:var(--muted);font-weight:500;padding-top:10px;border-top:1px solid var(--line)}
.kpi .kt{z-index:1;position:absolute;top:14px;right:16px;font-size:10px;font-weight:700;padding:4px 9px;
  border-radius:9999px;background:var(--surface);border:1px solid var(--line);color:var(--ink2);letter-spacing:.02em}

/* HERO: calm white panel, red only where it means something */
.hero{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh);margin-bottom:22px;overflow:hidden}
.hero-main{padding:26px 30px 24px}
.hero-side{padding:26px 28px;background:var(--surface-2);border-left:1px solid var(--line);display:flex;flex-direction:column}
.hero-eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:14px}
.hero-eyebrow i{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.hero-proj{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hero-num{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.hero-num .big{font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.hero-num .big small{font-size:20px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:2px}
.hero-num .lbl{font-size:14px;font-weight:600;color:var(--muted);line-height:1.45;padding-bottom:2px}
.track{position:relative;height:10px;border-radius:9999px;background:var(--surface-3);margin:0 0 34px;box-shadow:inset 0 0 0 1px var(--line)}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:9999px;background:linear-gradient(90deg,#ef4444,#dc2626);min-width:0}
.track .mark{position:absolute;top:-5px;width:2px;height:20px;background:var(--ink);border-radius:2px;transform:translateX(-1px)}
.track .mark em{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}
.track .mark[style*="left:0%"] em{transform:none;left:-1px}
.track .mark[style*="left:100%"] em{transform:translateX(-100%);left:1px}
.hero-foot{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink2);margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.hero-foot .ic{width:1.1em;height:1.1em;vertical-align:-.18em;color:var(--red-text)}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 0;margin-top:20px}
.hero-stats > div{padding:0 18px;border-left:1px solid var(--line);min-width:0}
.hero-stats > div:nth-child(3n+1){padding-left:0;border-left:0}
.hero-stats dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;order:2;margin-top:4px}
.hero-stats dd{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);order:1}
.hero-stats > div{display:flex;flex-direction:column}
.hero-status{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  padding:7px 14px 7px 12px;border-radius:9999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:14px}
.hero-status .sdot{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.hero-status.ahead .sdot,.hero-status.on_track .sdot,.hero-status.completed .sdot{background:#16a34a}
.hero-status.slightly_behind .sdot{background:#d97706}
.hero-status.behind .sdot{background:#dc2626}
.hero-desc{font-size:14px;line-height:1.6;color:var(--ink2);font-weight:500}
.hero-trend{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink2)}
.hero-trend b{font-weight:700}
.tdots{display:flex;gap:5px}
.tdots i{flex:1;height:6px;border-radius:3px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)}
.tdots i.on{background:var(--bar-dark);box-shadow:none}

/* TABLE */
table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;z-index:2;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--row-line);font-size:13px;font-weight:500;vertical-align:middle}
tbody tr{transition:background-color 150ms ease}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
th.r{text-align:right}
.tscroll{overflow-x:auto;overscroll-behavior-x:contain}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:2px 10px;border:1px solid transparent;border-radius:9999px;white-space:nowrap;letter-spacing:.01em}
.b-grey{background:var(--surface-3);color:#475569;border-color:#e2e8f0}
.b-green{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.b-amber{background:#fffbeb;color:#b45309;border-color:#fde68a}
.b-red{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.b-blue{background:var(--surface-3);color:#334155;border-color:#cbd5e1}
.b-teal{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}

/* MINI BAR */
.minibar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;display:flex}
.minibar i{display:block;height:100%}
.minibar i.planned{background:var(--faint)}
.minibar i.actual{background:var(--bar-dark)}
.minibar i.behind{background:#dc2626}
.plabel-small{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);
  margin-bottom:5px;font-weight:600}

/* ROWS */
.rows{display:grid;gap:0}
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--row-line);font-size:13px}
.row:last-child{border-bottom:0}
.row .rl{color:var(--muted);width:200px;flex-shrink:0;font-size:12px;font-weight:500}
.row .rv{font-weight:600}
.row .rr{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.row.total{font-weight:700;border-top:2px solid var(--line);padding-top:14px;margin-top:8px}
.row.total .rl{color:var(--ink);font-weight:700}

.section-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:700;margin:26px 0 14px;display:flex;align-items:center;gap:8px}
.section-title::before{content:"";width:16px;height:2px;background:var(--brand);border-radius:2px}
.section-title:first-child{margin-top:0}

/* ALERT */
.alert{display:flex;gap:13px;padding:14px 18px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand);margin-bottom:10px;box-shadow:var(--sh)}
.alert.warn{border-left-color:var(--faint)}
.alert.ok{border-left-color:var(--bar-dark)}
.alert .ai{font-size:20px;line-height:1.2;flex-shrink:0}
.alert b{font-size:13.5px;display:block;margin-bottom:4px;font-weight:600}
.alert p{font-size:12px;color:var(--muted);line-height:1.55;font-weight:500}
.alert .at{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;font-weight:500}

/* FORMS */
.field{margin-bottom:18px}
.flabel{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:7px;display:block;letter-spacing:.005em}
.flabel span{color:var(--muted);font-weight:500}
.inp{width:100%;height:40px;padding:0 13px;border:1.5px solid var(--inp-line);border-radius:10px;
  font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--input-bg);outline:none;
  transition:border-color var(--ease),box-shadow var(--ease),background-color var(--ease);font-weight:500}
.inp:hover{border-color:var(--field-hover)}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.inp::placeholder{color:var(--faint);font-weight:400}
.inp:disabled,.inp[readonly]{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
textarea.inp{resize:vertical;height:auto;min-height:92px;padding:10px 13px;font-weight:500;line-height:1.55}
select.inp{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
input[type=file].inp{padding:0 6px 0 0;line-height:37px;color:var(--muted)}
input[type=file].inp::file-selector-button{height:100%;margin:0 12px 0 0;padding:0 14px;border:0;border-right:1.5px solid var(--inp-line);
  background:var(--surface-3);color:var(--ink2);font-weight:600;font-size:12.5px;font-family:inherit;cursor:pointer;border-radius:8px 0 0 8px}
input[type=file].inp::file-selector-button:hover{background:var(--soft-red);color:var(--red-text)}
.ferr{color:var(--red-text);font-size:11.5px;font-weight:600;margin-top:6px;display:flex;gap:5px;align-items:flex-start}
.ferr::before{content:"";flex-shrink:0;width:13px;height:13px;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.field:has(.ferr) > .inp,.field:has(.ferr) .dp > .inp,.inp[aria-invalid=true]{border-color:var(--brand);background:var(--soft-red)}

.btn{padding:0 18px;min-height:40px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:600;
  cursor:pointer;transition:background-color var(--ease),border-color var(--ease),transform var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#dc2626;color:#fff;border-color:#b91c1c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.1)}
.btn.primary:hover{background:#b91c1c}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--field);
  box-shadow:inset 0 1px 0 var(--hl),0 1px 2px rgba(0,0,0,.05)}
.btn.secondary:hover{background:var(--surface-2);border-color:var(--edge-hover)}
.btn:focus-visible,.lbtn:focus-visible,.nav:focus-visible,.tab-btn:focus-visible,.subtabs a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.25)}

.banner{padding:14px 18px;background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;margin-bottom:20px;font-size:13px;line-height:1.6;color:var(--ink2);font-weight:400}
.banner b{font-weight:600;color:var(--ink)}
.banner.error{background:var(--soft-red);border-color:var(--brandL)}
.empty{padding:40px 22px;text-align:center;color:var(--muted);font-weight:500}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab-btn{padding:10px 16px;border:0;background:none;font-size:13px;font-weight:500;color:var(--muted);
  cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;font-family:inherit;transition:.15s}
.tab-btn:hover{color:var(--ink2)}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}

.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.photo{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#d4d4d4,#a3a3a3);
  display:grid;place-items:center;font-size:34px;color:#fff;cursor:pointer;position:relative;
  overflow:hidden;transition:.2s}
.photo:hover{transform:scale(1.02);box-shadow:var(--sh-float)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;font-size:10.5px;padding:18px 10px 8px;font-weight:600}

.tchip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;background:var(--soft-red);
  border:1px solid #fca5a5;border-radius:9999px;font-size:12px;font-weight:600;color:var(--red-text);
  margin:0 7px 7px 0}


/* ================= PROJECT DROPDOWN ================= */
.pdrop{position:relative}
.psel{font-family:inherit;text-align:left;color:inherit;max-width:360px}
.psel:focus-visible,.pm-item:focus-visible,.logout:focus-visible,.menu-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.25)}
.psel[aria-expanded="true"]{border-color:var(--brand);background:var(--soft-red)}
.psel[aria-expanded="true"] .chev{transform:rotate(180deg)}
.psel .chev{transition:transform .15s}
.pico{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--brandL);color:var(--brand2);flex-shrink:0}
.pico .ic{width:16px;height:16px}
.ptxt{display:flex;flex-direction:column;min-width:0}
.psel .pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.pmenu{position:absolute;right:0;top:calc(100% + 8px);width:400px;max-width:calc(100vw - 28px);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-float);padding:6px;z-index:80;
  animation:fade .12s ease}
.pmenu[hidden]{display:none}
.pm-head{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:8px 10px 6px}
.pm-search{width:100%;margin:2px 0 6px;padding:8px 12px;border:1px solid var(--field);border-radius:8px;font-family:inherit;
  font-size:13px;font-weight:600;outline:none}
.pm-search:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.25)}
.pm-list{max-height:min(60vh,340px);overflow-y:auto}
.pm-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:0;background:none;
  border-radius:8px;cursor:pointer;font-family:inherit;color:var(--ink)}
.pm-item:hover,.pm-item:focus{background:var(--surface-3)}
.pm-item.active{background:var(--soft-red)}
.pm-item[hidden]{display:none}
.pm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-main b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-main small{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tick{display:inline-flex;color:var(--brand)}
.pm-tick .ic{width:18px;height:18px}
.pm-empty{padding:16px 12px;text-align:center;color:var(--muted);font-weight:500;font-size:12.5px}

/* ================= ROLE UI + ERROR PAGES ================= */
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.who b{font-size:12.5px;font-weight:600;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.3px}
.banner.readonly{display:flex;gap:12px;align-items:flex-start;border-left-color:var(--grey);background:var(--surface-2)}
.banner.readonly .ic{width:20px;height:20px;margin-top:1px;color:var(--ink2)}
.errcard{text-align:left;width:460px}
.errhero{display:flex;align-items:center;gap:18px;margin:4px 0 6px}
.errart{width:72px;height:72px;border-radius:12px;background:var(--brandL);color:var(--brand2);display:grid;place-items:center;
  flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(220,38,38,.15)}
.errart .ic{width:34px;height:34px;stroke-width:1.6}
.errcode{font-size:72px;font-weight:700;letter-spacing:-4px;line-height:1;color:var(--brand)}
.errcard-500 .errart{background:#171717;color:#fff;box-shadow:none}
.errcard-403 .errart,.errcard-429 .errart{background:var(--surface-3);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.errcard-403 .errcode,.errcard-429 .errcode{color:var(--ink2)}
.errtitle{font-size:21px;font-weight:700;letter-spacing:-.4px;margin:10px 0 8px;line-height:1.25}
.errpath{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:0 0 16px;font-size:12px;min-width:0}
.errpath span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;flex-shrink:0}
.errpath code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.errref{background:var(--soft-red);border:1px solid var(--brandL);border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:13px;font-weight:500}
.errref b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.5px;color:var(--red-text);margin-left:6px;user-select:all}
.errref small{display:block;margin-top:4px;color:var(--muted);font-weight:600;font-size:11.5px;line-height:1.45}
.errmeta{font-size:11.5px;color:var(--muted);font-weight:600;margin:0 0 20px}
.erractions{display:grid;gap:10px}
.lbtn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.lbtn.ghost:hover{background:var(--surface-2);border-color:var(--field-hover);box-shadow:none;transform:none}
a.lbtn{text-decoration:none}
.errshort{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.errshort span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-right:4px}
.errshort a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:9999px;
  font-size:12px;font-weight:600;color:var(--ink2);transition:.15s}
.errshort a:hover{border-color:var(--brand);color:var(--brand);background:var(--soft-red)}
.errshort a .ic{width:14px;height:14px}

/* ================= ICONS ================= */
.ic{width:1.2em;height:1.2em;flex-shrink:0;vertical-align:-.22em}
.nav .ni{display:inline-flex;align-items:center;justify-content:center;width:20px;font-size:17px}
.alert .ai{color:var(--brand);font-size:20px;display:inline-flex}
.alert.warn .ai{color:var(--muted)}
.alert.ok .ai{color:var(--ink2)}
.plabel-abs .ic{width:1.1em;height:1.1em;vertical-align:-.2em}
.tick{display:inline-flex;color:var(--ink2)}
.tick .ic{width:18px;height:18px}
.photo > .ic{width:36%;height:36%;stroke-width:1.4}
.chev{display:inline-flex;color:var(--muted)}
.btn .ic,.lbtn .ic{width:1.1em;height:1.1em;vertical-align:-.18em}
.lbtn{display:flex;align-items:center;justify-content:center;gap:8px}
.logout{display:inline-flex;align-items:center;gap:8px}
.menu-btn,.menu-close{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;
  border:1.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.menu-btn .ic,.menu-close .ic{width:20px;height:20px}
.menu-close{margin-left:auto;border:0;background:var(--surface-3)}
.scrim{display:none}

/* ================= LISTS, FILTERS, DETAIL PAGES ================= */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.filters .field{margin:0;min-width:150px;flex:1 1 150px;max-width:240px}
.filters .flabel{margin-bottom:6px}
.filters .inp{height:38px}
.factions{display:flex;gap:8px}
.factions .btn{padding:7px 14px}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:10px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager span{color:var(--muted);font-weight:500;margin-right:auto;font-size:12.5px}
.pager .btn{padding:5px 12px}
.pick{grid-column:1/-1}
.pick-group{border:1px solid var(--line);border-radius:12px;margin:10px 0 0;padding:6px 14px 10px;min-width:0}
.pick-group legend{font-size:12px;font-weight:600;color:var(--ink2);padding:0 6px}
.pick-group legend .link{margin-left:10px;background:none;border:0;cursor:pointer;font:inherit;font-weight:600}
.pick-row{display:flex;align-items:center;gap:10px;padding:8px 2px;min-height:40px;cursor:pointer}
.pick-row[hidden],.pick-group[hidden]{display:none}
.fhelp{font-size:11.5px;color:var(--muted);margin-top:6px;font-weight:500}
.fintro{font-size:13px;color:var(--muted);margin:-6px 0 18px;line-height:1.55}
.formbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chk{width:18px;height:18px;accent-color:var(--brand)}
.btn.small{padding:5px 10px;font-size:12px;border-radius:6px}
.btn.danger{background:var(--surface);color:var(--red-text);border:1px solid var(--danger-line)}
.btn.danger:hover{background:var(--soft-red);border-color:var(--brand)}
.rowactions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rowactions form{display:inline}
a.link,.link{color:var(--red-text);font-weight:600}
a.link:hover{text-decoration:underline}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 22px}
.kvgrid .kv2 span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:4px}
.kvgrid .kv2 b{font-size:14px;font-weight:600;word-break:break-word}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--brand)}
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .gt{fill:var(--muted);font-size:11px;font-weight:500}
.chart .today{stroke:var(--faint);stroke-width:1.2;stroke-dasharray:4 4}
.chart .lp{fill:none;stroke:var(--faint);stroke-width:2.5;stroke-dasharray:6 5;stroke-linejoin:round}
.chart .la{fill:none;stroke:var(--brand);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--surface);stroke:var(--brand);stroke-width:3}
.legend{display:flex;gap:18px;font-size:12px;font-weight:500;color:var(--ink2);margin-top:8px;flex-wrap:wrap}
.legend .k{display:inline-block;width:18px;height:0;border-top:3px solid var(--brand);vertical-align:middle;margin-right:6px}
.legend .k.planned{border-top:3px dashed var(--faint)}.legend .k.today{border-top:2px dashed var(--faint)}
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;background:var(--surface-3);color:var(--ink2);font-size:11px;font-weight:600}
.stack{display:grid;gap:22px}
.stack[hidden]{display:none}
.subtabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.subtabs a{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--field);border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--surface)}
.subtabs a.active{background:#dc2626;border-color:#b91c1c;color:#fff;font-weight:600}
.subtabs a:hover:not(.active){border-color:var(--brand);color:var(--brand)}
.filelist{display:grid;gap:8px}
.filelist .fi{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.filelist .fi .ic{color:var(--muted)}
.filelist .fi a{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .fi small{color:var(--muted);font-weight:600}
.warnbox{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:8px;padding:12px 16px;font-size:12.5px;font-weight:600;color:#78350f;line-height:1.55}

/* ================= PERMISSIONS AND TEMPORARY PASSWORD ================= */
.permtable th.pc,.permtable td.pc{text-align:center;width:130px}
.permtable td:first-child{min-width:220px}
.pcell{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:30px;cursor:pointer}
.pcell .badge{position:absolute;left:100%;margin-left:8px}
.pcell input:disabled{cursor:not-allowed;opacity:.5}
.pl{display:none;font-size:12px;color:var(--muted)}
.pl.show{display:inline}
.pnone{color:var(--muted)}
.permbar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px;
  padding:12px 16px;background:var(--topbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)}
.tempbox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 18px;border:1px dashed var(--field);border-radius:10px;background:var(--surface-2)}
.tempbox code{font:600 22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--ink);user-select:all;word-break:break-all}
.steps{margin:0 0 20px 20px;display:grid;gap:8px;color:var(--ink2);line-height:1.55}

/* ================= NOTIFICATIONS (one stack, top right) ================= */
.toasts{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 24px));pointer-events:none}
.tst{position:relative;pointer-events:auto;display:flex;align-items:flex-start;gap:12px;overflow:hidden;
  padding:13px 12px 15px 14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--tc);
  border-radius:12px;box-shadow:var(--sh-float);opacity:0;transform:translateX(28px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1)}
.tst.in{opacity:1;transform:none}
.tst.out{opacity:0;transform:translateX(28px)}
.tst-error{--tc:var(--brand);--tb:var(--soft-red)}
.tst-warning{--tc:#d97706;--tb:#fffbeb}
.tst-info{--tc:#475569;--tb:var(--surface-3)}
.tst-ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--tb);color:var(--tc);display:grid;place-items:center}
.tst-ic svg{width:16px;height:16px}
.tst-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:1px}
.tst-body b{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.tst-body span{font-size:12.5px;font-weight:500;color:var(--ink2);line-height:1.45;word-break:break-word}
.tst-x{flex-shrink:0;width:26px;height:26px;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.tst-x:hover{background:var(--surface-3);color:var(--ink)}
.tst-x:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.35)}
.tst-x svg{width:14px;height:14px}
.tst-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--tc);opacity:.55;transform-origin:left;
  animation:tstbar var(--tst-ms,4500ms) linear forwards}
.tst.paused .tst-bar{animation-play-state:paused}
@keyframes tstbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
html[data-theme="dark"] .tst{--tb:rgba(34,197,94,.14);--tc:#4ade80}
html[data-theme="dark"] .tst-error{--tb:var(--soft-red);--tc:#f87171}
html[data-theme="dark"] .tst-warning{--tb:rgba(245,158,11,.14);--tc:#fbbf24}
html[data-theme="dark"] .tst-info{--tb:rgba(148,163,184,.14);--tc:#cbd5e1}

/* ================= DATE PICKER ================= */
.dp{position:relative;display:block;min-width:0}
.dp > .inp{padding-right:44px}
.dp-btn{position:absolute;top:0;right:0;bottom:0;width:42px;display:grid;place-items:center;border:0;background:none;color:var(--muted);
  cursor:pointer;border-radius:0 10px 10px 0;padding:0;transition:color var(--ease)}
.dp-btn:hover,.dp.open .dp-btn{color:var(--brand)}
.dp-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(220,38,38,.4)}
.dp-btn svg{width:18px;height:18px}
.dp-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:90;width:304px;max-width:calc(100vw - 16px);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-float);overflow:hidden;animation:fade .14s ease}
.dp.up .dp-pop{top:auto;bottom:calc(100% + 8px)}
.dp-head{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);color:#fff;padding:16px 20px 15px}
.dp-head span{display:block;font-size:12px;font-weight:600;opacity:.8;letter-spacing:.04em}
.dp-head b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:2px}
.dp-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 10px 4px}
.dp-title{border:0;background:none;font:700 13.5px inherit;font-family:inherit;color:var(--ink);padding:7px 12px;border-radius:8px;cursor:pointer}
.dp-title:hover{background:var(--surface-3)}
.dp-arrow{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink2);display:grid;place-items:center;cursor:pointer;padding:0}
.dp-arrow:hover{background:var(--surface-3);color:var(--brand)}
.dp-arrow svg{width:16px;height:16px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:0 12px;gap:2px}
.dp-dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);padding:6px 0;text-transform:uppercase;letter-spacing:.04em}
.dp-days{padding-bottom:6px}
.dp-day{aspect-ratio:1;border:0;border-radius:50%;background:none;color:var(--ink);font:600 12.5px inherit;font-family:inherit;cursor:pointer;padding:0;
  display:grid;place-items:center;transition:background-color 120ms ease,color 120ms ease}
.dp-day:hover{background:var(--surface-3)}
.dp-day.out{color:var(--faint);font-weight:500}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--red-text)}
.dp-day.sel,.dp-day.sel:hover,.dp-mon.sel,.dp-mon.sel:hover{background:#dc2626;color:#fff;box-shadow:0 2px 6px rgba(220,38,38,.35)}
.dp-day:disabled,.dp-mon:disabled{opacity:.3;cursor:not-allowed;background:none}
.dp-day:focus-visible,.dp-mon:focus-visible,.dp-title:focus-visible,.dp-arrow:focus-visible,.dp-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.5)}
.dp-months{grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px 10px}
.dp-mon{height:42px;border:0;border-radius:10px;background:var(--surface-2);color:var(--ink);font:600 12.5px inherit;font-family:inherit;cursor:pointer;padding:0}
.dp-mon:hover{background:var(--surface-3)}
.dp-mon.today{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--red-text)}
.dp-foot{display:flex;justify-content:space-between;padding:8px 14px 12px;border-top:1px solid var(--line);margin-top:6px}
.dp-day.today.sel,.dp-mon.today.sel{color:#fff}
.dp-link{border:0;background:none;font:600 12.5px inherit;font-family:inherit;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:8px}
.dp-link:hover{background:var(--surface-3);color:var(--ink)}
.dp-link.strong{color:var(--red-text)}
.dp-link.strong:hover{background:var(--soft-red)}
@media(max-width:560px){
  .dp-pop,.dp.up .dp-pop{position:fixed;left:0 !important;right:0;top:auto;bottom:0;width:auto;max-width:none;border-radius:20px 20px 0 0;
    box-shadow:0 0 0 100vmax rgba(15,23,42,.5);padding-bottom:env(safe-area-inset-bottom);animation:sheet .2s ease}
  .dp-day{font-size:14px}
  .dp-btn{width:46px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ================= FORM CARDS ================= */
/* a form card is: tinted title bar, roomy field area, grey action bar */
form.card{padding:0}
form.card > .ch{margin:0 0 22px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:14px 14px 0 0}
form.card > :not(.ch){margin-left:24px;margin-right:24px}
form.card > :first-child:not(.ch){margin-top:22px}
form.card > :last-child:not(.formbtns){margin-bottom:24px}
form.card > .fintro{margin-top:-8px}
form.card .section-title{margin-top:8px}
form.card > .formbtns{margin:8px 0 0;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 14px 14px}
.formbtns .btn{min-width:104px}
.formbtns .btn.primary{min-width:132px}
.grid.g4 .field,.grid.g3 .field,.grid.g2 .field{margin-bottom:2px}
form.card > .grid{margin-bottom:18px}

/* ================= USER CARD + NOTIFICATIONS ================= */
.udrop,.ndrop{position:relative;flex-shrink:0}
.ubtn{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 5px;border:1px solid var(--field);border-radius:9999px;background:var(--surface);
  box-shadow:var(--sh);cursor:pointer;font-family:inherit;color:inherit;transition:border-color var(--ease),background-color var(--ease)}
.ubtn:hover,.udrop.open .ubtn{border-color:var(--brand);background:var(--soft-red)}
.ubtn .who{align-items:flex-start}
.ubtn .chev{transition:transform .15s}
.udrop.open .ubtn .chev{transform:rotate(180deg)}
.ubtn:focus-visible,.nbtn:focus-visible,.um-item:focus-visible,.um-logout:focus-visible,.np-tab:focus-visible,.np-link:focus-visible,.np-link-row:focus-visible,.seg-btn:focus-visible,.fchip button:focus-visible,.qchip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.5)}
.avatar.big{width:44px;height:44px;font-size:15px}
.umenu,.npanel{position:absolute;right:0;top:calc(100% + 10px);z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-float);animation:fade .14s ease;overflow:hidden}
.umenu[hidden],.npanel[hidden]{display:none}
.umenu{width:290px}
.um-head{display:flex;gap:12px;align-items:center;padding:16px 16px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.um-id{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.um-id b{font-size:14px;font-weight:700;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-id small{font-size:12px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-list{padding:6px}
.um-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 10px;border:0;background:none;border-radius:10px;font:600 13px inherit;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left}
.um-item:hover{background:var(--surface-3)}
.um-item.current{background:var(--soft-red);color:var(--red-text)}
.um-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface-3);color:var(--ink2);flex-shrink:0}
.um-ic .ic{width:16px;height:16px}
.um-go{margin-left:auto;color:var(--muted);display:inline-flex}
.um-go .ic{width:14px;height:14px}
.um-item .ic-sun,.um-theme-light{display:none}
html[data-theme="dark"] .um-item .ic-sun{display:block}
html[data-theme="dark"] .um-item .ic-moon,html[data-theme="dark"] .um-theme-dark{display:none}
html[data-theme="dark"] .um-theme-light{display:inline}
.um-foot{padding:8px 6px 6px;border-top:1px solid var(--line);margin-top:2px}
.um-logout{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px;border:1px solid var(--danger-line);border-radius:10px;background:var(--surface);
  color:var(--red-text);font:700 13px inherit;font-family:inherit;cursor:pointer}
.um-logout:hover{background:var(--soft-red);border-color:var(--brand)}
.um-logout .ic{width:16px;height:16px}

.nbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--field);border-radius:50%;background:var(--surface);color:var(--ink2);
  cursor:pointer;box-shadow:var(--sh);padding:0;transition:border-color var(--ease),color var(--ease)}
.nbtn:hover,.ndrop.open .nbtn{border-color:var(--brand);color:var(--brand)}
.nbtn .ic{width:19px;height:19px}
.nbadge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:9999px;background:#dc2626;color:#fff;font-size:10.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--surface)}
.nbadge[hidden]{display:none}
.npanel{width:380px}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.np-head h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.np-link{border:0;background:none;font:600 12px inherit;font-family:inherit;color:var(--red-text);cursor:pointer;padding:6px 8px;border-radius:8px}
.np-link:hover:not(:disabled){background:var(--soft-red)}
.np-link:disabled{color:var(--muted);cursor:default}
.np-tabs{display:flex;gap:6px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.np-tab{border:0;background:none;font:600 12.5px inherit;font-family:inherit;color:var(--muted);padding:6px 12px;border-radius:9999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.np-tab:hover{background:var(--surface-3)}
.np-tab.active{background:var(--soft-red);color:var(--red-text)}
.np-count{font-size:10.5px;background:var(--surface-3);border-radius:9999px;padding:1px 7px;color:var(--ink2)}
.np-list{list-style:none;max-height:min(56vh,380px);overflow-y:auto}
.np-item[hidden]{display:none}
.np-item{border-bottom:1px solid var(--row-line)}
.np-link-row{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;position:relative;cursor:default}
a.np-link-row{cursor:pointer}
.np-item:hover{background:var(--hover)}
.np-item.unread{background:var(--soft-red)}
.np-ic{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink2)}
.np-ic .ic{width:16px;height:16px}
.np-item.success .np-ic{background:#f0fdf4;color:#15803d}
.np-item.warning .np-ic{background:#fffbeb;color:#b45309}
.np-item.error .np-ic{background:#fee2e2;color:#b91c1c}
html[data-theme="dark"] .np-item.success .np-ic{background:rgba(34,197,94,.16);color:#4ade80}
html[data-theme="dark"] .np-item.warning .np-ic{background:rgba(245,158,11,.16);color:#fbbf24}
html[data-theme="dark"] .np-item.error .np-ic{background:rgba(220,38,38,.2);color:#fca5a5}
.np-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.np-body b{font-size:13px;font-weight:700}
.np-body span{font-size:12.5px;color:var(--ink2);line-height:1.4}
.np-body small{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.np-dot{display:none;width:9px;height:9px;border-radius:50%;background:#dc2626;flex-shrink:0;margin-top:6px}
.np-item.unread .np-dot{display:block}
.np-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 24px}
.np-empty[hidden]{display:none}
.np-empty b{font-size:14px}
.np-empty span:not(.empty-ic){font-size:12.5px;color:var(--muted);line-height:1.5}
.np-foot{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:11.5px;color:var(--muted);font-weight:500;text-align:center}

/* ================= STATUS BADGES (colour + icon, never colour alone) ================= */
.badge::before{content:"";flex-shrink:0;width:12px;height:12px;background:currentColor;margin-left:-2px;
  -webkit-mask:var(--bi) center/contain no-repeat;mask:var(--bi) center/contain no-repeat}
.b-green{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.b-amber{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 19.5h18L12 4Z'/%3E%3Cpath d='M12 10.5v4M12 17.4v.01'/%3E%3C/svg%3E")}
.b-red,.b-teal{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E")}
.b-grey,.b-blue{--bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.b-grey{color:#475569}
.um-id .badge::before{display:none}

/* ================= EMPTY STATES ================= */
.empty{display:flex;flex-direction:column;align-items:center;gap:6px}
td.empty{display:table-cell}
.empty p{max-width:420px;line-height:1.55;font-weight:500}
.empty-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-3);color:var(--muted);margin-bottom:6px}
.empty-ic svg,.empty-ic .ic{width:30px;height:30px}
.empty-cta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ================= FILTER CHIPS + QUICK RANGES ================= */
.quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.field + .quick,form:not(.filters) > .quick{padding:0;background:none;border:0;margin:-4px 0 16px}
.qchip{border:1px solid var(--field);background:var(--surface);color:var(--ink2);font:600 12px inherit;font-family:inherit;padding:6px 12px;border-radius:9999px;cursor:pointer;transition:border-color var(--ease),color var(--ease),background-color var(--ease)}
.qchip:hover{border-color:var(--brand);color:var(--red-text);background:var(--soft-red)}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line)}
.fchip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:9999px;background:var(--soft-red);border:1px solid var(--danger-line);font-size:12px;color:var(--red-text)}
.fchip small{font-size:12px;font-weight:600;opacity:.85}
.fchip b{font-weight:700}
.fchip button{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;padding:0}
.fchip button:hover{background:rgba(220,38,38,.18)}
.fchip button svg{width:12px;height:12px}
.fclear{font-size:12px;font-weight:600;color:var(--muted);padding:4px 8px;border-radius:8px}
.fclear:hover{color:var(--ink);background:var(--surface-3)}

/* ================= LOADING ================= */
.btn.loading,.lbtn.loading,.um-logout.loading{position:relative;color:transparent !important}
.btn.loading::after,.lbtn.loading::after,.um-logout.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.secondary.loading::after,.um-logout.loading::after{border-color:rgba(100,116,139,.35);border-top-color:var(--ink2)}
@keyframes spin{to{transform:rotate(360deg)}}
.navbar-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10002;background:#dc2626;transform:scaleX(0);transform-origin:left;pointer-events:none;opacity:0}
.navbar-progress.run{opacity:1;animation:navprog 9s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes navprog{from{transform:scaleX(.05)}to{transform:scaleX(.92)}}
/* while the next page of a list loads, the rows turn into shimmering placeholders */
.is-loading tbody td{position:relative;color:transparent !important;pointer-events:none}
.is-loading tbody td *{visibility:hidden}
.is-loading tbody td::after{content:"";position:absolute;left:16px;right:16px;top:50%;height:12px;margin-top:-6px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--line) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ================= ACCOUNT PAGE ================= */
.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.profile-top .avatar{width:56px;height:56px;font-size:18px}
.profile-top b{display:block;font-size:16px}
.profile-top small{color:var(--muted);font-weight:500;font-size:13px}
.plist{list-style:none;display:grid;gap:0}
.plist li{padding:11px 0;border-bottom:1px solid var(--row-line);display:flex;flex-direction:column;gap:2px}
.plist li:last-child{border-bottom:0}
.plist small{color:var(--muted);font-weight:500}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-3);flex-wrap:wrap}
.seg-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:9px 16px;border-radius:9px;font:600 13px inherit;font-family:inherit;color:var(--ink2);cursor:pointer;min-height:40px}
.seg-btn.on{background:var(--surface);color:var(--red-text);box-shadow:var(--sh)}
.seg-btn .ic{width:16px;height:16px}

/* toast action link */
.tst-act{align-self:flex-start;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--red-text);text-decoration:underline;text-underline-offset:2px}
.tst-act[hidden]{display:none}

/* ================= ACCESSIBILITY ================= */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid transparent}
a.link:focus-visible,.crumbs a:focus-visible,.fclear:focus-visible,.errshort a:focus-visible,.ch .right:focus-visible,.tst-act:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.45);border-radius:4px}
.inp:focus-visible{outline:none}

/* ================= DESIGN SYSTEM: page header, data table, toolbar, pager, modal ================= */
/* page header action bar: sits above the first card, buttons right aligned */
.pagebar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.pagebar:empty{display:none}
.pagebar .btn .ic{width:1.1em;height:1.1em}

/* one card holds a list: header, toolbar, table, pager */
.card.pad0 > .ch{padding:18px 22px 14px;margin:0;border-bottom:1px solid var(--line)}
.ch .count{margin-left:2px}

/* table standard: header cells line up with the data below them */
.tscroll{overflow-x:auto;border-top:0}
.tscroll table{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0}
.tscroll th{position:sticky;top:0;z-index:1;text-align:left;vertical-align:middle;padding:11px 16px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tscroll td{padding:12px 16px;vertical-align:middle;font-size:13px;border-bottom:1px solid var(--row-line);overflow-wrap:anywhere}
.tscroll th.r,.tscroll td.num{text-align:right}
.tscroll th.c,.tscroll td.c{text-align:center}
.tscroll td.nowrap,.tscroll td.num{white-space:nowrap}
.tscroll td.clip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.tscroll td.act,.tscroll th.act{text-align:right;white-space:nowrap;width:1%}
.tscroll tbody tr:last-child td{border-bottom:0}
.tscroll td .sub,.tscroll td small.sub{display:block;color:var(--muted);font-size:11.5px;font-weight:500;margin-top:2px}
.tscroll .minibar{min-width:90px}
.tscroll td.prog{min-width:130px}
.tscroll td.wide{min-width:150px}
.tscroll td:first-child{min-width:150px}
.tscroll td:first-child b{overflow-wrap:break-word}
.rowactions{justify-content:flex-end}

/* toolbar: search, filters and actions on one compact row */
.filters{gap:10px 12px;padding:12px 22px;align-items:flex-end}
.filters .field{margin:0;min-width:130px;flex:0 1 170px}
.filters .field.f-search{flex:1 1 240px;max-width:340px}
.filters .flabel{font-size:11px;margin-bottom:5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.filters .inp{height:36px;font-size:13px}
.filters .factions{margin-left:auto}
.filters .btn{min-height:36px}

/* pager: range, rows per page, page numbers */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 22px;border-top:1px solid var(--line);background:var(--surface)}
.pager .pg-range{margin-right:auto;font-size:12.5px;color:var(--muted);font-weight:500}
.pager .pg-range b{color:var(--ink)}
.pg-size{display:flex;align-items:center;margin:0}
.pg-size label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.pg-size .inp{width:72px;height:32px;padding:0 26px 0 10px;font-size:12.5px;background-position:right 8px center;background-size:14px}
.pg-nav{display:flex;align-items:center;gap:4px}
.pg-num{min-width:32px;height:32px;padding:0 6px;display:inline-grid;place-items:center;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink2);border:1px solid transparent}
a.pg-num:hover{background:var(--surface-3);border-color:var(--line)}
.pg-num.on{background:#dc2626;color:#fff}
.pg-gap{padding:0 4px;color:var(--muted)}
.pager .btn.small{min-height:32px;padding:0 12px}
.pager .is-off{opacity:.45;pointer-events:none}

/* modal: forms open in a dialog; clicking the dark backdrop never closes them */
dialog.modal{margin:auto;inset:0;border:0;padding:0;border-radius:16px;width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 32px);color:var(--ink);background:var(--surface);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45),0 0 0 1px var(--line);overflow:auto;overscroll-behavior:contain}
dialog.modal::backdrop{background:rgba(15,23,42,.55)}
dialog.modal.sm{width:min(480px,calc(100vw - 24px))}
dialog.modal[open]{animation:mdin .16s ease}
@keyframes mdin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.md-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.md-head h2{font-size:16px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0}
.md-head .md-sub{font-size:12px;color:var(--muted);font-weight:500;display:block;margin-top:2px}
.md-x{width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;flex-shrink:0;padding:0}
.md-x:hover{background:var(--surface-3);color:var(--ink)}
.md-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.4)}
.md-x .ic{width:18px;height:18px}
.md-body{padding:20px 22px}
dialog.modal > form.card{border:0;box-shadow:none;border-radius:0;margin:0 !important;background:none}
dialog.modal > form.card > .ch{display:none}
dialog.modal > form.card > :not(.ch){margin-left:22px;margin-right:22px}
dialog.modal > form.card > :first-child:not(.ch),dialog.modal > form.card > .ch + *{margin-top:20px}
dialog.modal > form.card > .formbtns{position:sticky;bottom:0;margin:12px 0 0;padding:14px 22px;background:var(--surface-2);border-top:1px solid var(--line);border-radius:0;z-index:4;justify-content:flex-end}
dialog.modal .grid.g3,dialog.modal .grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.vlist{list-style:none;display:grid;gap:0;margin:0;padding:0}
.vlist li{padding:10px 2px;border-bottom:1px solid var(--row-line);font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.vlist li:last-child{border-bottom:0}
.vsearch{margin-bottom:12px}
.vcount{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}

/* a short preview of a long relationship: "A, B and 14 more  [View all]" */
.preview{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:220px}
.preview .pv-n{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:9999px;background:var(--surface-3);font-size:11.5px;font-weight:700;color:var(--ink2)}
.preview .pv-names{font-size:12.5px;color:var(--ink2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;flex:0 1 auto}
.linkbtn{border:0;background:none;padding:0;font:600 12.5px inherit;font-family:inherit;color:var(--red-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.4);border-radius:4px}

/* dashboard: attention card scrolls on its own, area progress is a grid */
.att-card{display:flex;flex-direction:column;max-height:420px;padding:0}
.att-card > .ch{margin:0;padding:18px 22px 14px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--surface)}
.att-list{overflow-y:auto;padding:14px 18px;flex:1;min-height:0;overscroll-behavior:contain;display:grid;gap:10px;align-content:start}
.att-list .alert{margin:0}
.att-list .alert > div:nth-child(2){min-width:0}
.att-list .alert p{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.att-more{font-size:12px;color:var(--muted);font-weight:600;text-align:center;padding:4px 0 2px}
.areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;padding:18px 22px}
.areacard{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color var(--ease),box-shadow var(--ease)}
.areacard:hover{border-color:var(--field);box-shadow:var(--sh)}
.ac-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ac-top b{display:block;font-size:13.5px;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.ac-top small{display:block;color:var(--muted);font-size:11.5px;font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.ac-bars{display:grid;gap:8px}
.ac-bar{display:grid;grid-template-columns:62px 1fr 44px;align-items:center;gap:10px;font-size:11.5px;font-weight:600;color:var(--muted)}
.ac-bar span:last-child{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-foot{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);font-weight:500;padding-top:10px;border-top:1px solid var(--row-line)}
.ac-foot b{color:var(--ink);font-weight:700}
.ac-more{padding:0 22px 18px}

/* site notes: one clear row per note */
.notes{display:grid;gap:0}
.snote{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;padding:16px 22px;border-bottom:1px solid var(--row-line)}
.snote:last-child{border-bottom:0}
.note-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink2)}
.note-ic .ic{width:18px;height:18px}
.snote.incident .note-ic{background:var(--soft-red);color:var(--red-text)}
.snote.instruction .note-ic{background:#fffbeb;color:#b45309}
html[data-theme="dark"] .snote.instruction .note-ic{background:rgba(245,158,11,.16);color:#fbbf24}
.note-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.note-text{font-size:13.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.note-text.open{-webkit-line-clamp:unset;display:block}
.note-meta{text-align:right;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.note-meta b{display:block;color:var(--ink2);font-weight:700}
.snote{transition:background .15s}
.snote:hover{background:var(--surface-3)}
.note-body{min-width:0}
.note-when{font-size:12px;color:var(--muted);font-weight:600}
.note-by{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:600;color:var(--ink2)}
.note-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink2);font-size:11px;font-weight:700;border:1px solid var(--line)}
.snote.feedback .note-ic{background:#ecfdf5;color:#047857}
html[data-theme="dark"] .snote.feedback .note-ic{background:rgba(16,185,129,.16);color:#34d399}
.fcount{text-align:right;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:6px}
.fcount.warn{color:var(--red-text)}

/* reports: three steps, each clearly its own area */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.rep{display:flex;flex-direction:column;gap:14px}
.rep h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:10px}
.rep .rep-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:-6px}
.rep .rep-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.rep .rep-filters .field{margin:0}
.rep .rep-filters .field.wide{grid-column:1 / -1}
.rep .rep-actions{display:flex;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.rep .rep-actions .btn{flex:1}

/* ================= RESPONSIVE ================= */
/* grid and flex children may shrink below their content width: stops date inputs and long text pushing the page wide */
.grid > *,.field,.card{min-width:0}
.inp{min-width:0;max-width:100%}
.tscroll{-webkit-overflow-scrolling:touch}
.tscroll table{min-width:560px}
.ch{flex-wrap:wrap}
#materialRows td:first-child .inp{min-width:180px}

/* very wide displays: keep line length readable, use the room for galleries */
@media(min-width:1800px){
  .content{max-width:1680px;width:100%;margin:0 auto}
}
@media(min-width:1800px){
  .photogrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

@media(max-width:1250px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g21{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .ubtn .who{display:none}
  .ubtn{padding:3px 8px 3px 3px}
}

/* tablet and below: sidebar becomes a slide-in menu */
@media(max-width:1024px){
  .sidebar{width:280px;max-width:86vw;transform:translateX(-102%);transition:transform .22s ease;z-index:70;
    box-shadow:none;height:100vh;height:100dvh}
  body.nav-open .sidebar{transform:none;box-shadow:var(--sh-float)}
  .scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(23,23,23,.45);
    opacity:0;pointer-events:none;transition:opacity .22s}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .main{margin-left:0}
  .menu-btn,.menu-close{display:inline-flex}
  .topbar{padding:0 18px}
  .content{padding:20px 18px 36px}
  .nav,.psel,.logout{min-height:44px}
  .psel .pname{max-width:180px}
}

@media(max-width:900px){
  .g2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero-side{border-left:0;border-top:1px solid var(--line)}
}

/* phones */
@media(max-width:760px){
  .permtable thead{display:none}
  .permtable tr{display:block;border-bottom:1px solid var(--line);padding:0 0 4px 0}
  .permtable td:first-child{display:block;min-width:0;padding:12px 14px 4px;border:0}
  .permtable td.pc{display:inline-block;width:auto;padding:4px 14px 10px 14px;border:0;text-align:left}
  .permtable .pl{display:inline}
  .pcell .badge{position:static;margin-left:0}
  .permtable .pnone{display:none}
  body{font-size:14px}
  .topbar{height:auto;min-height:60px;padding:10px 14px;gap:10px;flex-wrap:nowrap}
  .tb-eyebrow,.tb-sub{display:none}
  .tb-title{font-size:16px}
  .tb-title-wrap{min-width:0}
  .tb-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .psel{padding:6px 10px;gap:8px;min-width:0}
  .psel .plbl{display:none}
  .psel .pname{max-width:96px;margin-top:0}
  .pico{width:26px;height:26px}
  .pdrop{position:static}
  /* backdrop-filter makes the top bar the containing block for fixed children */
  .pmenu{position:fixed;left:14px;right:14px;top:calc(100% + 6px);width:auto;max-width:none}
  .avatar{width:36px;height:36px;font-size:12px}
  .logout{padding:0;width:42px;height:42px;justify-content:center}
  .logout span{display:none}
  .logout .ic{width:18px;height:18px}
  .content{padding:16px 14px 30px}
  .card{padding:16px 16px}
  .card.pad0{padding:0}
  .ch{margin-bottom:14px}
  .ch.pad,.card.pad0 > .ch{padding:16px 16px 12px !important}
  th,td{padding:10px 12px}
  .row{flex-wrap:wrap;gap:2px 12px}
  .row .rl{width:100%}
  .row .rr{margin-left:0}
  .kpi{padding:16px 18px}
  .kpi .kv{font-size:24px}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px}
  .filters .field{max-width:none;min-width:0}
  .factions{grid-column:1 / -1}
  .factions .btn{flex:1}
  .banner{padding:14px 16px}
  .hero-main{padding:20px 18px 18px}
  .hero-side{padding:20px 18px}
  .hero-num .big{font-size:38px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:16px 0}
  .hero-stats > div:nth-child(odd){padding-left:0;border-left:0}
  .hero-stats > div:nth-child(even){padding-left:18px}
  .hero-foot{flex-direction:column}
  .inp,select.inp,textarea.inp{font-size:16px}
  .btn,.tab-btn,.subtabs a,select.inp,input.inp{min-height:44px}
  .nav{min-height:44px}
  .tabs{overflow-x:auto;flex-wrap:nowrap !important;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tab-btn{flex-shrink:0}
  .lcard{padding:28px 22px;border-radius:12px}
  .errcode{font-size:56px;letter-spacing:-3px}
  .errart{width:60px;height:60px;border-radius:12px}
  .errtitle{font-size:19px}
}

/* dispatch material rows: one stacked card per material on phones */
@media(max-width:760px){
  .tscroll .mtable{min-width:0}
  .mtable thead{display:none}
  .mtable,.mtable tbody{display:block}
  .mtable tr.mrow{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .mtable tr.mrow:last-child{border-bottom:0}
  .mtable td{display:block;padding:0;border:0}
  .mtable td:first-child,.mtable td:last-child{grid-column:1 / -1}
  .mtable .inp{max-width:none !important;width:100%}
  #materialRows td:first-child .inp{min-width:0}
}

/* phones: tables become cards, panels become sheets under the top bar, menus stay one-hand friendly */
@media(max-width:760px){
  .tscroll table.rcards{min-width:0}
  table.rcards,table.rcards tbody{display:block}
  table.rcards thead{display:none}
  table.rcards tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
  table.rcards tr:last-child{border-bottom:0}
  table.rcards td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;border:0;text-align:right;min-width:0}
  table.rcards td::before{content:attr(data-label);flex-shrink:0;max-width:44%;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  table.rcards td:not([data-label])::before{display:none}
  table.rcards td:first-child{display:block;text-align:left;font-size:14px;font-weight:700;padding-bottom:8px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
  table.rcards td:first-child::before{display:none}
  table.rcards td .tdv{min-width:0;text-align:right;overflow-wrap:anywhere}
  table.rcards td:first-child .tdv{text-align:left}
  table.rcards td .minibar{min-width:90px}
  table.rcards td.num{text-align:right}
  table.rcards td.span-all{display:block;text-align:center}
  table.rcards td .rowactions,table.rcards td form{justify-content:flex-end}
  table.rcards tbody tr:hover{background:none}
  .is-loading tbody td::after{left:0;right:0}

  .udrop,.ndrop{position:static}
  .umenu,.npanel{position:fixed;left:12px;right:12px;top:calc(100% + 6px);width:auto;max-height:calc(100vh - 84px);overflow-y:auto}
  .np-list{max-height:calc(100vh - 290px)}
  .nbtn{width:42px;height:42px}
  .ubtn{padding:3px;gap:0;border-radius:50%}
  .ubtn .chev{display:none}
  .ubtn .avatar{display:grid;width:36px;height:36px}
  .um-item,.np-tab,.seg-btn,.qchip,.um-logout{min-height:44px}
  .quick{padding:0 16px 12px}
  .chips{padding:10px 16px}
  .fchip button{width:30px;height:30px}
  .seg{display:flex}
  .seg-btn{flex:1;justify-content:center}
  .empty-ic{width:56px;height:56px}
  .navbar-progress{height:4px}
}
@media(max-width:560px){
  .topbar{gap:8px}
  .psel .chev{display:none}
  .psel .pname{max-width:72px}
}

@media(max-width:760px){
  .filters{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px}
  .filters .field,.filters .field.f-search{max-width:none;min-width:0;flex:none}
  .filters .field.f-search{grid-column:1 / -1}
  .filters .factions{grid-column:1 / -1;margin-left:0}
  .pager{padding:12px 16px;gap:10px 14px}
  .pager .pg-range{flex:1 1 100%}
  .pager .pg-txt{display:none}
  .pg-nav{flex-wrap:wrap}
  .snote{grid-template-columns:36px minmax(0,1fr);padding:14px 16px}
  .note-meta{grid-column:2;text-align:left;white-space:normal}
  .note-ic{width:36px;height:36px}
  .areagrid{padding:14px 16px}
  .att-card{max-height:380px}
  dialog.modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:14px}
  .md-head{padding:14px 16px}
  dialog.modal > form.card > :not(.ch){margin-left:16px;margin-right:16px}
  dialog.modal > form.card > .formbtns{padding:12px 16px}
  .rep .rep-filters{grid-template-columns:1fr}
  .tscroll td.clip{max-width:200px}
  .pagebar .btn{flex:1}
}

/* small phones */
@media(max-width:560px){
  .tb-spacer{display:none}
  .tb-title-wrap{flex:1 1 0}
  .psel{flex:0 1 auto}
  .psel .pname{max-width:100px}
  .pico{display:none}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .photogrid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:380px){
  body{font-size:13.5px}
  .psel .pname{max-width:64px}
  .pico{display:none}
  .content{padding:14px 12px 26px}
  .lbrand h1{font-size:20px}
}

/* short landscape screens: drawer content scrolls, brand stays compact */
@media(max-height:520px){
  .sb-brand{padding:12px 16px}
  .sb-foot{display:none}
}

/* touch screens have no hover: avoid stuck hover effects */
@media(hover:none){
  .photo:hover{transform:none;box-shadow:none}
  .alert:hover{transform:none;box-shadow:none}
  .btn.primary:hover,.lbtn:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}


/* ================= DARK THEME ================= */
/* One switch: html[data-theme="dark"]. portal.js sets it from the saved choice or the system setting. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b111b;--card:#121a27;--surface:#121a27;--surface-2:#0e1520;--surface-3:#1a2334;--input-bg:#0e1520;
  --line:#243044;--field:#334155;--inp-line:#334155;--field-hover:#475569;--edge-hover:#64748b;--row-line:#1c2638;
  --ink:#e6eaf0;--ink2:#c3ccd8;--muted:#8b98ab;--faint:#8493a8;--bar-dark:#94a3b8;--brand:#ef4444;
  --soft-red:rgba(220,38,38,.14);--brandL:rgba(220,38,38,.22);--red-text:#f87171;--danger-line:rgba(248,113,113,.35);
  --hover:rgba(255,255,255,.035);--hl:rgba(255,255,255,.05);--topbar-bg:rgba(11,17,27,.85);
  --login-from:#0b111b;--login-to:#0f1826;
  --sh:0 1px 2px rgba(0,0,0,.45);
  --sh-float:0 12px 28px -4px rgba(0,0,0,.65),0 4px 8px -2px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .photo{background:linear-gradient(135deg,#334155,#1e293b)}
html[data-theme="dark"] .sb-foot .dot{background:#22c55e}
/* status badges: dark tints with readable text */
html[data-theme="dark"] .b-grey{background:rgba(148,163,184,.14);color:#cbd5e1;border-color:rgba(148,163,184,.28)}
html[data-theme="dark"] .b-green{background:rgba(34,197,94,.14);color:#4ade80;border-color:rgba(34,197,94,.32)}
html[data-theme="dark"] .b-amber{background:rgba(245,158,11,.14);color:#fbbf24;border-color:rgba(245,158,11,.35)}
html[data-theme="dark"] .b-red,html[data-theme="dark"] .b-teal{background:rgba(220,38,38,.18);color:#fca5a5;border-color:rgba(248,113,113,.4)}
html[data-theme="dark"] .b-blue{background:rgba(148,163,184,.12);color:#cbd5e1;border-color:rgba(148,163,184,.3)}
html[data-theme="dark"] .warnbox{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);border-left-color:#f59e0b;color:#fcd34d}
html[data-theme="dark"] .tchip{border-color:rgba(248,113,113,.4)}
html[data-theme="dark"] .errcard-500 .errart{background:#2b3547;color:#fff}
html[data-theme="dark"] .pico,html[data-theme="dark"] .errart{background:var(--soft-red)}
html[data-theme="dark"] .subtabs a.active,html[data-theme="dark"] .nav.active{color:#fff}
html[data-theme="dark"] .legend .k.planned{border-top-color:var(--faint)}
html[data-theme="dark"] .ch .right,html[data-theme="dark"] .tab-btn.active{color:#f87171}
html[data-theme="dark"] .tab-btn.active{border-bottom-color:#f87171}
html[data-theme="dark"] .subtabs a:hover:not(.active){color:#f87171;border-color:#f87171}
html[data-theme="dark"] .errshort a:hover{color:#f87171}
html[data-theme="dark"] .scrim{background:rgba(0,0,0,.6)}
html[data-theme="dark"] ::selection{background:rgba(220,38,38,.45);color:#fff}
html[data-theme="dark"] .sb-nav::-webkit-scrollbar-thumb{background:var(--field)}

/* theme switch button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--ink2);cursor:pointer;padding:0;
  box-shadow:var(--sh);transition:border-color var(--ease),color var(--ease),background-color var(--ease)}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.25)}
.theme-toggle .ic{width:18px;height:18px}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}
.theme-float{position:fixed;top:14px;right:14px;z-index:210}
@media(max-width:1024px){.theme-toggle{width:42px;height:42px}}

/* outdoor and glare: honour the system's "more contrast" setting */
@media(prefers-contrast:more){
  :root{--muted:#3f4a5a;--faint:#4b4b4b;--line:#94a3b8;--inp-line:#64748b}
  html[data-theme="dark"]{--muted:#c3ccd8;--faint:#b0bccb;--line:#64748b;--inp-line:#94a3b8}
  .badge{border-width:2px}
}
.finder{display:flex;gap:8px;margin-top:8px}
.finder .inp{height:36px;font-size:13px}
.rep-steps{display:flex;gap:8px 22px;flex-wrap:wrap;list-style:none;margin:0 0 18px;padding:0;font-size:12.5px;font-weight:600;color:var(--ink2)}
.rep-steps li{display:flex;align-items:center;gap:8px}
.rep-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft-red);color:var(--red-text);font-size:11.5px}
.rep-steps span{color:var(--muted);font-weight:500}
.rep-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--soft-red);color:var(--brand);flex-shrink:0}
.rep-ic .ic{width:19px;height:19px}
.rep h3::before{display:none}
fieldset.fmt{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
fieldset.fmt legend{width:100%;padding:0}
.fmt-opt{position:relative;flex:1 1 120px}
.fmt-opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.fmt-opt span{display:flex;align-items:center;justify-content:center;height:38px;border:1.5px solid var(--inp-line);border-radius:10px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--input-bg);transition:border-color var(--ease),background-color var(--ease)}
.fmt-opt input:checked + span{border-color:var(--brand);background:var(--soft-red);color:var(--red-text)}
.fmt-opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(220,38,38,.35)}
.fmt-opt:hover span{border-color:var(--field-hover)}
.rep .quick{padding:0;background:none;border:0;margin:-4px 0 0}
.rep .rep-filters .quick{grid-column:1 / -1;margin:0}

/* muster marks: P green, A red */
.mk{text-align:center}
.mk-p{color:#1b7f3b;font-weight:800}
.mk-a{color:#c62828;font-weight:800}

/* dashboard: total scope, then planned, then actual */
.scopebars{display:grid;gap:8px;margin:16px 0 4px}
.scopebars .sb{display:grid;grid-template-columns:100px 1fr minmax(120px,auto);align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.scopebars .sb b{color:var(--ink);font-weight:700;text-align:right;white-space:nowrap}
.scopebars .minibar{height:8px}
.scopebars .minibar i.scope{background:var(--edge-hover);opacity:.45}
.plan-hint{margin:10px 0 0;font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.mini-kpis{gap:18px 16px}
.mini-kpis .kv{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mini-kpis .ks{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-top:4px}

/* ================= CARD HIERARCHY =================
   Red now only means "look here". Titles and dots are neutral, state is shown by a left stripe.
   States are set by the data (s-ok, s-warn, s-bad), never by decoration. */
html[data-theme="dark"]{--st:#64748b;--st-ok:#22c55e;--st-warn:#f59e0b;--st-bad:#ef4444}

.ch h3::before,.section-title::before{background:var(--bar-dark)}
.card.attn .ch h3::before{background:var(--brand)}

.kpi{box-shadow:var(--sh),inset 3px 0 0 var(--st)}
.kpi:hover{box-shadow:var(--sh-float),inset 3px 0 0 var(--st)}
.kpi.s-ok{--st:var(--st-ok)}
.kpi.s-warn{--st:var(--st-warn)}
.kpi.s-bad{--st:var(--st-bad)}
.kpi .kl::before,.kpi.ok .kl::before,.kpi.warn .kl::before{background:var(--st)}
.kpi::after,.kpi.ok::after,.kpi.warn::after{background:var(--surface-3)}
.kpi.s-bad::after{background:var(--soft-red)}
.kpi.s-bad .kt{background:var(--soft-red);color:var(--red-text);border-color:var(--danger-line)}
a.kpi{cursor:pointer}
a.kpi .ks::after{content:"\2192";float:right;color:var(--muted);transition:transform var(--ease),color var(--ease)}
a.kpi:hover .ks::after{color:var(--brand);transform:translateX(3px)}
a.kpi:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(220,38,38,.35)}

.card.quiet{background:var(--surface-2);box-shadow:none}
.card.attn{border-top:3px solid var(--brand)}

.group-title{display:flex;align-items:center;gap:12px;margin:var(--sp-6) 0 var(--sp-3);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.group-title:first-child{margin-top:0}
.block{margin-bottom:var(--sp-5)}
.block-top{margin-top:var(--sp-5)}

/* teal used to look exactly like red; it is now a neutral outline badge */
.b-teal,html[data-theme="dark"] .b-teal{background:transparent;color:var(--ink2);border-color:var(--field)}

/* table rows that need a look get the same left stripe as KPI cards (class on the first cell) */
tbody td.st-bad{box-shadow:inset 3px 0 0 var(--st-bad)}
tbody td.st-warn{box-shadow:inset 3px 0 0 var(--st-warn)}
td.num,th.r{font-variant-numeric:tabular-nums}
tbody tr:hover > td{background:var(--hover)}

/* ================= LONG FORMS =================
   Fields grouped under headings, heading on the left and fields on the right.
   The save bar stays at the bottom while a long form scrolls. */
.fsec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-4) var(--sp-5);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.fsec-head h4{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.fsec-head p{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px;font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4);align-content:start}
.fcell{min-width:0}
.fcell.wide{grid-column:1 / -1}
.fsec .tscroll,.fsec .mtable{margin-bottom:0}
.mtable td:has(> [data-remove]){width:1%;white-space:nowrap}
form.card > .formbtns{position:sticky;bottom:0;z-index:4;box-shadow:0 -10px 14px -12px rgba(0,0,0,.2)}
dialog.modal .fsec{grid-template-columns:1fr;padding:var(--sp-4) 0}
@media(max-width:900px){.fsec{grid-template-columns:1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* an optional section folded away until it is needed */
details.fold{display:block}
details.fold > summary{list-style:none;cursor:pointer;position:relative;padding-right:28px;border-radius:6px}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"";position:absolute;right:6px;top:5px;width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--ease)}
details.fold[open] > summary::after{transform:rotate(-135deg)}
details.fold > summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.3)}
details.fold > summary h4 span{color:var(--muted);font-weight:500}
details.fold[open] > .fgrid{margin-top:var(--sp-4)}

.errlink{margin-left:10px;text-decoration:underline;font-weight:600}

/* ---------- account: My profile and Settings ---------- */
.card.acct-hero{padding:0;overflow:hidden;margin-bottom:20px}
.acct-banner{height:84px;background:linear-gradient(120deg,#7f1d1d 0%,#dc2626 55%,#f97316 100%)}
.acct-hero-body{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;padding:0 28px 24px}
.acct-hero .acct-avatar{width:88px;height:88px;font-size:30px;margin-top:-44px;border:4px solid var(--surface)}
.acct-id{flex:1 1 240px;min-width:0;padding-top:12px}
.acct-id h2{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.acct-id p{font-size:13.5px;color:var(--muted);font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.acct-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.acct-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:16px}
.acct-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.acct-stats > div{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.acct-stats span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.acct-stats b{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-top:7px;overflow-wrap:anywhere}
.acct-note{display:flex;align-items:center;gap:8px;margin:-6px 0 20px;padding:11px 14px;border-radius:10px;background:var(--surface-3);font-size:12.5px;font-weight:500;color:var(--ink2)}
.acct-note .ic{width:15px;height:15px;flex-shrink:0}
.acct-projects{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:0;padding:4px 0 0}
.acct-projects li{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-width:0}
.acct-projects b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.acct-projects small{color:var(--muted);font-weight:500;font-size:12.5px;overflow-wrap:anywhere}
.acct-pi{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--red-text);font-size:15px;font-weight:800;border:1px solid var(--line)}
.acct-sec{display:grid;gap:18px;margin-bottom:20px}
.acct-sec-head h3{font-size:15px;font-weight:700;color:var(--ink)}
.acct-sec-head p{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.5}
.acct-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.theme-opts{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:14px}
.theme-opt{display:grid;gap:10px;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink2);font:600 13px inherit;font-family:inherit;cursor:pointer;text-align:left}
.theme-opt:hover{border-color:var(--muted)}
.theme-opt.on{border-color:var(--brand);color:var(--ink)}
.theme-opt:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.4)}
.theme-prev{display:grid;grid-template-columns:22px 1fr;grid-template-rows:10px 1fr 1fr;gap:5px;height:64px;padding:8px;border-radius:9px;border:1px solid rgba(128,128,128,.25)}
.theme-prev i{border-radius:3px}
.tp-light{background:#f6f7f9}
.tp-light i{background:#fff}
.tp-light i:first-child{background:#e3e6eb}
.tp-dark{background:#0b1220}
.tp-dark i{background:#1c2638}
.tp-dark i:first-child{background:#2a364b}
.tp-system{background:linear-gradient(105deg,#f6f7f9 50%,#0b1220 50%)}
.tp-system i{background:rgba(128,128,128,.45)}
.theme-prev i:first-child{grid-row:1 / 4}
.fmt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fmt-tiles > div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.fmt-tiles span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.fmt-tiles b{display:block;font-size:17px;font-weight:800;color:var(--ink);margin:6px 0 3px}
.fmt-tiles small{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:900px){.fmt-tiles{grid-template-columns:minmax(0,1fr)}.acct-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .acct-actions,.acct-actions .btn{width:100%}
  .acct-hero-body{padding:0 18px 20px}
  .theme-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .acct-row{grid-template-columns:minmax(0,1fr)}
  .acct-row .btn{justify-self:start}
}