/* ============================================================
   HR Portal — theme system
   Default (:root) = "Classic Enterprise". Admin picks a theme in
   Form Settings; core.context_processors.portal_theme puts
   data-app-theme="<key>" on <html>, and the blocks at the bottom
   of this file redefine the same tokens per theme. Everything
   above only ever reads var(--token) — never a literal color,
   radius or shadow — so a new theme is just a new token block.
   ============================================================ */
:root{
  --navy:#0b2447;
  --accent:#1a56db;
  --accent-text:#ffffff;
  --accent-light:#6f9eea;
  --soft-bg:#eaf1fd;
  --soft-text:#123a7a;
  --light:#f4f6fa;
  --text:#111827;
  --muted:#5b6472;
  --border:#e1e5ec;
  --white:#ffffff;
  --radius:8px;
  --radius-card:10px;
  --shadow-card:0 4px 14px #0b244708;
  --thead-bg:#eef1f7;
  --sidebar-bg:linear-gradient(180deg,var(--navy),#0f2f63);
  --sidebar-text:#dbe6fb;
  --sidebar-hover-bg:#ffffff1a;
  --sidebar-hover-text:#ffffff;
  --sidebar-active-bg:var(--accent);
  --sidebar-active-text:#ffffff;
  --sidebar-active-border-width:0px;
  --sidebar-border:transparent;
  --org-ceo:var(--navy);
  --org-admin:#123a7a;
  --org-manager:var(--accent);
  --org-employee:#6f9eea;
  --font-family:Inter,'Segoe UI',Arial,sans-serif;
  --heading-family:inherit;
  --heading-weight:700;
  --heading-tracking:-.01em;
  --btn-sheen:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.12);
  --sidebar-sheen-opacity:1;
}
html{font-size:14px}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-family);color:var(--text);background:var(--light);line-height:1.45;font-size:1rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* A <button> inside a small inline <form> (a state-changing action that
   must POST, per rule 10) styled to sit flush among plain <a> links in
   a table-row Actions cell -- e.g. FAQ Content's Archive/Restore
   toggle, next to View | Edit visibility | Delete. */
.btn-as-link{background:none;border:0;box-shadow:none;padding:0;margin:0;font:inherit;font-weight:inherit;color:var(--accent);cursor:pointer;display:inline}
.btn-as-link:hover{text-decoration:underline;filter:none}
.faq-comment-list{list-style:none;padding:0;margin:0 0 16px}
.faq-comment-list li{border-top:1px solid var(--border);padding:12px 0}
.faq-comment-list li:first-child{border-top:0}
.faq-comment-list p{margin:4px 0}
.faq-helpfulness{display:flex;align-items:center;gap:10px;margin:18px 0;padding:14px;background:var(--light);border-radius:var(--radius);border:1px solid var(--border)}
.faq-helpfulness .btn.active{background:var(--accent);color:var(--white);border-color:var(--accent)}
.faq-comment-form-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.faq-emoji-picker-wrap{position:relative;display:inline-block}
.faq-emoji-panel{position:absolute;z-index:5;bottom:100%;left:0;margin-bottom:4px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:8px;width:260px}
/* Manage FAQ's category list, tree-ordered (faq_category_tree_qs) --
   a subcategory row gets a muted connector glyph + indent so the
   parent/child relationship is visible at a glance, not just implied
   by row order and the Parent column text. */
.faq-category-sub td:first-child{padding-left:26px}
.faq-category-indent{color:var(--muted)}
/* My Profile's Profile View tab -- read-only label/value pairs, a
   person row (manager/supervisor), and the Quick Links list. */
.profile-info-grid{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.profile-info-grid dt{color:var(--muted);font-size:.82rem;font-weight:700;white-space:nowrap}
.profile-info-grid dd{margin:0;font-weight:400}
.profile-info-label{font-size:.82rem;color:var(--muted);font-weight:600;margin:16px 0 6px}
/* Create/Edit User's tabbed layout (core/user_form.html) only -- a divider
   under a group-field section label (Employee Form Access, Dashboard
   Widgets, etc.), separating it from the checkbox grid below. Deliberately
   a separate modifier, not added to .profile-info-label itself, so the
   already-shipped My Profile page (Manager/Supervisor/Tax Details labels)
   isn't restyled by this. */
.profile-info-label-divider{border-bottom:1px solid var(--border);padding-bottom:6px}
/* Emergency Contact section heading on Create/Edit User -- bigger than
   the standard .profile-info-label, still the same muted grey. */
.profile-info-label-big{font-size:1.15rem;color:var(--accent)}
/* My Profile's "Contact Details" panel -- three blocks (Current Address,
   Permanent Address, Emergency Contact) side by side, explicit request
   2026-09-10. align-items:flex-start (not stretch) means each block is
   only as tall as its own content -- a short Address block never gets
   padded out with white space to match Emergency Contact's taller one.
   If a block's own content still runs long, it scrolls internally
   (max-height + overflow-y) rather than growing the row further. */
.contact-details-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.contact-details-col{flex:1;min-width:200px;max-height:280px;overflow-y:auto}
@media (max-width:700px){.contact-details-col{flex-basis:100%}}
.ec-visible-table th,.ec-visible-table td{white-space:nowrap}
.ec-title{display:flex;align-items:center;gap:10px}
.ec-icon{width:26px;height:26px;flex:none;fill:#d03b3b;filter:drop-shadow(0 2px 4px rgba(208,59,59,.35))}
.ec-tab-btn{display:inline-flex;align-items:center;gap:6px}
.ec-icon.ec-icon-sm{width:16px;height:16px;filter:none}
/* Emergency Contact block on Create/Edit User (core/user_form.html) --
   explicit request, 2026-09-09: pack the short fields (Name, Relation,
   Contact No, City, State, ZIP, County, etc.) several per row instead
   of one full-width row each; only the address lines (long text) get
   their own full row. Each <p> is a flex item that shrinks to ~170px
   and wraps onto a new row once the row runs out of space -- no fixed
   column count, so it adapts to however many fields actually fit. */
.inline-field-row{display:flex;flex-wrap:wrap;column-gap:16px}
.inline-field-row>p{flex:1 1 170px;min-width:170px}
.inline-field-row>p.inline-field-full{flex-basis:100%}
.profile-person-row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--light);border-radius:var(--radius);margin-bottom:6px}
.profile-links-list{display:flex;flex-direction:column;gap:8px}
.profile-link-row{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius);font-weight:600;font-size:.92rem}
.profile-link-soon{font-size:.75rem;font-weight:700;color:var(--muted);background:var(--light);padding:3px 9px;border-radius:999px}
/* display:grid only when NOT [hidden] -- setting it unconditionally on
   the bare class would override the browser's own [hidden]{display:none}
   default (author-origin CSS always beats user-agent-origin CSS, tie or
   not), silently defeating the hidden attribute the JS toggles. */
.faq-emoji-panel:not([hidden]){display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.faq-emoji-item{background:none;border:0;font-size:20px;line-height:1;padding:6px;border-radius:4px;cursor:pointer}
.faq-emoji-item:hover{background:var(--light)}

/* Typography scale — tightened to a denser, more enterprise-standard
   scale (~14px body) rather than the larger marketing-site-style sizes
   this started at. Every heading follows one consistent scale per theme. */
h1,h2,h3,h4{font-family:var(--heading-family);font-weight:var(--heading-weight);letter-spacing:var(--heading-tracking);color:var(--text);line-height:1.25;margin:0 0 .5em}
h1{font-size:1.4rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
h4{font-size:.9rem}
p{margin:0 0 1em}
small{font-size:.8125rem;color:var(--muted)}

button,.btn{background-color:var(--accent);background-image:var(--btn-sheen);box-shadow:var(--btn-shadow);border:0;border-radius:var(--radius);padding:12px 18px;font-weight:700;color:var(--accent-text);display:inline-block;cursor:pointer;transition:filter .15s ease}
button:hover,.btn:hover{filter:brightness(.92);text-decoration:none}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);margin-top:5px;font-family:inherit;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--soft-bg)}
label{font-weight:600;color:var(--text)}

/* Checkbox/radio option groups rendered by Django's default CheckboxSelectMultiple (e.g.
   Employee Form Access, Dashboard Widgets, Groups, Custom Roles on core/form.html AND
   core/user_form.html) -- lays each option out as its own aligned, clickable card instead
   of a bare checkbox floating away from its label. Deliberately a descendant selector
   (`form div[id^="id_"]`), not a direct-child one (`form>div[id^="id_"]`) -- on
   core/form.html, HTML5 parsing auto-closes the field's wrapping <p> before this <div>
   (block content isn't allowed inside <p>), landing the div as a direct child of <form>;
   on core/user_form.html's tabbed layout the div sits one level deeper, inside each tab's
   wrapping <div class='faq-tab-panel'>, and only a descendant selector reaches it there
   too. Bug found 2026-09-09: the tabbed Create/Edit User page silently lost this card
   styling (fell back to a bare unstyled checkbox list) until this was relaxed.
   Some fields (Dashboard Widgets) use grouped choices: each group is its own
   <div><label>Group Name</label><div>option</div>...</div>, where the group-name label
   carries no `for` attribute (unlike a real option's label). That distinction is what
   tells the two cases apart below -- no group ends up styled like a clickable option. */
.form-panel form div[id^="id_"]{margin:6px 0 1em}

/* Flat option list (no groups) -- e.g. Employee Form Access, Groups, Custom Roles */
.form-panel form div[id^="id_"]:not(:has(>div>label:not([for]))){display:grid;grid-template-columns:repeat(2,1fr);gap:8px}

/* Grouped option list (e.g. Dashboard Widgets) -- stack each group's card vertically */
.form-panel form div[id^="id_"]:has(>div>label:not([for])){display:flex;flex-direction:column;gap:12px}
.form-panel form div[id^="id_"]>div:has(>label:not([for])){display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.form-panel form div[id^="id_"]>div>label:not([for]){grid-column:1/-1;font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--text);background:var(--light);margin:0 -12px 10px;padding:10px 12px;cursor:default}

@media (max-width:560px){
  .form-panel form div[id^="id_"]:not(:has(>div>label:not([for]))),
  .form-panel form div[id^="id_"]>div:has(>label:not([for])){grid-template-columns:1fr}
}

.form-panel form div[id^="id_"] div>label[for]{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--white);font-weight:500;margin:0;cursor:pointer;transition:border-color .12s ease,background-color .12s ease}
.form-panel form div[id^="id_"] div>label[for]:hover{border-color:var(--muted);background:var(--light)}
.form-panel form div[id^="id_"] div>label[for]:has(input:checked){border-color:var(--accent);background:var(--soft-bg)}
.form-panel form div[id^="id_"] div>label[for] input{width:17px;height:17px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}

/* Login page */
.login-page{display:grid;grid-template-columns:1.1fr .9fr;min-height:100vh;background:linear-gradient(90deg,#ffffff 0%,#ffffff 55%,var(--accent) 55%,var(--navy) 100%)}
.login-left{padding:55px 70px}
.logo{font-size:30px;font-weight:800;font-family:var(--heading-family)}
.logo span{color:var(--accent)}
.logo small{display:block;font-size:16px;color:var(--muted);font-weight:500;font-family:inherit}
.logo .brand-logo-img{height:56px;width:auto;max-width:220px;object-fit:contain;vertical-align:middle;margin-right:4px}
.login-left h1{font-size:2rem;margin:70px 0 15px}
.login-left h1 b{color:var(--accent)}
.login-left p{font-size:17px;line-height:1.6;color:var(--muted)}
.public-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px 24px;margin:18px 0;box-shadow:var(--shadow-card)}
.public-card h3{display:flex;justify-content:space-between}
.line{display:block;padding:13px 0;border-top:1px solid #edf1f7}
.line span{float:right;color:var(--muted)}
.event{padding:10px 0}
.event b{display:inline-block;border:1px solid var(--accent);background:var(--soft-bg);padding:8px;border-radius:var(--radius);margin-right:14px;color:var(--soft-text)}
.spotlight{display:flex;align-items:center;gap:14px;padding:10px 0}
.spotlight img,.spotlight-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--border)}
.spotlight p{margin:2px 0;color:var(--muted);font-size:14px;line-height:1.4}
.spotlight span{color:var(--muted);font-size:12px}
.public-card-thumb{width:28px;height:28px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:6px;border:1px solid var(--border)}
.public-card-scroll{max-height:220px;overflow-y:auto;scrollbar-width:thin}
.public-card-scroll::-webkit-scrollbar{width:8px}
.public-card-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.public-card-scroll::-webkit-scrollbar-track{background:transparent}
.public-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--white);border-radius:var(--radius-card);border:1px solid var(--border);padding:18px;margin-top:24px}
.public-stats>div{border-right:1px solid var(--border);padding:0 18px}
.public-stats>div:last-child{border:0}
.login-right{display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--white)}
.login-box{width:540px;background:var(--white);color:var(--text);border-radius:calc(var(--radius-card) + 6px);padding:55px;box-shadow:0 20px 50px #05173e40}
.login-box h2{text-align:center;font-size:1.4rem}
.login-box p{text-align:center;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center}
.login-box button{width:100%;margin:20px 0;font-size:16px}
.oauth{display:block;text-align:center;border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:10px 0;color:var(--muted)}
.open-chat{border:2px solid var(--white);border-radius:var(--radius-card);padding:14px 30px;color:var(--white);margin-top:24px}

/* App shell */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;transition:grid-template-columns .2s ease}
.app.sidebar-collapsed{grid-template-columns:64px 1fr}
.sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);padding:18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* Collapse toggle -- explicit request, 2026-09-15. Deliberately NOT
   absolutely positioned to straddle the sidebar's border (that version
   rendered in the wrong spot, overlapping the brand logo, and wasn't
   worth chasing further) -- a plain flex row placed right under the
   brand, so it can only ever render exactly where it sits in the
   document, no containing-block guesswork. */
.sidebar-toggle-row{display:flex;justify-content:flex-end;margin:-10px 0 14px}
.sidebar-toggle-btn{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-text);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:0;transition:transform .2s ease}
.sidebar-toggle-btn:hover{filter:brightness(1.1)}
.app.sidebar-collapsed .sidebar-toggle-row{justify-content:center}
.app.sidebar-collapsed .sidebar-toggle-btn{transform:rotate(180deg)}
/* Collapsed: hide every text label (icons -- already the first thing in
   every link/summary/brand/footer item -- are what's left), and fully
   hide each group's sub-links regardless of their <details> open state,
   rather than leave icon-less sub-item rows with nothing to show (most
   sub-links, e.g. under FAQ/Settings/User Management, have no icon of
   their own). Expand the sidebar back to see them. */
.app.sidebar-collapsed .nav-label{display:none}
.app.sidebar-collapsed .nav-group-links{display:none!important}
.app.sidebar-collapsed .brand{justify-content:center;gap:0;margin-left:0}
.app.sidebar-collapsed .sidebar nav a,.app.sidebar-collapsed .sidebar nav details.nav-group summary{text-align:center;padding:12px 4px;justify-content:center}
.app.sidebar-collapsed .sidebar nav details.nav-group summary::after{display:none}
.app.sidebar-collapsed .sidebar-footer{flex-direction:column}
/* min-height:0 is the classic flex-column gotcha -- without it a flex
   child can't shrink below its content size, so overflow-y:auto would
   never actually kick in once the nav links (or a role's set of
   sub-menus) grow taller than the sidebar's fixed 100vh. The brand
   header and Site Map/Logout footer stay put; only the link list
   between them scrolls. */
.sidebar>nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.sidebar>nav::-webkit-scrollbar{width:6px}
.sidebar>nav::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:3px}
.sidebar>nav::-webkit-scrollbar-track{background:transparent}
.sidebar::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--sidebar-sheen-opacity);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 2px,transparent 2px,transparent 6px),linear-gradient(180deg,rgba(255,255,255,.07),transparent 45%)}
.sidebar>*{position:relative;z-index:1}
.brand{font-size:20px;font-weight:700;margin:8px 0 28px;font-family:var(--heading-family);display:flex;align-items:center;gap:8px}
.brand .brand-logo-img{height:32px;width:auto;max-width:120px;object-fit:contain}
/* 2026-10-02: logo above "HR Portal"; organization name centered above the news ticker (.org-banner) */
.brand{flex-direction:column;align-items:center;text-align:center;gap:4px}
.brand .brand-logo-img{height:52px;max-width:160px;margin-bottom:2px}
.brand .brand-logo-icon{font-size:34px;line-height:1}
.brand .brand-title{font-size:20px;line-height:1.2}
/* 2026-10-02: header bar + organization name always visible (pinned), logo at the left of the search bar */
.top-sticky{position:sticky;top:0;z-index:40;background:var(--light);margin:0 -34px;padding:0 34px}
.top-sticky .top{margin-bottom:16px}
.topbar-logo{height:48px;width:auto;max-width:240px;object-fit:contain;object-position:left center;flex:0 0 auto} /* wide wordmark logos need the width (2026-10-02) */
@media(max-width:900px){.topbar-logo{height:36px;max-width:160px}}
.subnav-bar{top:var(--top-sticky-h,0)}
@media(max-width:900px){.top-sticky{position:static;margin:0 -16px;padding:0 16px}.subnav-bar{top:0}}
.org-banner{text-align:center;font-family:var(--heading-family);font-weight:700;font-size:1.25rem;color:var(--text);margin:-6px 0 0;padding-bottom:12px;line-height:1.3;overflow-wrap:anywhere}
.app.sidebar-collapsed .brand .brand-logo-img{height:32px}
/* 2026-10-02: title and collapse button share one row -- no empty gap above the menu */
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 16px}
.sidebar-head .brand{margin:0;align-items:flex-start;text-align:left;min-width:0}
.sidebar-head .sidebar-toggle-row{margin:0;flex:0 0 auto}
.app.sidebar-collapsed .sidebar-head{justify-content:center}
.sidebar nav a,.logout{display:block;color:var(--sidebar-text);padding:12px 14px;border-radius:var(--radius);margin:4px 0;border-left:0 solid var(--accent)}
.sidebar-footer{margin-top:auto;display:flex;border-top:1px solid var(--sidebar-border)}
.sidebar-footer a{flex:1;text-align:center;padding:12px 8px;color:var(--sidebar-text);opacity:.85;border-radius:0}
.sidebar-footer a:hover{opacity:1;background:var(--sidebar-hover-bg);color:var(--sidebar-hover-text)}
.sidebar nav a:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-text)}
.sidebar nav a.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);border-left-width:var(--sidebar-active-border-width)}

/* Collapsible sidebar nav groups (Workflows, Communications, User Management) */
.sidebar nav details.nav-group{margin:4px 0}
.sidebar nav details.nav-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:var(--radius);font-weight:700;color:var(--sidebar-text)}
.sidebar nav details.nav-group summary::-webkit-details-marker{display:none}
.sidebar nav details.nav-group summary:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-text)}
.sidebar nav details.nav-group summary::after{content:'▸';font-size:11px;opacity:.7;transition:transform .15s ease}
.sidebar nav details.nav-group[open]>summary::after{transform:rotate(90deg)}
.sidebar nav .nav-group-links{display:flex;flex-direction:column;padding-left:8px;border-left:1px solid var(--sidebar-border,transparent)}
.sidebar nav .nav-group-links a{font-size:.9em;opacity:.92}
.sidebar nav details.nav-subgroup{margin:1px 0}
.sidebar nav details.nav-subgroup summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:var(--radius);font-weight:600;font-size:.9em;opacity:.92;color:var(--sidebar-text)}
.sidebar nav details.nav-subgroup summary::-webkit-details-marker{display:none}
.sidebar nav details.nav-subgroup summary:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-text)}
.sidebar nav details.nav-subgroup summary::after{content:'▸';font-size:10px;opacity:.7;transition:transform .15s ease}
.sidebar nav details.nav-subgroup[open]>summary::after{transform:rotate(90deg)}
.sidebar nav details.nav-subgroup .nav-group-links{padding-left:14px}
.sidebar nav details.nav-subgroup .nav-group-links a{font-size:.95em}

/* Sticky sub-navigation bar for sidebar items whose several sub-pages are
   switched between in the main content area instead of a folded sidebar
   group (Pay | Claims, Timesheet, Performance Reviews) -- pinned just
   below the top bar so it stays reachable while scrolling a long page. */
.subnav-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sidebar-bg);padding:10px 16px;border-radius:var(--radius-card);margin-bottom:16px;box-shadow:0 4px 14px #0b244722}
.subnav-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--sidebar-hover-bg);color:var(--sidebar-text);font-weight:600;font-size:.9em;white-space:nowrap}
.subnav-pill:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-text);text-decoration:none;filter:brightness(1.3)}
.subnav-pill.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text)}
.nav-badge{display:inline-block;background:var(--accent);color:var(--accent-text);border-radius:999px;padding:1px 7px;font-size:.7rem;font-weight:700;margin-left:4px}
.main{padding:0 34px 34px}
.top{min-height:74px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;justify-content:space-between;border-bottom:1px solid var(--border);margin:0 -34px 24px;padding:12px 34px;background:var(--white)}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-clock{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.topbar-clock-tz{width:auto;margin:0;padding:4px 8px;font-size:.78rem;border-radius:999px;color:var(--muted)}
@media(max-width:900px){.topbar-clock,.topbar-clock-tz{display:none}}
.top-ticker{background:var(--soft-bg);color:var(--soft-text);display:flex;align-items:center;white-space:nowrap;padding:7px 34px;font-size:.85rem;font-weight:600;margin:0 -34px 14px}
.top-ticker[hidden]{display:none}
/* The collapsed "Scroll On" placeholder is a slim strip, not a full
   ticker with real content -- much less bottom margin than the full
   ticker needs, so it doesn't leave a big gap above the page's own
   heading (explicit request, 2026-09-09). */
.top-ticker-collapsed{padding:4px 34px;margin-bottom:8px}
@media(max-width:900px){.top-ticker-collapsed{padding:4px 16px}}
.top-ticker-viewport{flex:1;min-width:0;overflow:hidden}
.top-ticker-track{display:inline-block;padding-left:100%;animation:top-ticker-scroll 24s linear infinite}
.top-ticker a{color:var(--soft-text);text-decoration:underline}
.top-ticker-close{background:none;border:0;padding:0 0 0 14px;margin:0;flex:none;color:#d03b3b;opacity:.75;cursor:pointer;font-size:.85rem;line-height:1}
.top-ticker-close:hover{opacity:1}
.top-ticker-show{background:none;border:0;padding:0 0 0 14px;margin:0;flex:none;color:var(--soft-text);opacity:.7;cursor:pointer;font-size:.85rem;font-weight:600}
.top-ticker-show:hover{opacity:1;text-decoration:underline}
@keyframes top-ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.top-ticker-track{animation:none;padding-left:20px}}
@media(max-width:900px){.top-ticker{margin:0 -16px 24px;padding:7px 16px}}
.lang-switcher{margin:0}
.lang-switcher select{width:auto;margin:0;padding:6px 10px;font-size:13px;border-radius:999px}

/* Topbar user menu — enterprise-style account menu: compact trigger
   (avatar + name only), full detail moves into the opened panel's header */
.user-menu{position:relative;cursor:pointer}
.user-menu summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;padding:6px 10px 6px 6px;border-radius:999px}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover{background:var(--light)}
.user-menu summary::after{content:'▾';font-size:.65rem;color:var(--muted);margin-left:1px}
.user-menu-name{font-size:.92rem;font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.user-name-block{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.user-status{font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:5px;margin-top:2px}
.user-status.online{color:#1f7a3d}
.user-status.offline{color:#8a5a00}
.status-dot{width:8px;height:8px;border-radius:50%;flex:none}
.status-dot.online{background:#2ca01c}
.status-dot.offline{background:#b0b7c3}
.user-menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 16px 34px #0b244726;min-width:230px;padding:8px;z-index:30}
.user-menu-header{display:flex;align-items:center;gap:12px;padding:6px 10px 12px}
.user-menu-header b{display:block;font-size:.92rem}
.user-menu-header small{display:block;color:var(--muted);margin-top:2px}
.user-menu-divider{border-top:1px solid var(--border);margin:4px 2px}
.user-menu-panel>a{display:block;padding:10px 12px;border-radius:var(--radius);color:var(--text);margin:0;font-size:.88rem}
.user-menu-panel>a:hover{background:var(--light);text-decoration:none}
.user-menu-logout{color:#b3122a!important}
.avatar-sm,.avatar-lg{border-radius:50%;object-fit:cover;background-color:var(--accent);background-image:linear-gradient(155deg,var(--accent-light) 0%,var(--accent) 65%);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.avatar-sm{width:32px;height:32px;font-size:.8rem}
.avatar-stack{display:inline-flex;align-items:center;margin-right:6px}
.avatar-stack .avatar-sm{width:26px;height:26px;font-size:.7rem;border:2px solid var(--white);margin-left:-8px}
.avatar-stack .avatar-sm:first-child{margin-left:0}
.members-panel{padding:0}
.members-panel summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.members-panel summary::-webkit-details-marker{display:none}
.members-panel summary::after{content:'▸';color:var(--muted);font-size:.75rem}
.members-panel[open] summary::after{content:'▾'}
.members-list{display:flex;flex-direction:column;gap:4px;padding:0 20px 16px}
.member-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #edf1f7}
.member-row:first-child{border-top:0}
.member-row small{color:var(--muted)}
.member-row small:last-child{margin-left:auto}
.member-add-form{display:flex;gap:8px;margin:10px 0;width:100%;max-width:420px}
.member-add-form select{margin:0}
.member-add-form button{flex:none;padding:8px 14px}
.member-remove-panel{margin:10px 0;max-width:420px}
.member-remove-panel .member-row{border-top:1px solid #edf1f7;padding:8px 0}
.member-remove-panel .member-row:first-child{border-top:0}
.member-remove-panel .member-row form{margin-left:auto}
.avatar-lg{width:64px;height:64px;font-size:1.5rem}
.profile-pic-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.sig-profile-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--soft-bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.sig-profile-preview{height:56px;max-width:220px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px}
.sig-profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sig-archive-details{margin-top:14px}
.sig-archive-details summary{cursor:pointer;font-size:.85rem;color:var(--muted);font-weight:600}
.sig-archive-row{display:flex;align-items:center;gap:12px;margin-top:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.sig-archive-thumb{height:36px;max-width:140px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:5px;padding:3px}
.search-wrap{border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);display:flex;align-items:stretch;padding:0;flex-wrap:nowrap;overflow-x:auto;flex:1 1 480px;min-width:220px;max-width:560px}
.search-icon{display:flex;align-items:center;padding:0 6px 0 18px;font-size:16px;flex:none}
.search-wrap input[type=text]{border:0;background:transparent;flex:1;font-size:15px;color:var(--text);outline:none;padding:0 10px;min-width:120px}
.search-wrap input[type=text]::placeholder{color:var(--muted)}
.search-wrap input{height:46px}
.search-wrap button{border:0;border-left:1px solid var(--border);background:var(--accent);color:var(--accent-text);padding:0 24px;font-size:13px;font-weight:700;cursor:pointer;flex:none;border-radius:0 var(--radius) var(--radius) 0}

/* Cards / panels / tables */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:18px 0}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-card)}
.card b{display:block;font-size:1.35rem;margin:8px 0;font-weight:700}

/* Dashboard — colorful KPI/chart widgets */
.dash-tabs{display:flex;gap:8px;margin:12px 0 18px;border-bottom:2px solid var(--border)}
.dash-tab-btn{display:flex;align-items:baseline;gap:8px;font-size:1rem;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 4px 12px;cursor:pointer}
.dash-tab-btn small{font-weight:500;font-size:.72rem;color:var(--muted)}
.dash-tab-btn:hover{color:var(--text)}
.dash-tab-btn.dash-tab-mine.active{color:var(--text);border-bottom-color:#1baf7a}
.dash-tab-btn.dash-tab-org.active{color:var(--text);border-bottom-color:#2a78d6}

/* Organization Holidays widget */
.btn.small{padding:6px 12px;font-size:.78rem}
.hol-widget .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hol-widget .panel-head h3{margin:0}
.hol-widget .kpi-strip{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.hol-widget .kpi-mini{flex:1;min-width:160px;background:#e4f7ee;border:1px solid var(--border);border-radius:9px;padding:10px 14px}
.hol-widget .kpi-mini .l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hol-widget .kpi-mini .v{font-size:1.02rem;font-weight:700;margin-top:2px;color:var(--text)}
.hol-widget .kpi-mini .v small{font-weight:500;font-size:.72rem;color:var(--muted)}
.hol-widget-tabs{display:flex;gap:6px;border-bottom:2px solid var(--border);margin-bottom:16px}
.hol-widget-tab-btn{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 6px 10px;cursor:pointer}
.hol-widget-tab-btn:hover{color:var(--text)}
.hol-widget-tab-btn.active{color:var(--text);border-bottom-color:#2a78d6}
.hol-widget-tab-panel[hidden]{display:none}
.hol-cal-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:720px){.hol-cal-layout{grid-template-columns:1fr}}
.hol-cal-title{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.hol-cal-range{font-weight:500;color:var(--text);text-transform:none;letter-spacing:0}
.hol-info-ic{width:14px;height:14px;border-radius:50%;background:var(--border);color:var(--text);font-size:.62rem;display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:help;text-transform:none}
.hol-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.hol-dow{font-size:.62rem;text-align:center;color:var(--muted);font-weight:700;padding-bottom:3px}
.hol-cell{aspect-ratio:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;background:#f7f8fb;color:#b7bdc9}
.hol-cell.in-range{background:var(--light);color:var(--text)}
.hol-cell.today{outline:2px solid #2a78d6;outline-offset:-2px;font-weight:700}
.hol-cell.holiday{background:#e4f7ee;color:#0f7a4f;font-weight:700}
.hol-cell .dot{width:4px;height:4px;border-radius:50%;background:#1baf7a;margin-top:1px}
.hol-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.hol-legend span{display:inline-flex;align-items:center;gap:5px}
.hol-legend .sw{width:9px;height:9px;border-radius:3px;display:inline-block}
.hol-sw-holiday{background:#e4f7ee;border:1px solid #1baf7a}
.hol-sw-outside{background:#f7f8fb;border:1px solid var(--border)}
.hol-sw-today{background:var(--light);border:2px solid #2a78d6}
.hol-list-head{display:flex;justify-content:flex-end;margin-bottom:10px}
.hol-list{display:flex;flex-direction:column;gap:8px}
.hol-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border);border-radius:8px}
.hol-date-chip{flex:0 0 auto;width:42px;text-align:center;background:#e4f7ee;color:#0f7a4f;border-radius:7px;padding:5px 0;line-height:1.1}
.hol-date-chip .d{font-size:1.02rem;font-weight:700;display:block}
.hol-date-chip .m{font-size:.6rem;text-transform:uppercase;letter-spacing:.03em}
.hol-info{flex:1;min-width:0}
.hol-info .name{font-weight:600;font-size:.87rem;color:var(--text)}
.hol-info .meta{font-size:.72rem;color:var(--muted);margin-top:1px}
.hol-info .meta .flag{color:#c07f00;font-weight:600}
.hol-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.hol-actions a,.hol-actions button.linklike{font-size:.72rem;font-weight:600}
.hol-actions a.danger{color:#d03b3b}
.hol-archived-toggle{margin-top:14px;font-size:.78rem;color:var(--accent);cursor:pointer;font-weight:600}
.hol-archived-list{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.hol-archived-list.open{display:block}
.hol-archived-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:.78rem;color:var(--muted)}

/* Calendar tab — bigger, standalone Gregorian + broadcast calendars */
.cal-nav{display:flex;align-items:center;gap:10px;margin:16px 0;flex-wrap:wrap}
.cal-nav-form{display:flex;gap:8px}
.cal-nav-form select{border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:.85rem;background:var(--white);color:var(--text)}
/* Free-type year field -- explicit request, 2026-09-17 ("where i have
   to type year in the dropdown?") -- the year selector used to be a
   fixed <select> list (today ±10 years only); this lets anyone reach
   any year 1900-2100 directly, same range _calendar_tab_context's own
   URL-param validation already accepts. */
.cal-year-input{border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:.85rem;background:var(--white);color:var(--text);width:80px;font-variant-numeric:tabular-nums}
.big-cal-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.big-cal-layout{grid-template-columns:1fr}}
.big-cal-panel h3{margin:0 0 2px}
.big-cal-panel .hint{margin:0 0 16px}
.big-cal-table{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.big-cal-table-weeks{grid-template-columns:44px repeat(7,1fr)}
.big-cal-dow{font-size:.75rem;font-weight:700;color:var(--muted);text-align:center;padding-bottom:4px}
.big-cal-week-head{visibility:hidden}
.big-cal-cell{aspect-ratio:1.3;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--text);background:none;font-family:inherit;padding:0;margin:0}
button.big-cal-cell{cursor:pointer}
.big-cal-cell.out-of-range{border-color:var(--light);color:var(--muted);opacity:.6}
.big-cal-cell.selected{outline:2px solid var(--accent);outline-offset:1px}
.big-cal-cell:hover{border-color:var(--accent)}
/* Explicit request, 2026-09-17, matched to a real Calendarpedia
   reference calendar the user shared: Sunday/Saturday are plain
   colored TEXT (no box), a holiday is a background BOX on top of
   whatever day it falls on -- these are independent, not mutually
   exclusive, classes (see calendar_page.html), so a holiday landing on
   a Saturday shows blue text *and* the box together, same as the
   reference. Company Holiday (a real admin-entered Holiday record) and
   Federal Holiday (the computed 5 U.S.C. 6103 reference, no admin
   record) get their own distinct colors -- explicit request, same day
   ("companey holiday put in purple") -- Company wins if a date happens
   to be both (see the elif in the template). Sunday/Saturday/Federal/
   Company are all bold + larger; only a plain weekday stays normal
   weight/size -- explicit follow-up, 2026-09-17 ("whay all sat no are
   not showing in bold and same font" -- Saturday was mistakenly left
   out of the earlier bold+big pass). */
.big-cal-cell.sun-day{color:#a3123a;font-weight:700;font-size:1.25rem}
.big-cal-cell.sat-day{color:#1d4ea3;font-weight:700;font-size:1.25rem}
.big-cal-cell.company-holiday{background:#ede7f6;font-weight:700;font-size:1.25rem}
.big-cal-cell.federal-holiday{background:#fbe2e5;font-weight:700;font-size:1.25rem}
/* Today -- explicit request, 2026-09-17 ("todays date marked a green").
   Declared AFTER the holiday/weekend rules (same specificity, later
   wins) so today's green always shows even when today also happens to
   be a holiday/weekend -- "where is today" is a distinct, higher-
   priority signal than what kind of day it is. */
.big-cal-cell.today{background:#e3f5e6;color:#1f7a3d;border-color:#8fd19e;font-weight:700}
.cal-dots{display:flex;gap:3px}
.cal-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.cal-dot-holiday{background:#5e35b1}
.cal-dot-event{background:#4a3aa7}
.big-cal-week-badge{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:auto;border-radius:50%;background:var(--accent);color:var(--accent-text);font-size:.75rem;font-weight:700}
/* Color-key legend at the top of the Calendar page -- explicit request,
   2026-09-17 ("put att details meaning of each colur at top"). Swatches
   reuse the exact same colors as the grid cells above, so the legend
   and the grid never drift out of sync. Sunday/Saturday swatches are
   solid-filled (representing a TEXT color in the grid); Today/holiday
   swatches are pale-bg-plus-border (representing a BOX/background in
   the grid) -- the swatch style itself hints at which kind of marking
   it stands for. */
.cal-legend{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0 16px;font-size:.85rem}
.cal-legend-item{display:flex;align-items:center;gap:6px}
.cal-legend-swatch{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}
.cal-legend-swatch.cal-legend-today{background:#e3f5e6;border:1px solid #8fd19e}
.cal-legend-swatch.cal-legend-company-holiday{background:#ede7f6;border:1px solid #c7b8e8}
.cal-legend-swatch.cal-legend-federal-holiday{background:#fbe2e5;border:1px solid #f2b8c0}
.cal-legend-swatch.cal-legend-sunday{background:#a3123a}
.cal-legend-swatch.cal-legend-saturday{background:#1d4ea3}

/* Per-month panel title color, matched to the 12-color header palette
   in the Calendarpedia reference PDF the user shared -- explicit
   request, 2026-09-17 ("for each month title tab use different colour
   as i shared in the pic"). cal-month-N uses calendar_view_month (1-12)
   directly, no separate lookup needed in the view. */
.cal-month-header{padding:7px 14px;border-radius:8px;margin:0 0 10px;display:inline-block}
.cal-month-header.cal-month-1{background:#6b93c4;color:#fff}
.cal-month-header.cal-month-2{background:#bfe3ea;color:#1a3c40}
.cal-month-header.cal-month-3{background:#2e9e93;color:#fff}
.cal-month-header.cal-month-4{background:#c9e6a8;color:#2c4a12}
.cal-month-header.cal-month-5{background:#5b7a1f;color:#fff}
.cal-month-header.cal-month-6{background:#f5e050;color:#5a4b00}
.cal-month-header.cal-month-7{background:#f0c419;color:#5a4200}
.cal-month-header.cal-month-8{background:#e8912d;color:#fff}
.cal-month-header.cal-month-9{background:#d9531e;color:#fff}
.cal-month-header.cal-month-10{background:#e2735e;color:#fff}
.cal-month-header.cal-month-11{background:#a480cf;color:#fff}
.cal-month-header.cal-month-12{background:#c3cdf0;color:#233166}

/* Year at a Glance -- explicit request, 2026-09-17 ("look here 12
   colours"), all 12 months at once, read-only. .cal-month-header above
   is reused verbatim for each mini month's title. Sun/Sat/holiday
   colors match the main Calendar Month grid's own palette exactly
   (same hex values), just without the bold/larger-size treatment --
   there isn't room for that at this scale. */
.year-glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.year-glance-month{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.year-glance-month .cal-month-header{margin:0;border-radius:0;text-align:center;font-weight:700;font-size:.85rem}
.year-glance-table{width:100%;border-collapse:collapse;font-size:.72rem;font-variant-numeric:tabular-nums}
.year-glance-table th{padding:3px 0;color:var(--muted);font-weight:600}
.year-glance-table td{padding:3px 0;text-align:center;color:var(--text)}
.year-glance-table td.sun-day{color:#a3123a;font-weight:700}
.year-glance-table td.sat-day{color:#1d4ea3;font-weight:700}
.year-glance-table td.company-holiday{background:#ede7f6}
.year-glance-table td.federal-holiday{background:#fbe2e5}
.year-glance-table td.today{background:#e3f5e6;color:#1f7a3d;font-weight:700}
@media(max-width:900px){.year-glance-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.year-glance-grid{grid-template-columns:1fr}}

.day-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.day-detail-head b{font-size:.95rem}
.day-detail-holiday{background:#ede7f6;color:#5e35b1;border-radius:7px;padding:6px 10px;font-size:.8rem;margin-bottom:10px;font-weight:600}
.day-event-row{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
.day-event-row:first-of-type{border-top:0}
.day-event-row .t{flex:0 0 auto;width:110px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.day-event-row .n{flex:1;font-weight:600;font-size:.87rem}
.day-event-row .n .meta{font-weight:400;font-size:.75rem;color:var(--muted);margin-top:2px}
.day-event-row .a{flex:0 0 auto;display:flex;gap:8px;font-size:.75rem}
.day-event-row .a a{font-weight:600}
.day-event-row .a a.danger{color:#d03b3b}
.add-form-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.add-form-panel h4{margin:0 0 10px}

.modal-backdrop{position:fixed;inset:0;background:rgba(15,20,30,.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.modal-backdrop[hidden]{display:none}
.modal-box{position:relative;background:var(--white);border-radius:var(--radius-card);box-shadow:0 20px 60px rgba(0,0,0,.3);padding:24px 26px;width:100%;max-width:520px;max-height:85vh;overflow-y:auto}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.modal-close:hover{color:var(--text)}

/* Contacts / Address Book */
.contacts-tabs{display:flex;gap:6px;border-bottom:2px solid var(--border);margin:18px 0}
.contacts-tab-btn{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 6px 11px;cursor:pointer}
.contacts-tab-btn:hover{color:var(--text)}
.contacts-tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.contacts-tab-panel[hidden]{display:none}
.contacts-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}
.contacts-search{display:flex;gap:10px;align-items:center;flex:1;flex-wrap:wrap}
.contacts-search .search-box{flex:1;min-width:200px;border:1px solid var(--border);border-radius:7px;padding:9px 12px;font-size:.85rem;background:var(--white);color:var(--text)}
.contacts-search select{border:1px solid var(--border);border-radius:7px;padding:9px 10px;font-size:.85rem;background:var(--white);color:var(--text)}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:end;margin-bottom:18px}
.filter-grid .field{display:flex;flex-direction:column;gap:5px}
.filter-grid label{font-size:.78rem;font-weight:600;color:var(--muted)}
.filter-grid input,.filter-grid select{border:1px solid var(--border);border-radius:7px;padding:9px 12px;font-size:.85rem;background:var(--white);color:var(--text);width:100%}
.filter-grid .field-actions{display:flex;gap:8px}
.contact-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.contact-letter-group{display:flex;flex-direction:column;gap:8px}
.contact-letter-group+.contact-letter-group{margin-top:4px}
.contact-letter-heading{font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft-text);background:var(--soft-bg);border-radius:6px;padding:4px 10px;width:fit-content}
.contact-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--white)}
.contact-row .avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--soft-bg);color:var(--soft-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.contact-row .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} /* profile picture from User Management (2026-10-07) */
.contact-row .c-info{flex:1;min-width:0}
.contact-row .c-info .name{font-weight:700;font-size:.9rem}
.contact-row .c-info .meta{font-size:.76rem;color:var(--muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.contact-row .c-info .meta.share-meta{margin-top:4px}
.contact-row .c-actions{flex:0 0 auto;display:flex;gap:8px;font-size:.76rem;align-items:center}
.contact-row .c-actions a,.contact-row .c-actions button.linklike{font-weight:600}
.contact-row .c-actions a.danger{color:#d03b3b}
.tag{border-radius:20px;padding:3px 10px;font-size:.68rem;font-weight:700}
.new-badge{background:#a3123a;color:#fff;border-radius:20px;padding:2px 7px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:4px}
.tag-c0{background:#e4f7ee;color:#0f7a4f}
.tag-c1{background:#fdece3;color:#b74b1f}
.tag-c2{background:#eee9fb;color:#4a3aa7}
.tag-c3{background:#fbe9f0;color:#a8446a}
.tag-c4{background:#eef0f4;color:#5b6472}
.resolved-row td{opacity:.6}
.starred-item{padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--white);margin-bottom:10px}
.starred-item small{color:var(--muted);margin-left:6px}
.starred-item p{margin:6px 0}
.category-other-wrap[hidden]{display:none}
.leave-type-other-wrap[hidden]{display:none}
.category-manage{margin-top:16px}
.category-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.category-chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 12px;font-size:.76rem;font-weight:700}
.category-chip.inactive{opacity:.55}
.category-chip a{color:inherit;text-decoration:none;font-weight:400;opacity:.75;cursor:pointer}
.category-chip a:hover{opacity:1}
.category-chip a.danger{color:#d03b3b;opacity:.85}
.category-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.category-form input[type="text"]{border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.85rem;background:var(--white);color:var(--text)}
.share-form{margin:-2px 0 6px 62px}
.share-form select{border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:.76rem;background:var(--white);color:var(--muted)}
.archived-toggle{margin-top:16px;font-size:.78rem;color:var(--accent);cursor:pointer;font-weight:600}
.archived-list{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.archived-list.open{display:block}
.archived-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:.78rem;color:var(--muted)}
.archived-row input[type=checkbox]{width:auto;margin:0}
.hw-check-label{display:flex;align-items:center;gap:8px;cursor:pointer}

/* auto-fit (not a fixed column count) so every tile sits on one line on a
   wide screen however many are shown -- a fixed 5 left the 6th tile alone on
   a second line with a big empty gap (2026-09-30). Narrower screens get an
   even 3 or 2 per line, so a tile is never left alone on a row. */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:18px 0}
@media(max-width:1499px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
.kpi-tile{background:var(--white);border:1px solid var(--border);border-top:3px solid var(--kc);border-radius:var(--radius-card);padding:16px 18px;box-shadow:var(--shadow-card)}
.kpi-tile .lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.kpi-tile .val{font-size:1.5rem;font-weight:700;margin:6px 0 0;font-variant-numeric:tabular-nums}
.dept-bars{display:flex;align-items:flex-end;gap:14px;height:130px;margin-top:6px}
.dept-bar-col{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end}
.dept-bar-col .n{font-size:.7rem;font-weight:700;margin-bottom:4px;font-variant-numeric:tabular-nums}
.dept-bar-col .bar{width:100%;border-radius:4px 4px 0 0;min-height:2px}
.dept-bar-col .lb{font-size:.65rem;color:var(--muted);margin-top:6px;text-align:center}

.by-type-table{width:100%;border-collapse:collapse;min-width:560px}
.by-type-table th{text-align:left;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 8px 8px 0;border-bottom:1px solid var(--border);white-space:nowrap}
.by-type-table td{padding:8px 8px 8px 0;font-size:.85rem;vertical-align:middle;border-bottom:0}
.by-type-table tr.last-in-group td{border-bottom:1px solid var(--border);padding-bottom:14px}
.by-type-table tr.type-row:not(:first-child) td{padding-top:16px}
.by-type-table .type-name{font-weight:700;display:flex;align-items:center;gap:8px}
.by-type-table .type-dot{width:8px;height:8px;border-radius:50%;flex:none}
.by-type-table .market-cell{color:var(--muted);font-size:.78rem;font-weight:600;white-space:nowrap;padding-left:20px!important;position:relative}
.by-type-table .market-cell::before{content:'';position:absolute;left:6px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--border);transform:translateY(-50%)}
.by-type-table .mini-bar{width:120px;height:8px;border-radius:999px;overflow:hidden;display:flex;background:var(--border)}
.by-type-table .mini-bar span{height:100%;display:block}
.by-type-table .market-row .mini-bar{opacity:.75;height:6px}
.by-type-table .num-head{text-align:center;width:70px}
.by-type-table .num-head.appr{color:#1f7a3d}
.by-type-table .num-head.pend{color:#8a5a00}
.by-type-table .num-head.rej{color:#a3123a}
.by-type-table .num{text-align:center;width:70px;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
.by-type-table .num.total-cell{font-weight:700;font-size:.9rem}
.by-type-table .num.appr{color:#1f7a3d}
.by-type-table .num.pend{color:#8a5a00}
.by-type-table .num.rej{color:#a3123a}
.by-type-table .market-row .num{opacity:.8}

.feed-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:0}
.feed-badge{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:6px;flex:none;background:var(--soft-bg);color:var(--soft-text);margin-top:2px}
.feed-who{flex:1;font-size:.85rem;min-width:0}
.feed-who .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-market{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);background:var(--soft-bg);padding:2px 7px;border-radius:999px}
.feed-title{display:block;color:var(--text);font-size:.8rem;margin-top:3px;font-weight:600}
.feed-time{font-size:.72rem;color:var(--muted);flex:none;padding-top:2px;white-space:nowrap}

.dash-widget-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:980px){.dash-widget-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dash-widget-grid{grid-template-columns:1fr}}
.dash-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:18px 20px;cursor:grab;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.dash-widget:active{cursor:grabbing}
.dash-widget.wide{grid-column:span 2}
@media(max-width:640px){.dash-widget.wide{grid-column:span 1}}
.dash-widget.dragging{opacity:.4}
.dash-widget.drag-over{box-shadow:0 0 0 2px var(--accent),var(--shadow-card);transform:scale(1.01)}
/* "My Update" tab drag-to-reorder -- explicit request, 2026-08-28,
   extending the Organization Overview tab's drag capability above to
   every role's own tab. Deliberately does NOT reuse .dash-widget's own
   background/border/padding rules -- these widgets keep their existing
   .panel/.cards look untouched; only the drag affordance is added. */
.mine-widget-draggable{cursor:grab;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.mine-widget-draggable:active{cursor:grabbing}
.mine-widget-draggable.dragging{opacity:.4}
.mine-widget-draggable.drag-over{box-shadow:0 0 0 2px var(--accent);transform:scale(1.01)}
.grid.grid-3 .mine-wide{grid-column:1/-1}
.dw-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.dw-handle{color:var(--muted);font-size:1.1rem;line-height:1;flex:none;letter-spacing:-2px}
.dw-title{font-weight:700;font-size:1rem;flex:1}

/* Per-widget self-service hide, plus the KPI-tile variant (those are
   <a> tiles, so the button lives in a small sibling wrapper instead of
   inside the tile itself -- a <button> can't nest inside an <a>). */
.widget-hide-btn{flex:none;margin-left:auto;background:none;border:1px solid transparent;border-radius:8px;padding:3px 9px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;white-space:nowrap}
.widget-hide-btn:hover{background:#fbe2e5;color:#a3123a;border-color:#fbe2e5}
.widget-hideable{position:relative}
.widget-hideable>.widget-hide-btn{position:absolute;top:8px;right:10px}
.ticker-item+.ticker-item::before{content:'\2022';margin:0 14px;opacity:.7}
.pay-na-wrap{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-weight:400}
.pay-na-wrap.is-disabled{opacity:.5;cursor:not-allowed}
.pay-na-wrap .hint-inline{color:var(--muted);font-size:.8rem}
.manual-cover{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--border);border-top:6px solid var(--accent);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:56px 24px 40px;margin:0 0 22px;text-align:center;min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.manual-cover>*:not(.manual-cover-watermark){position:relative;z-index:1}
.manual-cover-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78%;max-width:640px;opacity:.07;pointer-events:none;z-index:0}
.manual-cover-brand img{max-height:96px;max-width:340px}
.manual-cover-logo-text{display:inline-block;font-size:2.2rem;font-weight:800;color:var(--accent);border:3px solid var(--accent);border-radius:12px;padding:6px 18px}
.manual-cover-company{margin:4px 0 0;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.manual-cover-title{font-family:Georgia,'Times New Roman',serif;font-size:3.2rem;font-weight:400;margin:28px 0 4px}
.manual-cover-subtitle{font-size:1.15rem;color:var(--muted);margin:0}
.manual-cover-icon{font-size:5rem;margin:30px 0}
.manual-cover-meta p{margin:4px 0;font-family:Georgia,'Times New Roman',serif}
.manual-cover-date{color:var(--muted);font-size:.85rem}
@media print{.manual-cover{min-height:92vh;border:1px solid #999;box-shadow:none;break-after:page;page-break-after:always}}
.leave-balance-title{margin:12px 0 6px;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.leave-balance-title:first-of-type{margin-top:0}
.leave-balance-widget{position:relative}
.kpi-tile-wrap{position:relative;display:flex;cursor:grab;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.kpi-tile-wrap:active{cursor:grabbing}
.kpi-tile-wrap.dragging{opacity:.4}
.kpi-tile-wrap.drag-over{border-radius:var(--radius-card);box-shadow:0 0 0 2px var(--accent)}
.kpi-tile-wrap .kpi-tile{display:block;flex:1;min-width:0;padding-left:38px}
.kpi-tile-wrap .dw-handle{position:absolute;top:17px;left:14px;z-index:1}
.kpi-tile-wrap .widget-hide-btn{position:absolute;top:6px;right:6px;background:var(--white)}
.dw-body .stat-num{font-size:1.6rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dw-body{min-width:0;max-height:300px;overflow-y:auto}
.panel-scroll{max-height:300px;overflow-y:auto;margin-top:4px}
.dw-body,.reference-link-list,.panel-scroll{scrollbar-width:thin}
.dw-body::-webkit-scrollbar,.reference-link-list::-webkit-scrollbar,.panel-scroll::-webkit-scrollbar{width:8px}
.dw-body::-webkit-scrollbar-thumb,.reference-link-list::-webkit-scrollbar-thumb,.panel-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.dw-body::-webkit-scrollbar-track,.reference-link-list::-webkit-scrollbar-track,.panel-scroll::-webkit-scrollbar-track{background:transparent}

/* Any dashboard card/tile/row that links through to the page behind
   its number -- keeps the original box's own layout (block/flex/grid
   are all set by that element's own class already) and just resets
   link defaults plus a hover cue. */
.dash-clickable{color:inherit;text-decoration:none;cursor:pointer;transition:background-color .12s ease}
.dash-clickable:hover{background-color:var(--soft-bg)}
/* Same idea for a plain inline bit of text (a widget title, a table
   cell) rather than a whole boxed card -- underline on hover instead
   of a background tint. */
.quiet-link{color:inherit;text-decoration:none;cursor:pointer}
.quiet-link:hover{text-decoration:underline}
a.dw-title{display:inline-block}

.expense-compare{display:flex;align-items:flex-end;gap:14px;height:80px;margin:10px 0}
.expense-compare .bar-col{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end}
.expense-compare .n{font-size:.7rem;font-weight:700;margin-bottom:4px}
.expense-compare .bar{width:60%;border-radius:4px 4px 0 0;min-height:2px}
.expense-compare .lb{font-size:.65rem;color:var(--muted);margin-top:6px}
.expense-trend-svg{display:block;margin-top:6px}
.status-strip{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.status-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:8px}
.status-bar span{height:100%}
.who-out-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.who-out-cols h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px;font-weight:700}
.who-out-person{display:flex;align-items:center;gap:9px;font-size:.8rem;margin-bottom:11px}
.who-out-person:last-child{margin-bottom:0}
.who-out-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem;font-weight:800;flex:none}
.who-out-person .meta{color:var(--muted);font-size:.68rem}
/* Business Analytics' Age Mix rows are wrapped in a link (drill-down
   to All Users) -- explicit request, 2026-09-22 ("on business
   analytic board can links be clickable"). */
.funnel-row-link{display:block;text-decoration:none;color:inherit;border-radius:6px;transition:background .12s}
.funnel-row-link:hover{background:var(--light)}
.funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.7rem}
.funnel-row:last-child{margin-bottom:0}
.funnel-row .lb{width:110px;flex:none;color:var(--muted);font-weight:600}
.funnel-track{flex:1;height:22px;background:var(--light);border-radius:4px}
.funnel-fill{height:100%;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-weight:700;font-size:.68rem;min-width:20px}
.health-flag{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);background:#fdf1d6;border:1px solid #f0d999;font-size:.8rem}
.activity-row{display:flex;gap:10px;padding:8px 0;border-top:1px solid #edf1f7;font-size:.78rem;align-items:flex-start}
.activity-row:first-child{border-top:0}
.activity-ic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex:none}
.activity-row .when{color:var(--muted);font-size:.68rem;margin-left:auto;white-space:nowrap}
.event-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #edf1f7;font-size:.8rem}
.event-row:first-child{border-top:0}
.event-date-chip{width:44px;height:44px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;flex:none}
.event-date-chip .d{font-size:1.05rem;font-weight:800;line-height:1}
.event-date-chip .m{font-size:.6rem;text-transform:uppercase;letter-spacing:.03em}

.birthday-today-panel{border-color:#f0d999;background:#fdf8ec}
.birthday-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #edf1f7}
.birthday-row:first-child{border-top:0}
.birthday-avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--soft-bg);color:var(--soft-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem}
.birthday-row .b-info{display:flex;flex-direction:column;gap:2px}
.birthday-row .b-meta{font-size:.74rem;color:var(--muted)}
.event-row .meta{color:var(--muted);font-size:.7rem}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}.who-out-cols{grid-template-columns:1fr}}

.reference-links-panel{margin-top:18px}
.reference-link-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:300px;overflow-y:auto}
.reference-link-list.no-scroll{max-height:none;overflow-y:visible}
.reference-link-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--white)}
.reference-link-row .rl-num{flex:0 0 auto;color:var(--muted);font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums;padding-top:1px}
.reference-link-row .rl-main{flex:1;min-width:0}
.reference-link-row .rl-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.reference-link-row .rl-title{font-weight:700;font-size:.88rem;word-break:break-word}
.reference-link-row .rl-desc{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.5}
.reference-link-row .rl-desc p{margin:0 0 6px}
.reference-link-row .rl-desc p:last-child{margin-bottom:0}
.reference-link-row .rl-desc ul,.reference-link-row .rl-desc ol{margin:0 0 6px 20px;padding:0}
.reference-link-row .rl-actions{flex:0 0 auto;display:flex;gap:10px;font-size:.76rem;align-items:center;white-space:nowrap}
.reference-link-row .rl-actions a,.reference-link-row .rl-actions button.linklike{font-weight:600}
.reference-link-row .rl-actions a.danger{color:#d03b3b}
.rich-toolbar{display:inline-flex;gap:4px;margin:6px 0}
.rich-toolbar button{border:1px solid var(--border);border-radius:6px;background:var(--white);padding:5px 10px;font-size:.78rem;cursor:pointer;color:var(--text)}
.rich-toolbar button:hover{background:var(--soft-bg)}
.rich-editor{border:1px solid var(--border);border-radius:7px;padding:10px 12px;min-height:90px;font-size:.85rem;background:var(--white);color:var(--text);line-height:1.5}
.rich-editor:focus{outline:2px solid var(--accent);outline-offset:1px}
.rich-editor ul,.rich-editor ol{margin:0 0 6px 20px;padding:0}
.rich-editor p{margin:0 0 6px}
.rich-text-source{display:none}
.card span{color:var(--muted)}
.alert{border-color:#e3b3ba}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* My Profile's Profile View panels only -- CSS Grid's default
   align-items:stretch makes every panel in a row match the row's
   tallest one, leaving white space under any shorter panel (e.g.
   Contact next to the much longer Employment panel). Deliberately a
   separate modifier, not a change to .grid itself, which many other
   already-shipped pages share and weren't asked to change. */
.grid-align-start{align-items:start}
/* My Profile only -- panel headings get a full-bleed grey box instead of
   plain text, explicit request 2026-09-10. Scoped to these two tab IDs
   (unique to this page) rather than .panel h3 generally, which every
   other panel in the app also uses and wasn't asked to change. */
#profile-tab-view .panel h3,#profile-tab-settings .panel h3{margin:-20px -20px 16px;padding:14px 20px;background:var(--light);border-radius:var(--radius-card) var(--radius-card) 0 0;border-bottom:1px solid var(--border)}
.grid.grid-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1200px){.grid.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.grid.grid-3{grid-template-columns:1fr}}
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.sitemap-links{list-style:none;margin:0;padding:0}
.sitemap-links li{margin:4px 0}
.sitemap-links a{color:var(--text);text-decoration:none;display:block;padding:6px 8px;border-radius:var(--radius);margin:0 -8px}
.sitemap-links a:hover{background:var(--soft-bg);color:var(--accent)}
.panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;margin-bottom:18px;box-shadow:var(--shadow-card)}

.manual-toc{columns:2;column-gap:24px}
@media(max-width:700px){.manual-toc{columns:1}}
.manual-toc a{display:block;padding:6px 0;color:var(--text);break-inside:avoid}
.manual-toc a:hover{color:var(--accent);text-decoration:none}
.manual-toc .num{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:8px}
.manual-section{scroll-margin-top:16px}
.manual-section h2{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--border);padding-bottom:10px;margin-bottom:14px}
.manual-section h2 .num{color:var(--accent);font-size:.85em}
.manual-section h3{margin-top:18px}
.manual-section p{margin:0 0 10px}
.manual-section ul,.manual-section ol{margin:0 0 12px;padding-left:22px}
.manual-section li{margin-bottom:6px}
.manual-badge{display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:var(--soft-bg);color:var(--soft-text);margin-left:8px;vertical-align:2px}
.manual-badge.admin{background:#fdf1d6;color:#8a5a00}
.new-badge{display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:#e3f5e6;color:#1e7d32;margin-left:8px;vertical-align:2px}
.manual-screenshot{margin:14px 0;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:var(--white)}
.manual-screenshot img{display:block;width:100%;height:auto}
.manual-screenshot figcaption{padding:8px 14px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--border);background:var(--light)}
.manual-back-to-top{display:inline-block;margin-top:6px;font-size:.8rem}
.approval{display:flex;justify-content:space-between;border-bottom:1px solid #edf1f7;padding:13px 0}
.approval span{background:var(--soft-bg);color:var(--soft-text);border-radius:calc(var(--radius) - 2px);padding:6px 10px;font-weight:600}
table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
th,td{padding:13px;border-bottom:1px solid #edf1f7;text-align:left}
th{background:var(--thead-bg);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.4px;color:var(--muted)}
tr:hover td{background:#f8fafd}
.form-panel{max-width:800px}
.form-panel-wide{max-width:1300px}
.dept-assignment-table{width:100%;border-collapse:collapse;margin:10px 0}
.dept-assignment-table th,.dept-assignment-table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left}
.dept-assignment-table select{width:100%}
/* Employment History timeline (Edit User) -- highlights which cell(s)
   changed vs. the record right before it, computed in
   _employment_history_rows (core/views.py), 2026-09-21. */
.emp-history-table td.emp-hist-changed{background:#fff3d6;color:#8a5a00;font-weight:600;border-radius:4px}
/* Explicit request, 2026-09-23 ("current job titile should apear in
   profile") -- a clearly-labeled current-state line above the
   historical row list, sourced from the latest row (row 0, since
   employment_history_rows sorts newest-first) so it never has to be
   inferred by scanning the table. */
.emp-hist-current{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px}
.emp-hist-current p{margin:2px 0 0;font-size:.95rem}
.form-row{margin:14px 0}
.form-row label{display:block;margin-bottom:5px;font-size:.86rem}
.form-row input[type=text],.form-row input[type=datetime-local],.form-row select{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;font-size:.86rem;width:100%;max-width:420px;box-sizing:border-box}
.form-row input[type=checkbox]{width:auto;margin:0 6px 0 0}
.form-row ul{list-style:none;padding:0;margin:6px 0}
.form-row ul li{padding:3px 0;font-size:.86rem}
.form-row ul label{display:inline;font-weight:400;margin:0}
.form-row-checkbox{margin:14px 0;display:flex;align-items:center;gap:8px}
.form-row-checkbox input[type=checkbox]{width:auto;margin:0}
.form-row-checkbox label{margin:0;font-size:.86rem;font-weight:600}
.danger-text{color:#a3123a!important}

/* Polls */
.poll-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.poll-row{display:block;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);text-decoration:none;color:inherit}
.poll-row:hover{border-color:var(--accent-light)}
.poll-row-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.poll-row-question{font-weight:700;font-size:.9rem;color:var(--text)}
.poll-row-meta{font-size:.76rem;color:var(--muted);margin-top:4px}
.poll-question-block{border:1px solid var(--border);border-radius:var(--radius-card);padding:14px 16px;margin:14px 0;background:var(--light)}
.poll-question-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.poll-question-head .qnum{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;flex:none}
.poll-question-text{flex:1;min-width:200px;max-width:420px;border:1px solid var(--border);border-radius:var(--radius);padding:8px 11px;font-size:.86rem}
.poll-question-choicetype{width:auto;border:1px solid var(--border);border-radius:var(--radius);padding:7px 9px;font-size:.82rem}
.poll-question-options{margin:10px 0 6px}
.poll-option-row{display:flex;align-items:center;gap:8px;margin:8px 0}
.poll-option-row input[type=text]{flex:1;max-width:420px;border:1px solid var(--border);border-radius:var(--radius);padding:8px 11px;font-size:.86rem}
.poll-vote-question,.poll-result-question{margin:18px 0}
.poll-vote-question b,.poll-result-question b{display:block;font-size:.88rem;margin-bottom:6px}
.poll-detail-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.poll-detail-meta{font-size:.8rem;color:var(--muted);margin:8px 0 16px}
.poll-vote-form{margin:14px 0}
.poll-vote-option{display:block;padding:9px 4px;font-size:.88rem;cursor:pointer}
.poll-vote-option input{margin-right:8px}
.poll-results-heading{margin-top:22px}
.poll-result-row{margin:12px 0}
.poll-result-label{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text)}
.poll-result-bar{background:var(--soft-bg);border-radius:6px;height:8px;overflow:hidden;margin-top:5px}
.poll-result-fill{background:var(--accent);height:100%;border-radius:6px}
.filter-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.filter-bar .field{display:flex;flex-direction:column;min-width:150px}
.filter-bar .field label{font-size:.78rem;margin-bottom:2px;font-weight:600}
.filter-bar .field select,.filter-bar .field input{margin-top:0}
.filter-bar .filter-actions{flex-direction:row;gap:8px;align-items:center;min-width:0}
.hint{padding:12px;background:var(--soft-bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--soft-text)}
.msg{background:#e9f9ed;border:1px solid #bce8c6;border-radius:var(--radius);padding:12px;margin:12px 0}
.msg-error{background:#fbe2e5;border-color:#f3aebb;color:#8a1730}
.msg-warning{background:#fdf1d6;border-color:#f0d999;color:#8a5a00}
.msg-info,.msg-debug{background:#e2ecfb;border-color:#b8d0f5;color:#1d4ea3}
.amt-neutral{color:var(--text)}
.amt-approved{color:#1f7a3d}
.amt-rejected{color:#a3123a}
.amt-pending{color:#b5710a}
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.actions a,.user-pill{display:block;border:1px solid var(--border);padding:12px;border-radius:var(--radius);background:#fbfcfe;margin:8px 0}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.actions-row:empty{display:none} /* 2026-10-02: no blank gap when there are no action buttons */

/* Status pills — semantic, intentionally independent of the active theme's accent color */
.status-pill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.status-pill.s-submitted,.status-pill.s-draft{background:#eef1f7;color:#4b5563}
.status-pill.s-pending{background:#fdf1d6;color:#8a5a00}
.status-pill.s-clarification{background:#fbe6da;color:#a34412}
.status-pill.s-approved,.status-pill.s-completed{background:#e3f5e6;color:#1f7a3d}
.status-pill.s-rejected{background:#fbe2e5;color:#a3123a}
.status-pill.s-partial{background:#e2ecfb;color:#1d4ea3}
.day-amt-breakdown{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem}
.day-amt-breakdown .approved{color:#1f7a3d;font-weight:700}
.day-amt-breakdown .rejected{color:#a3123a;font-weight:700}
.day-amt-breakdown .pending{color:#b5710a;font-weight:700}
.card.approved b{color:#1f7a3d}.card.rejected b{color:#a3123a}.card.pending b{color:#b5710a}
table td.approved{color:#1f7a3d;font-weight:700}table td.rejected{color:#a3123a;font-weight:700}table td.pending{color:#b5710a;font-weight:700}
.status-pill.s-archived{background:#eef1f7;color:#6b7280}
.status-pill.s-returned{background:#fbe6da;color:#a34412}
.status-pill.s-manager_approved,.status-pill.s-payroll_approved{background:#e3f5e6;color:#1f7a3d}
.status-pill.s-locked{background:#e8e8ee;color:#3d3d55}
.status-pill.s-verified{background:#e2ecfb;color:#1d4ea3}

/* Shared workflow step-by-step progress tracker (e.g. Submitted -> Verified ->
   Manager Decision) -- generic so every workflow form's review/status page can
   reuse the same component instead of each getting its own copy. */
.wf-progress{display:flex;align-items:flex-start;gap:0;margin:14px 0;flex-wrap:wrap}
.wf-step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:120px}
.wf-dot{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:700;font-size:.85rem;border:2px solid var(--border);background:#fff;color:var(--muted);flex:none}
.wf-step-label{font-size:.78rem;font-weight:700;margin-top:6px;color:var(--muted)}
.wf-step-label small{display:block;font-weight:500;color:var(--muted);margin-top:2px}
.wf-step.wf-done .wf-dot{background:#1f7a3d;border-color:#1f7a3d;color:#fff}
.wf-step.wf-done .wf-step-label{color:#1f7a3d}
.wf-step.wf-current .wf-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.wf-step.wf-current .wf-step-label{color:var(--accent)}
.wf-step.wf-rejected .wf-dot{background:#a3123a;border-color:#a3123a;color:#fff}
.wf-step.wf-rejected .wf-step-label{color:#a3123a}
.wf-step.wf-returned .wf-dot{background:#a34412;border-color:#a34412;color:#fff}
.wf-step.wf-returned .wf-step-label{color:#a34412}
.wf-track{flex:1 1 32px;height:2px;background:var(--border);margin:15px 4px 0;min-width:24px}
.wf-track-done{background:#1f7a3d}

/* Timesheet — weekly grid */
.week-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}
.week-nav .week-label{font-weight:700;font-size:1.02rem;min-width:200px;text-align:center}
.ts-emp-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:14px 26px;margin-bottom:6px}
.ts-emp-grid .val{font-weight:600}
.ts-scroll{overflow-x:auto}
.ts-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ts-table th,.ts-table td{border:1px solid var(--border);padding:0;text-align:center}
.ts-table thead th{background:var(--thead-bg);padding:9px 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.ts-table thead th .day-date{display:block;font-size:.9rem;color:var(--text);text-transform:none;letter-spacing:0;font-weight:800;margin-top:2px}
.ts-table th.row-label{text-align:left;padding:10px 12px;background:var(--white);font-weight:600;white-space:nowrap}
.ts-table td.hour-cell{padding:0;height:44px}
.ts-table td.hour-cell input.hr{width:100%;height:44px;border:0;text-align:center;background:transparent;color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;padding:0;margin:0;border-radius:0}
.ts-table td.hour-cell input.hr:focus{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
.ts-table td.hour-cell .hr-readonly{display:block;line-height:44px;color:var(--muted);font-weight:600}
.ts-table td.hour-cell.greyed{background:var(--light)}
.ts-table td.total-cell{font-weight:700;background:var(--soft-bg);color:var(--soft-text)}
.ts-table tr.daily-total th,.ts-table tr.daily-total td{background:var(--thead-bg);font-weight:800;padding:9px 6px}
/* Timesheet: My Timesheet / Team Timesheets / Review are three real
   pages (own URLs, own permission checks -- same one-page-per-workflow
   shape as Leave/Expense/Talent Fee), styled to read as tabs of one
   flow rather than unrelated pages, same visual language as
   .contacts-tab-btn. */
.ts-page-tabs{display:flex;gap:6px;border-bottom:2px solid var(--border);margin:18px 0}
.ts-page-tab{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 6px 11px}
.ts-page-tab:hover{color:var(--text);text-decoration:none}
.ts-page-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.weekly-totals{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:16px 0}
.wt-tile{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;text-align:center}
.wt-tile .n{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.wt-tile .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-top:2px}
.wt-tile.grand{background:var(--accent);color:#fff}
.wt-tile.grand .l{color:var(--sidebar-text)}
.team-ts-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:820px){.ts-emp-grid{grid-template-columns:repeat(2,1fr)}.weekly-totals{grid-template-columns:repeat(3,1fr)}}

/* Org chart — role hierarchy shown via theme-supplied accent steps */
.org{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.org-card{background:var(--white);border-left:5px solid var(--accent);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-card);position:relative}
.org-card span,.org-card small{display:block;color:var(--muted);margin-top:7px}
.org-card .org-also-line{font-style:italic;margin-top:2px}
.org-chat-icon{position:absolute;top:12px;right:12px;font-size:1.05rem;line-height:1;text-decoration:none;opacity:.75;transition:opacity .15s}
.org-chat-icon:hover{opacity:1}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}

/* My Files (personal drive) -- Document Repository's "My Files" tab */
.subtoggle{display:inline-flex;background:var(--light);border:1px solid var(--border);border-radius:999px;padding:3px;margin:10px 0}
.subtoggle a{border:0;background:none;padding:6px 16px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none}
.subtoggle a.active{background:var(--accent);color:#fff}
.my-files-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:14px 0}
.crumbs{font-size:.86rem;color:var(--muted)}
.crumbs b{color:var(--text)}
.crumbs .sep{color:var(--border)}
.my-files-actions{display:flex;gap:10px;flex-wrap:wrap}
.inline-form{display:flex;align-items:center;gap:6px}
.inline-form input[type=text]{border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-size:.8rem;width:170px}
.inline-form input[type=file]{font-size:.76rem;max-width:170px}
/* Document Repository -- one shared list-row look for both tabs (My
   Files and Org Docs), so they read as the same feature rather than
   two different ones stitched together. A real column list (Name,
   Status, Size, Item type, Date modified) by default, like a desktop
   file browser's Details view -- CSS grid rather than an actual
   <table> so a rename <form> can still legally span several columns
   at once (a <form> can't wrap <td> boundaries, but it can wrap grid
   items just fine). */
.doc-dropzone{margin-top:16px}
.doc-list-header,.doc-row{display:grid;grid-template-columns:24px 40px minmax(160px,1fr) 130px 90px 150px 130px 34px;column-gap:12px;align-items:center}
.bulk-select-cb{width:16px;height:16px;margin:0;cursor:pointer}
.doc-list-header{padding:0 12px 8px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.doc-list-header a.doc-col-date-header{display:flex;align-items:center;gap:4px;color:inherit;text-decoration:none;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.doc-list-header a.doc-col-date-header:hover{color:var(--text)}
.sort-arrow{font-size:.62rem}
.doc-list{display:flex;flex-direction:column;gap:8px;max-height:820px;overflow-y:auto;scrollbar-width:thin}
.doc-list::-webkit-scrollbar{width:8px}
.doc-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.doc-list::-webkit-scrollbar-track{background:transparent}
.doc-row{padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--white)}
.doc-row-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem}
/* File-type SVG badge (explicit request, 2026-09-21, "exl use this" --
   a solid-colored square with a bold white letter, e.g. Excel's green
   "X") for every attachment listing in the app outside Document
   Repository's own already-shipped .doc-row-icon. Sizing/color comes
   from the inline SVG itself (portal_extras.FILE_TYPE_BADGES); this
   is just the spacing before the filename that follows it. */
.file-type-badge{margin-right:4px}
.doc-row-main{min-width:0}
.doc-row-title{display:block;font-weight:700;font-size:.86rem;word-break:break-word;color:var(--text)}
a.doc-row-title{color:inherit;text-decoration:none}
a.doc-row-title:hover{color:var(--accent);text-decoration:underline}
.doc-row-meta{font-size:.72rem;color:var(--muted);margin-top:3px}
.doc-row-meta .archived-tag{color:#8a5a00;font-weight:600}
.doc-col-status,.doc-col-size,.doc-col-type,.doc-col-date{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-col-status .shared,button.doc-row-kebab.shared{color:var(--accent);font-weight:600}
/* Shared-status click-to-reveal -- same open/close mechanism as the ⋮
   action menus (shares the .doc-row-kebab-wrap/.doc-row-kebab/
   .doc-row-menu classes and JS), just repurposed as a pill button that
   says who instead of an icon that says what. */
button.doc-row-kebab.shared{padding:2px 6px;font-size:.76rem}
.status-popover{min-width:190px;padding:8px}
.status-popover-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:2px 6px 6px}
.status-popover-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 6px;font-size:.8rem;color:var(--text)}
.status-popover-perm{font-size:.7rem;color:var(--muted);white-space:nowrap}
.doc-row-rename-form{grid-column:3/-1;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.doc-row-rename-form input[type=text]{border:1px solid var(--accent);border-radius:6px;padding:5px 7px;font-size:.82rem;flex:1;min-width:140px}
.empty-state{padding:40px 16px;text-align:center;color:var(--muted);font-size:.84rem;border:1.5px dashed var(--border);border-radius:var(--radius-card)}
@media (max-width:760px){
  .doc-list-header{display:none}
  .doc-col-status,.doc-col-size,.doc-col-type,.doc-col-date{display:none}
  .doc-row{grid-template-columns:24px 40px 1fr 34px}
  .doc-row-rename-form{grid-column:3/-1}
}

/* Drag a row onto a folder row to move it in -- distinct from the OS
   file-drop dropzone above (that one uploads new bytes in; this one
   just reparents something already in the list). */
.doc-row[data-move-kind]{cursor:grab}
.doc-row.row-dragging{opacity:.4}
.doc-row.row-drop-target{background:#eaf1fd;border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}

/* Checkbox multi-select + bulk delete */
.bulk-bar{display:flex;align-items:center;gap:12px;background:var(--soft-bg);border:1px solid var(--accent-light);border-radius:var(--radius-card);padding:10px 16px;margin:12px 0;font-size:.82rem;color:var(--soft-text);font-weight:600}
.bulk-bar[hidden]{display:none}
.btn.danger{background:#a3123a!important;color:#fff!important}

/* ⋮ kebab dropdown -- one per row, both tabs */
.doc-row{position:relative}
.doc-row-kebab-wrap{position:relative}
.doc-row-kebab{border:0;background:none;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:3px 8px;border-radius:6px}
.doc-row-kebab:hover{background:var(--soft-bg);color:var(--soft-text)}
.doc-row-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;background:var(--white);border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px #0b244722;padding:6px;min-width:150px;z-index:40}
.doc-row-menu.open{display:block}
.doc-row-menu a,.doc-row-menu button.linklike{display:flex;align-items:center;width:100%;padding:7px 10px;border-radius:6px;font-size:.8rem;color:var(--text);text-decoration:none;text-align:left;box-sizing:border-box}
.doc-row-menu a:hover,.doc-row-menu button.linklike:hover{background:var(--soft-bg);color:var(--soft-text)}
.doc-row-menu a.danger{color:#a3123a}
.doc-row-menu a.danger:hover{background:#fbe2e5;color:#7a0d2c}
.doc-row-menu form{margin:0}

/* "+ New" toolbar button -- reuses the exact same kebab dropdown
   mechanism/JS (open/close, close-on-outside-click) as the per-row ⋮
   menus, just restyled from a bare icon into a proper labeled button. */
#mineNewBtn.doc-row-kebab,#orgNewBtn.doc-row-kebab{background:var(--accent);color:var(--accent-text);padding:8px 16px;border-radius:var(--radius);font-weight:700;font-size:.8rem}
#mineNewBtn.doc-row-kebab:hover,#orgNewBtn.doc-row-kebab:hover{background:#1546b8;color:var(--accent-text)}

.hidden{display:none !important}

/* Employee Attachments -- explicit request, 2026-09-21 ("i want
   representation user attchment same as Document andd reporsity
   section"): reuses Document Repository's own .doc-list/.doc-row/
   .doc-row-icon-wrap/.doc-row-kebab-wrap look (static/style.css above)
   almost entirely -- folders and files render as rows in one list,
   same as My Files/Org Docs, rather than a separate "Folders" heading.
   The one thing that can't just be reused as-is is the row grid itself:
   Document Repository's own .doc-row has a "Sharing status" column
   that doesn't apply here (these documents are never shared -- always
   private/admin-only), so this is the same column set minus that one. */
.att-list-header,.att-row{display:grid;grid-template-columns:24px 40px minmax(160px,1fr) 90px 150px 180px 34px;column-gap:12px;align-items:center}
.att-list-header{padding:0 12px 8px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.att-row{padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--white);position:relative}
.doc-row-menu button.linklike.danger{color:#a3123a}
.doc-row-menu button.linklike.danger:hover{background:#fbe2e5;color:#7a0d2c}
/* Move-to-folder picker (explicit request, 2026-09-21, "if i have ig
   set of floder how it is dhoing to show") -- a scrollable list inside
   the modal instead of one menu line per folder, so it stays usable
   with any number of folders. Same "cap the height, scroll instead of
   growing the page" rule requested the same day for any list that can
   get long -- see .doc-list's own max-height above for the original. */
.attachment-move-list{display:flex;flex-direction:column;gap:2px;max-height:min(50vh,400px);overflow-y:auto;margin-top:10px}
.attachment-move-option{background:none;border:0;padding:10px 12px;margin:0;text-align:left;font-size:.86rem;color:var(--text);cursor:pointer;border-radius:var(--radius);width:100%}
.attachment-move-option:hover{background:var(--soft-bg)}
/* Standing rule, 2026-09-21 ("scroll on as documet listing is
   becoming large... apply this as rule when ever is required") --
   general-purpose wrapper for any list/table that can grow long: caps
   its height and scrolls internally instead of stretching the page,
   same idea as .doc-list's own max-height above (which already covers
   Document Repository's + the Attachments tab's own row lists) and
   .attachment-move-list just above. Use this wherever a *different*
   kind of list (a plain <table>, a details/summary body, etc.) needs
   the same treatment and doesn't already have it. */
.scroll-list-wrap{max-height:min(60vh,600px);overflow-y:auto}

/* Upload progress panel -- Google Drive-style circular ring per file */
.upload-progress-panel{position:fixed;bottom:20px;right:20px;width:320px;max-height:360px;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px #0b244733;z-index:90}
.upload-progress-panel[hidden]{display:none}
.upload-progress-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:.84rem;position:sticky;top:0;background:var(--white);border-radius:12px 12px 0 0}
.upload-progress-head button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;padding:2px 4px}
.upload-progress-head button:hover{color:var(--text)}
.upload-progress-list{padding:6px 10px 10px}
.upload-row{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:.78rem}
.upload-ring{flex:none;transform:rotate(-90deg)}
.upload-ring-bg{fill:none;stroke:var(--border);stroke-width:3}
.upload-ring-fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .15s ease}
.upload-row.done .upload-ring-fill{stroke:#1f7a3d}
.upload-row.error .upload-ring-fill{stroke:#a3123a}
.upload-row-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upload-row-pct{color:var(--muted);flex:none;font-variant-numeric:tabular-nums;width:32px;text-align:right}

/* Drag-and-drop dropzone -- a sibling of .doc-list, not nested inside
   it, so it never scrolls away with a long list and never reads as
   "part of" the row listing below it. Always visible, not just
   conjured up during a drag -- a permanent part of the page, so it's
   obvious dropping is supported without having to already be
   mid-drag to discover that. Recolors/grows only as *feedback* once a
   drag actually starts, it doesn't appear from nothing. */
.dropzone-box{display:flex;align-items:center;justify-content:center;gap:14px;flex-direction:column;padding:50px 16px;margin-bottom:14px;background:var(--soft-bg);border:2px dashed var(--accent-light);border-radius:var(--radius-card);color:var(--soft-text);font-weight:700;font-size:1.05rem;transition:background-color .12s ease,border-color .12s ease,padding .12s ease}
.dropzone-box .big{font-size:2.4rem;line-height:1}
.doc-dropzone-active .dropzone-box{background:#cfe0fb;border-color:var(--accent);border-width:3px;padding:66px 16px;font-size:1.25rem;font-weight:800}
.doc-dropzone-active .dropzone-box .big{font-size:3rem}

/* Share dialog: dropdown-add-a-person instead of a giant checkbox list
   -- Django still renders the real CheckboxSelectMultiple underneath
   (untouched, so the form still POSTs normally); this just replaces
   how it *looks*, progressively, and degrades to the plain checkbox
   list if JS is off. */
.share-picker-wrap{margin:6px 0 14px}
.share-picker-select{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:9px 10px;font-size:.85rem;color:var(--text);background:var(--white)}
.share-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.share-chip-list:empty{margin-top:0}
.share-chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft-bg);color:var(--soft-text);border-radius:999px;padding:5px 6px 5px 12px;font-size:.78rem;font-weight:600}
.share-chip-remove{border:0;background:none;color:inherit;opacity:.65;cursor:pointer;font-size:.9rem;line-height:1;padding:2px 5px;border-radius:50%}
.share-chip-remove:hover{opacity:1;background:#ffffff88}
/* Chat — split view: rail (left) always visible, active conversation (right) (chat.html) */
/* Bounded to the real leftover viewport height (page top bar + heading +
   footer -- the only page-level chrome outside this shell) so the
   composer at the bottom of .chat-main never ends up below the fold no
   matter how tall the message list gets -- .chat-window is the one part
   that scrolls internally (flex:1;min-height:0 below), everything else
   in the column keeps its natural size and always stays on-screen. */
/* Explicit request, 2026-09-21 ("footer position is also is moving"
   when opening a tall room like All Employees) -- a grid item's
   default min-height is auto (= its content's min-content size), which
   wins over an explicit height:100% for track-sizing purposes, so a
   room with enough messages/images could inflate .chat-shell taller
   than its calc(100vh - 260px) budget and spill into the footer below.
   min-height:0 on both grid items removes that floor; overflow:hidden
   on the shell is a hard backstop so nothing can ever visually spill
   past it regardless of cause -- each column's own overflow-y:auto
   (below) is what actually keeps its content reachable. */
.chat-shell{display:grid;grid-template-columns:var(--chat-rail-w,320px) 10px 1fr;gap:4px;height:calc(100vh - 200px);overflow:hidden}
.chat-rail{padding:12px;height:100%;min-height:0;overflow-y:auto}
.chat-main{height:100%;min-height:0;display:flex;flex-direction:column}
.chat-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:1.4rem}
.chat-empty-state p{font-size:.95rem}
@media(max-width:900px){.chat-shell{grid-template-columns:1fr;height:auto}.chat-rail,.chat-main{height:auto}.chat-window{flex:none;min-height:50vh}.chat-splitter,.chat-rail-collapse{display:none}}
/* More room for messages (2026-10-07): resizable / hideable chat list,
   slim conversation header, compact members and search. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chat-rail{position:relative}
.chat-rail-collapse{position:absolute;top:8px;right:8px;z-index:2;border:1px solid var(--border);background:var(--white);color:var(--muted);border-radius:6px;width:26px;height:26px;padding:0;cursor:pointer;font-weight:700;line-height:1}
.chat-rail-search{margin-right:30px}
.chat-splitter{cursor:col-resize;border-radius:6px;position:relative;display:flex;align-items:flex-start;justify-content:center}
.chat-splitter:hover,.chat-shell.resizing .chat-splitter{background:var(--soft-bg)}
.chat-shell.resizing{user-select:none;cursor:col-resize}
.chat-rail-expand{display:none;margin-top:8px;border:1px solid var(--border);background:var(--white);color:var(--muted);border-radius:6px;width:22px;height:26px;padding:0;cursor:pointer;font-weight:700}
.chat-shell.rail-hidden{grid-template-columns:0 26px 1fr}
.chat-shell.rail-hidden .chat-rail{display:none}
/* Fixed columns: with the list hidden the other two must not slide left into its place (2026-10-07 bug: the conversation squeezed into the 26px column). */
.chat-shell>.chat-rail{grid-column:1}.chat-shell>.chat-splitter{grid-column:2}.chat-shell>.chat-main{grid-column:3;min-width:0}
@media(max-width:900px){.chat-shell>.chat-rail,.chat-shell>.chat-splitter,.chat-shell>.chat-main{grid-column:auto}}
.chat-shell.rail-hidden .chat-splitter{cursor:default}
.chat-shell.rail-hidden .chat-rail-expand{display:block}
.chat-main .chat-room-header{gap:10px;row-gap:6px}
.chat-main .chat-room-header h1{font-size:1.15rem}
.chat-main .chat-content-search{flex:0 1 280px;margin-left:auto;padding:5px 12px}
.members-chip{position:relative}
.members-chip summary{list-style:none;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--accent);border:1px solid var(--border);border-radius:999px;padding:3px 10px;background:var(--soft-bg)}
.members-chip summary::-webkit-details-marker{display:none}
.members-chip .members-list{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:240px;max-height:320px;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:10px 12px}
.chat-rail-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:8px 14px;margin-bottom:4px;background:var(--soft-bg)}
.chat-rail-search input{border:0;background:transparent;padding:0;margin:0;width:auto;flex:1}
.chat-rail-search input:focus{box-shadow:none}
.chat-rail-actions{border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:8px}
.chat-rail-actions details{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.chat-rail-actions details:first-child{border-top:0;padding-top:0;margin-top:8px}
.chat-rail-actions summary{cursor:pointer;font-weight:700;list-style:none;padding:4px 0}
.chat-rail-actions summary::-webkit-details-marker{display:none}
.chat-rail-actions .chat-rail-list{max-height:none;padding-top:6px}
.chat-rail-plain-link{display:block;border-top:1px solid var(--border);padding:10px 0 0;margin-top:10px;font-weight:700;color:var(--text);text-decoration:none}
.chat-rail-plain-link:hover{color:var(--accent)}
.chat-rail-section-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 8px 2px}
.chat-rail-section>summary.chat-rail-section-label{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding-right:8px}
.chat-rail-section>summary.chat-rail-section-label::-webkit-details-marker{display:none}
.chat-rail-section>summary.chat-rail-section-label::after{content:'▸';font-size:.7rem}
.chat-rail-section[open]>summary.chat-rail-section-label::after{content:'▾'}
.chat-rail-list{display:flex;flex-direction:column;gap:2px;max-height:44vh;overflow-y:auto}
.chat-row-wrap{border-radius:var(--radius)}
.chat-row-members-toggle{background:var(--soft-bg);border:1px solid var(--border);color:var(--soft-text);width:24px;height:24px;padding:0;font-size:.6rem;cursor:pointer;border-radius:50%;line-height:1;margin:0;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}
.chat-row-members-toggle:hover{background:var(--border)}
.chat-row-members-toggle.open{transform:rotate(90deg)}
.chat-row-submenu{padding:6px 8px 10px 46px;flex-direction:column;gap:6px}
.chat-row-submenu:not([hidden]){display:flex}
.member-row-mini{display:flex;align-items:center;gap:8px;font-size:.85rem}
.member-row-mini small{color:var(--muted)}
.chat-row-main{display:flex;align-items:center;gap:2px}
.chat-row-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 8px;text-decoration:none;color:inherit;border-radius:var(--radius)}
.chat-row-link:hover{background:var(--soft-bg)}
.chat-row-avatar-wrap{position:relative;flex:none}
.chat-row-avatar-wrap .row-dot{position:absolute;right:-2px;bottom:-2px;border:2px solid var(--white)}
.chat-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-row-top{display:flex;justify-content:space-between;gap:8px}
.chat-row-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-top small{color:var(--muted);flex:none;font-size:.72rem}
.chat-row-preview{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-wrap.unread .chat-row-top b,.chat-row-wrap.unread .chat-row-preview{color:var(--text);font-weight:700}
.pin-toggle-form{flex:none}
.pin-toggle-btn{background:none;border:0;padding:6px;font-size:.95rem;opacity:0;cursor:pointer;border-radius:50%;line-height:1;width:auto;margin:0;transition:opacity .1s ease}
.chat-row-wrap:hover .pin-toggle-btn{opacity:.55}
.pin-toggle-btn:hover{opacity:1!important;background:var(--soft-bg)}
.pin-toggle-btn.pinned{opacity:1;background:var(--soft-bg)}
.user-pill{display:flex;align-items:center;gap:8px}

/* Chat — conversation pane (chat_room.html) */
.chat-room-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chat-room-header h1{margin:0}
.chat-content-search{flex:1 1 100%;margin-bottom:0}
.chat-linked-pill{background:var(--soft-bg);color:var(--soft-text);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600}
.archived-tag{color:var(--muted);font-weight:400;font-size:.85rem}
.group-manage-actions{display:flex;gap:16px;font-size:.8rem;margin-top:2px;width:100%}
.group-manage-actions form{display:inline}
.group-manage-actions button.linklike{font-size:.8rem}
.linklike-danger{background:none;border:0;padding:0;font:inherit;color:#b3122a;cursor:pointer;text-decoration:underline;font-size:.8rem}
#group-rename-form{align-items:center;gap:8px;max-width:360px}
#group-rename-form input{margin:0}
.pinned-strip{background:var(--soft-bg);border:1px solid var(--border);border-radius:var(--radius-card);margin:14px 0;padding:0}
.pinned-strip summary{cursor:pointer;list-style:none;padding:10px 16px;font-weight:700;font-size:.85rem;color:var(--soft-text)}
.pinned-strip summary::-webkit-details-marker{display:none}
.pinned-item{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--border);font-size:.85rem}
.pinned-item span{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The one part of .chat-main that scrolls -- flex:1 makes it absorb
   exactly whatever room is left in the (now height-bound) column after
   the room header, typing indicator and composer take their natural
   size, so those always stay on-screen and this is what scrolls instead.
   min-height:0 is required for a flex child to actually shrink below its
   content size rather than pushing the composer off screen. */
.chat-window{flex:1;min-height:0;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;display:flex;flex-direction:column;gap:2px}
.msg-row{display:flex;align-items:flex-end;gap:10px;max-width:78%}
.msg-row.me{align-self:flex-end;flex-direction:row-reverse}
.msg-avatar{flex:none}
.bubble{background:#f0f5ff;border-radius:calc(var(--radius) + 6px);padding:10px 14px;margin:4px 0}
.msg-row.me .bubble{background:var(--soft-bg)}
.bubble-head{display:flex;gap:8px;align-items:baseline}
.bubble-head b{font-size:.82rem}
.bubble-head small,.bubble small{color:var(--muted);font-size:.72rem}
.bubble p{margin:2px 0}
.msg-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.chat-attachment-img{max-width:240px;max-height:240px;border-radius:var(--radius);display:block;margin:6px 0}
.reaction-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
.reaction-pill{background:var(--white);border:1px solid var(--border);border-radius:999px;padding:1px 8px;margin:0;font-size:.76rem;line-height:1.6;cursor:pointer;color:var(--text)}
.reaction-pill:hover{background:var(--soft-bg)}
.reaction-pill.mine{background:var(--soft-bg);border-color:var(--accent);color:var(--soft-text)}
.msg-menu-trigger{background:none;border:0;padding:1px 6px;margin:0;font-size:1rem;line-height:1.6;cursor:pointer;opacity:0;transition:opacity .1s ease;color:var(--muted)}
.msg-row:hover .msg-menu-trigger,.reaction-pills:has(.reaction-pill) .msg-menu-trigger{opacity:.7}
.msg-menu-trigger:hover{opacity:1}
.chat-reaction-picker{position:fixed;z-index:30;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 12px 32px #0b244733;padding:6px;width:200px}
.chat-reaction-picker[hidden]{display:none}
.chat-reaction-quick{display:flex;align-items:center;gap:2px}
.chat-reaction-quick .chat-reaction-pick,#chat-reaction-more{background:none;border:0;padding:6px;margin:0;font-size:1.2rem;line-height:1;cursor:pointer;border-radius:var(--radius)}
.chat-reaction-quick .chat-reaction-pick:hover,#chat-reaction-more:hover{background:var(--soft-bg)}
#chat-reaction-more{font-size:1rem;color:var(--muted)}
.chat-reaction-full{margin-top:6px;width:260px;max-height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;border-top:1px solid var(--border);padding-top:6px}
.chat-reaction-full[hidden]{display:none}
.chat-reaction-full .chat-reaction-pick{background:none;border:0;padding:6px;margin:0;font-size:1.15rem;line-height:1;cursor:pointer;border-radius:var(--radius);text-align:center}
.chat-reaction-full .chat-reaction-pick:hover{background:var(--soft-bg)}
.chat-msg-menu-actions{display:flex;flex-direction:column;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.chat-msg-menu-item{background:none;border:0;padding:8px 6px;margin:0;font-size:.85rem;line-height:1.2;cursor:pointer;border-radius:var(--radius);text-align:left;color:var(--text)}
.chat-msg-menu-item:hover{background:var(--soft-bg)}
.chat-msg-menu-item[hidden]{display:none}
.chat-msg-menu-item-danger{color:#b3122a}
.inline-edit-form{display:flex;gap:6px;margin-top:6px}
.inline-edit-form textarea{margin:0;flex:1;resize:none;max-height:110px;overflow-y:auto;font:inherit;line-height:1.35}
.typing-indicator{color:var(--muted);font-size:.8rem;font-style:italic;min-height:1.2em;padding:4px 0}
.msg-reply-quote{display:block;background:#0000000d;border-left:3px solid var(--accent);border-radius:6px;padding:4px 8px;margin-bottom:4px;text-decoration:none;color:inherit}
.msg-row.me .msg-reply-quote{background:#ffffff66}
.msg-reply-quote b{display:block;font-size:.72rem;color:var(--accent)}
.msg-reply-quote span{display:block;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft-bg);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;margin-top:10px}
.reply-preview-bar[hidden]{display:none}
.reply-preview-text{display:flex;flex-direction:column;overflow:hidden}
.reply-preview-label{font-size:.72rem;color:var(--accent);font-weight:700}
.reply-preview-snippet{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
#reply-preview-cancel{background:none;border:0;padding:2px 6px;margin:0;font-size:1rem;line-height:1;cursor:pointer;color:var(--muted)}
#reply-preview-cancel:hover{color:var(--text)}
.chat-composer{display:flex;align-items:flex-end;gap:10px;margin-top:12px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:8px 10px 8px 18px}
.chat-composer textarea{border:0;flex:1;padding:6px 0;margin:0;resize:none;max-height:110px;overflow-y:auto;font:inherit;line-height:1.35}
.chat-composer textarea:focus{box-shadow:none}
.chat-attach-btn{cursor:pointer;font-size:1.1rem;flex:none}
.chat-attach-btn input[type=file]{display:none}
.chat-emoji-wrap{position:relative;flex:none}
.chat-emoji-btn{background:none;border:0;padding:0;margin:0;font-size:1.1rem;line-height:1;cursor:pointer;flex:none}
.chat-emoji-panel{position:absolute;bottom:calc(100% + 10px);left:0;width:260px;max-height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 12px 32px #0b244733;padding:8px;z-index:20}
.chat-emoji-panel[hidden]{display:none}
.chat-emoji-item{background:none;border:0;padding:6px;margin:0;font-size:1.15rem;line-height:1;cursor:pointer;border-radius:var(--radius);text-align:center}
.chat-emoji-item:hover{background:var(--soft-bg)}
.chat-send-btn{border-radius:999px;height:38px;padding:0 18px;flex:none;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:.86rem;white-space:nowrap}
@media(max-width:900px){.login-page,.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.cards,.grid,.chat-shell{grid-template-columns:1fr}.login-box{width:90%}.login-left{padding:30px}.search-wrap{width:100%}.top{padding:12px 16px}.main{padding:0 16px 34px}}

/* --- update fixes: login overflow, signup links, org chart, leave balance, doc sharing --- */
.login-page{min-height:100vh;overflow:auto;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)}
.login-left{padding:38px 58px;max-height:100vh;overflow:auto}.login-left h1{font-size:1.85rem;margin:42px 0 12px}.login-left p{font-size:16px}.public-card{padding:14px 20px;margin:14px 0}.line{padding:10px 0}.public-stats{padding:14px;margin-top:16px}.login-box{width:min(500px,88%);padding:42px}.login-right{min-height:100vh;padding:24px}.login-links{display:flex;justify-content:space-between;gap:12px;margin-top:12px}.login-links a{border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;text-align:center;flex:1;background:#fbfcfe}.secondary{background:var(--soft-bg)!important;color:var(--soft-text)!important}.leave-balance{grid-template-columns:repeat(4,1fr)}.org-tree{display:flex;flex-direction:column;gap:22px}.org-level{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;position:relative}.org-level:not(:last-child)::after{content:'';position:absolute;bottom:-16px;left:50%;width:2px;height:14px;background:#cdd8ed}.org-card{min-width:230px;max-width:280px;border-left:5px solid var(--accent)}.org-card.ceo{border-left-color:var(--org-ceo);background:#f7fbff}.org-card.admin{border-left-color:var(--org-admin)}.org-card.manager{border-left-color:var(--org-manager)}.org-card.employee{border-left-color:var(--org-employee)}.org-card.unassigned{border-left-color:#9aa5b1;background:#f4f5f7}
.org-card.company{border-left-color:var(--navy);background:var(--navy);color:#fff;text-align:center}
.org-card.company span{color:#c9d3e6}
.org-node{display:flex;flex-direction:column;align-items:center;min-width:230px}
.org-cluster-cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px;padding-top:12px}
.org-branch-toggle{display:flex;flex-direction:column;align-items:center}
.org-branch-toggle>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);background:var(--soft-bg);border:1px solid var(--border);border-radius:999px;padding:3px 12px;user-select:none;white-space:nowrap}
.org-branch-toggle>summary::-webkit-details-marker{display:none}
.org-branch-toggle>summary::before{content:'▾ ';font-size:10px}
.org-branch-toggle:not([open])>summary::before{content:'▸ '}
.org-branch-toggle:not([open])>summary{color:var(--accent)}
.doc-grid small{display:block;margin:10px 0;color:var(--muted)}.public-form-page .login-left{display:flex;flex-direction:column;justify-content:center}.public-form-page .login-box{max-height:90vh;overflow:auto}@media(max-width:1100px){.login-page{grid-template-columns:1fr}.login-left,.login-right{max-height:none;min-height:auto}.login-left{padding:30px}.login-right{background:var(--navy)}.login-box{width:min(560px,94%)}}@media(max-height:800px){.login-left{padding-top:24px;padding-bottom:24px}.login-left h1{margin-top:24px}.login-box{padding:32px}}
/* HR paper form/workflow additions (kept visually theme-neutral where noted: official letterhead documents stay black/white regardless of portal theme, only accent touches shift) */
.paper-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;margin:0 0 18px;box-shadow:var(--shadow-card)}.paper-header{display:flex;gap:18px;align-items:center;border:2px solid #13213c;padding:14px;margin-bottom:16px}.dummy-logo{width:82px;height:68px;border:2px solid #13213c;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;background:#f4f6fa}.paper-header h1,.paper-header h2{margin:0;text-transform:uppercase}.paper-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.paper-field textarea{min-height:82px}.paper-field small{display:block;color:var(--muted);margin-top:4px}.check-field{display:flex;gap:10px;align-items:center}.check-field input{width:auto}.signature-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);margin:8px 0}.signature-row div{padding:18px;border-right:1px solid var(--border);min-height:62px;font-weight:600}.signature-row div:last-child{border-right:0}.required,.error{color:#b3122a}.error{font-size:13px;margin-top:4px}.tag{display:inline-block;background:var(--soft-bg);border:1px solid var(--border);border-radius:999px;padding:4px 8px;margin:2px;color:var(--soft-text)}
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}.linklike:hover{opacity:.8}.secondary{background:var(--soft-bg)!important;color:var(--soft-text)!important}@media print{.sidebar,.top,.msg,.btn,button{display:none!important}.app{display:block}.main{padding:0}.paper-wrap,.panel{box-shadow:none;border:0}.paper-form input,.paper-form textarea,.paper-form select{border:0;border-bottom:1px solid #333;border-radius:0}.paper-header{border-color:#000}}
@media(max-width:900px){.paper-form{grid-template-columns:1fr}.signature-row{grid-template-columns:1fr}.paper-header{align-items:flex-start}.dummy-logo{min-width:82px}.cards.leave-balance{grid-template-columns:repeat(2,1fr)}}
/* Employee fill-page paper layouts: matches paper/print form style while staying editable */
.employee-paper-sheet{background:#fff;border:2px solid #111;margin:0 0 18px;box-shadow:var(--shadow-card);max-width:980px}.form-letterhead{display:grid;grid-template-columns:120px 1fr;border-bottom:2px solid #111;min-height:96px}.brand-logo-box{border-right:2px solid #111;display:flex;align-items:center;justify-content:center;padding:10px;background:#fff}.brand-logo-box img{max-width:100%;max-height:74px;object-fit:contain}.brand-logo-box span{font-size:28px;font-weight:800}.brand-copy{padding:12px 16px;text-align:center}.brand-copy h2{margin:0 0 5px;text-transform:uppercase;letter-spacing:.6px}.paper-entry-form{display:block}.paper-section-title{background:#eef1f7;border-top:2px solid #111;border-bottom:1px solid #111;padding:7px 10px;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.4px;color:var(--navy)}.paper-row{display:grid;border-bottom:1px solid #111}.paper-row.one{grid-template-columns:1fr}.paper-row.two{grid-template-columns:repeat(2,1fr)}.paper-row.three{grid-template-columns:repeat(3,1fr)}.paper-row.four{grid-template-columns:repeat(4,1fr)}.paper-row.five{grid-template-columns:repeat(5,1fr)}.paper-row.six{grid-template-columns:repeat(6,1fr)}.paper-row.seven{grid-template-columns:repeat(7,1fr)}.paper-row.grow{grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);grid-template-columns:none;overflow-x:auto}
.wide-paper .employee-paper-sheet{max-width:100%}.paper-cell{border-right:1px solid #111;min-height:64px;padding:7px 9px;background:#fff}.paper-cell:last-child{border-right:0}.field-cell label{display:block;font-size:11px;text-transform:uppercase;font-weight:800;color:#111;margin-bottom:3px}.field-cell input,.field-cell select,.field-cell textarea{border:0;border-bottom:1px solid #333;border-radius:0;margin:0;padding:6px 4px;background:#fff;width:100%;font-size:14px}.field-cell textarea{min-height:70px;resize:vertical}.field-cell.tall{min-height:100px}.checkbox-paper input{width:auto;margin-right:8px}.field-cell .readonly-value{padding:6px 4px;font-size:14px;color:#333}
.sig-pad-wrap{margin-top:4px}
.sig-pad{border:1px solid #999;border-radius:6px;background:#fff;cursor:crosshair;touch-action:none;display:block;width:100%;max-width:500px;height:120px}
.sig-click-box{border:1.5px dashed var(--border);border-radius:8px;background:var(--soft-bg);min-height:60px;max-width:500px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;padding:10px;transition:border-color .15s,background .15s}
.sig-click-box:hover{border-color:var(--accent)}
.sig-click-box-filled{cursor:default;border-style:solid;background:#fff}
.sig-click-box-filled:hover{border-color:var(--border)}
.sig-click-box-empty{cursor:default;opacity:.7}
.sig-click-prompt{color:var(--accent);font-weight:600;font-size:.9rem}
.sig-click-box-empty .sig-click-prompt{color:var(--muted);font-weight:500}
.sig-click-preview{display:none;height:50px;max-width:220px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px}
.sig-fallback-toggle{margin-top:6px;font-size:.8rem}
.sig-fallback-pad{margin-top:10px}
.sig-save-as-mine{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-top:8px}
.sig-save-as-mine input{width:15px;height:15px}
.sig-clear-btn{margin-top:6px;padding:8px 14px;font-size:.85em}.note-cell{font-size:13px;line-height:1.5}
.day-fee-table-wrap{margin:0 0 4px}.day-fee-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:none;border-radius:0}.day-fee-table th,.day-fee-table td{border:1px solid #111;padding:6px 9px;text-align:center;font-size:13px}.day-fee-table th{background:#eef1f7;text-transform:uppercase;font-size:11px;font-weight:800}.day-fee-table td:first-child{text-align:left;background:#eef1f7;text-transform:uppercase;font-size:11px;font-weight:800;white-space:nowrap}.day-fee-table input[type=checkbox]{width:auto;margin:0}.day-fee-table input[type=number]{border:0;border-bottom:1px solid #333;border-radius:0;padding:4px;width:90px;font-size:14px;text-align:center}.paper-signature-band{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #111;border-bottom:2px solid #111}.paper-signature-band div{min-height:76px;padding:10px;border-right:1px solid #111;font-weight:700}.paper-signature-band div:last-child{border-right:0}.form-error-row,.errorlist{color:#b3122a;margin:6px 10px;font-size:13px}.form-actions{padding:15px;background:#f4f6fa}.paper-entry-form .required{color:#b3122a}@media(max-width:1300px){.paper-row.six,.paper-row.seven{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.paper-row.two,.paper-row.three,.paper-row.four,.paper-row.five,.paper-row.six,.paper-row.seven{grid-template-columns:1fr}.paper-cell{border-right:0}.form-letterhead{grid-template-columns:1fr}.brand-logo-box{border-right:0;border-bottom:2px solid #111}.paper-signature-band{grid-template-columns:1fr}}@media print{.employee-paper-sheet{box-shadow:none;border:2px solid #111}.form-actions{display:none!important}.field-cell input,.field-cell select,.field-cell textarea{border:0;border-bottom:1px solid #333}.brand-logo-box img{max-height:74px}}

/* ============================================================
   Theme blocks — each redefines the tokens above. Selecting a
   theme in Form Settings sets data-app-theme on <html>.
   ============================================================ */

/* Classic Enterprise — same navy/blue as the bare :root defaults above,
   just without the diagonal sidebar sheen texture (kept the way it was
   at first, but removed per direct feedback — the other tokens here
   are untouched, still identical to :root). */
html[data-app-theme="classic-enterprise"]{
  --sidebar-sheen-opacity:0;
}

/* Ops Console — ServiceNow-inspired: dense, blue-teal, minimal decoration */
html[data-app-theme="ops-console"]{
  font-size:13.5px;
  --navy:#12283b; --accent:#0f7d8c; --accent-text:#ffffff; --accent-light:#7fb0b8;
  --soft-bg:#e3eef0; --soft-text:#0f5560; --light:#eef2f5; --text:#12202b; --muted:#5b7280;
  --border:#d7e1e6; --radius:6px; --radius-card:6px; --shadow-card:0 1px 2px rgba(15,40,55,.12);
  --thead-bg:#e3ebef;
  --sidebar-bg:linear-gradient(180deg,#0d1f2d,#183446); --sidebar-text:#a9c1cf;
  --sidebar-hover-bg:#ffffff14; --sidebar-hover-text:#ffffff;
  --sidebar-active-bg:var(--accent); --sidebar-active-text:#ffffff; --sidebar-border:transparent;
  --org-ceo:#0d1f2d; --org-admin:#1f4b63; --org-manager:var(--accent); --org-employee:#7fb0b8;
  --heading-tracking:-.015em;
}

/* Friendly Ledger — QuickBooks-inspired: white ground, rounded, approachable green */
html[data-app-theme="friendly-ledger"]{
  font-size:14.5px;
  --navy:#146c2e; --accent:#2ca01c; --accent-text:#ffffff; --accent-light:#8fd17e;
  --soft-bg:#e6f4ea; --soft-text:#146c2e; --light:#f4f9f2; --text:#1f2d25; --muted:#5f6f66;
  --border:#dbe7de; --radius:14px; --radius-card:14px; --shadow-card:0 4px 14px rgba(20,60,30,.10);
  --thead-bg:#eef6f0;
  --sidebar-bg:#ffffff; --sidebar-text:#3c4a43;
  --sidebar-hover-bg:#eef6f0; --sidebar-hover-text:#146c2e;
  --sidebar-active-bg:#e6f4ea; --sidebar-active-text:#146c2e; --sidebar-border:#dbe7de;
  --org-ceo:#146c2e; --org-admin:#2ca01c; --org-manager:#57b648; --org-employee:#8fd17e;
  --heading-weight:800;
}

/* Carbon Flat — IBM-inspired: square corners, no shadows, one blue signal */
html[data-app-theme="carbon-flat"]{
  font-size:13px;
  --navy:#161616; --accent:#0f62fe; --accent-text:#ffffff; --accent-light:#a6c8ff;
  --soft-bg:#edf5ff; --soft-text:#0043ce; --light:#f2f4f8; --text:#161616; --muted:#525252;
  --border:#e0e0e0; --radius:0px; --radius-card:0px; --shadow-card:none;
  --thead-bg:#e8e8e8;
  --sidebar-bg:#161616; --sidebar-text:#c6c6c6;
  --sidebar-hover-bg:#262626; --sidebar-hover-text:#ffffff;
  --sidebar-active-bg:#262626; --sidebar-active-text:#ffffff; --sidebar-border:transparent;
  --sidebar-active-border-width:3px;
  --org-ceo:#161616; --org-admin:#393939; --org-manager:var(--accent); --org-employee:#a6c8ff;
  --heading-weight:600; --heading-tracking:-.015em;
  --btn-sheen:none; --btn-shadow:none; --sidebar-sheen-opacity:0;
}

/* Corporate Navy & Gold — generic institutional palette (not tied to any real company) */
html[data-app-theme="navy-gold"]{
  font-size:14px;
  --navy:#0b2447; --accent:#a97a2b; --accent-text:#1a1206; --accent-light:#c9a34e;
  --soft-bg:#f1ecdd; --soft-text:#7a5720; --light:#f7f5ef; --text:#221c10; --muted:#6b6555;
  --border:#e4ddc9; --radius:3px; --radius-card:4px; --shadow-card:0 1px 3px rgba(20,15,5,.12);
  --thead-bg:#f1ecdd;
  --sidebar-bg:linear-gradient(180deg,#0b2447,#173868); --sidebar-text:#b7c4dc;
  --sidebar-hover-bg:#ffffff14; --sidebar-hover-text:#e8c675;
  --sidebar-active-bg:#173868; --sidebar-active-text:#e8c675; --sidebar-border:transparent;
  --org-ceo:#0b2447; --org-admin:#173868; --org-manager:var(--accent); --org-employee:#c9a34e;
  --heading-family:Georgia,"Iowan Old Style","Times New Roman",serif;
}

/* Soft Corporate — slate-blue sidebar, indigo accent, flat and airy, no metallic sheen */
html[data-app-theme="soft-corporate"]{
  font-size:14.5px;
  --navy:#2a3550; --accent:#5a7de0; --accent-text:#ffffff; --accent-light:#a9bdf2;
  --soft-bg:#eef1fb; --soft-text:#3b4a8f; --light:#f7f8fb; --text:#232a3d; --muted:#767ea1;
  --border:#e7eaf2; --radius:14px; --radius-card:14px; --shadow-card:0 6px 18px rgba(40,55,110,.08);
  --thead-bg:#f1f3fa;
  --sidebar-bg:#2a3550; --sidebar-text:#c3cbe0;
  --sidebar-hover-bg:#ffffff14; --sidebar-hover-text:#ffffff;
  --sidebar-active-bg:var(--accent); --sidebar-active-text:#ffffff; --sidebar-border:transparent;
  --org-ceo:#1f273d; --org-admin:#3b4a8f; --org-manager:var(--accent); --org-employee:#a9bdf2;
  --btn-sheen:none; --btn-shadow:none; --sidebar-sheen-opacity:0;
}

/* Footer: copyright + admin-editable links, shown at the bottom of every
   page (base.html) and the login page (login.html) -- see
   core.context_processors.footer_content and Settings -> Company Branding. */
.app-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin:28px -34px 0;padding:16px 34px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.app-footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.app-footer-links a{color:var(--muted);text-decoration:none}
.app-footer-links a:hover{color:var(--accent);text-decoration:underline}
.login-footer{margin:28px 0 0;padding:16px 0 0;justify-content:flex-start;gap:4px 20px;max-width:460px;flex-direction:column;align-items:flex-start}
.login-footer .app-footer-links{gap:4px 18px}
@media(max-width:900px){.app-footer{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* Org Chart Access on Create/Edit User -- deliberately a standalone
   checkbox outside the Employee Form Access list (see forms.py); the
   label gets the accent color so it visually reads as its own separate
   option, not just another line blending into the fields around it. */
.form-panel form label[for="id_org_chart_access"]{color:var(--accent)}

/* "Who's Online" dashboard widget -- one row per online user, with a
   one-click chat button straight into start_chat for that person. */
.online-user-row{display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--border)}
.online-user-row:first-child{border-top:none}
.online-user-name{flex:1; min-width:0; font-weight:600; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-quick-btn{flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--light); display:flex; align-items:center; justify-content:center; font-size:.9rem; text-decoration:none; transition:background .12s ease, border-color .12s ease}
.chat-quick-btn:hover{background:var(--soft-bg); border-color:var(--accent)}

/* FAQ & Knowledge Base -- Phase 1 (docs/FAQ_KNOWLEDGE_BASE_SPEC.md) */
.faq-bookmarks-bar{margin-bottom:10px}
.faq-bookmarks-bar .btn.active{background:var(--accent);color:var(--white);border-color:var(--accent)}
.faq-search{display:flex;gap:8px;margin-bottom:16px}
.faq-search input{flex:1;padding:9px 13px;border:1px solid var(--border);border-radius:var(--radius);font-family:inherit}
.faq-browse-grid{grid-template-columns:230px 1fr}
.faq-cat-list{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
.faq-cat-list li{margin-bottom:2px}
.faq-cat-list a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--radius);color:var(--text);text-decoration:none;font-size:.9rem}
.faq-cat-list a:hover{background:var(--light)}
.faq-cat-list li.current a{background:var(--soft-bg);color:var(--soft-text);font-weight:700}
.faq-row{padding:14px 0;border-bottom:1px solid var(--border)}
.faq-row:last-child{border-bottom:none}
.faq-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:16px;margin-top:6px}
.faq-article-content{font-size:.95rem;line-height:1.7;margin-top:10px}
.faq-article-content table{border-collapse:collapse;width:100%;margin:12px 0}
.faq-article-content th,.faq-article-content td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.faq-article-content th{background:var(--light)}
.faq-article-content img{max-width:100%;height:auto}
.faq-group-picker{display:flex;flex-direction:column;gap:8px;margin:6px 0 1em}
.faq-group-option{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--white)}
.faq-group-option:hover{border-color:var(--muted);background:var(--light)}
.faq-group-option input{margin-right:6px}
.faq-group-name{flex:0 0 auto;white-space:nowrap;cursor:pointer}
.faq-group-members{flex:1;text-align:right;overflow-wrap:anywhere}
.faq-group-members a{margin-left:8px;white-space:nowrap}
.faq-form-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--border);margin:14px 0 18px}
.faq-tab-btn{appearance:none;border:none;background:none;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--muted);padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.faq-tab-btn:hover{color:var(--text)}
.faq-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.faq-tab-btn.has-error{color:#b3122a}
.faq-tab-btn.has-error.active{border-bottom-color:#b3122a}
details.panel>summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
details.panel[open]>summary::before{transform:rotate(90deg)}
.export-column-groups{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0}
.export-column-groups fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;min-width:200px;flex:1 1 200px}
.export-column-groups legend{font-weight:600;color:var(--accent);padding:0 4px;font-size:.9rem}
.export-column-groups label{display:block;font-size:.88rem;padding:2px 0}
@media(max-width:640px){.faq-group-option{flex-direction:column;align-items:flex-start;gap:4px}.faq-group-members{text-align:left}}

/* Pure-CSS donut chart (conic-gradient) -- no charting library, self-hosted per rule 16. */
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:10px 0}
.donut-chart{width:140px;height:140px;border-radius:50%;flex:none;position:relative}
.donut-chart::after{content:'';position:absolute;inset:22px;border-radius:50%;background:var(--white)}
.donut-legend{list-style:none;margin:0;padding:0;font-size:.85rem}
.donut-legend li{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.donut-legend li:last-child{margin-bottom:0}
.donut-dot{width:11px;height:11px;border-radius:50%;flex:none}

/* Hand-rolled inline SVG trend line chart -- no charting library, self-hosted per rule 16. */
.salary-trend-chart-wrap{width:100%;height:220px;margin:10px 0}
.salary-trend-chart{width:100%;height:100%;overflow:visible}
.salary-trend-chart .axis-line{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}

/* Star rating -- Portal Feedback (2026-09-25). CSS-only, no JS: 5 radio
   inputs in reverse DOM order (5,4,3,2,1) inside a row-reverse flex
   container, so hovering/checking star N visually fills stars 1..N via
   the ~ general-sibling selector while the underlying value order stays
   normal (1-5) for the form itself. */
.star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-rating input{position:absolute;opacity:0;width:0;height:0}
.star-rating label{font-size:1.8rem;line-height:1;color:var(--border);cursor:pointer;transition:color .1s}
.star-rating input:checked~label,.star-rating label:hover,.star-rating label:hover~label{color:#eda100}
.star-rating input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* 2026-10-02 "Split Classic" login polish: logo | divider | title lockup,
   working pill links in the card headers, public News page. */
.login-brand{display:flex;align-items:center;gap:14px;margin:0 0 6px;flex-wrap:wrap}
.login-brand-logo{height:38px;width:auto;max-width:200px;object-fit:contain} /* "S2 Compact" sizing, 2026-10-02 */
.login-brand-bar{width:2px;align-self:stretch;min-height:34px;background:var(--border);border-radius:2px}
.login-brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.login-brand-title{font-family:var(--heading-family);font-size:19px;font-weight:700;color:var(--navy);line-height:1.15}
.login-brand-text small{font-size:12.5px;color:var(--muted);font-weight:500}
.public-card h3{align-items:center;gap:10px}
.public-card-link{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:3px 12px;white-space:nowrap;background:var(--white)}
.public-card-link:hover,.public-card-link:focus-visible{background:var(--soft-bg);border-color:var(--accent);outline:none}
.login-next-hint{font-size:13px;margin:-6px 0 4px}
.public-news-page{margin:0;background:var(--light);min-height:100vh}
.public-news-wrap{max-width:820px;margin:0 auto;padding:38px 20px 40px}
@media(max-width:600px){.login-brand-logo{height:34px}.login-brand-title{font-size:17px}.login-brand-bar{display:none}}

.public-card-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Login Page Content: row you can't edit (2026-10-02) -- plain grey label, not a boxed hint */
.view-only-note{color:var(--muted);font-size:.78rem;font-style:italic;white-space:nowrap;cursor:help}
/* Dashboard request widgets: submitted date (2026-10-05) */
.req-date{color:var(--muted);font-size:.78rem}
/* New-chat pop-up + badge (2026-10-05) -- chosen style "E": dark card,
   green border, sender initial, blinking dot, shakes twice. */
.nav-badge[hidden]{display:none!important}
.chat-toast{position:fixed;right:20px;bottom:20px;z-index:200;width:340px;max-width:calc(100vw - 32px);display:flex;align-items:flex-start;gap:12px;background:#13274f;color:#ffffff;border:2px solid #16a34a;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.4);padding:12px 34px 12px 12px;animation:chatToastShake .6s ease 2}
.chat-toast[hidden]{display:none}
.chat-toast-avatar{width:38px;height:38px;border-radius:50%;background:#16a34a;color:#ffffff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:0 0 auto}
.chat-toast a{color:inherit;text-decoration:none;font-size:.95rem;line-height:1.35;min-width:0;overflow-wrap:anywhere;display:block}
.chat-toast-title{display:block;font-size:.8rem;opacity:.85;margin-bottom:2px}
.chat-toast-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:6px;animation:chatToastBlink 1.2s ease-in-out infinite;vertical-align:middle}
.chat-toast-sender{display:block}
.chat-toast-text{display:block}
.chat-toast button{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:#ffffff;opacity:.8;padding:0 2px}
@keyframes chatToastShake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(6px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes chatToastBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.7)}50%{opacity:.55;box-shadow:0 0 0 4px rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.chat-toast,.chat-toast-dot{animation:none}}
@media(max-width:600px){.chat-toast{left:16px;right:16px;width:auto}}
/* .hint is a padded block box for help paragraphs; inside a line (e.g.
   "(effective ...)" next to a label, "per month" next to an amount) that
   padding made it overlap the neighbouring rows. Inline hints = light highlight that
   wraps line by line; small.hint too (Company Directory summaries, 2026-10-07). */
span.hint,small.hint{display:inline;padding:1px 6px;font-size:.8rem;line-height:1.9;border-radius:6px;margin:0 0 0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Offer to turn on Windows notifications for chat (2026-10-05) */
.desk-notify-offer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#13274f;color:#ffffff;border-radius:10px;padding:9px 14px;margin:0 0 14px;font-size:.9rem}
.desk-notify-offer[hidden]{display:none}
.desk-notify-offer span{flex:1 1 260px;min-width:0}
.desk-notify-offer button{font:inherit;font-weight:700;border-radius:8px;padding:5px 12px;cursor:pointer;border:0;background:#16a34a;color:#ffffff}
.desk-notify-offer button.linklike{background:none;color:#ffffff;opacity:.85;text-decoration:underline;padding:5px 4px}
/* Chat: file being dragged over the message box (2026-10-07) */
.chat-composer.chat-drop-over{outline:2px dashed #2563eb;outline-offset:2px}
/* Profile pictures in chat and Birthdays (2026-10-07) */
img.avatar-img{object-fit:cover;background:var(--soft-bg);padding:0;display:inline-block;flex:0 0 auto}
img.birthday-avatar{object-fit:cover;border-radius:50%}
/* ===== Chat design D (2026-10-07): list from "Workspace", conversation from
   "Bubbles". Look only -- every chat feature keeps its markup and behaviour. ===== */
.chat-shell .chat-rail{background:var(--soft-bg)}
.chat-rail-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 10px}
.chat-rail-head>b{font-size:1.05rem}
.chat-rail-head-actions{display:flex;gap:6px;align-items:center}
.chat-new-btn{border:0;background:var(--accent);color:#ffffff;border-radius:6px;padding:5px 10px;font-weight:700;font-size:.82rem;cursor:pointer;margin:0}
.chat-rail .chat-rail-collapse{position:static}
.chat-rail .chat-rail-search{margin-right:0;border-radius:8px;background:var(--white);padding:6px 10px}
.chat-rail-actions[hidden]{display:none}
.chat-rail-actions{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:6px 10px;margin-top:8px}
.chat-rail-section-label{letter-spacing:.06em}
.channels .avatar-stack,.channels .chat-row-avatar-wrap,.channels .grp-ico{display:none}
.channels .chat-row-link{padding:7px 10px;gap:8px}
.channels .chat-row-top b::before{content:'# ';color:var(--muted);font-weight:700}
.channels .chat-row-preview{display:none}
.chat-head-avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex:0 0 auto;object-fit:cover;background-color:var(--accent);background-image:linear-gradient(155deg,var(--accent-light) 0%,var(--accent) 65%);color:var(--accent-text)}
.chat-main .chat-window{background:#e9eef5;border-color:transparent} /* soft blue-grey, picked 2026-10-07 */
.chat-main .msg-row .bubble{background:#ffffff;border-radius:0 10px 10px 10px;box-shadow:0 1px 1px rgba(0,0,0,.08);padding:6px 10px 8px}
.chat-main .msg-row.me .bubble{background:#d9fdd3;border-radius:10px 0 10px 10px}
.chat-main .bubble-head{justify-content:space-between}
.chat-main .msg-row.me .bubble-head b{display:none}
.chat-main .msg-row.me .bubble-head{justify-content:flex-end}
.chat-main .chat-composer{background:var(--soft-bg);border-color:var(--border);border-radius:12px;padding:8px 10px}
.chat-main .chat-composer textarea{background:var(--white);border-radius:10px;padding:9px 12px}
.chat-main .chat-send-btn{height:42px}
/* Chat date dividers (2026-10-07) */
.chat-day-sep{align-self:center;margin:10px 0 6px;position:sticky;top:0;z-index:1}
.chat-day-sep span{display:inline-block;background:#dbe7f5;color:#334155;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:3px 10px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
/* People search clear button (2026-10-07) */
.chat-search-clear{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0 2px;margin:0;line-height:1}
.chat-search-clear:hover{color:var(--text)}
.chat-rail-search input[type=search]::-webkit-search-cancel-button{display:none}
/* Chat background picker (2026-10-07): each person's own colour */
.chat-main{position:relative}
.chat-wall-picker{position:absolute;top:12px;right:12px;z-index:5}
.chat-wall-btn{border:1px solid var(--border);background:var(--white);border-radius:8px;width:34px;height:34px;padding:0;cursor:pointer;margin:0;font-size:1rem}
.chat-wall-menu{position:absolute;right:0;top:40px;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px}
.chat-wall-menu[hidden]{display:none}
.chat-wall-menu button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit;margin:0}
.chat-wall-menu button:hover{background:var(--soft-bg)}
.chat-wall-menu button[aria-checked=true]{font-weight:700;background:var(--soft-bg)}
.chat-wall-menu .sw{width:18px;height:18px;border-radius:50%;border:1px solid #cbd5e1;flex:none}
.chat-main .chat-room-header{padding-right:46px}
.chat-shell.chat-wall-bluegrey .chat-main .chat-window{background:#e9eef5}
.chat-shell.chat-wall-white .chat-main .chat-window{background:#ffffff;border-color:var(--border)}
.chat-shell.chat-wall-white .chat-main .msg-row:not(.me) .bubble{background:#f1f3f6}
.chat-shell.chat-wall-grey .chat-main .chat-window{background:#f2f4f7}
.chat-shell.chat-wall-mint .chat-main .chat-window{background:#e8f3ee}
.chat-shell.chat-wall-beige .chat-main .chat-window{background:#eae6df}
/* Manage Chat Groups page (2026-10-07) */
.manage-group summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.manage-group summary::-webkit-details-marker{display:none}
.manage-group-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.manage-group-members{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.manage-group-members .member-row{display:flex;align-items:center;gap:8px}
.manage-group-actions{display:flex;gap:10px;border-top:1px solid var(--border);padding-top:10px}

/* Kudos Wall (2026-10-08): dashboard widget, wall page, Give Kudos dialog, settings. Built on the theme tokens. */
.kudos-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.kudos-tile{display:grid;gap:2px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--light)}
.kudos-tile b{font-size:1.45rem;font-variant-numeric:tabular-nums}
.kudos-widget-body,.kudos-page{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;align-items:start;margin:10px 0}
.kudos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;min-width:0}
.kudos-card{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-card);min-width:0}
.kudos-card.kudos-hidden{opacity:.6;border-style:dashed}
.kudos-who{display:flex;gap:10px;align-items:center;min-width:0}
.kudos-names{min-width:0;overflow-wrap:anywhere}
.kudos-msg{margin:0;overflow-wrap:anywhere}
.kudos-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.kudos-tags{display:flex;flex-wrap:wrap;gap:6px}
.kudos-tag{display:inline-flex;gap:4px;align-items:center;background:var(--soft-bg);color:var(--soft-text);border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:600}
.kudos-pts{background:#fdf3dc;color:#8a5a00;border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Points-free thanks + one-card-per-person dashboard widget (2026-10-09) */
.kudos-thx{background:#e8f6ee;color:#17633a;border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:700;white-space:nowrap}
.kudos-group .kudos-tags{margin:0}
.kudos-group-latest{display:grid;gap:6px}
.kudos-group-toggle{justify-self:start}
.kudos-group-quote{margin:0;padding-left:10px;border-left:3px solid var(--soft-bg);overflow-wrap:anywhere}
.kudos-group-quote .meta{display:block;margin-top:3px}
.kudos-group-list:not([hidden]){display:grid;gap:7px;border-top:1px dashed var(--border);padding-top:8px;font-size:.88rem}
.kudos-group-row{overflow-wrap:anywhere;line-height:1.5;display:grid;gap:4px}
.kudos-for-banner{background:var(--soft-bg);color:var(--soft-text);border-radius:var(--radius);padding:8px 12px;margin:8px 0}
.kudos-reacts{display:flex;flex-wrap:wrap;gap:4px}
.kudos-reacts form{margin:0}
.kudos-react{border:1px solid var(--border);background:var(--white);color:var(--text);border-radius:999px;padding:2px 8px;font:inherit;font-size:.8rem;cursor:pointer;font-variant-numeric:tabular-nums}
.kudos-react.on{background:var(--soft-bg);border-color:var(--accent);color:var(--soft-text)}
.kudos-admin{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px dashed var(--border);padding-top:8px}
.kudos-admin input[type=text]{flex:1;min-width:120px}
.kudos-board{display:grid;gap:6px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--light)}
.kudos-board h4{margin:0 0 4px}
.kudos-vote{border:1px solid var(--border);border-radius:var(--radius-card);padding:10px 14px;margin:10px 0;background:var(--light)}
.kudos-vote h4{margin:0 0 6px}
.kudos-board-tabs{display:flex;gap:4px;background:var(--soft-bg);border-radius:999px;padding:3px}
.kudos-board-tab{flex:1;border:0;background:none;border-radius:999px;padding:4px 8px;font:inherit;font-size:.8rem;font-weight:600;color:var(--soft-text);cursor:pointer;white-space:nowrap}
.kudos-board-tab.on{background:var(--white);color:var(--accent);box-shadow:var(--shadow-card)}
.kudos-board-list:not([hidden]){display:grid;gap:6px}
.kudos-board-tab{min-width:0}
.kudos-loved{display:grid;gap:3px;padding:7px 8px;border-radius:8px;background:var(--white);border:1px solid var(--border);color:var(--text);text-decoration:none;min-width:0}
.kudos-loved:hover{border-color:var(--accent)}
.kudos-loved-who,.kudos-loved-msg{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kudos-loved-msg{color:var(--muted)}
.kudos-loved-reacts{display:flex;flex-wrap:wrap;gap:4px}
.kudos-loved-r{font-size:.74rem;border-radius:999px;padding:1px 7px;background:#fde8ee;color:#a3264d;font-variant-numeric:tabular-nums}
.kudos-board-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:.9rem}
.kudos-board-row.me{font-weight:700}
.kudos-board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kudos-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft-bg);color:var(--soft-text);font-size:.75rem;font-weight:700}
.kudos-warning{background:#fff4e5;color:#8a4b00;border:1px solid #f3d29b;border-radius:var(--radius);padding:8px 12px;margin:8px 0}
.kudos-winners{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 14px;border-radius:var(--radius-card);background:#fdf3dc;color:#5c3d00;margin-bottom:12px}
.kudos-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.kudos-filters .contacts-tabs{margin:0}
.kudos-dialog{border:0;border-radius:var(--radius-card);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);box-shadow:0 20px 60px rgba(0,0,0,.25);background:var(--white);color:var(--text)}
.kudos-dialog::backdrop{background:rgba(11,36,71,.45)}
.kudos-give-form{display:grid;gap:8px;padding:18px}
.kudos-give-form label{font-weight:600}
.kudos-give-form select,.kudos-give-form textarea,.kudos-give-form input[type=text]{width:100%}
.kudos-give-form textarea{min-height:90px}
.kudos-dialog-head{display:flex;justify-content:space-between;align-items:center}
.kudos-dialog-head h3{margin:0}
.kudos-dialog-close{border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--muted)}
.kudos-catgroups{display:grid;gap:10px;max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--light)}
.kudos-catgroup{display:grid;gap:6px}
.kudos-catgroup h4{margin:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kudos-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.kudos-chip{display:grid;gap:2px;align-content:start;text-align:left;border:2px solid var(--border);background:var(--white);color:var(--text);border-radius:var(--radius);padding:7px 10px;font:inherit;font-size:.82rem;cursor:pointer}
.kudos-chip-name{font-weight:600}
.kudos-chip-desc{font-size:.76rem;color:var(--muted);line-height:1.3}
.kudos-chip.on .kudos-chip-desc{color:var(--soft-text)}
.kudos-chip.on{border-color:var(--accent);background:var(--soft-bg);color:var(--soft-text);font-weight:600}
.kudos-chip[hidden],.kudos-catgroup[hidden]{display:none!important}
.kudos-points-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kudos-points-row select{width:auto}
.kudos-left{background:var(--soft-bg);color:var(--soft-text);border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:600}
.kudos-count{text-align:right}
.kudos-check{display:flex;gap:8px;align-items:center;font-weight:400!important}
.kudos-form-error{background:#fdecea;color:#a3271b;border-radius:var(--radius);padding:8px 12px;margin:0}
.kudos-inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.kudos-inline-form label{display:grid;gap:4px;font-size:.85rem}
.kudos-icon-input{width:4.5em}
@media (max-width:820px){.kudos-widget-body,.kudos-page{grid-template-columns:1fr}}

/* Shared page navigation (core/pagination.html, CLAUDE.md rule 27) */
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:12px;margin-top:6px;border-top:1px solid var(--border)}
.pager-info{font-size:12px;opacity:.75}
.pager-links{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pager-links .btn{padding:5px 10px;font-size:13px}
.pager-current{font-size:13px;padding:0 6px}

/* 🔔 Notifications bell (2026-10-20): top-bar dropdown and the Notifications page */
.notif-menu summary{padding:6px 8px;gap:2px;font-size:1.05rem}
.notif-menu summary::after{display:none}
.notif-panel{width:min(360px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;cursor:default}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px 8px}
.notif-item{margin:0}
.notif-item button{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0;border-radius:var(--radius);padding:9px 12px;font:inherit;color:var(--text);cursor:pointer}
.notif-item button:hover{background:var(--light)}
.notif-item b{font-size:.88rem;font-weight:600}
.notif-item.unread b{font-weight:800}
.notif-item.unread button{box-shadow:inset 3px 0 0 var(--accent)}
.notif-item span{font-size:.82rem;color:var(--muted)}
.notif-item small{font-size:.72rem;color:var(--muted)}
.notif-row button{border-bottom:1px solid var(--border);border-radius:0;padding:12px}
.notif-empty{padding:10px 12px;color:var(--muted);margin:0}

/* Login page layout (2026-11-03): logo, date, cards and help form one group,
   centred vertically like the sign-in box; only the footer sits at the bottom.
   Fewer cards get more room. */
.login-page .login-left{display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box}
.login-page .login-main{flex:1;display:flex;flex-direction:column;justify-content:center}
.login-page .login-date{margin:6px 0 4px;font-size:14px;color:var(--muted)}
.login-page .login-content:has(> .public-card:only-of-type) .public-card-scroll{max-height:440px}
.login-page .login-content:has(> .public-card:nth-of-type(2):last-of-type) .public-card-scroll{max-height:300px}
/* Nothing to show: the sign-in box alone, centred on a full blue page. */
.login-page.login-solo{grid-template-columns:1fr;background:linear-gradient(135deg,var(--accent) 0%,var(--navy) 100%)}
.login-page.login-solo .login-left{display:none}
.login-page.login-solo .login-right{min-height:100vh}
.login-page .login-solo-brand{display:flex;justify-content:center;margin-bottom:22px}
.login-page .login-solo-extra{text-align:center;margin-top:22px;color:#ffffffd9}
.login-page .login-solo-extra p{margin:6px 0;color:inherit}
.login-page .login-solo-extra a{color:#fff;text-decoration:underline}
.login-page .login-footer{margin-top:24px}
@media(max-width:900px){.login-page .login-left{min-height:0}}