/* ===== Design tokens ===== */ :root{ --bg:#f3f7fa; --card:#ffffff; --ink:#0b1f3a; --ink-soft:#2b405b; --muted:#62758a; --line:#dbe5ec; --line-soft:#eaf0f4; --brand:#0c2545; --brand2:#2d9ed3; --brand3:#f5a623; --brand-soft:#eaf7fc; --ok:#149c66; --warn:#f59e0b; --bad:#dc2626; --purple:#7c3aed; --blue:#2563eb; --teal:#0f766e; --brown:#92400e; --orange:#ea580c; --pink:#db2777; --indigo:#4f46e5; --cyan:#0891b2; --gray:#6b7280; --lime:#65a30d; --fuchsia:#c026d3; --rose:#e11d48; --radius:22px; --radius-sm:12px; --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --space-6:32px; --content-max:1180px; --shadow-sm:0 1px 2px rgba(20,31,50,.04); --shadow-md:0 10px 28px rgba(12,37,69,.08); --shadow-lg:0 28px 70px rgba(5,24,48,.18); --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1); } :root[data-theme="dark"]{ --bg:#0f1621; --card:#171f2d; --ink:#e8edf5; --ink-soft:#c3cddb; --muted:#8b9bb0; --line:#2a3547; --line-soft:#232d3d; --brand:#7fc4ee; --brand2:#4db3e8; --brand-soft:#16283a; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 10px 28px rgba(0,0,0,.35); --shadow-lg:0 28px 70px rgba(0,0,0,.5); } :root[data-theme="dark"] body{background:var(--bg);color:var(--ink)} :root[data-theme="dark"] .stat,:root[data-theme="dark"] .kpi{background:#1c2636} :root[data-theme="dark"] .accountability-track{background:#2a3547} :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#1c2636;color:var(--ink);border-color:var(--line)} :root[data-theme="dark"] .notice{background:#2b2410;border-color:#4a3c14;color:#e8cf7a} :root[data-theme="dark"] .notice-summary small{color:#c2a758} :root[data-theme="dark"] .notice-details{border-top-color:#4a3c14} /* .notice .link-btn (line ~271) is a hardcoded #7a4a06 -- a dark amber that reads fine on the light notice background but measures ~2:1 (fails WCAG AA) against the notice's own dark-mode background, since both land in the same dark-yellow range. Reuse the notice's own light-yellow text color instead. */ :root[data-theme="dark"] .notice .link-btn{color:#e8cf7a} /* Same bug, same fix, different element: .approvals-legend dd is a hardcoded dark-brown (#754b0b) meant for the light notice background -- ~2:1 against the notice's own dark-mode background, same as the .link-btn case above. */ :root[data-theme="dark"] .approvals-legend dd{color:#e8cf7a} /* .distance-warn's light-mode #b45309 (below) was darkened for AA contrast on white; that same darker shade would just look muddy on the dark card background where the brighter --warn already reads fine (~7.7:1), so only light mode needs the override. */ :root[data-theme="dark"] .distance-warn{color:var(--warn)} /* A batch of hardcoded near-white backgrounds never got a dark-mode counterpart, so dark mode's light ink text (--ink/--ink-soft/--muted are all light colors) landed on them nearly invisible. table/th are the big one -- every data table in the app inherited this. */ :root[data-theme="dark"] table{background:var(--card)} :root[data-theme="dark"] th{background:#1c2636;color:var(--muted)} :root[data-theme="dark"] tbody tr:nth-child(even) td{background:#182030} :root[data-theme="dark"] tbody tr:hover td{background:#22314a} :root[data-theme="dark"] .utility-output{background:#1c2636} :root[data-theme="dark"] input:disabled,:root[data-theme="dark"] select:disabled,:root[data-theme="dark"] textarea:disabled{background:#161d29;color:var(--muted)} :root[data-theme="dark"] .profile-grid .stat,:root[data-theme="dark"] .snapshot-item{background:#1c2636} :root[data-theme="dark"] .cal-head{background:#1c2636;color:var(--muted)} :root[data-theme="dark"] .cal-day.other{background:#141b27} :root[data-theme="dark"] .cal-day.weekend{background:#1a2233} :root[data-theme="dark"] .cal-day.holiday{background:#2a1a2e} :root[data-theme="dark"] .cal-day.selected{background:#22314a;outline-color:var(--ink)} :root[data-theme="dark"] .cal-day:hover{background:#1e2836} :root[data-theme="dark"] .recovery-login,:root[data-theme="dark"] .security-item,:root[data-theme="dark"] .approvals-progress{background:#1c2636} :root[data-theme="dark"] .recovery-codes-panel{background:#2b2410;border-color:#4a3c14;color:#e8cf7a} :root[data-theme="dark"] .strength-meter{background:#232d3d} :root[data-theme="dark"] .hamburger-btn,:root[data-theme="dark"] .icon-btn{background:#1c2636} :root[data-theme="dark"] .icon-btn:hover{background:#232d3d} :root[data-theme="dark"] .nav-btn:hover{background:#1c2636} :root[data-theme="dark"] .setting-row>.ui-icon,:root[data-theme="dark"] .icon-disc{background:#16283a} :root[data-theme="dark"] .demo-note{background:#16283a;border-color:#1c3a5e;color:var(--ink)} :root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .mobile-topbar{background:var(--card)} :root[data-theme="dark"] .nav-btn:hover{background:#1c2636;color:var(--brand)} :root[data-theme="dark"] .nav-btn.active{background:linear-gradient(90deg,#16283a,#1a3247);border-color:#234b68} :root[data-theme="dark"] .setting-row{background:var(--card)} :root[data-theme="dark"] .setting-row:hover{background:linear-gradient(90deg,#1c2636,var(--card))} :root[data-theme="dark"] .appItem{background:var(--card)} :root[data-theme="dark"] .hero-card{background:linear-gradient(160deg,#171f2d 0%,#16283a 100%);border-color:#234b68} /* button.ghost/danger keep a hardcoded white background regardless of theme -- fine for danger (red-on-white still passes AA), but ghost's text color is the *dark-mode* --brand (a light blue meant for dark surfaces), so white-bg + light-blue-text measured ~1.9:1, nowhere near readable. Ghost buttons are the app's default secondary action everywhere, so this was a big one. */ :root[data-theme="dark"] button.ghost,:root[data-theme="dark"] .button.ghost{background:#1c2636;border-color:#2a3f52} :root[data-theme="dark"] button.ghost:hover,:root[data-theme="dark"] .button.ghost:hover{background:var(--brand-soft)} :root[data-theme="dark"] button.danger,:root[data-theme="dark"] .button.danger{background:#1c2636;color:#f87171;border-color:#4a2020} :root[data-theme="dark"] button.danger:hover,:root[data-theme="dark"] .button.danger:hover{background:#241a1a} :root[data-theme="dark"] .cal-day{background:var(--card)} /* --bad (#dc2626) reads fine as red-on-white (button.danger) or white-on-red (pill/toast), so it stays as-is globally -- but as plain text directly on the dark page/card background it drops to ~3.5:1, under WCAG AA's 4.5:1. Only the direct-on-background text uses need a brighter red here. */ :root[data-theme="dark"] .msg.err,:root[data-theme="dark"] .err,:root[data-theme="dark"] .distance-bad{color:#f87171} @media (prefers-reduced-motion: reduce){ .modal-overlay,.modal-box,.sidebar,.sidebar-overlay{transition-duration:.01ms!important} } /* ===== Reset & base ===== */ *{box-sizing:border-box} html,body{min-height:100%;min-height:100dvh} body{ margin:0; background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; overflow:hidden; } .hidden{display:none!important} .mc-preview-img{max-width:220px;max-height:220px;border-radius:var(--radius-sm);border:1px solid var(--line);margin-top:8px;display:block;object-fit:cover} .mc-thumb{max-width:140px;max-height:140px;border-radius:var(--radius-sm);border:1px solid var(--line);object-fit:cover} .attachment-preview{margin:6px 0} .modal-overlay{ position:fixed;inset:0;background:rgba(15,20,30,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000; opacity:1;transition:opacity 200ms var(--ease-out); } .modal-box{ background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px;width:min(480px,100%);max-height:90vh;overflow-y:auto; transform:scale(1);transition:transform 200ms var(--ease-out); } .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .modal-head h3{margin:0} .cal-day.clickable{cursor:pointer} h1,h2,h3{font-weight:800;letter-spacing:-.01em} h1{font-size:clamp(24px,2vw,30px);line-height:1.15;margin:0 0 5px} h2{font-size:17px;margin:0 0 8px} h3{font-size:14px;margin:16px 0 8px;color:var(--ink-soft)} .muted{color:var(--muted);font-size:13.5px;line-height:1.55} .tiny{font-size:12px} .eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--brand);font-weight:800;font-size:11.5px;margin:0 0 4px;display:flex;align-items:center;gap:7px} .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand3);box-shadow:0 0 0 3px rgba(245,166,35,.14);flex:0 0 auto} code{white-space:pre-wrap;word-break:break-word} ::selection{background:rgba(38,148,210,.22)} *:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:6px} /* ===== Login screen ===== */ .login-screen{height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 82% 18%,rgba(45,158,211,.34),transparent 35%),linear-gradient(145deg,#081a33 0%,#0c2e53 60%,#075d87 100%);padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))} .login-card{flex:0 0 auto;position:relative;overflow:hidden;width:min(450px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.55);border-radius:28px;box-shadow:var(--shadow-lg);padding:40px 36px 36px;animation:workspaceRiseIn .35s ease;margin:auto 0} .login-card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--brand2) 0 72%,var(--brand3) 72%)} @keyframes workspaceRiseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes hrmRiseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .login-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:16px 0 4px;background:var(--bg);padding:4px;border-radius:14px} .tab-btn{background:transparent;color:var(--muted);border:0;box-shadow:none;font-weight:700} .tab-btn.active{background:var(--card);color:var(--brand);box-shadow:var(--shadow-sm)} .tab-btn:hover:not(.active){filter:none;background:rgba(255,255,255,.6)} .link-btn{background:none;border:0;box-shadow:none;color:var(--brand);padding:4px 3px;font-weight:650;text-decoration:underline;width:auto} .link-btn:hover{filter:none;box-shadow:none;background:none;text-decoration:none} .auth-focus-panel{animation:hrmFadeIn .18s ease} .auth-focus-panel h2{font-size:22px;margin-bottom:6px} .auth-focus-panel>.back-link{margin-bottom:22px} .company-logo{display:block;width:116px;height:auto;object-fit:contain;flex:0 0 auto} .login-company-logo{width:150px;margin-bottom:24px} /* Shown while the initial /api/me session check is in flight, so a page load or refresh never flashes the login screen for an already-authenticated user (or the dashboard before redirecting to the requested page) -- just a brief, neutral branded moment instead of the wrong screen appearing first. */ .auth-splash{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 82% 18%,rgba(45,158,211,.34),transparent 35%),linear-gradient(145deg,#081a33 0%,#0c2e53 60%,#075d87 100%)} .auth-splash img{width:120px;opacity:0;animation:authSplashFade 400ms 150ms ease-out forwards} @keyframes authSplashFade{to{opacity:1}} @media (prefers-reduced-motion: reduce){ .auth-splash img{animation:none;opacity:1} } /* The login card's white background and the splash's dark gradient backdrop are both fixed by design in either theme (see rules above) -- they were never meant to flip with the light/dark toggle. But dark mode's token values and a handful of hardcoded dark-mode overrides still cascade into them by default, which lands light-mode ink text on the light card as near-invisible, or dark literal backgrounds inside it. Pin the whole auth screen back to its light values, regardless of the user's chosen theme -- the theme choice itself still persists correctly for the app once they're logged in. Selector specificity is matched to each dark-mode rule being countered (see comments) so this wins on theme regardless of source order elsewhere in the file. */ .login-screen{ --bg:#f3f7fa;--card:#ffffff;--ink:#0b1f3a;--ink-soft:#2b405b;--muted:#62758a; --line:#dbe5ec;--line-soft:#eaf0f4;--brand:#0c2545;--brand2:#2d9ed3;--brand3:#f5a623;--brand-soft:#eaf7fc;--bad:#dc2626; --shadow-sm:0 1px 2px rgba(20,31,50,.04);--shadow-md:0 10px 28px rgba(12,37,69,.08);--shadow-lg:0 28px 70px rgba(5,24,48,.18); } /* Redefining the custom properties above only reaches descendants that reference var(--ink) themselves (inputs, .eyebrow, .muted). h1/h2/etc set no color of their own, so without this they keep inheriting body's already-computed dark-mode color instead of picking up the override -- setting color here explicitly is what makes it cascade to them too. */ .login-screen{color:var(--ink)} /* Counters :root[data-theme="dark"] input,select,textarea (0,2,1) */ :root .login-screen input,:root .login-screen select,:root .login-screen textarea{background:#fff;color:var(--ink);border-color:var(--line)} /* Counters :root[data-theme="dark"] input:disabled,select:disabled,textarea:disabled (0,3,1) */ :root .login-screen input:disabled,:root .login-screen select:disabled,:root .login-screen textarea:disabled{background:#f3f4f6;color:var(--muted)} /* Counters :root[data-theme="dark"] button.ghost,.button.ghost (0,3,1) */ :root .login-screen button.ghost,:root .login-screen .button.ghost{background:#fff;color:var(--brand);border-color:#d3ddf5} /* Counters :root[data-theme="dark"] .msg.err / .err (0,4,0 / 0,3,0) */ :root .login-screen .msg.err{color:var(--bad)} :root .login-screen .err{color:var(--bad)} /* Counters :root[data-theme="dark"] .strength-meter (0,3,0) */ :root .login-screen .strength-meter{background:#e5e7eb} /* Counters :root[data-theme="dark"] .recovery-login (0,3,0) */ :root .login-screen .recovery-login{background:#f8fafc} @media (prefers-reduced-motion: no-preference) { html{scroll-behavior:smooth} } /* ===== App shell / layout ===== */ .app-shell{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-columns:232px minmax(0,1fr);overflow:hidden} .app-shell.has-jump-rail{grid-template-columns:232px 184px minmax(0,1fr)} .mobile-topbar{display:none} /* "On this page" shortcuts, sitting in their own column between the sidebar and the content -- not a row above the content -- so it stays visible the whole time without competing with the page's own header for space. */ .page-jump-rail{ height:100vh;height:100dvh;min-height:0;overflow-y:auto; border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:8px; background:var(--bg); } .page-jump-rail.hidden{display:none} .page-jump-rail-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;color:var(--muted);padding:0 2px} .page-jump-rail nav{display:flex;flex-direction:column;gap:3px} .page-jump-rail nav a{ font-size:13px;font-weight:650;color:var(--ink-soft);text-decoration:none; padding:8px 10px;border-radius:10px;border:1px solid transparent; } .page-jump-rail nav a:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--line)} .sidebar{ height:100vh;height:100dvh;min-height:0;overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f9fcfd 100%);color:var(--ink); border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column; } .brand-box{display:flex;align-items:center;gap:11px;padding:7px 6px 18px;border-bottom:1px solid var(--line-soft);flex:0 0 auto} .brand-box small{display:block;color:var(--muted);margin-top:1px;font-size:11.5px} .logo-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--brand2),#8fd3f4);display:grid;place-items:center;font-weight:900;color:#fff;font-size:13px;flex:0 0 auto} .login-logo-mark{width:52px;height:52px;border-radius:15px;font-size:18px;margin-bottom:14px;box-shadow:var(--shadow-md)} .side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:16px;padding-right:4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent} .side-nav::-webkit-scrollbar{width:7px} .side-nav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px} .nav-group{margin-bottom:18px} .nav-group-label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#8a94a6;padding:0 10px 6px} .nav-group .nav-btn+.nav-btn{margin-top:3px} .nav-btn{ position:relative;width:100%;display:flex;align-items:center;justify-content:flex-start; background:transparent;color:var(--ink-soft);border:1px solid transparent;text-decoration:none; min-height:44px;padding:10px 12px;border-radius:13px;font-weight:680;font-size:13px;line-height:1.3;text-align:left;gap:10px; } .nav-btn:hover{background:#edf7fb;color:var(--brand)} .nav-btn.active{background:linear-gradient(90deg,#e7f6fc,#f3faff);color:var(--brand);border-color:#cbeaf6} .nav-btn.active::before{content:'';position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:99px;background:var(--brand2)} .module-link{text-decoration:none} .side-footer{flex:0 0 auto;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px} #clockInOutBox .actions{margin-top:14px} .side-user{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.5} .sidebar-overlay{display:none} .workspace{height:100vh;height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;padding:30px clamp(20px,3vw,48px) max(48px,env(safe-area-inset-bottom));background:radial-gradient(circle at 100% 0,rgba(45,158,211,.07),transparent 30%),var(--bg)} .topbar,.notice,.page{width:min(100%,var(--content-max));margin-left:auto;margin-right:auto} .topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap} .top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .top-actions>select{min-width:220px} .notice{background:#fffbeb;border:1px solid #f5df9a;color:#754b0b;border-radius:12px;padding:10px 14px;margin-bottom:20px;font-size:13px;line-height:1.5;overflow-wrap:anywhere;box-sizing:border-box} .notice-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0} .notice-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .notice-summary small{color:#98691d;margin-left:8px;font-size:12px} .notice .link-btn{flex-shrink:0;color:#7a4a06;font-weight:700} .notice-details{margin-top:8px;padding-top:8px;border-top:1px solid #fbe3a1;display:grid;gap:6px;opacity:1;transition:opacity 160ms ease-out;overflow-wrap:anywhere;min-width:0} .notice-details.hidden{display:none} .plain-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px} .approvals-legend{display:grid;gap:6px;margin:4px 0 0;padding:0;min-width:0} .approvals-legend>div{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:baseline;min-width:0} .approvals-legend dt{font-weight:700;margin:0;overflow-wrap:anywhere} .approvals-legend dd{margin:0;color:#754b0b;overflow-wrap:anywhere;min-width:0} /* Compact notices (leave breakdown, RTS/My Referrals notices) live in narrower cards than the full-width dashboard notices, so truncate-to-ellipsis on the summary line is too easily wrong for their container width -- wrap instead. */ .notice.compact .notice-summary{flex-wrap:wrap} .notice.compact .notice-summary span{white-space:normal;overflow:visible;text-overflow:clip} .notice.compact .approvals-legend>div{grid-template-columns:1fr} @media (max-width:640px){ .approvals-legend>div{grid-template-columns:1fr} } @media (max-width:640px){ .notice-summary{flex-direction:column;align-items:flex-start;gap:4px} .notice-summary span{white-space:normal} } /* ===== Pages & cards ===== */ .page{display:none} .active-page{display:block;animation:hrmFadeIn .18s ease} @keyframes hrmFadeIn{from{opacity:0}to{opacity:1}} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 18px rgba(12,37,69,.045);padding:var(--space-5);margin-bottom:var(--space-4);transition:border-color .2s ease,box-shadow .2s ease} .card:hover{border-color:#cbdce7;box-shadow:0 8px 24px rgba(12,37,69,.065)} .narrow-card{max-width:760px} .hero-card{background:linear-gradient(160deg,#ffffff 0%,#f3f9ff 100%);border-color:#e0ecfb} .hero-col-stack{min-width:0} .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px} .card-head h2{margin-bottom:2px} .card-head .muted{margin:3px 0 0} .wrap{flex-wrap:wrap} .hub-page,.focused-content{width:min(100%,780px);margin-left:auto;margin-right:auto} .hub-card{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:0 12px 36px rgba(12,37,69,.065);overflow:hidden} .setting-row{ width:100%;min-height:88px;padding:19px 22px;border:0;border-bottom:1px solid var(--line-soft);border-radius:0; background:#fff;color:var(--ink);box-shadow:none;display:flex;align-items:center;justify-content:flex-start;gap:16px;text-align:left;text-decoration:none; } .setting-row:last-child{border-bottom:0} .setting-row:hover{background:linear-gradient(90deg,#f3fbfe,#fff);filter:none;transform:none;box-shadow:none} .setting-row>span:first-of-type{display:grid;gap:5px;flex:1} .setting-row strong{font-size:15px} .setting-row small{font-size:13px;line-height:1.45;color:var(--muted);font-weight:500} .setting-row>span:last-child{font-size:28px;line-height:1;color:#8ba0b3;font-weight:400} .dept-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px} .dept-tag-row:empty{display:none} .badge.dept-tag{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:10px;padding:2px 8px} .ui-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .access-matrix-table th.matrix-group-header{text-align:center;font-size:10.5px;color:var(--muted);background:var(--brand-soft);border-bottom:2px solid var(--brand2)} .access-matrix-table th.matrix-group-header+th.matrix-group-header{border-left:1px solid var(--line)} .access-matrix-table th[data-icon]{white-space:nowrap} .access-matrix-table th[data-icon] .ui-icon{width:14px;height:14px;margin-right:5px;vertical-align:-2px} .setting-row>.ui-icon{width:42px;height:42px;padding:10px;border-radius:14px;color:var(--brand2);background:#e9f7fc;stroke-width:1.7} .directory-intro{display:flex;align-items:center;gap:13px}.directory-intro h2,.directory-intro p{margin:0}.icon-disc{width:42px;height:42px;border-radius:14px;background:#e9f7fc;color:var(--brand2);display:grid;place-items:center} .back-link{background:transparent;color:var(--brand);box-shadow:none;padding:6px 3px;margin:0 0 14px;border:0;font-weight:700;text-decoration:none;display:inline-block} .back-link:hover{background:transparent;box-shadow:none;filter:none;text-decoration:underline} .grid{display:grid;gap:var(--space-4)} .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.four{grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.8fr)} .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))} .compact{gap:12px} .module-page .kpi-row{margin-bottom:18px} .balance-source-note{grid-column:1/-1;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--brand-soft);color:var(--muted);font-size:.9rem} .utility-input{min-height:180px} .utility-output{min-height:160px;max-height:320px;overflow:auto;background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;white-space:pre-wrap} /* ===== Forms ===== */ label{display:block;font-weight:700;font-size:12px;margin:14px 0 6px;color:var(--ink-soft)} .sort-inline{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:600} .sort-inline select{margin:0;width:auto} input,select,textarea{ width:100%;min-height:42px;border:1px solid #d7dce6;border-radius:var(--radius-sm);padding:10px 12px; font:inherit;background:#fff;color:var(--ink); } input::placeholder,textarea::placeholder{color:#9aa4b7} textarea{min-height:80px;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(45,158,211,.14);outline:none} input:disabled,select:disabled,textarea:disabled{background:#f3f4f7;color:var(--muted)} button,.button{ display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0; background:linear-gradient(135deg,#168fc8,var(--brand2));color:#fff; min-height:40px;padding:9px 15px;border-radius:var(--radius-sm);font-weight:700;font-size:13px; text-decoration:none;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease,transform .05s ease; } button:hover:not(:disabled),.button:hover{filter:brightness(1.05);box-shadow:0 7px 20px rgba(45,158,211,.25)} button:active:not(:disabled),.button:active{transform:translateY(1px)} button:disabled{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none} button.ghost,.button.ghost{background:#fff;color:var(--brand);border:1px solid #d3ddf5} button.ghost:hover,.button.ghost:hover{background:var(--brand-soft)} button.danger,.button.danger{background:#fff;color:var(--bad);border:1px solid #fbcaca} button.danger:hover,.button.danger:hover{background:#fff5f5} .full{width:100%} .toolbar,.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* .actions.wrap is the closing button row of a card/form section, always directly after a field/paragraph with no bottom margin of its own to bridge the gap -- give it breathing room by default instead of the per-container margin-top overrides (#clockInOutBox, .approveBox) this codebase kept re-adding one page at a time. */ .actions.wrap{margin-top:14px} /* A bare submit