:root { --bg: #f2f4f9; --card: #ffffff; --border: rgba(15, 23, 42, 0.08); --text: #101828; --muted: #5b6474; /* Vertical Bridge brand: #84C559 (logo green) / #052049 (site navy) — sampled from verticalbridge.com and portal.verticalbridge.com. Buttons use --accent-dark (a deepened version of the same hue), not the raw logo green, since white text on #84C559 directly fails WCAG AA contrast (~2:1) — status pill colors are untouched, since those are semantic (Active = green = good), not brand accents. */ --accent: #84c559; --accent-dark: #4f7a2e; --navy: #052049; --red: #dc2626; --amber: #b45309; --radius: 12px; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.18); /* Direction-aware "tint the surface a little" — light mode darkens (rgba black), dark mode has to lighten instead (rgba white) or a hover state would be invisible, or worse, read as "more depressed" instead of "raised/interactive" on an already-dark surface. */ --hover-tint: rgba(15, 23, 42, .04); } /* Dark palette — same token names, so every rule below that already reads var(--bg)/var(--card)/etc. picks this up with no further changes. Applies automatically from OS preference, or explicitly via the topbar toggle (which stamps data-theme on and always wins either way). */ @media (prefers-color-scheme: dark) { :root { --bg: #0f1420; --card: #171e2e; --border: rgba(255, 255, 255, 0.09); --text: #e7eaf1; --muted: #93a0b8; --accent: #8fd166; --accent-dark: #6fae49; --navy: #c9d6f2; --red: #f87171; --amber: #fbbf24; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6); --hover-tint: rgba(255, 255, 255, .05); } } :root[data-theme="dark"] { --bg: #0f1420; --card: #171e2e; --border: rgba(255, 255, 255, 0.09); --text: #e7eaf1; --muted: #93a0b8; --accent: #8fd166; --accent-dark: #6fae49; --navy: #c9d6f2; --red: #f87171; --amber: #fbbf24; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6); --hover-tint: rgba(255, 255, 255, .05); } :root[data-theme="light"] { --bg: #f2f4f9; --card: #ffffff; --border: rgba(15, 23, 42, 0.08); --text: #101828; --muted: #5b6474; --accent: #84c559; --accent-dark: #4f7a2e; --navy: #052049; --red: #dc2626; --amber: #b45309; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.18); --hover-tint: rgba(15, 23, 42, .04); } /* The Vertical Bridge logo SVG has its own fixed colors (grey + brand green), so it goes muddy on a dark surface — give it a neutral backdrop in dark mode instead of trying to recolor the file per-theme. Sized generously enough to read as a deliberate badge, not a stray patch. */ [data-theme="dark"] #signin .logo, [data-theme="dark"] .app-footer img { background: #fff; padding: 8px 16px; border-radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #signin .logo, :root:not([data-theme="light"]) .app-footer img { background: #fff; padding: 8px 16px; border-radius: 8px; } } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; padding: 22px 28px 48px; } .wrap { max-width: 1100px; margin: 0 auto; } /* sign-in gate */ #signin { display: none; position: fixed; inset: 0; background: var(--bg); align-items: center; justify-content: center; } #signin .card { text-align: center; padding: 48px 56px; max-width: 460px; } #signin .logo { display: block; height: 42px; width: auto; margin: 0 auto 22px; } #signin h1 { font-size: 21px; font-weight: 650; margin-bottom: 10px; color: var(--navy); } #signin p { color: var(--muted); font-size: 13px; margin-bottom: 26px; line-height: 1.65; } /* wordmark: replaces the plain "ATLAS" heading on the sign-in screen — same two-tone-split + arc construction as the Vertical Bridge logo above it, so the two read as one family rather than a generic heading bolted beneath a real logo. */ .wordmark { position: relative; display: inline-block; width: 96px; height: 34px; margin: 0 auto 14px; } /* width:100% is required, not redundant with left:0;right:0 — an SVG is a replaced element, so absolute positioning with left/right set but no explicit width computes the used width from the intrinsic viewBox ratio instead of stretching to fill, silently narrowing the arc and shifting it left of the (correctly centered) word text below it. */ .wordmark-arc { position: absolute; top: -13px; left: 0; right: 0; width: 100%; height: 30px; overflow: visible; } .wordmark-arc path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; } .wordmark-word { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; white-space: nowrap; font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif; font-size: 28px; letter-spacing: 0.01em; } .wordmark-at { color: var(--navy); } .wordmark-las { color: var(--accent-dark); } /* topbar variant — smaller than the sign-in wordmark, but still the dominant thing in the top-left, not a footnote next to it */ .wordmark.wordmark--small { width: 112px; height: 40px; margin: 0; } .wordmark--small .wordmark-arc { top: -14px; height: 33px; } .wordmark--small .wordmark-word { font-size: 32px; } .btn { background: linear-gradient(180deg, #5f9636, var(--accent-dark)); border: none; color: white; font-size: 13.5px; font-weight: 550; font-family: inherit; padding: 10px 24px; border-radius: 9px; cursor: pointer; } .btn:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; font-size: 12px; padding: 6px 12px; } .btn.small { padding: 5px 12px; font-size: 12px; } .btn.danger { background: linear-gradient(180deg, #ef4444, #dc2626); } .btn.ghost.danger { background: transparent; color: var(--red); border-color: rgba(220, 38, 38, .3); } /* Retire is a real, consequential action (not just a Cancel-equivalent) — plain .btn.ghost's muted grey text made it visually indistinguishable from Cancel/read as disabled. Amber signals "pay attention" without the destructive connotation of .danger (Retire is a soft delete, kept for history — Delete is the actually-irreversible one). */ .btn.ghost.warn { background: transparent; color: var(--amber); border-color: rgba(180, 83, 9, .35); } /* header — three regions: fixed-width brand left, search centered in the flexible middle, actions right (also fixed-width) — not true page-center (the left/right regions differ in width), but centered relative to the space between them, the standard pattern for a nav-bar search box. */ .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .titles { flex: 0 0 auto; white-space: nowrap; text-align: center; } .titles .sub { color: var(--muted); font-size: 12px; margin-top: 4px; } .topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; } .topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; } .spacer { flex: 1; } .userchip { font-size: 12px; color: var(--muted); } /* #id, not .class — must out-specificity the generic width:100% input rule below (an attribute+element selector), or this gets squeezed to it. */ #global-search { width: 420px; max-width: 100%; flex: 0 1 420px; padding: 10px 16px; font-size: 14px; font-family: inherit; border: 1px solid var(--border); border-radius: 9px; background: var(--card); } /* card / kpi */ .row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .kpi .label { font-size: 11px; font-weight: 620; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; } .kpi .value { font-size: 34px; font-weight: 680; line-height: 1.1; } .kpi .sub { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .kpi .sub.error { color: var(--red); } .kpi .value.warn { color: var(--red); } .card h2 { font-size: 13px; font-weight: 620; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; } .card h2 .hint { font-weight: 450; color: var(--muted); font-size: 11.5px; } .empty { color: var(--muted); font-size: 12.5px; padding: 8px 0; } /* tabs */ .tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 18px; } .tabs .btn.small { margin-bottom: 6px; } .tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; font-size: 12.5px; font-weight: 520; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; user-select: none; margin-bottom: -1px; transition: color .15s; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .tabpanel { display: none; } .tabpanel.active { display: block; } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; } .tab-badge[hidden] { display: none; } /* toolbar (search + filters, above the assets table) */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar input[type="search"] { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; font-size: 13px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .toolbar select { width: auto; flex: 0 0 auto; padding: 8px 10px; font-size: 13px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .status-filters { row-gap: 8px; } .status-filters label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); user-select: none; cursor: pointer; } .status-filters input[type="checkbox"] { accent-color: var(--accent-dark); cursor: pointer; } /* tables */ /* Wide tables (many columns + real-world long values — emails, hostnames) can exceed the card's width; scope the scroll to the table itself so it scrolls inside the card instead of visually bleeding past its border. */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12.5px; } th { text-align: left; color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 7px 10px; border-bottom: 1px solid var(--border); } td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .col-filters th { padding: 4px 8px 8px; text-transform: none; } .col-filters input[type="text"], .col-filters select { width: 100%; font-size: 12px; font-weight: 400; letter-spacing: normal; padding: 5px 8px; margin: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--hover-tint); } .pill { font-size: 10.5px; font-weight: 620; padding: 2.5px 10px; border-radius: 99px; letter-spacing: .02em; white-space: nowrap; } .pill.active { color: #047857; background: rgba(4, 120, 87, .11); } .pill.spare { color: var(--muted); background: var(--hover-tint); } .pill.inrepair { color: #b45309; background: rgba(180, 83, 9, .12); } .pill.retired { color: var(--red); background: rgba(220, 38, 38, .11); } .pill.loststolen { color: #fff; background: #b91c1c; } .pill.donated { color: #6d28d9; background: rgba(109, 40, 217, .11); } .pill.loaner { color: #0967c2; background: rgba(9, 103, 194, .11); } .pill.adopted { color: #0f766e; background: rgba(15, 118, 110, .11); } .rowactions { display: flex; gap: 6px; justify-content: flex-end; } /* input + inline "add new" button, side by side within a form label */ .inputrow { display: flex; gap: 6px; align-items: center; } .inputrow input { flex: 1; min-width: 0; } .inputrow .btn.small { flex: 0 0 auto; padding: 8px 12px; } /* "⋯" row-action menu — avoids a wall of buttons per row */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { font-size: 16px; line-height: 1; padding: 5px 10px; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); min-width: 130px; padding: 4px; display: flex; flex-direction: column; } .dropdown-menu button { background: none; border: none; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; font-family: inherit; color: var(--text); cursor: pointer; } .dropdown-menu button:hover { background: var(--hover-tint); } .dropdown-menu button.danger { color: var(--red); } .dropdown-menu[hidden] { display: none; } /* Status/Type/Manufacturer/Model column filters — a "Column ▾" toggle that reveals a checklist, so any combination can be picked at once instead of being locked to a single value. */ .ms-filter .dropdown-toggle { font-size: 12px; line-height: 1.3; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; } .ms-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--accent-dark); color: #fff; font-size: 9.5px; font-weight: 700; } .ms-badge[hidden] { display: none; } .ms-menu { left: 0; right: auto; min-width: 170px; max-height: 260px; overflow-y: auto; } .ms-option { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 400; color: var(--text); cursor: pointer; margin: 0; } .ms-option:hover { background: var(--hover-tint); } .ms-option input[type="checkbox"] { accent-color: var(--accent-dark); cursor: pointer; } .ms-empty { padding: 8px 10px; font-size: 12px; color: var(--muted); } .faint { color: var(--muted); } /* footer: subtle brand placement — the working screens above (KPIs, tabs, tables) are where attention belongs; the logo doesn't need to compete with them from the topbar too. */ .app-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); } .app-footer img { height: 26px; width: auto; } /* modals */ .modal { display: none; position: fixed; inset: 0; z-index: 10; background: rgba(15, 23, 42, .35); align-items: center; justify-content: center; padding: 20px; } .modal.open { display: flex; } .modal-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; } .modal-card h2 { font-size: 15px; font-weight: 650; margin-bottom: 18px; } .modal-copy { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-bottom: 16px; } .btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } label { display: block; font-size: 12px; color: var(--muted); font-weight: 550; margin-bottom: 4px; } /* Same recurring bug as .tab-badge/.dropdown-menu/.ms-badge earlier — label's unconditional display:block outranks the browser's default [hidden] { display: none }, so a conditionally-hidden label (like #row-adoptedBy) would otherwise never actually hide. */ label[hidden] { display: none; } label.full { margin-bottom: 12px; } input[type="text"], input[type="date"], input[type="search"], textarea, select { width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit; border: 1px solid var(--border); border-radius: 7px; margin-top: 3px; color: var(--text); background: var(--card); } textarea { resize: vertical; } .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; } .form-error { color: var(--red); font-size: 12px; flex: 1; } /* history modal: assignment + audit-log timeline */ #modal-history .modal-card { max-width: 640px; } .history-body { max-height: 55vh; overflow-y: auto; margin-bottom: 16px; } .history-entry { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .history-entry:last-child { border-bottom: none; } .history-entry .when { color: var(--muted); font-size: 11px; } .cell-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .cell-link:hover { color: var(--accent-dark); } .history-entry .what { font-weight: 550; margin: 2px 0; } .history-entry details { margin-top: 6px; } .history-entry summary { cursor: pointer; color: var(--muted); font-size: 11.5px; } .history-entry pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 11px; margin-top: 6px; overflow-x: auto; white-space: pre-wrap; }