/* AGR ATS — "Atelier" theme Quiet-premium, minimal design system with full light / dark / system support. Paper-white surfaces · hairline 1px borders · flat & refined · restrained navy + crimson accents. Clean modern sans (no serif, no webfont). Tokens defined at three places: :root → LIGHT html[data-theme="dark"] → DARK (explicit) @media(prefers-color-scheme:dark) html[data-theme="system"] → DARK (follows OS) Tokens are GLOBAL; the attribute is set elsewhere (server + JS toggle). */ :root{ --font-head:-apple-system,"Segoe UI",system-ui,"Inter","Helvetica Neue",Arial,sans-serif; --font-body:-apple-system,"Segoe UI",system-ui,"Inter","Helvetica Neue",Arial,sans-serif; /* surfaces & lines */ --bg:#fbfbf9; --surface:#ffffff; --surface-2:#f5f3ef; --line:#ece9e4; --line-2:#e1ded7; /* legacy alias kept working (some markup references var(--body)) */ --body:#f5f3ef; /* ink */ --ink:#1b2026; --ink-2:#5b6573; --ink-3:#99a0ac; /* accents */ --navy:#133557; --navy-d:#0d2742; --navy-2:#1f4e8c; --red:#a71e25; --red-d:#8a1a1f; /* legacy accent aliases (restrained tints derived from navy/red) */ --navy-3:#5a779b; --slate:#4a6478; --red-2:#c0464c; --red-3:#d98a8e; --light:#e1ded7; /* status */ --ok:#0c6b3d; --okbg:#e4f3ea; --warn:#94660a; --warnbg:#fbf1da; --bad:#a93226; --badbg:#fbe9ea; /* geometry */ --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.05); --sidebar-w:236px; } html[data-theme="dark"]{ --bg:#0f1217; --surface:#161b22; --surface-2:#1d232c; --line:#262d37; --line-2:#323b46; --body:#1d232c; --ink:#e7ecf3; --ink-2:#9aa6b4; --ink-3:#6e7988; --navy:#7aa7e0; --navy-d:#5b8fd6; --navy-2:#9cc0ef; --red:#ec8388; --red-d:#e8767b; --navy-3:#9cc0ef; --slate:#9aa6b4; --red-2:#ec8388; --red-3:#e8767b; --light:#323b46; --ok:#5fd39a; --okbg:#15302a; --warn:#e0b15a; --warnbg:#322a12; --bad:#ec8a8a; --badbg:#3a1f1f; --shadow:0 1px 2px rgba(0,0,0,.4); } @media(prefers-color-scheme:dark){ html[data-theme="system"]{ --bg:#0f1217; --surface:#161b22; --surface-2:#1d232c; --line:#262d37; --line-2:#323b46; --body:#1d232c; --ink:#e7ecf3; --ink-2:#9aa6b4; --ink-3:#6e7988; --navy:#7aa7e0; --navy-d:#5b8fd6; --navy-2:#9cc0ef; --red:#ec8388; --red-d:#e8767b; --navy-3:#9cc0ef; --slate:#9aa6b4; --red-2:#ec8388; --red-3:#e8767b; --light:#323b46; --ok:#5fd39a; --okbg:#15302a; --warn:#e0b15a; --warnbg:#322a12; --bad:#ec8a8a; --badbg:#3a1f1f; --shadow:0 1px 2px rgba(0,0,0,.4); } } *{box-sizing:border-box;margin:0} body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.font-head{font-family:var(--font-head);font-weight:600;letter-spacing:-.01em} a{color:var(--navy);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%} /* macOS-style thin overlay scrollbars — subtle, rounded, no arrows; theme-aware via --ink-3 */ html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-3) 60%,transparent) transparent} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:transparent;border:0} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 52%,transparent);border:3px solid transparent;border-radius:999px;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-3) 82%,transparent);background-clip:padding-box} ::-webkit-scrollbar-thumb:active{background:color-mix(in srgb,var(--ink-3) 95%,transparent);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* inline icon helper — uses stroke=currentColor and inherits link color */ .ic{display:inline-block;vertical-align:middle;flex:0 0 auto} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;border:1px solid var(--navy); background:var(--navy);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap} .btn:hover{background:var(--navy-d);border-color:var(--navy-d);text-decoration:none} .btn.red{background:var(--red);border-color:var(--red);color:#fff} .btn.red:hover{background:var(--red-d);border-color:var(--red-d)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)} .btn.sm{padding:5px 11px;font-size:12px} .btn.big{padding:12px 28px;font-size:15px} .btn:disabled{opacity:.5;cursor:default} .btn.danger{background:transparent;color:var(--bad);border-color:var(--line-2)} .btn.danger:hover{background:var(--badbg);border-color:var(--bad)} /* CONTRAST RULE — in dark mode --navy is lightened for legible accent text, so the solid primary button would become light-blue-fill + white-text (illegible). Pin the primary fill to a DEEP navy in dark mode while keeping white text. */ html[data-theme="dark"] .btn{background:#1f4e8c;border-color:#1f4e8c;color:#fff} html[data-theme="dark"] .btn:hover{background:#173d6e;border-color:#173d6e} html[data-theme="dark"] .btn.red{background:#8a1a1f;border-color:#8a1a1f;color:#fff} html[data-theme="dark"] .btn.red:hover{background:#6f1418;border-color:#6f1418} html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} html[data-theme="dark"] .btn.ghost:hover{background:var(--surface-2)} html[data-theme="dark"] .btn.danger{color:var(--bad);border-color:var(--line-2)} @media(prefers-color-scheme:dark){ html[data-theme="system"] .btn{background:#1f4e8c;border-color:#1f4e8c;color:#fff} html[data-theme="system"] .btn:hover{background:#173d6e;border-color:#173d6e} html[data-theme="system"] .btn.red{background:#8a1a1f;border-color:#8a1a1f;color:#fff} html[data-theme="system"] .btn.red:hover{background:#6f1418;border-color:#6f1418} html[data-theme="system"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} html[data-theme="system"] .btn.ghost:hover{background:var(--surface-2)} html[data-theme="system"] .btn.danger{color:var(--bad);border-color:var(--line-2)} } /* ---------- theme toggle: segmented pill ---------- */ .theme-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:var(--surface)} .theme-seg-btn{display:grid;place-items:center;width:30px;height:26px;border:0;background:transparent;color:var(--ink-3);border-radius:999px;cursor:pointer;transition:.15s;font-family:inherit} .theme-seg-btn:hover{color:var(--ink)} .theme-seg-btn[aria-pressed="true"],.theme-seg-btn.on{background:var(--surface-2);color:var(--navy)} .theme-seg-btn .ic{width:16px;height:16px} /* ---------- public site shell ---------- */ .site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30} .site-header .inner{max-width:1120px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px} .site-header .logo{height:42px} .site-nav a{color:var(--ink);font-weight:600;font-size:14px;margin-left:22px} .site-nav a:hover{color:var(--red);text-decoration:none} .hero{background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink);padding:56px 22px;position:relative} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red)} .hero .inner{max-width:1120px;margin:0 auto} .hero h1{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .hero p{color:var(--ink-2);font-size:16px;margin-top:10px;max-width:640px} .wrap{max-width:1120px;margin:0 auto;padding:30px 22px 60px} .site-foot{background:var(--surface-2);color:var(--ink-2);padding:34px 22px;margin-top:40px;border-top:1px solid var(--line)} .site-foot .inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13px} .site-foot a{color:var(--navy)} .site-foot .cols{display:flex;gap:46px;flex-wrap:wrap} .site-foot h4{color:var(--ink);font-size:13px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em} .site-foot .legal{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:12px;text-align:center;color:var(--ink-3)} .site-foot .foot-logo{height:30px;width:auto;display:block;margin-bottom:2px} /* Brand logo: the ORIGINAL full-colour artwork is used in BOTH themes (header + footer). In dark mode the navy/red marks would sink into the dark surface, so the artwork gets a feathered light halo via stacked drop-shadows — these follow the letterforms' alpha, not a rectangle, so there is NO background plate (owner rejected the earlier "white chip" look). Tight bright pass lifts the navy strokes; wide faint passes melt into the dark background. */ html[data-theme="dark"] .site-header .logo{filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(240,244,250,.45)) drop-shadow(0 0 22px rgba(240,244,250,.22))} html[data-theme="dark"] .site-foot .foot-logo{filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(240,244,250,.40)) drop-shadow(0 0 18px rgba(240,244,250,.20))} @media(prefers-color-scheme:dark){ html[data-theme="system"] .site-header .logo{filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(240,244,250,.45)) drop-shadow(0 0 22px rgba(240,244,250,.22))} html[data-theme="system"] .site-foot .foot-logo{filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(240,244,250,.40)) drop-shadow(0 0 18px rgba(240,244,250,.20))} } /* ---------- job cards ---------- */ .filters{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap} .filters input,.filters select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink)} .filters input{flex:1;min-width:220px} .joblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px} .jobcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.15s;display:block;color:var(--ink)} .jobcard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px);text-decoration:none} .jobcard .jt{font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--ink)} .jobcard .jm{color:var(--ink-2);font-size:13px;margin-top:5px} .jobcard .jtag{display:inline-block;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;margin-top:10px;border:1px solid var(--line)} .jobcard .jd{color:var(--ink-2);font-size:13.5px;margin-top:10px;line-height:1.55} .jobcard .japply{color:var(--red);font-weight:600;font-size:13px;margin-top:12px} .badge{display:inline-block;padding:2.5px 9px;border-radius:99px;font-size:11.5px;font-weight:600} .b-ok{background:var(--okbg);color:var(--ok)} .b-warn{background:var(--warnbg);color:var(--warn)} .b-bad{background:var(--badbg);color:var(--bad)} .b-mut{background:var(--surface-2);color:var(--ink-2)} /* ---------- forms / cards ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .card .chead{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;font-family:var(--font-head);display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink)} .card .cbody{padding:18px} label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px} input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--surface)} input::placeholder,textarea::placeholder{color:var(--ink-3)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)} /* Browser autofill: Chrome/Safari paint a pale yellow/blue fill that ignores the theme and leaves near-white boxes with unreadable pale text in dark mode. Repaint the fill with a huge inset shadow in the themed surface colour and pin the text + caret to the themed ink. */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, select:-webkit-autofill,textarea:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--surface) inset; -webkit-text-fill-color:var(--ink); caret-color:var(--ink); transition:background-color 99999s ease-out} input:-webkit-autofill:focus,select:-webkit-autofill:focus,textarea:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent),0 0 0 1000px var(--surface) inset} .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .fgrid .wide{grid-column:1/-1} .formbox{max-width:720px;margin:0 auto} .section-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:6px;margin:18px 0 12px} .consent{display:flex;gap:9px;align-items:flex-start;margin:16px 0;font-size:12.5px;color:var(--ink-2);font-weight:400;line-height:1.5} .consent input{width:16px;height:16px;margin-top:1px;flex-shrink:0} .alert{padding:11px 15px;border-radius:8px;font-size:13.5px;margin-bottom:16px;border:1px solid transparent} .alert.ok{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)} .alert.err{background:var(--badbg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)} .alert.info{background:var(--surface-2);color:var(--navy);border-color:var(--line-2)} .authbox{max-width:420px;margin:50px auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:34px} .authbox h1{font-size:22px;color:var(--ink);margin-bottom:5px} .authbox .sub{color:var(--ink-2);font-size:13.5px;margin-bottom:22px} .authbox .field{margin-bottom:14px} .muted{color:var(--ink-3);font-size:12.5px} .err-text{color:var(--bad);font-size:12px;margin-top:4px} /* ---------- internal app shell ---------- */ .app{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-w);background:var(--surface);color:var(--ink-2);border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20} .sidebar .brand{padding:20px 18px 18px;text-align:center;border-bottom:1px solid var(--line)} .sidebar .brand img{display:block;margin:0 auto 8px;border-radius:12px} .sidebar .brand small{display:block;font-family:var(--font-head);font-size:9px;font-weight:600;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;margin-top:0} .nav{flex:1;padding:10px 10px;overflow-y:auto} .nav .s{padding:14px 8px 5px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600} .nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;color:var(--ink-2);font-size:13.5px;border-radius:8px;transition:.12s} .nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none} .nav a.on{background:var(--surface-2);color:var(--navy);font-weight:600;box-shadow:inset 2px 0 0 var(--red)} .nav a .ic{width:18px;height:18px;color:inherit} .nav a .count{margin-left:auto;font-size:11px;font-weight:600;background:var(--red);color:#fff;padding:1px 7px;border-radius:99px;line-height:1.5} .nav a.on .count,.nav a:hover .count{background:var(--red)} .sidebar .foot{padding:12px 14px;border-top:1px solid var(--line);font-size:12px} .sidebar .foot .nm{color:var(--ink);font-weight:600} .sidebar .foot .rl{color:var(--ink-3);text-transform:capitalize} .main{flex:1;margin-left:var(--sidebar-w);padding:22px 26px 60px;min-width:0} .pagehead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} .pagehead h1{font-family:var(--font-head);font-size:21px;color:var(--ink);font-weight:700} .pagehead .sub{color:var(--ink-2);font-size:13px;margin-top:3px} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* generic single .stat cards (dashboard tiles) */ .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;color:inherit;display:block;transition:.15s} .stat:hover{border-color:var(--line-2);text-decoration:none} .stat .v{font-size:25px;font-weight:700;font-family:var(--font-head);line-height:1.1;color:var(--ink);letter-spacing:-.02em} .stat .l{color:var(--ink-2);font-size:11.5px;margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* tables */ table{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)} th{text-align:left;padding:12px 14px;background:var(--surface-2);color:var(--ink-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600} td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)} tbody tr:hover{background:var(--surface-2)} tr.click{cursor:pointer} .matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left;font-weight:600} .matrix .tot{font-weight:700;background:var(--surface-2)} .num{color:var(--navy);font-weight:600;cursor:pointer} .tablewrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--line)} /* tabs */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap} .tabs a{padding:9px 16px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px} .tabs a.on{color:var(--ink);border-bottom-color:var(--red)} .tabs a:hover{text-decoration:none;color:var(--ink)} /* positions: inline-editable table cells + pipeline drag board */ .postable .cell-sel,.postable .cell-inp{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);width:100%;max-width:170px} .postable .cell-inp[type=date]{max-width:144px} .postable .cell-sel:hover,.postable .cell-inp:hover{border-color:var(--line)} .postable .cell-sel:focus,.postable .cell-inp:focus{border-color:var(--navy);background:var(--surface);outline:none} .postable td{vertical-align:middle} .postable .postitle{font-weight:600;color:var(--navy)} .cell-saved{animation:cellSaved 1s ease} @keyframes cellSaved{0%{background:var(--okbg)}100%{background:transparent}} .cell-err{border-color:var(--bad)!important} /* positions LIST restructure (2026-07): 13 cramped columns → 9 readable ones. .w-min columns shrink to their content (min-widths below stop them crushing), pushing all spare width into Client/POC and Position — the two-line stacked cells. nowrap everywhere a value must never truncate; .tablewrap horizontal scroll stays as the safety net. */ .postable th,.postable td{padding:10px} .postable th.w-min{width:1%} .postable .cell-2l{min-width:160px} .postable .cell-2l .l1{font-weight:600;line-height:1.35} .postable .cell-2l .l2{font-size:11.5px;color:var(--ink-2);margin-top:1px} .postable .cmt{cursor:help;margin-left:5px;font-size:12px} .postable .cell-bud{min-width:98px;max-width:190px} /* free text — wraps rather than widening the table */ .postable .cell-sel{min-width:64px} /* floor for the Priority select ("Medium" + arrow) */ .postable .cell-sel--rec{min-width:122px} /* full recruiter names — never "Asad Ela…" */ .postable .cell-sel--st{min-width:106px} /* fits "Onboarding" incl. the dropdown arrow */ .postable .cell-inp[type=date]{width:114px} /* explicit — a date input's intrinsic min-content (~123px) otherwise wins */ /* empty date cells: quiet clickable — that swaps to the real input (posDateEdit/posDateBlur) */ .postable .date-ghost{border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:13px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:6px} .postable .date-ghost:hover{color:var(--ink);background:var(--surface-2)} .pri-High{color:var(--bad)}.pri-Medium{color:var(--warn)}.pri-Low{color:var(--ink-3)} .postable .st-Active{color:var(--ok);font-weight:600}.postable .st-Lost{color:var(--bad)}.postable .st-Lead{color:var(--warn)} .tabs a .ic{width:16px;height:16px;margin-right:6px;vertical-align:-3px} .posboard .pcard{cursor:grab;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:8px;box-shadow:var(--shadow)} .posboard .pcard:active{cursor:grabbing} .posboard .pcard.dragging{opacity:.45} .posboard .pcard .nm{font-weight:600;font-size:13px;line-height:1.3;margin-bottom:3px} .posboard .pcard .meta{font-size:11.5px;color:var(--ink-2);margin-top:2px} .posboard .kcol.dragover{outline:2px dashed var(--navy);outline-offset:-3px;background:var(--surface-2)} .posboard .kempty{color:var(--ink-3);text-align:center;padding:14px;font-size:12px} /* kanban */ .kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px} .kcol{min-width:210px;width:210px;flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)} .kcol .kh{padding:10px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);display:flex;justify-content:space-between} .kcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 8px 8px;box-shadow:var(--shadow)} .kcard .nm{font-weight:600;font-size:13px;color:var(--ink)}.kcard .meta{color:var(--ink-2);font-size:11.5px;margin-top:3px} .kv{display:grid;grid-template-columns:180px 1fr;gap:7px 14px;font-size:13.5px} .kv dt{color:var(--ink-2);font-weight:600}.kv dd{margin:0;color:var(--ink)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} @media(max-width:1000px){.grid2{grid-template-columns:1fr}} .alertline{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px} .empty{padding:32px;text-align:center;color:var(--ink-3)} .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:38px 16px;z-index:50;overflow:auto} .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:760px;box-shadow:0 12px 40px rgba(16,24,40,.18)} .modal .mh{padding:15px 20px;border-bottom:1px solid var(--line);font-weight:600;font-family:var(--font-head);display:flex;justify-content:space-between;color:var(--ink)} .modal .mb{padding:20px}.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px} .bar{height:20px;border-radius:6px;background:var(--surface-2);overflow:hidden}.bar>span{display:block;height:100%;background:var(--ok)} /* F6: field timestamps */ .fieldts{font-size:10px;color:var(--ink-3);cursor:help;margin-left:4px;white-space:nowrap} .fieldts:hover{color:var(--navy)} /* F2/F5: quick-pick date buttons */ .qpick{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px} .qpick button{font-size:11.5px;padding:3px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);cursor:pointer;color:var(--ink-2);transition:all .15s} .qpick button:hover{border-color:var(--navy);color:var(--navy)} .qpick button.active{background:var(--navy);color:#fff;border-color:var(--navy)} html[data-theme="dark"] .qpick button.active{background:#1f4e8c;border-color:#1f4e8c;color:#fff} @media(prefers-color-scheme:dark){html[data-theme="system"] .qpick button.active{background:#1f4e8c;border-color:#1f4e8c;color:#fff}} /* chart cards in a 3-up grid */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} @media(max-width:1100px){.grid3{grid-template-columns:1fr 1fr}} @media(max-width:700px){.grid3{grid-template-columns:1fr}} /* recruiter by-table */ .rtable{width:100%;border-collapse:collapse;font-size:12.5px} .rtable th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);background:transparent} .rtable td{padding:6px 8px;border-bottom:1px solid var(--line)} .rtable tr:last-child td{border-bottom:none} /* Executive summary KPI bar (Big 4 hero metrics) */ .exec-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px} .exec-kpi{background:var(--surface);padding:14px 20px;text-align:center} .exec-v{font-size:1.85rem;font-weight:700;line-height:1;color:var(--ink);font-family:var(--font-head);letter-spacing:-.02em} .exec-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-top:5px;font-weight:600} .ekpi-ok .exec-v{color:var(--ok)} .ekpi-amber .exec-v{color:var(--warn)} .ekpi-warn .exec-v{color:var(--red)} @media(max-width:900px){.exec-bar{grid-template-columns:repeat(2,1fr)}} /* percentage sub-label inside .stat aging cards */ .l-sub{font-size:10px;color:var(--ink-3);margin-top:2px;font-weight:500;letter-spacing:0;text-transform:none} /* Inline badge in card headers (e.g. avg days open) */ .exec-badge{font-size:11px;font-weight:600;color:var(--warn);background:var(--warnbg);padding:2px 8px;border-radius:99px;margin-left:6px;font-family:var(--font-body);vertical-align:middle} /* Proactive insight callout above aging section */ .insight-callout{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:8px;padding:11px 16px;font-size:13px;color:var(--warn);margin-bottom:14px} /* ── BD Module styles ── */ /* Contact directory link chips */ .contact-link{color:var(--navy);text-decoration:none;white-space:nowrap;font-size:12.5px} .contact-link:hover{text-decoration:underline;opacity:.85} /* Activity feed line in leads / position detail */ .alertline{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);gap:10px;font-size:13px} .alertline:last-child{border-bottom:none} .alertline a{color:var(--navy);text-decoration:none;font-weight:600} .alertline a:hover{text-decoration:underline} /* BD activity log type badge */ .activity-type{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);margin-right:4px;vertical-align:middle} /* Overdue next-followup date highlight */ input[style*="border-color:var(--red)"]{border-color:var(--red)!important} /* BD pipeline funnel bar */ .bd-funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:9px} .bd-funnel-bar{flex:1;height:22px;background:var(--surface-2);border-radius:4px;overflow:hidden} /* Lead table clickable rows */ tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-2)} /* stat grid (status counts row) — segmented hairline strip */ .statgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px} .statgrid .stat{background:var(--surface);padding:12px 14px;text-align:center;text-decoration:none;display:block;transition:background .15s;border:0;border-radius:0;box-shadow:none;cursor:pointer} .statgrid .stat:hover{background:var(--surface-2)} .statgrid .stat .v{font-size:1.5rem;font-weight:700;color:var(--ink);font-family:var(--font-head);line-height:1.1;letter-spacing:-.02em} .statgrid .stat .l{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);font-weight:600;margin-top:3px} @media(max-width:900px){.statgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:500px){.statgrid{grid-template-columns:repeat(2,1fr)}} /* SAP-style pipeline stage tiles (position detail): All + 9 active stages + Archived = 11 columns (the tile row derives from PIPELINE_STAGES — Longlist/Shortlist added 2026-07). Active tile follows the .btn CONTRAST RULE above — dark mode pins a DEEP navy fill because --navy is lightened there for accent text and would be illegible under white. */ .pipetiles{grid-template-columns:repeat(11,1fr)} .pipetiles .stat.on,.pipetiles .stat.on:hover{background:var(--navy)} .pipetiles .stat.on .v,.pipetiles .stat.on .l{color:#fff} html[data-theme="dark"] .pipetiles .stat.on,html[data-theme="dark"] .pipetiles .stat.on:hover{background:#1f4e8c} @media(prefers-color-scheme:dark){html[data-theme="system"] .pipetiles .stat.on,html[data-theme="system"] .pipetiles .stat.on:hover{background:#1f4e8c}} @media(max-width:1100px){.pipetiles{grid-template-columns:repeat(6,1fr)}} @media(max-width:600px){.pipetiles{grid-template-columns:repeat(3,1fr)}} /* Candidate viewer modal (position pipeline): staff details pane + embedded original CV. Reuses the generic .modal vocabulary; theme-safe (surfaces/lines/ink via variables only). */ .candview .modal{max-width:1180px} .candview .cvgrid{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start} @media(max-width:900px){.candview .cvgrid{grid-template-columns:1fr}} .candview .kv{grid-template-columns:120px 1fr;font-size:12.5px;gap:6px 12px} .candview .kv dd{overflow-wrap:anywhere} .candview .cvframe{width:100%;height:68vh;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)} .candview .cvfallback{height:68vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed var(--line-2);border-radius:8px;color:var(--ink-2);background:var(--surface-2);text-align:center;padding:20px;font-size:13px} .candview .cvsummary{font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);margin-top:12px;padding-top:10px;max-height:140px;overflow:auto;white-space:pre-wrap} .pipe-row{cursor:pointer} .pipe-row:hover{background:var(--surface-2)} /* Contact-row in client form */ .contact-row input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--surface)} .contact-row input:focus{outline:none;border-color:var(--navy)} /* Inline log: expandable follow-up rows (native
, no JS) */ details.fu-row>summary{cursor:pointer;list-style:none;user-select:none} details.fu-row>summary::-webkit-details-marker{display:none} details.fu-row>summary::marker{content:""} details.fu-row>summary:hover{background:var(--surface-2)} details.fu-row[open]>summary{background:var(--surface-2);font-weight:600} /* Brand color-blocking device (red | navy split) */ .brandsplit{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)} .brandsplit .bs-red{background:var(--red);color:#fff;padding:22px 26px} .brandsplit .bs-navy{background:var(--navy);color:#fff;padding:22px 26px;flex:1} .brand-tagline{font-family:var(--font-head);color:var(--red);font-size:13px;letter-spacing:0;font-weight:600} /* in dark mode the lightened navy/red make poor solid fills with white text — deepen */ html[data-theme="dark"] .brandsplit .bs-red{background:#8a1a1f} html[data-theme="dark"] .brandsplit .bs-navy{background:#1f4e8c} @media(prefers-color-scheme:dark){ html[data-theme="system"] .brandsplit .bs-red{background:#8a1a1f} html[data-theme="system"] .brandsplit .bs-navy{background:#1f4e8c} } /* Print / PDF view */ @media print{ .sidebar,.qpick,form,.pagehead form,button,.btn,.nav,.theme-seg{display:none!important} .main{margin:0;padding:8px;max-width:100%} .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:12px} .exec-bar{border:1px solid #ccc;break-inside:avoid} .exec-v{font-size:1.4rem} a{color:inherit!important;text-decoration:none!important} body{font-size:11px;color:#000;background:#fff} .grid2,.grid3{display:block} .grid2>*,.grid3>*{margin-bottom:12px} .pagehead{margin-bottom:10px} .pagehead h1{font-size:16px} .tablewrap{overflow:visible} } /* ---------- v1.4.4: client-fast-tracked HIGH PRIORITY requirements (admin list) ---------- Rows a client pushed via the portal's fast-track button: red left border + a subtle --badbg tint (both theme vars, so dark mode stays readable). Appended rules only. */ .req-hp>td{background:var(--badbg)} .req-hp>td:first-child{border-left:3px solid var(--red)}