/* App-level components on top of styles.css (tokens) + motion.css (interaction specs) */

/* ---- page header: H1 only (H28); notifications = 40 circle with hover (MD §6.1) ---- */
.page-head{align-items:center}
.page-head .titles{gap:0}
.back{margin-bottom:4px}
.bell{width:40px;height:40px;border-radius:999px;border:1px solid var(--border-default);background:var(--bg-surface);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--text-primary);transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast)}
.bell:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.bell.open{background:var(--bg-brand-subtle);border-color:var(--border-brand);color:var(--text-brand)}
.bell:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.bell .badge{position:absolute;top:-5px;right:-5px}
.avatar.a40{width:40px;height:40px;font-size:12px}
#page{display:flex;flex-direction:column;gap:20px;min-width:0}
.body{gap:20px}

/* ---- collapsible nav (72 wide, icons only; Management sub-items in a flyout) ---- */
.nav{transition:width var(--dur-medium) var(--ease-emphasized)}
.nav-logo{border:0;cursor:pointer}
.nav-logo:hover{box-shadow:0 0 0 3px rgba(190,223,74,.35)}
.nav-item.active-parent{color:#fff}
body.nav-collapsed .nav{width:72px;align-items:center}
body.nav-collapsed .nav .nl,body.nav-collapsed .nav-item .badge{display:none}
body.nav-collapsed .nav-brand{flex-direction:column;gap:8px;padding:4px 0 8px}
body.nav-collapsed .nav-collapse{transform:rotate(180deg)}
body.nav-collapsed .nav-cap{padding:10px 0 6px;width:32px}
body.nav-collapsed .nav-cap::after{content:'';display:block;height:1px;background:var(--nav-item-hover)}
body.nav-collapsed .nav-item{width:48px;height:40px;justify-content:center;padding:0}
body.nav-collapsed .nav-group{position:relative}
body.nav-collapsed .nav-group .nav-sub{display:none;position:absolute;left:56px;top:-8px;z-index:30;background:var(--nav-bg);border-radius:14px;padding:8px;box-shadow:var(--shadow-2);width:220px}
body.nav-collapsed .nav-group:hover .nav-sub{display:flex;animation:popIn2 var(--dur-fast) var(--ease-enter)}
body.nav-collapsed .nav-group .nav-sub .nav-item{width:100%;justify-content:flex-start;padding:0 10px;height:32px}
body.nav-collapsed .nav-group .nav-rail{display:none}
body.nav-collapsed .nav-group:has(.nav-sub .active)>.nav-item{background:var(--nav-item-active);color:var(--nav-text-active)}
body.nav-collapsed .nav-user{padding:4px;background:none}
@keyframes popIn2{from{opacity:0;transform:scale(.96)}}

/* ---- popovers: dropdown menu, employee search results, date picker, notifications ---- */
.pop{position:absolute;z-index:90;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;box-shadow:var(--shadow-1);padding:6px;animation:popIn2 var(--dur-fast) var(--ease-enter)}
.menu{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto}
.opt-row{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:8px;border:0;background:none;cursor:pointer;text-align:left;font-weight:500;color:var(--text-primary);transition:background-color var(--dur-instant)}
.opt-row:hover{background:var(--bg-subtle)}
.opt-row.sel{background:var(--bg-brand-subtle);color:var(--text-brand);font-weight:600}
.opt-row mark{background:none;color:var(--text-brand);font-weight:700}
.input.dd{cursor:pointer;text-align:left}
.input.dd .chev{display:flex;transition:transform var(--dur-base) var(--ease-emphasized)}
.input.dd.open .chev{transform:rotate(180deg)}
.input.dd.open{box-shadow:0 0 0 3px rgba(20,184,166,.18),inset 0 0 0 1px var(--border-focus);border-color:var(--border-focus)}
.input.combo input{border:0;outline:0;flex:1;background:none;min-width:0}
.dp{display:flex;flex-direction:column;gap:8px;padding:6px}
.dp-head{display:flex;align-items:center;gap:8px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dcell{height:34px;border:0;background:none;border-radius:10px;cursor:pointer;font-weight:500;color:var(--text-primary)}
.dcell:hover{background:var(--bg-subtle)}
.dcell.today{color:var(--text-brand);font-weight:700}
.dcell.sel{background:var(--bg-brand-subtle);box-shadow:inset 0 0 0 1.5px var(--border-brand);color:var(--text-brand);font-weight:700}
.notif-pop{padding:0}
.np-head{display:flex;align-items:center;padding:16px}
.np-list{padding:0 8px 8px;max-height:420px;overflow-y:auto}
.np-group{font-size:12px;font-weight:600;color:var(--text-tertiary);padding:8px 8px 4px;letter-spacing:.04em}
.np-item{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;border-radius:12px;cursor:pointer;transition:background-color var(--dur-instant)}
.np-item:hover{background:var(--bg-subtle)}
.np-item .dot{width:8px;height:8px;border-radius:999px;background:var(--bg-brand);margin-top:6px}
.np-foot{border-top:1px solid var(--border-default);padding:12px;display:flex;justify-content:center}

/* ---- segmented toggle with sliding thumb (240ms emphasized) ---- */
.segment.sliding{position:relative}
.segment.sliding .thumb{position:absolute;top:4px;left:0;height:36px;border-radius:999px;background:var(--bg-brand);transition:transform var(--dur-medium) var(--ease-emphasized),width var(--dur-medium) var(--ease-emphasized);z-index:0}
.segment.sliding .seg{position:relative;z-index:1;background:none}
.segment.sliding .seg:hover:not(.on){background:var(--bg-subtle)}
.segment.sliding .seg.on{background:none;color:#fff}
/* content follows the direction of travel: 12px slide + fade, 200ms enter */
[data-pane].slide-right{animation:paneR var(--dur-base) var(--ease-enter)}
[data-pane].slide-left{animation:paneL var(--dur-base) var(--ease-enter)}
@keyframes paneR{from{opacity:0;transform:translateX(12px)}}
@keyframes paneL{from{opacity:0;transform:translateX(-12px)}}
#page.swap{animation:swapIn var(--dur-base) var(--ease-enter)}
[data-pane]{display:flex;flex-direction:column;gap:20px}

/* ---- changes between states ---- */
[data-row].changed td,[data-row].changed.list-row{animation:rowChanged 1.6s var(--ease-standard)}

/* ---- prototype panel (outside the product UI; opens from the VIPL-ERP logo) ---- */
.proto-panel{position:fixed;left:268px;top:12px;z-index:95;width:260px;background:#141412;color:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-2);animation:popIn2 var(--dur-fast) var(--ease-enter);font-size:13px}
.proto-panel.out{animation:scrimOut var(--dur-fast) var(--ease-exit) forwards}
body.nav-collapsed .proto-panel{left:96px}
.proto-panel .close{color:#9CA09A}
.proto-panel .close:hover{background:#2A2D28}
.pp-sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9CA09A;margin-top:6px}
.pp-btn{background:#2A2D28;color:#fff;border:0;border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font:inherit}
.pp-btn:hover{background:#43473F}
.pp-btn.on{background:var(--bg-brand)}

/* ---- misc ---- */
.card-head .search.s{margin-left:auto}
.kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.goal-box{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--bg-subtle)}
.case-row{cursor:default}
.empty-mini{padding:12px;color:var(--text-secondary)}
.flow-row{display:flex;justify-content:flex-end;gap:8px}
.counter{display:flex;align-items:center;gap:8px}
.counter .input{width:64px;justify-content:center}
.letter{border:1px solid var(--border-default);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.letter-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-default)}
.card-head .ttl .t-title{white-space:nowrap}
.card-head .search.s{width:260px;flex:none}
.card-head{flex-wrap:nowrap}

/* ---- tab menu (H14): brand label + sliding 2 px underline ---- */
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--border-default);position:relative}
.tabbar .thumb{position:absolute;bottom:-1px;left:0;height:2px;border-radius:2px;background:var(--bg-brand);transition:transform var(--dur-medium) var(--ease-emphasized),width var(--dur-medium) var(--ease-emphasized)}
.tabbar .seg.tab{height:40px;border-radius:0;padding:0 12px;font-weight:600;color:var(--text-secondary);background:none}
.tabbar .seg.tab:hover:not(.on){color:var(--text-primary);background:none}
.tabbar .seg.tab.on{color:var(--text-brand,var(--bg-brand));background:none}

/* ---- month calendar · Calendar day component (Figma 5367:52344) ----
   separate rounded cells, 6 px gaps, no grid lines. Attendance type: status block + edit icon.
   Events type: display-only chips + "+N more". Selected / today: teal 1.5 px stroke on brand-subtle. */
.cal{display:flex;flex-direction:column;gap:6px}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-week span{font-size:12px;line-height:16px;font-weight:500;color:var(--text-tertiary);padding:0 2px}
.cday{min-height:108px;padding:8px;display:flex;flex-direction:column;gap:6px;border:0;border-radius:14px;background:#F6F6F2;text-align:left;font:inherit;color:inherit;min-width:0;position:relative}
.cday.ev{min-height:128px;border-radius:12px;gap:4px}
button.cday,.cday.click{cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
button.cday:hover,.cday.click:hover{background:#EFEFEA}
.cday.out{background:#FAFAF8}.cday.out .dn{color:#9CA09A}
.cday.ev.out{background:#F2F2EE}
.cday.off{background:#F8F8F5}.cday.off .dn{color:#626862}
.cday.sel,.cday.today{background:var(--bg-brand-subtle);box-shadow:inset 0 0 0 1.5px var(--bg-brand)}
.cday.sel .dn,.cday.today .dn{color:var(--bg-brand)}
.cday .dn{font-size:14px;line-height:20px;font-weight:700;color:#141412;display:flex;align-items:center;justify-content:space-between;min-height:20px}
.cday .ed{color:var(--bg-brand);display:flex;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.cday.editable:hover .ed,.cday.editable.sel .ed,.cday .ed.lock{opacity:1}
.cday .ed.lock{color:var(--text-tertiary)}
.blk{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;font-size:12px;line-height:16px;font-weight:700;min-width:0}
.blk span{display:flex;align-items:center;gap:4px}
.blk.success{background:#ACEED5;color:#014C37}.blk.info{background:#BDD3FE;color:#14418F}
.blk.warning{background:#FFEAAC;color:#7E4800}.blk.error{background:#F0AFB0;color:#970B2D}
.evc{display:block;height:20px;line-height:20px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.evc.sky{background:#B1E2F5;color:#054561}.evc.warning{background:#FFEAAC;color:#7E4800}.evc.info{background:#BDD3FE;color:#14418F}
.evc.success{background:#ACEED5;color:#014C37}.evc.violet{background:var(--violet-bg,#E4D7FB);color:var(--violet-text,#4C1D95)}
.evc.slate,.evc.neutral{background:var(--slate-bg,#D9DEE4);color:var(--slate-text,#334155)}
.ev-more{border:0;background:none;padding:0 2px;text-align:left;font:inherit;font-size:12px;line-height:16px;font-weight:600;color:var(--bg-brand);cursor:pointer}
.ev-more:hover{text-decoration:underline}
.cal-legend{display:flex;gap:6px;flex-wrap:wrap}
.day-list{display:flex;flex-direction:column;max-height:420px;overflow:auto;margin:0 -8px}
.day-person{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-xl)}
.day-person:hover{background:var(--bg-subtle)}

/* ---- pinned columns (code + name stay while the table scrolls) ---- */
.table-wrap.pinned .pin,.table-wrap.pinned .pin2{position:sticky;background:var(--table-row);z-index:1}
.table-wrap.pinned tbody tr.alt .pin,.table-wrap.pinned tbody tr.alt .pin2{background:var(--table-row-alt)}
.table-wrap.pinned th.pin,.table-wrap.pinned th.pin2{background:var(--table-header)}
.table-wrap.pinned .pin{left:0;width:110px;min-width:110px}
.table-wrap.pinned .pin2{left:110px;box-shadow:inset -1px 0 0 var(--border-default)}
.table-wrap.pinned tbody tr:hover .pin,.table-wrap.pinned tbody tr:hover .pin2{background:var(--bg-brand-subtle)}
.att-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:1200px){.att-grid{grid-template-columns:1fr}}

/* ---- clip content: cards holding tables clip to their radius; search keeps its icon and full placeholder ---- */
.card.flush{overflow:hidden}
.table-wrap{max-width:100%}
.search svg{flex:none}
.search input{min-width:0;width:100%;text-overflow:ellipsis}
.search input::placeholder{color:var(--text-tertiary)}
.card-tools .search.s{width:280px}

/* ---- shared bits for the new modules ---- */
.pbar{display:block;height:6px;border-radius:999px;background:var(--bg-muted);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:999px;background:var(--bg-brand);transition:width var(--dur-slow) var(--ease-standard)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;padding:12px 16px;border-radius:var(--r-xl);background:var(--bg-subtle)}
.strip .k{font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.strip .v{font-weight:600;margin-top:4px}
.t-brand{color:var(--text-brand,var(--bg-brand))}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border:1.5px dashed var(--border-strong);border-radius:var(--r-xl);cursor:pointer;color:var(--text-secondary);text-align:center;transition:border-color var(--dur-fast),background var(--dur-fast)}
.dropzone:hover{border-color:var(--border-brand);background:var(--bg-brand-subtle)}
.desc-box{padding:12px 16px;border-radius:var(--r-xl);background:var(--bg-subtle);display:flex;flex-direction:column;gap:4px}
.doc-preview{height:260px;border-radius:var(--r-xl);background:var(--bg-subtle);padding:16px;display:flex;justify-content:center}
.doc-preview .page{width:100%;max-width:420px;background:#fff;border-radius:6px;padding:20px 24px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-1)}
.doc-preview .ln{height:6px;border-radius:3px;background:var(--bg-muted)}
.act-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bg-subtle);font-size:13px}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:1200px){.stat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-grid{grid-template-columns:1fr}.act-grid{grid-template-columns:1fr}}
.enrol-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.enrol-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-xl);border:1px solid var(--border-default);background:#fff;cursor:pointer;text-align:left;font:inherit;width:100%}
.enrol-row:hover{background:var(--bg-subtle)}
.enrol-row.sel{background:var(--bg-brand-subtle);box-shadow:inset 0 0 0 1.5px var(--border-brand);border-color:transparent}
.enrol-row.done{cursor:default;opacity:.8}

/* ---- sign-in ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--bg-canvas)}
.login-card{width:100%;max-width:440px;background:#fff;border-radius:var(--r-3xl);padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-1)}
.login-card .nav-logo{width:36px;height:36px;border-radius:10px}
.login-card #li-go{width:100%;justify-content:center}
.login-acc{border:1px solid var(--border-default);background:#fff;cursor:pointer;font:inherit;width:100%}
.login-acc:hover{background:var(--bg-brand-subtle);border-color:var(--border-brand)}
button.nav-user{border:0;cursor:pointer;font:inherit;color:inherit;width:100%}
button.nav-user:hover{background:var(--nav-item-active-hover,rgba(255,255,255,.18))}
button.avatar{border:0;cursor:pointer}

/* Calendar day: status block sits at the bottom of the cell — 8 px from left, right and bottom; free space stays on top */
.cday .blk{margin-top:auto;min-height:66px;justify-content:flex-start}

/* Bell: swings left–right on hover (bell only, no new notification) and when a new notification arrives (+ badge pop) */
@keyframes bellRing{0%{transform:rotate(0)}12%{transform:rotate(16deg)}26%{transform:rotate(-14deg)}40%{transform:rotate(10deg)}54%{transform:rotate(-7deg)}68%{transform:rotate(4deg)}82%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes badgePop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.bell svg{transform-origin:50% 2px}
.bell:hover svg{animation:bellRing 700ms var(--ease-standard)}
.bell svg.ring{animation:bellRing 900ms var(--ease-standard) 2}
.bell .badge.bump{animation:badgePop var(--dur-medium) var(--ease-emphasized)}
@media (prefers-reduced-motion:reduce){.bell:hover svg,.bell svg.ring{animation:none}}

/* ---- Nav: fixed-height panel, 12 px from the top and bottom of the window; menus scroll inside, user card pinned ---- */
.shell{align-items:flex-start}
.nav{position:sticky;top:12px;height:calc(100vh - 24px);align-self:flex-start;overflow:hidden;gap:0}
.nav-brand{flex:none}
.nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;margin:0 -6px;padding:0 6px 8px;}
.nav-user{flex:none;margin-top:8px}
.nav-user .acc-chev,.nav-group .mg-chev{transition:transform var(--dur-base) var(--ease-standard)}
.nav-user.open .acc-chev{transform:rotate(180deg)}
.nav-user.open{background:rgba(255,255,255,.18)}
/* Management dropdown */
.nav-group .mg-chev{margin-left:auto;display:flex}
.nav-group.open .mg-chev{transform:rotate(180deg)}
.nav-group:not(.open) .nav-sub{display:none}
.nav-group.open .nav-sub{animation:fadeDown var(--dur-base) var(--ease-enter)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* secondary selected state: the group you're inside (primary = the white page item) */
.nav-group.has-active>.nav-item{background:rgba(255,255,255,.14);color:#fff}
.nav-group.has-active>.nav-item:hover{background:rgba(255,255,255,.2)}
/* collapsed nav: no inner scroll clipping so the Management flyout can escape */
body.nav-collapsed .nav-scroll{align-items:center;margin:0;padding:0 0 8px}
body.nav-collapsed .nav-group .nav-sub{position:fixed}
body.nav-collapsed .nav-group .mg-chev{display:none}
body.nav-collapsed .nav-group:not(.open) .nav-sub{display:none}
body.nav-collapsed .nav-group:hover .nav-sub{display:flex}
/* account menu opens upward from the user card */
.pop.acc-pop{z-index:120;animation:popIn2 var(--dur-fast) var(--ease-enter)}

/* ---- pager: range on the left, page controls on the right ---- */
.pager{justify-content:space-between;min-height:24px}
.pg-ctrl{display:flex;align-items:center;gap:4px}
.pg-num{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r-md);border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.pg-num:hover{background:var(--bg-subtle);color:var(--text-primary)}
.pg-num.on{background:var(--bg-brand-subtle);color:var(--text-brand);box-shadow:inset 0 0 0 1.5px var(--border-brand)}
.pg-gap{padding:0 4px;color:var(--text-tertiary)}
.nav-scroll>*{flex:none}
/* account avatar in the page header opens the account menu */
.acc-btn{cursor:pointer;transition:box-shadow var(--dur-fast) var(--ease-standard)}
.acc-btn:hover{box-shadow:0 0 0 3px var(--bg-brand-muted)}
.acc-btn.open{box-shadow:0 0 0 3px var(--border-brand)}

/* ---- No visible scrollbars anywhere (page, nav, tables, pop-ups, drawers). Everything still scrolls with
   wheel, trackpad, touch and keyboard. With no scrollbar taking width, opening an overlay can't shift the layout. ---- */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}

/* ---- Stat card (5134:16342) + Stat row (5134:16341) ---- */
.tile.t32{width:32px;height:32px;border-radius:10px}
.stat-card{padding:16px;gap:12px;border-radius:var(--r-3xl)}
.stat-head{display:flex;align-items:center;gap:8px}
.stat-label{flex:1;min-width:0;font-size:12px;line-height:16px;font-weight:600;color:var(--text-secondary)}
.stat-tip{display:flex;color:var(--text-tertiary);cursor:help;border-radius:999px}
.stat-tip:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.stat-value{font-size:24px;line-height:32px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.stat-rows{display:flex;flex-direction:column}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;font:inherit;font-size:14px;line-height:20px;font-weight:500;color:var(--text-secondary);background:none;border:0;padding:0;width:100%;text-align:left}
.stat-row b{font-weight:700;color:var(--text-primary)}
button.stat-row{cursor:pointer;border-radius:6px}
button.stat-row:hover{color:var(--text-brand)}

/* ---- Probation letter preview (Preview & edit — confirmation / extension letter) ---- */
.letter-card{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--border-default);border-radius:var(--r-xl);background:var(--bg-surface)}
.letter-body{min-height:220px;border-style:dashed;line-height:22px}
.seg{white-space:nowrap}.toolbar{flex-wrap:wrap;row-gap:12px}

/* ---- Tables inside pop-ups / drawers: never squashed, always framed ----
   Overlay bodies are flex columns that scroll; their sections must keep their natural height (no flex-shrink),
   otherwise boxed tables get crushed and rows are cut off. A table that isn't already in a bordered box gets the
   outer stroke + radius itself (design system §10.2: tables always sit in a container). */
.ov-body>*{flex:none}
.popup .table-wrap,.drawer .table-wrap{border:1px solid var(--border-default);border-radius:var(--r-xl);overflow-x:auto}
.popup .bordered .table-wrap,.drawer .bordered .table-wrap,.popup .card .table-wrap,.drawer .card .table-wrap{border:0;border-radius:0}
.popup .bordered:has(>.table-wrap),.drawer .bordered:has(>.table-wrap){overflow:hidden}
.popup .table-wrap .tbl tbody tr:last-child td,.drawer .table-wrap .tbl tbody tr:last-child td{border-bottom:0}

/* ---- Month switcher: ‹ [📅 Month YYYY] › — label centred between the arrows; arrows disable at the ends ---- */
.month-switch{display:inline-flex;align-items:center;gap:8px;flex:none}
.month-switch .ms-label{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:148px;height:32px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);font-weight:600;color:var(--text-primary);white-space:nowrap}
.month-switch .ms-label svg{color:var(--text-brand)}
.month-switch .icon-btn[disabled]{opacity:.4;cursor:not-allowed}

/* Training · "Who it's for": tinted box (original Figma); selections shown as display-only chips under each picker */
.who-box{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-xl);background:var(--bg-subtle)}
.who-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:20px}