/* SMF visual identity. Designer-supplied PNGs are used without image edits. */
:root {
  --ink: #252329;
  --muted: #6b6b75;
  --bg: #38383c;
  --line: #d4d4d6;
  --brand: #286db4;
  --accent: #f3c21c;
  --danger: #c42631;
  --blue: #286db4;
  --yellow: #f3c21c;
  --red: #e71c24;
  --navy: #1b2957;
  --black: #222020;
  --shadow: 4px 4px 0 #252329;
  font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
}
/* Pixel details stay on the controls; long text stays comfortably readable. */
button, input, select, textarea, .tabs, .panel, .project-card, .metric,
.hero, .notice, .badge, .mini-tag, .avatar, .todo-icon, .nav a,
.nav a .count, dialog, #toast, .signature, .attachment, .pdf-frame,
.project-focus, .form-error { border-radius: 0; }
button { border: 2px solid var(--ink); font-weight: 700; padding: 9px 14px; box-shadow: 2px 2px 0 #252329; transition: background .12s, transform .12s, box-shadow .12s; }
button:hover { background: #f4ce4b; }
button:active:not(:disabled) { transform: translate(2px,2px); box-shadow: none; }
button:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
button.primary { background: var(--blue); border-color: var(--ink); color: #fff; }
button.primary:hover { background: #215b98; }
button.soft { background: #ffedaa; border-color: var(--ink); color: #322b14; }
button.danger { color: #a81825; }
button.danger:hover { background: #ffe3e3; }
button.icon { border: 1px solid transparent; box-shadow: none; }
button.icon:hover { background: #eeeef1; border-color: var(--ink); }
button.text-link { border: 0; box-shadow: none; color: var(--blue); background: transparent; }
button.text-link:hover { text-decoration: underline; }
button.tiny { border-width: 1px; box-shadow: 1px 1px 0 var(--ink); }
.pixel-icon { stroke: none; fill: currentColor; shape-rendering: crispEdges; }
input, select, textarea { border: 1px solid #a8a8b1; }
input:hover, select:hover, textarea:hover { border-color: #44434e; }
input:disabled, select:disabled { background: #eeeef0; }
input[type=checkbox] { accent-color: var(--blue); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
.sidebar { background: var(--black); color: #c6c5ca; padding-top: 22px; border-right: 4px solid #151414; }
.brand { padding: 0 10px 23px; text-align: center; }
.brand-emblem { display: block; width: 112px; height: 112px; margin: 0 auto 12px; object-fit: contain; image-rendering: auto; }
.brand small { font: 700 11px/1.5 Consolas, monospace; letter-spacing: 1.5px; color: #f2f2f2; margin: 0; }
.brand-colors { display: flex; width: 54px; height: 4px; margin: 12px auto 0; }
.brand-colors i { flex: 1; background: var(--blue); }
.brand-colors i:nth-child(2) { background: var(--yellow); }
.brand-colors i:nth-child(3) { background: var(--red); }
.nav-label { color: #9d9ba4; font-family: Consolas, monospace; letter-spacing: 1.4px; margin-bottom: 11px; }
.nav { gap: 5px; }
.nav a { border: 2px solid transparent; padding: 11px 12px; }
.nav a:hover { background: #323033; color: white; border-color: #77727b; }
.nav a.active { background: var(--yellow); color: #201d19; border: 2px solid #fff0b1; box-shadow: 3px 3px 0 #805518; }
.nav a.active::after { content: ''; width: 5px; height: 5px; background: #201d19; margin-left: auto; }
.nav a.active:has(.count)::after { display: none; }
.nav a .count { background: #ffffff18; font: 11px Consolas, monospace; padding: 3px 6px; color: #fff; }
.nav a.active .count { background: #231f20; color: #fff; }
.sidebar-note { color: #b3afb9; font-family: Consolas, "Microsoft JhengHei", monospace; line-height: 2; font-size: 10px; }
.profile { border-color: #4c484e; margin-top: 18px; padding-top: 17px; }
.profile strong { color: #fff; }
.profile small { color: #b1aeb6; }
.avatar { background: #ffdf64; color: var(--black); border: 2px solid var(--ink); font-family: Consolas, monospace; }
.topbar { background: #fff; border-bottom: 2px solid var(--ink); }
.topbar-right .avatar { background: #f3c21c; width: 31px; height: 31px; }
.dot { background: var(--blue); border-radius: 0; }
.local-mark { color: #69636e; }
.breadcrumb { color: #77727e; }
.eyebrow, .id, .nav-label, .today, .metric-foot, .footer-note { font-family: Consolas, "Microsoft JhengHei", monospace; }
.eyebrow { color: #6c6674; letter-spacing: 1.4px; }
.page-title h1 { font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.page-title p { color: #76707c; }
.hero { background: #fff; border: 2px solid var(--ink); padding: 20px 26px; box-shadow: 4px 4px 0 #d7d7dc; min-height: 128px; }
.hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(to bottom,var(--blue) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--red) 66.66%); }
.hero .eyebrow { color: #4d5571; font-size: 10px; }
.hero h2 { font-size: 22px; font-weight: 800; }
.hero p { color: #6b6571; }
.hero-logo { display: block; width: 265px; height: 115px; object-fit: contain; image-rendering: auto; flex-shrink: 0; }
.metric { border: 2px solid var(--ink); box-shadow: 3px 3px 0 #d7d7dc; position: relative; }
.metric::before { content: ''; width: 32px; height: 4px; position: absolute; top: -2px; left: 20px; background: var(--blue); }
.metric:nth-child(2)::before { background: var(--yellow); }
.metric-top { color: #696372; }
.metric-top .pixel-icon { padding: 7px; width: 34px; height: 34px; background: #edf2fd; color: var(--blue); border: 1px solid #c7d5ee; border-radius: 0; }
.metric:nth-child(2) .pixel-icon { background: #fff3c2; color: #775b0e; border-color: #efda8d; }
.metric .number { font-family: Consolas, "Microsoft JhengHei", monospace; font-weight: 700; font-size: 32px; letter-spacing: -1px; }
.metric .number small { font: 12px "Microsoft JhengHei", sans-serif; color: #7d7683; }
.metric-foot { color: #77717d; }
.section-title h2 { font-weight: 800; }
.section-title h2::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--blue); margin-right: 9px; vertical-align: 2px; }
.panel { border: 1px solid #b8b6be; }
.grid-main > *, .panel, .table-scroll { min-width: 0; }
.table-scroll { max-width: 100%; }
.panel-heading { border-bottom: 1px solid #b8b6be; background: #f3f3f6; }
.project-card { border: 1px solid #aaa7b1; border-top: 3px solid var(--ink); }
.project-card:hover { box-shadow: 3px 3px 0 var(--ink); }
.project-card h3 { font-weight: 750; }
.project-card .card-foot { border-color: #e0dde4; }
.project-card .card-foot button { border: 1px solid #c8c4ce; color: var(--blue); }
.project-card .client, .project-card .dates, .progress-label { color: #77717d; }
.progress { border-radius: 0; height: 5px; background: #eceaf0; }
.progress i { background: var(--blue); }
.badge { font-weight: 650; background: #eeeef2; color: #63606c; border: 1px solid #ceccd4; padding: 4px 7px; }
.badge.green, .badge.blue { background: #e8f1ff; color: #225c9b; border-color: #c0d3f1; }
.badge.amber { background: #fff2bd; color: #735709; border-color: #e8cc6f; }
.badge.red { background: #ffe7e7; color: #a8232c; border-color: #efb7b9; }
.todo { border-color: #e7e5eb; }
.todo-icon { border: 1px solid #b9cce7; background: #edf3ff; color: var(--blue); }
.todo:nth-of-type(3) .todo-icon { background: #fff1bf; color: #765a0c; border-color: #e5cc76; }
.todo strong { font-weight: 650; }
.activity { border-color: #e7e5eb; }
.activity .dot { background: #b0bdde; }
.activity small { color: #88818e; }
.tabs { background: #e9e8ee; border: 1px solid #cbc8d2; padding: 3px; gap: 3px; }
.tabs button { color: #716b79; box-shadow: none; border: 1px solid transparent; }
.tabs button.active { background: #fff; color: var(--ink); border: 1px solid var(--ink); box-shadow: 2px 2px 0 #c6c3ce; }
.search .pixel-icon { color: #7c7584; }
th { background: #eeeef3; color: #655f6e; font-weight: 650; border-color: #c8c5d0; }
td { border-color: #e8e5ec; }
tbody tr:hover { background: #f8f9ff; }
td small { color: #7a7480; }
.table-foot { background: #faf9fc; color: #7d7587; border-color: #e0dce6; }
.person-cell .avatar { background: #edf2ff; color: #335d9c; border: 1px solid #bbcae5; font-family: "Microsoft JhengHei", sans-serif; }
.notice { background: #edf3ff; border: 1px solid #c5d3ed; border-left: 4px solid var(--blue); color: #54647e; }
.notice.warning { background: #fff8db; border-color: #ead58e; border-left-color: var(--yellow); color: #7a6532; }
.mini-tag { background: #eeeef5; color: #696177; border: 1px solid #d7d2df; }
.stat-line { border-color: #ddd9e3; }
.form-section { color: #322f39; border-color: #d8d4df; font-weight: 750; }
.form-section::before { content: ''; display: inline-block; width: 5px; height: 10px; background: var(--blue); margin-right: 8px; vertical-align: -1px; }
.form-grid label { color: #625b6d; }
.form-error { background: #fff0f0; border-left: 4px solid var(--red); color: #a12532; }
.project-focus { background: #edf3ff; border: 1px solid #c7d2ec; border-left: 4px solid var(--blue); }
dialog { border: 2px solid var(--ink); box-shadow: 7px 7px 0 #211d2940; }
dialog::backdrop { background: #18152077; backdrop-filter: none; }
.dialog-head { border-bottom: 2px solid var(--ink); }
.dialog-head h2 { font-weight: 800; }
.dialog-foot { background: #f3f2f6; border-color: #d0cbd8; }
.dialog-foot button { min-height: 39px; }
.attachment { background: #faf9fc; border: 1px dashed #aaa0b8; color: #70677e; }
.signature { background: #fcfbfe; border: 2px dashed #bcb3c9; }
.subtle, .settings-grid p { color: #766e80; }
.empty .pixel-icon { color: #9aa9c7; }
.empty h3 { font-weight: 700; }
.document-link { color: var(--blue); }
.worker { max-width: 820px; }
.worker-logo { display: block; width: 230px; height: 110px; object-fit: contain; image-rendering: auto; background: #fff; }
.worker-header { border-bottom: 3px solid var(--ink); padding-bottom: 10px; margin-bottom: 25px; }
.worker-intro h1 { font-weight: 800; }
.worker .panel { border: 2px solid var(--ink); box-shadow: 4px 4px 0 #dbd5e3; }
.worker-success .pixel-icon { color: var(--blue); }
.worker-footer { color: #807688; }
#toast { background: var(--navy); border: 2px solid #171f43; box-shadow: 4px 4px 0 #24203144; }
#toast.error { background: #a31d2b; border-color: #6b1420; }
.footer-note { color: #938b9b; font-size: 10px; }
/* A lighter charcoal workspace separates the content from the black sidebar. */
.workspace { background: var(--bg); }
.topbar { background: #303034; border-bottom-color: #202023; }
.breadcrumb, .breadcrumb span:last-child { color: #e5e5ea; }
.breadcrumb > span:not(:last-child), .topbar .today, .local-mark { color: #bebec8; }
.topbar .mobile-menu { color: #ededf3; }
.topbar .mobile-menu:hover { background: #48484f; border-color: #aaaab7; }
.page-title h1 { color: #fafafa; }
.page-title .eyebrow, .page-title p { color: #c4c4ce; }
#results > .grid-main > div > .section-title h2 { color: #f3f3f7; }
#results > .grid-main > div > .section-title .id { color: #c2c2cd; }
#results > .grid-main > div > .section-title .text-link { color: #c0d7ff; }
.toolbar > .subtle { color: #d4d4de; }
#results > .empty h3, .grid-main > div > .empty h3 { color: #f3f3f7; }
#results > .empty p, .grid-main > div > .empty p { color: #c4c4ce; }
.footer-note { color: #bbbbc7; }
.worker { color: var(--ink); }
body:has(.worker) { background: #f5f5f2; }
.worker .eyebrow { color: #6c6674; }
@media(max-width:1000px) {
  .brand-emblem { width: 94px; height: 94px; }
  .brand { padding-bottom: 20px; }
  .hero-logo { width: 220px; height: 106px; }
  .metric .number { font-size: 29px; }
}
@media(max-width:700px) {
  .sidebar { padding-top: 20px; }
  .brand-emblem { width: 100px; height: 100px; }
  .hero { min-height: 0; padding: 19px 20px; box-shadow: 3px 3px 0 #d7d7dc; }
  .hero-logo { display: none; }
  .hero h2 { font-size: 20px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .8px; }
  .hero p { font-size: 11px; }
  .metric { padding: 14px; }
  .metric .number { font-size: 25px; }
  .metric .number small { font-size: 11px; }
  .metric::before { left: 14px; width: 24px; }
  .metric-top .pixel-icon { width: 28px; height: 28px; padding: 6px; }
  .worker-logo { width: 175px; height: 84px; }
  .worker-header { gap: 12px; }
  .worker-header .badge { font-size: 9px; padding: 5px; }
  .sidebar.open { box-shadow: 10px 0 0 #211e2888; }
  .grid-main { grid-template-columns: minmax(0,1fr); }
  .table-scroll > table:not(.batch-table):not(.payroll-review) { min-width: 720px; }
  .person-cell { min-width: 125px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Readability: larger text across desktop and mobile, without browser zoom. */
:root { font-size: 16px; }
body { line-height: 1.6; }
.nav a { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
.brand small, .nav-label { font-size: 12px; }
.sidebar-note, .profile small { font-size: 12px; }
.profile strong { font-size: 14px; }
.breadcrumb, .today, .local-mark { font-size: 14px; }
.eyebrow, .hero .eyebrow { font-size: 12px; }
.page-title h1 { font-size: 32px; }
.page-title p, .hero p { font-size: 15px; }
.hero h2 { font-size: 25px; }
.metric-top { font-size: 15px; }
.metric .number { font-size: 36px; }
.metric .number small { font-size: 14px; }
.metric-foot { font-size: 13px; }
.section-title h2, .panel-heading h2, .settings-grid h3 { font-size: 17px; }
.id { font-size: 12px; }
.project-card h3 { font-size: 20px; }
.project-card .client, .project-card .dates { font-size: 14px; }
.progress-label { font-size: 13px; }
.badge, .mini-tag { font-size: 12px; }
.subtle, .settings-grid p, .help-list { font-size: 15px; }
.todo strong { font-size: 15px; }
.todo p, .activity strong { font-size: 14px; }
.activity > div { min-width: 0; }
.activity-context { display: block; margin-top: 5px; color: #6b6575; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
.todo button, .activity small { font-size: 12px; }
button { font-size: 15px; min-height: 40px; }
button.tiny, button.text-link, .text-link, .tabs button { font-size: 14px; }
button.icon { min-height: 36px; }
input, select, textarea { font-size: 16px; line-height: 1.5; }
.form-grid label, .check-label { font-size: 15px; }
.form-section { font-size: 15px; }
.form-error, .notice { font-size: 14px; }
table { font-size: 15px; }
th { font-size: 13px; padding-top: 15px; padding-bottom: 15px; }
td { padding-top: 18px; padding-bottom: 18px; }
td .name { font-size: 15px; }
td small, .table-foot { font-size: 13px; }
.person-cell .avatar { font-size: 13px; }
.document-link { font-size: 15px; }
.summary-strip span { font-size: 14px; }
.summary-strip strong { font-size: 21px; }
.stat-line { font-size: 15px; }
.project-focus h2 { font-size: 19px; }
.project-focus p { font-size: 14px; }
.dialog-head h2 { font-size: 21px; }
.dialog-head p { font-size: 14px; }
.dialog-foot small, .file-label, .attachment { font-size: 13px; }
.attachment input { font-size: 13px; }
.batch-table { min-width: 1050px; }
.batch-table input, .batch-table select { font-size: 15px; }
.batch-total { font-size: 15px; }
.batch-total strong { font-size: 23px; }
.footer-note, .worker-footer { font-size: 12px; }
#toast { font-size: 15px; }
.empty h3 { font-size: 18px; }
.empty p { font-size: 15px; }
.worker h1 { font-size: 29px; }
@media(max-width:700px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .breadcrumb { font-size: 13px; }
  .local-mark { font-size: 12px; }
  .page-title h1 { font-size: 29px; }
  .page-title p, .hero p { font-size: 14px; }
  .hero .eyebrow { font-size: 10px; }
  .hero h2 { font-size: 23px; }
  .metric-top { font-size: 14px; }
  .metric .number { font-size: 29px; }
  .metric .number small { font-size: 13px; }
  .metric-foot { font-size: 12px; }
  .notice { font-size: 14px; }
  .summary-strip strong { font-size: 20px; }
  .worker h1 { font-size: 27px; }
  .worker-header .badge { font-size: 12px; }
}
@media(max-width:420px) {
  .metrics { grid-template-columns: minmax(0,1fr); }
  .worker-header { flex-wrap: wrap; }
}

/* The worker form uses the same PNG as the dashboard, centered without a tile. */
.worker-header { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.worker-header > div { width: 100%; display: flex; justify-content: center; min-width: 0; }
.worker-logo { width: 300px; max-width: 100%; height: auto; background: transparent; object-fit: contain; margin: 0 auto; }
.worker-header .badge { align-self: center; }
.attachments { grid-template-columns: repeat(3,minmax(0,1fr)); }
.attachment { min-width: 0; overflow-wrap: anywhere; }
.attachment input[type=file] { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 12px; }
.attachment input[type=file]::file-selector-button { max-width: 100%; margin-right: 5px; padding: 6px; font: inherit; }
.address-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.address-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.address-label label { font-size: 15px; color: #625b6d; }
.address-field > input { width: 100%; }
.payroll-review { min-width: 1000px; }
.calculation-person { min-width: 230px; max-width: 290px; }
.calc-status { margin-top: 9px; color: #305b92; font-size: 12px; line-height: 1.7; }
.calc-details { margin-top: 6px; color: #6b6575; font-size: 12px; line-height: 1.8; }
.calc-details summary { cursor: pointer; color: #305b92; }
[data-adjustment]:not([hidden]) { display: block; margin-top: 9px; font-size: 12px; color: #7b5c21; }
[data-adjustment] input { display: block; width: 100%; margin-top: 5px; font-size: 13px; }
@media(max-width:850px) {
  .attachments { grid-template-columns: minmax(0,1fr); }
  .attachment input[type=file] { font-size: 14px; }
}

/* Native upload/drop handling covers the complete attachment card. */
.attachment { position: relative; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.attachment:hover, .attachment:focus-within {
  background: #edf3ff; border-color: #286db4; box-shadow: inset 0 0 0 1px #286db4;
}
.attachment.drag-over {
  background: #dceaff; border-color: #215b98; border-style: solid;
  box-shadow: inset 0 0 0 2px #286db4;
}
.attachment input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.attachment-picker {
  display: flex; align-items: center; gap: 7px; padding: 7px; margin: 10px 0 6px;
  background: #fff; color: #625b6d; font-size: 12px; text-align: left;
}
.attachment-picker > span:first-child { padding: 5px 7px; border: 1px solid #b8b2c2; white-space: nowrap; }
.attachment-file-name { min-width: 0; overflow-wrap: anywhere; }
.attachment-status { line-height: 1.8; }
.year-switch { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.year-switch label { color: #dedee7; font-size: 14px; white-space: nowrap; }
.year-switch select { min-width: 135px; }
.payroll-dates { min-width: 180px; white-space: nowrap; line-height: 1.8; }
@media(max-width:700px) {
  .year-switch { width: 100%; }
  .year-switch select { flex: 1; }
}

.table-sort{display:inline-flex;align-items:center;gap:10px;padding:6px 0;border:0;box-shadow:none;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.table-sort:hover{color:#285ca8;background:transparent;box-shadow:none;transform:none}
.table-sort:focus-visible{outline:2px solid #416fb9;outline-offset:4px}
.table-sort span{font-size:11px;opacity:.75}

.signed-in-email{font-size:14px;color:#eeeef3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}.topbar-right{min-width:0}.topbar-right button{flex-shrink:0}@media(max-width:650px){.signed-in-email{max-width:165px;font-size:12px}.topbar-right{gap:10px}}