inside common containers — make the container scroll.
We do NOT change table display (breaks layout); instead we let the
container scroll while the table keeps its natural min-width. */
.card > table,
.section > table,
.container > table,
.container-medium > table,
.tab-content > table,
.card > div > table,
.section > div > table,
.tab-content > div > table {
min-width: 600px;
}
.card,
.section,
.tab-content {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
table {
min-width: 600px;
}
th, td {
padding: 10px;
font-size: 13px;
}
/* Stack form inputs */
.input-group {
grid-template-columns: 1fr;
}
/* Stack buttons */
.actions, .action-bar {
/* flex-direction: column; ranjan */
}
.btn {
width: fit-content; /* ranjan */
text-align: center;
}
/* Tabs */
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
padding: 12px 20px;
font-size: 14px;
}
}
/* Small mobile devices (max-width: 480px) */
@media (max-width: 480px) {
.container, .container-small {
padding: 10px;
}
.nav {
padding: 0 10px; /* no vertical padding — keeps nav at 44px */
}
.nav-brand {
font-size: 18px;
}
.nav-links a {
padding: 8px 12px;
font-size: 13px;
}
.stat-card {
padding: 15px;
}
.stat-card h3 {
font-size: 12px;
}
.stat-card .value {
font-size: 28px;
}
.section, .card {
padding: 15px;
}
.btn:not(.btn-sm) {
padding: 10px 16px;
font-size: 13px;
}
input, select, textarea {
padding: 10px;
font-size: 14px;
}
}
/* Print styles */
@media print {
.nav, .actions, .action-bar, .btn {
display: none;
}
body {
background: white;
}
.card, .section {
box-shadow: none;
border: 1px solid #ddd;
}
}
/* nav-brand defined in base nav rules above */
/* ── Nav icon link ─────────────────────────────────────────────────────────── */
.nav-icon-link {
color: white !important;
padding: 0 14px !important;
font-size: 14px !important; /* match all other nav-links a items */
opacity: 1;
transition: opacity 0.2s;
}
.nav-icon-link:hover { opacity: 1; background: rgba(255,255,255,0.15) !important; }
/* ── Masquerade badge ──────────────────────────────────────────────────────── */
.masquerade-badge {
background: rgba(237,137,54,0.18);
color: #fbd38d;
padding: 4px 6px 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(237,137,54,0.4);
}
/* ✕ Stop — stands out as a distinct button */
.masquerade-badge a {
color: white !important;
background: #ed8936 !important;
padding: 3px 8px !important;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s;
}
.masquerade-badge a:hover { background: #c05621 !important; }
/* ── Dropdown nav ──────────────────────────────────────────────────────────── */
.nav-dropdown {
position: relative;
display: inline-block;
}
/* One-click sign out at the far right of the nav. Muted until hovered so it
does not compete with the working links, then red — it ends the session, and
a control with consequences should say so before it is clicked. Sized to a
comfortable tap target rather than to the glyph. */
.nav .nav-signout,
a.nav-signout {
display: inline-flex;
align-items: center;
justify-content: center;
/* Full bar height and square, so it sits flush with the text menu items
instead of floating as a shorter chip. Width follows height via aspect-ratio
rather than a hardcoded px, so it stays square if the bar height changes. */
align-self: stretch;
height: auto;
aspect-ratio: 1;
/* padding must be zeroed for aspect-ratio to produce a square: the inherited
`.nav a` rule adds 0 14px, and a 24px glyph plus 28px of padding measured
47px wide against a 44px bar. */
padding: 0;
min-width: 44px;
box-sizing: border-box;
margin: 0 0 0 6px;
border-radius: 0;
/* Red at rest, not only on hover: on a blue nav the icon has to read as
"this signs you out" before it is touched, and a muted glyph did not. */
color: #fff;
background: #e53e3e;
/* Bigger and brighter: the glyph is the whole label, so at 16px it read as a
decoration on a red square rather than as the control itself. Pure white on
a slightly lifted red, with a faint glow so the stroke stays crisp against
the fill instead of muddying into it. */
font-size: 24px;
line-height: 1;
font-weight: 700;
text-shadow: 0 0 10px rgba(255,255,255,0.55);
text-decoration: none;
transition: background 0.18s, color 0.18s, text-shadow 0.18s;
}
.nav .nav-signout:hover,
.nav .nav-signout:focus-visible {
background: #f04747;
color: #fff;
text-shadow: 0 0 14px rgba(255,255,255,0.85);
}
.nav .nav-signout:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
}
.nav-dropdown-btn {
/* Same size, weight, colour and box as a plain `.nav-links a`: these sit
side by side in one bar and are the same kind of thing, but one was a
500-weight 0.9-alpha button with 12px of padding on the left and none on
the right, and the other a normal-weight 0.78-alpha link padded evenly.
Dashboard read as dimmer and slightly adrift from Manage QR beside it. */
color: rgba(255,255,255,0.78);
background: transparent;
border: none;
border-radius: 0px;
margin: 0;
align-self: stretch;
padding: 0 14px;
cursor: pointer;
font-size: 14px;
font-weight: 400;
font-family: inherit;
line-height: 1;
transition: background 0.2s, color 0.15s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
height: 44px;
border-bottom: 2px solid transparent;
}
.nav-dropdown-btn:hover {
/* 0.25 was twice as strong as the 0.1 a link hover uses, so moving along
the bar made the buttons flash and the links barely respond. */
background: rgba(255,255,255,0.1);
color: white;
}
.nav-dropdown-btn.active {
background: rgba(255,224,102,0.18);
color: #ffe066;
font-weight: 600;
}
.nav-dropdown-arrow { font-size: 10px; opacity: 0.8; }
.nav-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
background: white;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
min-width: 180px;
z-index: 1000;
overflow: hidden;
padding: 4px 0;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
display: block;
padding: 9px 16px;
color: #2d3748 !important;
font-size: 13px;
text-decoration: none;
transition: background 0.15s;
white-space: nowrap;
border-radius: 0;
}
.nav-dropdown-menu a:hover {
background: #f7fafc !important;
color: #667eea !important;
}
.nav-dropdown-menu a.active {
background: rgba(255,224,102,0.2) !important;
color: #3b5bdb !important;
font-weight: 600;
}
.nav-dropdown-divider {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}
/* === NESTED SUBMENU (Generate → QR Groups ▸ / Tools ▸) === */
/* The parent menu must let the flyout escape its box. */
.nav-dropdown-menu:has(.nav-submenu) { overflow: visible; }
.nav-submenu { position: relative; }
.nav-submenu-label {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 16px; color: #2d3748; font-size: 13px; font-weight: 600;
cursor: default; white-space: nowrap;
}
.nav-submenu-label:hover { background: #f7fafc; color: #667eea; }
.nav-submenu-label.active { color: #3b5bdb; }
/* Font-independent right-caret (CSS triangle) so it always renders. */
.nav-submenu-arrow {
margin-left: auto;
width: 0; height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #667eea;
flex: none;
}
.nav-submenu:hover > .nav-submenu-label .nav-submenu-arrow { border-left-color: #3b5bdb; }
.nav-submenu-menu {
display: none;
position: absolute; top: -4px; left: 100%;
background: white; border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
min-width: 180px; padding: 4px 0; z-index: 1100;
}
/* Open the flyout on hover (desktop) or when JS marks it open (keyboard/touch). */
.nav-submenu:hover > .nav-submenu-menu,
.nav-submenu.open > .nav-submenu-menu { display: block; }
.nav-submenu-menu a {
display: block; padding: 9px 16px; color: #2d3748 !important;
font-size: 13px; text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
.nav-submenu-menu a:hover { background: #f7fafc !important; color: #667eea !important; }
.nav-submenu-menu a.active {
background: rgba(255,224,102,0.2) !important; color: #3b5bdb !important; font-weight: 600;
}
/* === COLLAPSIBLE DISCLOSURE ARROW === */
.disclosure-arrow {
display: inline-block;
transition: transform .2s ease;
flex-shrink: 0;
line-height: 1;
}
details[open] > summary .disclosure-arrow { transform: rotate(90deg); }
/* === AUTH / LOGIN PAGE === */
body.auth-page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
width: 100%;
max-width: 400px;
margin: 20px; /* Safe padding for mobile */
}
.auth-page h1 {
color: #333;
margin-bottom: 30px;
text-align: center;
font-size: 24px;
}
.link {
text-align: center;
margin-top: 16px;
font-size: 14px;
}
.link a {
color: #667eea;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
.divider {
border: none;
border-top: 1px solid #e2e8f0;
margin: 20px 0;
}
/* Base.html missing alert type */
.alert-warning {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
}
/* Nav group separator */
.nav-group-sep {
width:0; align-self:stretch; margin:0 10px;
border-left:1px solid rgba(255,255,255,0.22);
flex-shrink:0; pointer-events:none;
}
@media (max-width:1080px) { .nav-group-sep { display:none !important; } }
/* ── Help + "What next": one stack ───────────────────────────────────────────
The container is the only thing pinned to the viewport. The buttons inside
are in normal flow, so their spacing is a gap rather than a pair of top
coordinates in two different files that had to be kept 46px apart by hand. */
#fab-stack {
position: fixed; right: 14px; top: 52px;
z-index: 9100;
/* One row, and row-REVERSE: the DOM order is help then "What next" (the
nav macro's button is appended into this container), while on screen the
round help button stays hard against the right edge where it has always
lived, with the wider pill to its left. */
display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
transition: top .15s;
}
#fab-stack.scrolled-down { top: 8px; }
/* Help button — top of the stack */
#help-fab {
position:static;
width:38px; height:38px; border-radius:50%;
background:#38b2ac; color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:700; text-decoration:none;
box-shadow:0 3px 12px rgba(56,178,172,0.45); z-index:9100;
transition:background 0.15s, box-shadow 0.15s;
}
#help-fab:hover { background:#2c9491; box-shadow:0 4px 16px rgba(56,178,172,0.6); }
/* Scroll FAB */
#scroll-fab {
position:fixed; right:14px; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:50%;
/* Solid rather than 92% opaque: the arrow was competing with whatever
happened to be behind it. */
background:#ed8936; color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; border:none;
box-shadow:0 3px 10px rgba(0,0,0,0.22); z-index:8900;
opacity:0; transition:opacity 0.2s, box-shadow 0.15s; pointer-events:none; padding:0; line-height:1;
}
/* The arrowhead is drawn, not typed. As a ▲/▼ glyph it sat visibly low in the
circle: a triangle's ink fills only part of its em box, and flex centres the
box, not the ink -- so the optical centre ended up below the geometric one
and no amount of line-height fixed it across fonts. A border triangle is a
real box exactly the size of the shape, so centring it centres what you see.
One element, rotated for the other direction. */
#scroll-fab .sf-arrow {
width:0; height:0;
border-left:9px solid transparent;
border-right:9px solid transparent;
border-bottom:12px solid #fff;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
/* A triangle looks bottom-heavy when its bounding box is centred, because
the visual mass sits low. One pixel up puts the apparent centre right. */
margin-top:-1px;
}
#scroll-fab.is-down .sf-arrow { transform:rotate(180deg); margin-top:1px; }
#scroll-fab.visible { opacity:1; pointer-events:auto; }
#scroll-fab:hover { background:#dd6b20; box-shadow:0 4px 16px rgba(0,0,0,0.3); }
@media (max-width:1080px) { #scroll-fab { right:6px; } #fab-stack { right:10px; } }
/* === HELP FAB HEARTBEAT (new accounts) === */
@keyframes gs-heartbeat {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); opacity:1; }
40% { box-shadow: 0 0 0 6px rgba(255,215,0,0.35); opacity:1; }
50% { box-shadow: 0 0 0 10px rgba(255,215,0,0); opacity:0.75; }
}
#help-fab.heartbeat {
animation: gs-heartbeat 4s ease-in-out infinite;
background: #2c9491;
border: 2px solid rgba(255,215,0,0.6);
}
/* === GLOBAL MODAL OVERLAY ===
Light veil — no blur — consistent across all pages.
Individual modals use .modal-overlay or .help-modal-overlay.
Any element with role="dialog" or .modal-overlay gets this treatment. */
.modal-overlay,
.help-modal-overlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* The background veil colour — extremely light, no blur */
.modal-overlay { background: rgba(0,0,0,0.08) !important; }
.help-modal-overlay { background: rgba(0,0,0,0.08) !important; }
/* Hide FABs on help page (FABs are redundant when help is already open) */
body[data-page="help"] #fab-stack,
body[data-page="help"] #scroll-fab { display: none !important; }
/* Hide FABs behind the open mobile drawer */
body.mob-menu-open #fab-stack,
body.mob-menu-open #scroll-fab { display: none !important; }
/* Consistent page-title spacing across all pages */
.container > h1,
.container-medium > h1,
.container-small > h1,
.content > h1,
div > h1:first-of-type {
margin: 20px 0 16px;
font-size: 22px;
font-weight: 700;
color: var(--color-text);
display: flex;
align-items: center;
gap: 8px;
}
/* ========================================
MOBILE RESPONSIVE ENHANCEMENTS
Patch: 2026-06 — systematic mobile pass
======================================== */
/* ── Responsive grid utilities ──────────────────────────────────────────────
Use these classes instead of inline grid-template-columns where possible.
.grid-2col : 2 columns on desktop → 1 column below 600px
.grid-auto : auto-fill with 260px min (already used in many places inline)
─────────────────────────────────────────────────────────────────────────── */
.grid-2col {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.grid-3col {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
/* ── Responsive inline grids — override hard columns below 600px ────────── */
@media (max-width: 600px) {
/* Any inline grid that forces 2 equal columns */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns:repeat(2"],
[style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
/* 3-col and 4-col inline grids collapse to single column on mobile */
[style*="grid-template-columns:1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr"],
[style*="grid-template-columns:repeat(3"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
[style*="grid-template-columns:repeat(4"] {
grid-template-columns: 1fr !important;
}
/* Compass grid for sheet margins — always keeps 3 columns */
.compass-grid {
grid-template-columns: 1fr 1fr 1fr !important;
}
}
/* ── Batch-view logo row ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* The logo + details flex row in batch_view */
.bv-logo-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
}
}
/* ── Pagination control ──────────────────────────────────────────────────── */
/* table_controls.html — wrap neatly on narrow screens */
@media (max-width: 640px) {
/* Pagination container: stack show-rows + page buttons */
.pagination-bar,
/* target the inline-styled wrapper directly */
[style*="justify-content: space-between"][style*="border-top: 1px solid"] {
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Shrink First/Last buttons on small screens */
.pagination-bar .btn,
[style*="justify-content: space-between"][style*="border-top: 1px solid"] .btn {
padding: 6px 10px !important;
font-size: 12px !important;
}
}
/* ── Stats bar (batches_list, dashboard) ─────────────────────────────────── */
@media (max-width: 640px) {
/* quota/stats flex row: wrap and shrink the progress bar */
.stats-bar {
flex-wrap: wrap;
gap: 10px;
}
.stats-bar .quota-progress {
width: 80px !important;
}
}
/* ── Action toolbar (dashboard batch selection bar) ─────────────────────── */
@media (max-width: 640px) {
.action-toolbar {
left: 8px !important;
right: 8px !important;
width: auto !important;
font-size: 12px !important;
}
}
/* ── Button row / form footer actions ───────────────────────────────────── */
@media (max-width: 480px) {
/* Any flex row of buttons inside a .section or .card */
.section > div[style*="display:flex"][style*="gap"],
.card > div[style*="display:flex"][style*="gap"] {
flex-wrap: wrap !important;
}
/* Buttons stay content-width on every screen size, mobile included. Only
.btn-block opts into full width. A button stretched to its container reads
as a banner and gives every action the same weight regardless of
importance, so the stack of them loses its hierarchy. */
.form-actions {
flex-wrap: wrap;
}
.form-actions .btn:not(.btn-block) {
width: fit-content;
text-align: center;
}
}
/* ── Users page role stat cards ─────────────────────────────────────────── */
@media (max-width: 640px) {
.role-stats-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}
}
/* ── Section headers (title + action button row) ────────────────────────── */
@media (max-width: 480px) {
.section-header,
.page-header {
flex-wrap: wrap !important;
gap: 10px !important;
}
.section-header h1,
.section-header h2,
.page-header h1,
.page-header h2 {
font-size: 18px !important;
}
}
/* ── Generate page: use-case section grid ───────────────────────────────── */
@media (max-width: 600px) {
#uc-category-row,
.uc-row {
grid-template-columns: 1fr !important;
}
}
/* ── Help panel full-screen on mobile ───────────────────────────────────── */
@media (max-width: 768px) {
#help-panel {
width: 100% !important;
right: 0 !important;
border-radius: 0 !important;
}
}
/* ── GS panel: inner padding tighter on mobile ───────────────────────────── */
@media (max-width: 640px) {
#gs-panel-inner {
padding: 14px 14px 18px !important;
}
#gs-panel.open {
max-height: 88vh;
}
}
/* ── Masquerade badge ────────────────────────────────────────────────────── */
@media (max-width: 949px) {
.masquerade-badge {
display: none; /* shown in mobile menu instead */
}
}
/* ── body padding-top: fixed nav already adds 44px at ≤949px.
On desktop the nav is in-flow so no body padding needed. ─────────────── */
@media (min-width: 950px) {
body { padding-top: 0 !important; }
}
/* ── Compact batch-creation form layout ───────────────────────────────────
.form-2col : two equal columns, top-aligned, fields fill their column.
Collapses to single column below 600px.
.col-span-2 : a field that needs full width spans both columns.
.field-xs : caps field width (e.g. Quantity, Delay dropdowns).
.field-sm : medium cap (e.g. short selects).
.field-md : wider cap (e.g. Batch Name).
─────────────────────────────────────────────────────────────────────── */
/* Two equal columns, top-aligned */
.form-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 28px;
align-items: start;
}
.form-2col .form-group { margin-bottom: 18px; }
/* Full-width span inside the two-col grid */
.form-2col .col-span-2 { grid-column: 1 / -1; }
/* Width caps on .form-group wrapper */
.field-xs { max-width: 140px; }
.field-sm { max-width: 240px; }
.field-md { max-width: 400px; }
/* Inputs/selects always fill their (possibly capped) container */
.form-compact input,
.form-compact select,
.form-compact textarea { width: 100%; }
/* Submit button: fit-content, not full-width */
.form-compact button[type="submit"] {
width: auto !important;
min-width: 180px;
padding: 12px 32px;
font-size: 15px;
}
/* Global: all submit buttons default to fit-content */
button[type="submit"]:not(.btn-block) { width: auto; }
/* Collapse to single column on mobile */
@media (max-width: 600px) {
.form-2col { grid-template-columns: 1fr; }
.field-xs, .field-sm, .field-md { max-width: 100%; }
}
/* ── Global table scroll on mobile ────────────────────────────────────────
Any table inside .section or .card gets horizontal scroll on narrow screens,
even without an explicit .table-wrapper parent. */
@media (max-width: 768px) {
.section, .card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.section > table,
.card > table {
min-width: 600px;
}
}
/* Count on a nav item — used by Scan Follow-ups for work awaiting an answer.
Sized to sit inside a menu label without changing the bar's height. */
.nav-badge {
display: inline-block;
min-width: 18px;
padding: 1px 6px;
margin-left: 6px;
border-radius: 9px;
background: #dd6b20;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-align: center;
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
.nav-submenu-label .nav-badge { background: #e2e8f0; color: #7b341e; }
/* ── Client dashboard: compact, informative, actionable ──────────────────────
Replaces four stacked cards that spent over a thousand pixels on nine
numbers. Every stat is a link, because a number you cannot act on is
decoration. */
.dash-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 10px;
margin: 0 0 14px;
}
.dash-stat {
/* Equal height, stated rather than inferred: the labels are of different
lengths, so one wrapping to a second line used to leave its neighbours
short and the strip looking ragged. A flex column with height:100% keeps
every card the height of the tallest whatever its label does. */
display: flex; flex-direction: column; justify-content: center;
height: 100%; box-sizing: border-box;
padding: 12px 14px; text-decoration: none;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
transition: border-color .15s, transform .15s;
}
.dash-strip { align-items: stretch; }
.dash-stat:hover { border-color: #667eea; transform: translateY(-1px); }
.dash-stat .n {
display: block; font-size: 24px; font-weight: 800; color: #1a202c;
line-height: 1.15; font-variant-numeric: tabular-nums;
}
.dash-stat .k {
display: block; margin-top: 2px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: #a0aec0;
}
.dash-stat.warn .n { color: #c05621; }
.dash-stat.warn { border-color: #fbd38d; }
.dash-stat.warn .k { color: #b7791f; }
/* -is-alert, not -alert: `.alert` above is a notification box carrying
padding and margin-bottom:15px, and a card wearing both would inherit that
margin — knocking it out of a row whose whole point is equal-height cards.
Latent rather than visible: the variant only renders when there is something
pending. Same trap as the submissions pill, which was named `alert` too. */
.dash-stat.is-alert .n { color: #c53030; }
.dash-stat.is-alert { border-color: #feb2b2; }
.dash-stat.is-alert .k { color: #c53030; }
.dash-stat.over .n { color: #c53030; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.dash-actions .btn { font-size: 13.5px; padding: 9px 16px; }
.dash-pill {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
background: #dd6b20; color: #fff; font-size: 11px; font-weight: 700;
}
.dash-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
align-items: start; /* cards size to content — no more 367px of nothing */
}
@media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } }
.dash-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 4px 4px; }
.dash-card-head {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 14px 10px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: #a0aec0;
}
.dash-card-head a { font-size: 11.5px; color: #667eea; text-decoration: none; text-transform: none; letter-spacing: 0; }
.dash-row {
display: flex; align-items: center; gap: 10px; padding: 9px 14px;
border-top: 1px solid #f1f5f9; text-decoration: none; color: inherit;
}
.dash-row:hover { background: #f8fafc; }
.dash-row-main { flex: 1; min-width: 0; }
.dash-row-main strong { display: block; font-size: 13.5px; color: #1a202c; }
/* The clickable part of a dashboard row. The row used to be the target, which
left no room for a second link and made the date and counts beside it look
clickable when they were not. */
.dash-code {
display: block; font-size: 13.5px; font-weight: 600; color: #4c51bf;
text-decoration: none; cursor: pointer;
}
.dash-code:hover { text-decoration: underline; }
/* The code, on any page that lists codes: click it for everything known about
it. Only the code — these rows carry their own actions, and a row that
navigates on any click cannot also hold them. */
.code-link {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: #4c51bf; cursor: pointer; text-decoration: none;
border-bottom: 1px dashed rgba(76,81,191,.45);
}
.code-link:hover { border-bottom-style: solid; }
.dash-row-sub {
display: block; font-size: 11.5px; color: #a0aec0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-row-when { font-size: 11.5px; color: #a0aec0; white-space: nowrap; }
.dash-row-acts { display: flex; gap: 10px; }
.dash-row-acts a { font-size: 12px; color: #667eea; text-decoration: none; }
.dash-kind {
font-size: 10.5px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
background: #edf2f7; color: #4a5568;
}
.dash-kind.k-ownership { background: #e9e8fd; color: #434190; }
.dash-kind.k-warranty_claim { background: #feebc8; color: #7b341e; }
.dash-kind.k-incident { background: #fed7d7; color: #822727; }
.dash-empty { padding: 18px 14px; font-size: 13px; color: #a0aec0; }
/* ── Quick links ─────────────────────────────────────────────────────────────
The five steps of the batch-QR loop, in the order they happen: make codes,
find them, get them out, watch the job, see them used.
Deliberately NOT styled like .dash-library below. Those are state — a place
with a count attached — and they sit at the foot of the page. These are
actions and they sit at the top. All of them carry the same weight: the
strip is one journey, and a filled first button made the remaining stops
look optional.
These do repeat nav items, which is why the earlier shortcut block was
removed from this page. The difference is that the nav spreads this journey
across four separate menus, two of them behind a hover; a tenant whose whole
job is generating and using batches should not have to reassemble the order
from a menu bar every visit. */
/* 10px to the library row below, 18px from the library to the stats: the two
link rows belong together, and equal spacing would orphan them apart. */
.dash-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.dash-quick a {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; color: #4a5568; text-decoration: none;
background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 9px 15px; transition: border-color .15s, color .15s, box-shadow .15s;
}
.dash-quick a:hover {
border-color: #667eea; color: #667eea;
box-shadow: 0 1px 4px rgba(102,126,234,.16);
}
.dash-quick a .qi { font-size: 15px; line-height: 1; }
@media (max-width: 640px) {
/* Four-plus pills wrapping into stubs is worse than a scrolling row: the
order is the point, and wrapping hides where the journey restarts. */
.dash-quick { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 4px; }
.dash-quick a { white-space: nowrap; flex: 0 0 auto; }
}
/* The reusable material a batch is made from, sitting under the quick links.
Deliberately still a pill where .dash-quick is a rounded rectangle: these
carry counts and are things you HAVE, the strip above are things you DO, and
the shape is what keeps two adjacent rows of links from reading as one
undifferentiated wall of ten buttons.
Raised from the footer treatment it had when it lived at the bottom of the
page -- darker text, real weight, a count that stands out as a number rather
than as punctuation, and a hover that lifts. Prominent enough to be seen
before the work that needs it, not so loud that it competes with Generate. */
.dash-library { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dash-library a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: #3d4759; text-decoration: none;
background: #fff; border: 1px solid #dbe2ec; border-radius: 999px;
padding: 8px 16px;
transition: border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.dash-library a:hover {
border-color: #667eea; color: #4c51bf;
box-shadow: 0 1px 4px rgba(102,126,234,.16);
transform: translateY(-1px);
}
/* The count reads as a value, not as a trailing digit. */
.dash-library b {
color: #4c51bf; background: #eef1fe; border-radius: 999px;
padding: 1px 8px; font-size: 12px; margin-left: 1px;
}
@media (max-width: 640px) {
.dash-library { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 4px; }
.dash-library a { white-space: nowrap; flex: 0 0 auto; }
}
/* ── "What next" drawer ──────────────────────────────────────────────────────
The workflow hint used to sit above the content on 21 pages, pushing the
actual work down for guidance most people read once. It lives behind this
button instead, directly under the help FAB. */
#what-next-fab {
/* Positioned by #fab-stack, not by itself — see the stack rule above. */
position: static;
display: flex; align-items: center; gap: 6px;
height: 38px; padding: 0 13px; border: none; border-radius: 19px;
background: #5a67d8; color: #fff; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600;
box-shadow: 0 3px 12px rgba(90, 103, 216, .42);
transition: background .15s, box-shadow .15s;
}
#what-next-fab:hover { background: #4c51bf; box-shadow: 0 4px 16px rgba(90,103,216,.6); }
/* On a narrow screen the label costs more than it explains. */
@media (max-width: 640px) {
#what-next-fab span { display: none; }
#what-next-fab { padding: 0; width: 38px; justify-content: center; }
}
#what-next-scrim {
position: fixed; inset: 0; background: rgba(15, 23, 42, .35);
z-index: 9190; animation: wnFade .15s ease-out;
}
@keyframes wnFade { from { opacity: 0; } to { opacity: 1; } }
#what-next-drawer {
/* Parked off-screen with a transform, which still counts toward the page's
scrollable width — it was adding 2px of horizontal scrollbar at every
width above 1500px. Clipped at the root instead, so nothing a fixed
overlay does can give the document a horizontal bar. */
position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
background: #fff; z-index: 9200;
box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
transform: translateX(100%);
transition: transform .22s ease-out;
display: flex; flex-direction: column;
}
#what-next-drawer.open { transform: translateX(0); }
.wn-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid #e2e8f0;
font-size: 14px; font-weight: 700; color: #2d3748;
}
.wn-close {
border: none; background: none; cursor: pointer; font-size: 16px; color: #a0aec0;
padding: 4px 6px; line-height: 1;
}
.wn-close:hover { color: #4a5568; }
.wn-body { padding: 14px 18px 22px; overflow-y: auto; display: grid; gap: 11px; }
.wn-task { border: 1px solid #e2e8f0; border-radius: 9px; padding: 12px 14px; background: #f8fafc; }
.wn-task-title { font-size: 13.5px; font-weight: 600; color: #2d3748; margin-bottom: 4px; }
.wn-task-title a { color: #3b5bdb; text-decoration: none; }
.wn-task-desc { font-size: 12.5px; color: #718096; line-height: 1.55; }
.wn-task-prereq {
margin-top: 7px; font-size: 11.5px; color: #d69e2e;
background: #fffff0; border: 1px solid #f6e05e; border-radius: 5px; padding: 4px 8px;
}
/* ── Keep the nav inside the window ──────────────────────────────────────────
The desktop bar needs about 1390px laid out at full size, but it was shown
from 1081px up — so every window between those two sizes gave the whole PAGE
a horizontal scrollbar, on a 1366px laptop as much as anywhere. Two changes:
the bar compresses before it runs out of room (measured: the full-size bar
needs ~1442px, so compression starts below 1500), and the mobile menu takes over
while there is still room rather than 300px too late.
Three steps now, not two. Two got the bar down to a measured 1070px, which is
why the burger took over at 1080; the third trades the two pieces of text that
are not menu items — the brand and the signed-in address — for the width the
menu itself needs, and holds the full bar down to 950. */
/* Every tier below compresses the BAR only, never the dropdown panels: the
child combinators keep these off `.nav-dropdown-menu a`, which is a plain
`.nav-dropdown-menu a` (same specificity as `.nav a`) and so lost its
`padding: 9px 16px` to whichever of the two came last in the file. That
flattened every leaf item to the bar's own padding and left the panels
uneven. A dropdown is a panel of its own; the bar running out of room is not
a reason to shrink it. */
@media (min-width: 950px) and (max-width: 1499px) {
.nav > a, .nav-links > a, .nav-links > span { padding: 0 9px; font-size: 13px; }
.nav-brand { max-width: 120px; padding-right: 10px; margin-right: 4px; font-size: 14px; }
.nav-dropdown-btn { padding: 0 9px; font-size: 13px; }
.nav-links a.nav-cart { padding: 0 8px; }
.nav-group-sep { display: none !important; }
}
@media (min-width: 950px) and (max-width: 1279px) {
/* Tighter still: the arrow glyphs are decoration once things are this snug. */
.nav > a, .nav-links > a, .nav-links > span { padding: 0 7px; font-size: 12.5px; }
.nav-dropdown-btn { padding: 0 7px; font-size: 12.5px; }
.nav-dropdown-arrow { display: none; }
}
@media (min-width: 950px) and (max-width: 1080px) {
/* Last step before the burger, and the tightest it gets. A seventh top-level
menu (Buy) pushed the bar's natural width to 1095px, so at 950 the menu
items had begun to collide with the account controls — no horizontal
scrollbar, because flex simply squeezed them into each other.
The width comes from the two things in the bar that are not navigation:
the brand, which is dropped here rather than truncated to a syllable —
Dashboard sits immediately beside it and goes to the same place — and the
signed-in address, cut to a stub. Both return above 1080. */
/* .nav .nav-brand, not .nav-brand: the plain selector is the same
specificity as the base rule and lost to it here, so the brand stayed and
the bar stayed too wide. */
.nav .nav-brand { display: none !important; }
.js-current-username { max-width: 46px !important; }
.nav { padding: 0 10px; }
.nav > a, .nav-links > a, .nav-links > span { padding: 0 4px; font-size: 12px; }
.nav-dropdown-btn { padding: 0 4px; font-size: 12px; }
/* The avatar button keeps its inline padding, hence the specificity here. */
#clientAvatar .nav-dropdown-btn, #adminAvatar .nav-dropdown-btn { padding: 4px 6px !important; }
.js-current-username {
display: inline-block; max-width: 96px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.nav-links a.nav-cart { margin-left: 2px; }
}
/* The bar may never make the page wider than the window; a dropdown is
positioned against its trigger, so this cannot clip an open menu. */
.navbar, .nav, .nav-left, .nav-links { min-width: 0; }
/* Nothing should ever scroll the page sideways: the layout is responsive and a
horizontal bar here always means something escaped, not that there is more to
see. `clip` rather than `hidden` so this does not turn into a scroll
container and break position: sticky inside it. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
/* ── List filter bar ──────────────────────────────────────────────────────
The search box, its button and the use-case select sat in one flex row but
each worked out its own height from its own padding and font size, and the