@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;900&family=Red+Hat+Mono:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════ RAPID DISPATCH — Design Tokens ═══════════════════════════════════════════════════════════════════════════ */ :root { --rrn-navy: #0c2448; --rrn-navy-mid: #0e2d56; --rrn-navy-light: #142f5e; --rrn-green: #1cc478; --rrn-green-dim: #0d6e42; --rrn-mustard: #e8b81c; --rrn-orange: #f0854a; --rrn-teal: #8fd6d9; --bg: #070f1d; --surface: #0c1628; --surface2: #0f1e35; --border: #132040; --border2: #1a2d55; --text: #a8bcd4; --text-dim: #a8bcd4; --text-bright: #e8f0f8; --accent: var(--rrn-green); --accent-dim: #0b3d2a; --green: var(--rrn-green); --green-dim: var(--rrn-green-dim); --amber: var(--rrn-mustard); --red: var(--rrn-orange); --red-dim: #3d1a08; --teal: var(--rrn-teal); --sans: 'Red Hat Display', sans-serif; --mono: 'Red Hat Mono', monospace; --hour-height: 52px; --gutter-width: 42px; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES Applied via [data-theme="light"] on ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #eef2f8; --surface: #ffffff; --surface2: #f3f7fc; --border: #d8e2ee; --border2: #c2d0e2; --text: #4a6080; --text-dim: #7a90aa; --text-bright: #0c2448; --accent-dim: #d0f5e6; --red-dim: #fde8df; --red: #c94518; --amber: #b8920e; --green-dim: #d0f5e6; --rrn-green-dim: #12a063; /* darken dim green so it reads on white */ } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME — Component overrides for hardcoded dark colours ═══════════════════════════════════════════════════════════════════════════ */ /* ── Buttons ── */ [data-theme="light"] .btn-ok { border-color: rgba(21,128,61,.45); } [data-theme="light"] .btn-ok:hover:not(:disabled) { background: #15803d; color: #fff; } [data-theme="light"] .btn-danger { border-color: rgba(185,28,28,.45); } [data-theme="light"] .btn-danger:hover:not(:disabled) { background: #b91c1c; color: #fff; } /* ── err-box ── */ [data-theme="light"] .err-box { border-color: rgba(185,28,28,.35); } [data-theme="light"] .ok-box { border-color: rgba(11,128,76,.35); } /* ── Modal backdrop: lighter fog ── */ [data-theme="light"] .modal-backdrop { background: rgba(10,20,50,.45); } /* ── Global search dropdown shadow ── */ [data-theme="light"] .global-search-results { box-shadow: 0 8px 28px rgba(0,0,40,.12); } /* ── User menu shadow ── */ [data-theme="light"] .user-menu { box-shadow: 0 8px 24px rgba(0,0,40,.14); } /* ── Admin: active tab count badge ── */ [data-theme="light"] .admin-tab.active .admin-tab-count { background: rgba(28,196,120,.12); border-color: rgba(28,196,120,.25); } [data-theme="light"] .admin-section .admin-tab.active { background: rgba(28,196,120,.1); border-color: rgba(28,196,120,.25); } [data-theme="light"] .admin-section .admin-tab.active .admin-tab-count { background: rgba(28,196,120,.15); border-color: rgba(28,196,120,.25); } /* ── Role capability picker ── */ [data-theme="light"] .role-capability-intro { background: linear-gradient(180deg, #ffffff, #f6f9fd); border-color: var(--border); box-shadow: 0 6px 18px rgba(12,36,72,.05); } [data-theme="light"] .role-capability-summary-pill { background: var(--surface2); border-color: var(--border); color: var(--text); } [data-theme="light"] .role-capability-summary-pill strong { color: var(--text-bright); } [data-theme="light"] .role-capability-summary-pill--active { background: rgba(28,196,120,.12); border-color: rgba(28,196,120,.25); } [data-theme="light"] .role-capability-app { background: var(--surface); border-color: var(--border); box-shadow: 0 4px 14px rgba(12,36,72,.04); } [data-theme="light"] .role-capability-app--platform { border-color: rgba(12,36,72,.14); box-shadow: inset 0 0 0 1px rgba(12,36,72,.04), 0 4px 14px rgba(12,36,72,.04); } [data-theme="light"] .role-capability-app-head { background: var(--surface2); border-bottom-color: var(--border); } [data-theme="light"] .role-capability-app-kicker { color: var(--rrn-green-dim); } [data-theme="light"] .role-capability-item { background: #fbfdff; border-color: var(--border); } [data-theme="light"] .role-capability-item:hover { background: var(--surface2); border-color: var(--border2); } [data-theme="light"] .role-capability-item--selected { background: rgba(28,196,120,.10); border-color: rgba(28,196,120,.28); } [data-theme="light"] .role-capability-state { color: #0c2448; } [data-theme="light"] .role-capability-state--muted { background: var(--surface2); border-color: var(--border); color: var(--text-dim); } [data-theme="light"] .role-capability-internal-badge, [data-theme="light"] .role-tenant-warning { border-color: rgba(180,120,10,.4); background: rgba(217,164,64,.14); color: #92600a; } /* ── Conflict banner ── */ [data-theme="light"] .conflict-banner { background: rgba(234,88,12,.08); border-bottom-color: rgba(234,88,12,.2); color: #c2410c; } [data-theme="light"] .conflict-row { border-bottom-color: var(--border); } /* ── Availability calendar ── */ [data-theme="light"] .avail-cal-day:hover { background: var(--surface2); } [data-theme="light"] .avail-cal-day.weekend { background: #e9eef6; } [data-theme="light"] .avail-cal-day.bank-hol { background: #ede9fe; } [data-theme="light"] .avail-cal-bk { color: #5b21b6; background: rgba(91,33,182,.09); border-left-color: #7c3aed; } /* ── Leaflet tile tinting ── */ /* Applied only when the dark layer is active (.rrn-tiles-dark set in JS) */ .rrn-tiles-dark .leaflet-tile-pane, #login-map .leaflet-tile-pane { filter: sepia(0.6) hue-rotate(190deg) saturate(2.2) brightness(0.78); } [data-theme="light"] .leaflet-control-attribution { background: rgba(240,244,248,.92) !important; color: var(--text-dim) !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; overflow: hidden; } .app-shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } /* Content region below the nav. This MUST live in the shared (global) sheet: .app-content is rendered by , so a per-app scoped MainLayout.razor.css rule never matches it (the scope id belongs to the layout, not the shell component) and silently does nothing. A flex column that fills the remaining viewport lets full-height workspace pages (the Dispatch board, the jobs queue) use `flex: 1; min-height: 0` to fill and own their internal scroll, while `overflow-y: auto` lets ordinary flow pages (admin, reports, lists) — which keep their default `min-height: auto` and never shrink below their content — scroll here. */ .app-content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; /* Reserve the scrollbar gutter at all times so the centred page column does not shift sideways when a page goes from "no scrollbar" (still loading) to "has scrollbar" (content rendered). Stops the horizontal jump on load. */ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } /* Non-production pages render EnvironmentBanner above the app shell. Keep the app shell inside the visible viewport rather than letting its bottom be clipped by body { overflow:hidden; }. */ .env-banner + .app-shell { height: calc(100vh - 28px); height: calc(100dvh - 28px); } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL TOPBAR ═══════════════════════════════════════════════════════════════════════════ */ .topbar { display: flex; align-items: center; height: 48px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .topbar-brand { padding: 0 20px; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; } .brand-wordmark { font-family: var(--sans); font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--text-bright); white-space: nowrap; } .brand-wordmark span { color: var(--rrn-green); } /* App switcher (brand trigger + popover) */ .app-switcher { position: relative; } .app-switcher-trigger { height: 100%; display: inline-flex; align-items: center; gap: 10px; border: none; background: transparent; color: inherit; cursor: pointer; padding: 0 18px 0 0; } .app-switcher-trigger:hover .brand-wordmark { color: var(--accent); } .app-switcher-caret { font-size: 9px; color: var(--text-dim); transition: transform .2s ease, color .2s ease; } .app-switcher-caret.open { transform: rotate(180deg); color: var(--accent); } .app-switcher-menu { position: absolute; top: calc(100% + 8px); left: 10px; min-width: 300px; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; z-index: 1200; box-shadow: 0 18px 42px rgba(0,0,0,.46); } .app-switcher-menu--pop { animation: app-switcher-pop .22s cubic-bezier(.22,.84,.29,1.15) both; } @keyframes app-switcher-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .app-switcher-title { padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .app-switcher-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.02); transition: background .15s ease, transform .15s ease; } .app-switcher-item:hover { background: var(--surface2); transform: translateX(2px); } .app-switcher-item--active { background: rgba(0, 255, 140, 0.06); } .app-switcher-item--current { background: rgba(255,255,255,0.02); color: var(--text-dim); cursor: default; opacity: .72; } .app-switcher-item--current:hover { background: rgba(255,255,255,0.02); transform: none; } .app-switcher-item--accent { border-left: 2px solid var(--accent); } .app-switcher-item--button { width: 100%; border: none; text-align: left; background: transparent; font: inherit; cursor: pointer; } .app-switcher-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); font-size: 14px; flex-shrink: 0; } .app-switcher-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .app-switcher-text strong { font-size: 13px; color: var(--text-bright); } .app-switcher-text small { font-size: 11px; color: var(--text-dim); } /* Environment banner (non-prod UI) */ .env-banner { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .env-banner-left { display: flex; align-items: center; gap: 8px; } .env-banner-right { color: var(--text-dim); opacity: .9; } .env-pill { padding: 3px 8px; border-radius: 999px; font-weight: 600; border: 1px solid transparent; } .env-app-name { opacity: .9; } .env-meta { font-size: 9px; } .env-banner--staging { background: rgba(59,130,246,.12); color: #bfdbfe; } .env-banner--staging .env-pill { background: rgba(59,130,246,.32); border-color: rgba(59,130,246,.6); color: #eff6ff; } .env-banner--local { background: rgba(28,196,120,.16); color: #bbf7d0; } .env-banner--local .env-pill { background: rgba(28,196,120,.38); border-color: rgba(28,196,120,.7); color: #ecfdf5; } [data-theme="light"] .env-banner--staging { background: rgba(59,130,246,.08); color: #1d4ed8; } [data-theme="light"] .env-banner--staging .env-pill { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); color: #1d4ed8; } [data-theme="light"] .env-banner--local { background: rgba(22,163,74,.06); color: #166534; } [data-theme="light"] .env-banner--local .env-pill { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); color: #166534; } .app-switcher-current-tag { margin-top: 2px; font-family: var(--mono); font-size: 9px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim) !important; } .topbar-nav { display: flex; align-items: stretch; height: 100%; } .topbar-nav-extra { display: flex; align-items: center; margin-left: 10px; } .nav-item { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 0 18px; height: 100%; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--border); transition: color .15s, background .15s; white-space: nowrap; } .nav-item:hover { color: var(--text-bright); background: var(--surface2); } .nav-item.active { color: var(--accent); background: var(--accent-dim); border-bottom: 2px solid var(--accent); } .nav-badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; } .topbar-spacer { flex: 1; } /* Theme toggle button */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border2); border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer; transition: color .15s, background .15s, border-color .15s; margin-right: 10px; flex-shrink: 0; } .theme-toggle-btn:hover { color: var(--text-bright); background: var(--surface2); border-color: var(--accent); } /* User chip */ .topbar-user { position: relative; display: flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--border); height: 100%; } .user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 5px 8px; border-radius: 6px; transition: background .15s; } .user-chip:hover, .user-chip.open { background: var(--surface2); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); } .user-chip-name { font-size: 13px; font-weight: 600; color: var(--text-bright); } .user-chip-caret { color: var(--text-dim); font-size: 9px; } .user-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; min-width: 210px; z-index: 1000; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); } .user-menu-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .user-menu-header strong { color: var(--text-bright); font-size: 13px; } .user-menu-header span { color: var(--text-dim); font-size: 12px; } .user-menu-role { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent) !important; } .user-menu-item { display: block; width: 100%; padding: 9px 14px; color: var(--text); font-size: 13px; text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; transition: background .15s; font-family: var(--sans); } .user-menu-item:hover { background: var(--surface2); color: var(--text-bright); } .user-menu-logout { color: var(--red); } .user-menu-logout:hover { background: var(--red-dim) !important; color: var(--red) !important; } .user-menu-backdrop { position: fixed; inset: 0; z-index: 999; } /* ═══════════════════════════════════════════════════════════════════════════ CONTEXTUAL SUB-BAR (each page renders its own controls here) ═══════════════════════════════════════════════════════════════════════════ */ .sub-bar { display: flex; align-items: center; height: 40px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 4px; gap: 2px; } .sub-bar-spacer { flex: 1; } /* Date navigator */ .sub-bar-date { display: flex; align-items: center; height: 100%; } .sub-bar-nav { width: 32px; height: 100%; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; font-family: var(--mono); transition: color .15s, background .15s; } .sub-bar-nav:hover { color: var(--text-bright); background: var(--surface); } .sub-bar-date-label { font-family: var(--mono); font-size: 13px; color: var(--text-bright); padding: 0 8px; min-width: 160px; text-align: center; white-space: nowrap; } .sub-bar-dow { color: var(--text-dim); margin-right: 4px; } .sub-bar-date-clickable { cursor: pointer; border-bottom: 1px dashed var(--text-dim); } .sub-bar-date-clickable:hover { color: var(--accent); border-bottom-color: var(--accent); } .sub-bar-date-input { font-family: var(--mono); font-size: 13px; color: var(--text-bright); background: var(--surface); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 6px; outline: none; width: 140px; } /* View toggle */ .sub-bar-views { display: flex; align-items: center; height: 100%; margin-left: 4px; } .sub-view-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 0 14px; height: 100%; cursor: pointer; transition: color .15s; } .sub-view-btn:hover { color: var(--text-bright); } .sub-view-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* Status */ .sub-bar-status { display: flex; align-items: center; gap: 7px; padding: 0 14px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); border-left: 1px solid var(--border); height: 100%; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); flex-shrink: 0; } .status-dot.busy { background: var(--amber); box-shadow: 0 0 5px var(--amber); animation: blink 1s infinite; } /* Admin back link */ .sub-bar-back { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 0 16px; height: 100%; display: flex; align-items: center; border-right: 1px solid var(--border); transition: color .15s, background .15s; } .sub-bar-back:hover { color: var(--text-bright); background: var(--surface); } @keyframes blink { 50% { opacity: .3; } } /* ═══════════════════════════════════════════════════════════════════════════ SHARED BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ .btn { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; border-radius: 5px; padding: 7px 14px; border: none; cursor: pointer; transition: background .15s, opacity .15s; display: inline-flex; align-items: center; gap: 5px; } .btn:disabled { opacity: .35; cursor: not-allowed; } .btn-sm { padding: 4px 10px; font-size: 9px; } .btn-full { width: 100%; padding: 10px; margin-top: 4px; justify-content: center; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { filter: brightness(1.12); } .btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); } .btn-ghost:hover:not(:disabled) { background: var(--border2); } .btn-ghost.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); } .btn-ok { background: var(--green-dim); color: var(--green); border: 1px solid #166534; } .btn-ok:hover:not(:disabled) { background: #166534; color: #fff; } .btn-danger { background: var(--red-dim); color: var(--red); border: 1px solid #7f1d1d; } .btn-danger:hover:not(:disabled) { background: #7f1d1d; color: #fff; } .btn-pill { border-radius: 20px; padding: 8px 20px; } .btn-secondary { background: var(--surface); color: var(--text-bright); border: 1px solid var(--border2); } .btn-secondary:hover:not(:disabled) { background: var(--surface2); } .app-btn-icon { display: inline-flex; align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════ SHARED FORM ELEMENTS ═══════════════════════════════════════════════════════════════════════════ */ .f-group { margin-bottom: 12px; } .f-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; } .f-error { font-size: 11px; color: var(--red); margin-top: 4px; line-height: 1.4; } .f-label { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-dim); letter-spacing: 1.2px; text-transform: uppercase; display: block; margin-bottom: 5px; } .f-required { color: var(--accent); margin-left: 4px; } .f-input, .f-select, .f-textarea { font-family: var(--sans); font-size: 13px; background: var(--bg); border: 1px solid var(--border2); color: var(--text-bright); border-radius: 6px; padding: 8px 10px; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; -webkit-appearance: none; color-scheme: dark; } [data-theme="light"] .f-input, [data-theme="light"] .f-select, [data-theme="light"] .f-textarea { color-scheme: light; } .f-textarea { resize: vertical; min-height: 60px; } .f-input::placeholder { color: var(--text-dim); } .f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); } .f-input:disabled, .f-select:disabled, .f-textarea:disabled { opacity: .5; cursor: not-allowed; } .f-row { display: flex; gap: 10px; } .f-row .f-group { flex: 1; } /* ── Shared UK vehicle registration field ───────────────────────────────────── */ .uk-plate { flex-shrink: 0; display: inline-flex; align-items: stretch; border-radius: 5px; overflow: hidden; border: 2px solid #1a1a1a; cursor: default; height: 36px; min-width: 90px; background: #f7d117; } .uk-plate--typing { border-style: dashed; cursor: text; } .uk-plate--disabled { opacity: .65; cursor: inherit; } .uk-plate--compact { height: 24px; min-width: 70px; border-width: 1px; border-radius: 4px; vertical-align: middle; } .uk-plate--compact .uk-plate-strip { width: 17px; font-size: 6px; } .uk-plate--compact .uk-plate-text { padding: 0 7px; font-size: 12px; letter-spacing: 1px; } .uk-plate-strip { display: flex; align-items: center; justify-content: center; width: 22px; background: #003399; color: #fff; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .5px; } .uk-plate-text { display: flex; align-items: center; padding: 0 10px; font-family: 'UKNumberPlate', 'Segoe UI', monospace; font-size: 16px; font-weight: 800; color: #1a1a1a; letter-spacing: 1.5px; white-space: nowrap; } .uk-plate-text--placeholder { font-size: 12px; font-weight: 600; color: #5f5a35; letter-spacing: 0; } .uk-plate-input { border: none; outline: none; background: transparent; font-family: 'UKNumberPlate', 'Segoe UI', monospace; font-size: 16px; font-weight: 800; color: #1a1a1a; letter-spacing: 1.5px; padding: 0 8px; width: 140px; min-width: 0; } .uk-plate-input::placeholder { color: #999; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ SHARED MODAL ═══════════════════════════════════════════════════════════════════════════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal-center-wrap { width: 480px; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; display: flex; flex-direction: column; animation: popIn .18s cubic-bezier(.4,0,.2,1); max-height: 90vh; overflow: hidden; } .modal-wide { width: 640px; } .modal-large { width: 880px; max-width: 95vw; } .modal { background: var(--surface); display: flex; flex-direction: column; overflow: hidden; } .modal-center { width: 560px; max-width: 95vw; max-height: 90vh; border-radius: 10px; border: 1px solid var(--border2); animation: popIn .18s cubic-bezier(.4,0,.2,1); } .modal-narrow { width: 400px !important; } /* Defined after .modal-center / .modal-wide so its width wins the cascade. */ .modal-xl { width: 98vw !important; max-width: 98vw !important; max-height: 94vh; } @keyframes popIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } .modal-head { padding: 14px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .modal-head-info { display: flex; align-items: baseline; gap: 10px; } .modal-title { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-bright); letter-spacing: 1.5px; text-transform: uppercase; } .modal-ref { font-family: var(--mono); font-size: 11px; color: var(--accent); } .modal-body { padding: 18px 20px; overflow-y: auto; } .modal-body-pad { padding: 20px 22px; overflow-y: auto; } .modal-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 14px; } .modal-section-divider { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* ── Split modal (two-column edit layout) ── */ .modal-split { width: 920px; } .modal-split .modal-body-pad { padding: 0; overflow: hidden; flex: 1; display: flex; min-height: 0; } .edit-layout { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: min(calc(90vh - 120px), 600px); } .edit-form-col, .edit-history-col { overflow-y: auto; padding: 20px 22px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; display: flex; flex-direction: column; } .edit-form-col { border-right: 1px solid var(--border); } /* Notes field stretches to fill remaining form column space */ .edit-notes-grow { flex: 1; display: flex; flex-direction: column; min-height: 60px; } .edit-notes-grow .f-group { flex: 1; display: flex; flex-direction: column; } .edit-notes-fill { flex: 1; resize: none; } /* ── Edit Right Panel (CRM Notes + History tabs) ──────────────────────── */ .erp-no-scroll { overflow: hidden !important; } .erp-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .erp-tab { flex: 0 0 auto; padding: 7px 10px; border: none; background: none; color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .erp-tab:hover { color: var(--text); } .erp-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .erp-tab-count { font-family: var(--mono); font-size: 9px; background: var(--bg-hover); padding: 1px 5px; border-radius: 6px; } .erp-tab.active .erp-tab-count { background: rgba(56, 189, 248, .15); } .erp-notes-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .erp-notes-scroll { flex: 1; overflow-y: auto; padding: 6px 0; min-height: 0; scrollbar-width: thin; } .erp-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 24px 0; text-align: center; } .erp-entry { padding: 8px 0; border-bottom: 1px solid var(--border); } .erp-entry:last-child { border-bottom: none; } .erp-entry-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; } .erp-author { font-size: 11px; font-weight: 600; color: var(--text-bright); } .erp-time { font-family: var(--mono); font-size: 9px; color: var(--text-dim); } .erp-body { font-size: 12px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .erp-add-note { flex-shrink: 0; padding: 8px 0 0; border-top: 1px solid var(--border); } .erp-note-input { width: 100%; resize: none; min-height: 48px; font-size: 12px; } .erp-add-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; } .erp-followup { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px; background: var(--surface-alt, rgba(255,255,255,.04)); border-radius: 6px; border: 1px dashed var(--border); } .erp-followup-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); white-space: nowrap; } .erp-followup-input { flex: 1; min-width: 0; padding: 4px 8px !important; font-size: 12px !important; } .erp-followup-changed { font-size: 10px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .erp-error { font-size: 11px; color: var(--red, #e04b4b); flex: 1; } /* ── CRM Details panel (loading state) ──────────────────────────────── */ .crm-panel-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 0; font-size: 12px; color: var(--text-dim); } /* ── Order Lines Panel ──────────────────────────────────────────────── */ .order-lines-scroll { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; } .ol-section { margin-bottom: 16px; } .ol-section:last-child { margin-bottom: 0; } .ol-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .ol-section-header-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .ol-section-totals { flex-shrink: 0; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent); text-align: right; line-height: 1.35; max-width: 55%; } .ol-section-icon { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; } .ol-icon-parts { background: rgba(56, 189, 248, .12); color: #38bdf8; } .ol-icon-parts::before { content: "P"; font-weight: 700; } .ol-icon-labour { background: rgba(168, 85, 247, .12); color: #a855f7; } .ol-icon-labour::before { content: "L"; font-weight: 700; } .ol-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-bright); } .ol-section-count { font-size: 10px; font-weight: 600; background: rgba(255,255,255,.06); color: var(--text-dim); padding: 1px 6px; border-radius: 8px; } .ol-cards { display: flex; flex-direction: column; gap: 6px; } .ol-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; transition: border-color .15s; } .ol-card:hover { border-color: var(--border2); } .ol-card-labour { border-left: 2px solid rgba(168, 85, 247, .35); } .ol-card-main { display: flex; align-items: baseline; gap: 8px; } .ol-desc { font-size: 12px; color: var(--text-bright); font-weight: 500; flex: 1; line-height: 1.4; } .ol-part-no { font-size: 10px; font-family: var(--mono); color: var(--text-dim); background: rgba(255,255,255,.04); padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .ol-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .ol-chip { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.05); color: var(--text-dim); } .ol-chip-dmg { background: rgba(239, 68, 68, .1); color: #f87171; } .ol-card-money { display: flex; gap: 12px; margin-top: 6px; } .ol-money { font-size: 11px; color: var(--text-dim); } .ol-money strong { color: var(--text-bright); font-weight: 600; } .ol-card-details { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } /* ── Before Photos Panel ────────────────────────────────────────────── */ .bp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 10px 0; overflow-y: auto; scrollbar-width: thin; } .bp-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s; } .bp-thumb:hover { border-color: var(--accent); transform: scale(1.03); } .bp-thumb--active { border-color: var(--accent); } .bp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bp-thumb-num { position: absolute; bottom: 4px; right: 4px; font-size: 9px; font-weight: 700; background: rgba(0,0,0,.65); color: #fff; padding: 1px 5px; border-radius: 4px; } .bp-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .bp-lightbox-inner { position: relative; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .bp-caption { width: 100%; max-width: 88vw; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 8px 14px; background: rgba(255,255,255,.08); border-radius: 10px; color: #fff; backdrop-filter: blur(8px); } .bp-caption-title { font-size: 14px; font-weight: 600; line-height: 1.3; word-break: break-word; flex: 1; min-width: 0; } .bp-caption-counter { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: rgba(255,255,255,.65); flex-shrink: 0; } .bp-img-viewport { overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 88vw; max-height: 75vh; border-radius: 8px; background: rgba(0,0,0,.4); user-select: none; -webkit-user-select: none; touch-action: pan-y; } .bp-grab { cursor: grab; } .bp-grabbing { cursor: grabbing; } .bp-img-viewport img { max-width: 100%; max-height: 75vh; object-fit: contain; transition: transform .15s ease; transform-origin: center center; pointer-events: none; } .bp-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 12px; background: rgba(255,255,255,.08); border-radius: 10px; padding: 5px 10px; backdrop-filter: blur(8px); } .bp-nav { background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 22px; padding: 4px 12px; border-radius: 8px; cursor: pointer; transition: background .15s; line-height: 1; } .bp-nav:hover:not(:disabled) { background: rgba(255,255,255,.2); } .bp-nav:disabled { opacity: .3; cursor: default; } .bp-tool { background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.85); font-size: 14px; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background .15s; font-weight: 600; min-width: 32px; text-align: center; } .bp-tool:hover { background: rgba(255,255,255,.18); color: #fff; } .bp-separator { width: 1px; height: 18px; background: rgba(255,255,255,.15); margin: 0 2px; } .bp-counter { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; padding: 0 6px; white-space: nowrap; } .bp-close { position: absolute; top: -8px; right: -8px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 20px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; -webkit-tap-highlight-color: transparent; } .bp-close:hover { background: rgba(255,255,255,.25); } /* ── Lightbox: fullscreen variant (mobile-first customer flow) ──────────── */ .bp-lightbox--fullscreen { background: rgba(0, 0, 0, .94); align-items: stretch; justify-content: stretch; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .bp-lightbox-inner--fullscreen { max-width: none; max-height: none; flex: 1; width: 100%; height: 100%; align-items: stretch; } .bp-img-viewport--fullscreen { flex: 1; max-width: none; max-height: none; width: 100%; padding: 12px; background: transparent; border-radius: 0; position: relative; } .bp-img-viewport--fullscreen img { max-width: 100%; max-height: 100%; border-radius: 4px; } .bp-edge-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent; } .bp-edge-nav:hover { background: rgba(255, 255, 255, .22); } .bp-edge-nav:active { transform: translateY(-50%) scale(.94); } .bp-edge-nav--prev { left: 12px; } .bp-edge-nav--next { right: 12px; } .bp-footer { flex-shrink: 0; padding: 12px 16px 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 10px; color: #fff; } .bp-footer-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bp-footer-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .bp-close--inline { position: static; width: auto; height: 44px; padding: 0 16px 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s; } .bp-close--inline:hover { background: rgba(255, 255, 255, .18); } .bp-close--inline:active { transform: scale(.96); } /* ── Lightbox responsive (mobile + landscape) ───────────────────────────── */ @media (max-width: 600px) { .bp-lightbox-inner:not(.bp-lightbox-inner--fullscreen) { max-width: 100vw; max-height: 100vh; padding: 0 8px; } .bp-img-viewport:not(.bp-img-viewport--fullscreen) { max-width: calc(100vw - 16px); max-height: 60vh; } .bp-img-viewport:not(.bp-img-viewport--fullscreen) img { max-height: 60vh; } .bp-caption { max-width: calc(100vw - 16px); padding: 7px 12px; margin-bottom: 8px; } .bp-caption-title { font-size: 13px; } .bp-caption-counter { font-size: 11px; } .bp-toolbar { gap: 4px; padding: 4px 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } .bp-tool { font-size: 13px; padding: 5px 8px; min-width: 30px; } .bp-nav { font-size: 20px; padding: 4px 10px; } .bp-counter { font-size: 11px; padding: 0 4px; } .bp-close:not(.bp-close--inline) { top: 4px; right: 4px; width: 36px; height: 36px; } .bp-edge-nav { width: 40px; height: 40px; } .bp-edge-nav--prev { left: 8px; } .bp-edge-nav--next { right: 8px; } .bp-img-viewport--fullscreen { padding: 8px; } .bp-close--inline { height: 40px; font-size: 12px; padding: 0 14px 0 10px; } } @media (orientation: landscape) and (max-height: 500px) { .bp-lightbox-inner:not(.bp-lightbox-inner--fullscreen) { max-height: 100vh; padding: 0 8px; } .bp-img-viewport:not(.bp-img-viewport--fullscreen) { max-height: 62vh; } .bp-img-viewport:not(.bp-img-viewport--fullscreen) img { max-height: 62vh; } .bp-caption { padding: 4px 10px; margin-bottom: 4px; } .bp-caption-title { font-size: 12px; } .bp-toolbar { margin-top: 4px; padding: 3px 6px; } .bp-close:not(.bp-close--inline) { top: 4px; right: 4px; width: 30px; height: 30px; font-size: 18px; } .bp-img-viewport--fullscreen { padding: 8px 64px 8px; } .bp-footer { padding: 8px 12px 10px; gap: 6px; } .bp-close--inline { height: 36px; font-size: 11px; padding: 0 12px 0 9px; } } @media (max-width: 768px) { .modal-split { width: 95vw; } .modal-split .modal-body-pad { overflow-y: auto; display: block; } .edit-layout { display: block; height: auto; } .edit-form-col { border-right: none; border-bottom: 1px solid var(--border); } .edit-history-col { max-height: 300px; } } /* ═══════════════════════════════════════════════════════════════════════════ SHARED UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ .mono { font-family: var(--mono); font-size: 11px; color: var(--text); } .dim { color: var(--text-dim); } .mt-sm { margin-top: 12px; } .err-box { background: var(--red-dim); border: 1px solid #7f1d1d; border-radius: 6px; padding: 10px 13px; font-size: 12px; color: var(--red); margin-bottom: 12px; } .ok-box { background: var(--green-dim); border: 1px solid rgba(28,196,120,.4); border-radius: 6px; padding: 10px 13px; font-size: 12px; color: var(--green); margin-bottom: 12px; } .spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 4px; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 28px 14px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .empty-state span { display: block; font-size: 26px; margin-bottom: 8px; } /* ── Status pills (shared across apps) ──────────────────────────────────── */ .job-status { font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 20px; border: 1px solid; white-space: nowrap; } .status-amber { background: rgba(232,184,28,.12); color: var(--rrn-mustard); border-color: rgba(232,184,28,.3); } .status-blue { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.3); } .status-orange { background: rgba(240,133,74,.12); color: var(--rrn-orange); border-color: rgba(240,133,74,.3); } .status-green { background: rgba(28,196,120,.12); color: var(--rrn-green); border-color: rgba(28,196,120,.3); } .status-red { background: rgba(248,81,73,.12); color: #f85149; border-color: rgba(248,81,73,.3); } .status-dim { background: rgba(107,114,128,.1); color: #6b7280; border-color: rgba(107,114,128,.3); } /* ═══════════════════════════════════════════════════════════════════════════ LOGIN PAGE — split layout ═══════════════════════════════════════════════════════════════════════════ */ /* Outer split */ .login-split { display: flex; min-height: 100vh; width: 100%; overflow: hidden; background: var(--bg); } /* ── Left panel: animated map ── */ .login-panel-left { flex: 1; position: relative; overflow: hidden; background: #070f1d; /* dark bg while map tiles load */ display: flex; flex-direction: column; justify-content: flex-end; } .login-panel-topbar { position: absolute; top: 1.5rem; left: 1.75rem; z-index: 560; } .login-app-switcher__trigger { height: auto; padding: 0.55rem 0.8rem 0.55rem 0.9rem; border-radius: 999px; background: rgba(7, 15, 29, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); backdrop-filter: blur(12px); } .login-app-switcher--static { display: inline-flex; flex-direction: column; gap: 0.15rem; height: auto; padding: 0.55rem 0.9rem; border-radius: 999px; background: rgba(7, 15, 29, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); backdrop-filter: blur(12px); } .login-app-switcher__label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(168, 188, 212, 0.62); } .login-app-switcher__menu { left: 0; top: calc(100% + 10px); } .login-app-switcher__item { width: 100%; border: none; text-align: left; background: transparent; font: inherit; cursor: pointer; } .login-app-switcher__backdrop { position: fixed; inset: 0; z-index: 540; background: transparent; } /* Map fills the panel */ .login-panel-left #login-map { position: absolute; inset: 0; } /* Leaflet container resets for decorative use */ .login-panel-left .leaflet-container { background: #070f1d; /* dark bg while tiles load */ cursor: default !important; } /* Canvas overlay handles the bottom fade — no ::after needed */ .login-panel-content { position: relative; z-index: 500; /* above canvas overlay (z-index 450) */ padding: 2.5rem 3rem; display: flex; flex-direction: column; gap: 2rem; } .login-panel-brand .brand-wordmark { font-size: 15px; letter-spacing: 4px; color: #ffffff; text-shadow: 0 0 24px rgba(255,255,255,0.25); } .login-panel-brand .brand-wordmark span { color: var(--rrn-green); text-shadow: 0 0 20px rgba(16,185,129,0.4); } .login-panel-tagline { margin-top: .6rem; color: rgba(168, 188, 212, 0.65); font-size: .85rem; font-weight: 400; letter-spacing: .03em; } /* Stats row */ .login-panel-stats { display: flex; align-items: center; gap: 0; } .lps-item { display: flex; flex-direction: column; gap: 3px; padding-right: 1.5rem; } .lps-val { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--rrn-green); letter-spacing: .08em; } .lps-label { font-family: var(--mono); font-size: .62rem; color: rgba(168, 188, 212, 0.45); letter-spacing: .1em; text-transform: uppercase; } .lps-divider { width: 1px; height: 28px; background: rgba(19, 32, 64, 0.8); margin-right: 1.5rem; flex-shrink: 0; } /* ── Right panel: form ── */ .login-panel-right { width: 420px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 3rem 2.5rem; } /* ── Form wrapper ── */ .login-form-wrap { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 1.25rem; } .login-form-header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; } .login-form-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; } .login-form-title { color: var(--text-bright); font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .login-form-sub { color: var(--text-dim); font-size: .85rem; } .login-footer { text-align: center; color: var(--text-dim); font-size: .75rem; font-family: var(--mono); opacity: .55; margin-top: .5rem; } /* ── Shared form elements ── */ .login-field { display: flex; flex-direction: column; gap: .4rem; } .login-field label { color: var(--text-dim); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .login-field input { background: var(--bg); border: 1px solid var(--border2); border-radius: 7px; color: var(--text-bright); padding: .65rem .85rem; font-size: .9rem; outline: none; transition: border-color .15s, box-shadow .15s; font-family: var(--sans); width: 100%; } .login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28, 196, 120, 0.12); } .login-btn { background: var(--accent); color: #000; border: none; border-radius: 7px; padding: .75rem; font-size: .9rem; font-weight: 700; cursor: pointer; transition: filter .15s; margin-top: .35rem; display: flex; align-items: center; justify-content: center; gap: .5rem; letter-spacing: .02em; } .login-btn:hover:not(:disabled) { filter: brightness(1.08); } .login-btn:disabled { opacity: .55; cursor: not-allowed; } .login-btn-sso { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); } .login-btn-sso:hover:not(:disabled) { filter: none; background: var(--surface-3); } .login-btn--ghost { margin-top: 0.5rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .login-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text-primary); } .login-links { display: flex; justify-content: space-between; gap: .75rem; margin-top: .25rem; font-size: .82rem; } .login-links a { color: var(--accent); text-decoration: none; } .login-links a:hover { text-decoration: underline; } .platform-email-key-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .platform-email-key-current { font-size: 11px; min-width: 90px; } .platform-email-key-input { flex: 1; min-width: 260px; } .login-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .8rem; margin-top: .5rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-error { background: var(--red-dim); border: 1px solid rgba(127, 29, 29, 0.4); color: var(--red); border-radius: 7px; padding: .6rem .85rem; font-size: .85rem; } /* Identifier-first: the chosen email shown on the credential step, with a "Change" link. */ .login-identity { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--bg); border: 1px solid var(--border2); border-radius: 7px; padding: .55rem .6rem .55rem .85rem; } .login-identity-email { color: var(--text-bright); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login-identity-change { background: none; border: none; color: var(--accent); font-size: .8rem; font-weight: 600; cursor: pointer; padding: .15rem .4rem; flex-shrink: 0; } .login-identity-change:hover:not(:disabled) { text-decoration: underline; } .login-identity-change:disabled { opacity: .55; cursor: not-allowed; } /* ── Responsive: stack on narrow screens ── */ @media (max-width: 720px) { .login-panel-left { display: none; } .login-panel-right { width: 100%; border-left: none; min-height: 100vh; } } .auth-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-dim); font-size: .9rem; } /* ═══════════════════════════════════════════════════════════════════════════ ADMIN SECTIONS (shared between Admin page and any admin components) ═══════════════════════════════════════════════════════════════════════════ */ .admin-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: visible; } .section-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); gap: 16px; } /* Body wrapper for everything below the header. Gives ALL content the standard horizontal inset by default so nothing sits flush against the card border. Full-bleed components (tables, filter bars, pagers, empty states) bring their own 22px padding and span edge-to-edge, so they cancel this inset with a matching negative margin — leaving them pixel-for-pixel unchanged while ad-hoc content (forms, sliders, text) is correctly padded with no per-panel CSS. */ .admin-section-body { padding-left: 22px; padding-right: 22px; } .admin-section-body > .admin-table, .admin-section-body > .data-table, .admin-section-body > .admin-filter-row, .admin-section-body > .admin-pager, .admin-section-body > .admin-empty, .admin-section-body > .report-table-card { margin-left: -22px; margin-right: -22px; } .section-title { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-bright); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; } .section-sub { font-size: 12px; color: var(--text); } .save-confirm { font-family: var(--mono); font-size: 10px; color: var(--green); align-self: center; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); background: transparent; } .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: rgba(255,255,255,0.02); } .status-badge { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; border: 1px solid transparent; } .table-head { padding: 7px 22px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; display: grid; gap: 12px; } .table-row { padding: 11px 22px; border-bottom: 1px solid var(--border); align-items: center; transition: background .12s; display: grid; gap: 12px; min-width: 0; } .table-row:last-child { border-bottom: none; } .table-row:hover { background: var(--surface2); } /* Grid cells default to min-width:auto, so wide no-wrap content (chips, emails, long names) can't shrink and spills into the next column. Forcing min-width:0 on every cell lets the column contain its content — the general fix so tables don't overlap regardless of what's inside them. */ .table-head > *, .table-row > * { min-width: 0; } .jt-cols { grid-template-columns: 2fr 1fr 1fr 1fr 120px; } .eng-cols { grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr 2fr 120px; } .usr-cols { /* Actions column is a FIXED width (not auto) so the header and every row share identical tracks — otherwise rows with 3 buttons (Edit/Reset MFA/Delete) grow that column and shift all the other columns out of alignment with single-button rows. */ grid-template-columns: minmax(120px, 1.05fr) minmax(190px, 1.35fr) minmax(120px, .9fr) minmax(130px, 1.05fr) minmax(70px, .55fr) minmax(70px, .55fr) minmax(90px, .65fr) 240px; min-width: 1030px; } /* Customer-link messaging log columns: ▸ | Time | Template | To | Subject | Status | Provider Id */ .msg-log-cols { grid-template-columns: 18px 130px 130px minmax(180px, 1.2fr) minmax(200px, 2fr) 90px minmax(140px, 1fr); gap: 12px; } .msg-log-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Click-to-expand affordance on the row — mouse picks up the pointer, keyboard * users get focus ring via the standard table-row focus state. */ .msg-log-row { cursor: pointer; } .msg-log-row:hover { background: var(--surface-alt, rgba(255, 255, 255, 0.04)); } .msg-log-caret { color: var(--text-dim); font-size: 11px; line-height: 1; user-select: none; text-align: center; } /* Expandable detail block sits flush under its owning row. Matches the * .rt-log-detail-row pattern used by the RT call log further up the page — * no custom background, just a horizontal rule between entries so the pre * blocks can stand on their own. */ .msg-log-detail { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; border-bottom: 1px solid var(--border); } .msg-log-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--text-dim); } .msg-log-kill { color: var(--danger, #e06c75); font-weight: 600; } .msg-log-block { display: flex; flex-direction: column; gap: 4px; } .msg-log-block-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; } /* Mirrors .rt-log-json in RapidDispatch.Web/Pages/Admin.razor.css so the two * log panels on the same page look consistent. Background is deliberately * left to inherit from the surrounding surface — a separate darker well just * washes out on dark mode. */ .msg-log-pre { margin: 0; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; } .msg-log-err .msg-log-pre { color: var(--danger, #e06c75); border-color: var(--danger, #e06c75); } /* Template editor: textarea with click-to-insert tag chips */ .tpl-editor { display: flex; flex-direction: column; gap: 6px; } .tpl-hint { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .tpl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tpl-tag-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; } .tpl-html-label { margin-left: 10px; } .tpl-tag-chip { font-family: var(--mono); font-size: 11px; color: var(--accent); background: rgba(88, 166, 255, 0.08); border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .tpl-tag-chip:hover { background: rgba(88, 166, 255, 0.18); border-color: var(--accent); } .tpl-tag-chip:disabled { opacity: 0.5; cursor: not-allowed; } .tpl-html-chip { color: var(--text-bright); background: rgba(255, 255, 255, 0.04); border-color: var(--border); } .tpl-html-chip:hover { background: rgba(255, 255, 255, 0.08); } .tpl-tag-reset { color: var(--text-dim); background: transparent; border-color: var(--border); margin-left: auto; } .tpl-tag-reset:hover { color: var(--text-bright); background: var(--bg); } .tpl-input { font-family: var(--mono); font-size: 12px; } .tpl-html-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 6px 6px 0 0; background: var(--surface2); } .tpl-html-tool { min-width: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-bright); font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; } .tpl-html-tool:hover { border-color: var(--accent); color: var(--accent); } .tpl-html-tool:disabled { opacity: 0.5; cursor: not-allowed; } .tpl-html-editor { min-height: 220px; padding: 16px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 6px 6px; background: var(--surface); color: var(--text-bright); font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; outline: none; } .tpl-html-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); } .tpl-html-editor[contenteditable="False"], .tpl-html-editor[contenteditable="false"] { opacity: 0.65; cursor: not-allowed; } .tpl-html-editor p, .tpl-html-editor h2, .tpl-html-editor ul, .tpl-html-editor ol { margin-top: 0; } .tpl-html-editor a { color: var(--accent); } .tpl-source-wrap { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); } .tpl-source-wrap summary { padding: 8px 10px; color: var(--text-dim); cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tpl-source-input { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; } .tpl-preview { display: flex; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg); } .tpl-preview-label { font-weight: 700; letter-spacing: 0.06em; color: var(--accent); flex-shrink: 0; } .usr-mfa-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .usr-mfa-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 4px; border: 1px solid transparent; } .usr-mfa-pill--on { background: rgba(28, 196, 120, 0.15); border-color: rgba(28, 196, 120, 0.35); color: var(--accent); } .usr-mfa-pill--req { background: rgba(232, 184, 28, 0.12); border-color: rgba(232, 184, 28, 0.35); color: var(--amber); } [data-theme="light"] .usr-mfa-pill--on { color: var(--rrn-green-dim); } .eng-name-cell { font-weight: 600; color: var(--text-bright); font-size: 13px; } .contact-cell { font-family: var(--mono); font-size: 10px; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; } .days-cell { font-size: 10px; color: var(--text); } .skills-cell { display: flex; flex-wrap: wrap; gap: 3px; } .skill-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; border: 1px solid; font-family: var(--mono); font-weight: 600; white-space: nowrap; /* Truncate long values (e.g. "Activate Collision Solutions") instead of overflowing into the next column. Full text is available via the title attr. */ display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .jt-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-bright); font-size: 13px; } .jt-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; } .admin-filter-row { display: flex; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); } .admin-filter-row .f-group { max-width: 280px; width: 100%; } .role-summary-cell { min-width: 0; } .admin-empty { padding: 22px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .admin-empty.warn { color: var(--amber); } /* ── Pagination controls ─────────────────────────────────────────────────────── */ .admin-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 12px 0 4px; font-family: var(--mono); } .pager-ellipsis { min-width: 20px; text-align: center; color: var(--text-dim); font-family: var(--mono); font-size: 11px; user-select: none; } .pager-btn { min-width: 28px; height: 28px; padding: 0 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-family: var(--mono); font-size: 11px; cursor: pointer; transition: background .12s, color .12s; } .pager-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); } .pager-btn.pager-active { background: var(--accent); border-color: var(--accent); color: #fff; } .pager-btn:disabled { opacity: .35; cursor: default; } .pager-info { font-size: 10px; color: var(--text-dim); margin-left: 6px; } /* ── Infinite scroll sentinel ─────────────────────────────────────────────────── */ .scroll-sentinel { height: 48px; display: flex; align-items: center; justify-content: center; } .role-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; border: 1px solid; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .role-admin { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); } .role-scheduler { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.3); } .role-engineer { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.3); } .status-pill { font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 20px; border: 1px solid; } .status-pill.active { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.3); } .status-pill.inactive { background: rgba(107,114,128,.12); color: #6b7280; border-color: rgba(107,114,128,.3); } /* ── Role badge (custom role) ─────────────────────────────────────────────────── */ .role-badge.role-custom { background: #6366f122; color: #6366f1; border: 1px solid #6366f144; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-family: var(--mono); } /* ── Admin tab (inline, e.g. UsersRolesSection sub-tabs) ───────────────────────── */ .admin-section .admin-tab { display: flex; align-items: center; gap: 7px; padding: 6px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .admin-section .admin-tab:hover { color: var(--text-bright); background: var(--surface3); } .admin-section .admin-tab.active { color: var(--accent); background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); } .admin-section .admin-tab-count { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 20px; background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); } .admin-section .admin-tab.active .admin-tab-count { background: rgba(59,130,246,.2); color: var(--accent); border-color: rgba(59,130,246,.4); } .admin-subtabs { display: flex; gap: 8px; flex-wrap: wrap; } .admin-tabbed-section { display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .admin-subtabs { width: 100%; } } /* ── Tabbed admin shell (Capture / Referral) ───────────────────────────────────── */ .ri-admin-shell { display: flex; flex-direction: column; } .ri-tab-bar { display: flex; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 16px; gap: 2px; position: sticky; top: 0; z-index: 10; } .ri-tab-bar .admin-tab { display: flex; align-items: center; gap: 7px; padding: 0 18px; height: 44px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; position: relative; bottom: -1px; } .ri-tab-bar .admin-tab:hover { color: var(--text-bright); } .ri-tab-bar .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .ri-tab-bar .admin-tab-icon { font-size: 13px; opacity: 0.7; } .ri-tab-bar .admin-tab-count { font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border2); color: var(--text-dim); margin-left: 2px; } .ri-tab-bar .admin-tab.active .admin-tab-count { background: rgba(28,196,120,0.08); border-color: rgba(28,196,120,0.2); color: var(--accent); } .ri-admin-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; } /* ── Name cell with inline badge (LOCKED etc.) ────────────────────────────────── */ .name-with-badge { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .name-with-badge .eng-name-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .locked-badge { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .5px; padding: 2px 5px; border-radius: 3px; border: 1px solid #7c3aed44; background: #7c3aed22; color: #7c3aed; white-space: nowrap; flex-shrink: 0; } /* ── Table column layouts (Users & Roles) ─────────────────────────────────────── */ .rol-cols { grid-template-columns: 180px 1fr 90px 90px 56px 100px 150px; } .role-app-assignment-grid { display: grid; gap: 10px; margin-top: 10px; } .role-app-assignment-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; } /* ── Permission grid (role editor) ─────────────────────────────────────────────── */ .perm-grid { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .perm-app-header { display: block; padding: 10px 12px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); border-top: 1px solid var(--border); } .perm-app-header:first-of-type { border-top: none; padding-top: 0; } .perm-header, .perm-row { display: grid; grid-template-columns: 1fr repeat(4, 64px); align-items: center; gap: 0; } .perm-header { background: var(--bg2); padding: 6px 12px; font-size: 10px; font-family: var(--mono); letter-spacing: .06em; color: var(--text-dim); text-transform: uppercase; border-bottom: 1px solid var(--border); } .perm-header span:not(:first-child), .perm-check { text-align: center; justify-self: center; } .perm-row { padding: 6px 12px; border-bottom: 1px solid var(--border); transition: background .1s; } .perm-row:last-child { border-bottom: none; } .perm-row:hover { background: var(--bg2); } .perm-resource { font-size: 12px; color: var(--text); } .perm-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .perm-check input[type="checkbox"]:disabled { opacity: .35; cursor: not-allowed; } .perm-count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .role-capability-shell { margin-top: 18px; } .role-capability-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(14,45,86,.22), rgba(12,22,40,.88)); } .role-capability-title { font-size: 16px; font-weight: 700; color: var(--text-bright); margin-bottom: 6px; } .role-capability-sub { max-width: 720px; font-size: 13px; line-height: 1.55; color: var(--text); } .role-capability-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 220px; } .role-capability-summary-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border2); border-radius: 999px; background: rgba(7,15,29,.45); font-size: 11px; color: var(--text-dim); } .role-capability-summary-pill strong { font-family: var(--mono); font-size: 10px; color: var(--text-bright); } .role-capability-summary-pill--active { border-color: rgba(28,196,120,.32); background: rgba(28,196,120,.12); color: var(--text-bright); } .role-capability-grid { display: grid; gap: 14px; } .role-capability-app { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); } .role-capability-app--platform { border-color: rgba(143,214,217,.35); box-shadow: inset 0 0 0 1px rgba(143,214,217,.08); } .role-capability-app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: rgba(15,30,53,.55); } .role-capability-app-kicker { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .role-capability-app-title { font-size: 18px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; } .role-capability-app-sub { font-size: 13px; line-height: 1.5; color: var(--text); max-width: 700px; } .role-capability-app-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; } .role-capability-app-count, .role-capability-app-total { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .role-capability-app-count { color: var(--text-bright); } .role-capability-app-total { color: var(--text-dim); } .role-capability-group { padding: 16px 18px 18px; border-top: 1px solid var(--border); } .role-capability-group:first-of-type { border-top: none; } .role-capability-group-title { margin-bottom: 12px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); } .role-capability-list { display: grid; gap: 10px; } .role-capability-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: flex-start; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(7,15,29,.22); cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; } .role-capability-item:hover { border-color: var(--border2); background: rgba(15,30,53,.48); transform: translateY(-1px); } .role-capability-item--selected { border-color: rgba(28,196,120,.35); background: rgba(28,196,120,.09); } .role-capability-item--disabled { opacity: .7; } .role-capability-check { display: flex; justify-content: center; padding-top: 2px; } .role-capability-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .role-capability-check input[type="checkbox"]:disabled { opacity: .35; cursor: not-allowed; } .role-capability-content { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .role-capability-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .role-capability-name { font-size: 14px; font-weight: 700; color: var(--text-bright); } .role-capability-description { font-size: 12px; line-height: 1.5; color: var(--text); } .role-capability-state { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(28,196,120,.28); background: rgba(28,196,120,.12); font-family: var(--mono); font-size: 10px; color: var(--text-bright); } .role-capability-state--muted { border-color: var(--border2); background: rgba(15,30,53,.5); color: var(--text-dim); } /* Amber marker for Assess capabilities that block a role from being assigned to external tenant users (see AppCapabilityCatalog.IsTenantAssignable). */ .role-capability-internal-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(217,164,64,.45); background: rgba(217,164,64,.12); font-family: var(--mono); font-size: 10px; color: #d9a440; white-space: nowrap; cursor: help; } .role-tenant-warning { margin: 0 0 14px; padding: 10px 13px; border-radius: 6px; border: 1px solid rgba(217,164,64,.45); background: rgba(217,164,64,.10); font-size: 12px; color: #d9a440; line-height: 1.5; } @media (max-width: 900px) { .role-capability-intro, .role-capability-app-head { flex-direction: column; } .role-capability-summary, .role-capability-app-meta { justify-content: flex-start; align-items: flex-start; } } .rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .rule-group { padding: 16px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .rule-group:nth-child(3n) { border-right: none; } .rule-group:nth-last-child(-n+3):not(.rule-toggle-wide) { border-bottom: none; } .rule-toggle-wide { grid-column: 1 / -1; border-right: none; border-bottom: none; padding: 18px 22px; } .rule-label { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-dim); letter-spacing: 1.2px; text-transform: uppercase; display: block; margin-bottom: 4px; } .rule-sub { font-size: 11px; color: var(--text); margin-bottom: 10px; line-height: 1.4; } .rule-input-row { display: flex; align-items: center; gap: 8px; } .rule-input { width: 80px !important; text-align: center; font-family: var(--mono); font-weight: 600; } .rule-unit { font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .rule-toggles { display: flex; flex-direction: column; gap: 8px; } .rule-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; user-select: none; } .rule-toggle:hover { background: var(--surface2); } .rule-toggle.on { border-color: var(--accent); background: var(--accent-dim); } .rule-toggle.rule-toggle-disabled { opacity: .6; cursor: not-allowed; } .rule-toggle.rule-toggle-disabled:hover { background: var(--bg); } .rule-toggle-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: background .15s; } .rule-toggle.on .rule-toggle-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); } /* Busy state — dot grows a thin spinning ring so the user knows their click was received while the server round-trip completes. The toggle is also disabled so it can't be re-clicked. */ .rule-toggle-busy { cursor: progress !important; } .rule-toggle-spinner { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); animation: rule-toggle-spin .7s linear infinite; } @keyframes rule-toggle-spin { to { transform: rotate(360deg); } } .rule-toggle-name { font-size: 12px; font-weight: 600; color: var(--text-bright); } .rule-toggle-desc { font-size: 11px; color: var(--text); margin-top: 2px; } .app-toggle-meta { margin-top: 4px; } /* ── Developer UI showcase ───────────────────────────────────────────────────── */ .ui-showcase { display: flex; flex-direction: column; gap: 20px; padding: 24px; } .ui-showcase__hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .ui-showcase__hero-actions { display: flex; gap: 8px; } .ui-showcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ui-showcase__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ui-showcase__row--reg { align-items: flex-start; } .ui-showcase__form { display: flex; flex-direction: column; gap: 12px; } .ui-showcase__swatch-group { display: flex; flex-direction: column; gap: 6px; } .ui-showcase__swatch-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); } .ui-showcase__swatch { width: 64px; height: 40px; border-radius: 6px; border: 1px solid var(--border2); display: flex; align-items: flex-end; justify-content: center; padding: 3px 4px; position: relative; } .ui-showcase__swatch span { font-size: 8px; font-family: var(--mono); color: var(--text-dim); line-height: 1; white-space: nowrap; } .ui-showcase__swatch--text span { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .colour-row { display: flex; gap: 8px; align-items: center; } .colour-picker { width: 40px; height: 38px; padding: 2px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; cursor: pointer; } .colour-preview { padding: 6px 12px; border-radius: 5px; border: 1px solid; font-family: var(--mono); font-size: 11px; font-weight: 600; display: inline-block; margin-bottom: 16px; } .day-toggles { display: flex; gap: 6px; flex-wrap: wrap; } .day-toggle { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--border2); background: var(--bg); color: var(--text-dim); cursor: pointer; transition: all .12s; } .day-toggle.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); } .skill-toggles { display: flex; gap: 6px; flex-wrap: wrap; } .skill-toggle { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--border2); background: var(--bg); color: var(--text-dim); cursor: pointer; transition: all .12s; } /* ═══════════════════════════════════════════════════════════════════════════ LEAFLET DARK OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ .leaflet-container { background: #070f1d !important; } .leaflet-control-zoom a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border2) !important; } .leaflet-control-zoom a:hover { background: var(--surface2) !important; } .leaflet-control-attribution { background: rgba(7,15,29,.9) !important; color: var(--text-dim) !important; font-size: 9px !important; } .leaflet-popup-content-wrapper { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border2) !important; border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0,0,0,.6) !important; font-family: var(--sans) !important; font-size: 12px !important; } .leaflet-popup-tip { background: var(--surface) !important; } .leaflet-popup-close-button { color: var(--text-dim) !important; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL SEARCH (in topbar) ═══════════════════════════════════════════════════════════════════════════ */ .topbar-search { position: relative; display: flex; align-items: center; margin: 0 8px; } .topbar-search-box { position: relative; display: flex; align-items: center; } .super-search-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--border2); border-radius: 999px; background: var(--bg); color: var(--text-dim); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; } .super-search-toggle:hover { border-color: var(--accent); color: var(--text-bright); } .super-search-toggle.active { border-color: var(--accent); background: rgba(28,196,120,.12); color: var(--accent); } .super-search-toggle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 2px var(--surface); } .super-search-toggle.active .super-search-toggle__dot { background: var(--accent); box-shadow: 0 0 0 2px rgba(28,196,120,.18); } .search-icon { position: absolute; left: 10px; color: var(--text-dim); font-size: 16px; pointer-events: none; z-index: 1; } .topbar-search-input { font-family: var(--sans); font-size: 13px; background: var(--bg); border: 1px solid var(--border2); color: var(--text-bright); border-radius: 6px; padding: 5px 28px 5px 30px; width: 220px; outline: none; transition: border-color .15s, width .2s, box-shadow .15s; } .topbar-search-input::placeholder { color: var(--text-dim); } .topbar-search-input:focus { border-color: var(--accent); width: 300px; box-shadow: 0 0 0 3px rgba(28,196,120,.1); } .search-clear-btn { position: absolute; right: 6px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 2px 4px; } .search-clear-btn:hover { color: var(--text-bright); } .global-search-results { position: absolute; top: calc(100% + 6px); left: 0; width: 540px; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; z-index: 500; box-shadow: 0 12px 40px rgba(0,0,0,.6); max-height: 420px; overflow-y: auto; scrollbar-width: thin; } .gsr-header { padding: 7px 14px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; } .gsr-group-header { position: sticky; top: 0; z-index: 1; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); color: var(--text-bright); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; } .gsr-group-count { color: var(--text-dim); font-variant-numeric: tabular-nums; } .gsr-view-more { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; cursor: pointer; text-align: left; } .gsr-view-more:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .gsr-expanded-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); font-family: var(--mono); font-size: 9px; } .gsr-show-fewer { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; } .gsr-show-fewer:hover { color: var(--text-bright); } .gsr-app { color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .gsr-row--platform { grid-template-columns: 120px minmax(180px, 1fr) 150px; } .gsr-loading { padding: 16px 14px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .gsr-empty { padding: 16px 14px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .gsr-row { display: grid; grid-template-columns: 130px 1fr 160px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .gsr-row:last-child { border-bottom: none; } .gsr-row:hover { background: var(--surface2); } .gsr-row.active { background: var(--surface2); } .gsr-left { display: flex; flex-direction: column; gap: 2px; } .gsr-ref { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent); } .gsr-reg { font-family: var(--mono); font-size: 10px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border2); border-radius: 3px; padding: 1px 4px; display: inline-block; text-transform: uppercase; } .gsr-mid { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .gsr-title { font-size: 13px; font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsr-type { font-family: var(--mono); font-size: 10px; font-weight: 600; } .gsr-right { display: flex; flex-direction: column; gap: 2px; text-align: right; } .gsr-status { font-family: var(--mono); font-size: 10px; font-weight: 600; } .gsr-status.scheduled { color: var(--green); } .gsr-status.unscheduled { color: var(--text-dim); } .gsr-date { font-family: var(--mono); font-size: 10px; color: var(--text-dim); } /* ═══════════════════════════════════════════════════════════════════════════ ACCOUNT / CHANGE PASSWORD PAGE ═══════════════════════════════════════════════════════════════════════════ */ .account-page { min-height: calc(100vh - 88px); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; } .account-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 32px; width: 100%; max-width: 420px; } .account-card h2 { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-bright); margin: 0 0 6px; } .account-user { font-size: 13px; color: var(--text-dim); margin: 0 0 24px; } .account-user strong { color: var(--accent); } .account-actions { margin-top: 20px; display: flex; gap: 8px; } .alert-success { background: rgba(28,196,120,.12); border: 1px solid rgba(28,196,120,.3); color: var(--green); border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .alert-error { background: var(--red-dim); border: 1px solid rgba(239,68,68,.3); color: var(--red); border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .alert-warn { background: rgba(232,184,28,.10); border: 1px solid rgba(232,184,28,.35); color: var(--amber, #f59e0b); border-radius: 6px; padding: 10px 14px; font-size: 13px; line-height: 1.5; } .alert-warn strong { color: var(--text-bright); } /* ── Engineer proximity selector ─────────────────────────────────────────────── */ .eng-loading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 8px 0 4px; } .eng-selector { margin-bottom: 10px; } .eng-selector-label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 6px; } .eng-selector-list { display: flex; flex-wrap: wrap; gap: 6px; } .eng-chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-size: 12px; cursor: pointer; transition: all .15s; } .eng-chip:hover { border-color: var(--accent); color: var(--text-bright); } .eng-chip-on { background: rgba(28,196,120,.15); border-color: var(--green); color: var(--green) !important; } .eng-chip-name { font-weight: 500; } .eng-chip-dist { font-family: var(--mono); font-size: 10px; opacity: 0.7; } .eng-chip-dim { opacity: 0.35; cursor: not-allowed; } .eng-chip-lock { font-size: 10px; opacity: 0.8; } .eng-chip-more { border-style: dashed; color: var(--text-dim); font-style: italic; } .eng-chip-more:hover { border-color: var(--accent); color: var(--text-bright); } .eng-warn { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ HOLIDAYS / AVAILABILITY TAB ═══════════════════════════════════════════════════════════════════════════ */ /* Conflict banner */ .conflict-banner { display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: #7c2d1222; border-bottom: 1px solid #7c2d1244; cursor: pointer; font-size: 12px; color: #f97316; font-family: var(--mono); } .conflict-icon { font-size: 14px; } .conflict-expand { margin-left: auto; font-size: 10px; opacity: .7; } .conflict-list { border-bottom: 1px solid var(--border); padding: 8px 22px 12px; } .conflict-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-dim, #2a2a2a); gap: 16px; } .conflict-row:last-child { border-bottom: none; } .conflict-row-info { display: flex; gap: 16px; align-items: center; font-size: 12px; flex-wrap: wrap; } .conflict-date { font-family: var(--mono); color: var(--text-dim); min-width: 90px; } .conflict-eng { color: var(--text-bright); font-weight: 500; } .conflict-job { color: var(--text); } .conflict-actions { display: flex; gap: 6px; flex-shrink: 0; } /* Tab count badge in warning state */ .warn-count { background: #f97316 !important; color: #fff !important; } /* Controls row */ .avail-controls { display: flex; align-items: flex-end; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .avail-eng-picker { width: 280px; } .avail-eng-search-wrap { position: relative; } .avail-eng-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .avail-eng-option { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .1s; } .avail-eng-option:hover { background: var(--hover); } .avail-eng-option.selected { background: var(--accent); color: #fff; } .avail-eng-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 13px; } .avail-month-nav { display: flex; align-items: center; gap: 8px; } .avail-month-label { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-bright); min-width: 120px; text-align: center; } /* Calendar */ .avail-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); margin: 16px 22px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .avail-cal-header { display: contents; } .avail-cal-header span, .avail-calendar > .avail-cal-header span { display: block; background: var(--bg); padding: 6px 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--border); } .avail-cal-day { background: var(--surface); padding: 6px 8px; min-height: 64px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .1s; } .avail-cal-day:hover { background: var(--hover, #1a1a1a); } .avail-cal-day.other-month { background: var(--bg); cursor: default; } .avail-cal-day.other-month * { opacity: .3; pointer-events: none; } .avail-cal-day.weekend { background: #10100e; } .avail-cal-day.bank-hol { background: #1a0d2e; cursor: default; } .avail-cal-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-dim); } .avail-cal-num.today { background: var(--accent, #3b82f6); color: #fff; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .avail-cal-bk { font-size: 9px; font-family: var(--mono); color: #a78bfa; background: #4c1d9511; border-left: 2px solid #7c3aed; padding: 1px 4px; border-radius: 2px; line-height: 1.4; word-break: break-word; } .avail-cal-block { font-size: 9px; font-family: var(--mono); padding: 1px 4px; border-radius: 2px; line-height: 1.4; } /* Legend */ .avail-legend { display: flex; gap: 16px; padding: 0 22px 16px; flex-wrap: wrap; } .avail-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono); color: var(--text-dim); } .avail-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* Availability list */ .avail-list-head { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); padding: 8px 22px 4px; } .avail-cols { grid-template-columns: 110px 90px 160px 1fr 100px 80px; } .avail-type-badge { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 3px; } /* Blazor error UI */ #blazor-error-ui { background: var(--red-dim); border-top: 1px solid #7f1d1d; color: var(--red); bottom: 0; left: 0; padding: 12px 16px; position: fixed; width: 100%; z-index: 1000; font-size: 13px; font-family: var(--mono); display: none; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; } /* ── Drag-to-reschedule global cursor ── */ body.gantt-dragging, body.gantt-dragging * { cursor: grabbing !important; user-select: none !important; } /* ───────────────────────────────────────────────────────────────────────── Prompt diff viewer (used by Rapid Referral PromptDiffModal). Defined globally because the row markup is rendered via MarkupString and therefore would not pick up Blazor CSS-isolation scope attributes. Theme-aware: every color is sourced from CSS variables that are redefined under [data-theme="light"] further down. Do NOT hardcode hex values for text or backgrounds inside this block. ───────────────────────────────────────────────────────────────────────── */ :root { /* Defaults are tuned for the dark theme. Light theme overrides below. */ --diff-add-bg: rgba(76, 175, 80, 0.22); --diff-add-stripe: #6fcf97; --diff-add-text: #e6f7e6; --diff-add-gutter-bg: rgba(76, 175, 80, 0.34); --diff-add-tok-bg: rgba(76, 175, 80, 0.55); --diff-add-tok-text: #ffffff; --diff-del-bg: rgba(248, 81, 73, 0.22); --diff-del-stripe: #f85149; --diff-del-text: #ffe1e1; --diff-del-gutter-bg: rgba(248, 81, 73, 0.34); --diff-del-tok-bg: rgba(248, 81, 73, 0.55); --diff-del-tok-text: #ffffff; --diff-gutter-bg: rgba(255, 255, 255, 0.04); --diff-empty-stripe-a: rgba(255, 255, 255, 0.05); --diff-empty-stripe-b: rgba(255, 255, 255, 0.10); --diff-row-divider: rgba(255, 255, 255, 0.04); --diff-head-bg: rgba(255, 255, 255, 0.04); } [data-theme="light"] { --diff-add-bg: rgba(46, 160, 67, 0.18); --diff-add-stripe: #2ea043; --diff-add-text: #0a3d12; --diff-add-gutter-bg: rgba(46, 160, 67, 0.30); --diff-add-tok-bg: rgba(46, 160, 67, 0.45); --diff-add-tok-text: #052e0d; --diff-del-bg: rgba(207, 34, 46, 0.18); --diff-del-stripe: #cf222e; --diff-del-text: #4a0309; --diff-del-gutter-bg: rgba(207, 34, 46, 0.30); --diff-del-tok-bg: rgba(207, 34, 46, 0.45); --diff-del-tok-text: #350307; --diff-gutter-bg: rgba(0, 0, 0, 0.06); --diff-empty-stripe-a: rgba(0, 0, 0, 0.06); --diff-empty-stripe-b: rgba(0, 0, 0, 0.12); --diff-row-divider: rgba(0, 0, 0, 0.06); --diff-head-bg: rgba(0, 0, 0, 0.04); } .diff-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px minmax(0, 1fr); background: var(--surface); font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text-bright); border: 1px solid var(--border); border-radius: 4px; overflow: auto; max-height: 76vh; } .diff-grid-head { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: var(--diff-head-bg); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); } .diff-grid-head-old { grid-column: 1 / span 2; border-right: 1px solid var(--border); } .diff-grid-head-new { grid-column: 3 / span 2; } /* Cells */ .diff-cell { padding: 0 12px; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--diff-row-divider); min-height: 1.55em; } .diff-cell.diff-gutter { text-align: right; padding: 0 8px 0 0; color: var(--text-dim); user-select: none; font-size: 10px; background: var(--diff-gutter-bg); border-right: 1px solid var(--border); } .diff-cell.diff-gutter-new { border-left: 1px solid var(--border); } /* Row state colours */ .diff-cell-eq { background: transparent; } /* "No corresponding line on this side" — visible on both themes via CSS-var stripes */ .diff-cell-empty { background: repeating-linear-gradient( 45deg, var(--diff-empty-stripe-a), var(--diff-empty-stripe-a) 6px, var(--diff-empty-stripe-b) 6px, var(--diff-empty-stripe-b) 12px ); color: transparent; } .diff-cell-empty * { visibility: hidden; } /* Inserted / new-side green */ .diff-cell-add { background: var(--diff-add-bg); color: var(--diff-add-text); box-shadow: inset 3px 0 0 var(--diff-add-stripe); } .diff-cell-add.diff-gutter { background: var(--diff-add-gutter-bg); color: var(--diff-add-text); box-shadow: none; } /* Deleted / old-side red */ .diff-cell-del { background: var(--diff-del-bg); color: var(--diff-del-text); box-shadow: inset 3px 0 0 var(--diff-del-stripe); } .diff-cell-del.diff-gutter { background: var(--diff-del-gutter-bg); color: var(--diff-del-text); box-shadow: none; } /* Word-level highlights inside changed lines */ .diff-tok { border-radius: 2px; padding: 0 1px; } .diff-tok-add { background: var(--diff-add-tok-bg); color: var(--diff-add-tok-text); font-weight: 600; box-shadow: 0 0 0 1px var(--diff-add-stripe); } .diff-tok-del { background: var(--diff-del-tok-bg); color: var(--diff-del-tok-text); font-weight: 600; box-shadow: 0 0 0 1px var(--diff-del-stripe); text-decoration: line-through; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; } .diff-tok-empty { display: none; } /* Diff modal meta header (target / model / change counts) */ .diff-modal-body { display: flex; flex-direction: column; gap: 14px; } .diff-modal-meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; } .diff-modal-target { display: flex; flex-direction: column; gap: 2px; } .diff-meta-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); } .diff-meta-value { font-size: 12px; color: var(--text); } .diff-meta-mono { font-family: var(--mono); } .diff-stat { margin-right: 8px; font-weight: 700; font-size: 12px; } .diff-stat-add { color: #6fcf97; } .diff-stat-del { color: #f85149; } .diff-modal-summary { background: rgba(100, 181, 246, 0.06); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 0 4px 4px 0; display: flex; flex-direction: column; gap: 4px; } .diff-summary-h { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); } .diff-summary-body { font-size: 13px; color: var(--text); line-height: 1.45; } /* Search box inside the diff viewer */ .diff-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; } .diff-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 12px; } .diff-search-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); } /* ═══════════════════════════════════════════════════════════════════════════ RRN LIGHT BRAND THEME — reusable, opt-in via the `.rrn-theme` wrapper class --------------------------------------------------------------------------- A light, modern-SaaS skin matching rrn.co.uk (navy / green / mustard, Raleway). Re-points the design tokens for everything inside the wrapper, so every shared component (AppNavBar, AppButton, AppModal, FormField, admin tabs, …) re-skins for free. Add the class to the app shell and the login split; the rest cascades. Other apps stay on the global dark default. ═══════════════════════════════════════════════════════════════════════════ */ .rrn-theme { --rrn-navy: #0c2448; --rrn-navy-mid: #16315c; --rrn-navy-light: #16315c; --navy: #0c2448; --navy-2: #16315c; --rrn-green: #1cc478; --green-dark: #12a063; --green-tint: #edf9ef; --green-tint-2: #f6fcf7; --rrn-mustard: #e8b81c; --bg: #f1f4f3; --surface: #ffffff; --surface2: #f7faf9; --panel-2: #f7faf9; --border: #e4e9e8; --border2: #d3dbda; --text: #0c2448; --text-mid: #566476; --text-dim: #8a97a4; --muted: #8a97a4; --text-bright: #0c2448; --accent: var(--rrn-green); --accent-dim: var(--green-tint); --green: var(--rrn-green); --green-dim: var(--green-tint); --rrn-green-dim: #12a063; --amber: var(--rrn-mustard); --warning: var(--rrn-mustard); --red: #d8534e; --rrn-red: #d8534e; --red-dim: #fbeceb; --danger: #d8534e; --success: #1cc478; --sans: 'Raleway', sans-serif; --mono: 'Red Hat Mono', monospace; --shadow-sm: 0 1px 2px rgba(12,36,72,.05); --shadow: 0 4px 18px rgba(12,36,72,.06); --shadow-lg: 0 30px 70px rgba(12,36,72,.22); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } .rrn-theme.app-shell { background: var(--bg); } .rrn-theme .app-content { background: var(--bg); } /* ──────────────────────────────────────────────────────────────────────────── SHARED CONTENT WIDTH — one configurable token for every app. Change --rrn-page-max in one place to reflow every standard page. The centred column applies to ALL apps (list, reports, admin) so they line up regardless of their own shell markup. Genuinely full-width workspaces opt out by adding `is-full-bleed` (or using PageShell FullBleed → .rrn-page-full). ──────────────────────────────────────────────────────────────────────────── */ .rrn-theme { --rrn-page-max: 1280px; } /* width:100% + box-sizing keeps the centred column at its full capped width from the first paint. Without it the shell shrink-wraps to whatever has loaded (e.g. a short "Loading…" line) and then jumps out to --rrn-page-max once the tables render, which reads as the page width "changing" as it loads. */ .rrn-wrap { width: 100%; max-width: var(--rrn-page-max); margin: 0 auto; padding: 34px 28px 90px; box-sizing: border-box; } .reports-shell, .ri-admin-shell { width: 100%; max-width: var(--rrn-page-max); margin-inline: auto; padding: 24px 24px 36px; box-sizing: border-box; } /* Per-page opt-out for genuinely full-bleed workspaces (e.g. the Dispatch board and live map). Add `is-full-bleed` to the shell, or FullBleed on PageShell. */ .is-full-bleed, .rrn-wrap.is-full-bleed, .reports-shell.is-full-bleed, .ri-admin-shell.is-full-bleed { max-width: none; margin-inline: 0; } /* ── Top bar (navy) ───────────────────────────────────────────────────────── */ .rrn-theme .topbar { height: 66px; background: var(--navy); border-bottom: none; padding-right: 16px; gap: 10px; } .rrn-theme .topbar-brand { border-right: none; padding: 0 8px 0 24px; gap: 11px; } .rrn-theme .app-switcher-trigger { gap: 11px; padding-right: 6px; } .rrn-theme .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--rrn-green); color: #fff; flex: none; box-shadow: 0 2px 8px rgba(28,196,120,.35); } .rrn-theme .brand-mark svg { width: 18px; height: 18px; } .rrn-theme .brand-wordmark { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -.01em; text-transform: none; color: #fff; } .rrn-theme .brand-wordmark span { font-weight: 800; color: var(--rrn-green); } .rrn-theme .app-switcher-caret { color: rgba(255,255,255,.55); } .rrn-theme .topbar-nav { gap: 2px; margin-left: 22px; } .rrn-theme .nav-item { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.70); border-right: none; border-bottom: 3px solid transparent; padding: 0 16px; } .rrn-theme .nav-item:hover { color: #fff; background: transparent; } .rrn-theme .nav-item.active { color: #fff; background: transparent; border-bottom-color: var(--rrn-green); } /* Static tenant badge in the top bar. */ .rrn-tenant-chip { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 6px 13px 6px 11px; color: #fff; } .rrn-tenant-chip .rtc-ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(28,196,120,.18); color: var(--rrn-green); display: grid; place-items: center; flex: none; } .rrn-tenant-chip .rtc-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .rrn-tenant-chip .rtc-text small { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.5); } .rrn-tenant-chip .rtc-text strong { font-size: 13px; font-weight: 700; } /* User chip on the navy bar. */ .rrn-theme .topbar-user { border-left: none; } .rrn-theme .user-chip-name { color: #fff; } .rrn-theme .user-chip-caret { color: rgba(255,255,255,.55); } .rrn-theme .user-avatar { background: var(--rrn-green); border-color: var(--rrn-green); color: var(--navy); font-family: var(--sans); } .rrn-theme .user-chip:hover, .rrn-theme .user-chip.open { background: rgba(255,255,255,.08); } /* ── Product release history ─────────────────────────────────────────────── */ .release-version-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; margin-right: 10px; padding: 4px 9px; border: 1px solid var(--border2); border-radius: 999px; background: var(--surface2); color: var(--text-dim); font: 600 10px/1 var(--mono); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .release-version-badge:hover, .release-version-badge:focus-visible { color: var(--text-bright); border-color: var(--accent); outline: none; } .release-version-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .rrn-theme .release-version-badge { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: rgba(255,255,255,.76); } .rrn-theme .release-version-badge:hover, .rrn-theme .release-version-badge:focus-visible { border-color: var(--rrn-green); background: rgba(255,255,255,.12); color: #fff; } .release-history-cache-notice { margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--surface2); color: var(--text); font-size: 12px; } .release-history-list { display: grid; gap: 12px; opacity: 1; transition: opacity .15s ease; } .release-history-list[aria-busy="true"] { opacity: .55; pointer-events: none; } .release-history-item { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); } .release-history-item--current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .release-history-item__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .release-history-item__header h3 { margin: 4px 0 0; color: var(--text-bright); font-size: 15px; } .release-history-item__header time { flex: none; color: var(--text-dim); font: 500 11px/1.4 var(--mono); } .release-history-item__version { color: var(--accent); font: 700 12px/1 var(--mono); } .release-history-current { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font: 700 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; } .release-history-components { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .release-history-component { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 11px; text-transform: capitalize; } .release-history-component small { color: var(--text-dim); font-family: var(--mono); } .release-history-notes { margin-top: 12px; color: var(--text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; } .release-history-state { padding: 40px 16px; color: var(--text-dim); text-align: center; } .release-history-pager { margin-top: 18px; } .release-version-badge--repairer { flex: 1; flex-direction: column; justify-content: center; gap: 4px; min-height: auto; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 10.5px; font-weight: 700; } .release-version-badge--repairer:hover, .release-version-badge--repairer:focus-visible { border-color: transparent; background: transparent; color: var(--green-dim); } .release-version-badge--repairer .release-version-badge__dot { width: 20px; height: 20px; border: 5px solid var(--green-soft); background: var(--green-dim); } @media (max-width: 760px) { .rrn-theme .topbar .release-version-badge { margin-right: 2px; padding-inline: 6px; } .release-history-item__header { display: block; } .release-history-item__header time { display: block; margin-top: 6px; } } .rrn-theme .user-menu { box-shadow: 0 8px 24px rgba(12,36,72,.14); border-color: var(--border2); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .rrn-theme .btn { font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: 0; text-transform: none; border-radius: 9px; padding: 11px 17px; border: 1px solid transparent; gap: 8px; } .rrn-theme .btn-sm { padding: 8px 13px; font-size: 12.5px; } .rrn-theme .btn-primary { background: var(--rrn-green); color: #fff; } .rrn-theme .btn-primary:hover:not(:disabled) { background: var(--green-dark); filter: none; } .rrn-theme .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border2); } .rrn-theme .btn-ghost:hover:not(:disabled) { background: var(--surface2); border-color: var(--text-dim); } .rrn-theme .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border2); } .rrn-theme .btn-secondary:hover:not(:disabled) { background: var(--surface2); } .rrn-theme .btn-danger { background: transparent; color: var(--red); border-color: rgba(216,83,78,.35); } .rrn-theme .btn-danger:hover:not(:disabled) { background: rgba(216,83,78,.06); color: var(--red); } /* ── Page head (mockup) ───────────────────────────────────────────────────── */ .rrn-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; } .rrn-page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; position: relative; padding-bottom: 10px; color: var(--text); } .rrn-page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--rrn-green); border-radius: 3px; } .rrn-page-head .rrn-page-sub { margin: 8px 0 0; color: var(--text-mid); font-size: 14px; } /* ── In-app footer sign-off ───────────────────────────────────────────────── */ .app-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 12.5px; font-weight: 600; } .app-foot .app-foot-lead strong { color: var(--text-mid); } .app-foot .app-foot-mono { height: 18px; width: auto; display: block; } .app-foot .app-foot-copy { margin-left: auto; } /* ── Admin tabs + section cards ───────────────────────────────────────────── */ /* Opaque page-coloured background (not transparent) so the sticky tab bar fully covers content scrolling underneath it, with a soft lift shadow for separation. */ .rrn-theme .ri-tab-bar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0; gap: 2px; box-shadow: 0 6px 14px -10px rgba(13, 32, 72, .28); } .rrn-theme .ri-tab-bar .admin-tab { font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-mid); padding: 11px 13px; height: auto; } .rrn-theme .ri-tab-bar .admin-tab:hover { color: var(--text); } .rrn-theme .ri-tab-bar .admin-tab.active { color: var(--navy); border-bottom-color: var(--rrn-green); } .rrn-theme .ri-tab-bar .admin-tab-count { background: var(--surface2); border-color: var(--border2); color: var(--text-dim); } .rrn-theme .ri-tab-bar .admin-tab-icon { display: none; } .rrn-theme .ri-admin-body { padding: 22px 0 0; } /* Admin section cards (mockup .asec) */ .rrn-theme .admin-section { border-radius: 12px; box-shadow: var(--shadow-sm); } .rrn-theme .section-head { padding: 18px 20px; } .rrn-theme .section-title { font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .07em; color: var(--text); } .rrn-theme .section-sub { color: var(--text-mid); font-size: 12.5px; } /* ── Modal (light) ────────────────────────────────────────────────────────── */ .rrn-theme .modal-backdrop { background: rgba(12,36,72,.5); backdrop-filter: blur(3px); } .rrn-theme .modal, .rrn-theme .modal-center, .rrn-theme .modal-center-wrap { border: none; border-radius: 16px; box-shadow: var(--shadow-lg); } /* The completed-result view popup matches the New/Edit (split) modal width. */ .rrn-theme .modal-large { width: 920px; max-width: 95vw; } .rrn-theme .modal-head { padding: 19px 26px; } .rrn-theme .modal-title { font-family: var(--sans); font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--text); } .rrn-theme .modal-foot { background: var(--surface2); padding: 16px 26px; } /* ── Editor stepper (numbered circles) ────────────────────────────────────── */ .rrn-theme .rrn-step-head { display: flex; align-items: center; gap: 11px; } .rrn-theme .rrn-step-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border2); } .rrn-theme .rrn-step-num.open { background: var(--navy); color: #fff; border-color: var(--navy); } .rrn-theme .rrn-step-num.done { background: var(--rrn-green); color: #fff; border-color: var(--rrn-green); } /* ── New-assessment wizard (guided linear create flow) ────────────────────── */ .rrn-theme .rrn-wz { flex: 1; min-width: 0; width: 100%; display: grid; grid-template-columns: 232px 1fr; height: min(620px, calc(94vh - 150px)); min-height: 0; } .rrn-theme .rrn-wz-rail { background: var(--surface2); border-right: 1px solid var(--border); padding: 26px 22px; overflow-y: auto; } .rrn-theme .rrn-wz-rail-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 0 0 22px; } .rrn-theme .rrn-wz-stage { position: relative; display: flex; gap: 13px; padding-bottom: 24px; cursor: pointer; } .rrn-theme .rrn-wz-stage:last-child { padding-bottom: 0; } .rrn-theme .rrn-wz-stage::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--border2); } .rrn-theme .rrn-wz-stage:last-child::before { display: none; } .rrn-theme .rrn-wz-stage.done::before { background: var(--rrn-green); } .rrn-theme .rrn-wz-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface); border: 2px solid var(--border2); color: var(--text-dim); z-index: 1; } .rrn-theme .rrn-wz-stage.done .rrn-wz-dot { background: var(--rrn-green); border-color: var(--rrn-green); color: #fff; } .rrn-theme .rrn-wz-stage.active .rrn-wz-dot { border-color: var(--rrn-green); color: var(--green-dark); box-shadow: 0 0 0 4px rgba(28, 196, 120, .12); } .rrn-theme .rrn-wz-dot svg { width: 13px; height: 13px; } .rrn-theme .rrn-wz-st { padding-top: 3px; min-width: 0; } .rrn-theme .rrn-wz-st .t { font-weight: 700; font-size: 14px; color: var(--text-mid); } .rrn-theme .rrn-wz-stage.active .rrn-wz-st .t, .rrn-theme .rrn-wz-stage.done .rrn-wz-st .t { color: var(--text); } .rrn-theme .rrn-wz-st .s { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rrn-theme .rrn-wz-st .s strong { color: var(--text-mid); font-weight: 700; } .rrn-theme .rrn-wz-panel { padding: 26px 30px; overflow-y: auto; display: flex; flex-direction: column; } .rrn-theme .rrn-wz-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--green-dark); } .rrn-theme .rrn-wz-panel h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 4px; } .rrn-theme .rrn-wz-lead { font-size: 13.5px; color: var(--text-mid); margin: 0 0 20px; max-width: 520px; line-height: 1.5; } .rrn-theme .rrn-wz-vehchip { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 8px 15px 8px 8px; border-radius: 11px; background: var(--green-tint-2); border: 1px solid rgba(28, 196, 120, .28); margin-bottom: 22px; } .rrn-theme .rrn-wz-vehchip-main .veh { font-weight: 700; font-size: 13.5px; color: var(--text); } .rrn-theme .rrn-wz-vehchip-main .meta { font-size: 11.5px; color: var(--text-mid); margin-top: 1px; } .rrn-theme .rrn-wz-count { font-size: 12.5px; font-weight: 600; color: var(--text-mid); margin: 0 auto; } .rrn-theme .rrn-wz-count b { color: var(--text); } .rrn-theme .rrn-wz-review { display: grid; grid-template-columns: 150px 1fr; gap: 11px 18px; margin: 0; font-size: 13.5px; } .rrn-theme .rrn-wz-review dt { color: var(--text-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; } .rrn-theme .rrn-wz-review dd { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 720px) { .rrn-theme .rrn-wz { grid-template-columns: 1fr; height: auto; min-height: min(520px, calc(94vh - 150px)); } .rrn-theme .rrn-wz-rail { border-right: none; border-bottom: 1px solid var(--border); padding: 18px 20px; } .rrn-theme .rrn-wz-stage { padding-bottom: 18px; } } /* Registration lookup row stays tidy and narrow at the top of step 1. */ .rrn-theme .rrn-wz-reg { max-width: 360px; } /* ── Step 1 vehicle result card (DVLA-style) ──────────────────────────────── */ .rrn-theme .rrn-vcard { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-top: 18px; } .rrn-theme .rrn-vcard.warn { border-color: rgba(232, 184, 28, .45); } .rrn-theme .rrn-vcard-top { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--green-tint-2); border-bottom: 1px solid var(--border); } .rrn-theme .rrn-vcard.warn .rrn-vcard-top { background: #fdf8e8; border-bottom-color: rgba(232, 184, 28, .3); } .rrn-theme .rrn-vcard-ic { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid rgba(28, 196, 120, .32); display: grid; place-items: center; color: var(--green-dark); flex: none; } .rrn-theme .rrn-vcard.warn .rrn-vcard-ic { border-color: rgba(232, 184, 28, .45); color: #b8860b; } .rrn-theme .rrn-vcard-ic svg { width: 24px; height: 24px; } .rrn-theme .rrn-vcard-top .vt { font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: var(--text); } .rrn-theme .rrn-vcard-top .vs { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; } .rrn-theme .rrn-vfound { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 5px 11px; white-space: nowrap; } .rrn-theme .rrn-vfound.ok { color: var(--green-dark); background: #fff; border: 1px solid rgba(28, 196, 120, .4); } .rrn-theme .rrn-vfound.part { color: #b8860b; background: #fff; border: 1px solid rgba(232, 184, 28, .5); } .rrn-theme .rrn-vspecs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); } .rrn-theme .rrn-vspec { background: var(--surface); padding: 12px 16px; min-width: 0; } .rrn-theme .rrn-vspec .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); } .rrn-theme .rrn-vspec .k .req { color: var(--red); } .rrn-theme .rrn-vspec .v { font-size: 13.5px; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } /* Editable cells are neutral by default (e.g. correcting a confirmed vehicle); the amber wash only applies inside the limited-data (.warn) card. */ .rrn-theme .rrn-vcard.warn .rrn-vspec.edit { background: #fdfaf0; } .rrn-theme .rrn-vspec.edit .f-input { width: 100%; margin-top: 4px; padding: 6px 9px; font-size: 13px; font-weight: 600; } .rrn-theme .rrn-vnote { display: flex; gap: 9px; align-items: flex-start; padding: 12px 16px; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); background: var(--surface2); border-top: 1px solid var(--border); } .rrn-theme .rrn-vnote svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #b8860b; } .rrn-theme .rrn-vnote b { color: var(--text); } /* ── Step 2 incident-location map tile ────────────────────────────────────── */ .rrn-theme .rrn-wz-minimap { height: 168px; border-radius: 11px; border: 1px solid var(--border); position: relative; overflow: hidden; background: linear-gradient(115deg, #eef3f1, #dde7e3); } .rrn-theme .rrn-wz-minimap-canvas { position: absolute; inset: 0; z-index: 1; } .rrn-theme .rrn-wz-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); z-index: 2; } .rrn-theme .rrn-wz-pin svg { width: 30px; height: 30px; color: var(--red); filter: drop-shadow(0 4px 6px rgba(12, 36, 72, .3)); } .rrn-theme .rrn-wz-mtag { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 700; color: var(--text); box-shadow: var(--shadow-sm); } .rrn-theme .rrn-wz-mtag small { display: block; font-weight: 500; color: var(--text-mid); font-size: 11px; margin-top: 1px; } /* ── Step 3 photos: drop zone, shot tips, thumbs ──────────────────────────── */ .rrn-theme .rrn-wz-drop { margin-top: 4px; } .rrn-theme .rrn-shot-tips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .rrn-theme .rrn-shot-tip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-mid); background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 11px; } .rrn-theme .rrn-shot-tip svg { width: 12px; height: 12px; color: var(--green-dark); } .rrn-theme .rrn-shot-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 11px; } .rrn-theme .rrn-shot-row h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid); margin: 0; } .rrn-theme .rrn-shot-count { font-size: 12px; color: var(--text-dim); } .rrn-theme .rrn-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .rrn-theme .rrn-thumb { aspect-ratio: 4 / 3; border-radius: 9px; position: relative; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-dim); padding: 6px; } .rrn-theme .rrn-thumb .fn { font-size: 10.5px; font-family: var(--mono); color: var(--text-mid); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rrn-theme .rrn-thumb-img { overflow: hidden; } .rrn-theme .rrn-thumb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rrn-theme .rrn-thumb .del { position: absolute; top: 5px; right: 5px; width: 21px; height: 21px; border-radius: 50%; background: rgba(12, 36, 72, .65); color: #fff; border: none; cursor: pointer; font-size: 11px; line-height: 1; } /* ── Step 4 review cards ──────────────────────────────────────────────────── */ .rrn-theme .rrn-rev { display: flex; flex-direction: column; gap: 13px; } .rrn-theme .rrn-rev-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .rrn-theme .rrn-rev-head { display: flex; align-items: center; gap: 9px; padding: 11px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid); } .rrn-theme .rrn-rev-head .ed { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green-dark); background: var(--green-tint); border: none; border-radius: 7px; padding: 5px 11px; cursor: pointer; } .rrn-theme .rrn-rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); } .rrn-theme .rrn-rev-cell { background: var(--surface); padding: 11px 16px; min-width: 0; } .rrn-theme .rrn-rev-cell.full { grid-column: 1 / -1; } .rrn-theme .rrn-rev-cell .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); } .rrn-theme .rrn-rev-cell .v { font-size: 13.5px; font-weight: 600; margin-top: 3px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .rrn-theme .rrn-rev-photos { display: flex; gap: 8px; padding: 13px 16px; flex-wrap: wrap; } .rrn-theme .rrn-rev-photos .rp { width: 56px; height: 44px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-dim); } .rrn-theme .rrn-rev-photos .rp svg { width: 18px; height: 18px; } .rrn-theme .rrn-rev-photos .rp { overflow: hidden; } .rrn-theme .rrn-rev-photos .rp img { width: 100%; height: 100%; object-fit: cover; } .rrn-theme .rrn-rev-photos-empty { font-size: 12.5px; color: var(--text-dim); } .rrn-theme .rrn-submit-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 13px 15px; border-radius: 11px; background: var(--green-tint); border: 1px solid rgba(28, 196, 120, .28); font-size: 12.5px; color: var(--text-mid); line-height: 1.45; } .rrn-theme .rrn-submit-note svg { width: 17px; height: 17px; flex: none; color: var(--green-dark); margin-top: 1px; } /* ── AI processing pipeline (Assessing) ───────────────────────────────────── */ .rrn-theme .rrn-pipeline { position: relative; display: flex; flex-direction: column; } .rrn-theme .rrn-pstep { position: relative; display: flex; gap: 16px; padding-bottom: 26px; } .rrn-theme .rrn-pstep:last-child { padding-bottom: 0; } .rrn-theme .rrn-pstep::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border2); } .rrn-theme .rrn-pstep:last-child::before { display: none; } .rrn-theme .rrn-pstep.complete::before { background: var(--rrn-green); } .rrn-theme .rrn-pnode { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; z-index: 1; background: var(--surface); border: 2px solid var(--border2); color: var(--text-dim); } .rrn-theme .rrn-pnode svg { width: 15px; height: 15px; } .rrn-theme .rrn-pstep.complete .rrn-pnode { background: var(--rrn-green); border-color: var(--rrn-green); color: #fff; } .rrn-theme .rrn-pstep.active .rrn-pnode { border-color: transparent; background: transparent; } .rrn-theme .rrn-pspin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--green-tint); border-top-color: var(--rrn-green); animation: rrnSpin .7s linear infinite; } @keyframes rrnSpin { to { transform: rotate(360deg); } } .rrn-theme .rrn-pcontent { padding-top: 4px; flex: 1; min-width: 0; } .rrn-theme .rrn-pl { font-weight: 700; font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 9px; } .rrn-theme .rrn-pstep.pending .rrn-pl { color: var(--text-dim); } .rrn-theme .rrn-plive { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-dark); background: var(--green-tint); padding: 3px 8px; border-radius: 20px; } .rrn-theme .rrn-pm { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; } /* ── View popup: header chrome + assessing context card ───────────────────── */ .rrn-theme .modal-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rrn-theme .rrn-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--green-dark); } .rrn-theme .proc-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; flex: none; } .rrn-theme .proc-mark svg { width: 20px; height: 20px; } .rrn-theme .proc-note { font-size: 12.5px; color: var(--text-mid); } .rrn-theme .modal-foot-spacer { flex: 1 1 auto; } .rrn-theme .rrn-proc { padding: 2px 0; } .rrn-theme .rrn-proc-ctx { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 24px; } .rrn-theme .rrn-proc-ctx-main .veh { font-weight: 700; font-size: 14.5px; color: var(--text); } .rrn-theme .rrn-proc-ctx-main .meta { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; } /* ── Status badges (light, legible) ───────────────────────────────────────── */ .rrn-theme .job-status { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 4px 10px; border-radius: 6px; border-color: transparent; } .rrn-theme .status-green { background: var(--green-tint); color: var(--green-dark); border-color: transparent; } .rrn-theme .status-amber { background: #fbf1d6; color: #8a6d0a; border-color: transparent; } .rrn-theme .status-blue { background: #e9f1fb; color: #2e6dd1; border-color: transparent; } .rrn-theme .status-red { background: var(--red-dim); color: var(--red); border-color: transparent; } .rrn-theme .status-dim { background: #eef0f2; color: var(--text-mid); border-color: transparent; } /* Completed result view inside the popup */ .rrn-theme .assess-detail-body { padding: 0; gap: 16px; } .rrn-theme .assess-result-hero.assess-yes .assess-result-hero-outcome strong { color: var(--green-dark); } .rrn-theme .assess-result-hero.assess-refer .assess-result-hero-outcome strong { color: #b8860b; } .rrn-theme .assess-result-hero-outcome small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-mid); } /* ── Reports (light, mockup-aligned) ──────────────────────────────────────── */ .rrn-theme .reports-filter-panel { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 12px; padding: 18px; } .rrn-theme .reports-filter-actions { padding-top: 14px; border-top: 1px solid var(--border); } .rrn-theme .period-input { font-family: var(--sans); font-size: 13px; border-radius: 9px; border-color: var(--border2); background: var(--surface); color: var(--text); } .rrn-theme .period-select--required { border-color: var(--rrn-green); } .rrn-theme .period-presets { background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px; padding: 3px; gap: 3px; } .rrn-theme .period-preset { font-family: var(--sans); font-weight: 700; font-size: 12px; border: none; border-radius: 7px; color: var(--text-mid); } .rrn-theme .period-preset.active, .rrn-theme .period-preset:hover { background: var(--surface); color: var(--green-dark); box-shadow: var(--shadow-sm); } /* KPI cards: no glyph, value + label + helper like the mockup */ .rrn-theme .kpi-icon { display: none; } .rrn-theme .kpi-card { padding: 15px 16px; gap: 4px; } .rrn-theme .kpi-value { font-size: 24px; } .rrn-theme .kpi-label { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-mid); } .rrn-theme .kpi-help { font-size: 10.5px; color: var(--text-dim); } /* Chart card headers */ .rrn-theme .card-header h2, .rrn-theme .conversion-breakdown h3 { font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); } .rrn-theme .card-header p { font-size: 12.5px; color: var(--text-mid); } /* Mockup green heatmap levels */ .rrn-theme .heatmap-cell.level-1 { background: #d5f0e0; } .rrn-theme .heatmap-cell.level-2 { background: #9fe0bd; } .rrn-theme .heatmap-cell.level-3 { background: #54cf94; } .rrn-theme .heatmap-cell.level-4 { background: #1fb877; } .rrn-theme .heatmap-cell.level-5 { background: var(--green-dark); } /* Brand-green progress bars */ .rrn-theme .enum-bar-track span, .rrn-theme .conversion-bar-track span { background: var(--rrn-green); } /* Data tables → mockup .dtable look (Assess-only via .reports-body) */ .rrn-theme .reports-body .report-table-card { border-radius: 12px; box-shadow: var(--shadow-sm); } .rrn-theme .reports-body .report-table-card h2 { font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .rrn-theme .reports-body .report-table-scroll table { font-family: var(--sans); font-size: 13px; } .rrn-theme .reports-body .report-table-scroll th { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-dim); background: var(--surface2); padding: 12px 16px; } .rrn-theme .reports-body .report-table-scroll td { padding: 12px 16px; font-size: 13px; } .rrn-theme .reports-body .report-table-card tr:hover td { background: var(--surface2); } /* Pager */ .rrn-theme .pager { color: var(--text-mid); font-size: 13px; } /* Status dots + outcome pills in report tables */ .rrn-theme .status-dot { box-shadow: none; width: 8px; height: 8px; margin-right: 6px; } .rrn-theme .status-dot.ok { background: var(--rrn-green); } .rrn-theme .status-dot.bad { background: var(--red); } .rrn-theme .status-dot.warn { background: var(--rrn-mustard); } .rrn-theme .status-dot.neutral { background: var(--text-dim); } .rrn-theme .oc-pill { font-weight: 700; font-size: 13px; } .rrn-theme .oc-pill.assess-yes { color: var(--green-dark); } .rrn-theme .oc-pill.assess-no { color: var(--red); } /* ── Form inputs (light) ──────────────────────────────────────────────────── */ .rrn-theme .f-input, .rrn-theme .f-textarea, .rrn-theme input[type="text"], .rrn-theme input[type="email"], .rrn-theme input[type="password"], .rrn-theme input[type="date"], .rrn-theme select.f-input, .rrn-theme textarea { font-family: var(--sans); background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; color: var(--text); } .rrn-theme .f-input:focus, .rrn-theme .f-textarea:focus, .rrn-theme textarea:focus { outline: none; border-color: var(--rrn-green); box-shadow: 0 0 0 3px rgba(28,196,120,.12); } /* ── Auth (login + request access) hero ───────────────────────────────────── */ .rrn-auth { min-height: 100vh; min-height: 100dvh; } .rrn-theme .login-panel-topbar { display: none; } .rrn-theme #assess-login-canvas { display: none; } .rrn-theme .login-panel-left { background: linear-gradient(155deg, #0c2448 0%, #0e2c54 55%, #10325f 100%); justify-content: stretch; padding: 46px 54px; color: #fff; } .rrn-theme .login-panel-left::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(28,196,120,.30), transparent 65%); } .rrn-theme .login-panel-left::before { content: ""; position: absolute; left: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(28,196,120,.12), transparent 70%); } .rrn-theme .login-panel-content { position: relative; z-index: 1; flex: 1; padding: 0; gap: 0; } .rrn-theme .auth-hero-mid { margin: auto 0; } .ra-lock-lg { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; } .ra-lock-lg .ra-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--rrn-green); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(28,196,120,.35); } .ra-lock-lg .ra-mark svg { width: 24px; height: 24px; } .ra-lock-lg .nm { font-size: 24px; font-weight: 700; color: #fff; } .ra-lock-lg .nm b { font-weight: 800; color: var(--rrn-green); } .rrn-theme .auth-hero-mid h2 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; margin: 0 0 14px; max-width: 460px; color: #fff; } .rrn-theme .auth-hero-mid p { font-size: 15.5px; color: rgba(255,255,255,.72); max-width: 420px; line-height: 1.6; margin: 0; } .hero-points { margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; } .hero-point { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.82); } .hero-point .hp-ic { width: 24px; height: 24px; border-radius: 7px; background: rgba(28,196,120,.2); color: var(--rrn-green); display: grid; place-items: center; flex: none; } .auth-hero-foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 9px; } .auth-hero-foot .auth-hero-mono { height: 20px; width: auto; display: block; flex: none; } .auth-hero-foot strong { color: rgba(255,255,255,.9); font-weight: 700; } /* ── Auth form panel (light) ──────────────────────────────────────────────── */ .rrn-theme .login-panel-right { width: 460px; border-left: none; padding: 40px; } .rrn-theme .login-form-icon { display: none; } .rrn-theme .login-form-wrap { max-width: 392px; gap: 0; } .rrn-theme .login-form-header { margin-bottom: 26px; gap: 6px; } .rrn-theme .login-form-title { font-family: var(--sans); font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .rrn-theme .login-form-sub { color: var(--text-mid); font-size: 14px; } .rrn-theme .login-field { margin-bottom: 15px; } .rrn-theme .login-field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-mid); margin-bottom: 7px; } .rrn-theme .login-field input { width: 100%; font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; padding: 12px 13px; } .rrn-theme .login-field input:focus { outline: none; border-color: var(--rrn-green); box-shadow: 0 0 0 3px rgba(28,196,120,.12); } .rrn-theme .login-btn { font-family: var(--sans); font-weight: 700; font-size: 14px; border-radius: 9px; padding: 13px; background: var(--rrn-green); color: #fff; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; transition: background .15s; } .rrn-theme .login-btn:hover:not(:disabled) { background: var(--green-dark); } .rrn-theme .login-btn--ghost, .rrn-theme .login-btn-sso { background: var(--surface); color: var(--text); border: 1px solid var(--border2); margin-top: 12px; } .rrn-theme .login-btn--ghost:hover:not(:disabled), .rrn-theme .login-btn-sso:hover:not(:disabled) { background: var(--surface2); border-color: var(--text-dim); } .rrn-theme .login-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; } .rrn-theme .login-divider::before, .rrn-theme .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .rrn-theme .login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; } .rrn-theme .login-links a { font-size: 13px; font-weight: 700; color: var(--green-dark); text-decoration: none; } .rrn-theme .login-links a:hover { text-decoration: underline; } .rrn-theme .login-error { padding: 11px 13px; border-radius: 10px; background: var(--red-dim); border: 1px solid rgba(216,83,78,.3); color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 15px; } .rrn-theme .login-identity { margin-bottom: 15px; background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; padding: 11px 11px 11px 13px; } .rrn-theme .login-identity-email { font-size: 14px; font-weight: 600; color: var(--text); } .rrn-theme .login-identity-change { font-size: 13px; font-weight: 700; color: var(--green-dark); } .rrn-theme .ok-box { padding: 11px 13px; border-radius: 10px; background: var(--green-tint); border: 1px solid rgba(28,196,120,.3); color: var(--green-dark); font-size: 13px; font-weight: 600; } .rrn-theme .login-footer { margin-top: 26px; font-size: 12px; color: var(--text-dim); text-align: center; } @media (max-width: 960px) { .rrn-theme .login-panel-left { display: none; } .rrn-theme .login-panel-right { width: 100%; } } /* ── List page: filter tabs + toolbar + rows (reusable) ───────────────────── */ .rrn-theme .filter-bar { padding: 0; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .rrn-theme .filter-bar-inner { gap: 22px; } .rrn-theme .filter-tabs { gap: 22px; } .rrn-theme .filter-tab { font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-mid); height: 40px; padding: 0 1px; } .rrn-theme .filter-tab:hover { color: var(--text); } .rrn-theme .filter-tab.active { color: var(--navy); border-bottom-color: var(--rrn-green); } .rrn-theme .filter-tab-count { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--text-dim); opacity: 1; } .rrn-theme .filter-tab.active .filter-tab-count { color: var(--green-dark); } .rrn-theme .sort-select, .rrn-theme .assess-tenant-select, .rrn-theme .assess-user-select, .rrn-theme .assess-model-select, .rrn-theme .assess-outcome-select, .rrn-theme .assess-decision-select, .rrn-theme .assess-date-filter { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-mid); background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; } .rrn-theme .assess-tools-bar { border-bottom: none; padding: 0 0 14px; gap: 10px; } .rrn-theme .assess-search { background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; } .rrn-theme .assess-date-field { border-radius: 9px; background: var(--surface); border-color: var(--border2); } /* The list itself */ .rrn-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } .rrn-lhead { display: grid; grid-template-columns: var(--rrn-cols, 118px 1fr 150px 130px 168px); gap: 18px; padding: 13px 22px; border-bottom: 1px solid var(--border); background: var(--surface2); } .rrn-lhead span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); } .rrn-row { display: grid; grid-template-columns: var(--rrn-cols, 118px 1fr 150px 130px 168px); gap: 18px; align-items: center; padding: 15px 22px; cursor: pointer; border-left: 3px solid transparent; transition: background .13s; } /* Grid items default to min-width:auto, so a cell never shrinks below its content and long text / button groups bleed into the next column. Letting every cell shrink to its track (and breaking long words) keeps content inside its column. */ .rrn-row > *, .rrn-lhead > * { min-width: 0; overflow-wrap: anywhere; } /* Generic selected-row state (e.g. the row whose detail panel is open). */ .rrn-row.is-active { background: var(--surface2); border-left-color: var(--rrn-green); } /* Overdue / just-dispatched row accents (used by the Dispatch queue). */ .rrn-row.is-overdue { border-left-color: var(--red) !important; } .rrn-row.is-dispatching { animation: rrnRowDispatch .6s ease; } @keyframes rrnRowDispatch { 0% { background: rgba(28, 196, 120, .18); } 100% { background: transparent; } } .rrn-row + .rrn-row, .rrn-row-skeleton + .rrn-row { border-top: 1px solid var(--border); } .rrn-row:hover { background: var(--surface2); } .rrn-row.assess-yes { border-left-color: var(--rrn-green); } .rrn-row.assess-no { border-left-color: var(--red); } .rrn-row.assess-refer { border-left-color: var(--rrn-mustard); } .rrn-veh { font-weight: 700; font-size: 15px; color: var(--text); } .rrn-veh-muted { color: var(--text-dim); font-weight: 500; font-style: italic; } .rrn-vsub { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } .rrn-vsub .rrn-ph { display: inline-flex; align-items: center; gap: 5px; } .rrn-vsub .rrn-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); } .rrn-row-progress { width: 56px; margin: 0; } .rrn-ref { font-weight: 700; font-size: 13.5px; color: var(--text); } .rrn-ref small { display: block; font-weight: 500; color: var(--text-mid); font-size: 12px; margin-top: 2px; } .rrn-when { font-size: 13px; color: var(--text-mid); } .rrn-when small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px; } .rrn-outcome { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .rrn-outcome .rrn-ov { font-size: 13.5px; font-weight: 700; } .rrn-outcome.assess-yes .rrn-ov { color: var(--green-dark); } .rrn-outcome.assess-no .rrn-ov { color: var(--red); } .rrn-outcome.assess-refer .rrn-ov { color: #b8860b; } .rrn-outcome .rrn-oc { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); margin-left: 4px; } .rrn-outcome .rrn-muted { font-size: 13px; color: var(--text-dim); font-weight: 500; } .rrn-row-skeleton { pointer-events: none; } /* Shimmer placeholder bars used inside .rrn-row-skeleton (shared so every app's list skeleton looks the same). */ .skel-bar { height: 9px; border-radius: 4px; background: var(--border2); position: relative; overflow: hidden; } .skel-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .05) 50%, transparent 100%); background-size: 200% 100%; animation: skelShimmer 1.6s ease-in-out infinite; } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skel-bar-sm { width: 80px; } .skel-bar-lg { width: 65%; height: 12px; } .skel-bar-md { width: 45%; } .rrn-pager { margin: 16px 0 0; } @media (max-width: 960px) { .rrn-lhead { display: none; } .rrn-row { grid-template-columns: 90px 1fr; row-gap: 8px; } .rrn-row > .rrn-when, .rrn-row > .rrn-ref { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ SHARED PAGE FRAMEWORK — base layout for the cross-app building-block components (PageShell, PageHeader, ReportsFilterPanel, ReportsTabBar, KpiGrid/KpiCard, ReportCard/ChartCard, ReportsDrillModal). Every app inherits these; no app should re-declare them in scoped CSS. See CLAUDE.md → Cross-App UI Framework. ════════════════════════════════════════════════════════════════════════════ */ /* Page scaffold ----------------------------------------------------------- */ .rrn-page-full { padding: 24px 28px 48px; } .rrn-page-head-titles { min-width: 0; } .rrn-page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Reports filter panel ---------------------------------------------------- */ .reports-filter-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface2, var(--bg)) 74%, var(--surface) 26%); margin-bottom: 18px; } .reports-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; align-items: start; } .reports-filter-grid .filter-field, .reports-filter-grid .filter-field :is(select, input) { min-width: 0; width: 100%; } .reports-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .reports-filter-presets, .reports-action-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .reports-action-buttons { justify-content: flex-end; } .period-input { min-height: 36px; min-width: 150px; padding: 7px 10px; border: 1px solid var(--border2); border-radius: 7px; background: var(--surface2, var(--bg)); color: var(--text); font-family: var(--mono); font-size: 12px; } .period-select--required { border-color: var(--accent); } .period-presets { display: flex; gap: 6px; } .period-preset { border: 1px solid var(--border2); border-radius: 7px; background: transparent; color: var(--text-dim); font-family: var(--mono); font-size: 11px; padding: 6px 12px; cursor: pointer; } .period-preset.active, .period-preset:hover { border-color: var(--accent); color: var(--accent); } /* Reports tab bar --------------------------------------------------------- */ .reports-tab-bar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .reports-tab { border: 0; background: transparent; color: var(--text-dim); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .reports-tab:hover { color: var(--text); } .reports-tab.active { color: var(--green-dark, var(--accent)); border-bottom-color: var(--rrn-green, var(--accent)); } /* Reports body + status --------------------------------------------------- */ .reports-body { display: flex; flex-direction: column; gap: 18px; } .report-loading, .report-error, .drill-banner { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-dim); } .report-error { color: var(--red, #f04c62); } .report-banner { padding: 10px 14px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); } .report-banner.report-error { border-color: color-mix(in srgb, var(--red) 50%, var(--border)); background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); } .report-banner--ok { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); } .report-explainer { padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; line-height: 1.5; } .report-explainer em { color: var(--text-bright); } .reports-loading-skeleton { display: flex; flex-direction: column; gap: 18px; } .reports-skeleton-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .reports-skeleton-kpi, .reports-skeleton-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .reports-skeleton-kpi { min-height: 92px; } .reports-skeleton-chart { height: 220px; border-radius: 8px; background: var(--border2); position: relative; overflow: hidden; } .reports-skeleton-chart::after, .reports-skeleton-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 5%, transparent) 50%, transparent 100%); background-size: 200% 100%; animation: skelShimmer 1.6s ease-in-out infinite; } .reports-skeleton-row { width: 100%; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .drill-banner { display: flex; justify-content: space-between; align-items: center; color: var(--accent); } /* KPI cards --------------------------------------------------------------- */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kpi-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; } button.kpi-card { cursor: pointer; } button.kpi-card:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%); } .kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .kpi-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } .kpi-value { font-size: 28px; font-weight: 800; color: var(--text-bright); } .kpi-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .kpi-help { margin-top: 2px; color: var(--text-dim); font-size: 11px; line-height: 1.35; } .accent-green .kpi-icon { color: #2fc58d; background: rgba(47, 197, 141, .1); border-color: rgba(47, 197, 141, .28); } .accent-blue .kpi-icon { color: #2fb6d8; background: rgba(47, 182, 216, .1); border-color: rgba(47, 182, 216, .28); } .accent-amber .kpi-icon { color: #d6a84f; background: rgba(214, 168, 79, .1); border-color: rgba(214, 168, 79, .28); } .accent-red .kpi-icon { color: #d95d6a; background: rgba(217, 93, 106, .1); border-color: rgba(217, 93, 106, .28); } .accent-purple .kpi-icon { color: #7d87d9; background: rgba(125, 135, 217, .1); border-color: rgba(125, 135, 217, .28); } .accent-cyan .kpi-icon { color: #38b8b8; background: rgba(56, 184, 184, .1); border-color: rgba(56, 184, 184, .28); } .accent-green::before { background: #2fc58d; } .accent-blue::before { background: #2e6dd1; } .accent-amber::before { background: var(--rrn-mustard, #e8b81c); } .accent-red::before { background: var(--red, #d8534e); } .accent-purple::before { background: #7a5cf0; } .accent-cyan::before { background: #00cfb9; } /* Report cards + charts --------------------------------------------------- */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .report-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(12, 36, 72, .05)); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .card-header h2 { margin: 0; color: var(--text-bright); font-size: 14px; } .card-header p { margin: 4px 0 0; color: var(--text-dim); font-size: 12px; } .card-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .report-card-body { padding: 18px; } .report-card-body--flush { padding: 0; } .report-card-body > :first-child { margin-top: 0; } .report-card-body > :last-child { margin-bottom: 0; } .chart-area { height: 280px; padding: 16px; } /* Report pager + table row helpers --------------------------------------- */ .pager { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--text-dim); font-family: var(--mono); } .clickable-row { cursor: pointer; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); } .status-dot.ok { background: #25d695; } .status-dot.bad { background: #f04c62; } .status-dot.warn { background: #f0b429; } /* ReportTable (base, theme-agnostic so the shared component styles itself anywhere) */ .report-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .report-table-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .report-table-card > header h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-bright); } .report-table-card-actions { display: flex; align-items: center; gap: 8px; } .report-table-scroll { overflow-x: auto; } .report-table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); } .report-table-scroll th { text-align: left; padding: 10px 14px; background: var(--surface2, var(--surface)); color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } .report-table-scroll td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .report-table-scroll tr:last-child td { border-bottom: 0; } /* Shared admin filter row (audit log, integration logs, etc.) */ .admin-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; } .admin-filter-row .filter-field { min-width: 160px; } /* Shared API docs chrome (ApiDocsSection) */ .api-docs-baseurl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2, var(--surface)); } .api-docs-baseurl-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } /* Body that stacks an app's API endpoint cards consistently across apps. */ .api-docs-body { display: flex; flex-direction: column; gap: 20px; width: 100%; } @media (max-width: 1100px) { .reports-filter-actions { align-items: stretch; flex-direction: column; } .reports-action-buttons { justify-content: flex-start; } .summary-grid, .report-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ Iris — Rapid Intelligence (agent) surfaces The --iris-accent gradient is reserved for agent UI only, so the intelligent layer is instantly recognisable in every app. All other colours come from the shared theme tokens above. ════════════════════════════════════════════════════════════════════════════ */ :root { --iris-accent: #7c6ff0; --iris-accent-2: #4aa3f0; --iris-grad: linear-gradient(135deg, var(--iris-accent), var(--iris-accent-2)); --iris-glow: rgba(124, 111, 240, .35); --iris-tint: rgba(124, 111, 240, .08); } /* ── Orb + launcher ── */ .iris-orb { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: var(--iris-grad); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--iris-tint), 0 2px 10px var(--iris-glow); } .iris-orb-core { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px rgba(12, 36, 72, .35); animation: iris-iris 4.5s ease-in-out infinite; } .iris-orb.small { width: 26px; height: 26px; } .iris-orb.small .iris-orb-core { width: 9px; height: 9px; } @keyframes iris-iris { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } } .iris-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 1050; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--border2); border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--text-bright); font: 600 .85rem var(--sans); letter-spacing: .02em; box-shadow: 0 6px 24px rgba(7, 15, 29, .25); transition: transform .15s ease, box-shadow .15s ease; } .iris-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--iris-glow); } .iris-launcher--split { gap:0; padding:0; overflow:hidden; cursor:default; } .iris-launcher-main { display:flex; min-width:0; align-items:center; gap:10px; align-self:stretch; padding:8px 13px 8px 8px; border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; letter-spacing:inherit; } .iris-launcher-main:focus-visible,.iris-launcher-chat:focus-visible { outline:2px solid var(--iris-accent); outline-offset:-3px; } .iris-launcher-chat { position:relative; display:grid; width:46px; align-self:stretch; place-items:center; border:0; border-left:1px solid color-mix(in srgb,var(--iris-accent) 24%,var(--border)); background:color-mix(in srgb,var(--iris-accent) 5%,transparent); color:var(--iris-accent); cursor:pointer; transition:background .14s ease,color .14s ease; } .iris-launcher-chat:hover { background:var(--iris-tint); color:var(--iris-accent-2); } .iris-launcher-chat svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .iris-launcher-chat-dot { position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--iris-accent-2); box-shadow:0 0 0 2px var(--surface); } .iris-launcher-chat.has-update { background:var(--iris-tint); } .iris-launcher-copy { display:flex; min-width:0; max-width:180px; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; } .iris-launcher-label { max-width:100%; overflow:hidden; color:var(--text-bright); font-size:.82rem; font-weight:750; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; } .iris-launcher-meta { max-width:100%; overflow:hidden; color:var(--text-dim); font-size:.62rem; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .iris-launcher.has-update .iris-orb { animation: iris-pulse 1.6s ease-in-out infinite; } .iris-launcher.has-context-arrival { animation:iris-context-arrival .72s cubic-bezier(.2,.9,.3,1); } .iris-launcher.context-busy .iris-orb { animation:iris-pulse 1.25s ease-in-out infinite; } .iris-launcher.context-busy .iris-orb-core { animation-duration:.8s; } @keyframes iris-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--iris-tint), 0 2px 10px var(--iris-glow); } 50% { box-shadow: 0 0 0 7px var(--iris-tint), 0 2px 16px var(--iris-glow); } } @keyframes iris-context-arrival { 0% { opacity:.35; transform:translateX(12px) scale(.98); } 42% { opacity:1; transform:translateX(0) rotate(-1.2deg) scale(1.01); } 63% { transform:rotate(.9deg); } 81% { transform:rotate(-.35deg); } 100% { transform:none; } } @media (prefers-reduced-motion: reduce) { .iris-launcher.has-update .iris-orb, .iris-launcher.context-busy .iris-orb, .iris-launcher.has-context-arrival, .iris-orb-core { animation:none; } } .iris-update-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--iris-accent); } /* ── Slide-over panel ── */ .iris-scrim { position: fixed; inset: 0; z-index: 1079; background: rgba(7, 15, 29, .35); backdrop-filter: blur(1.5px); } .iris-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080; width: min(480px, 96vw); min-width: 380px; max-width: 96vw; resize: horizontal; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border2); box-shadow: -18px 0 48px rgba(7, 15, 29, .35); animation: iris-slide-in .22s cubic-bezier(.2, .9, .3, 1); direction: rtl; /* puts the resize handle on the left edge */ } .iris-panel > * { direction: ltr; } @keyframes iris-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } .iris-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--iris-tint), transparent); } .iris-head-brand { display: flex; align-items: center; gap: 10px; } .iris-title { font: 700 1rem var(--sans); color: var(--text-bright); line-height: 1.1; } .iris-sub { font: 500 .68rem var(--sans); color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; } .iris-head-actions { display: flex; align-items: center; gap: 6px; min-width: 0; } /* The contextual output and conversational agent share one explicit Iris surface. Users only see tabs for capabilities they actually have. */ .iris-surface-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface2); } .iris-surface-tab { position:relative; display:flex; min-width:0; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text-dim); cursor:pointer; font:700 .74rem var(--sans); transition:background .14s ease,color .14s ease,border-color .14s ease; } .iris-surface-tab:hover { color:var(--text-bright); background:var(--surface); } .iris-surface-tab.active { border-color:color-mix(in srgb,var(--iris-accent) 28%,var(--border)); background:var(--surface); color:var(--iris-accent); box-shadow:var(--shadow-sm); } .iris-surface-unread { width:7px; height:7px; border-radius:50%; background:var(--iris-accent); box-shadow:0 0 0 3px var(--iris-tint); } @media (max-width:520px) { .iris-panel { width:100vw; min-width:0; max-width:none; resize:none; } .iris-launcher { right:14px; bottom:14px; } .iris-convo-trigger { max-width:130px; } } /* ── Conversation picker (custom dropdown; native select clipped long titles) ── */ .iris-convo-menu { position: relative; min-width: 0; } .iris-convo-trigger { display: flex; align-items: center; gap: 6px; max-width: 170px; height: 28px; cursor: pointer; font: 500 .72rem var(--sans); color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; } .iris-convo-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .iris-convo-trigger-caret { color: var(--text-dim); font-size: .6rem; flex-shrink: 0; } .iris-convo-menu-scrim { position: fixed; inset: 0; z-index: 1081; } .iris-convo-menu-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1082; width: 300px; max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 32px rgba(7, 15, 29, .25); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .iris-convo-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: none; background: transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left; } .iris-convo-menu-item:hover { background: var(--surface2); } .iris-convo-menu-item.active { background: var(--iris-tint); } .iris-convo-menu-title { font: 600 .74rem var(--sans); color: var(--text-bright); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iris-convo-menu-when { font: 500 .62rem var(--mono); color: var(--text-dim); } .iris-convo-menu-new { flex-direction: row; font: 600 .72rem var(--sans); color: var(--iris-accent); } .iris-convo-menu-empty { font: 400 .72rem var(--sans); color: var(--text-dim); padding: 8px 9px; } .iris-icon-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-size: .85rem; } .iris-icon-btn:hover { color: var(--text-bright); border-color: var(--border2); } .iris-pad { margin: 12px 14px; } /* ── Messages ── */ .iris-messages { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .iris-empty { margin: auto; text-align: center; padding: 32px 22px; max-width: 320px; } .iris-empty-orb { display: flex; justify-content: center; margin-bottom: 14px; } .iris-empty-orb span { width: 44px; height: 44px; border-radius: 50%; background: var(--iris-grad); box-shadow: 0 0 0 6px var(--iris-tint), 0 4px 20px var(--iris-glow); animation: iris-pulse 3s ease-in-out infinite; } .iris-empty-title { font: 700 1.05rem var(--sans); color: var(--text-bright); margin-bottom: 6px; } .iris-empty-sub { font: 400 .8rem/1.5 var(--sans); color: var(--text-dim); } .iris-msg-user { align-self: flex-end; max-width: 88%; background: var(--iris-grad); color: #fff; font: 500 .84rem/1.45 var(--sans); padding: 9px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word; } .iris-msg-assistant { display: flex; flex-direction: column; gap: 8px; max-width: 100%; } /* ── Live activity ── */ .iris-activity, .iris-activity-solo { border: 1px solid var(--border); border-left: 3px solid var(--iris-accent); border-radius: 10px; background: var(--surface2); font: 500 .76rem var(--sans); color: var(--text); } .iris-activity summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; } .iris-activity summary::-webkit-details-marker { display: none; } .iris-activity-solo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; } .iris-activity-done { color: var(--text-dim); } .iris-activity-body { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 5px; } .iris-working { display: inline-flex; gap: 3px; } .iris-working span { width: 5px; height: 5px; border-radius: 50%; background: var(--iris-accent); animation: iris-think 1.2s ease-in-out infinite; } .iris-working span:nth-child(2) { animation-delay: .15s; } .iris-working span:nth-child(3) { animation-delay: .3s; } @keyframes iris-think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .iris-plan { border-bottom: 1px dashed var(--border); padding-bottom: 8px; margin-bottom: 4px; } .iris-plan-title { font: 700 .62rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); margin-bottom: 4px; } .iris-plan-step { font: 500 .74rem/1.45 var(--sans); color: var(--text); padding-left: 14px; position: relative; } .iris-plan-step::before { content: '›'; position: absolute; left: 2px; color: var(--iris-accent); } .iris-step { display: flex; align-items: baseline; gap: 8px; } .iris-step-marker { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; border: 2px solid var(--iris-accent); background: transparent; } .iris-step.running .iris-step-marker { animation: iris-pulse 1.2s ease-in-out infinite; } .iris-step.done .iris-step-marker { background: var(--accent); border-color: var(--accent); } .iris-step-text { flex: 1; font: 500 .75rem/1.4 var(--sans); color: var(--text); overflow-wrap: anywhere; } .iris-step.done .iris-step-text { color: var(--text-dim); } .iris-step-ms { font: 500 .66rem var(--mono); color: var(--text-dim); } /* ── Answer blocks ── */ .iris-block { display: flex; flex-direction: column; gap: 6px; } .iris-block .iris-md-p { font: 400 .84rem/1.55 var(--sans); color: var(--text); margin: 0 0 6px; } .iris-block .iris-md-p strong, .iris-block li strong { color: var(--text-bright); } .iris-md-heading { font: 700 .9rem var(--sans); color: var(--text-bright); margin: 6px 0 2px; } .iris-md-list { margin: 0 0 6px; padding-left: 20px; font: 400 .82rem/1.55 var(--sans); color: var(--text); } .iris-md-code, .iris-code { font: 500 .76rem var(--mono); background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; color: var(--text-bright); } .iris-code { display: block; padding: 10px 12px; overflow-x: auto; white-space: pre; } .iris-md-link { color: var(--iris-accent); text-decoration: none; } .iris-md-link:hover { text-decoration: underline; } .iris-md-table-wrap, .iris-table-wrap { overflow-x: auto; } .iris-md-table, .iris-table { width: 100%; border-collapse: collapse; font: 400 .78rem var(--sans); } .iris-md-table th, .iris-table th { text-align: left; font: 700 .64rem var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); padding: 7px 10px; border-bottom: 1px solid var(--border2); white-space: nowrap; } .iris-md-table td, .iris-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .iris-table-card, .iris-chart-card, .iris-entity, .iris-timeline { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 12px 14px; } .iris-table-title, .iris-timeline-title { font: 700 .8rem var(--sans); color: var(--text-bright); margin-bottom: 8px; } .iris-table-caption { font: 400 .7rem var(--sans); color: var(--text-dim); margin-top: 8px; } .iris-table-more { margin-top: 8px; border: 1px solid var(--border); background: transparent; color: var(--iris-accent); font: 600 .72rem var(--sans); border-radius: 8px; padding: 5px 10px; cursor: pointer; } .iris-notice { border-radius: 10px; padding: 9px 12px; font: 500 .78rem/1.5 var(--sans); border: 1px solid var(--border); } .iris-notice .iris-md-p { margin: 0; font-size: .78rem; } .iris-notice-info { background: var(--iris-tint); border-color: var(--iris-accent); color: var(--text); } .iris-notice-warn { background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: var(--amber); color: var(--text); } .iris-notice-success { background: var(--accent-dim); border-color: var(--accent); color: var(--text); } .iris-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .iris-kpi { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .iris-kpi-value { font: 800 1.25rem var(--sans); color: var(--text-bright); font-variant-numeric: tabular-nums; } .iris-kpi-label { font: 600 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .iris-kpi-delta { font: 600 .68rem var(--sans); color: var(--iris-accent); } .iris-kpi-green .iris-kpi-value { color: var(--accent); } .iris-kpi-amber .iris-kpi-value { color: var(--amber); } .iris-kpi-red .iris-kpi-value { color: var(--red); } .iris-entity-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; } .iris-entity-title { font: 700 .9rem var(--sans); color: var(--text-bright); } .iris-entity-subtitle { font: 500 .72rem var(--sans); color: var(--text-dim); } .iris-entity-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; } .iris-entity-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .iris-entity-label { font: 600 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .iris-entity-value { font: 500 .8rem/1.4 var(--sans); color: var(--text-bright); overflow-wrap: anywhere; } .iris-timeline { display: flex; flex-direction: column; gap: 10px; } .iris-timeline-event { display: flex; gap: 10px; position: relative; } .iris-timeline-event:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: -12px; width: 1px; background: var(--border2); } .iris-timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--iris-accent); flex: 0 0 auto; margin-top: 4px; } .iris-tone-warn .iris-timeline-dot { background: var(--amber); } .iris-tone-danger .iris-timeline-dot, .iris-tone-red .iris-timeline-dot { background: var(--red); } .iris-tone-success .iris-timeline-dot, .iris-tone-green .iris-timeline-dot { background: var(--accent); } .iris-timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .iris-timeline-when { font: 600 .68rem var(--mono); color: var(--text-dim); } .iris-timeline-what { font: 600 .8rem var(--sans); color: var(--text-bright); } .iris-timeline-detail { font: 400 .76rem/1.5 var(--sans); color: var(--text); } .iris-chart svg { width: 100%; height: auto; display: block; } .iris-chart-grid { stroke: var(--border); stroke-width: 1; } .iris-chart-axis { display: flex; justify-content: space-between; font: 500 .66rem var(--sans); color: var(--text-dim); margin-top: 4px; } .iris-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; } .iris-chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; } .iris-chart-bar-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; } .iris-chart-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; min-height: 2px; } .iris-chart-bar-label { font: 500 .62rem var(--sans); color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iris-chart-donut { display: flex; align-items: center; gap: 14px; } .iris-chart-donut svg { width: 110px; flex: 0 0 auto; transform: rotate(-90deg); } .iris-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 .7rem var(--sans); color: var(--text); } .iris-chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; } .iris-navigate { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; border: 1px solid var(--iris-accent); border-radius: 12px; padding: 10px 14px; background: var(--iris-tint); color: var(--text-bright); font: 600 .8rem var(--sans); transition: transform .12s ease; } .iris-navigate:hover { transform: translateX(3px); } .iris-navigate-kicker { font: 700 .58rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); } .iris-navigate-label { flex: 1; } .iris-navigate-arrow { color: var(--iris-accent); font-size: 1rem; } /* ── Artifact download card (Iris-generated PDF/CSV) ── */ .iris-artifact { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2, var(--iris-tint)); color: var(--text-bright); font: 600 .8rem var(--sans); transition: border-color .12s ease, transform .12s ease; } .iris-artifact:hover:not(:disabled) { border-color: var(--iris-accent); transform: translateY(-1px); } .iris-artifact:disabled { opacity: .6; cursor: progress; } .iris-artifact-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; color: #fff; font: 800 .62rem var(--sans); letter-spacing: .04em; } .iris-artifact-pdf { background: linear-gradient(135deg, #d64a4a, #b83232); } .iris-artifact-csv { background: linear-gradient(135deg, #1cc478, #16a463); } .iris-artifact-file { background: linear-gradient(135deg, #7c6ff0, #4aa3f0); } .iris-artifact-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .iris-artifact-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iris-artifact-meta { font: 500 .7rem var(--sans); color: var(--text-dim); } .iris-artifact-action { flex: 0 0 auto; font: 700 .72rem var(--sans); color: var(--iris-accent); border: 1px solid var(--iris-accent); border-radius: 8px; padding: 6px 12px; } /* ── Evidence chips ── */ .iris-evidence { align-self: flex-start; } .iris-evidence summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: 600 .64rem var(--sans); letter-spacing: .05em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; background: var(--surface2); } .iris-evidence summary::-webkit-details-marker { display: none; } .iris-evidence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .iris-evidence-list { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; } .iris-evidence-item { display: flex; align-items: baseline; gap: 8px; font: 500 .7rem var(--sans); color: var(--text); } .iris-evidence-item code { font: 500 .66rem var(--mono); color: var(--iris-accent); } .iris-evidence-ms { margin-left: auto; font: 500 .64rem var(--mono); color: var(--text-dim); } /* ── Ask options, coverage, feedback ── */ .iris-options { display: flex; flex-wrap: wrap; gap: 6px; } .iris-options button { border: 1px solid var(--iris-accent); background: transparent; color: var(--iris-accent); font: 600 .74rem var(--sans); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background .12s ease, color .12s ease; } .iris-options button:hover:not(:disabled) { background: var(--iris-grad); color: #fff; border-color: transparent; } .iris-turn-foot { display: flex; align-items: center; gap: 10px; } .iris-coverage { font: 600 .62rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 2px 8px; } .iris-feedback { margin-left: auto; display: inline-flex; gap: 2px; } .iris-feedback button { border: none; background: transparent; cursor: pointer; font-size: .8rem; opacity: .35; padding: 2px 4px; border-radius: 6px; transition: opacity .12s ease; } .iris-feedback button:hover, .iris-feedback button.sel { opacity: 1; } /* ── Compose ── */ .iris-error { margin: 6px 14px; font: 500 .74rem var(--sans); color: var(--red); } .iris-compose { border-top: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; } .iris-context-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font: 600 .68rem var(--sans); color: var(--iris-accent); border: 1px solid var(--iris-accent); border-radius: 999px; padding: 3px 6px 3px 10px; background: var(--iris-tint); } .iris-context-chip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: .85rem; line-height: 1; } .iris-compose-row { display: flex; align-items: flex-end; gap: 8px; } .iris-compose textarea { flex: 1; resize: none; border: 1px solid var(--border2); border-radius: 12px; background: var(--surface2); color: var(--text-bright); font: 500 .84rem/1.4 var(--sans); padding: 10px 12px; outline: none; } .iris-compose textarea:focus { border-color: var(--iris-accent); box-shadow: 0 0 0 3px var(--iris-tint); } .iris-send { width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer; background: var(--iris-grad); color: #fff; font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .12s ease, opacity .12s ease; } .iris-send:hover:not(:disabled) { transform: translateY(-1px); } .iris-send:disabled { opacity: .4; cursor: default; } .iris-send.iris-stop { background: var(--red); font-size: .7rem; } /* Compact deep-investigation toggle in the narrow panel's composer — icon-only counterpart of the workspace's labelled pill, same state colours. */ .iris-deep-icon { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; cursor: pointer; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; } .iris-deep-icon:hover { color: var(--text-bright); border-color: var(--iris-accent); } .iris-deep-icon.on { color: var(--iris-accent); border-color: var(--iris-accent); background: var(--iris-tint); box-shadow: 0 0 8px var(--iris-tint); } /* ── Composer meta row: deep-investigation toggle + context ring ── */ .iris-compose-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; min-height: 20px; } .iris-deep-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); border-radius: 999px; cursor: pointer; background: var(--surface2); color: var(--text-dim); font: 600 .68rem/1 var(--sans); padding: 4px 10px; transition: color .12s ease, border-color .12s ease, background .12s ease; } .iris-deep-toggle:hover { color: var(--text-bright); border-color: var(--iris-accent); } .iris-deep-toggle.on { color: var(--iris-accent); border-color: var(--iris-accent); background: var(--iris-tint); } .iris-deep-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); transition: background .12s ease, box-shadow .12s ease; } .iris-deep-toggle.on .iris-deep-dot { background: var(--iris-accent); box-shadow: 0 0 6px var(--iris-accent); } .iris-context-ring { display: inline-flex; align-items: center; gap: 5px; cursor: help; color: var(--text-dim); font: 600 .66rem/1 var(--mono, monospace); } .iris-ring-track { fill: none; stroke: var(--border2); stroke-width: 2.5; } .iris-ring-fill { fill: none; stroke: var(--iris-accent); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray .4s ease; } .iris-ring-fill.hot { stroke: var(--red); } .iris-context-pct { letter-spacing: .02em; } /* ── Workspace (/agent) ── */ .iris-ws { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 0; height: calc(100vh - 120px); min-height: 480px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); /* width:100% keeps the workspace at its full capped width from first paint, so it never shrink-wraps to the conversation and jumps as answers render. */ margin: 18px auto; width: 100%; max-width: 1600px; box-sizing: border-box; } .iris-ws-denied { margin: 40px auto; text-align: center; font: 500 .9rem var(--sans); color: var(--text-dim); } .iris-ws-sidebar { border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface2); overflow-y: auto; min-height: 0; } .iris-ws-brand { display: flex; align-items: center; gap: 10px; } /* min-height:0 lets the list shrink so the memory panel stays pinned and visible at the bottom of the sidebar however long the conversation list gets. */ .iris-ws-convos { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; } .iris-ws-convo { position: relative; display: flex; flex-direction: column; gap: 1px; cursor: pointer; border-radius: 10px; padding: 8px 26px 8px 10px; border: 1px solid transparent; } .iris-ws-convo:hover { background: var(--surface); } .iris-ws-convo.active { background: var(--surface); border-color: var(--iris-accent); } .iris-ws-convo-title { font: 600 .76rem var(--sans); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iris-ws-convo-when { font: 500 .62rem var(--mono); color: var(--text-dim); } .iris-ws-convo-archive { position: absolute; right: 6px; top: 8px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: .85rem; opacity: 0; } .iris-ws-convo:hover .iris-ws-convo-archive { opacity: 1; } .iris-ws-none { font: 400 .76rem/1.5 var(--sans); color: var(--text-dim); padding: 6px 2px; } .iris-ws-memory summary { font: 600 .72rem var(--sans); color: var(--text); cursor: pointer; margin-bottom: 6px; } .iris-ws-memory textarea { width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: 400 .74rem/1.45 var(--sans); padding: 8px 10px; } .iris-ws-memory-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .iris-ws-memory { flex-shrink: 0; margin-top: auto; } .iris-ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* min-height:0 makes long conversations scroll inside this pane instead of pushing the composer (and the whole grid) past the bottom of the screen. */ .iris-ws-messages { flex: 1; overflow-y: auto; padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .iris-ws-compose { padding: 12px 22px 16px; } .iris-ws-detail { border-left: 1px solid var(--border); background: var(--surface2); padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .iris-ws-detail-title { font: 700 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); } .iris-ws-usage { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font: 500 .68rem var(--mono); color: var(--text-dim); } @media (max-width: 1080px) { .iris-ws { grid-template-columns: 220px minmax(0, 1fr); } .iris-ws-detail { display: none; } } @media (max-width: 760px) { .iris-ws { grid-template-columns: minmax(0, 1fr); height: auto; } .iris-ws-sidebar { display: none; } } /* ── Iris full-screen in-page overlay (expand from the docked panel) ── */ .iris-ws-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; padding: 16px; box-sizing: border-box; background: rgba(7, 15, 29, .55); backdrop-filter: blur(3px); animation: iris-ws-overlay-in .16s ease-out; } @keyframes iris-ws-overlay-in { from { opacity: 0; } to { opacity: 1; } } /* Fill the overlay: drop the page margins and let the grid take the full height. */ .iris-ws-overlay .iris-ws { height: auto; margin: 0 auto; min-height: 0; width: 100%; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); } .iris-ws-overlaid { position: relative; } /* Window controls float over the detail pane's top-right corner. */ .iris-ws-winctl { position: absolute; top: 10px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--surface2) 82%, transparent); border: 1px solid var(--border); } /* Keep the "Investigation" heading clear of the floating controls. */ .iris-ws-overlaid .iris-ws-detail { padding-top: 42px; } @media (max-width: 1080px) { .iris-ws-overlaid .iris-ws-detail { padding-top: 14px; } } /* ── Admin ── */ .iris-admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; margin-bottom: 16px; } .iris-admin-kpi { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .iris-admin-kpi b { font: 800 1.2rem var(--sans); color: var(--text-bright); font-variant-numeric: tabular-nums; } .iris-admin-kpi span { font: 600 .62rem var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); } .iris-admin-filter { display: flex; gap: 8px; margin-top: 16px; margin-bottom: 12px; max-width: 420px; } .iris-admin-convo-cols { display: grid; grid-template-columns: 110px 140px 90px minmax(0, 1fr) 60px; gap: 10px; } .iris-admin-convo-row { cursor: pointer; } .iris-admin-coverage-cols { display: grid; grid-template-columns: 110px 140px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .iris-admin-eval-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 150px 70px; gap: 10px; } .iris-admin-eval-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; margin-bottom: 14px; } .iris-admin-back { border: none; background: transparent; color: var(--iris-accent); cursor: pointer; font: 600 .76rem var(--sans); margin-top: 4px; margin-bottom: 10px; padding: 0; } .iris-admin-transcript { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin-bottom: 18px; } /* The settings form grid sits flush under the section header without this. */ .iris-admin-rules { margin-top: 14px; margin-bottom: 18px; } .iris-admin-turn-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 500 .7rem var(--sans); color: var(--text-dim); } .iris-admin-trace-btn { border: 1px solid var(--border); background: transparent; color: var(--iris-accent); font: 600 .66rem var(--sans); border-radius: 999px; padding: 2px 10px; cursor: pointer; } .iris-admin-trace { display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--iris-accent); padding-left: 12px; } .iris-admin-trace-step { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 8px 10px; } .iris-admin-trace-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font: 600 .7rem var(--sans); color: var(--text); } .iris-admin-trace-kind { font: 700 .58rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--iris-accent); } .iris-admin-trace-head code { font: 500 .68rem var(--mono); color: var(--text-bright); overflow-wrap: anywhere; } .iris-admin-trace-reason { font: 400 .72rem/1.45 var(--sans); color: var(--text); margin-top: 3px; } .iris-admin-trace-preview { font: 400 .66rem/1.5 var(--mono); color: var(--text-dim); margin-top: 5px; max-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-word; border-top: 1px dashed var(--border); padding-top: 5px; } /* Canonical operational list alignment for admin tables migrated to RrnList. */ .admin-engineer-list .rrn-row { align-items: center; } .admin-engineer-list .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; } .admin-engineer-list .contact-cell, .admin-engineer-list .eng-name-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .admin-engineer-list .skills-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .admin-engineer-filters { margin-bottom: 12px; }