/* ============================================================================ ATLAS FOUNDATIONS — UI SKIN + DARK MODE ---------------------------------------------------------------------------- This file is a SKIN LAYER. It loads AFTER style.css and only overrides appearance — colours, radii, shadows, type. It never changes layout structure, and it never introduces or removes a class name, so no JS selector can break. TO ROLL BACK TO THE OLD LOOK: delete the line in index.html. Everything reverts to style.css exactly as before. Nothing else to undo. DARK MODE: app.js sets or from the ☾ / ☀ button in the topbar. The choice is saved per device in localStorage; before a choice is made it follows the device setting. Dark applies to the WHOLE app, admin screens included. ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS Brand navy and orange are untouched. These are the surface tokens the skin paints with. ------------------------------------------------------------------------ */ :root { --sf-r-lg: 20px; /* cards, sheets */ --sf-r: 16px; /* tiles, list rows */ --sf-r-sm: 12px; /* buttons, inputs, chips */ --sf-r-xs: 10px; --sf-shadow: 0 1px 6px rgba(26, 35, 50, 0.07); --sf-shadow-md: 0 2px 14px rgba(26, 35, 50, 0.09); --sf-shadow-lg: 0 10px 34px rgba(26, 35, 50, 0.16); --sf-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI entrances */ --sf-duration-press: 120ms; /* press/hover feedback: transform, color, shadow */ /* Surfaces that flip between skins. Day values here; night overrides below. */ --sf-bg: #F4F5F8; --sf-card: #FFFFFF; --sf-fill: #EEF0F4; /* quiet fill: avatars, inactive segments */ --sf-fill-2: #F7F8FA; --sf-line: #E7E9ED; --sf-ink: #1A2332; --sf-ink-soft: #78808D; --sf-on-accent: #FFFFFF; --sf-lock: #ECEEF2; /* Accent stays your orange in both skins. */ --sf-accent: var(--orange); } html, body { background: var(--sf-bg); } body { letter-spacing: -0.1px; } /* --------------------------------------------------------------------------- 2. NIGHT SKIN Scoped to the foreman flow. Re-declaring the ORIGINAL tokens (--white, --page-bg, --ink…) means every existing rule in style.css inherits the dark surface for free, which keeps this file small and predictable. ------------------------------------------------------------------------ */ html[data-theme="dark"] { /* skin tokens */ --sf-bg: #111823; --sf-card: #1A2332; --sf-fill: #26313F; --sf-fill-2: #1E2836; --sf-line: #263041; --sf-ink: #EDEFF3; --sf-ink-soft: #8C96A6; --sf-on-accent: #111823; --sf-lock: #1B232F; /* original style.css tokens, re-pointed so untouched rules follow along */ --white: #1A2332; --page-bg: #111823; --cream: #1A2332; --input-bg: #26313F; --ink: #EDEFF3; --ink-soft: #8C96A6; --line: #263041; --navy: #EDEFF3; /* navy-on-white flips to light-on-navy */ --navy-light: #C3CAD5; --shadow: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.45); } html[data-theme="dark"], html[data-theme="dark"] body { background: #111823; color: #EDEFF3; } html[data-theme="dark"] .screen { background: var(--sf-bg); color: var(--sf-ink); } /* --------------------------------------------------------------------------- 3. TOPBAR ------------------------------------------------------------------------ */ /* The base topbar is navy with white text. This skin makes it a light surface, so every white-text rule inside it has to be re-pointed or the text goes invisible. That's what the block below is doing. */ .topbar { background: var(--sf-card); color: var(--sf-ink); border-bottom: 1px solid var(--sf-line); box-shadow: none; padding-top: max(40px, calc(14px + env(safe-area-inset-top))); padding-right: 16px; padding-bottom: 13px; padding-left: 16px; } .topbar h1 { color: var(--sf-ink); font-size: 19px; font-weight: 800; letter-spacing: -0.4px; } .topbar .icon-btn { color: var(--sf-ink); background: var(--sf-fill); } .topbar-title { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; color: var(--sf-ink); } .topbar-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--sf-ink-soft); text-transform: none; } .topbar-logo { border-radius: 8px; } /* The shift chip — the one badge that tells you which skin you're in. app.js writes its text; it stays hidden until then. */ /* Theme toggle. The glyph shows what you'd switch TO, set by app.js. */ .theme-toggle { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 16px; line-height: 1; border: 0; border-radius: var(--sf-r-sm); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; padding: 0; transition: background var(--sf-duration-press), transform var(--sf-duration-press); } .theme-toggle:hover { background: var(--sf-line); } .theme-toggle:active { transform: scale(0.94); } /* The hazard stripe reads as decoration in this direction, and it fights the dark theme. (Chanel's rule: take one thing off.) */ .hazard-stripe-bar { display: none; } /* --------------------------------------------------------------------------- 4. TYPE SCALE — bigger, tighter, more confident ------------------------------------------------------------------------ */ .section-label { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; text-transform: none; color: var(--sf-ink); margin-bottom: 4px; } .empty-hint { color: var(--sf-ink-soft); } .content { padding: 18px 16px 28px; } /* --------------------------------------------------------------------------- 5. SEGMENTED CONTROLS (Time In / Time Out, shift, sub-tabs) ------------------------------------------------------------------------ */ .type-toggle, .shift-toggle, .stock-condition-toggle { display: flex; gap: 8px; background: none; padding: 0; border: 0; margin-bottom: 18px; } .type-toggle-btn, .shift-btn, .stock-cond-btn { flex: 1; border: 0; border-radius: var(--sf-r-sm); padding: 13px 8px; font-family: inherit; font-weight: 800; font-size: 14.5px; color: var(--sf-ink-soft); background: var(--sf-card); box-shadow: var(--sf-shadow); cursor: pointer; transition: background var(--sf-duration-press), color var(--sf-duration-press); } .type-toggle-btn.active, .shift-btn.active, .stock-cond-btn.active { background: var(--navy); color: #FFFFFF; box-shadow: none; } html[data-theme="dark"] .type-toggle-btn, html[data-theme="dark"] .shift-btn, html[data-theme="dark"] .stock-cond-btn { background: var(--sf-fill-2); box-shadow: none; } /* At night the active segment is the only lit thing on screen. */ html[data-theme="dark"] .type-toggle-btn.active, html[data-theme="dark"] .shift-btn.active, html[data-theme="dark"] .stock-cond-btn.active { background: var(--sf-accent); color: var(--sf-on-accent); } /* --------------------------------------------------------------------------- 6. WORKER LIST — the main screen Two-up tiles become full-width rows: bigger tap target, room for the initials avatar and a status line under the name. ------------------------------------------------------------------------ */ .worker-grid { grid-template-columns: 1fr; gap: 9px; } .worker-btn { background: var(--sf-card); border: 1px solid transparent; border-radius: var(--sf-r); padding: 12px 14px; min-height: 64px; box-shadow: var(--sf-shadow); color: var(--sf-ink); transition: transform var(--sf-duration-press), box-shadow var(--sf-duration-press); } html[data-theme="dark"] .worker-btn { border-color: var(--sf-line); box-shadow: none; } .worker-btn:active { background: var(--sf-card); border-color: var(--sf-accent); transform: scale(0.985); } .worker-btn-inner { gap: 12px; } /* Initials avatar (markup added by app.js) */ .worker-av { width: 38px; height: 38px; flex: none; border-radius: var(--sf-r-sm); display: grid; place-items: center; font-size: 13.5px; font-weight: 800; letter-spacing: 0.2px; background: var(--sf-fill); color: var(--sf-ink); } /* Orange avatar = this worker is the one the current action applies to (open shift when timing out, not yet logged when timing in). */ .worker-btn.due .worker-av { background: var(--sf-accent); color: var(--sf-on-accent); } .worker-text { display: flex; flex-direction: column; min-width: 0; } .worker-name { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .worker-meta { font-size: 11.5px; font-weight: 600; color: var(--sf-ink-soft); margin-top: 2px; } .worker-chevron { margin-left: auto; font-size: 18px; line-height: 1; color: var(--sf-ink-soft); opacity: 0.5; } .worker-btn.locked { background: var(--sf-lock); border-color: transparent; color: var(--sf-ink-soft); box-shadow: none; opacity: 0.85; } .worker-btn.locked:active { background: var(--sf-lock); border-color: transparent; transform: none; } .worker-btn.locked .worker-av { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sf-line); color: var(--sf-ink-soft); } .worker-btn.locked .worker-name { color: var(--sf-ink-soft); } .worker-lock-icon { margin-left: auto; font-size: 14px; opacity: 0.5; } /* --------------------------------------------------------------------------- 7. RECENT STRIP ------------------------------------------------------------------------ */ .recent-strip { border-top: 1px solid var(--sf-line); background: none; padding-top: 16px; margin-top: 20px; } .recent-strip-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 800; color: var(--sf-ink-soft); } .recent-chip { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 999px; padding: 8px 13px; font-size: 12px; font-weight: 600; color: var(--sf-ink-soft); box-shadow: none; } .recent-chip b { color: var(--sf-ink); font-weight: 800; } /* --------------------------------------------------------------------------- 8. MENU TILES ------------------------------------------------------------------------ */ .menu-tile { background: var(--sf-card); border: 1px solid transparent; border-radius: var(--sf-r); box-shadow: var(--sf-shadow); padding: 18px 16px; } html[data-theme="dark"] .menu-tile { border-color: var(--sf-line); box-shadow: none; } .menu-tile:active { transform: scale(0.985); } .menu-tile-icon { border-radius: var(--sf-r-sm); background: var(--sf-fill); } .menu-tile-label { font-weight: 800; letter-spacing: -0.2px; color: var(--sf-ink); } .menu-tile-sub { color: var(--sf-ink-soft); } .menu-tile-emergency .menu-tile-icon { background: rgba(201, 64, 43, 0.12); } /* --------------------------------------------------------------------------- 9. CARDS, CONFIRM SHEET, LOGIN ------------------------------------------------------------------------ */ .confirm-card, .confirm-list-card, .login-card, .stock-add-card, .permits-upload-card, .my-request-card, .sajja-transfer-card, .modal-card { background: var(--sf-card); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-md); border: 1px solid transparent; } html[data-theme="dark"] .confirm-card, html[data-theme="dark"] .confirm-list-card, html[data-theme="dark"] .my-request-card, html[data-theme="dark"] .sajja-transfer-card { border-color: var(--sf-line); box-shadow: none; } .confirm-row { border-bottom: 1px solid var(--sf-line); } .confirm-row:last-child { border-bottom: 0; } .confirm-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--sf-ink-soft); } .confirm-value { font-weight: 800; letter-spacing: -0.2px; color: var(--sf-ink); } .login-card { border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-lg); } .brand-app-name { letter-spacing: -0.5px; font-weight: 800; } .brand-icon-box { border-radius: var(--sf-r-sm); } /* --------------------------------------------------------------------------- 10. INPUTS ------------------------------------------------------------------------ */ input, select, textarea, .filter-input, .confirm-select, .time-edit, .employment-select { border-radius: var(--sf-r-sm) !important; border: 1px solid var(--sf-line) !important; background: var(--sf-fill-2) !important; color: var(--sf-ink) !important; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sf-accent) !important; box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.16); } .field label, .filter-date-label { font-weight: 700; color: var(--sf-ink-soft); } /* --------------------------------------------------------------------------- 11. BUTTONS ------------------------------------------------------------------------ */ .btn { border-radius: var(--sf-r-sm); font-weight: 800; letter-spacing: -0.1px; transition: transform var(--sf-duration-press), filter var(--sf-duration-press); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--sf-accent); color: #FFFFFF; box-shadow: none; } .btn-primary:active { filter: brightness(0.94); } .btn-secondary { background: var(--sf-fill); color: var(--sf-ink); border: 0; } .btn-large { border-radius: var(--sf-r); } .icon-btn, .logout-btn, .btn-secondary-topbar { border-radius: var(--sf-r-sm); background: var(--sf-fill); border: 0; color: var(--sf-ink); font-weight: 800; } /* These are navy-background/white-text in the base sheet. At night --navy is re-pointed to a light value, which would put white text on a light chip, so they get an explicit pairing instead. */ .permit-view-btn, .edit-material-btn, .edit-permissions-btn, .unlogged-toggle-btn { background: var(--sf-fill); color: var(--sf-ink); border: 0; border-radius: var(--sf-r-xs); font-weight: 800; } .role-pill-admin { background: var(--navy-light); color: var(--sf-card); } html[data-theme="dark"] .role-pill-admin { background: var(--sf-fill); color: var(--sf-ink); } /* "Partially delivered" pills render on the foreman's own requests screen, which does get the night skin. The base rule pairs a hardcoded light chip with var(--navy) text, so at night it would be light-on-light. */ .status-pill.partial { background: var(--sf-fill); color: var(--sf-ink); } /* --------------------------------------------------------------------------- 12. ADMIN — tabs, tables, lists (light skin only) ------------------------------------------------------------------------ */ .admin-tabs, .sub-tabs { gap: 6px; border-bottom: 1px solid var(--sf-line); padding-bottom: 0; } .admin-tab, .sub-tab { border-radius: var(--sf-r-sm) var(--sf-r-sm) 0 0; font-weight: 800; font-size: 13.5px; color: var(--sf-ink-soft); background: none; border: 0; padding: 11px 14px; position: relative; } .admin-tab.active, .sub-tab.active { color: var(--sf-ink); background: var(--sf-card); } .admin-tab.active::after, .sub-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--sf-accent); border-radius: 2px; } .filter-row { background: var(--sf-card); border-radius: var(--sf-r); padding: 12px; box-shadow: var(--sf-shadow); margin-bottom: 14px; align-items: center; } /* The base sheet has #logs-export-btn at width:100% from when it was the only export button — that's what left a full-width bar and a stranded second button. The exports now sit in their own group, sized to their text and pushed to the right end of the filter row. */ .filter-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } .filter-row #logs-export-btn, .filter-row #timesheet-export-btn, .filter-actions .btn { width: auto; margin-top: 0; flex: none; padding: 10px 16px; font-size: 14px; } /* On narrow screens the group goes full width and splits the space evenly, rather than one button hogging the row. */ @media (max-width: 720px) { .filter-actions { margin-left: 0; width: 100%; } .filter-actions .btn { flex: 1; } } .table-wrap { border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-md); border: 1px solid var(--sf-line); } .data-table thead th { background: #FAFBFC; color: var(--sf-ink-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; border-bottom: 1px solid var(--sf-line); padding: 11px 14px; } .data-table td { padding: 12px 14px; border-bottom: 1px solid #F1F3F5; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover { background: #FAFBFC; } .badge, .status-pill, .role-pill, .tab-badge, .stock-low-badge, .auto-timeout-tag, .edited-tag, .completed-tag, .emergency-tag, .disabled-tag { border-radius: 999px; font-weight: 800; letter-spacing: 0.1px; text-transform: none; } .badge-drop { background: #E6F2EB; color: var(--green); } .badge-pick { background: #FFF0EA; color: var(--orange-dark); } .edited-tag { background: #F1F3F6; color: var(--ink-soft); } .list-item { background: var(--sf-card); border-radius: var(--sf-r); border: 1px solid transparent; box-shadow: var(--sf-shadow); padding: 13px 15px; } .list-item-name { font-weight: 800; letter-spacing: -0.2px; } .list-item-sub { color: var(--sf-ink-soft); } /* --------------------------------------------------------------------------- 13. SUCCESS, TOAST, MODAL ------------------------------------------------------------------------ */ .success-mark { border-radius: 999px; } .success-detail { color: var(--sf-ink-soft); } .toast { border-radius: var(--sf-r-sm); font-weight: 700; box-shadow: var(--sf-shadow-lg); transition: transform 200ms var(--sf-ease-out), opacity 200ms var(--sf-ease-out); transform: translateY(0); opacity: 1; } .toast.is-hiding { transform: translateY(12px); opacity: 0; } @starting-style { .toast:not([hidden]):not(.is-hiding) { transform: translateY(12px); opacity: 0; } } .modal-card { border-radius: var(--sf-r-lg); } .modal-overlay { backdrop-filter: blur(2px); } /* --------------------------------------------------------------------------- 14. QUALITY FLOOR ------------------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .btn:active, .worker-btn:active, .menu-tile:active { transform: none; } } /* Wider phones / tablets can still take two columns of workers. */ @media (min-width: 620px) { .worker-grid { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------------- 15. DARK MODE — hardcoded surfaces from style.css ---------------------------------------------------------------------------- Everything above themes itself through the variables. These rules exist because the base sheet paints some elements with literal hex values, which variables can't reach. Each pairs a dark chip with legible text, keeping the original colour's MEANING (green = good, red = problem, amber = waiting). ------------------------------------------------------------------------ */ /* Status + tag chips ------------------------------------------------------ */ html[data-theme="dark"] .badge-drop, html[data-theme="dark"] .status-pill.completed, html[data-theme="dark"] .enable-btn, html[data-theme="dark"] .btn-sajja-approve { background: rgba(45, 125, 79, 0.20); color: #6FD79B; } html[data-theme="dark"] .badge-pick, html[data-theme="dark"] .auto-timeout-tag, html[data-theme="dark"] .logged-at-flagged, html[data-theme="dark"] .status-pill.rejected, html[data-theme="dark"] .disable-btn, html[data-theme="dark"] .disabled-tag, html[data-theme="dark"] .permit-delete-btn, html[data-theme="dark"] .btn-sajja-reject, html[data-theme="dark"] .form-error, html[data-theme="dark"] .unlogged-worker-item { background: rgba(201, 64, 43, 0.20); color: #FF8A70; } html[data-theme="dark"] .status-pill.pending { background: rgba(180, 83, 9, 0.24); color: #F0B95C; } html[data-theme="dark"] .status-pill.partial, html[data-theme="dark"] .edited-tag, html[data-theme="dark"] .row-edit-btn, html[data-theme="dark"] .edit-material-btn, html[data-theme="dark"] .edit-permissions-btn, html[data-theme="dark"] .btn-sajja-partial, html[data-theme="dark"] .manager-permission-pill, html[data-theme="dark"] .role-pill-user, html[data-theme="dark"] #logcard-table-foot td { background: var(--sf-fill); color: var(--sf-ink); } /* Emergency keeps its alarm colour, darkened so it doesn't glare at night. */ html[data-theme="dark"] .menu-tile-emergency, html[data-theme="dark"] .emergency-notice, html[data-theme="dark"] .emergency-tag { background: rgba(127, 29, 29, 0.28); color: #FF9B85; } /* Selected / pressed states ------------------------------------------------ */ html[data-theme="dark"] .worker-btn:active { background: rgba(255, 107, 53, 0.14); } html[data-theme="dark"] .worker-btn.locked, html[data-theme="dark"] .worker-btn.locked:active { background: var(--sf-lock); } html[data-theme="dark"] .shift-btn.active, html[data-theme="dark"] .stock-cond-btn.active { background: var(--sf-accent); color: var(--sf-on-accent); } /* Tables ------------------------------------------------------------------- */ html[data-theme="dark"] .data-table th, html[data-theme="dark"] .data-table thead th { background: var(--sf-fill-2); color: var(--sf-ink-soft); border-bottom-color: var(--sf-line); } html[data-theme="dark"] .data-table td { border-bottom-color: var(--sf-line); } html[data-theme="dark"] .data-table tbody tr:hover { background: var(--sf-fill-2); } html[data-theme="dark"] .table-wrap { border-color: var(--sf-line); } html[data-theme="dark"] .list-item { border-color: var(--sf-line); box-shadow: none; } /* Toast sits outside .screen, so it needs its own pairing. */ html[data-theme="dark"] .toast { background: var(--sf-fill); color: var(--sf-ink); } /* Admin tabs sit on a navy bar in the base sheet. */ html[data-theme="dark"] .admin-tabs, html[data-theme="dark"] .sub-tabs { background: var(--sf-card); border-bottom-color: var(--sf-line); } html[data-theme="dark"] .admin-tab.active, html[data-theme="dark"] .sub-tab.active { background: var(--sf-fill-2); color: var(--sf-ink); } /* Loading + login sit on navy already; keep them dark-native. */ html[data-theme="dark"] #screen-loading { background: #0C121B; } html[data-theme="dark"] .loading-logo-card { background: var(--sf-card); } html[data-theme="dark"] .brand-icon-box { background: var(--sf-fill); } /* Date pickers and dropdown arrows are drawn by the browser in its own colour scheme — this is the one line that makes them follow the theme. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* --------------------------------------------------------------------------- 16. DARK MODE — literal `white` surfaces ---------------------------------------------------------------------------- These four rules in style.css use the keyword `white` rather than var(--white), so re-pointing the token can't reach them. Without these the table body stays a white sheet while the text above it turns light — which is exactly the light-on-light problem in the admin logs table. ------------------------------------------------------------------------ */ html[data-theme="dark"] .table-wrap { background: var(--sf-card); color: var(--sf-ink); } html[data-theme="dark"] .data-table { color: var(--sf-ink); } html[data-theme="dark"] .data-table tbody tr { background: var(--sf-card); } html[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: var(--sf-fill-2); } html[data-theme="dark"] .data-table tbody tr:hover { background: var(--sf-fill); } html[data-theme="dark"] .list-item { background: var(--sf-card); color: var(--sf-ink); } html[data-theme="dark"] .inline-add-form input, html[data-theme="dark"] .inline-add-form select { background: var(--sf-fill-2); color: var(--sf-ink); border-color: var(--sf-line); } /* --------------------------------------------------------------------------- 17. STOCK SHEET UPLOAD Themed with the same tokens as everything else, so it follows dark mode. ------------------------------------------------------------------------ */ /* Breathing room between the New/Used toggle and the upload button. */ #stock-upload-open { margin-bottom: 16px; } .su-modal { display: flex; align-items: center; justify-content: center; padding: 16px; } .su-modal[hidden] { display: none; } .su-card { background: var(--sf-card); color: var(--sf-ink); /* The base .modal-card caps at 360px, which crushes this table into a column. Both properties are needed to beat it. */ width: min(1100px, 100%); max-width: min(1100px, 100%); max-height: 92vh; overflow: auto; padding: 22px; } .su-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .su-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; } .su-head .icon-btn { margin-left: auto; } .su-hint { font-size: 13.5px; color: var(--sf-ink-soft); margin: 0 0 14px; line-height: 1.5; } .su-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .su-field > span { font-size: 12.5px; font-weight: 700; color: var(--sf-ink-soft); } .su-field-inline { margin-bottom: 0; min-width: 240px; } .su-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .su-review-head { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; } .su-file { font-weight: 800; letter-spacing: -0.2px; } .su-summary { font-size: 13px; color: var(--sf-ink-soft); margin-top: 3px; } .su-warn { color: var(--orange-dark); font-weight: 700; } html[data-theme="dark"] .su-warn { color: #FF9166; } .su-table-wrap { overflow: auto; max-height: 46vh; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-card); } .su-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } /* Fixed widths stop the browser giving the name column two words per line while the numeric columns sit half empty. */ .su-table col.su-c-check { width: 34px; } .su-table col.su-c-sheet { width: 26%; } .su-table col.su-c-match { width: 32%; } .su-table col.su-c-qty { width: 96px; } .su-table col.su-c-num { width: 72px; } .su-table th { position: sticky; top: 0; z-index: 1; background: var(--sf-fill-2); color: var(--sf-ink-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--sf-line); } .su-table td { padding: 8px 10px; border-bottom: 1px solid var(--sf-line); vertical-align: top; } .su-table .filter-input { padding: 7px 9px; font-size: 13px; width: 100%; } .su-table .su-qty { max-width: 100px; } .su-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .su-up { color: var(--green); font-weight: 700; } .su-down { color: var(--red); font-weight: 700; } .su-sheet-name { font-weight: 700; overflow-wrap: anywhere; } .su-sheet-code { font-size: 11px; color: var(--sf-ink-soft); margin-top: 2px; } .su-confidence { margin-top: 5px; } .su-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .su-badge-sure { background: rgba(45,125,79,.16); color: var(--green); } .su-badge-ok { background: rgba(255,107,53,.16); color: var(--orange-dark); } .su-badge-weak { background: rgba(201,64,43,.16); color: var(--red); } .su-badge-none { background: rgba(201,64,43,.20); color: var(--red); } html[data-theme="dark"] .su-badge-sure { color: #6FD79B; } html[data-theme="dark"] .su-badge-ok { color: #FF9166; } html[data-theme="dark"] .su-badge-weak, html[data-theme="dark"] .su-badge-none { color: #FF8A70; } .su-row-unmatched { background: rgba(201,64,43,.05); } .su-row-skipped { opacity: .45; } .su-done { font-size: 40px; text-align: center; color: var(--green); margin: 10px 0; } @media (max-width: 720px) { .su-card { padding: 16px; } .su-table-wrap { max-height: 50vh; } } /* --------------------------------------------------------------------------- 18. LOG RESULT BANNERS — unmissable green (saved) / red (failed) So a foreman on patchy site wifi instantly sees whether a log actually sent, instead of a thin text line that's easy to miss. ------------------------------------------------------------------------ */ .result-banner { width: 100%; border-radius: var(--sf-r-lg); padding: 30px 22px; text-align: center; margin-bottom: 18px; color: #fff; } .result-success { background: var(--green); box-shadow: 0 8px 26px rgba(45, 125, 79, 0.35); } .result-failure { background: var(--red); box-shadow: 0 8px 26px rgba(201, 64, 43, 0.35); } .result-banner h1 { color: #fff; margin: 8px 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; } .result-banner .success-detail, .result-banner .failure-detail { color: rgba(255,255,255,0.95); font-size: 15px; font-weight: 700; margin: 0; } .result-banner .failure-reason { color: rgba(255,255,255,0.9); font-size: 13.5px; margin: 12px 0 0; line-height: 1.5; } /* The check / cross mark, sitting in a soft circle on the banner. */ .result-banner .success-mark, .result-banner .failure-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 999px; background: rgba(255,255,255,0.22); display: grid; place-items: center; font-size: 34px; font-weight: 800; line-height: 1; color: #fff; } /* The base sheet centres the old success mark green; inside the banner it must be white, so override any inherited colour. */ #screen-success .success-mark { background: rgba(255,255,255,0.22); color: #fff; }