:root {
  --bg: #f3f4f2;
  --surface: #ffffff;
  --surface-muted: #f8f9f7;
  --text: #202421;
  --muted: #707670;
  --border: #dfe3de;
  --border-strong: #cbd1cb;
  --accent: #43564a;
  --accent-soft: #e9eeea;
  --danger: #8a4747;
  --danger-soft: #f6eaea;
  --warning: #7c6538;
  --warning-soft: #f5f0e5;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(25, 35, 28, .04);
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
body.modal-open .timesheet-wrap { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(1.45rem, 2vw, 1.8rem); letter-spacing: -.025em; }
h2 { margin-bottom: 3px; font-size: 1.05rem; }
small { display: block; color: var(--muted); font-size: .79rem; font-weight: 400; }
.muted { color: var(--muted); }
.strong { font-weight: 650; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-shell { min-height: 100vh; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.94); box-shadow: 0 1px 8px rgba(25,35,28,.04); backdrop-filter: blur(10px); }
.site-header-inner { width: min(1800px, 100%); height: 64px; display: flex; align-items: center; gap: 24px; margin: 0 auto; padding: 0 30px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.brand-mark { width: 36px; height: 36px; display: block; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: #e7e9e7; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand b { display: block; color: var(--text); font-size: .98rem; }
.brand small { color: var(--muted); font-size: .68rem; }
.top-navigation { display: flex; align-items: center; gap: 3px; }
.top-navigation > a { padding: 8px 11px; border-radius: 8px; color: #515953; font-size: .86rem; white-space: nowrap; }
.top-navigation > a:hover { color: var(--text); background: var(--surface-muted); }
.top-navigation > a.active { color: #26372c; background: var(--accent-soft); font-weight: 700; }
.mobile-account-links { display: none; }
.user-menu { position: relative; margin-left: auto; flex: 0 0 auto; }
.user-menu summary { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: .84rem; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { color: var(--text); background: var(--surface-muted); }
.user-dropdown { position: absolute; top: calc(100% + 9px); right: 0; width: 180px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 35px rgba(20,28,22,.14); }
.user-dropdown a, .user-dropdown .link-button { width: 100%; display: block; padding: 9px 10px; border: 0; border-radius: 7px; color: #4e5650; background: transparent; text-align: left; cursor: pointer; font-size: .84rem; }
.user-dropdown a:hover, .user-dropdown .link-button:hover { color: var(--text); background: var(--surface-muted); }
.user-dropdown form { margin: 0; }
.main { min-width: 0; }
.menu-button { display: none; margin-left: auto; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 1.15rem; cursor: pointer; }
.content { width: min(1800px, 100%); margin: 0 auto; padding: 28px 30px 50px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head p, .panel-head p { margin: 0; color: var(--muted); }
.title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.title-line h1 { margin: 0; }
.button, button.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); background: var(--surface); cursor: pointer; font-weight: 600; white-space: nowrap; }
.button:hover { border-color: #aeb6af; background: var(--surface-muted); }
.button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.button.active:hover { border-color: #35463c; background: #35463c; }
.button.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
.button.primary:hover { background: #35463c; }
.button.ghost { border-color: transparent; background: transparent; }
.button.danger { color: #fff; border-color: var(--danger); background: var(--danger); }
.button.danger:hover { border-color: #733737; background: #733737; }
.button.danger.ghost { color: var(--danger); border-color: transparent; background: transparent; }
.button[hidden] { display: none; }
.button.small { min-height: 30px; padding: 5px 9px; font-size: .82rem; }
.button.wide { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.text-link { color: var(--accent); font-weight: 650; }
.panel { margin-bottom: 18px; padding: 20px; border: 1px solid #e5e9e5; border-radius: 14px; background: var(--surface); box-shadow: 0 5px 22px rgba(28,38,31,.045); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.panel-head h2 { margin-bottom: 2px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid #e4e8e4; border-radius: 12px; background: var(--surface); transition: border-color .15s ease, background .15s ease; }
.metric span { color: var(--muted); font-size: .84rem; }
.metric strong { margin: 4px 0 1px; font-size: 1.55rem; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric:hover { border-color: #bbc5bd; background: #fbfcfb; }
.metric.featured { background: #29312c; color: #fff; border-color: #29312c; }
.metric.featured span, .metric.featured small { color: #bdc6bf; }
.cash-metric { gap: 7px; justify-content: center; border-color: #bfd6c5; background: #edf6ef; }
.cash-metric:hover { border-color: #99bca3; background: #e7f2e9; }
.cash-metric.has-error { border-color: #bfd6c5; background: #edf6ef; }
.cash-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cash-summary > div { min-width: 0; padding: 6px 7px; border: 1px solid #cfe0d3; border-radius: 8px; background: rgba(255,255,255,.82); text-align: center; }
.cash-summary b { display: block; font-size: 1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cash-summary small { margin-top: 2px; font-size: .63rem; white-space: nowrap; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.section-panel { padding: 0; overflow: hidden; }
.section-panel > .panel-head { min-height: 70px; margin: 0; padding: 14px 18px; border-bottom: 1px solid #e8ece8; background: #fbfcfb; }
.section-panel > .summary-list, .section-panel > .bar-chart, .section-panel > .rank-list { padding: 5px 18px 16px; }
.section-panel > .period-callout { padding: 18px; }
.summary-list { display: grid; }
.summary-list > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #edf0ed; }
.summary-list > div:last-child { border: 0; }
.summary-list.large > div { padding: 14px 0; }
.period-callout { min-height: 120px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.period-callout p { margin: 10px 0 0; color: var(--muted); }
.status-badge, .quiet-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; border-radius: 20px; background: #eef0ee; color: #59605b; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-open { background: var(--warning-soft); color: var(--warning); }
.status-planned { background: #eef0ee; color: #707670; }
.status-review { background: #eceef4; color: #535e78; }
.status-closed, .status-prepared { background: var(--accent-soft); color: var(--accent); }
.status-paid { background: #e7eee9; color: #31563e; }
.table-panel { padding: 0; overflow: hidden; }
.table-panel-head { min-height: 70px; margin: 0; padding: 14px 16px; border-bottom: 1px solid #e8ece8; background: #fbfcfb; }
.table-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.table-toolbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border-bottom: 1px solid #e8ece8; background: #fbfcfb; }
.table-toolbar.compact-toolbar { min-height: 64px; }
.toolbar-search { width: min(360px, 100%); display: grid; gap: 5px; }
.toolbar-search span, .toolbar-field span { color: var(--muted); font-size: .72rem; font-weight: 650; }
.toolbar-search input { height: 38px; border-color: #d8ddd8; background: rgba(255,255,255,.85); }
.toolbar-controls { display: flex; align-items: end; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.toolbar-field { width: 190px; display: grid; gap: 5px; }
.toolbar-copy { display: grid; gap: 2px; }
.toolbar-copy b { font-size: .9rem; }
.toolbar-copy span, .toolbar-count { color: var(--muted); font-size: .76rem; }
.toolbar-count { white-space: nowrap; }
.status-key { display: flex; align-items: center; justify-content: flex-end; gap: 15px; color: #626a64; font-size: .76rem; }
.status-key span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9ceca; }
.status-dot.open { background: #b19559; }.status-dot.closed { background: #65786b; }.status-dot.planned { background: #cfd4d0; }
.simple-table-wrap { overflow-x: auto; scrollbar-color: #c8cec9 transparent; scrollbar-width: thin; }
.simple-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.simple-table th { position: relative; padding: 11px 13px; color: #68706a; background: #f8faf8; border-bottom: 1px solid #e2e7e2; text-align: left; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.simple-table th.numeric { text-align: right; }
.simple-table td { position: relative; height: 58px; padding: 10px 13px; border: 0; vertical-align: middle; }
.simple-table th:not(:last-child)::after, .simple-table td:not(:last-child)::after { content: ""; position: absolute; top: 20%; right: 0; width: 1px; height: 60%; background: #edf0ed; pointer-events: none; }
.simple-table tbody tr:hover > td { background: #fafcfa; }
.simple-table em { display: block; color: var(--danger); font-size: .75rem; font-style: normal; }
.simple-table tfoot th { padding: 12px 13px; border-top: 1px solid #dfe5df; background: #f6f8f6; }
.simple-table tfoot small { white-space: nowrap; }
.data-table { min-width: 760px; }
.data-table .number-cell { width: 68px; min-width: 68px; text-align: center; font-variant-numeric: tabular-nums; }
.data-table .action-cell { width: 96px; min-width: 96px; text-align: center; }
.employee-toolbar { margin-bottom: 10px; border-bottom: 0; }
.employee-table th .table-sort { width: 100%; justify-content: space-between; color: #68706a; }
.employee-table th.number-cell .table-sort { position: relative; justify-content: center; }
.employee-table th.number-cell .table-sort span { position: absolute; right: 0; }
.employee-table td:nth-child(3) { width: 230px; }
.employee-table td:nth-child(4) { width: 190px; }
.quick-rate-button, .quick-position-button { min-width: 130px; max-width: 100%; display: grid; gap: 1px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.quick-rate-button:hover, .quick-position-button:hover { border-color: #dbe2dc; background: #f5f8f5; }
.quick-rate-button b, .quick-position-button b { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.quick-rate-button b { font-variant-numeric: tabular-nums; }
.quick-rate-button small, .quick-position-button small { color: #778079; font-size: .68rem; }
.quick-rate-button.unset b { color: var(--warning); }
.quick-position-button.unset b { color: #737b75; }
.row-action { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border: 1px solid #e0e5e0; border-radius: 7px; color: #46564b; background: #f8faf8; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.row-action:hover { border-color: #b8c2ba; background: #f2f6f2; }
.description-cell { min-width: 250px; }
.empty-state { padding: 35px 15px; color: var(--muted); text-align: center; }
.empty-state.compact { padding: 22px 0; text-align: left; }
.filter-row, .inline-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
input, select, textarea { width: 100%; min-height: 39px; padding: 8px 10px; color: var(--text); background: #fff; border: 1px solid var(--border-strong); border-radius: 7px; outline: none; }
input[type="checkbox"] { width: 17px; min-height: 17px; padding: 0; accent-color: var(--accent); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #7c8c81; box-shadow: 0 0 0 3px rgba(67,86,74,.1); }
.filter-row input[type="search"] { max-width: 350px; }
.filter-row select { width: 190px; }
.narrow-panel { max-width: 920px; }
.model-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.form-grid label, .stack-form label, .model-form label { display: grid; gap: 6px; color: #474d48; font-size: .84rem; font-weight: 650; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid em, .model-form em, .stack-form em { color: var(--danger); font-size: .77rem; font-style: normal; }
.form-actions { display: flex; gap: 9px; padding-top: 4px; }
.stack-form { display: grid; gap: 15px; }
.stack-form p { display: grid; gap: 5px; margin: 0; }
.form-panel { padding: 0; overflow: hidden; }
.form-panel-head { padding: 16px 18px; border-bottom: 1px solid #e8ece8; background: #fbfcfb; }
.form-panel-head h2 { margin-bottom: 2px; }.form-panel-head p { margin: 0; color: var(--muted); font-size: .8rem; }
.employee-system-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e7ebe7; color: var(--muted); font-size: .74rem; }
.employee-system-meta span { display: flex; align-items: baseline; gap: 5px; }
.employee-system-meta b { color: var(--text); font-size: .78rem; font-variant-numeric: tabular-nums; }
.form-panel > .model-form, .form-panel > .stack-form { padding: 18px; }
.record-form-page { width: min(1180px, 100%); margin: 0 auto; }
.record-form-card { padding: 0; overflow: hidden; }
.record-form-header { padding: 20px 24px 18px; border-bottom: 1px solid #e4e8e4; background: #fafbfa; }
.record-back { width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; color: #566159; font-size: .78rem; font-weight: 700; }
.record-back span { font-size: 1rem; line-height: 1; }
.record-back:hover { color: var(--text); }
.record-form-heading h1 { margin: 0 0 4px; }
.record-form-heading p { max-width: 760px; margin: 0; color: var(--muted); font-size: .84rem; }
.record-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #e6eae6; }
.record-meta > div { display: grid; gap: 1px; }
.record-meta span { color: var(--muted); font-size: .67rem; font-weight: 650; }
.record-meta b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.record-form { padding: 22px 24px 0; }
.record-section-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.record-section-head h2 { margin-bottom: 2px; }
.record-section-head p { margin: 0; color: var(--muted); font-size: .76rem; }
.record-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 17px 20px; }
.record-form-grid .span-2 { grid-column: 1 / -1; }
.record-field { min-width: 0; display: grid; align-content: start; gap: 6px; color: #414943; font-size: .8rem; font-weight: 700; }
.record-field > input:not([type="checkbox"]):not([type="file"]), .record-field > select { height: 44px; min-height: 44px; padding: 9px 12px; border-radius: 8px; background: #fff; }
.record-field > textarea { min-height: 96px; padding: 10px 12px; border-radius: 8px; line-height: 1.45; }
.record-textarea-paired > textarea { min-height: 126px; }
.record-textarea-wide > textarea { min-height: 92px; }
.record-field > input[type="file"] { min-height: 44px; padding: 8px; border-radius: 8px; background: #fff; }
.record-field small { margin-top: -1px; font-size: .7rem; }
.record-field em, .record-check-field em { color: var(--danger); font-size: .73rem; font-style: normal; font-weight: 500; }
.record-auto-field { min-height: 70px; display: grid; align-content: center; gap: 2px; padding: 10px 12px; border: 1px solid #e0e5e0; border-radius: 8px; background: #f8faf8; }
.record-auto-field > span { color: #59615b; font-size: .8rem; font-weight: 700; }
.record-auto-field b { font-size: .86rem; }
.record-auto-field small { font-size: .68rem; }
.record-check-field { min-height: 70px; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #e0e5e0; border-radius: 8px; background: #f8faf8; cursor: pointer; }
.record-check-field > input { flex: 0 0 18px; margin: 0; }
.record-check-field > span { display: grid; gap: 2px; }
.record-check-field b { font-size: .8rem; }
.record-check-field small { font-size: .68rem; }
.record-form-footer { display: flex; align-items: center; gap: 10px; margin: 24px -24px 0; padding: 16px 24px; border-top: 1px solid #e5e9e5; background: #fafbfa; }
.record-form-footer .button.primary { min-width: 178px; }
.details-panel summary { position: relative; padding-right: 35px; cursor: pointer; font-weight: 650; list-style: none; }
.details-panel summary::-webkit-details-marker { display: none; }
.details-panel summary::after { content: "+"; position: absolute; top: 50%; right: 0; color: #748078; font-size: 1.1rem; transform: translateY(-50%); }
.details-panel[open] summary::after { content: "−"; }
.details-panel[open] summary { margin-bottom: 18px; }
.details-panel .inline-form { margin-top: 16px; }
.details-panel input[type="file"] { max-width: 430px; }
.utility-panel { padding: 0; overflow: hidden; }
.utility-panel > summary { display: grid; gap: 2px; padding: 15px 52px 15px 18px; background: #fbfcfb; }
.utility-panel > summary::after { right: 18px; }
.utility-panel > summary small { font-size: .72rem; }
.utility-panel[open] > summary { margin: 0; border-bottom: 1px solid #e8ece8; }
.utility-panel > form { margin: 0; padding: 18px; }
.messages { display: grid; gap: 8px; margin-bottom: 18px; }
.message { padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.message.success { color: #31563e; border-color: #cfdcd2; background: #eff4f0; }
.message.error { color: var(--danger); border-color: #e7cccc; background: var(--danger-soft); }
.warning-text { color: var(--warning); }
.timesheet-toolbar { min-height: 68px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0; padding: 10px 14px 11px; border-bottom: 1px solid #e8ece8; background: #fbfcfb; }
.timesheet-search { display: grid; width: min(340px, 100%); gap: 5px; }
.timesheet-search span { color: var(--muted); font-size: .72rem; font-weight: 600; }
.timesheet-search input { height: 38px; border-color: #d8ddd8; background: rgba(255,255,255,.82); box-shadow: 0 1px 2px rgba(25,35,28,.025); }
.legend { align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; margin: 0; color: #5f6761; font-size: .9rem; font-weight: 550; }
.legend span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #dde0dd; }
.dot.present { background: #758b7c; }.dot.extra { background: #65786b; box-shadow: 0 0 0 2px #dce5de; }.dot.late { background: #b19559; }.dot.absent { background: #b27070; }
.timesheet-panel { padding: 0; overflow: hidden; border-color: #e5e9e5; border-radius: 14px; box-shadow: 0 5px 22px rgba(28,38,31,.055); }
.timesheet-wrap { overflow: auto; max-height: calc(100vh - 230px); background: #fff; scrollbar-color: #c8cec9 transparent; scrollbar-width: thin; }
.timesheet-table { width: 100%; min-width: 1456px; border-collapse: separate; border-spacing: 0; }
.timesheet-table th { position: sticky; top: 0; z-index: 4; min-width: 130px; padding: 10px 7px; background: #f8faf8; border-bottom: 1px solid #e2e7e2; text-align: center; }
.timesheet-table th > span { display: block; color: #858c86; font-size: .62rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.timesheet-table th b { font-size: .79rem; font-variant-numeric: tabular-nums; }
.timesheet-table th.weekend { background: #f3f6f3; }
.day-bulk-button { position: relative; width: 100%; display: grid; place-items: center; gap: 1px; padding: 2px 18px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.day-bulk-button:hover { background: #edf2ed; }
.day-bulk-button span { display: block; color: #7e857f; font-size: .62rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.day-bulk-button b { font-size: .79rem; font-variant-numeric: tabular-nums; }
.day-bulk-button i { position: absolute; top: 50%; right: 5px; color: #7f9485; font-size: .85rem; font-style: normal; line-height: 1; transform: translateY(-50%); }
.timesheet-table td { position: relative; height: 64px; padding: 4px 5px; }
.timesheet-table th:not(.total-col)::after, .timesheet-table td:not(.total-col)::after { content: ""; position: absolute; top: 18%; right: 0; width: 1px; height: 64%; background: #edf0ed; pointer-events: none; }
.timesheet-table tr[hidden] { display: none; }
.timesheet-table td.weekend-cell { background: #fafbfa; }
.timesheet-table .number-col { position: sticky; left: 0; z-index: 3; width: 58px; min-width: 58px; padding: 9px 8px; background: #fbfcfb; text-align: center; }
.timesheet-table td.number-col { color: #69716b; font-size: .74rem; font-variant-numeric: tabular-nums; }
.timesheet-table th.number-col { z-index: 6; background: #f6f8f6; }
.timesheet-table th.number-col .table-sort { position: relative; width: 100%; justify-content: center; gap: 0; }
.timesheet-table th.number-col .table-sort span { position: absolute; right: 0; }
.timesheet-table .employee-col { position: sticky; left: 58px; z-index: 3; width: 225px; min-width: 225px; padding: 9px 14px; background: #fff; text-align: left; }
.timesheet-table td.employee-col b { font-size: .86rem; font-weight: 700; }
.timesheet-table th.employee-col { z-index: 6; background: #f8faf8; }
.timesheet-table .position-col { position: sticky; left: 283px; z-index: 3; width: 165px; min-width: 165px; padding: 9px 13px; background: #fcfdfc; text-align: left; }
.timesheet-table td.position-col { color: #8a908b; font-size: .72rem; }
.timesheet-table th.position-col { z-index: 6; background: #f5f8f5; }
.timesheet-table tbody tr:hover > .number-col, .timesheet-table tbody tr:hover > .employee-col { background: #fafcfa; }
.timesheet-table tbody tr:hover > .position-col { background: #f8faf8; }
.table-sort { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.table-sort span { min-width: 12px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.timesheet-table .total-col { position: sticky; right: 0; z-index: 3; min-width: 78px; background: #fbfcfb; }
.timesheet-table .total-col::before { content: ""; position: absolute; top: 18%; left: 0; width: 1px; height: 64%; background: #e7ebe7; pointer-events: none; }
.timesheet-table td.total-col { text-align: center; }
.timesheet-table td.total-col b, .timesheet-table td.total-col small { display: block; }
.timesheet-table td.total-col small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.timesheet-table th.total-col { z-index: 6; background: #f6f8f6; }
.shift-cell { width: 100%; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 7px; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: transparent; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.shift-cell:hover { border-color: #d8ded9; background: #f7f9f7; box-shadow: 0 1px 3px rgba(25,35,28,.04); }
.shift-mark { display: block; font-size: .94rem; font-weight: 750; line-height: 1.08; }
.shift-mark.unmarked { color: #707771; }
.shift-details { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 7px; margin-top: 4px; color: var(--muted); font-size: .62rem; line-height: 1; text-align: center; }
.shift-details small, .shift-meta { color: var(--muted); font-size: .62rem; line-height: 1.05; }
.shift-details .late-meta { color: var(--warning); font-weight: 650; }
.shift-meta { width: 100%; display: block; margin-top: 4px; text-align: center; }
.shift-cell.state-present { border-color: transparent; color: #fff; background: #397451; }
.shift-cell.state-present.has-late { border-color: transparent; color: #fff; background: #a4731e; }
.shift-cell.state-absent { border-color: transparent; color: #fff; background: #a94f4f; }
.shift-cell.state-sick { border-color: transparent; color: #fff; background: #685d91; }
.shift-cell.state-vacation { border-color: transparent; color: #fff; background: #477984; }
.shift-cell.state-day_off { border-color: transparent; color: #fff; background: #657069; }
.weekend-cell .shift-cell.state-present { border-color: transparent; color: #fff; background: #3e707b; }
.weekend-cell .shift-cell.state-present.has-late { border-color: transparent; color: #fff; background: #a4731e; }
.shift-cell.state-present:hover, .shift-cell.state-absent:hover, .shift-cell.state-sick:hover, .shift-cell.state-vacation:hover, .shift-cell.state-day_off:hover { border-color: transparent; filter: brightness(.95); }
.shift-cell.state-present .shift-details .late-meta { color: rgba(255,255,255,.88); }
.shift-cell.schedule-default { background: transparent; }
.shift-cell.schedule-default .shift-mark { color: #c0c6c1; font-size: 1rem; font-weight: 500; }
.shift-cell .schedule-note { color: #b0b6b1; font-size: .58rem; }
.shift-cell.weekend-default { background: transparent; }
.shift-cell.weekend-default .shift-mark { color: #747c76; font-size: .76rem; font-weight: 650; }
.shift-cell .extra-shift-note { color: #779080; font-size: .57rem; font-weight: 600; opacity: 0; transition: opacity .15s ease; }
.shift-cell.weekend-default:hover .extra-shift-note { opacity: 1; }
.add-mark { margin: auto; font-size: 1.15rem !important; color: #a4aaa5 !important; }
.dialog { width: min(440px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 38px rgba(15,25,18,.22); }
.dialog::backdrop { background: rgba(20,27,22,.48); }
.dialog-form { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.dialog-head h2 { font-size: 1.25rem; }.dialog-head p { margin: 2px 0 0; color: var(--muted); text-transform: capitalize; }
.dialog-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface-muted); cursor: pointer; font-size: 1.4rem; }
.quick-attendance-form { display: grid; gap: 14px; }
.quick-attendance-form label { width: 100%; max-width: none; }
.quick-work-fields { display: grid; gap: 14px; }
.quick-work-fields[hidden] { display: none; }
.dialog-form > .form-actions { margin-top: 22px; padding-top: 0; }
.rate-field { display: grid; gap: 6px; color: #474d48; font-size: .82rem; font-weight: 650; }
.rate-field input, .rate-field select { height: 44px; font-size: 1rem; font-weight: 650; }
.rate-field input { font-variant-numeric: tabular-nums; }
.rate-confirmation { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; color: #657068; background: #f5f7f5; font-size: .76rem; }
.rate-confirmation b { color: var(--text); font-variant-numeric: tabular-nums; }
.bonus-dialog { width: min(520px, calc(100vw - 30px)); }
.bonus-form-fields { display: grid; gap: 13px; }
.bonus-form-fields label { display: grid; gap: 6px; color: #474d48; font-size: .82rem; font-weight: 650; }
.bonus-form-fields em { color: var(--danger); font-size: .75rem; font-style: normal; }
.dialog-note { margin-top: 14px; padding: 10px 12px; border-radius: 8px; color: #657068; background: #f5f7f5; font-size: .76rem; }
.dialog-note.warning { color: #705c35; background: #f7f2e8; }
.payout-confirmation { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 18px; padding: 14px; border: 1px solid #dfe5df; border-radius: 10px; background: #f8faf8; }
.payout-confirmation span { color: var(--muted); font-size: .75rem; }
.payout-confirmation b { text-align: right; font-size: .88rem; }
.payout-confirmation strong { text-align: right; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.delete-mark-button { margin-left: auto; }
.delete-confirmation { display: grid; gap: 4px; padding: 14px; border: 1px solid #e1caca; border-radius: 9px; background: #fbf3f3; }
.delete-confirmation strong { font-size: 1rem; }
.delete-confirmation span { color: var(--muted); font-size: .82rem; }
.delete-confirmation p { margin: 10px 0 0; color: #6f5555; font-size: .78rem; line-height: 1.45; }
.bulk-dialog { width: min(680px, calc(100vw - 30px)); }
.bulk-mark-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bulk-mark-fields label { display: grid; gap: 5px; color: #474d48; font-size: .8rem; font-weight: 650; }
.bulk-employee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.bulk-employee-toolbar input { width: min(300px, 100%); }
.bulk-employee-toolbar > div { display: flex; gap: 12px; }
.text-link-button { padding: 3px 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.text-link-button:hover { text-decoration: underline; }
.bulk-employee-list { max-height: 310px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; contain: layout paint style; touch-action: pan-y; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.bulk-employee { min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 11px; border-bottom: 1px solid #eef1ee; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 48px; }
.bulk-employee:last-child { border-bottom: 0; }
.bulk-employee:hover { background: #f8faf8; }
.bulk-employee[hidden] { display: none; }
.bulk-employee input[type="checkbox"] { width: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.bulk-employee b { display: block; font-size: .82rem; }
.bulk-employee small { font-size: .68rem; }
.bulk-employee em { color: var(--warning); font-size: .67rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.bulk-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; }
.bulk-footer > span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.bulk-footer .form-actions { padding: 0; }
.week-picker-dialog { width: min(620px, calc(100vw - 30px)); }
.week-picker-step { display: block; margin-bottom: 7px; color: #7a817b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.week-picker-years { display: flex; gap: 8px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-x: contain; }
.week-year { min-width: 108px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid #dfe4df; border-radius: 9px; color: #4c534e; background: #f8faf8; cursor: pointer; }
.week-year:hover { border-color: #aeb8af; background: #f4f7f4; }
.week-year b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.week-year span { color: var(--muted); font-size: .62rem; font-weight: 650; }
.week-year.selected { color: #fff; border-color: var(--accent); background: var(--accent); }
.week-year.selected span { color: rgba(255,255,255,.75); }
.week-picker-panels { margin-top: 16px; padding-top: 15px; border-top: 1px solid #e8ece8; }
.week-year-panel[hidden] { display: none; }
.week-picker-months { display: flex; gap: 6px; padding-bottom: 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.week-month { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #e0e4e0; border-radius: 8px; color: #555d57; background: #fff; cursor: pointer; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.week-month:hover { border-color: #aeb8af; background: #f7f9f7; }
.week-month.selected { color: #fff; border-color: var(--accent); background: var(--accent); }
.week-month i { color: #8aa294; font-size: .9rem; font-style: normal; line-height: 1; }
.week-month.selected i { color: #c9d7cd; }
.week-month-panels { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0ed; }
.week-month-panel[hidden] { display: none; }
.week-picker-list { max-height: min(360px, calc(100vh - 310px)); display: grid; grid-template-columns: 1fr; gap: 7px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; contain: layout paint style; touch-action: pan-y; scrollbar-color: #c8cec9 transparent; scrollbar-width: thin; }
.week-option { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid #e1e5e1; border-radius: 9px; background: #fff; transition: border-color .15s ease, background .15s ease; }
.week-option:hover { border-color: #aeb8af; background: #f7f9f7; }
.week-option > div { min-width: 0; }
.week-option b { display: block; font-size: .83rem; font-variant-numeric: tabular-nums; }
.week-option small { margin-top: 2px; font-size: .65rem; font-variant-numeric: tabular-nums; }
.week-option span { min-height: 20px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #516257; font-size: .66rem; font-weight: 700; }
.week-option em { padding: 2px 6px; border-radius: 10px; color: #506157; background: #e9eeea; font-size: .62rem; font-style: normal; }
.week-option.selected { border-color: #84988a; background: #edf3ee; }
.week-option.selected:hover { background: #e8f0e9; }
.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #e1e6e1; border-radius: 12px; background: #fbfcfb; }
.action-bar p { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.workflow-bar form { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.workflow-bar b { font-size: .88rem; }
.payout-selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.payout-selection-actions > span { min-width: 130px; color: #536159; font-size: .74rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.row-error { background: transparent !important; }
.row-error > td:first-child { background: #fdf8f8; box-shadow: inset 3px 0 #c58a8a; }
.payroll-table { min-width: 1080px; }
.payroll-table-head { gap: 18px; }
.payroll-table .issue-column { width: 215px; min-width: 215px; }
.payroll-table .bonus-column { width: 124px; min-width: 124px; padding: 6px 8px; }
.bonus-value { color: #536b5b; font-weight: 700; }
.row-bonus-button { width: 100%; min-height: 42px; display: grid; align-content: center; justify-items: end; gap: 1px; padding: 5px 8px; border: 1px solid #e0e5e1; border-radius: 8px; color: #69716b; background: #fbfcfb; text-align: right; cursor: pointer; }
.row-bonus-button:hover { border-color: #aebbb1; color: #31483a; background: #f4f8f5; }
.row-bonus-button b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.row-bonus-button small { color: #8a918c; font-size: .63rem; font-weight: 600; }
.row-bonus-button.has-value { border-color: #cad8cd; color: #31543d; background: #f1f6f2; }
.row-bonus-button.has-value small { color: #67806d; }
.bonus-form-actions { flex-wrap: wrap; }
.bonus-delete-button { margin-left: auto; }
.issue-action { width: 100%; display: grid; gap: 2px; padding: 7px 9px; border: 1px solid #d7e0d8; border-radius: 8px; color: #395442; background: #f3f7f4; text-align: left; cursor: pointer; }
.issue-action:hover { border-color: #9eafa1; background: #ecf3ee; }
.issue-action span, .issue-state span { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 750; }
.issue-action i, .issue-state.pending i { width: 8px; height: 8px; flex: 0 0 8px; border: 1px solid #8b998e; border-radius: 50%; background: #fff; }
.issue-action small, .issue-state small { margin-top: 1px; font-size: .66rem; }
.issue-state { display: grid; gap: 2px; padding: 6px 3px; }
.issue-state.pending { color: #59625b; }
.issue-state.paid { color: #315b3e; }
.issue-state.paid span { font-size: .8rem; }
.issue-cell-controls { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; }
.issue-select-control { min-width: 22px; display: grid; place-items: center; cursor: pointer; }
.issue-select-control input { width: 17px; min-height: 17px; margin: 0; }
.issue-select-control span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.payout-review-dialog { width: min(560px, calc(100vw - 30px)); }
.payout-review-list { max-height: min(310px, calc(100vh - 390px)); margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e0e5e1; border-radius: 9px; scrollbar-color: #c8cec9 transparent; scrollbar-width: thin; }
.payout-review-list > div { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 11px; border-bottom: 1px solid #edf0ed; }
.payout-review-list > div:last-child { border-bottom: 0; }
.payout-review-list span { min-width: 0; overflow: hidden; color: #414942; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.payout-review-list b { flex: 0 0 auto; font-size: .78rem; font-variant-numeric: tabular-nums; }
.payroll-create-form p { display: grid; gap: 4px; margin: 0; }
.payroll-create-form select, .payroll-create-form input { min-width: 160px; }
.analytics-filters { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 12px; background: #fbfcfb; }
.analytics-filters label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; font-weight: 650; }
.analytics-filters select { width: 210px; }
.rate-history-panel { margin-top: 18px; }
.rate-history-toolbar { min-height: 78px; }
.rate-history-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; }
.rate-history-controls .toolbar-search { width: 300px; }
.rate-history-table { min-width: 980px; }
.rate-history-table td:first-child { width: 132px; font-variant-numeric: tabular-nums; }
.segmented { display: flex; gap: 6px; padding: 0; background: transparent; }
.segmented button, .link-segmented a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid #dfe4df; border-radius: 8px; color: #555d57; background: #fff; cursor: pointer; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.segmented button:hover, .link-segmented a:hover { border-color: #aeb8af; background: #f7f9f7; }
.segmented button.active, .link-segmented a.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.custom-period-form label { min-width: 170px; display: grid; gap: 5px; color: #555d57; font-size: .76rem; font-weight: 650; }
.analytics-columns { align-items: start; }
.bar-chart { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 165px minmax(80px, 1fr) 110px; align-items: center; gap: 10px; font-size: .76rem; }
.bar-row > span { color: #626a64; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; overflow: hidden; border-radius: 10px; background: #edf0ed; }
.bar-track i { height: 100%; display: block; border-radius: inherit; background: var(--accent); }
.rank-list { display: grid; }
.rank-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; padding: 11px 0; border-bottom: 1px solid #edf0ed; }
.rank-list > div:last-child { border: 0; }
.rank-list strong { font-variant-numeric: tabular-nums; }
.admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.admin-user-table { min-width: 1050px; }
.admin-user-table th:nth-child(1) { width: 230px; }
.admin-user-table th:nth-child(2) { width: 120px; }
.admin-user-table th:nth-child(4) { width: 155px; }
.admin-user-table .action-cell { width: 175px; min-width: 175px; }
.row-action-group { display: flex; align-items: center; justify-content: center; gap: 6px; }
button.row-action { cursor: pointer; }
.row-action.danger-text { color: var(--danger); }
.protected-account-note { margin-top: 4px; font-size: .62rem; white-space: nowrap; }
.access-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.access-badges span { padding: 3px 7px; border-radius: 10px; color: #496051; background: #edf3ee; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.access-badges em { color: var(--muted); }
.muted-value { color: var(--muted); font-size: .76rem; }
.admin-dialog { width: min(650px, calc(100vw - 30px)); }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form-grid label, .admin-field { display: grid; gap: 6px; color: #474d48; font-size: .82rem; font-weight: 650; }
.admin-field { margin-top: 15px; }
.admin-field > small { line-height: 1.45; }
.password-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.password-control input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; letter-spacing: .025em; }
.page-access-fieldset { margin: 17px 0 0; padding: 13px; border: 1px solid #e0e5e0; border-radius: 10px; }
.page-access-fieldset legend { padding: 0 5px; color: #474d48; font-size: .8rem; font-weight: 700; }
.page-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.page-access-grid label { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid #e6eae6; border-radius: 8px; color: #505852; background: #fafbfa; cursor: pointer; font-size: .76rem; font-weight: 650; }
.page-access-grid label:has(input:checked) { border-color: #b8c7bb; color: #31483a; background: #eef4ef; }
.admin-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 10px 11px; border-radius: 9px; background: #f7f9f7; cursor: pointer; }
.admin-check input { flex: 0 0 auto; margin-top: 2px; }
.admin-check b { display: block; font-size: .79rem; }.admin-check small { margin-top: 1px; font-size: .7rem; }
.directory-add-form { display: flex; align-items: flex-end; gap: 9px; margin: 0 0 12px; padding: 12px; border: 1px solid #e6eae6; border-radius: 10px; background: #fafbfa; }
.directory-add-form label { width: min(430px, 100%); display: grid; gap: 5px; color: #555d57; font-size: .76rem; font-weight: 650; }
.position-directory-table { min-width: 720px; }
.position-directory-table .action-cell { width: 175px; min-width: 175px; }
.no-access-panel { width: min(560px, 100%); margin: 80px auto 0; padding: 40px; text-align: center; }
.no-access-mark { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; color: #6b5935; background: var(--warning-soft); font-size: 1.2rem; font-weight: 800; }
.no-access-panel p { max-width: 430px; margin: 0 auto 20px; color: var(--muted); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.login-card { width: min(420px, 100%); overflow: hidden; border: 1px solid #e1e6e1; border-radius: 15px; background: #fff; box-shadow: 0 14px 45px rgba(20,27,22,.08); }
.login-brand { padding: 18px 22px; border-bottom: 1px solid #e8ece8; color: var(--text); background: #fbfcfb; }
.login-brand .brand-mark { width: 44px; height: 44px; }.login-brand b { color: var(--text); }.login-brand small { color: var(--muted); }
.login-heading { padding: 22px 22px 0; }.login-heading h1 { margin-bottom: 4px; }.login-heading p { margin: 0; }
.login-card > .message { margin: 16px 22px 0; }
.login-card > .stack-form { padding: 20px 22px 24px; }
@media (max-width: 1050px) {
  .site-header-inner { padding: 0 20px; }
  .menu-button { display: block; }
  .top-navigation { position: absolute; top: 64px; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 3px; max-height: calc(100vh - 64px); padding: 10px 20px 16px; overflow-y: auto; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.98); box-shadow: 0 14px 30px rgba(20,28,22,.1); }
  .top-navigation.open { display: flex; }
  .top-navigation > a { width: 100%; padding: 10px 12px; }
  .mobile-account-links { display: grid; gap: 3px; margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
  .mobile-account-links a, .mobile-account-links .link-button { width: 100%; display: block; padding: 10px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
  .mobile-account-links a:hover, .mobile-account-links .link-button:hover { color: var(--text); background: var(--surface-muted); }
  .mobile-account-links form { margin: 0; }
  .user-menu { display: none; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .two-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-header-inner { padding: 0 14px; }
  .brand small { display: none; }
  .content { padding: 20px 14px 40px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head > .button, .page-head > .button-group { width: 100%; }
  .page-head > .button-group .button { flex: 1 1 auto; }
  .week-navigation .button { flex: 1 1 calc(50% - 7px); }
  .week-picker-list { grid-template-columns: 1fr; }
  .timesheet-toolbar { align-items: stretch; flex-direction: column; }.timesheet-search { width: 100%; }.legend { justify-content: flex-start; }
  .bulk-mark-fields { grid-template-columns: 1fr; }.bulk-employee-toolbar, .bulk-footer { align-items: stretch; flex-direction: column; }.bulk-employee-toolbar input { width: 100%; }.bulk-footer .form-actions { margin-top: 0; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric { min-height: 105px; padding: 14px; }.metric strong { font-size: 1.35rem; }
  .panel { padding: 15px; }
  .table-panel, .section-panel, .form-panel, .utility-panel { padding: 0; }
  .table-toolbar, .table-toolbar.compact-toolbar { align-items: stretch; flex-direction: column; min-height: 0; }
  .toolbar-search { width: 100%; }
  .toolbar-controls { justify-content: flex-start; }
  .toolbar-field { width: min(220px, 100%); }
  .table-panel-head { align-items: flex-start; flex-direction: column; }
  .table-head-actions { width: 100%; justify-content: space-between; }
  .status-key { justify-content: flex-start; flex-wrap: wrap; }
  .workflow-bar { align-items: stretch; flex-direction: column; }
  .workflow-bar form { justify-content: flex-start; }
  .payout-selection-actions { justify-content: flex-start; }
  .payout-selection-actions > span { width: 100%; text-align: left; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }
  .record-form-card { border-radius: 12px; }
  .record-form-header { padding: 18px 17px 16px; }
  .record-form { padding: 18px 17px 0; }
  .record-form-grid { grid-template-columns: 1fr; gap: 15px; }
  .record-form-grid .span-2 { grid-column: auto; }
  .record-form-footer { margin: 22px -17px 0; padding: 14px 17px; }
  .record-form-footer .button.primary { min-width: 0; flex: 1; }
  .analytics-filters { align-items: stretch; flex-direction: column; }.segmented { overflow-x: auto; }
  .analytics-filters label { align-items: stretch; flex-direction: column; }.analytics-filters select { width: 100%; }
  .rate-history-controls { width: 100%; align-items: stretch; flex-direction: column; }
  .rate-history-controls .toolbar-search { width: 100%; }
  .admin-form-grid, .page-access-grid { grid-template-columns: 1fr; }
  .password-control { grid-template-columns: 1fr 1fr; }.password-control input { grid-column: 1 / -1; }
  .directory-add-form { align-items: stretch; flex-direction: column; }.directory-add-form label, .directory-add-form .button { width: 100%; }
  .bar-row { grid-template-columns: 130px 1fr; }.bar-row b { grid-column: 2; }
  .rank-list > div { grid-template-columns: 1fr auto; }.rank-list > div > span { display: none; }
}
@media (max-width: 430px) {
  .metrics-grid { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .page-head .button-group, .action-bar, .details-panel { display: none !important; }
  .app-shell { display: block; }.content { max-width: none; padding: 0; }.panel { border: 0; box-shadow: none; }
}