/* ValveTrac AG Grid demo — sidebar shell with dark mode + collapsible sidebar. Light/dark themes are driven by [data-theme] on . Sidebar collapse is driven by html.sidebar-collapsed. */ @import url('https://fonts.googleapis.com/css?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* Brand */ --puffer-blue: #004b8d; --puffer-blue-dark: #003a6f; --puffer-blue-light: #1a6bb0; --puffer-accent: #f0ad4e; --puffer-gray: #939598; /* Shell dimensions */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; /* Light theme tokens */ --bg: #f7f9fc; --bg-elevated: #ffffff; --text: #2f3b4a; --text-muted: #6b7686; --text-strong: #1a232f; --border-soft: #e6eaef; --border-hard: #cfd6df; --hover-bg: #eef2f7; --topbar-bg: #ffffff; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-elevated: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --input-bg: #ffffff; --input-border: #e6eaef; /* Sidebar (always Puffer-blue for brand identity) */ --sb-bg: var(--puffer-blue); --sb-text: #cfe0f0; --sb-text-strong: #ffffff; --sb-divider: rgba(255, 255, 255, 0.08); --sb-hover: rgba(255, 255, 255, 0.06); --sb-active: rgba(255, 255, 255, 0.14); } [data-theme="dark"] { --bg: #0f141c; --bg-elevated: #181f2a; --text: #d8dee6; --text-muted: #8e98a8; --text-strong: #ffffff; --border-soft: #232b39; --border-hard: #2c3548; --hover-bg: #1f2734; --topbar-bg: #181f2a; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --input-bg: #1d2531; --input-border: #2c3548; --sb-bg: #0a2c54; /* slightly deeper puffer-blue */ --sb-text: #b7cee4; --sb-divider: rgba(255, 255, 255, 0.06); --sb-hover: rgba(255, 255, 255, 0.05); --sb-active: rgba(255, 255, 255, 0.12); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, .btn-link { color: var(--puffer-blue); text-decoration: none; } a:hover, .btn-link:hover { color: var(--puffer-blue-dark); } [data-theme="dark"] a, [data-theme="dark"] .btn-link { color: #6fb1ff; } [data-theme="dark"] a:hover, [data-theme="dark"] .btn-link:hover { color: #99c8ff; } /* =================================================================== App shell =================================================================== */ .app-shell { min-height: 100vh; } /* ---------- Non-production environment banner ---------- */ .env-banner { position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 1100; /* above the fixed sidebar (1040) and sticky topbar (1030) */ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: #3a2e00; background: repeating-linear-gradient(45deg, #ffd86b, #ffd86b 14px, #ffc107 14px, #ffc107 28px); border-bottom: 1px solid #d39e00; } .env-banner a { color: inherit; text-decoration: underline; font-weight: 800; } .env-banner a:hover { text-decoration: none; } /* Keep the banner text on ONE line within the fixed 30px band; long text ellipsizes rather than overflowing the band on narrow screens. */ .env-banner > span, .env-banner a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .env-banner-short { display: none; } /* full sentence by default; compact label swaps in on mobile */ /* When the banner is shown, push the fixed sidebar, sticky topbar and content down by its height. */ body.has-env-banner .sidebar { top: 30px; } body.has-env-banner .topbar { top: 30px; } body.has-env-banner .app-main { padding-top: 30px; } [data-theme="dark"] .env-banner { color: #ffe9b0; background: repeating-linear-gradient(45deg, #4a3a0f, #4a3a0f 14px, #5b4615 14px, #5b4615 28px); border-bottom-color: #6b5418; } /* ---------- Sidebar ---------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background-color: var(--sb-bg); color: var(--sb-text); display: flex; flex-direction: column; z-index: 1040; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.04); transition: transform 0.22s ease, width 0.2s ease; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--sb-divider); height: var(--topbar-height); overflow: hidden; } .sidebar-brand img.brand-mark { height: 28px; flex: 0 0 auto; } .sidebar-brand .brand-name { color: var(--sb-text-strong); font-weight: 600; font-size: 17px; letter-spacing: 0.4px; white-space: nowrap; flex: 1; } .sidebar-collapse-toggle { margin-left: auto; background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background-color 0.12s; } .sidebar-collapse-toggle:hover { background: rgba(255, 255, 255, 0.12); color: white; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; /* Thin, translucent scrollbar that blends with the blue sidebar (Firefox) */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } /* WebKit/Chromium scrollbar styling for the sidebar nav */ .sidebar-nav::-webkit-scrollbar { width: 8px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.45); } .sidebar-nav-section { color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 14px 6px; white-space: nowrap; overflow: hidden; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 14px; color: var(--sb-text); font-size: 14px; font-weight: 500; border-radius: 6px; margin-bottom: 2px; line-height: 1.2; transition: background-color 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; } .sidebar-nav a i { font-size: 16px; opacity: 0.85; width: 18px; text-align: center; flex: 0 0 18px; } .sidebar-nav a:hover { background-color: var(--sb-hover); color: var(--sb-text-strong); text-decoration: none; } .sidebar-nav a.active { background-color: var(--sb-active); color: var(--sb-text-strong); box-shadow: inset 3px 0 0 var(--puffer-accent); } .sidebar-nav a.active i { opacity: 1; } /* External-link indicator on the right edge of links that leave the app */ .sidebar-nav a .external-icon { margin-left: auto; font-size: 11px !important; opacity: 0.5; width: auto !important; flex: 0 0 auto; } .sidebar-nav a:hover .external-icon { opacity: 0.85; } /* Collapsed sidebar: hide the external-icon too (only show the primary leading icon) */ html.sidebar-collapsed .sidebar-nav a .external-icon { display: none; } .sidebar-footer { padding: 12px 16px; min-height: 44px; /* keep in lockstep with .app-footer so the two bands align */ box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; font-size: 11px; line-height: 20px; /* fixed line box (not font-size dependent) so both footers match */ color: rgba(255, 255, 255, 0.5); border-top: 1px solid var(--sb-divider); overflow: hidden; } .sidebar-footer .demo-switch { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .sidebar-footer .demo-switch > span { color: rgba(255, 255, 255, 0.45); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } .sidebar-footer .demo-switch a { display: block; color: var(--sb-text); font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer .demo-switch a.active { background-color: var(--sb-active); color: var(--sb-text-strong); } .sidebar-footer .demo-switch a:hover { background-color: var(--sb-hover); color: var(--sb-text-strong); text-decoration: none; } /* ---------- Sidebar collapsed (desktop only) ---------- */ html.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); } html.sidebar-collapsed .app-main { margin-left: var(--sidebar-width-collapsed); } html.sidebar-collapsed .sidebar-brand { padding: 14px 0; justify-content: center; } /* Centre the logo mark within the (still flex:1) brand link when collapsed. */ html.sidebar-collapsed .sidebar-brand-link { justify-content: center; gap: 0; flex: 0 1 auto; } html.sidebar-collapsed .sidebar-brand .brand-name, html.sidebar-collapsed .sidebar-collapse-toggle, html.sidebar-collapsed .sidebar-nav-section, html.sidebar-collapsed .sidebar-nav a span, html.sidebar-collapsed .sidebar-footer .demo-switch > span, html.sidebar-collapsed .sidebar-footer .demo-switch a span, html.sidebar-collapsed .sidebar-footer .copyright { display: none; } html.sidebar-collapsed .sidebar-nav a { justify-content: center; padding: 10px 0; } html.sidebar-collapsed .sidebar-nav a i { font-size: 18px; } html.sidebar-collapsed .sidebar-footer .demo-switch a { text-align: center; padding: 6px 0; } html.sidebar-collapsed .sidebar-footer .demo-switch a i { margin: 0 !important; } /* Floating "expand" button shown only when collapsed */ .sidebar-expand-toggle { display: none; background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; padding: 8px; margin: 0 auto 6px; border-radius: 4px; width: 36px; align-items: center; justify-content: center; } .sidebar-expand-toggle:hover { background: rgba(255, 255, 255, 0.12); color: white; } html.sidebar-collapsed .sidebar-expand-toggle { display: flex; } /* ---------- Main column ---------- */ .app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.2s ease; background-color: var(--bg); } /* ---------- Topbar ---------- */ .topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-height); background-color: var(--topbar-bg); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; padding: 0 24px; gap: 14px; } .sidebar-toggle { background: transparent; border: 0; font-size: 22px; color: var(--text); cursor: pointer; padding: 4px 10px; border-radius: 4px; display: none; } .sidebar-toggle:hover { background-color: var(--hover-bg); } .topbar-breadcrumb { color: var(--text-muted); font-size: 13px; } .topbar-breadcrumb a { color: var(--text-muted); } .topbar-breadcrumb a:hover { color: var(--puffer-blue); text-decoration: none; } .topbar-breadcrumb .crumb-current { color: var(--text); font-weight: 500; } .topbar-spacer { flex: 1; } /* Mobile-only Home link in the topbar (a house icon, styled like the other topbar-icon-btn actions). Hidden on desktop where the breadcrumb + always-visible sidebar already give a Home path; shown below 768px where both are gone/buried. Selector combines both classes so it beats .topbar-icon-btn's own display:inline-flex (same specificity, but that rule is defined later and would otherwise win). */ .topbar-home-mobile.topbar-icon-btn { display: none; } .topbar-actions { display: flex; align-items: center; gap: 6px; } /* Puffer logo pinned to the far right of the top bar, after the user menu */ .topbar-logo { height: 26px; width: auto; margin-left: 8px; } /* Swap the Puffer logo to the white version in dark mode (the default is the dark/colour logo). */ .topbar-logo.logo-dark { display: none; } [data-theme="dark"] .topbar-logo.logo-light { display: none; } [data-theme="dark"] .topbar-logo.logo-dark { display: inline; } .topbar-icon-btn { background: transparent; border: 0; width: 36px; height: 36px; border-radius: 6px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; } .topbar-icon-btn:hover { background-color: var(--hover-bg); color: var(--puffer-blue); } [data-theme="dark"] .topbar-icon-btn:hover { color: #6fb1ff; } .topbar-icon-btn i { font-size: 18px; } .user-menu { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; } .user-menu:hover { background-color: var(--hover-bg); } .user-menu .avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--puffer-blue); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .user-menu .user-name { font-size: 13px; color: var(--text); font-weight: 500; } /* ---------- Content ---------- */ .content { padding: 24px 28px 40px; flex: 1; } /* ---------- App footer (all pages) ---------- */ .app-footer { border-top: 1px solid var(--border-soft); padding: 12px 28px; min-height: 44px; /* keep in lockstep with .sidebar-footer so the two bands align */ box-sizing: border-box; background-color: var(--topbar-bg); font-size: 12px; line-height: 20px; /* fixed line box (not font-size dependent) so both footers match */ color: var(--text-muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; } .app-footer-help a { color: var(--puffer-blue); text-decoration: none; } .app-footer-help a:hover { text-decoration: underline; } .app-footer-copy { white-space: nowrap; } @media (max-width: 575.98px) { .app-footer { padding: 12px 16px; flex-direction: column; align-items: flex-start; } } /* ---------- Mobile / drawer ---------- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.42); z-index: 1035; } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; } .sidebar.open { transform: translateX(0); } .app-main { margin-left: 0 !important; } .sidebar-toggle { display: inline-flex; } .sidebar-backdrop.show { display: block; } .content { padding: 18px 16px 32px; } /* Disable collapsed mode on mobile - the sidebar is a full-width drawer here, never a rail. A persisted desktop-collapsed state must not leak into the drawer (it centered the brand and hid the << toggle). Fully revert every collapsed-mode layout rule, not just visibility. */ html.sidebar-collapsed .sidebar { width: var(--sidebar-width) !important; } html.sidebar-collapsed .sidebar-brand, html.sidebar-collapsed .sidebar-nav-section, html.sidebar-collapsed .sidebar-nav a span, html.sidebar-collapsed .sidebar-footer .demo-switch > span, html.sidebar-collapsed .sidebar-footer .demo-switch a span, html.sidebar-collapsed .sidebar-footer .copyright { display: revert !important; } html.sidebar-collapsed .sidebar-brand { padding: 14px 16px; justify-content: revert; } html.sidebar-collapsed .sidebar-brand-link { justify-content: revert; gap: 10px; flex: 1; } html.sidebar-collapsed .sidebar-nav a { justify-content: revert; padding: 9px 14px; } html.sidebar-collapsed .sidebar-expand-toggle { display: none; } html.sidebar-collapsed .sidebar-collapse-toggle { display: inline-flex !important; } } /* =================================================================== Layout variants — Sidebar (default) | Top nav | Launcher Driven by html.layout-{sidebar|top|launcher}. Default = sidebar. =================================================================== */ /* Top-nav row that appears below the topbar in top/launcher mode */ .topbar-nav { display: none; } .topbar-nav { position: sticky; top: var(--topbar-height); z-index: 1029; background-color: var(--topbar-bg); border-bottom: 1px solid var(--border-soft); padding: 0 24px; } .topbar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; } .topbar-nav li { display: inline-block; } .topbar-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--text-muted); font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; text-decoration: none; transition: color 0.12s, border-color 0.12s, background-color 0.12s; } .topbar-nav a i { font-size: 15px; opacity: 0.85; } .topbar-nav a:hover { color: var(--text-strong); background-color: var(--hover-bg); text-decoration: none; } .topbar-nav a.active { color: var(--puffer-blue); border-bottom-color: var(--puffer-blue); } [data-theme="dark"] .topbar-nav a.active { color: #6fb1ff; border-bottom-color: #6fb1ff; } /* Show/hide the chrome based on layout class on */ html.layout-sidebar .topbar-nav { display: none; } html.layout-sidebar .sidebar { display: flex; } html.layout-sidebar .app-main { margin-left: var(--sidebar-width); } html.layout-top .sidebar, html.layout-launcher .sidebar { display: none; } html.layout-top .topbar-nav, html.layout-launcher .topbar-nav { display: block; } html.layout-top .app-main, html.layout-launcher .app-main { margin-left: 0; } html.layout-top .sidebar-toggle, html.layout-launcher .sidebar-toggle { display: none !important; } /* When sidebar is collapsed AND we're in sidebar mode, narrow the content margin. Other layouts ignore the collapsed class (no sidebar to collapse). */ html.layout-sidebar.sidebar-collapsed .app-main { margin-left: var(--sidebar-width-collapsed); } html:not(.layout-sidebar) .sidebar-expand-toggle { display: none !important; } /* Mobile: drawer behavior is sidebar-only. Top/launcher hide the sidebar entirely. */ @media (max-width: 991.98px) { .topbar-nav { padding: 0 12px; } .topbar-nav a { padding: 10px 12px; font-size: 13px; } } /* =================================================================== Repair Tracker (modernized "pizza tracker") =================================================================== */ .tracker-section-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .tracker-section-title { font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0 0 4px; } .tracker-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: 13px; } .tracker-meta i { margin-right: 4px; opacity: 0.8; } .tracker-meta strong { color: var(--text); } .tracker-customer { color: var(--text-muted); } .tracker-config-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; } .tracker-config-select { min-width: 240px; } /* Horizontal stepper */ .stepper { list-style: none; margin: 0; padding: 6px 4px 8px; display: flex; gap: 0; overflow-x: auto; counter-reset: step; } .step { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 4px 4px 0; } /* Connector line: lives on each step :before, drawn from left-half across to center */ .step:not(:first-child)::before { content: ''; position: absolute; top: 24px; /* matches half of 48px circle */ left: -50%; right: 50%; height: 2px; background: var(--border-soft); z-index: 0; transition: background-color 0.25s; } .step-done:not(:first-child)::before, .step-current:not(:first-child)::before { background: var(--puffer-blue); } /* Circle node */ .step-circle { width: 48px; height: 48px; border-radius: 50%; background-color: var(--bg-elevated); border: 2px solid var(--border-soft); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; position: relative; z-index: 1; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } /* State: done — filled with checkmark */ .step-done .step-circle { background-color: var(--puffer-blue); border-color: var(--puffer-blue); color: white; } /* State: current — white fill, puffer-blue ring, pulsing halo */ .step-current .step-circle { background-color: var(--bg-elevated); border-color: var(--puffer-blue); color: var(--puffer-blue); box-shadow: 0 0 0 4px rgba(0, 75, 141, 0.18); animation: stepper-pulse 2.2s ease-in-out infinite; } /* State: pending — outlined gray */ .step-pending .step-circle { background-color: var(--bg-elevated); border-color: var(--border-soft); color: var(--text-muted); opacity: 0.85; } /* Exception (red ring) */ .step-exception .step-circle { border-color: #d9534f; color: #d9534f; box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.18); animation: stepper-pulse-exception 2.2s ease-in-out infinite; } @keyframes stepper-pulse-exception { 0%, 100% { box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(217, 83, 79, 0.06); } } .step-info { margin-top: 10px; } .step-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25; max-width: 120px; } .step-current .step-label { color: var(--puffer-blue); } [data-theme="dark"] .step-current .step-label { color: #6fb1ff; } .step-pending .step-label { color: var(--text-muted); font-weight: 500; } .step-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; } @keyframes stepper-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(0, 75, 141, 0.18); } 50% { box-shadow: 0 0 0 10px rgba(0, 75, 141, 0.04); } } /* ===== Dashboard variant: bigger circles, count badge ===== */ .stepper-counts .step-circle { width: 62px; height: 62px; font-size: 22px; } .stepper-counts .step:not(:first-child)::before { top: 31px; } .stepper-counts .step-circle-button { cursor: pointer; border-style: solid; } .stepper-counts .step-circle-button:hover { transform: translateY(-2px); border-color: var(--puffer-blue); color: var(--puffer-blue); box-shadow: 0 4px 12px rgba(0, 75, 141, 0.12); } .stepper-counts .step.step-selected .step-circle { background-color: var(--puffer-blue); border-color: var(--puffer-blue); color: white; } .step-count { position: absolute; top: -6px; right: -10px; background: var(--puffer-blue); color: white; border: 2px solid var(--bg-elevated); /* white ring separates the blue badge from the blue circle */ border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; min-width: 24px; line-height: 1.4; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* No jobs at this station: keep the circle opaque (same fill as the active circles) so the connector line doesn't show through it. The absent count badge is the only "empty" cue. */ .stepper-counts .step-empty .step-circle { background-color: var(--bg-elevated); opacity: 1; } /* Repair-status cell as a "stoplight" dot + label. */ .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } /* Official marketing stoplight palette (see vt-grid.js stoplightColor for the status -> class map). */ .status-dot-lime { background-color: #87DA87; } /* Received */ .status-dot-green { background-color: #1FB47D; } /* Shipped */ .status-dot-amber { background-color: #F6B017; } /* Advised Cost / Waiting on Parts / Outside Processing */ .status-dot-red { background-color: #ED4747; } /* On Hold / Pretest / Teardown / Inspection / BER / Machining / Assembly / Testing / Final Inspection / Paint / Preparing for Shipment */ .status-dot-gray { background-color: var(--puffer-gray); } /* New / Planned / unknown */ /* "How this scales" info card */ .alert-card { display: flex; gap: 12px; background-color: rgba(0, 75, 141, 0.06); border: 1px solid rgba(0, 75, 141, 0.18); border-radius: 10px; padding: 14px 16px; } .alert-card i { font-size: 20px; color: var(--puffer-blue); margin-top: 2px; } .alert-card p { margin: 4px 0 0; color: var(--text); font-size: 13px; } .alert-card code { background-color: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 3px; font-size: 12px; } [data-theme="dark"] .alert-card { background-color: rgba(111, 177, 255, 0.06); border-color: rgba(111, 177, 255, 0.22); } /* ERP-degradation banner: ONE amber warning banner shown at the top of every page when the ERP (Oracle) is unavailable. Same markup + style everywhere (see _ErpUnavailable partial) so an outage reads consistently. Amber = #F6B017 */ .erp-banner { display: flex; gap: 12px; align-items: flex-start; background-color: rgba(246, 176, 23, 0.12); border: 1px solid rgba(246, 176, 23, 0.45); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; color: var(--text); font-size: 14px; line-height: 1.4; } .erp-banner i { font-size: 20px; color: #C8890B; margin-top: 1px; flex-shrink: 0; } .erp-banner a { color: inherit; text-decoration: underline; font-weight: 600; } [data-theme="dark"] .erp-banner { background-color: rgba(246, 176, 23, 0.10); border-color: rgba(246, 176, 23, 0.40); } [data-theme="dark"] .erp-banner i { color: #F6B017; } [data-theme="dark"] .alert-card i { color: #6fb1ff; } [data-theme="dark"] .alert-card code { background-color: rgba(255, 255, 255, 0.08); } /* ===== Mobile / tablet: switch to vertical timeline ===== */ @media (max-width: 767.98px) { .stepper { flex-direction: column; gap: 0; padding: 8px 4px; } .step { flex: 0 0 auto; flex-direction: row; align-items: center; text-align: left; padding: 6px 0 10px; min-width: 0; gap: 14px; } /* Vertical connector now runs above each step from the previous step's circle */ .step:not(:first-child)::before { top: -10px; left: 23px; right: auto; bottom: auto; width: 2px; height: 16px; } .stepper-counts .step:not(:first-child)::before { left: 30px; } .step-info { margin-top: 0; flex: 1; max-width: none; } .step-label { max-width: none; } .step-count { top: -2px; right: -6px; } } /* =================================================================== Dashboard (KPI tiles + chart cards + mini grid) =================================================================== */ .dashboard-filterbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 12px 16px; } .dash-filter-group { display: flex; flex-direction: column; gap: 4px; } .dash-filter-group label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .dash-filter-group select { min-width: 180px; height: 38px; } /* Widen the closed multiselect toggle ("All Asset Types") so the box lines up with its content-sized open menu below it. The width covers the longest asset-type option; the menu's min-width:100% then pins the panel to the same width, so the two match. */ .dash-filter-group .vt-multiselect { min-width: 220px; } /* Wildcard input + Search button sit on one row */ .dash-wildcard { display: flex; gap: 6px; align-items: stretch; } .dash-wildcard input { min-width: 260px; } /* Cost Approval wildcard: the placeholder ("Search Tag, Customer Asset ID, and PO") is long, so give the input room to show it without clipping. */ .cost-filter-wildcard input { min-width: 300px; } .dash-wildcard .btn { white-space: nowrap; } /* Wide screens: view buttons pinned top-right (margin-left:auto absorbs the free space AFTER the search cluster, so the Sites/Asset Types/Search controls keep their fixed 12px gaps - the gap between them never changes on resize; only the space before the buttons flexes, which is the intended right-align). When the bar runs out of room, .is-wrapped drops the buttons to their own row, left-aligned per the app-wide wrapped-control convention. */ .dash-view-buttons { margin-left: auto; } .is-wrapped > .dash-view-buttons { margin-left: 0; flex-basis: 100%; } /* =================================================================== Mobile pass (<576px and 576—991px tablet refinements) =================================================================== */ /* --- Topbar: shed non-essential bits on narrow screens --- */ @media (max-width: 767.98px) { .topbar { padding: 0 10px; gap: 6px; } .topbar-breadcrumb { display: none; } /* page-header already labels the page */ .topbar-home-mobile.topbar-icon-btn { display: inline-flex; } /* the Home link the hidden breadcrumb held */ .user-menu { padding: 4px; } /* avatar-only, no padding bloat */ /* Compact env-banner text so it fits the fixed 30px band instead of overflowing it. */ .env-banner-full { display: none; } .env-banner-short { display: inline; } .env-banner { gap: 4px; padding: 0 8px; letter-spacing: 0; } } /* --- Sidebar drawer: a bit roomier on phones for thumb-friendly tapping --- */ @media (max-width: 575.98px) { .sidebar { width: 280px; } .sidebar-nav a { padding: 12px 16px; font-size: 14.5px; } .sidebar-nav a i { font-size: 18px; width: 22px; } } /* --- Page header --- */ @media (max-width: 575.98px) { .page-header h2 { font-size: 20px; } .content { padding: 14px 12px 28px; } } /* --- Asset Search form: stack each input full-width on phones --- */ @media (max-width: 575.98px) { .search-criteria { gap: 8px; flex-direction: column; align-items: stretch; } .search-criteria .form-group { width: 100%; } .search-criteria .form-control, .search-criteria .form-select { max-width: none; min-width: 0; width: 100%; height: 38px; /* taller for finger taps */ font-size: 14px; } .search-card { padding: 12px; } } /* On phones the search buttons row should stay horizontal but take full width */ @media (max-width: 575.98px) { .search-criteria:last-of-type { flex-direction: row; flex-wrap: wrap; } .search-criteria:last-of-type .btn { flex: 1 1 auto; } } /* --- Dashboard filter bar: stack on phones --- */ @media (max-width: 575.98px) { .dashboard-filterbar { padding: 12px; } .dash-filter-group { width: 100%; } .dash-filter-group select { min-width: 0; width: 100%; height: 38px; } .dashboard-filterbar .btn { width: 100%; } /* Keep the wildcard input + Search button on ONE row: the input flex-shrinks (drops its 260px min) and the Search button sizes to content instead of the full-width rule above, so it stays inside the card at ~360px instead of overflowing. */ .dash-wildcard input { min-width: 0; flex: 1 1 auto; } .dash-wildcard .btn { width: auto; flex: 0 0 auto; } } /* When a filter bar's controls wrap to more than one row, the asset-type pills would otherwise strand below everything. JS adds .is-wrapped (see _Layout) at the REAL wrap point, sidebar state, or zoom, and we reorder the pill strip to sit right under its dropdown, pushing the remaining controls below it. On a single-row layout the strip stays a full-width bottom row. */ .is-wrapped #assetTypeChips { order: 1; } .is-wrapped > .dash-filter-wildcard, .is-wrapped > .dash-view-buttons, .is-wrapped > .cost-filter-wildcard, .is-wrapped > button[type="submit"] { order: 2; } /* --- AG Grid pagination panel: avoid pushing the page-jump off-screen --- */ @media (max-width: 575.98px) { .ag-theme-quartz .ag-paging-panel { flex-wrap: wrap; gap: 8px 12px; padding-top: 8px; padding-bottom: 8px; } .ag-page-jump { margin-right: 0; } .ag-page-jump-label { display: none; } /* save space; input + Go is enough */ .ag-page-jump-input { width: 56px; } } /* --- Results-meta row above the grid: smaller on phones --- */ @media (max-width: 575.98px) { .results-meta { font-size: 12px; } } /* --- Launcher cards: tighter spacing on phones --- */ @media (max-width: 575.98px) { .launcher-grid { gap: 10px; } .launcher-card { padding: 18px 16px 16px; min-height: auto; } .launcher-card .lc-icon { width: 38px; height: 38px; font-size: 19px; margin-bottom: 10px; } .launcher-welcome h2 { font-size: 22px; } } /* Status pill cells */ .status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; line-height: 1.6; } .status-ok { background-color: rgba(40, 167, 69, 0.15); color: #1e7e34; } .status-warn { background-color: rgba(240, 173, 78, 0.18); color: #c47100; } .status-danger { background-color: rgba(217, 83, 79, 0.18); color: #c0392b; } .status-neutral { background-color: rgba(147, 149, 152, 0.18); color: #5f6164; } [data-theme="dark"] .status-ok { background-color: rgba(40, 167, 69, 0.22); color: #74d089; } [data-theme="dark"] .status-warn { background-color: rgba(240, 173, 78, 0.22); color: #ffc983; } [data-theme="dark"] .status-danger { background-color: rgba(217, 83, 79, 0.25); color: #ff9c95; } [data-theme="dark"] .status-neutral { background-color: rgba(154, 164, 178, 0.18); color: #cfd6e0; } /* =================================================================== Launcher cards (Home dashboard) =================================================================== */ .launcher-welcome { margin: 4px 0 20px; } .launcher-welcome h2 { font-weight: 600; font-size: 26px; margin: 0 0 6px; color: var(--text-strong); } .launcher-welcome p { color: var(--text-muted); margin: 0; font-size: 14px; } .launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .launcher-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px 22px 20px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; box-shadow: var(--shadow-card); color: inherit; min-height: 140px; } .launcher-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); border-color: var(--puffer-blue); text-decoration: none; } .launcher-card .lc-icon { width: 44px; height: 44px; border-radius: 10px; background-color: rgba(0, 75, 141, 0.10); color: var(--puffer-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } [data-theme="dark"] .launcher-card .lc-icon { background-color: rgba(111, 177, 255, 0.15); color: #6fb1ff; } .launcher-card h3 { font-size: 15px; font-weight: 600; color: var(--text-strong); margin: 0 0 4px; } .launcher-card p { color: var(--text-muted); font-size: 13px; margin: 0; } .launcher-card .lc-badge { display: inline-block; margin-top: 8px; padding: 2px 8px; background-color: rgba(240, 173, 78, 0.18); color: var(--puffer-accent); border-radius: 999px; font-size: 11px; font-weight: 600; } /* ---------- Home: global lookup ---------- */ /* Size the search card to a share of the content area (which already excludes the sidebar) so it stays roughly two "Jump back in" cards wide. The max(...) floor keeps it comfortably wide on smaller/mid screens where a bare 76% would fall behind the near-full-width cards; the overall width:min(...) never exceeds the container, so it still drops to full width when space is tight.max-width caps it on ultra-wide monitors. */ .global-lookup { margin: 4px 0 16px; width: min(100%, max(76%, 760px)); max-width: 900px; min-width: 0; } @media (max-width: 992px) { .global-lookup { width: 100%; } } .global-lookup-title { font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 0 0 2px; } .global-lookup-subtitle { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; } .global-lookup-form { display: flex; align-items: center; flex-wrap: wrap; /* buttons drop below the input on narrow widths instead of overflowing the card */ gap: 10px; position: relative; max-width: 720px; } .global-lookup-icon { position: absolute; left: 14px; color: var(--text-muted); font-size: 16px; pointer-events: none; } /* Hero global-search box is intentionally larger than standard 38px fields. Scoped selector keeps it at 46px despite the global field rule. */ .global-lookup-form .global-lookup-input { flex: 1; min-width: 180px; /* keeps the input usable instead of collapsing to a sliver when space tightens */ height: 46px; padding-left: 40px; font-size: 15px; } .global-lookup-form .btn { height: 46px; padding: 0 22px; } .global-lookup-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* Narrow screens (Zebra TC22 ~360px): the input takes the full first row so Search + Reset wrap together onto the next row (easier to read). The search icon is pinned to the input's 46px height (top:0) so it stays inside the box - centering it on the whole form drifted it below the input once the buttons wrapped. */ @media (max-width: 575.98px) { .global-lookup-form .global-lookup-input { flex: 1 1 100%; } .global-lookup-icon { top: 0; height: 46px; display: flex; align-items: center; } .global-lookup-form .btn { flex: 1 1 auto; } /* Search + Reset split the second row evenly */ } /* ---------- Home: lookup results ---------- */ .lookup-results { margin: 18px 0 26px; } /* Home lookup meta reads as plain left-aligned text (override the grid's space-between meta). */ .lookup-results .results-meta { display: block; margin-bottom: 10px; font-size: 14px; color: var(--text); } /* Two-column results: active repairs (left) + assets (right). */ .lookup-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .lookup-col { min-width: 0; } .lookup-col-head { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .lookup-col-count { font-weight: 600; color: var(--text-muted); letter-spacing: 0; } .lookup-col-empty { color: var(--text-muted); font-size: 13px; padding: 10px 2px; } /* Admin Reports - expandable account-manager sections (one collapsible grid per manager). */ .am-group { border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 8px; overflow: hidden; } .am-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: var(--surface-2, transparent); border: 0; text-align: left; cursor: pointer; font-size: 14px; color: var(--text); } .am-group-head:hover { background: var(--row-hover, rgba(0,0,0,0.03)); } .am-group-name { font-weight: 600; } .am-chevron { transition: transform 0.15s ease; color: var(--text-muted); } .am-group-head.open .am-chevron { transform: rotate(90deg); } .am-group-body { padding: 10px 14px 14px; border-top: 1px solid var(--border-soft); } /* Compact row inside the narrower columns: type chip (with icon) left, id/sub + meta stacked, chevron right — the original look, fit to half width. */ .lookup-columns .lookup-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; gap: 1px 10px; align-items: center; } .lookup-columns .lookup-type { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .lookup-columns .lookup-main { grid-column: 2; grid-row: 1; } .lookup-columns .lookup-meta-line { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--text-muted); } .lookup-columns .lookup-chevron { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--text-muted); } @media (max-width: 800px) { .lookup-columns { grid-template-columns: 1fr; gap: 8px; } } .lookup-list { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--bg-elevated); box-shadow: var(--shadow-card); } .lookup-row { display: grid; grid-template-columns: 110px minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(120px, 1fr) auto 18px; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; color: inherit; border-top: 1px solid var(--border-soft); transition: background-color 0.12s; } .lookup-row:first-child { border-top: none; } .lookup-row:hover { background-color: var(--row-hover, rgba(0, 75, 141, 0.05)); text-decoration: none; } .lookup-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; justify-self: start; } .lookup-type.lt-asset { background-color: rgba(0, 75, 141, 0.12); color: var(--puffer-blue); } .lookup-type.lt-repair { background-color: rgba(240, 173, 78, 0.18); color: var(--puffer-accent); } [data-theme="dark"] .lookup-type.lt-asset { background-color: rgba(111, 177, 255, 0.16); color: #6fb1ff; } .lookup-main { display: flex; flex-direction: column; min-width: 0; } .lookup-id { font-weight: 600; color: var(--text-strong); } /* The active-repair WIP badge is the shared .recent-badge (no built-in margin), so give it the same spacing from the title that .lookup-life gets, and center it against the larger id text. */ .lookup-id .recent-badge { margin-left: 8px; vertical-align: middle; } /* Repair lifecycle badge (Active in-shop vs Historical/closed) - global search results. */ .lookup-life { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; vertical-align: middle; white-space: nowrap; } .lookup-life.ll-active { background-color: rgba(31, 180, 125, 0.16); color: #1FB47D; } .lookup-life.ll-historical { background-color: rgba(147, 149, 152, 0.20); color: #5f6164; } /* brand gray */ [data-theme="dark"] .lookup-life.ll-active { background-color: rgba(135, 218, 135, 0.18); color: #87DA87; } [data-theme="dark"] .lookup-life.ll-historical { background-color: rgba(147, 149, 152, 0.20); color: #b9bbbe; } /* Inline emphasis used in the repair-results note. */ .ll-active-text { color: #1FB47D; } .ll-historical-text { color: var(--puffer-gray); } /* Severity text colours (Repair grid, employee-only) - ported from legacy .severity-{code}. Code from RepairStatus.sql DECODE: Emergency=100, 4 Hour=200, Hot(Same Day=300, Next Day=400, Two Day=500, else/Routine=600. Higher urgency = warmer/bolder. */ .severity-100 { color: #e2231a; font-weight: 700; } /* Emergency */ .severity-200 { color: #ec7423; font-weight: 700; } /* 4 Hour */ .severity-300 { color: #cb4b90; font-weight: 700; } /* Hot (Same Day) */ .severity-400 { color: #7e458d; font-weight: 700; } /* Next Day */ .severity-500 { color: #4378a8; font-weight: 700; } /* Two Day */ .severity-600 { color: #333333; font-weight: 400; } /* Routine / other */ /* Dark theme: brighten so the colours stay legible on the dark grid (600 #333 would vanish). */ [data-theme="dark"] .severity-100 { color: #ff6b61; } [data-theme="dark"] .severity-200 { color: #f6a05a; } [data-theme="dark"] .severity-300 { color: #e07bb4; } [data-theme="dark"] .severity-400 { color: #b48fd0; } [data-theme="dark"] .severity-500 { color: #7aa6d8; } [data-theme="dark"] .severity-600 { color: #b9bbbe; } /* Collapsible "N historical repairs" toggle in the repairs column. */ .lookup-histtoggle { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 7px 10px; border: 1px dashed var(--border, #d4d9e0); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .lookup-histtoggle:hover { background-color: var(--row-hover, rgba(0, 75, 141, 0.05)); color: var(--text); } .lookup-historical { margin-top: 4px; } /* Filter-within-results input. */ .lookup-filter { position: relative; display: flex; align-items: center; margin: 4px 0 10px; } .lookup-filter .bi-funnel { position: absolute; left: 12px; color: var(--text-muted); font-size: 14px; pointer-events: none; } .lookup-filter input { padding-left: 34px; padding-right: 34px; } .lookup-filter-clear { position: absolute; right: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px; } .lookup-filter-clear:hover { color: var(--text); } .lookup-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lookup-matched { font-size: 12px; color: var(--text-muted); font-style: italic; } .lookup-cust { font-size: 13px; color: var(--text); } .lookup-status { font-size: 13px; color: var(--text); } .lookup-chevron { color: var(--text-muted); font-size: 14px; justify-self: end; } .lookup-spinner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; font-size: 13px; color: var(--text-muted); } .lookup-spinner .search-spinner-circle { width: 20px; height: 20px; border-width: 2px; } .lookup-stillsearching { color: var(--text-muted); font-size: 13px; } .lookup-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--text-muted); background-color: rgba(0, 75, 141, 0.05); border: 1px solid var(--border-soft); border-radius: 8px; } .lookup-note i { color: var(--puffer-blue); margin-top: 1px; } [data-theme="dark"] .lookup-note { background-color: rgba(111, 177, 255, 0.08); } [data-theme="dark"] .lookup-note i { color: #6fb1ff; } .home-section-title { font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 26px 0 12px; } /* ---------- Home: announcements ---------- */ .announcements { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .announce { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 8px; font-size: 13px; color: var(--text); background-color: var(--bg-elevated); } .announce .announce-text { flex: 1; } .announce > i { margin-top: 1px; font-size: 15px; } .announce-info { border-left-color: var(--puffer-blue); } .announce-info > i { color: var(--puffer-blue); } .announce-warn { border-left-color: var(--puffer-accent); } .announce-warn > i { color: var(--puffer-accent); } .announce-success { border-left-color: #2e9e5b; } .announce-success > i { color: #2e9e5b; } .announce-dismiss { background: none; border: none; cursor: pointer; padding: 0 2px; color: var(--text-muted); font-size: 12px; line-height: 1; } .announce-dismiss:hover { color: var(--text-strong); } /* ---------- Home: work-queue tiles (toggle) ---------- */ .workqueue { margin: 4px 0 8px; } .wq-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .wq-toggle:hover { border-color: var(--puffer-blue); } .wq-toggle .wq-caret { transition: transform 0.2s; font-size: 12px; color: var(--text-muted); } .wq-toggle.open .wq-caret { transform: rotate(180deg); } .wq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; } .wq-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--border-soft); border-left-width: 4px; border-radius: 10px; background: var(--bg-elevated); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; } .wq-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); text-decoration: none; } .wq-tile .wq-count { font-size: 28px; font-weight: 700; color: var(--text-strong); line-height: 1.1; } .wq-tile .wq-meta { font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .wq-warn { border-left-color: var(--puffer-accent); } .wq-info { border-left-color: var(--puffer-blue); } .wq-success { border-left-color: #2e9e5b; } /* ---------- Home: recently viewed ---------- */ /* Column count follows the actual available width (viewport minus the sidebar), not fixed viewport breakpoints: auto-fill packs as many >=340px cards as fit, so the grid never over-collapses to one column while there is still room for two (the old max-width breakpoints ignored the sidebar width). */ .recent-list { display: grid; /* Responsive column count that fills the row AND caps at 4. Each track's minimum is the LARGER of 340px or a quarter of the row (minus the 3 x 10px gaps): once four >=340px cards fit, the min becomes ~1/4 width so the four columns stretch to fill (no dead space on wide screens), and a 5th can never squeeze in because each column is already ~1/4 wide. Narrower than 4x340 it drops to 3, 2, 1 by space. */ grid-template-columns: repeat(auto-fill, minmax(max(340px, (100% - 30px) / 4), 1fr)); gap: 10px; } .recent-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elevated); text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .recent-item:hover { border-color: var(--puffer-blue); box-shadow: var(--shadow-card); text-decoration: none; } .recent-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } /* Header row: id + a badge (repairs = live status in stoplight colours; assets = grey valve type). */ .recent-id-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .recent-id { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-chevron { color: var(--text-muted); font-size: 13px; } /* Pill badge next to the recent-card header. Stoplight palette for repair status; grey for asset type. */ .recent-badge { display: inline-block; flex: none; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .recent-badge-red { background: rgba(237, 71, 71, 0.15); color: #d83a3a; } .recent-badge-amber { background: rgba(246, 176, 23, 0.18); color: #b5790a; } .recent-badge-lime { background: rgba(135, 218, 135, 0.25); color: #2f8f2f; } .recent-badge-green { background: rgba(31, 180, 125, 0.16); color: #18996a; } .recent-badge-gray { background: rgba(147, 149, 152, 0.20); color: #5f6164; } [data-theme="dark"] .recent-badge-red { color: #ff7b72; } [data-theme="dark"] .recent-badge-amber { color: #ffc04d; } [data-theme="dark"] .recent-badge-lime { color: #9fe09f; } [data-theme="dark"] .recent-badge-green { color: #4fd0a0; } [data-theme="dark"] .recent-badge-gray { color: #b9bbbe; } @media (max-width: 767.98px) { .lookup-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 4px 10px; } .lookup-type { grid-row: 1; } .lookup-chevron { grid-row: 1; grid-column: 2; } .lookup-main { grid-column: 1 / -1; } .lookup-matched, .lookup-cust, .lookup-status { grid-column: 1 / -1; } } /* =================================================================== Page-level styles =================================================================== */ .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .page-header h2 { font-weight: 600; color: var(--text-strong); margin: 0; font-size: 24px; } .page-header-actions { display: flex; gap: 8px; align-items: center; } .page-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12.5px; text-decoration: none; margin-bottom: 6px; } .back-link:hover { color: var(--puffer-blue); text-decoration: none; } [data-theme="dark"] .back-link:hover { color: #6fb1ff; } .card-title { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 12px; } /* Key-value list used on detail pages */ .kv-list { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; } .kv-list dt { color: var(--text-muted); font-weight: 500; } /* min-width:0 lets the value column shrink; overflow-wrap breaks a long email/URL instead of forcing the card (and its parent grid) wider than the screen. */ .kv-list dd { margin: 0; color: var(--text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; } /* Plain HTML data table used inside cards */ .data-table { width: 100%; font-size: 13px; border-collapse: collapse; } .data-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); } .data-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .data-table tr:last-child td { border-bottom: 0; } .data-table a { color: var(--puffer-blue); font-weight: 500; } [data-theme="dark"] .data-table a { color: #6fb1ff; } .empty-state-inline { display: flex; align-items: center; gap: 10px; padding: 16px; background-color: var(--bg); border: 1px dashed var(--border-soft); border-radius: 8px; color: var(--text-muted); font-size: 13px; } .empty-state-inline i { font-size: 18px; color: var(--text-muted); } /* Repair search uses a labeled 6-column grid */ .search-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; /* gap between the fields and the SEARCH button row */ } @media (max-width: 1199.98px) { .search-grid-6 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767.98px) { .search-grid-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .search-grid-6 { grid-template-columns: 1fr; } } .search-grid-6 .form-control, .search-grid-6 .form-select { width: 100%; } .search-grid-6 .field-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .search-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; } /* Shared "half-width" card — ~half the page, shrinks to fit on narrow screens. Reused by Cost Approval (bulk approval) and Image Capture so they stay consistent. */ .card-half { width: 100%; max-width: 600px; } /* Compact search card — hugs its controls instead of spanning full width. Used on pages with only a few filter fields (e.g. Cost Approval). */ .search-card-compact { width: fit-content; max-width: 100%; } /* Center the selection checkbox (header "select all" + body rows) in its narrow, borderless column so it isn't left-justified against the cell edge. */ /* Selection checkbox column: drop the wide default cell padding so the box can actually center in the narrow (46px) column, then center header + body. */ .cb-center.ag-header-cell, .cb-center.ag-cell { padding-left: 0 !important; padding-right: 0 !important; } /* Make the cell/header the centering container; the checkbox wrapper hugs its content (auto width) and gets centered, rather than left-justified. */ .cb-center.ag-cell { display: flex !important; align-items: center; justify-content: center; } .cb-center.ag-cell .ag-cell-wrapper { width: auto; } .cb-center .ag-selection-checkbox { margin: 0 !important; } /* Header: AG's flex label-container pins the select-all to the left no matter how its flex is tweaked, so absolutely-center the checkbox within the header cell. */ .cb-center.ag-header-cell { position: relative; } .cb-center .ag-header-select-all { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; } /* Bulk Approval form — space the stacked field rows so labels aren't squished. */ #bulkApprovalForm .form-group { margin-bottom: 14px; } /* Keep a wide table contained within its card (scrolls instead of spilling past the rounded background) when the window is narrower than the table's columns. */ .search-card:has(> table.data-table) { overflow-x: auto; } .sidebar-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 1; overflow: hidden; } .sidebar-brand-link:hover { text-decoration: none; } /* Make page-header a flex row so actions can sit on the right */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .bulk-count { color: var(--text-muted); font-size: 13px; } .text-end { text-align: right; } .role-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .role-employee { background-color: rgba(0, 75, 141, 0.15); color: var(--puffer-blue); } .role-admin { background-color: rgba(240, 173, 78, 0.18); color: #c47100; } .role-user { background-color: rgba(108, 117, 125, 0.15); color: #495057; } [data-theme="dark"] .role-employee { background-color: rgba(111, 177, 255, 0.18); color: #6fb1ff; } [data-theme="dark"] .role-admin { background-color: rgba(240, 173, 78, 0.22); color: #ffc983; } [data-theme="dark"] .role-user { background-color: rgba(154, 164, 178, 0.18); color: #cfd6e0; } .chip { display: inline-block; background-color: var(--bg); border: 1px solid var(--border-soft); color: var(--text); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; } .chip-lg { font-size: 13px; padding: 4px 12px; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } /* Make Bootstrap form-switch theme-aware in dark mode */ [data-theme="dark"] .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme="dark"] .form-check-input:checked { background-color: var(--puffer-blue); border-color: var(--puffer-blue); } /* ========================================================= Service Contacts — card grid ========================================================= */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .contact-card { background-color: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 10px; padding: 18px 18px 16px; box-shadow: var(--shadow-card); } .contact-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .contact-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: var(--puffer-blue); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex: 0 0 48px; } .contact-name { font-size: 15px; font-weight: 600; color: var(--text-strong); margin: 0; } .contact-title { font-size: 12.5px; color: var(--text-muted); } .contact-kv { grid-template-columns: 70px 1fr; font-size: 13px; margin-bottom: 14px; } .contact-actions { display: flex; gap: 6px; } .contact-actions .btn { flex: 1; } /* ========================================================= My Profile — hero + quick actions ========================================================= */ .profile-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .profile-avatar-large { width: 84px; height: 84px; border-radius: 50%; background-color: var(--puffer-blue); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; flex: 0 0 84px; } .profile-hero-body { flex: 1; min-width: 220px; } .profile-name { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 0 0 6px; } .profile-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-muted); align-items: center; } .profile-meta i { margin-right: 4px; opacity: 0.8; } .profile-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; } .quick-actions { display: flex; flex-direction: column; gap: 6px; } .quick-action { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--border-soft); background-color: var(--bg); transition: background-color 0.12s, border-color 0.12s, transform 0.1s; } .quick-action:hover { background-color: var(--hover-bg); border-color: var(--puffer-blue); text-decoration: none; color: var(--text); } .quick-action > i:first-child { color: var(--puffer-blue); font-size: 20px; width: 28px; text-align: center; } .quick-action > div { flex: 1; } .quick-action strong { display: block; font-size: 14px; color: var(--text-strong); } .quick-action p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); } .quick-action .chevron { color: var(--text-muted); font-size: 14px; } .quick-action-danger > i:first-child { color: #c0392b; } .quick-action-danger strong { color: #c0392b; } [data-theme="dark"] .quick-action-danger > i:first-child { color: #ff9c95; } [data-theme="dark"] .quick-action-danger strong { color: #ff9c95; } .pref-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); } .pref-row:last-child { border-bottom: 0; padding-bottom: 0; } .pref-row:first-of-type { padding-top: 0; } .pref-info { flex: 1; } .pref-info strong { display: block; font-size: 14px; color: var(--text-strong); margin-bottom: 2px; } .pref-info p { margin: 0; font-size: 12.5px; color: var(--text-muted); } .pref-row .form-switch { padding-left: 0; } .pref-row .form-check-input { width: 40px; height: 22px; margin: 0; cursor: pointer; } /* ========================================================= Batch 4 — shared form patterns ========================================================= */ .form-narrow { max-width: 720px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid .form-group-full { grid-column: 1 / -1; } @media (max-width: 575.98px) { .form-grid { grid-template-columns: 1fr; } } .form-grid .form-control, .form-grid .form-select { width: 100%; height: 38px; } .form-grid .field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; } .field-hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; } .hint-success { color: #1e7e34; } .hint-error { color: #c0392b; } [data-theme="dark"] .hint-success { color: #74d089; } [data-theme="dark"] .hint-error { color: #ff9c95; } .req { color: #d9534f; font-weight: 600; } /* Advised-cost Terms & Conditions acceptance: checkbox + text + link on one inline, wrapping row. The link is a sibling of the