/* ============================================================ HMI SYNC - DESIGN SYSTEM / THEME Harrison Metals Incorporated Usage in Blazor: - Link this file in App.razor or _Host.cshtml - Toggle dark mode by adding class="dark" to - All components reference CSS variables below ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- LIGHT THEME (default) ---- */ :root { --hmi-red: #CC2229; --hmi-red-dark: #A11B21; --hmi-red-light: #E8343B; --hmi-red-glow: rgba(204,34,41,0.20); --hmi-red-soft: rgba(204,34,41,0.08); --hmi-red-border: rgba(204,34,41,0.30); --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-pill: 20px; --transition-fast: 0.1s ease; --transition-normal: 0.15s ease; --transition-slow: 0.3s ease; --hmi-sticky-table-top: 0px; --bg: #E0E3EA; --surface: #ECEEF2; --surface-hover: #E4E7ED; --surface-alt: #E6E8EE; --elevated: #ECEEF2; --border: #D2D6E0; --border-light: #E0E3EA; --steel-50: #F7F8FA; --steel-100: #ECEEF2; --steel-200: #D8DBE3; --steel-300: #B8BDCA; --steel-400: #8A91A3; --steel-500: #6B7280; --steel-700: #353945; --steel-800: #24272F; --steel-900: #181A20; --text: #1F2128; --text-muted: #6B7280; --text-dim: #9CA3B0; --clickable-action-text: #4B5568; --clickable-action-hover: var(--text); --clickable-success-text: #15803D; --clickable-danger-text: #DC2626; --clickable-warning-text: #B45309; --clickable-info-text: #0369A1; --green: #16A34A; --green-bg: rgba(22,163,74,0.08); --green-border: rgba(22,163,74,0.25); --amber: #D97706; --amber-bg: rgba(217,119,6,0.07); --amber-border: rgba(217,119,6,0.20); --amber-text: #92400E; --error: #EF4444; --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.20); --table-header-bg: #E4E7ED; --card-shadow: 0 1px 3px rgba(0,0,0,0.04); --overlay-bg: #ECEEF2; --overlay-shadow: 0 16px 48px rgba(0,0,0,0.15); --tab-active-shadow: 0 -2px 8px rgba(0,0,0,0.04); --btn-shadow: 0 2px 8px rgba(0,0,0,0.12); } /* ---- DARK THEME ---- */ .dark { --bg: #111318; --surface: #1A1D25; --surface-hover: #22252E; --surface-alt: #252938; --elevated: #1E2129; --border: #2C3040; --border-light: #252938; --steel-50: #1E2129; --steel-100: #252938; --steel-200: #2C3040; --steel-300: #3A4055; --steel-400: #5A6278; --steel-500: #7A8298; --steel-700: #2C3040; --steel-800: #181B22; --steel-900: #0E1016; --text: #E4E6EC; --text-muted: #8B92A8; --text-dim: #5C6378; --clickable-action-text: #D5DAE6; --clickable-action-hover: #FFFFFF; --clickable-success-text: #86EFAC; --clickable-danger-text: #FCA5A5; --clickable-warning-text: #FCD34D; --clickable-info-text: #7DD3FC; --green: #22C55E; --green-bg: rgba(34,197,94,0.12); --green-border: rgba(34,197,94,0.25); --amber: #F59E0B; --amber-bg: rgba(245,158,11,0.10); --amber-border: rgba(245,158,11,0.25); --amber-text: #F59E0B; --error: #EF4444; --error-bg: rgba(239,68,68,0.10); --error-border: rgba(239,68,68,0.25); --table-header-bg: #1E2129; --card-shadow: 0 1px 4px rgba(0,0,0,0.30); --overlay-bg: #1E2129; --overlay-shadow: 0 20px 60px rgba(0,0,0,0.60); --tab-active-shadow: 0 -2px 8px rgba(0,0,0,0.20); --btn-shadow: 0 2px 10px rgba(0,0,0,0.30); } /* ---- GLOBAL ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; transition: background var(--transition-slow), color var(--transition-slow); -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--steel-300); border-radius: 3px; } /* ---- BRUSHED METAL TEXTURES ---- */ /* Single tileable PNG overlay (512x512, 8-bit grayscale, ~128 mid-gray base). Scratches are lighter/darker deviations from mid-gray. overlay blend mode makes the mid-gray disappear; only scratches show through. Place brushed-metal.png in wwwroot/images/. Adjust opacity per context to control texture intensity. */ .brushed-metal-tabs { position: relative; } .brushed-metal-nav::before, .brushed-metal-tabs::before { content: ''; position: absolute; inset: 0; background: url('/images/brushed-metal.png') repeat; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* Nav bar: always dark, subtle grain */ .brushed-metal-nav { background-color: var(--steel-900); } .brushed-metal-nav::before { opacity: 0.35; } .dark .brushed-metal-nav { background-color: #0E1016; } .dark .brushed-metal-nav::before { opacity: 0.25; } /* Tab bar: lighter surface, slightly more visible grain */ .brushed-metal-tabs { background-color: #ECEEF2; } .brushed-metal-tabs::before { opacity: 0.5; } .dark .brushed-metal-tabs { background-color: #141720; } .dark .brushed-metal-tabs::before { opacity: 0.3; } /* Ensure child content sits above the texture overlay */ .brushed-metal-nav > *, .brushed-metal-tabs > * { position: relative; z-index: 1; } /* ---- RED ARC ACCENTS ---- */ .red-arc:not(.hmi-nav) { position: relative; } .red-arc::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--hmi-red) 20%, var(--hmi-red-light) 50%, var(--hmi-red) 80%, transparent 100%); pointer-events: none; } .red-arc-thin { position: relative; } .red-arc-thin::after { content: ''; position: absolute; top: 0; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, transparent, var(--hmi-red), var(--hmi-red-light), var(--hmi-red), transparent); border-radius: 0 0 2px 2px; pointer-events: none; } .hmi-section-label.red-fade-line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(204,34,41,0.19), transparent); } /* ---- NAV ---- */ .hmi-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--steel-700); } .hmi-nav-brand-mark { width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--steel-200), var(--steel-100)); border: 1px solid var(--steel-300); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: -0.5px; } .dark .hmi-nav-brand-mark { border-color: var(--border); color: var(--text); } .hmi-nav-brand-mark::after { content: ''; position: absolute; bottom: 2px; left: 4px; right: 4px; height: 2px; background: var(--hmi-red); border-radius: 1px; } .hmi-nav-title { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: #fff; } .hmi-nav-subtitle { font-size: 9px; color: var(--steel-400); font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; } .hmi-nav-link { background: transparent; border: 1px solid transparent; color: var(--steel-400); padding: 6px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); transition: all var(--transition-normal); } .hmi-nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); } .hmi-nav-link.active { background: rgba(204,34,41,0.12); border-color: rgba(204,34,41,0.25); color: var(--hmi-red-light); } /* ---- WORKSPACE TABS ---- */ .hmi-workspace-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .hmi-workspace-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast); } .hmi-workspace-tab:hover, .hmi-workspace-tab:focus { background: var(--surface-hover); border-color: var(--steel-400); color: var(--text); } .hmi-workspace-tab.active, .hmi-workspace-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--hmi-red), var(--hmi-red-dark)); border-color: var(--hmi-red-dark); color: #ffffff; box-shadow: var(--btn-shadow); } .hmi-workspace-tab.active .badge, .hmi-workspace-tab[aria-selected="true"] .badge { border: 1px solid rgba(255, 255, 255, 0.35); } .hmi-sortable-table thead th { text-align: left !important; vertical-align: middle; } .hmi-sortable-table thead th[style*="cursor:pointer"] { white-space: nowrap; } /* ---- TAB BAR ---- */ .hmi-tab-bar { display: flex; align-items: flex-end; gap: 2px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; } .hmi-tab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 1px solid transparent; border-bottom: 1px solid transparent; border-radius: var(--radius-lg) var(--radius-lg) 0 0; cursor: pointer; font-family: var(--font-sans); transition: all var(--transition-normal); position: relative; top: 1px; flex-shrink: 0; } .hmi-tab:hover { background: rgba(255,255,255,0.6); } .dark .hmi-tab:hover { background: rgba(255,255,255,0.04); } .hmi-tab.active { background: var(--surface); border-color: var(--border); border-bottom-color: var(--surface); box-shadow: var(--tab-active-shadow); } .hmi-tab-label { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.2; } .hmi-tab.active .hmi-tab-label { font-weight: 600; color: var(--text); } .hmi-tab-sublabel { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); line-height: 1.2; margin-top: 1px; } .hmi-tab-close { width: 18px; height: 18px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-dim); cursor: pointer; transition: all var(--transition-fast); border: none; background: transparent; margin-left: 2px; } .hmi-tab-close:hover { background: var(--hmi-red-soft); color: var(--hmi-red); } .hmi-tab-add { width: 32px; height: 32px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: transparent; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); flex-shrink: 0; } .hmi-tab-add:hover { color: var(--hmi-red); background: rgba(255,255,255,0.5); } .dark .hmi-tab-add:hover { background: rgba(255,255,255,0.04); } /* ---- CARDS ---- */ .hmi-card { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--card-shadow); transition: background var(--transition-slow), border-color var(--transition-slow); } /* ---- TABLES ---- */ .hmi-table { width: 100%; border-collapse: collapse; } .hmi-table thead th { padding: 11px 16px; text-align: left; font-size: 10px; font-weight: 600; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; background: var(--table-header-bg); border-bottom: 1px solid var(--border-light); } .hmi-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); cursor: pointer; } .hmi-table tbody tr:last-child { border-bottom: none; } .hmi-table tbody tr:hover { background: var(--surface-hover); } .hmi-table td { padding: 12px 16px; font-size: 13px; } /* ---- BUTTONS ---- */ .hmi-btn { padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); transition: all var(--transition-normal); white-space: nowrap; border: none; } .hmi-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-muted); } .hmi-btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .hmi-btn-primary { background: linear-gradient(135deg, var(--hmi-red), var(--hmi-red-dark)); color: #fff; box-shadow: var(--btn-shadow); } .hmi-btn-primary:hover { background: linear-gradient(135deg, var(--hmi-red-light), var(--hmi-red)); } .hmi-btn-green { background: linear-gradient(135deg, var(--green), #15803D); color: #fff; box-shadow: var(--btn-shadow); } .hmi-btn-green:hover { background: linear-gradient(135deg, #22C55E, var(--green)); } /* ---- BADGES & CHIPS ---- */ .hmi-badge { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; } .hmi-badge-amber { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); } .hmi-badge-red { background: var(--hmi-red-soft); border: 1px solid var(--hmi-red-border); color: var(--hmi-red); } .hmi-badge-green { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); } .hmi-chip { padding: 3px 8px; border-radius: var(--radius-sm); background: var(--steel-50); border: 1px solid var(--border-light); font-size: 11px; } /* ---- UTILITY ---- */ .hmi-part-number { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--hmi-red); } .hmi-mono { font-family: var(--font-mono); } .hmi-warning { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--amber-bg); border: 1px solid var(--amber-border); font-size: 12px; color: var(--amber); margin-bottom: 8px; } .hmi-section-label { font-size: 10px; font-weight: 600; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .hmi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .hmi-dot-green { background: var(--green); } .hmi-dot-red { background: var(--hmi-red); box-shadow: 0 0 6px var(--hmi-red-glow); } .hmi-dot-amber { background: var(--amber); } .hmi-dot-pulse { animation: hmi-pulse 2s ease infinite; } .hmi-progress-track { height: 6px; background: var(--steel-100); border-radius: 3px; overflow: hidden; } .hmi-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), #4ADE80); border-radius: 3px; transition: width 0.5s ease; } .hmi-avatar { width: 34px; height: 34px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--hmi-red), var(--hmi-red-dark)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; font-family: var(--font-sans); } .hmi-save-indicator { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--steel-400); font-family: var(--font-mono); } .hmi-notif-dropdown { position: absolute; top: 44px; right: 0; width: 340px; background: var(--overlay-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--overlay-shadow); animation: hmi-slideDown 0.2s ease; z-index: 200; } .hmi-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-light); display: flex; gap: 10px; align-items: flex-start; cursor: pointer; transition: background var(--transition-fast); } .hmi-notif-item.unread { background: var(--hmi-red-soft); } .hmi-notif-item:hover { background: var(--surface-hover); } /* ---- ANIMATIONS ---- */ @keyframes hmi-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes hmi-slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes hmi-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } } .hmi-fade-in { animation: hmi-fadeIn 0.25s ease; } .hmi-pulse { animation: hmi-pulse 1.5s ease infinite; } .badge-expiring-yellow { background-color: #ffc107; color: #000; } /* ---- RESPONSIVE ---- */ @media (max-width: 767px) { .hmi-nav { padding: 0 12px; } .hmi-tab-bar { padding: 6px 8px 0; gap: 1px; } .hmi-tab { padding: 8px 10px; gap: 6px; } .hmi-tab-label { font-size: 11px; } .hmi-tab-sublabel { font-size: 9px; } .hmi-hide-mobile { display: none !important; } .hmi-stack-mobile { flex-direction: column !important; } .hmi-full-mobile { width: 100% !important; min-width: 0 !important; } .hmi-table td, .hmi-table th { padding: 8px 10px; font-size: 11px; } .hmi-notif-dropdown { width: calc(100vw - 24px); right: -60px; } } /* Escalation badges for overdue jobs */ .bg-orange { background-color: #e67700 !important; } .escalation-pulse { animation: escalation-pulse 1.5s ease-in-out infinite; } @keyframes escalation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ── Sticky table headers ──────────────────────────────────── Long tables must opt into an explicit scroll frame. This prevents headers from sticking to the page and painting over panels above the table. */ .hmi-table-scroll { position: relative; max-height: var(--hmi-table-scroll-max-height, min(70vh, 760px)); overflow: auto; isolation: isolate; } .hmi-table-scroll > table { margin-bottom: 0; } .hmi-table-scroll > table thead, .hmi-sticky-thead thead { position: sticky; top: var(--hmi-sticky-table-top, 0px); z-index: 20; background: var(--table-header-bg, var(--surface, #f8f9fa)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.05); } .hmi-table-scroll > table thead th, .hmi-sticky-thead thead th { position: sticky; top: var(--hmi-sticky-table-top, 0px); z-index: 21; background: var(--table-header-bg, var(--surface, #f8f9fa)); background-clip: padding-box; } .dark .hmi-table-scroll > table thead, .dark .hmi-table-scroll > table thead th, .dark .hmi-sticky-thead thead, .dark .hmi-sticky-thead thead th { background: var(--table-header-bg, #1E2129); color: var(--text, #e0e0e0); } /* ── Resizable table columns (RRR14) ───────────────────────── Tables use fixed layout and explicit widths so drag-to-resize behaves like a spreadsheet. Narrow cells clip instead of bleeding text into the next column. */ table[data-resizable] { width: 100%; table-layout: fixed; } table[data-resizable] th, table[data-resizable] td { min-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } table[data-resizable] th { overflow: visible; position: relative; } .hmi-table-scroll > table[data-resizable] thead th, .hmi-sticky-thead[data-resizable] thead th { position: sticky; top: var(--hmi-sticky-table-top, 0px); z-index: 30; } table[data-resizable] .form-control, table[data-resizable] .form-select, table[data-resizable] .btn { max-width: 100%; } table[data-resizable] td[colspan] { overflow: visible; text-overflow: clip; white-space: normal; } /* Thin drag handle on the right edge of elements in tables with data-resizable. Cursor changes to col-resize. */ .hmi-col-resize-handle { position: absolute; top: 0; right: -6px; width: 12px !important; max-width: 12px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; height: 100%; cursor: col-resize; z-index: 40; background: transparent; opacity: 1; touch-action: none; user-select: none; pointer-events: auto; } .hmi-col-resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #adb5bd; opacity: 0.35; } .dark .hmi-col-resize-handle::after { background: #6c757d; opacity: 0.6; } .hmi-col-resize-handle:hover::after, .dark .hmi-col-resize-handle:hover::after { background: var(--hmi-red, #CC2229); opacity: 1; } /* ── Standardize button/select heights in toolbars ─────────── Mixing btn-sm, form-select-sm, and buttons with nested badges causes uneven heights. Force uniform sizing on flex toolbar rows so everything aligns. */ .d-flex > .btn-sm, .d-flex > .form-select-sm, .d-flex > .btn-group > .btn-sm { min-height: 31px; line-height: 1.5; } /* ── Dark mode Bootstrap component overrides ───────────────── Bootstrap's .card, .table, .modal-content have white backgrounds that break dark mode. Override with CSS variables. */ /* Force dark text/bg on the body + all containers in dark mode */ .dark { color: var(--text, #e0e0e0); } .dark .card { background-color: var(--surface, #1a1d21); border-color: var(--border, #353945); color: var(--text, #e0e0e0); } .dark .border { border-color: var(--border, #353945) !important; } .dark .card-header { background-color: var(--steel-800, #24272f); border-color: var(--border, #353945); } .dark .table { --bs-table-color: var(--text, #e0e0e0); --bs-table-bg: transparent; color: var(--text, #e0e0e0); } .dark .table-light, .dark .table-active { --bs-table-bg: var(--steel-800, #24272f); --bs-table-color: var(--text, #e0e0e0); --bs-table-border-color: var(--border, #353945); } .dark .table-success { --bs-table-bg: rgba(25, 135, 84, 0.2); --bs-table-color: #75d4a7; } .dark .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.2); --bs-table-color: #f1aeb5; } .dark .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.15); --bs-table-color: #ffe69c; } .dark .table-info { --bs-table-bg: rgba(13, 202, 240, 0.15); --bs-table-color: #9eeaf9; } .dark th, .dark td { color: inherit; } /* ── Dark mode Bootstrap outline button fix ────────────────── Bootstrap's btn-outline-* variants render with a near-white background (rgb(239,239,239)) in some dark contexts. Force transparent background on all outline variants in dark mode. */ /* ── Dark mode form controls ───────────────────────────────── Bootstrap form-control/form-select have white backgrounds. Override for dark theme so inputs blend with the dark surface. */ .dark .form-control, .dark .form-select { background-color: var(--steel-800, #24272f); color: var(--text, #e0e0e0); border-color: var(--steel-700, #353945); } .dark .form-control:focus, .dark .form-select:focus { background-color: var(--steel-700, #353945); color: var(--text, #e0e0e0); border-color: var(--hmi-red, #CC2229); box-shadow: 0 0 0 0.2rem var(--hmi-red-glow, rgba(204,34,41,0.2)); } .dark .form-control::placeholder { color: var(--steel-400, #8A91A3); } /* Browser-native form chrome (date picker, spinner) uses color-scheme to determine light/dark rendering. Setting color-scheme:dark on the html element tells Chrome to render all native controls in dark mode. */ .dark { color-scheme: dark; } /* Bootstrap's form-select uses a background-image SVG arrow that's black */ .dark .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; } .dark .dropdown-menu { background-color: var(--steel-800, #24272f); border-color: var(--steel-700, #353945); color: var(--text, #e0e0e0); } .dark .dropdown-item { color: var(--text, #e0e0e0); } .dark .dropdown-item:hover, .dark .dropdown-item:focus { background-color: var(--steel-700, #353945); color: #fff; } .dark .dropdown-header { color: var(--steel-400, #8A91A3); } .dark .modal-content { background-color: var(--surface, #1a1d21); border-color: var(--border, #353945); color: var(--text, #e0e0e0); } .dark .btn-outline-primary, .dark .btn-outline-secondary, .dark .btn-outline-success, .dark .btn-outline-danger, .dark .btn-outline-warning, .dark .btn-outline-info, .dark .btn-outline-dark { background-color: transparent; border-color: currentColor; } .dark .btn-outline-primary, .dark .btn-outline-secondary, .dark .btn-outline-dark { color: var(--clickable-action-text, #D5DAE6); } .dark .btn-outline-success { color: var(--clickable-success-text, #86EFAC); } .dark .btn-outline-danger { color: var(--clickable-danger-text, #FCA5A5); } .dark .btn-outline-warning { color: var(--clickable-warning-text, #FCD34D); } .dark .btn-outline-info { color: var(--clickable-info-text, #7DD3FC); } /* ── Dark-mode-safe surface alternative (replaces bg-light) ── bg-light is hardcoded white which breaks dark mode. This class uses CSS variables so it adapts automatically. */ .hmi-surface-alt { background-color: var(--surface-hover, #f7f8fa); } .dark .hmi-surface-alt { background-color: var(--steel-800, #24272f); } /* ── Print stylesheet (KKK1) ───────────────────────────────── Hide chrome (nav, mobile nav, profile, shortcuts overlay, action buttons, tab bars, modals, toasts). Optimize tables and content for clean paper output. Sales reps print quotes; estimators print cost breakdowns; shop floor prints job sheets. Keep data, lose UI. */ @media print { /* ---- Hide all navigation & chrome ---- */ .hmi-nav, .hmi-mobile-nav, .hmi-profile-wrapper, .hmi-profile-dropdown, .hmi-profile-backdrop, .hmi-nav-kbd-hint, .hmi-runtime-status, .hmi-fullscreen-pdf-shell, .hmi-fullscreen-pdf-backdrop, #keyboard-shortcut-overlay { display: none !important; } /* ---- Hide interactive controls ---- */ .hmi-tab-close, .btn, .hmi-btn, button:not(summary), .form-select, .form-check, input[type="checkbox"], input[type="radio"], .dropdown, .modal, .eng-modal, .toast-container, [role="alert"]:empty { display: none !important; } /* ---- Keep tab bar labels as a heading, but strip interactivity ---- */ .hmi-tab-bar { border-bottom: 1px solid #999; margin-bottom: 8px; overflow: visible; } .hmi-tab-bar .hmi-tab { display: none; } .hmi-tab-bar .hmi-tab.active, .hmi-tab-bar .hmi-tab[aria-selected="true"] { display: inline; background: none; border: none; font-weight: 700; font-size: 14pt; color: #000; padding: 0; } /* ---- Layout: full width, no padding chrome ---- */ .hmi-app { min-height: auto; } .hmi-main { padding: 0; background: #fff; } /* ---- Tables: clean borders, no hover, no sticky ---- */ .hmi-table, .table, table { width: 100%; border-collapse: collapse; font-size: 9pt; page-break-inside: auto; } .table thead, .hmi-table thead, .hmi-sticky-thead thead, .table thead th, .hmi-table thead th, .hmi-sticky-thead thead th { position: static !important; box-shadow: none; } .hmi-table th, .hmi-table td, .table th, .table td { border: 1px solid #ccc; padding: 4px 6px; background: #fff !important; color: #000 !important; } .hmi-table thead th, .table thead th { background: #f0f0f0 !important; font-weight: 700; } tr { page-break-inside: avoid; } /* ---- Cards: flatten for print ---- */ .hmi-card, .eng-card, .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; margin-bottom: 8px; } /* ---- Badges/pills: grayscale-safe ---- */ .hmi-badge, .eng-pill, .badge { border: 1px solid #999; background: #f5f5f5 !important; color: #000 !important; print-color-adjust: exact; } /* ---- Links: show URL for external links ---- */ a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; } /* Don't expand internal nav links */ .hmi-nav-link:after, .hmi-mobile-nav-link:after, a[href^="/"]:after { content: none; } /* ---- Typography: ensure readability ---- */ body { font-size: 10pt; color: #000; background: #fff; } /* ---- Page header: add a subtle branding line ---- */ .hmi-main:before { content: "HMI Sync — Harrison Metals Inc."; display: block; font-size: 8pt; color: #999; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 12px; } /* ---- Prevent blank pages from collapsible sections ---- */ details:not([open]) { display: none; } .hmi-scroll-top { display: none !important; } } /* ── Scroll-to-top button (KKK5) ──────────────────────────── Floating button in bottom-right corner. Appears after 400px of scroll via JS. Matches the HMI red accent. Hidden on mobile (bottom nav occupies that space). */ .hmi-scroll-top { position: fixed; bottom: 24px; right: 24px; z-index: 1050; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--hmi-red, #CC2229); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: opacity var(--transition-normal, 0.15s ease), transform var(--transition-normal, 0.15s ease); opacity: 0.85; } .hmi-scroll-top:hover { opacity: 1; transform: translateY(-2px); } @media (max-width: 767px) { .hmi-scroll-top { bottom: 72px; /* above mobile nav bar */ } }