:root{--ind:#1d4ed8;--ind-d:#1e3a8a;--ind-l:#e0f2fe;--grad:linear-gradient(135deg,#38bdf8,#1d4ed8);--sh:rgba(29,78,216,.35);--on-p:#fff;--surface:#fff;--ink:#1d2342;--ink2:#2b3157;--mute:#7a809f;--line:#e8ebf5;--icon:#5d6384;--hover:#f1f4fd;--field:#f4f6fc;--page:linear-gradient(135deg,#e9edf8 0%,#efe8f8 55%,#e4f2f8 100%);
--sb-bg:var(--surface);--sb-ink:var(--ink);--sb-icon:var(--icon);--sb-mute:var(--mute);--sb-hover:var(--hover);--sb-line:var(--line);--sb-field:var(--field)}
*{box-sizing:border-box;margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;min-height:100vh;background:var(--page);color:var(--ink)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font-family:inherit}
ul{list-style:none;padding:0}

/* ---------- Horizontal top navbar (replaces the old left sidebar) ---------- */
:root{--nav-h:58px;--nav-font:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
.side,.fly,.tip{font-family:var(--nav-font)}
.side{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:linear-gradient(145deg,color-mix(in srgb,var(--ind) 22%,var(--surface)) 0%,color-mix(in srgb,var(--ind) 8%,var(--surface)) 55%,color-mix(in srgb,var(--ind) 16%,var(--surface)) 100%);color:var(--sb-ink);border-bottom:1px solid var(--sb-line);box-shadow:0 4px 24px rgba(40,50,120,.08);display:flex;flex-direction:row;align-items:center;gap:10px;padding:0 14px;z-index:10}
.themed .side{background:var(--sb-bg)}
:root{--pill-bg:color-mix(in srgb,var(--surface) 72%,transparent)}
.themed{--pill-bg:var(--sb-field)}
.top{order:0;display:flex;align-items:center;flex:none;padding:0}
.logo{height:50px;width:150px;border-radius:10px;display:grid;place-items:center;flex:none;overflow:hidden;padding:2px 6px}
.logo img{display:block;height:auto}
.logo .full{display:block;height:44px;width:100%;object-fit:fill}
.expand{display:none}
.brand{display:none}

.nav{order:1;flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;padding:4px 2px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav>li{flex:none}
.row{padding:0 12px;display:flex;align-items:center;gap:8px;height:38px;margin:0;width:auto;border:0;border-radius:10px;background:none;color:var(--sb-ink);font:500 14px/1 var(--nav-font);text-decoration:none;cursor:pointer;position:relative;white-space:nowrap;transition:background .15s,color .15s;text-align:left}
.row:hover{background:var(--sb-hover)}
.row:focus-visible,.logoutbtn:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
.ic{width:auto;flex:none;display:grid;place-items:center;color:var(--sb-icon);position:relative}
.ic svg{width:18px;height:18px}
.lbl{flex:none;min-width:0}
.chev{margin:0 -2px 0 -3px;width:12px;height:12px;color:var(--sb-mute);transition:transform .25s}
.row[aria-expanded="true"] .chev{transform:rotate(90deg)}
.row.on{background:var(--grad);color:var(--on-p);font-weight:600;box-shadow:0 6px 14px var(--sh)}
.row.on .ic,.row.on .chev{color:var(--on-p)}
.themed .row.on{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.dot{position:absolute;top:-4px;right:-5px;width:8px;height:8px;border-radius:50%;background:#ff8a3d;border:2px solid var(--surface)}

/* inline sub-menus are not used in the horizontal bar (dropdown cards are) */
.subs{display:none}
.gchev{margin-left:auto;width:15px;height:15px;color:var(--sb-mute)}
.fly .gchev{color:var(--mute)}
.fly2{width:236px;padding:8px;max-height:none}
.fly h4{text-transform:uppercase;font-size:12px;letter-spacing:.07em;padding:2px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.subs a.cur,.fly li a.gopen{background:var(--ind-l);color:var(--ind-d)}
.fly li a.gopen svg{color:var(--ind-d)}
.fly li a[data-g].cur{background:none;font-weight:700}
.fly li a.gopen{background:var(--ind-l)}

/* Year / Unit */
.ctx{order:2;display:block;flex:none}
.ctx>div{overflow:visible}
.sel{display:flex;gap:5px;padding:0;border:0}
.sel label{display:flex;flex-direction:column;justify-content:center;height:38px;background:var(--pill-bg);border:1px solid var(--sb-line);border-radius:12px;padding:2px 6px;font-size:9.5px;line-height:1.1;color:var(--sb-mute);font-weight:500;white-space:nowrap}
.sel select{display:block;width:100%;min-width:0;border:0;background:none;font:600 12.5px var(--nav-font);color:var(--sb-ink);padding:1px 0 0;outline:0;cursor:pointer}
.sel select option{color:#1d2342}
.sel select:focus-visible{outline:2px solid var(--ind);outline-offset:2px;border-radius:4px}

/* right-hand cluster: crumb/clock, icon buttons, user, logout */
.foot{order:3;flex:none;display:flex;flex-direction:row;align-items:center;gap:2px;border:0;padding:0}
.crumb{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:12px;color:var(--sb-mute);white-space:nowrap}
.crumb b{color:var(--sb-ink);font-weight:600}
.clock{display:flex;align-items:center;gap:5px;background:var(--pill-bg);color:var(--ink);border:1px solid var(--sb-line);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600}
.themed .clock{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}
.clock svg{width:13px;height:13px}
.foot .row{padding:0;width:36px;justify-content:center;border-radius:50%}
.foot .row .lbl,.foot .row .switch{display:none}
.foot .row .ic svg{width:19px;height:19px}
.who,.foot .row.who{width:auto;padding:0 12px 0 5px;gap:8px;cursor:pointer;background:var(--pill-bg);border:1px solid var(--sb-line);border-radius:22px;height:42px}
.who:hover,.foot .row.who:hover{background:var(--pill-bg)}
.foot .who .lbl{display:block;line-height:1.2}
.who b{display:block;font-size:13px;font-weight:600}
.who small{font-size:11px;color:var(--sb-mute);font-weight:500}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ind);color:var(--on-p);display:grid;place-items:center;font-weight:700;font-size:13px}
.who{cursor:pointer}
.logoutbtn:focus-visible{outline:2px solid var(--ind);outline-offset:2px}

/* profile dropdown (click on the user): My Profile + Logout */
.profile{position:relative;flex:none}
.pmenu{position:absolute;top:calc(100% + 12px);right:0;width:264px;background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:0 18px 44px rgba(40,44,110,.24),0 0 0 1px rgba(91,99,255,.08);padding:16px 18px 10px;display:none;transform-origin:right top;z-index:50}
.pmenu.show{display:block;animation:pop .16s ease-out}
.pmenu h6{margin:0;padding:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line)}
.pinfo{display:flex;align-items:center;gap:12px;padding:14px 0 16px;border-bottom:1px solid var(--line)}
.pinfo .avatar{width:40px;height:40px;font-size:15px;flex:none}
.pname{display:flex;flex-direction:column;min-width:0}
.pname b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.pname small{font-size:12px;font-weight:500;color:var(--mute)}
.pmenu .logoutbtn{display:flex;align-items:center;gap:10px;width:100%;height:auto;margin-top:6px;padding:11px 6px;border:0;border-radius:8px;background:none;color:#dc2626;font:500 14px/1 var(--nav-font);cursor:pointer;text-align:left}
.pmenu .logoutbtn svg{width:18px;height:18px}
.pmenu .logoutbtn:hover{background:color-mix(in srgb,#dc2626 10%,transparent)}

.tip{position:fixed;z-index:70;background:#1d2342;color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;transform:translateX(-50%);display:none}

/* keep everything on one line on narrower screens */
@media(max-width:1800px){.crumb>span:first-child{display:none}}
@media(max-width:1640px){.foot .who .lbl{display:none}.who,.foot .row.who{padding:0 4px}}
@media(max-width:1600px){.side{gap:6px}.foot{gap:0}.nav{gap:0}.row{padding:0 8px;gap:6px}.sel label{padding:2px 5px}.sel select{font-size:12px}.clock{padding:5px 8px}}
@media(max-width:1440px){.nav{scrollbar-width:thin}}
@media(max-width:900px){.ctx,.crumb{display:none}}
@media(max-width:560px){.side{gap:8px;padding:0 8px}.logo{padding:2px 4px;width:100px}.logo .full{height:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- Flyout popup ---------- */
.fly{position:fixed;z-index:50;width:244px;max-height:330px;background:var(--surface);border-radius:16px;box-shadow:0 18px 44px rgba(40,44,110,.24),0 0 0 1px rgba(91,99,255,.08);padding:14px 8px 8px;display:none;flex-direction:column;transform-origin:left top}
.fly.show{display:flex;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.fly h4{font-size:13.5px;font-weight:700;padding:0 10px 10px;letter-spacing:-.005em}
.fly ul{list-style:none;padding:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:2px}
.fly li a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--ink2);text-decoration:none;font-size:13.5px;font-weight:500}
.fly li a svg{width:17px;height:17px;color:var(--mute)}
.fly li a:hover{background:var(--ind-l);color:var(--ind-d)}
.fly li a:hover svg{color:var(--ind-d)}
.fly li a.cur{background:var(--ind-l);color:var(--ink);font-weight:700}
.fly li a.cur svg{color:var(--ind-d)}
.fly li a:focus-visible{outline:2px solid var(--ind);outline-offset:-2px}
.fly .empty{padding:6px 10px 12px;font-size:13px;color:var(--mute);line-height:1.45}
@media(prefers-reduced-motion:reduce){.fly.show{animation:none}}


/* ---------- Settings drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,24,50,.35);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,100vw);background:var(--surface);color:var(--ink);box-shadow:-12px 0 40px rgba(20,24,60,.22);transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s;z-index:61;display:flex;flex-direction:column}
.sopen .scrim{opacity:1;visibility:visible}
.sopen .drawer{transform:none;visibility:visible}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 8px}
.drawer h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.drawer .x{width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--icon);cursor:pointer;display:grid;place-items:center}
.drawer .x:hover{background:var(--hover)}
.drawer .body{flex:1;overflow-y:auto;padding:4px 22px 18px}
.drawer h5{font-size:13.5px;font-weight:700;margin:20px 0 10px}
.sws{display:flex;flex-wrap:wrap;gap:9px}
.sw{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;display:grid;place-items:center;color:#fff}
.sw svg{width:12px;height:12px;stroke-width:3;display:none}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.sw[aria-pressed="true"] svg{display:block}
.sw.def,.sw[data-k="surface"]{color:var(--ink)}
.sw.def{background:var(--surface)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--field);color:var(--ink);padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ind-l);color:var(--ind-d);font-weight:700}
.drawer footer{padding:14px 22px;border-top:1px solid var(--line)}
.reset{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.reset:hover{background:var(--ind-l);color:var(--ind-d)}
.drawer button:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}

/* ---------- Common Add / Edit result message ---------- */
.notify{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;min-width:260px;max-width:min(88vw,340px);overflow:visible;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;color:#1d2342;padding:30px 36px 28px;border-radius:16px;text-align:center;font:600 16px/1.35 'Plus Jakarta Sans',sans-serif;box-shadow:0 24px 60px rgba(20,24,60,.22),0 0 0 1px rgba(20,24,60,.05);opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s;pointer-events:none}
.notify::backdrop{background:transparent}
.notify.show{opacity:1;transform:none}
.notify svg{box-sizing:border-box;width:60px;height:60px;padding:15px;border-radius:50%;stroke-width:2.2}
.notify svg circle{display:none}
.notify.ok svg{color:#16a34a;background:#e7f8ee}
.notify.err svg{color:#dc2626;background:#fdeaea}

/* ---------- Common Delete Confirmation ---------- */
dialog.cpi-confirm{border:0;margin:auto;padding:30px 32px 24px;width:min(380px,90vw);background:#fff;color:#1d2342;border-radius:16px;text-align:center;box-shadow:0 24px 60px rgba(20,24,60,.28),0 0 0 1px rgba(20,24,60,.05);font-family:'Plus Jakarta Sans',sans-serif}
dialog.cpi-confirm[open]{animation:cpiPop .22s ease}
dialog.cpi-confirm::backdrop{background:rgba(20,24,50,.45)}
@keyframes cpiPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.cpi-confirm>svg{box-sizing:border-box;width:60px;height:60px;padding:15px;border-radius:50%;color:#dc2626;background:#fdeaea;stroke-width:2;margin:0 auto 16px;display:block}
.cpi-confirm h2{margin:0 0 8px;font-size:17px;font-weight:700}
.cpi-confirm p{margin:0;font-size:13px;line-height:1.6;color:#7a809f}
.cpi-confirm p b{color:#1d2342;font-weight:600;word-break:break-word}
.cpi-acts{display:flex;gap:10px;margin-top:24px}
.cpi-b{flex:1;height:40px;border-radius:10px;font:600 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s}
.cpi-no{background:#fff;color:#2b3157;border:1px solid #e8ebf5}
.cpi-no:hover{background:#f1f4fd}
.cpi-yes{background:#dc2626;color:#fff;border:1px solid #dc2626;box-shadow:0 6px 14px rgba(220,38,38,.28)}
.cpi-yes:hover{background:#b91c1c;border-color:#b91c1c}
.cpi-b:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}

/* ========== Master pages: wider cards + sharper corners ==========
   Applies to: Breadcrumb card, Title/Header card, Filter card, List table card.
   Tune only these two values to adjust every master page at once.
   If your page uses different class names, add them to the selector lists below. */
:root{--card-gutter:6px;--card-radius:6px}

/* the 4 cards: sharper corners */
.mcrumb,.mhead,.mfilter,.mlist,
.breadcrumb,.breadcrumb-card,.page-header,.title-card,.filter-card,.filter-bar,.table-card,.list-card{
  border-radius:var(--card-radius)!important;
}
/* wider: reduce the left/right gap around the cards */
.mpage,.page-content,.content-wrap,.main-content{
  padding-left:var(--card-gutter)!important;
  padding-right:var(--card-gutter)!important;
}