/* Shared visual system. Business-specific layouts remain in their page styles. */
:root { --blue:#147d78; --green:#168266; --red:#bd5454; --gray:#748194; --bg:#f5f7fa; --card:#fff; --ink:#202e43; --line:#e5eaf0; --accent:#147d78; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
body.workspace { display:block; background:var(--bg); padding:100px 32px 32px 254px; font-size:14px; line-height:1.55; }
.workspace .container,.workspace .wrap { max-width:1600px; min-width:0; margin:0 auto; }
a { text-decoration:none; }
button,input,select,textarea { font-family:inherit; }
button,select,input:not([type=checkbox]):not([type=hidden]),textarea { border:1px solid #dce3e9; border-radius:7px; padding:9px 12px; font-size:13px; min-height:38px; background:#fff; color:var(--ink); }
button { cursor:pointer; transition:background .15s,border-color .15s; font-weight:500; }
button:hover:not(:disabled) { background:#f1f5f7; border-color:#b7c9ce; }
button:disabled { cursor:not-allowed; opacity:.45; }
button.primary,.workspace .primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled) { background:#106c68; border-color:#106c68; }
button.text { color:var(--accent); }
button.danger { color:var(--red); }
button.success { color:var(--green); }
input::placeholder { color:#8a96a6; }
:focus-visible { outline:3px solid #8ecac5; outline-offset:3px; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
input[type=checkbox] { accent-color:var(--accent); }
[hidden] { display:none !important; }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:222px; z-index:60; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:30px 16px 18px; }
.app-brand { display:flex; gap:11px; align-items:center; padding:0 10px 29px; color:var(--ink); }
.app-mark { display:grid; place-items:center; width:36px; height:38px; background:#20364c; color:#fff; border-radius:9px; }
.app-mark svg { width:22px; height:22px; }
.app-brand strong { display:block; font-size:17px; letter-spacing:.4px; }
.app-brand small { display:block; font-size:10px; color:#8793a2; letter-spacing:1.8px; margin-top:2px; }
.nav-label { color:#929ba8; font-size:11px; letter-spacing:1px; padding:17px 14px 9px; }
.app-nav a { display:flex; align-items:center; gap:12px; color:#657286; font-size:13px; padding:11px 14px; border-radius:7px; margin-bottom:4px; }
.app-nav a:hover { background:#f4f7f9; color:var(--ink); }
.app-nav a[aria-current=page] { color:#126f6b; background:#e8f3f1; font-weight:600; }
.app-nav a[aria-current=page]::after { content:""; width:5px; height:5px; background:var(--accent); border-radius:50%; margin-left:auto; }
.app-nav svg,.app-topbar svg { width:18px; height:18px; flex-shrink:0; }
.sidebar-footer { margin-top:auto; padding:20px 12px 0; border-top:1px solid var(--line); font-size:11px; color:#8c97a5; }
.sidebar-footer strong { display:block; font-weight:500; color:#647286; margin-bottom:5px; }
.app-topbar { position:fixed; top:0; left:222px; right:0; height:65px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); z-index:40; padding:0 32px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.app-crumb { display:flex; gap:12px; align-items:center; color:#8a95a4; font-size:12px; }
.app-crumb strong { color:#526074; font-weight:500; }
.app-user { display:flex; align-items:center; gap:10px; color:#526074; font-size:12px; }
.app-avatar { width:30px; height:30px; background:#eaf1f5; border:1px solid #dfe7ec; border-radius:50%; display:grid; place-items:center; color:#53677e; font-size:12px; }
.app-role { color:#8792a2; font-size:11px; padding-left:10px; border-left:1px solid var(--line); }
.menu-toggle { display:none; }
.nav-backdrop { display:none; }
.skip-link { position:fixed; top:-80px; left:240px; z-index:200; background:#fff; padding:12px; color:var(--accent); }
.skip-link:focus { top:8px; }
.workspace .header,.workspace .head { border:0; border-radius:0; box-shadow:none; background:transparent; padding:0; margin-bottom:24px; display:block; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; }
.workspace .header h1,.workspace .head h1 { font-size:26px; line-height:1.4; font-weight:650; letter-spacing:-.5px; margin:0; color:#223047; }
.page-description { margin:8px 0 0; color:#8190a2; font-size:12px; line-height:1.7; }
.workspace .header .me,.workspace .head #me { display:none; }
.page-heading .primary-actions { display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.workspace .header .toolbar,.workspace .head .tools,.workspace .filter-panel { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; width:100%; }
.workspace .toolbar-row.filters { flex:1; display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; }
.workspace .toolbar-row.nav-actions { display:none; }
.workspace .header .toolbar > a,.workspace .head .tools > a,.workspace .filter-panel > a { display:none; }
.workspace .detail-actions > a { display:inline-flex; }
.workspace .detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.workspace #q-filter { min-width:220px; }
.workspace .section,.workspace #table-wrap,.workspace .panel,.workspace .card,.workspace .pay-card,.workspace .si-card { border:1px solid var(--line); box-shadow:0 2px 4px #23334c02; border-radius:10px; }
.workspace .section { padding:23px; margin-bottom:20px; overflow-x:auto; }
.workspace .section h2 { color:#334158; font-size:14px; margin-bottom:20px; font-weight:600; }
.workspace #table-wrap { border-top-left-radius:0; border-top-right-radius:0; }
.workspace table { font-size:12px; }
.workspace th { background:#f8fafc; font-weight:500; color:#7e8a9b; font-size:11px; height:44px; }
.workspace td { height:62px; color:#526176; }
.workspace th,.workspace td { padding:12px 16px; border-bottom:1px solid #eef1f5; }
.workspace tr:last-child td { border-bottom:0; }
.workspace tbody tr:hover td { background:#f8fbfb; }
.workspace td.num { font-variant-numeric:tabular-nums; letter-spacing:.1px; }
.workspace[data-page=admin] td:nth-last-child(3) { color:var(--accent) !important; }
.workspace th.plus { color:#488782; background:#f0f7f5; }
.workspace th.minus { color:#a47a79; background:#fbf5f4; }
.workspace td.plus { color:#508780; }
.workspace td.minus { color:#aa7273; }
.workspace td a { color:#266d72 !important; }
.workspace td.sticky-l { font-weight:600; }
.workspace td.actions { padding:8px; }
.workspace td.actions button { padding:5px 7px; min-height:30px; font-size:12px; }
.workspace .tag { padding:4px 9px; border-radius:5px; font-size:10px; font-weight:500; }
.workspace .tag-issued,.workspace .tag-approved { background:#e9f5ef; color:#2b8767; }
.workspace .tag-draft,.workspace .tag-reviewing { background:#fff4df; color:#a77b2c; }
.workspace .pager { padding:18px 2px; color:#8692a2; font-size:12px; }
.workspace .pager button { font-size:12px; min-height:32px; padding:5px 10px; }
.workspace .pager .ctrls { gap:12px; }
.workspace .pager label { flex-direction:row; align-items:center; gap:8px; }
.workspace .empty { padding:60px 24px; color:#8a96a7; font-size:13px; }
.table-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; }
.table-heading strong { font-size:14px; font-weight:600; color:#34425a; }
.table-caption { font-size:11px; color:#8a96a5; margin-left:10px; }
.view-switch { display:flex; gap:3px; padding:3px; background:#f2f5f7; border-radius:6px; }
.view-switch button { min-height:27px; padding:4px 10px; border:0; background:transparent; color:#8a96a5; font-size:11px; }
.view-switch button[aria-pressed=true] { background:#fff; color:#286d6b; box-shadow:0 1px 3px #1b354414; }
.payroll-overview .detail-column { display:none; }
.payroll-full .overview-column { display:none; }
.workspace .summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 25px; }
.summary-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:21px 22px; }
.summary-label { font-size:12px; color:#7e8b9c; display:flex; justify-content:space-between; gap:10px; }
.summary-label svg { width:17px; height:17px; color:#8fa7ab; }
.summary-value { color:#26374d; font-size:27px; line-height:1.4; letter-spacing:-.7px; font-weight:600; font-variant-numeric:tabular-nums; margin:13px 0 7px; overflow-wrap:anywhere; }
.summary-value small { font-size:15px; margin-right:4px; color:#84929e; font-weight:400; }
.summary-foot { font-size:10px; color:#96a1af; }
.summary-card.featured { background:#203b45; border-color:#203b45; }
.summary-card.featured .summary-label,.summary-card.featured .summary-label svg { color:#a6c7c6; }
.summary-card.featured .summary-value { color:#fff; }
.summary-card.featured .summary-value small,.summary-card.featured .summary-foot { color:#a4bfc1; }
.workspace .kpis { gap:14px; }
.workspace .kpi { background:#f8fafb; padding:20px; border:1px solid #ecf0f3; border-radius:8px; }
.workspace .kpi .v { font-size:25px; font-weight:600; margin-top:12px; }
.workspace .kpi .label { font-size:12px; }
.workspace .metric { padding:23px; box-shadow:none; border:1px solid var(--line); }
.workspace .metric .value { font-size:26px; margin-top:13px; }
.workspace .fields { gap:12px 30px; }
.workspace .fields .row { padding:10px 0; border-bottom:1px solid #eef1f5; }
.workspace .tabs { gap:4px; overflow-x:auto; }
.workspace .tab { padding:10px 16px; white-space:nowrap; }
.workspace .tab.active { color:var(--accent); border-color:var(--accent); }
.workspace .modal-bg { background:#13263866; backdrop-filter:blur(4px); padding:20px; z-index:100; }
.workspace .modal { box-shadow:0 24px 90px #14263d33; padding:28px; border-radius:14px; min-height:0; }
.workspace dialog .modal { width:100%; max-height:85vh; overflow-y:auto; box-shadow:none; }
.workspace .modal h2 { font-size:21px; margin-bottom:24px; }
.workspace .field-grid { gap:16px 20px; }
.workspace .modal label { font-size:12px; color:#718096; gap:7px; }
.workspace .section-title { font-size:12px; color:#43566b; padding-bottom:10px; margin-top:14px; }
.workspace .modal-actions { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; }
.workspace .err:not(:empty) { border:1px solid #f0ddbc; background:#fff9ef; color:#8d672f; padding:12px 16px; border-radius:8px; }
.workspace .netpay { color:var(--accent); background:#edf6f4; }
.workspace .group-head b { font-size:16px; color:#33465b; }
.workspace .group-head .muted { margin-top:6px; }
.workspace .members { padding-top:17px; margin-top:17px; border-top:1px solid var(--line); gap:8px; }
.workspace .pill { color:#557b7b; background:#eef5f4; border-radius:6px; padding:6px 11px; }
.workspace .card { padding:24px; margin-top:16px; }
.workspace .pay-card,.workspace .si-card { padding:20px; margin-bottom:14px; }
.workspace .pay-card .net { color:var(--accent); font-size:24px; font-weight:600; }
.workspace .pay-card .grid { padding:14px 0; margin-top:14px; border-top:1px solid var(--line); gap:13px 20px; }
.workspace .pay-card .acts { margin-top:4px; }
.workspace .print-action { color:#54677c; }
/* Login */
body.login-page { background:#f5f7fa; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; padding:0; min-height:100vh; height:auto; }
.login-story { min-height:100vh; padding:60px 12%; background:#203943; color:#fff; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.login-story::after { content:""; width:530px; height:530px; border:1px solid #ffffff0c; border-radius:50%; position:absolute; right:-240px; bottom:-120px; box-shadow:0 0 0 70px #ffffff03,0 0 0 140px #ffffff03; pointer-events:none; }
.login-story .app-brand { position:absolute; top:50px; padding:0; color:#fff; }
.login-story .app-brand small { color:#8aacae; }
.login-story .app-mark { background:#ffffff12; border:1px solid #ffffff16; }
.login-kicker { font-size:11px; letter-spacing:3px; color:#91baba; margin-bottom:22px; }
.login-story h2 { font-size:43px; line-height:1.45; font-weight:500; letter-spacing:-1px; margin:0 0 22px; }
.login-story p { color:#a7bdc0; font-size:13px; line-height:2; max-width:320px; }
.login-features { display:flex; gap:26px; margin-top:36px; padding-top:28px; border-top:1px solid #ffffff15; font-size:11px; color:#a5c1c1; }
.login-page > .card { justify-self:center; width:calc(100% - 80px); max-width:410px; padding:42px 30px; border:1px solid #e7ebef; box-shadow:0 12px 50px #23354906; border-radius:14px; }
.login-page .brand img { max-width:150px; height:auto; max-height:42px; object-fit:contain; }
.login-page h1 { font-size:24px; color:#26374d; margin:25px 0 13px; }
.login-page .sub { line-height:1.8; color:#8b96a5; font-size:12px; }
.login-page a.btn,.login-page button.btn { background:var(--accent); border-radius:7px; font-size:13px; }
.login-page .btn.secondary { background:#fff; color:#57667a; border:1px solid var(--line); }
.login-page .qr-fallback a { color:var(--accent); font-size:12px; }
.login-note { font-size:10px; color:#a0a8b2; border-top:1px solid var(--line); padding-top:22px; margin:26px 0 0; }
@media(min-width:1600px) { body.workspace { padding-left:274px; padding-right:52px; } }
@media(max-width:1100px) { body.workspace { padding-left:220px; padding-right:20px; } .app-sidebar { width:200px; } .app-topbar { left:200px; padding:0 20px; } .page-heading { flex-wrap:wrap; } .summary-card { padding:18px; } .summary-value { font-size:23px; } }
@media(max-width:768px) {
  body.workspace { padding:87px 16px 24px; }
  .app-sidebar { width:240px; transform:translateX(-100%); transition:transform .2s; }
  .nav-open .app-sidebar { transform:translateX(0); }
  .nav-open .nav-backdrop { display:block; position:fixed; inset:0; background:#172c4266; z-index:55; border:0; width:100%; height:100%; border-radius:0; }
  .app-topbar { left:0; padding:0 16px; height:61px; }
  .menu-toggle { display:grid; place-items:center; width:34px; height:34px; padding:6px; border:0; background:#f4f7f8; }
  .app-crumb { gap:10px; }
  .app-crumb > span { display:none; }
  .app-role { display:none; }
  .page-heading { gap:16px; margin-bottom:19px; }
  .workspace .header h1,.workspace .head h1 { font-size:24px; }
  .workspace .header,.workspace .head { margin-bottom:18px; }
  .workspace .header .toolbar,.workspace .head .tools,.workspace .filter-panel { padding:14px; gap:9px; }
  .workspace .toolbar-row.filters { display:flex; gap:9px; }
  .workspace .toolbar-row.filters > * { flex:1 1 40%; width:auto; }
  .workspace #q-filter { min-width:0; width:100% !important; }
  .workspace .toolbar input,.workspace .toolbar select,.workspace .tools input,.workspace .filter-panel input { min-width:0; flex:1 1 40%; width:100% !important; }
  .workspace .toolbar button { width:auto; flex:0 0 auto; }
  .page-heading .primary-actions { width:100%; display:flex; gap:7px; padding:0; border:0; }
  .page-heading .primary-actions button { flex:1 1 auto; font-size:12px; padding:8px 10px; }
  input:not([type=checkbox]),select { font-size:16px !important; }
  .workspace .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
  .summary-card { padding:17px 14px; }
  .summary-label { font-size:11px; }
  .summary-value { font-size:22px; margin-top:10px; }
  .summary-value small { font-size:12px; }
  .summary-label svg { display:none; }
  .table-heading { border:0; padding:4px 0 14px; background:transparent; }
  .table-caption { display:none; }
  .view-switch { display:none; }
  .workspace .pager { gap:14px; }
  .workspace .pager .ctrls { gap:8px; flex-wrap:wrap; }
  .workspace .section { padding:18px; }
  .workspace .field-grid { grid-template-columns:1fr; }
  .workspace .modal-bg { padding:12px; align-items:center; }
  .workspace .modal { width:100%; max-height:92dvh; padding:22px; }
  .workspace .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace .kpi { padding:15px; }
  .workspace .kpi .v { font-size:21px; }
  .workspace .fields { grid-template-columns:1fr; }
  .workspace .pay-card .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .skip-link { left:10px; }
  body.login-page { display:flex; flex-direction:column; justify-content:center; padding:25px 18px; background:#f3f6f8; }
  .login-story { min-height:0; width:100%; padding:28px; border-radius:14px; margin-bottom:18px; }
  .login-story .app-brand { position:static; padding:0; margin-bottom:30px; }
  .login-story h2 { font-size:27px; margin-bottom:0; }
  .login-kicker,.login-story > p,.login-features { display:none; }
  .login-page > .card { width:100%; max-width:480px; padding:28px; margin:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }
@media print { .app-sidebar,.app-topbar,.skip-link,.nav-backdrop,.detail-actions,.pager { display:none !important; } body.workspace { padding:0; background:#fff; } .workspace .section { break-inside:avoid; box-shadow:none; } }