/* ---------- Theming ---------- Only brand/decorative colors are themed (nav bar, card accent borders, links/primary buttons) -- status colors (green=good, red=delete/critical, yellow=warning) and chart colors deliberately stay fixed across every theme, so they keep meaning what they mean regardless of a user's preference. See includes/themes.php for the PHP-side list (kept in sync with the seed colors below by hand) and account.php for where a user picks one; applied via a `data-theme` attribute on in includes/header.php. Each theme only needs to override the three seed variables below -- everything else (hover states, light background tints, the home-hero gradient) is derived from them with color-mix() so it recomputes automatically per theme. */ :root { --brand-dark: #1c2733; --link: #0056b3; --accent: #e67e22; --link-hover: color-mix(in srgb, var(--link) 75%, black); --link-tint: color-mix(in srgb, var(--link) 8%, var(--surface-bg)); --link-tint-strong: color-mix(in srgb, var(--link) 15%, var(--surface-bg)); --link-focus-ring: color-mix(in srgb, var(--link) 15%, transparent); --link-on-dark: color-mix(in srgb, var(--link) 45%, white); --brand-dark-mid: color-mix(in srgb, var(--brand-dark), white 18%); --brand-dark-soft: color-mix(in srgb, var(--brand-dark), white 30%); /* Neutral/surface colors -- independent of the brand seeds above, these are the light/dark axis (see account.php's Light/Dark picker, applied via a `data-mode="dark"` attribute on below). The nav bar is NOT included here on purpose: it's already a dark brand color in every theme, so it doesn't need to change between light and dark page mode. */ --page-bg: #fff; --page-text: #222; --surface-bg: #fff; --surface-alt: #f7f9fb; --surface-border: #e1e6eb; --input-border: #ccc; --text-muted: #777; /* Heading/label text on a card or light surface -- in light mode this is the theme's own brand color (so headings pick up a bit of the chosen theme's personality, e.g. Steel Blue's headings read as deep blue); in dark mode --brand-dark itself is too dark to read against a dark surface, so this falls back to the page's own (light) text color instead. Never use --brand-dark directly for text color -- use this. */ --heading-text: var(--brand-dark); } html[data-theme="charcoal-teal"] { --brand-dark: #263238; --link: #0277bd; --accent: #00897b; } html[data-theme="steel-blue"] { --brand-dark: #1e3a5f; --link: #1565c0; --accent: #f39c12; } html[data-theme="forest-rust"] { --brand-dark: #1b3a2f; --link: #2e7d32; --accent: #c0562c; } html[data-mode="dark"] { color-scheme: dark; /* hints the browser to draw native controls (scrollbars, checkboxes, date pickers) dark too */ --page-bg: #14181d; --page-text: #d7dce2; --surface-bg: #1c222b; --surface-alt: #232a34; --surface-border: #333c48; --input-border: #454f5c; --text-muted: #98a2ad; --heading-text: var(--page-text); } /* ---------- Base ---------- */ body { font-family: Arial, sans-serif; margin: 0; background: var(--page-bg); color: var(--page-text); } .page-content { margin: 2rem; } a { color: var(--link); } /* ---------- Top navigation ---------- */ .main-nav { display: flex; align-items: center; gap: 1.5rem; background: var(--brand-dark); color: #fff; padding: 0 1.5rem; height: 56px; flex-wrap: wrap; } .nav-brand { font-weight: bold; font-size: 1.05rem; margin-right: 1rem; color: #fff; text-decoration: none; } .nav-brand:hover { color: var(--link-on-dark); } .nav-menu { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; flex: 1; } .nav-item { position: relative; } .nav-link, .nav-toggle { display: inline-flex; align-items: center; gap: 4px; color: #dbe4ee; text-decoration: none; background: none; border: none; font-size: 0.95rem; font-family: inherit; padding: 8px 12px; border-radius: 4px; cursor: pointer; } .nav-link:hover, .nav-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav-item.active > .nav-link, .nav-item.active > .nav-toggle { background: rgba(255,255,255,0.12); color: #fff; } .nav-caret { font-size: 0.6rem; } .submenu { /* Always laid out but hidden, so opening can fade/slide instead of popping (display:none can't be transitioned). visibility (delayed until the fade-out finishes) keeps it out of reach of clicks and the tab order while closed. */ display: block; visibility: hidden; opacity: 0; transform: translateY(-10px) scale(0.97); transform-origin: top left; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.3,1), visibility 0s linear 0.22s; position: absolute; top: 100%; left: 0; background: var(--surface-bg); color: var(--page-text); list-style: none; margin: 4px 0 0; padding: 6px 0; min-width: 180px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index: 20; } .nav-item.open .submenu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } .nav-caret { display: inline-block; transition: transform 0.22s ease; } .nav-item.open .nav-caret { transform: rotate(180deg); } .submenu-link { display: block; padding: 8px 14px; color: var(--page-text); text-decoration: none; font-size: 0.9rem; } .submenu-link:hover { background: var(--surface-alt); } .submenu-link.active { color: var(--link); font-weight: bold; } .submenu-divider { height: 0; margin: 6px 0; border-top: 1px solid var(--surface-border); } .nav-user { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #dbe4ee; } .nav-role { color: #93a4b8; font-size: 0.8rem; } .nav-account-link { color: #dbe4ee; padding: 6px 10px; border-radius: 4px; text-decoration: none; white-space: nowrap; } .nav-account-link:hover, .nav-account-link.active { background: rgba(255,255,255,0.1); color: #fff; } .nav-logout { color: #dbe4ee; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; text-decoration: none; } .nav-logout:hover { background: rgba(255,255,255,0.1); } /* ---------- Tables (list pages) ---------- */ table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 800px; border: 1px solid var(--surface-border); border-radius: 6px; overflow: hidden; } th, td { border-bottom: 1px solid var(--surface-border); border-right: 1px solid var(--surface-border); padding: 9px 12px; text-align: left; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } th { background: var(--brand-dark); color: #fff; font-weight: 600; border-bottom: 2px solid var(--link); } tbody tr:nth-child(even) { background: var(--surface-alt); } tbody tr:hover { background: var(--link-tint); } tbody td { transition: background-color 0.12s ease; } /* A thin accent bar on the hovered row's first cell makes it easy to track one record across a wide table. */ tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); } tr.filter-row td { padding: 4px 6px; background: var(--surface-alt); } tr.filter-row:hover { background: var(--surface-alt); } tr.filter-row input { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: 0.9rem; border: 1px solid var(--input-border); border-radius: 3px; background: var(--surface-bg); color: var(--page-text); } tr.no-match td { text-align: center; color: var(--text-muted); font-style: italic; background: var(--surface-bg); } /* ---------- Column visibility + Excel-style per-column value filters ---------- */ /* Wraps each filter-row's text input plus its new value-filter dropdown button, so the two sit side by side without disturbing the input's own width/behavior. */ .filter-cell { display: flex; gap: 4px; align-items: center; } .filter-cell input { flex: 1; min-width: 0; } .filter-dropdown-btn { flex-shrink: 0; padding: 4px 7px; font-size: 0.75rem; line-height: 1.2; border: 1px solid var(--input-border); border-radius: 3px; background: var(--surface-bg); color: var(--text-muted); cursor: pointer; } .filter-dropdown-btn:hover { background: var(--surface-alt); } /* Sized/weighted like the other header-actions buttons it sits next to (Export Excel/PDF, + Add Record) -- it was previously sharing the tiny .filter-dropdown-btn style above, which made it look like a stray icon rather than a real toolbar action and was easy to miss entirely. */ #columnsToggleBtn { white-space: nowrap; } /* Marks a column whose checkbox list currently excludes at least one value -- same idea as Excel's own filled-in funnel icon, so it's obvious at a glance which columns have an active value filter. */ .filter-dropdown-btn.filter-active { background: var(--link); color: #fff; border-color: var(--link); } /* Floating panel shared by both the "Columns" (show/hide) button and every per-column value-filter dropdown -- built and positioned in JS (table-interactions.js), appended directly to so it's never confined by the table's own scrolling/sticky containers. */ .dropdown-panel { position: fixed; z-index: 50; background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 10px; width: 240px; max-width: 90vw; } .dropdown-panel .dropdown-search { width: 100%; box-sizing: border-box; padding: 5px 8px; margin-bottom: 8px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--surface-bg); color: var(--page-text); } .dropdown-panel .dropdown-actions { display: flex; gap: 8px; margin-bottom: 8px; } .dropdown-panel .dropdown-actions button { flex: 1; padding: 4px 8px; font-size: 0.8rem; border: 1px solid var(--input-border); border-radius: 3px; background: var(--surface-alt); color: var(--page-text); cursor: pointer; } .dropdown-panel .dropdown-actions button:hover { background: var(--link-tint); } .dropdown-panel .checklist-box { max-height: 240px; margin-bottom: 8px; } .dropdown-panel .checklist-box label { display: block; font-weight: normal; margin-bottom: 4px; font-size: 0.88rem; word-break: break-word; } .dropdown-panel .dropdown-apply { width: 100%; padding: 6px; } th .sort-link { display: flex; justify-content: space-between; align-items: center; color: inherit; text-decoration: none; cursor: pointer; user-select: none; } th .sort-link:hover { color: var(--link-on-dark); } th .sort-arrow { font-size: 0.7rem; margin-left: 6px; color: var(--link-on-dark); } th.sorted-active { background: var(--link-hover); } /* Right-justify phase code + currency columns -- both the data cells and their header label, so the header sits above the right-justified numbers below it instead of drifting to the opposite side. tabular-nums keeps digits a fixed width so amounts line up vertically. */ .align-right { text-align: right; font-variant-numeric: tabular-nums; } th.align-right .sort-link { justify-content: flex-end; } /* Frozen leading columns ("freeze panes") -- pins the first 4 columns in place while the rest scroll underneath horizontally, so Actions/Created/ Job/PO Number stay visible on a table that's grown too wide to read comfortably at a glance (see table-interactions.js's initInteractiveTable freezeColumns option, which computes --freeze-left-N to match each column's real on-screen width). Each nth-child rule needs its own `left` value, so this can't collapse into one :nth-child(-n+4) selector. Backgrounds are layered in the same order/specificity as the plain (non-frozen) row rules above, so a frozen cell always matches whatever its own row would look like unfrozen -- header, even/odd, hover. */ /* (overflow:hidden on the base `table` rule, which would otherwise confine position:sticky to the table's own box, is overridden for every table inside a .table-scroll-full wrapper -- see that rule further down.) */ /* #dataTable-scoped (not just .freeze-cols) so these outrank the ID selector `#dataTable th { position: relative; }` above (line ~330, there for the resize-handle's absolute positioning) -- a class selector alone loses to an ID selector regardless of source order. */ /* will-change forces each of these onto its own GPU-composited layer. Without it, a cell that's sticky on BOTH axes at once (pinned to a corner -- exactly what a frozen column's header cell is) is a known failure case for position:sticky in tables across browsers, Chrome included: during horizontal scroll, the browser can miscalculate which region of a double-sticky cell needs repainting and render it truncated or blank. This doesn't change layout, only how it's painted. */ #dataTable.freeze-cols th:nth-child(1), #dataTable.freeze-cols td:nth-child(1) { position: sticky; left: var(--freeze-left-0, 0px); will-change: transform; } #dataTable.freeze-cols th:nth-child(2), #dataTable.freeze-cols td:nth-child(2) { position: sticky; left: var(--freeze-left-1, 0px); will-change: transform; } #dataTable.freeze-cols th:nth-child(3), #dataTable.freeze-cols td:nth-child(3) { position: sticky; left: var(--freeze-left-2, 0px); will-change: transform; } #dataTable.freeze-cols th:nth-child(4), #dataTable.freeze-cols td:nth-child(4) { position: sticky; left: var(--freeze-left-3, 0px); will-change: transform; } /* Higher than the general sticky-header rule's z-index:4 (below) on purpose: a frozen header cell and a non-frozen one both being position:sticky with EQUAL z-index means whichever comes later in the DOM wins any overlap -- and a non-frozen column later in the row (e.g. Division, right after PO Number) legitimately slides left, underneath the frozen block, as the table scrolls. Without a strictly higher z-index here, that later column painted OVER the frozen one instead of the other way around, making the frozen column's header text vanish mid-scroll. */ #dataTable.freeze-cols th:nth-child(-n+4) { z-index: 5; background: var(--brand-dark); } #dataTable.freeze-cols td:nth-child(-n+4) { z-index: 2; background: var(--surface-bg); } /* Visual seam only on the last frozen column, marking where the frozen region ends and the horizontally-scrolling columns begin. */ #dataTable.freeze-cols th:nth-child(4), #dataTable.freeze-cols td:nth-child(4) { box-shadow: 1px 0 0 var(--surface-border); } #dataTable.freeze-cols tbody tr:nth-child(even) td:nth-child(-n+4) { background: var(--surface-alt); } #dataTable.freeze-cols tbody tr:hover td:nth-child(-n+4) { background: var(--link-tint); } /* Same overlap issue as the header row's z-index:5 above, and the same fix -- a frozen filter-row cell must outrank a non-frozen one (the general .table-scroll-full tr.filter-row td rule gives every filter cell z-index:4) or it loses the paint order to whichever non-frozen column has scrolled underneath it. */ #dataTable.freeze-cols tr.filter-row td:nth-child(-n+4) { z-index: 5; background: var(--surface-alt); } /* ---------- Report pages (report_*.php) ---------- */ .report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 14px; } .report-filters .field-inline { margin: 0; } .report-filters label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 3px; } .report-filters select, .report-filters input { width: auto; padding: 6px 8px; } .report-filters .btn-save, .report-filters .btn-cancel { padding: 7px 14px; } /* Open PO Aging: how long a PO's been sitting outstanding */ tr.aging-warn td { background: #fff6e0; } tr.aging-critical td { background: #fdecea; } .aging-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 4px; } .aging-swatch.aging-warn { background: #fff6e0; border: 1px solid #e6c568; } .aging-swatch.aging-critical { background: #fdecea; border: 1px solid #f5c2c0; } /* Job Cost Summary: grand-total footer row */ .report-totals-row td { border-top: 2px solid var(--link); background: var(--link-tint); font-weight: 600; } /* Report charts -- collapsed by default (
, native/no-JS-required toggle) so the table gets the full page by default; same card look as the home page's .home-card, auto-fit grid so charts wrap to their own row on a narrow screen with no separate breakpoint needed. */ .chart-collapsible { margin-bottom: 1.5rem; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-bg); } .chart-collapsible summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; color: var(--heading-text); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } .chart-collapsible summary::-webkit-details-marker { display: none; } .chart-collapsible summary::before { content: '\25B6'; font-size: 0.7em; color: var(--text-muted); transition: transform 0.15s ease; } .chart-collapsible[open] summary::before { transform: rotate(90deg); } .chart-collapsible summary:hover { background: var(--surface-alt); } .chart-collapsible .chart-row { margin: 0; padding: 0 1rem 1rem; border-top: 1px solid var(--surface-border); padding-top: 1rem; } .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; } .chart-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-top: 3px solid var(--accent); border-radius: 6px; padding: 1rem 1.2rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .chart-card h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--heading-text); } .chart-card canvas { max-height: 260px; } /* ---------- Resizable columns (Excel-style drag handles) ---------- */ #dataTable, #deletedTable { table-layout: fixed; } #dataTable th, #dataTable td, #deletedTable th, #deletedTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #dataTable th, #deletedTable th { position: relative; } .col-resize-handle { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; z-index: 5; } .col-resize-handle:hover { background: rgba(255,255,255,0.35); } body.col-resizing { cursor: col-resize; user-select: none; } body.col-resizing .col-resize-handle { background: rgba(255,255,255,0.5); } /* Let the main data table (and its header row) use the full page width instead of the 800px cap that suits the narrower admin tables. (Compound class selectors so this reliably wins over .table-header/.table-scroll below regardless of source order.) */ .table-header.table-header-full, .table-scroll.table-scroll-full { max-width: none; } .btn-edit, .btn-delete { display: inline-block; padding: 5px 12px; font-size: 0.85rem; color: #fff; border: none; border-radius: 4px; text-decoration: none; cursor: pointer; } .btn-edit { background: var(--link); } .btn-edit:hover { background: var(--link-hover); } .btn-delete { background: #a83232; } .btn-delete:hover { background: #832626; } .delete-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--surface-border); } .delete-form .btn-delete { padding: 8px 16px; font-size: 0.95rem; } .table-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 800px; margin-bottom: 0.75rem; } .table-header h2 { margin: 0; } .header-actions { display: flex; align-items: center; gap: 10px; } .btn-add { display: inline-block; padding: 8px 14px; background: #1e7e34; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem; white-space: nowrap; } .btn-add:hover { background: #17652a; } #searchBox { padding: 8px 12px; font-size: 0.95rem; border: 1px solid var(--input-border); border-radius: 4px; width: 240px; max-width: 100%; background: var(--surface-bg); color: var(--page-text); } #searchBox:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px var(--link-focus-ring); } .flash-success { max-width: 800px; margin-bottom: 1rem; padding: 10px 14px; background: #e6f6ec; border: 1px solid #b7e4c7; color: #1e7e34; border-radius: 4px; } .flash-info { max-width: 800px; margin-bottom: 1rem; padding: 10px 14px; background: var(--link-tint); border: 1px solid var(--link-on-dark); color: var(--link-hover); border-radius: 4px; } /* Live record-count/totals bar above a filterable table -- updated by JS (table-interactions.js) as filters/search narrow what's visible. */ .table-status-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding: 10px 14px; margin-bottom: 14px; background: var(--link-tint); border: 1px solid var(--link-on-dark); border-radius: 4px; font-size: 0.9rem; } .table-status-bar .stat-label { color: var(--text-muted); margin-right: 4px; } .table-status-bar .stat-value { font-weight: 600; color: var(--heading-text); font-variant-numeric: tabular-nums; } /* ---------- Forms (add/edit/login) ---------- */ .form-card { max-width: 480px; } .field { margin-bottom: 1rem; } label { display: block; margin-bottom: 4px; font-weight: bold; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 4px; font-size: 0.95rem; font-family: inherit; background: var(--surface-bg); color: var(--page-text); } textarea { resize: vertical; } .phase-code-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .phase-code-toolbar select { width: auto; padding: 6px 8px; } .phase-code-toolbar button { padding: 6px 12px; font-size: 0.85rem; } /* Generic scrollable checkbox list box (phase codes on job_form.php, jobs on user_form.php) */ .checklist-box { max-height: 220px; overflow-y: auto; border: 1px solid var(--surface-border); border-radius: 4px; padding: 10px 12px; background: var(--surface-alt); } .readonly-field { padding: 8px 10px; background: var(--surface-alt); border: 1px solid var(--surface-border); border-radius: 4px; color: var(--text-muted); } .actions { margin-top: 1.5rem; display: flex; gap: 10px; } .btn-save { padding: 8px 16px; background: var(--link); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95rem; } .btn-save:hover { background: var(--link-hover); } .btn-cancel { padding: 8px 16px; background: var(--surface-alt); color: var(--page-text); text-decoration: none; border-radius: 4px; font-size: 0.95rem; } /* Export Excel/PDF buttons -- distinct from the neutral .btn-cancel look they otherwise share (a plain Cancel action), and forced onto one line so "Export Excel"/"Export PDF" don't wrap into two short, hard-to-read lines inside their own button. */ .export-link { background: var(--accent); color: #fff; white-space: nowrap; } .export-link:hover { background: color-mix(in srgb, var(--accent) 80%, black); } .errors { margin-bottom: 1rem; padding: 10px 14px; background: #fdecea; border: 1px solid #f5c2c0; color: #a83232; border-radius: 4px; max-width: 480px; } .errors ul { margin: 0; padding-left: 1.2rem; } .field-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } /* ---------- Add PO: quote upload widget ---------- */ .quote-upload-box { max-width: 480px; margin-bottom: 1.5rem; padding: 12px 14px; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-bg); } .quote-upload-box .field-hint { margin: 4px 0 10px; } .quote-upload-box input[type="file"] { display: block; margin-bottom: 8px; } .quote-upload-banner { margin-top: 10px; padding: 8px 12px; border-radius: 4px; font-size: 0.85rem; background: #e9f6ec; border: 1px solid #bfe4c8; color: #2c6b3a; } .quote-upload-banner.has-warnings { background: #fff6e0; border-color: #f0d888; color: #8a6a10; } .quote-upload-banner ul { margin: 4px 0 0; padding-left: 1.1rem; } /* ---------- Drag-and-drop file upload zones (Add PO quote, Edit PO documents) ---------- */ .drop-zone { border: 2px dashed var(--input-border); border-radius: 6px; padding: 10px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .drop-zone-active { background: var(--link-tint, #eef4fb); border-color: var(--link, #0056b3); } .drop-zone-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 6px; } /* ---------- Add/Edit PO: wider page + two-column field layout ---------- */ /* Scoped to add.php/edit.php only (via the .add-page/.edit-page wrapper) -- other forms (login, My Account, etc.) keep the narrower single-column .form-card width, which still suits a short field list better. */ .add-page .form-card, .edit-page .form-card { max-width: 1100px; } .field-grid { display: grid; grid-template-columns: 1fr; gap: 0 24px; } @media (min-width: 700px) { .field-grid { grid-template-columns: 1fr 1fr; } } .field-grid .field-full { grid-column: 1 / -1; } /* Document upload sub-form: proper spacing between label/control pairs (previously bare