:root { /* Power BI theme (CY19SU12) */ --accent: #118dff; --accent-dark: #12239e; --good: #1aab40; --bad: #d64554; --neutral: #d9b300; --orange: #e66c37; --text: #252423; --muted: #605e5c; --line: #e6e4e2; --bg: #faf9f8; --panel: #ffffff; --surface: #ffffff; --hover: #f3f2f1; --hover-strong: #e8e6e4; --row-hover: #f7f9fc; --foot-bg: #f8fbff; --grad-min: #deefff; --grad-max: #118dff; /* HKD brand */ --hkd-blue: #4a9fd4; --hkd-green: #5cb85c; --hkd-red: #e0392f; --hkd-orange: #f0a32e; --sidebar: 232px; --slicerbar: 92px; } /* Night mode — toggled via data-theme="dark" on (see src/theme-toggle.js) */ :root[data-theme="dark"] { --text: #e8e6e3; --muted: #a8a6a3; --line: #3a3937; --bg: #18191a; --panel: #232425; --surface: #2a2b2c; --hover: #333435; --hover-strong: #3d3e40; --row-hover: #26303d; --foot-bg: #1c2a36; --grad-min: #1c3a52; --grad-max: #118dff; } :root[data-theme="dark"] .help-card .hl-green { background: #1d3a26; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--bg); font-size: 13px; -webkit-font-smoothing: antialiased; } #app { height: 100%; } /* ---------- Layout shell ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { padding: 18px 16px 10px; border-bottom: 1px solid var(--line); } .brand img { width: 100%; max-width: 180px; display: block; margin: 0 auto; } .brand .sub { text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .3px; margin-top: 6px; text-transform: uppercase; } .nav { padding: 10px 8px; flex: 1; overflow-y: auto; min-height: 0; } .nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 0; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; cursor: pointer; user-select: none; } .nav a:hover { background: var(--hover); } .nav a.active { background: var(--accent); color: #fff; } .nav a .ico { width: 18px; text-align: center; font-size: 15px; } .sidebar .foot { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); } .sidebar .foot .user { font-weight: 600; color: var(--text); } .sidebar .foot button { margin-top: 8px; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px; cursor: pointer; color: var(--muted); font-size: 11px; } .sidebar .foot button:hover { background: var(--hover); } .main { display: flex; flex-direction: column; min-width: 0; } /* Mobile top bar + drawer (hidden on desktop) */ .topbar { display: none; } .nav-close { display: none; } .nav-overlay { display: none; } /* ---------- Slicer bar ---------- */ .slicerbar { /* Above .panel.expanded's z-index (2000) — otherwise its filter dropdowns (.ms-pop) get trapped inside this element's own stacking context and can never render on top of an expanded panel, no matter how high their own z-index is set. */ position: sticky; top: 0; z-index: 2200; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .slicer { display: flex; flex-direction: column; gap: 3px; min-width: 120px; } .slicer > label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .slicer .reset { margin-left: auto; } .ms { position: relative; } .ms-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 10px; cursor: pointer; min-width: 120px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text); } .ms-btn:hover { border-color: var(--accent); } .ms-btn .chev { color: var(--muted); font-size: 10px; } .ms-btn.has-sel { border-color: var(--accent); font-weight: 600; } .ms-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2100; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.14); width: max-content; min-width: 140px; max-width: 280px; max-height: 320px; overflow: auto; padding: 6px; } .ms-pop input.search { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; } .ms-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; } .ms-opt:hover { background: var(--hover); } .ms-opt input { accent-color: var(--accent); } .ms-more { padding: 5px 8px; font-size: 11px; color: var(--muted); font-style: italic; } .ms-actions { display: flex; justify-content: space-between; padding: 4px 6px; border-top: 1px solid var(--line); margin-top: 4px; } .ms-actions button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 600; } /* Payments filter bar: pin each dropdown to a constant width and ellipsis-truncate a long selected label (e.g. a bank name) so picking a value never grows the control and bumps it onto the next line. The full label still shows on hover (title) and in the open list. */ .pmt-filters .slicer { min-width: 0; } .pmt-filters .ms-btn { width: 120px; min-width: 0; } .pmt-filters .ms-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pmt-filters .ms-btn .chev { flex-shrink: 0; } .daterange { display: flex; align-items: center; gap: 6px; } .date-in { min-width: 130px; height: 34px; font-family: inherit; font-size: 12px; cursor: pointer; } .daterange .dash { color: var(--muted); } .btn-clearall { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 7px 12px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; height: 34px; } .btn-clearall:hover { background: var(--hover); color: var(--text); } /* ---------- Content ---------- */ .content { padding: 18px; } .page-title { font-size: 20px; font-weight: 700; margin: 0 0 2px; } .page-sub { color: var(--muted); margin: 0 0 16px; font-size: 12px; } .last-entry-stamp { color: var(--muted); margin: -8px 0 16px; font-size: 12px; } .grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 1100px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; position: relative; } .panel h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text); } .panel h3 .hint { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; } .panel.scroll { max-height: 460px; overflow: auto; } /* ---------- Expandable panels (tables/charts) ---------- */ .panel-expand-btn { position: absolute; top: 10px; right: 10px; z-index: 6; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.5; transition: opacity .15s, background .15s, color .15s; } .panel:hover .panel-expand-btn { opacity: 1; } .panel-expand-btn:hover { background: var(--hover); color: var(--text); } .panel.expanded { /* top/left/right/bottom set inline by JS — anchored to the content area, below the filter bar and right of the sidebar, so both stay visible and usable while expanded. */ position: fixed; z-index: 2000; overflow: auto; max-height: none; box-shadow: 0 12px 40px rgba(0,0,0,.4); } .panel.expanded .panel-expand-btn { opacity: 1; } .panel.expanded .chart-box { height: calc(100% - 70px) !important; min-height: 280px; } /* No longer blocking page scroll while expanded — the filter bar/sidebar must stay usable, and the expanded panel has its own scroll (overflow: auto above). */ /* ---------- Cards ---------- */ .cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; min-width: 180px; flex: 1; } .card .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; } .card .v { font-size: 26px; font-weight: 700; margin-top: 4px; } .card .v.accent { color: var(--accent); } /* ---------- Tables ---------- */ table.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } table.tbl th, table.tbl td { padding: 7px 10px; text-align: right; white-space: nowrap; } table.tbl th:first-child, table.tbl td:first-child { text-align: left; } table.tbl thead th { position: sticky; top: 0; background: var(--hover); color: var(--text); font-weight: 700; border-bottom: 2px solid var(--line); font-size: 12px; z-index: 1; } table.tbl thead th.sortable { cursor: pointer; user-select: none; } table.tbl thead th.sortable:hover { background: var(--hover-strong); color: var(--accent); } table.tbl tbody tr { border-bottom: 1px solid var(--line); } table.tbl tbody tr:hover { background: var(--row-hover); } table.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--accent); background: var(--foot-bg); } /* Opt-in only (Data Entry's total row) — a global sticky tfoot would float over and overlap any other table's expanded drill-down content (e.g. Trends' year-into-months, Office DPO's daily/monthly breakdown) since those grow tall inside the same scrollable panel. */ table.tbl.sticky-foot tfoot td { position: sticky; bottom: 0; z-index: 2; } table.tbl td.num { font-variant-numeric: tabular-nums; } table.tbl tr.row-clickable { cursor: pointer; } table.tbl td.dpo-drill { background: var(--hover); padding: 12px 16px; } table.tbl td.dpo-drill table.tbl { margin: 0; } table.tbl .matrix-rowhead { font-weight: 600; } .cell-pct { display: block; font-size: 10px; color: var(--muted); font-weight: 400; } /* Dense tables (Supplies Price Watchdog): smaller type + padding so wide tables fit */ .panel.tight table.tbl th, .panel.tight table.tbl td { font-size: 12px; padding: 6px 8px; } .toggle { display: flex; align-items: center; gap: 6px; } .toggle .toggle-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; } .toggle button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .toggle button:first-of-type { border-radius: 8px 0 0 8px; } .toggle button:last-of-type { border-radius: 0 8px 8px 0; border-left: none; } .toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .col-toggles { display: flex; gap: 8px; } .col-toggles button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .col-toggles button:hover { border-color: var(--accent); } .col-toggles button.active { background: #eaf3ff; color: var(--accent); border-color: var(--accent); } .pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 12px; } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; } /* ---------- Login ---------- */ .login-wrap { display: grid; place-items: center; height: 100vh; background: var(--bg); } .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 40px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.08); width: 360px; } .login-card img { width: 220px; margin-bottom: 18px; } .login-card h1 { font-size: 18px; margin: 0 0 6px; } .login-card p { color: var(--muted); margin: 0 0 22px; } .gbtn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 8px; padding: 11px 18px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 14px; } .gbtn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.1); } .login-err { color: var(--bad); background: #fdecee; border: 1px solid #f5c2c7; border-radius: 8px; padding: 10px; margin-bottom: 16px; font-size: 12px; } .login-form { display: flex; flex-direction: column; gap: 10px; text-align: left; } .login-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; } .login-form input:focus { outline: none; border-color: var(--accent); } .login-btn { margin-top: 4px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; } .login-btn:hover { background: var(--accent-dark); } .login-btn:disabled { opacity: .6; cursor: default; } /* ---------- Insights ---------- */ .card.kpi-good { border-top: 3px solid var(--good); } .card.kpi-warn { border-top: 3px solid var(--neutral); } .card.kpi-bad { border-top: 3px solid var(--bad); } .insight-col { display: flex; flex-direction: column; gap: 0; } .ins-head { display: flex; align-items: center; gap: 8px; font-size: 14px !important; margin: 0 0 12px !important; } .ins-head.good { color: var(--good); } .ins-head.bad { color: var(--bad); } .ins-head.rec { color: var(--accent); } .ins-count { margin-left: auto; background: var(--hover); color: var(--muted); border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 700; } .ins-item { border-left: 3px solid var(--line); padding: 9px 12px; margin-bottom: 9px; background: #fbfbfa; border-radius: 0 8px 8px 0; } .ins-item:last-child { margin-bottom: 0; } .ins-item.good { border-left-color: var(--good); background: #f3fbf5; } .ins-item.bad { border-left-color: var(--bad); background: #fdf4f5; } .ins-item.rec { border-left-color: var(--accent); background: #f4f9ff; } .ins-item.warn { border-left-color: var(--neutral); background: #fefbf0; } .ins-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; } .ins-detail { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; } .pri { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 6px; color: #fff; } .pri-high { background: var(--bad); } .pri-med { background: var(--neutral); } .pri-low { background: #9a9a9a; } .ins-notes { margin: 0 0 12px; padding-left: 18px; } .ins-notes li { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; } /* ---------- Data Entry ---------- */ .ef-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .entry-form { display: flex; flex-direction: column; gap: 10px; } /* Spreadsheet (row) entry mode: headered cells in one row */ .entry-rowtable { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .entry-rowtable .erc { display: flex; flex-direction: column; gap: 4px; } .entry-rowtable .erc-h { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; min-height: 12px; } .entry-rowtable select, .entry-rowtable input { min-width: 110px; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-family: inherit; background: var(--surface); } .entry-rowtable input[type="date"] { min-width: 140px; } .entry-rowtable input[type="checkbox"] { min-width: 0; width: 20px; height: 20px; accent-color: var(--accent); } /* Wrap the checkbox in a cell the same height as the inputs so it lines up in the row. */ .entry-rowtable .cb-cell { height: 34px; display: inline-flex; align-items: center; justify-content: center; } .entry-rowtable select:focus, .entry-rowtable input:focus { outline: none; border-color: var(--accent); } .entry-rowtable .ef-save { margin: 0; height: 34px; padding: 0 18px; white-space: nowrap; } .ef-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ef-row > span { font-size: 12px; font-weight: 600; color: var(--muted); } .ef-row select, .ef-row input[type="date"], .ef-row input[type="number"], .ef-row input:not([type="checkbox"]) { min-width: 170px; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-family: inherit; background: var(--surface); } .ef-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .ef-row select:focus, .ef-row input:focus { outline: none; border-color: var(--accent); } .ef-row .ef-computed { font-size: 13px; font-weight: 600; color: var(--text); } .ef-note { font-size: 11px; color: var(--muted); font-style: italic; margin: 2px 0 0; } .ef-ok { background: #f3fbf5; color: #136f2e; border: 1px solid #b7e3c2; border-radius: 6px; padding: 8px 10px; font-size: 12px; } .ef-err { background: #fdf4f5; color: var(--bad); border: 1px solid #f3c0c6; border-radius: 6px; padding: 8px 10px; font-size: 12px; } .ef-save { margin-top: 4px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; } .ef-save:hover { background: var(--accent-dark); } .ef-save:disabled { opacity: .6; cursor: default; } .ef-cancel { margin-top: 6px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer; } .ef-cancel:hover { background: var(--hover); color: var(--text); } .ef-actions { display: flex; gap: 6px; justify-content: flex-end; } .ef-edit, .ef-del { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; line-height: 1; } .ef-edit { color: var(--accent); } .ef-edit:hover { background: #eaf3ff; border-color: var(--accent); } .ef-del { color: var(--bad); } .ef-del:hover { background: #fdf4f5; border-color: var(--bad); } tr.row-editing td { background: #eaf3ff; } tr.row-today td { background: #e9f9ee; } tr.row-adjustment td { font-style: italic; color: var(--muted); } .entry-filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .entry-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .entry-filters .ms-opt { flex-direction: row; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); } /* Keep multi-select checkboxes a normal small size everywhere (e.g. inside the payroll filter bar, whose generic input sizing would otherwise stretch them). */ .ms-opt input[type="checkbox"] { width: 15px; height: 15px; min-width: 0; flex-shrink: 0; border: none; border-radius: 3px; padding: 0; background: none; } .entry-filters select, .entry-filters input { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-family: inherit; background: var(--surface); min-width: 120px; } .entry-filters .ef-clearf { height: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 6px; padding: 0 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .entry-filters .ef-clearf:hover { background: var(--hover); color: var(--text); } /* ---------- Payroll ---------- */ .pw-gate { display: grid; place-items: center; min-height: 70vh; } .pw-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 36px; width: 340px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.06); } .pw-card .pw-ico { font-size: 34px; } .pw-card h2 { margin: 10px 0 4px; font-size: 18px; } .pw-card p { color: var(--muted); margin: 0 0 18px; font-size: 12px; } .pw-in { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; margin-bottom: 12px; font-family: inherit; } .pw-in:focus { outline: none; border-color: var(--accent); } .pw-btn { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; } .pw-btn:hover { background: var(--accent-dark); } /* Date Range Picker */ .drp-wrap { position: relative; display: inline-flex; flex-direction: column; gap: 3px; } .drp-btn { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .drp-btn:hover { border-color: var(--accent); } .drp-btn.drp-open { border-color: var(--accent); } .drp-btn.drp-active { border-color: var(--accent); color: var(--accent); font-weight: 600; } .drp-x { font-size: 10px; opacity: .6; margin-left: 2px; } .drp-x:hover { opacity: 1; } .drp-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 2200; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.15); padding: 10px; width: 224px; } .drp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 700; } .drp-nav { background: none; border: none; font-size: 18px; cursor: pointer; padding: 2px 8px; color: var(--text); border-radius: 4px; line-height: 1; } .drp-nav:hover { background: var(--hover); } .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .drp-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0 5px; } .drp-day { text-align: center; padding: 4px 0; font-size: 12px; cursor: pointer; border-radius: 4px; } .drp-day:hover { background: var(--hover); } .drp-day.drp-in { background: #dbeeff; border-radius: 0; } .drp-day.drp-start { background: var(--accent); color: #fff; border-radius: 4px 0 0 4px; } .drp-day.drp-end { background: var(--accent); color: #fff; border-radius: 0 4px 4px 0; } .drp-day.drp-start.drp-end { border-radius: 4px; } .drp-hint { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; } /* Hide the up/down spinner arrows on number inputs */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .guarantee-notice { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #fff8e1; border: 1px solid #f0c040; color: #7a5800; font-size: 13px; font-weight: 500; } /* Balance box: non-sticky table headers. A sticky header sits in the scroll container and can render on top of a filter dropdown opened above the table (the "Date" header overlapping the Dates menu). Keeping the header static means a dropdown opened over the table is never covered by it. */ .bal-scroll table.tbl thead th { position: static; z-index: auto; } /* Payments list: only the list of deposits scrolls — the title, tabs and filters above it stay pinned (they sit outside this scroll container). */ .list-scroll { max-height: 520px; overflow: auto; } /* Centered modal overlay (payroll guarantee editor, etc.) */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-card { width: 100%; max-height: 85vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } /* Manager sign-off block on the associates approval sheet. */ .signoff { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; } .signoff > div { flex: 1 1 180px; } .signoff span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .sig-line { border-bottom: 1px solid var(--text); height: 30px; margin-top: 6px; } /* Payroll filter bar — full-bleed across the content padding to match the slicer bar. */ .payroll-bar { margin: -18px -18px 16px; } .payroll-bar select, .payroll-bar input:not([type="checkbox"]) { min-width: 130px; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-family: inherit; background: var(--surface); } .payroll-bar select:focus, .payroll-bar input:not([type="checkbox"]):focus { outline: none; border-color: var(--accent); } .payroll-bar .btn-print { margin-left: auto; } .btn-print, .btn-lock { height: 34px; align-self: flex-end; border-radius: 6px; padding: 0 14px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); } .btn-print { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-print:hover { background: var(--accent-dark); } .btn-lock { background: var(--surface); color: var(--muted); } .btn-lock:hover { background: var(--hover); color: var(--text); } /* Print header: hidden on screen, shown only when printing. */ .print-head { display: none; align-items: center; gap: 16px; margin-bottom: 16px; } .print-head img { height: 54px; } .print-head h1 { margin: 0; font-size: 20px; } .print-head .ph-sub { color: var(--text); font-weight: 600; margin-top: 2px; } .print-head .ph-gen { color: var(--muted); font-size: 11px; margin-top: 2px; } @media print { .sidebar, .banner-dev, .slicerbar, .no-print { display: none !important; } .shell, .main, .content { display: block; } .content { padding: 0; } .print-head { display: flex; } .panel { border: none; padding: 0; } .panel.scroll { max-height: none; overflow: visible; } .cards { margin-bottom: 18px; } table.tbl thead th, table.tbl tfoot td, .card .v.accent { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { margin: 1.4cm; } } /* ---------- Help & FAQ ---------- */ .help-card p { font-size: 13px; color: var(--text); line-height: 1.55; margin: 0 0 10px; } .help-card ul { margin: 0; padding-left: 18px; } .help-card li { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 6px; } .help-card .hl-green { background: #e9f9ee; padding: 1px 6px; border-radius: 4px; } .faq { border-top: 1px solid var(--line); padding: 12px 0; } .faq:first-of-type { border-top: none; } .faq-q { font-weight: 700; font-size: 13px; margin-bottom: 4px; } .faq-a { font-size: 13px; color: var(--muted); line-height: 1.55; } /* ---------- Manage Providers (Data Entry) ---------- */ .manage-providers-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; } .manage-providers-list li { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; } .manage-providers-list li:last-child { border-bottom: none; } .manage-providers-list button { font-size: 12px; padding: 3px 10px; } .manage-providers-list li.mpl-row { display: block; padding: 8px; } .mpl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .mpl-specs { display: flex; gap: 6px; flex-wrap: wrap; } .spec-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); cursor: pointer; user-select: none; } .spec-chip input { margin: 0; } .spec-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---------- misc ---------- */ .loading { padding: 40px; text-align: center; color: var(--muted); } .chart-box { position: relative; height: 320px; } .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); } .legend .item { display: flex; align-items: center; gap: 6px; } .legend .swatch { width: 12px; height: 12px; border-radius: 3px; } .banner-dev { background: #fff4ce; border-bottom: 1px solid #f0e0a0; color: #7a5b00; font-size: 12px; padding: 5px 18px; text-align: center; } /* ============================================================ Mobile / iPhone (≤ 760px) — collapsible nav + stacked layout ============================================================ */ @media (max-width: 760px) { body { font-size: 14px; } /* Single-column shell; sidebar becomes a slide-in drawer */ .shell { display: block; } .main { display: block; } .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); box-shadow: 0 1px 3px rgba(0,0,0,.05); } .hamburger { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; width: 40px; height: 40px; font-size: 20px; cursor: pointer; color: var(--text); line-height: 1; flex: none; } .topbar-logo { height: 30px; } .topbar-title { font-weight: 700; font-size: 15px; color: var(--text); margin-left: auto; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 270px; max-width: 84vw; transform: translateX(-100%); transition: transform .25s ease; z-index: 80; box-shadow: 4px 0 24px rgba(0,0,0,.18); } .sidebar.open { transform: translateX(0); } .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 70; } .nav-close { display: block; position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 18px; color: var(--muted); cursor: pointer; } .nav a { padding: 13px 14px; } /* bigger tap targets */ /* Force every two-column grid to stack (overrides inline grid styles) */ .grid { grid-template-columns: 1fr !important; } .cols-2, .cols-3 { grid-template-columns: 1fr !important; } .content { padding: 12px; } .page-title { font-size: 18px; } /* Cards: two per row, then wrap */ .card { min-width: calc(50% - 7px); padding: 12px 14px; } .card .v { font-size: 20px; } /* Wide tables scroll sideways inside their panel instead of overflowing the screen */ .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel.scroll { max-height: none; } /* Slicer / filter bars wrap to full-width controls */ .slicerbar { padding: 10px 12px; gap: 8px; } .slicer { min-width: calc(50% - 4px); } .ms-btn, .date-in, .slicer select, .slicer input { width: 100%; min-width: 0; } .payroll-bar { margin: 0 0 14px; border-radius: 10px; position: static; } .payroll-bar .btn-print { margin-left: 0; } /* Login card fits the screen */ .login-card { width: auto; max-width: 92vw; padding: 28px 22px; } /* Entry form filters stack */ .entry-filters select, .entry-filters input { min-width: calc(50% - 5px); } } /* Labor Audit — conditional-tone table cells */ .labor-audit-page td.good { color: var(--good); font-weight: 700; } .labor-audit-page td.warn { color: var(--muted); font-weight: 700; } .labor-audit-page td.bad { color: var(--bad); font-weight: 700; } /* Evaluations — behaviorally-anchored rating form */ .eval-headgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .eval-anchors { display: flex; flex-direction: column; gap: 8px; } .eval-anchor { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 11px; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.35; } .eval-anchor:hover { background: var(--hover); } .eval-anchor.selected { border-color: var(--accent); background: var(--hover); box-shadow: inset 0 0 0 1px var(--accent); } .eval-anchor-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .eval-anchor-txt { flex: 1 1 auto; } .eval-note { width: 100%; margin-top: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 7px; padding: 7px 10px; font-size: 13px; } .eval-textarea { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; } .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; padding: 2px 6px; } .btn-link:hover { text-decoration: underline; }