-- reset link defaults so it still looks
like a plain card, then add a restrained affordance (cursor, subtle
lift, visible focus ring) so only these meaningfully-clickable cards
read as interactive. Non-linked cards (Total Sales, Conversion Rate)
are untouched. */
.admin-summary-card-link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.admin-summary-card-link:hover {
border-color: var(--admin-green);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.admin-summary-card-link:focus-visible {
outline: 2px solid var(--admin-green);
outline-offset: 2px;
}
.admin-summary-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--admin-muted);
margin-bottom: 6px;
}
.admin-summary-value {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--admin-green-dark);
}
/* Stage 19: icon circle above the label on the Business Overview KPI
cards (see KPI_ICONS in js/admin-dashboard.js) -- matches the reference
dashboard's per-card icon treatment. Only ever rendered by
renderExecKpis' kpiCardHtml calls; every other .admin-summary-card on
this and other Admin pages simply never includes this span, so this is
purely additive. */
.admin-summary-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--admin-green-bg);
color: var(--admin-green-dark);
margin-bottom: 10px;
}
.admin-summary-icon svg { width: 17px; height: 17px; }
.admin-summary-icon-attention { background: var(--admin-gold-bg); color: #8a5a1f; }
/* ---------- Toolbar ---------- */
.admin-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 18px;
}
.admin-search { min-width: 0; }
.admin-search input {
width: 100%;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 12px 14px;
font-family: inherit;
font-size: 16px; /* 16px avoids iOS Safari auto-zoom on focus */
background: var(--admin-white);
min-height: 46px;
}
.admin-search input:focus { outline: none; border-color: var(--admin-rose); }
.admin-toolbar-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-toolbar-filters select {
flex: 1 1 140px;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 12px 12px;
font-family: inherit;
font-size: 14.5px;
background: var(--admin-white);
color: var(--admin-ink);
min-height: 46px;
}
/* ---------- Shared list container ---------- */
.admin-table-wrap {
background: transparent;
border-radius: var(--admin-radius);
}
.admin-state {
padding: 48px 20px;
text-align: center;
color: var(--admin-muted);
font-size: 14.5px;
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
}
.admin-state-error { color: var(--admin-error-text); }
.admin-muted-text { color: var(--admin-muted); }
.admin-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.admin-badge-active { background: #e6f4ea; color: #1f6b45; }
.admin-badge-inactive { background: #f1ede6; color: #6f6a62; }
/* Stock is a separate axis from Active/Inactive, so it gets its own colors
(blue/amber) rather than reusing green/gray, to avoid the two states
being visually confused with each other. */
.admin-badge-instock { background: #e5f1fb; color: #1d5f8f; }
.admin-badge-outofstock { background: #fdecd2; color: #8a5a1f; }
/* Enquiry status — its own 5-tone set (Stage 3C), same .admin-badge shape.
NEW reuses the "needs attention" blue already used for In Stock;
CONTACTED reuses the amber already used for Out of Stock; CONVERTED
reuses the existing green "Active" tone (a success state); CLOSED
reuses the existing gray "Inactive" tone (an archived/neutral state).
QUOTED is the one genuinely new tone needed, since none of the above
fit "waiting on the customer to decide". */
.admin-badge-enq-new { background: #e5f1fb; color: #1d5f8f; }
.admin-badge-enq-contacted { background: #fdecd2; color: #8a5a1f; }
.admin-badge-enq-quoted { background: #f0e9f7; color: #6b3fa0; }
.admin-badge-enq-converted { background: #e6f4ea; color: #1f6b45; }
.admin-badge-enq-closed { background: #f1ede6; color: #6f6a62; }
/* Order status (Stage 4C) — reuses enquiry/product tones wherever the
semantics already line up (NEW=blue, PREPARING=amber like CONTACTED,
READY=purple like QUOTED, DELIVERED=green like Active, CANCELLED=gray
like Inactive/Closed) so the 7-value order lifecycle doesn't need 7 new
colors. CONFIRMED and OUT_FOR_DELIVERY are the only two genuinely new
tones, since neither has an existing semantic match. Payment-status
badges (Pending/Partial/Paid) reuse existing tones entirely — see
js/admin-orders.js's PAYMENT_BADGE_CLASS, no new CSS needed there. */
.admin-badge-ord-confirmed { background: #e3f6f5; color: #1a7a72; }
.admin-badge-ord-outfordelivery { background: #fde8e0; color: #a85a2a; }
.admin-btn-sm { padding: 10px 16px; font-size: 12.5px; min-height: 40px; }
.admin-btn-disabled { background: var(--admin-bg); color: var(--admin-muted); border-color: var(--admin-border); cursor: not-allowed; }
.admin-btn-disabled:hover { background: var(--admin-bg); }
/* ---------- Mobile: stacked product cards (default view) ---------- */
.admin-cards {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.admin-pcard {
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.admin-pcard:hover { box-shadow: var(--admin-shadow); }
.admin-pcard-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--admin-bg); }
.admin-pcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-pcard-img-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #e9f3ec;
color: var(--admin-green);
font-weight: 700;
font-size: 32px;
}
.admin-pcard-status { position: absolute; top: 10px; right: 10px; }
.admin-pcard-stock { position: absolute; top: 10px; left: 10px; }
.admin-pcard-body { padding: 14px 16px 16px; }
.admin-pcard-name {
font-size: 16.5px;
font-weight: 700;
margin: 0 0 4px;
color: var(--admin-ink);
overflow-wrap: break-word;
}
.admin-pcard-meta { margin: 0 0 10px; font-size: 12.5px; color: var(--admin-muted); }
.admin-pcard-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
/* Stage 11E: dropped the decorative var(--ff-heading) serif override --
the same "overly creative for a price figure" treatment reported on the
customer site (see css/style.css's .cart-summary-total), present here
too. Color/size/weight (Admin's own established brand green, kept
as-is) still make it read as a price at a glance; only the font
changes, to Admin's normal, highly-readable UI font. */
.admin-pcard-price { font-size: 18px; font-weight: 700; color: var(--admin-green-dark); }
.admin-pcard-discount { font-size: 12.5px; font-weight: 600; color: var(--admin-rose-dark); }
.admin-pcard-stats { display: flex; gap: 14px; font-size: 12px; color: var(--admin-muted); margin-bottom: 12px; }
.admin-pcard-actions { display: flex; gap: 8px; }
.admin-pcard-actions .admin-btn { flex: 1; }
.admin-row-actions { display: flex; gap: 8px; white-space: nowrap; }
/* ---------- Desktop: data table (hidden until min-width breakpoint) ---------- */
.admin-table { display: none; }
/* Locks background scroll while els.modalOverlay is open (see
openModalOverlay()/closeModal() in js/admin-products.js) — a
position:fixed overlay alone does not stop the page behind it from
scrolling on mobile, and leaving it unlocked is also what made the first
tap after opening the modal unresponsive on mobile until it was closed
and reopened. */
body.admin-body-modal-open { overflow: hidden; }
/* ---------- Detail modal (mobile: bottom sheet) ---------- */
.admin-modal-overlay {
position: fixed;
inset: 0;
background: rgba(22, 61, 41, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 50;
}
/* Stage 14: the flex-column/pinned-header structure (close X + header row
never scroll away, only the body content does) previously applied on
mobile only -- now unconditional, since the same "X scrolls out of
reach on a tall form" problem reported for the Edit Product modal
happens identically on desktop. See the (former mobile-only) comment
further down for the original root-cause writeup; nothing about that
reasoning changes, it just no longer stops at 640px. */
.admin-modal {
background: var(--admin-white);
box-shadow: var(--admin-shadow);
width: 100%;
max-width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden; /* the outer box no longer scrolls -- only its content child does */
/* Stage 14 (checkpoint): top padding nudged 24px -> 32px (mobile-first
value, overridden to a uniform 30px on desktop below at 640px+ where
the modal is centered rather than a near-full-height bottom sheet) --
per fresh mobile screenshots, the Back/X row sat too close to the
true top edge for comfortable safe-area/thumb clearance. Small nudge
only, not a nav redesign. */
padding: 32px 18px 28px;
border-radius: 20px 20px 0 0;
position: relative;
}
.admin-modal-headerbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex: none;
margin-bottom: 10px;
}
.admin-modal-close {
position: static;
flex: none;
width: 40px; height: 40px;
border-radius: 100px;
border: none;
background: var(--admin-bg);
color: var(--admin-ink);
font-size: 20px;
line-height: 1;
cursor: pointer;
/* Stage 14 (checkpoint): .admin-modal-back is display:none outside the
mobile media query below, which leaves .admin-modal-close as the
ONLY flex item in .admin-modal-headerbar on desktop. A lone flex item
under `justify-content: space-between` collapses to the container's
main-start edge (left), not the end -- that's the actual root cause
of the X reportedly appearing on the LEFT instead of top-right.
margin-left: auto consumes all free space to its own left regardless
of whether a sibling precedes it, so this pins it to the right edge
in both the 1-child (desktop) and 2-child (mobile, Back + Close)
cases -- space-between above becomes redundant on mobile but harmless. */
margin-left: auto;
}
.admin-modal-close:hover { background: var(--admin-border); }
.admin-modal > *:not(.admin-modal-headerbar):not(#productModalActions) {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
min-height: 0; /* required so a flex child actually scrolls instead of overflowing its row */
}
/* Edit Product's pinned "Edit Product" action footer (Stage 11E) -- same
reasoning as the headerbar above, now also unconditional. */
#productModalActions:not(:empty) {
flex: none;
margin-top: 0;
padding-top: 12px;
border-top: 1px solid var(--admin-border);
}
/* Stage 4H: wraps .admin-modal-close and (mobile-only) .admin-modal-back
so both sit in one row -- see the real .admin-modal-headerbar flex
rule near the top of the .admin-modal block above (Stage 14 made it
apply at all sizes, not just mobile; see that rule's own comment). */
.admin-modal-back {
display: none; /* re-enabled only inside the mobile block below — see ADMIN-07 */
}
/* ==================== Stage 4G: mobile modal close reachability ====================
Root cause: on mobile, .admin-modal-overlay aligns the modal to the
BOTTOM of the screen (align-items: flex-end, see below) and .admin-modal
can be up to 92vh tall — a near-full-height bottom sheet. .admin-modal-
close was `position: absolute` *inside that same scrolling box*, which
meant two compounding problems: (1) it sat right at the top of a
near-full-height sheet, close to the true top edge of the physical
screen and outside comfortable one-handed thumb reach, and (2) because
it was an absolutely-positioned descendant of the box that itself
scrolls (.admin-modal has overflow-y: auto), it scrolled away entirely
once the admin scrolled down into a long modal (e.g. the Order detail
modal's 7 sections) — leaving no way to close it without scrolling all
the way back up first.
Fix: on mobile only, .admin-modal becomes a flex column. The close
button becomes a normal (non-absolute) flex item pinned to the top of
the sheet — it never scrolls away again — while the modal's actual
content becomes its own independently-scrolling flex item beneath it.
Visual position (top-right of the sheet) is unchanged; this is a pure
reflow, no HTML/JS/id/behavior changes. Desktop (640px+) is completely
untouched — the existing centered/padded layout there was never the
reported problem.
Selector note: every .admin-modal in this project has the same shape —
.admin-modal-close followed by exactly one content div (id differs per
modal: enquiryModalBody, orderModalBody, convertOrderModalBody,
fieldSettingsModalBody, productModalBody, ...) — so
`.admin-modal > *:not(.admin-modal-close)` reaches the content of every
modal on every Admin page with this one rule, without adding a class to
any of them.
Known, accepted scope limit: the "Change Details" / product-history
popup (#activityDetailOverlay, admin.html) reuses .admin-modal-close's
styling but lives inside .admin-confirm-box, a differently-shaped,
THREE-child, centered (not bottom-sheet) dialog — a title
sits
between the close button and the body as separate siblings, so this
same selector would also make the short title its own equal-height
scroll region, visibly squeezing the real content. Extending this fix
there would need a more bespoke selector for a secondary, lower-
frequency, already-less-severe surface (centered+padded, not a
near-full-height sheet) — left unchanged rather than risk it, per "do
not redesign the entire Admin Panel".
---- Stage 4H addendum: distinct mobile Back affordance (ADMIN-07) ----
Stage 4G made the X reachable, but the requirement explicitly asks for
more than a repositioned X ("do not rely solely on... an extreme
top-right X"). .admin-modal-close is now wrapped in
.admin-modal-headerbar together with a new, adjacent .admin-modal-back
button (mobile-only; markup is identical across every modal — see the
selector note above, same reasoning applies here). Both sit in one
flex row via the wrapper: Back at the start, Close at the end, purely
from DOM order plus `justify-content: space-between` — no manual
left/right offsets to fight over. Only .admin-modal-close's OWN rule
changes below (align-self/margin-bottom move to the new wrapper, since
.admin-modal-close is no longer a direct flex child of .admin-modal —
it's nested one level deeper now); the content-scroll exclusion
selector is updated from :not(.admin-modal-close) to
:not(.admin-modal-headerbar) for the same reason — .admin-modal-close
alone is no longer a direct child of .admin-modal, so the OLD selector
would have wrongly also tried to scroll the wrapper itself. */
@media (max-width: 639.98px) {
/* Stage 14: the flex/pinned-header/scroll-region/#productModalActions
rules that used to live here are now unconditional (see the base
.admin-modal rules above) -- only what's genuinely mobile-only
(the Back button affordance) remains scoped to this query. */
.admin-modal-back {
display: inline-flex;
align-items: center;
gap: 4px;
height: 40px;
padding: 0 14px 0 12px;
border-radius: 100px;
border: none;
background: var(--admin-bg);
color: var(--admin-ink);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.admin-modal-back:hover { background: var(--admin-border); }
/* No longer needed once the button isn't overlapping the title (it now
sits in its own row above) — matches the existing min-width:960px
override of this same rule, just extended down to mobile too. */
.admin-detail-title { margin-right: 0; }
}
/* ==================== Stage 4H: "Back to Top" controls ====================
Two independent instances of the same idea, both position: fixed (so
neither depends on figuring out which element is scrolling in order to
just render in place):
.admin-modal-backtotop — one per modal, always in the same on-screen
corner. Its z-index (55) sits ABOVE .admin-modal-overlay's (50) so it's
usable while that modal is open; its visibility/scroll-target IS aware
of which element actually scrolls (.admin-modal itself at desktop vs.
the separate content child at mobile, per the Stage 4G split above) —
that part is necessarily handled in JS (see resolveModalScroller() /
bindModalBackToTop() in each admin-*.js file), not CSS.
.admin-backtotop — one per page (admin.html / admin-enquiries.html /
admin-orders.html / admin-help.html), for the page's own document
scroll. Its z-index (10) sits BELOW the modal overlay on purpose: while
a modal is open the page is scroll-locked anyway (admin-body-modal-
open), so it should be visually covered, not competing for the same
corner. */
.admin-modal-backtotop,
.admin-backtotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 44px;
height: 44px;
border-radius: 100px;
border: none;
background: var(--admin-ink);
color: var(--admin-white);
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-shadow: var(--admin-shadow);
display: flex;
align-items: center;
justify-content: center;
}
.admin-modal-backtotop:hover,
.admin-backtotop:hover { opacity: 0.9; }
.admin-modal-backtotop { z-index: 55; }
.admin-backtotop { z-index: 10; }
.admin-detail-image {
width: 100%;
max-height: 240px;
object-fit: cover;
border-radius: var(--admin-radius-sm);
margin-bottom: 18px;
background: var(--admin-bg);
}
.admin-detail-title {
font-size: 20px;
margin: 0 24px 4px 0;
color: var(--admin-green-dark);
overflow-wrap: break-word;
}
.admin-detail-category { color: var(--admin-muted); font-size: 13.5px; margin: 0 0 16px; }
.admin-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.admin-detail-item { min-width: 0; }
.admin-detail-item label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--admin-muted);
margin-bottom: 4px;
font-weight: 600;
}
.admin-detail-item span { font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.admin-detail-price-old { text-decoration: line-through; color: var(--admin-muted); font-weight: 400; margin-right: 8px; }
.admin-detail-section { margin-top: 20px; }
.admin-detail-section h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--admin-green-dark); }
.admin-variant-row, .admin-image-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
margin-bottom: 8px;
font-size: 13.5px;
flex-wrap: wrap;
}
.admin-image-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-image-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--admin-border); }
/* ==================== Responsive breakpoints (mobile-first: min-width) ==================== */
/* Small phones -> larger phones */
@media (min-width: 400px) {
.admin-summary-value { font-size: 24px; }
}
/* Tablets: two-column cards, row-based toolbar */
@media (min-width: 640px) {
.admin-main.is-dashboard { padding: 24px; }
.admin-page-head h1 { font-size: 26px; }
.admin-toolbar { grid-template-columns: 1fr auto; align-items: center; }
.admin-toolbar-filters { flex-wrap: nowrap; }
.admin-toolbar-filters select { flex: 0 0 auto; width: 150px; }
.admin-cards { grid-template-columns: repeat(2, 1fr); }
.admin-modal-overlay { align-items: center; padding: 20px; }
.admin-modal { max-width: 560px; max-height: 88vh; border-radius: var(--admin-radius); padding: 30px; }
/* Stage 4C: the order detail modal has more sections (Customer/Order/
Items/Delivery/Payment/Summary/Management) than the enquiry detail
modal it's otherwise modeled on, so it gets a wider cap at this same
breakpoint — still full-width and scrollable below it, same as every
other modal.
Stage 14 (checkpoint): 760px was still too narrow for the Edit
Product modal's content (3-column image manager grid + AI multi-
preview grid + form fields) at common desktop widths, per fresh
screenshot evidence of horizontal scrolling. Switched to a fluid cap
-- min(1040px, 94vw) -- reasoned from the 3-column image grid: at
1040px, content width is roughly 1040 - 2*30 (padding) = 980px, so 3
cards get ~318px each (comfortable for a square thumbnail + action
buttons), while 94vw keeps a visible margin and never exceeds the
viewport on a smaller desktop/tablet window (e.g. a 900px-wide
browser gets a ~846px modal, not a fixed 1040px that would force the
page itself to scroll horizontally). The order detail modal reuses
this same class and simply gets more breathing room too. */
.admin-modal-wide { max-width: min(1040px, 94vw); }
.admin-user { max-width: 160px; font-size: 13.5px; }
.admin-topbar-right { gap: 16px; }
}
/* Small laptops and up: switch from stacked cards to the full data table */
@media (min-width: 960px) {
.admin-summary-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.admin-summary-card { padding: 18px 20px; }
.admin-summary-value { font-size: 28px; }
.admin-page-head h1 { font-size: 28px; }
.admin-cards { display: none; }
.admin-table-wrap {
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-state { border: none; box-shadow: none; border-radius: 0; }
.admin-table { display: table; width: 100%; border-collapse: collapse; min-width: 900px; }
.admin-table th {
text-align: left;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--admin-muted);
padding: 14px 16px;
border-bottom: 1.5px solid var(--admin-border);
background: #fbf9f5;
white-space: nowrap;
}
.admin-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--admin-border);
font-size: 14px;
vertical-align: middle;
}
.admin-table tbody tr { cursor: pointer; transition: background 0.15s ease; }
.admin-table tbody tr:hover { background: #fbf7f0; }
.admin-table tbody tr:last-child td { border-bottom: none; }
/* Stage 14: the Actions column (Edit/History) stays reachable even when
the table needs its own horizontal scroll (min-width above, contained
within .admin-table-wrap's own overflow-x -- the page itself never
scrolls horizontally) -- sticky to the right edge with an opaque
background so scrolled-under content doesn't show through, plus a
subtle left border as a visual seam. */
.admin-table th:last-child, .admin-table td.admin-row-actions {
position: sticky;
right: 0;
background: var(--admin-white);
border-left: 1px solid var(--admin-border);
}
.admin-table th:last-child { background: #fbf9f5; }
.admin-table tbody tr:hover td.admin-row-actions { background: #fbf7f0; }
.admin-product-cell { display: flex; align-items: center; gap: 12px; }
.admin-thumb {
width: 44px; height: 44px;
border-radius: 8px;
object-fit: cover;
background: var(--admin-bg);
flex: none;
border: 1px solid var(--admin-border);
}
.admin-thumb-placeholder {
width: 44px; height: 44px;
border-radius: 8px;
background: #e9f3ec;
color: var(--admin-green);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
flex: none;
border: 1px solid var(--admin-border);
}
.admin-product-name { font-weight: 600; color: var(--admin-ink); }
.admin-detail-title { margin-right: 0; }
}
/* ==================== Phase 2B: Edit Product form ==================== */
.admin-field select,
.admin-field textarea {
width: 100%;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 12px 14px;
font-family: inherit;
font-size: 16px; /* 16px avoids iOS Safari auto-zoom on focus */
background: #fbf9f5;
color: var(--admin-ink);
transition: border-color 0.2s ease;
}
.admin-field select:focus,
.admin-field textarea:focus { outline: none; border-color: var(--admin-rose); }
.admin-field textarea { resize: vertical; min-height: 84px; }
.admin-field input:disabled,
.admin-field select:disabled,
.admin-field textarea:disabled { background: var(--admin-border); color: var(--admin-muted); cursor: not-allowed; }
.admin-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--admin-muted); }
.admin-field-hint-warning { color: var(--admin-rose-dark); }
.admin-field-hint-success { color: var(--admin-green); font-weight: 600; }
.admin-field-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.admin-field-toggle label { margin-bottom: 0; }
.admin-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.admin-switch input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.admin-switch-track {
position: absolute;
inset: 0;
background: var(--admin-border);
border-radius: 100px;
transition: background 0.2s ease;
pointer-events: none;
}
.admin-switch-track::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 21px; height: 21px;
background: var(--admin-white);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease;
}
.admin-switch input:checked + .admin-switch-track { background: var(--admin-green); }
.admin-switch input:checked + .admin-switch-track::after { transform: translateX(19px); }
.admin-switch input:focus-visible + .admin-switch-track { outline: 2px solid var(--admin-rose); outline-offset: 2px; }
/* Stage 13, Section 11: SECONDARY tier -- explicit white surface + subtle
border (was transparent, relying entirely on whatever sat behind it). */
.admin-btn-outline-neutral { background: var(--admin-white); border-color: var(--admin-border); color: var(--admin-text); }
.admin-btn-outline-neutral:hover:not(:disabled) { background: var(--admin-bg); }
.admin-modal-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
}
.admin-modal-actions .admin-btn { width: 100%; }
/* Stage 11E: #productModalActions is empty (no visible footer/border) for
every mode except the read-only product View -- see admin.html/
admin-products.js. */
#productModalActions:empty { display: none; }
.admin-edit-thumb {
width: 100%;
max-height: 160px;
object-fit: cover;
border-radius: var(--admin-radius-sm);
background: var(--admin-bg);
border: 1px solid var(--admin-border);
}
.admin-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
background: var(--admin-green-dark);
color: var(--admin-white);
padding: 14px 22px;
border-radius: 100px;
box-shadow: var(--admin-shadow);
font-size: 14px;
font-weight: 600;
z-index: 100;
max-width: calc(100vw - 40px);
text-align: center;
}
@media (min-width: 480px) {
.admin-modal-actions { flex-direction: row; justify-content: flex-end; }
.admin-modal-actions .admin-btn { width: auto; min-width: 140px; }
}
/* ==================== Image picker (Add/Edit Product) ==================== */
.admin-image-picker { display: flex; flex-direction: column; gap: 10px; }
.admin-image-preview {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--admin-radius-sm);
background: var(--admin-bg);
border: 1.5px dashed var(--admin-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--admin-muted);
font-size: 13px;
text-align: center;
padding: 12px;
}
.admin-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-picker-btn { cursor: pointer; text-align: center; }
.admin-image-picker input[type="file"] { display: none; }
.admin-image-status {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
padding: 10px 12px;
border-radius: var(--admin-radius-sm);
background: var(--admin-bg);
}
.admin-image-status .admin-field-hint { margin: 0; }
/* ---------- Multi-image manager (Edit Product) ---------- */
.admin-image-manager-grid {
display: grid;
/* Stage 14 (checkpoint): minmax(0, 1fr) instead of a bare 1fr -- a plain
`1fr` track has an implicit content-based minimum size, so a card
whose content (action-button row, badge/note text) needs more room
than an even 1/N split can silently force this grid, and everything
containing it (the modal, the page), wider than intended -- one of
the real contributors to the reported horizontal-scroll bug. minmax
(0, 1fr) removes that implicit minimum so cards actually shrink to
fit instead of overflowing. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.admin-image-card {
background: var(--admin-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
overflow: hidden;
}
.admin-image-card-media { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--admin-border); }
.admin-image-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-image-card-badge { position: absolute; top: 8px; left: 8px; }
.admin-image-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
/* Stage 11E-G: this reuses .admin-badge/.admin-badge-outofstock for its
amber color only -- that base class is an inline-flex, fully-rounded
PILL sized for a short word ("Out of Stock"), not a full sentence, which
is why the instructional text overflowed/misaligned instead of wrapping
inside the card. Overriding just the shape (display/radius/padding/
width/white-space) here, after those rules in source order, so the
color is kept and only the layout changes. */
.admin-image-card-pending-note {
display: block;
width: 100%;
box-sizing: border-box;
border-radius: var(--admin-radius-sm);
padding: 8px 10px;
margin-bottom: 2px;
font-size: 11.5px;
line-height: 1.4;
white-space: normal;
text-align: left;
}
.admin-image-card-actions .admin-btn { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 12px; }
.admin-image-card-actions label.admin-btn { display: flex; align-items: center; justify-content: center; margin: 0; }
.admin-btn-danger-outline {
background: transparent;
border-color: var(--admin-rose-dark);
color: var(--admin-rose-dark);
}
.admin-btn-danger-outline:hover:not(:disabled) { background: var(--admin-error-bg); }
.admin-btn-danger { background: var(--admin-rose-dark); color: var(--admin-white); border-color: var(--admin-rose-dark); }
.admin-btn-danger:hover:not(:disabled) { background: #8a1f3c; }
.admin-image-manager-footer { margin-top: 12px; }
.admin-image-manager-footer .admin-btn { display: inline-flex; }
@media (min-width: 560px) {
.admin-image-manager-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------- Destructive-action confirmation dialog ---------- */
.admin-confirm-overlay {
position: fixed;
inset: 0;
z-index: 70; /* above .admin-modal-overlay (50) — this confirms an action started inside that modal */
background: rgba(38, 20, 20, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.admin-confirm-box {
background: var(--admin-white);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
max-width: 380px;
width: 100%;
padding: 22px 20px;
border-top: 4px solid var(--admin-rose-dark);
}
.admin-confirm-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 18px;
color: var(--admin-rose-dark);
margin: 0 0 10px;
}
.admin-confirm-message { color: var(--admin-muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.admin-confirm-actions { display: flex; gap: 10px; }
.admin-confirm-actions .admin-btn { flex: 1; }
/* ==================== Recent Activity ==================== */
.admin-activity-panel {
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
padding: 18px 16px;
margin-top: 22px;
}
.admin-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.admin-activity-head h2 {
font-size: 18px;
margin: 0;
color: var(--admin-ink);
}
.admin-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-activity-item {
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 12px 14px;
background: var(--admin-bg);
}
.admin-activity-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-activity-actor { font-weight: 700; color: var(--admin-ink); }
.admin-activity-time { font-size: 12px; color: var(--admin-muted); white-space: nowrap; }
.admin-activity-summary { font-size: 13.5px; color: var(--admin-ink); margin: 4px 0 0; }
.admin-activity-summary strong { font-weight: 600; }
.admin-activity-diff {
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: var(--admin-rose-dark);
}
.admin-activity-fields { font-size: 12.5px; color: var(--admin-muted); margin-top: 4px; }
.admin-activity-viewbtn { margin-top: 8px; }
/* ---------- Change Details / product history (reuses .admin-confirm-box) ---------- */
.admin-activity-detail-box {
max-width: 480px;
max-height: 84vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
border-top-color: var(--admin-green);
text-align: left;
}
.admin-activity-detail-title { color: var(--admin-green); padding-right: 34px; }
.admin-activity-detail-meta { color: var(--admin-muted); font-size: 13px; margin: 0 0 14px; }
.admin-activity-change-row { padding: 10px 0; border-top: 1px solid var(--admin-border); }
.admin-activity-change-row:first-of-type { border-top: none; }
.admin-activity-change-label { font-weight: 700; font-size: 13.5px; color: var(--admin-ink); margin-bottom: 4px; }
.admin-activity-change-values { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.admin-activity-change-values .before { color: var(--admin-muted); }
.admin-activity-change-values .before::before { content: "Before: "; font-weight: 600; }
.admin-activity-change-values .after { color: var(--admin-green); }
.admin-activity-change-values .after::before { content: "After: "; font-weight: 600; }
.admin-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-history-item { border-left: 3px solid var(--admin-green); padding: 4px 0 4px 12px; }
.admin-history-time { font-size: 12px; color: var(--admin-muted); }
.admin-history-actor { font-weight: 700; font-size: 13.5px; margin: 2px 0; }
.admin-history-summary { font-size: 13.5px; color: var(--admin-ink); }
.admin-history-diff { font-size: 13px; font-weight: 600; color: var(--admin-rose-dark); }
/* ---------- Image zoom/position/aspect/fit-fill adjustment (Stage 16) ----------
.admin-image-adjust-box reuses .admin-activity-detail-box's sizing
(max-width 480px, centered) -- plenty of room for a compact stage, not
a full editor. The stage's on-screen box size/shape is set from JS
(openImageAdjustDialog in js/admin-products.js, per the chosen aspect
ratio) via an inline width + aspect-ratio, NOT a fixed height, so
max-width:100% below still lets it shrink to fit a narrow phone screen
without distorting; the canvas's internal drawing-buffer resolution is
independent of this and stays crisp regardless. This file only styles
the chrome. */
.admin-image-adjust-box { max-width: 420px; }
.admin-image-adjust-stage {
max-width: 100%;
margin: 12px auto;
border-radius: var(--admin-radius-sm);
overflow: hidden;
background: #f7f5f3;
border: 1px solid var(--admin-border);
touch-action: none; /* dragging is handled entirely via pointer events -- prevent the browser's own scroll/zoom gestures from fighting it */
cursor: grab;
}
.admin-image-adjust-stage:active { cursor: grabbing; }
.admin-image-adjust-stage canvas { display: block; width: 100%; height: 100%; }
.admin-image-adjust-toolbar {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.admin-image-adjust-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.admin-image-adjust-group .admin-btn {
width: auto;
padding: 7px 12px;
font-size: 12.5px;
min-height: 34px;
}
/* Stage 16: shared "currently selected" treatment for the aspect-ratio /
fit-fill toggle groups -- same green-accent language
.admin-summary-card-attention and drill-down links already use
elsewhere, not a new color. */
.admin-image-adjust-group .admin-btn.is-active {
background: var(--admin-green-bg);
border-color: var(--admin-green);
color: var(--admin-green-dark);
}
.admin-image-adjust-zoomrow {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.admin-image-adjust-zoomrow .admin-btn { width: auto; min-width: 44px; }
/* ---------- Standard/AI processing choice + AI cost-warning dialogs ---------- */
.admin-processing-choice { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.admin-processing-option {
display: flex;
align-items: flex-start;
gap: 10px;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 12px 14px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-processing-option:has(input:checked) { border-color: var(--admin-green); background: #f2f8f4; }
.admin-processing-option input[type="radio"] { margin-top: 3px; flex: none; }
.admin-processing-option-body { display: flex; flex-direction: column; gap: 2px; }
.admin-processing-option-body strong { font-size: 14px; color: var(--admin-ink); }
.admin-processing-option-body span { font-size: 12.5px; color: var(--admin-muted); }
.admin-ai-warning-checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13.5px;
color: var(--admin-ink);
margin: 0 0 18px;
cursor: pointer;
}
.admin-ai-warning-checkbox input { margin-top: 3px; flex: none; }
/* ---------- AI result preview/approval dialog ---------- */
.admin-ai-preview-box { max-width: 720px; text-align: left; }
.admin-ai-preview-grid {
display: flex;
flex-direction: column;
gap: 14px;
margin: 14px 0 18px;
}
.admin-ai-preview-pane { flex: 1; min-width: 0; }
.admin-ai-preview-label {
font-size: 12.5px;
font-weight: 600;
color: var(--admin-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 6px;
}
.admin-ai-preview-media {
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
overflow: hidden;
background: #f7f5f3;
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
}
.admin-ai-preview-media img { max-width: 100%; max-height: 320px; display: block; object-fit: contain; }
.admin-ai-preview-actions { flex-wrap: wrap; }
.admin-ai-preview-actions .admin-btn { flex: 1 1 auto; min-width: 130px; }
@media (min-width: 640px) {
.admin-ai-preview-grid { flex-direction: row; }
}
@media (min-width: 640px) {
.admin-activity-detail-box { padding: 26px 24px; }
}
/* ==================== Stage 12 (Phase 2): AI multi-background picker ====================
Grid of selectable preview cards -- Original + up to 3 generated
backgrounds. Mobile-first: single column by default (comfortable large
tap targets), 2-column from a small tablet width up. */
.admin-ai-multipreview-box { max-width: 920px; text-align: left; }
/* Stage 13: subtle, not an advertisement -- small icon + number, same
weight/size as the surrounding hint text, no banner treatment. */
.admin-ai-credits-line { margin: -6px 0 4px; font-weight: 600; font-size: 13px; color: var(--admin-muted); }
.admin-ai-multipreview-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 14px 0 18px;
}
@media (min-width: 480px) {
.admin-ai-multipreview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
.admin-ai-multipreview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.admin-ai-multipreview-card {
border: 2px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
overflow: hidden;
background: var(--admin-white);
cursor: pointer;
padding: 0;
text-align: left;
font: inherit;
display: block;
width: 100%;
}
.admin-ai-multipreview-card:hover { border-color: var(--admin-gold); }
.admin-ai-multipreview-card.is-selected { border-color: var(--admin-rose); box-shadow: 0 0 0 3px rgba(200, 53, 93, 0.15); }
.admin-ai-multipreview-media { aspect-ratio: 1 / 1; background: #f7f5f3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-ai-multipreview-media img { width: 100%; height: 100%; object-fit: contain; }
.admin-ai-multipreview-media.is-loading { color: var(--admin-muted); font-size: 12.5px; }
.admin-ai-multipreview-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
color: var(--admin-ink);
}
.admin-ai-multipreview-check {
width: 18px; height: 18px;
border-radius: 100px;
border: 2px solid var(--admin-border);
flex: none;
display: flex;
align-items: center;
justify-content: center;
color: var(--admin-white);
font-size: 12px;
line-height: 1;
}
.is-selected .admin-ai-multipreview-check { border-color: var(--admin-rose); background: var(--admin-rose); }
.is-selected .admin-ai-multipreview-check::after { content: "✓"; }
/* ==================== Category management ==================== */
.admin-category-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--admin-border);
}
.admin-category-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
}
.admin-category-row-main { flex: 1 1 140px; min-width: 0; }
.admin-category-row-name { font-weight: 600; font-size: 14px; overflow-wrap: break-word; }
.admin-category-row-meta { font-size: 12px; color: var(--admin-muted); }
.admin-category-row-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* ==================== Stage 3C: Enquiry management ====================
Mobile card layout reuses the existing .admin-cards grid container
(same one Product Management uses) with a new, simpler text-only card
— enquiries have no image/price to anchor a .admin-pcard-style layout
around. Desktop table reuses .admin-table/.admin-table-wrap as-is (see
the shared min-width:960px rule earlier in this file) — no new table
styling needed at all. */
.admin-enquiry-card {
background: var(--admin-white);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius);
box-shadow: var(--admin-shadow);
padding: 14px 16px;
}
.admin-enquiry-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.admin-enquiry-card-name { font-weight: 700; font-size: 15px; color: var(--admin-ink); overflow-wrap: break-word; }
.admin-enquiry-card-meta { font-size: 12.5px; color: var(--admin-muted); margin: 0 0 8px; }
.admin-enquiry-card-req { font-size: 13.5px; color: var(--admin-ink); margin: 0 0 10px; }
.admin-enquiry-card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--admin-muted); margin-bottom: 12px; flex-wrap: wrap; }
/* Stage 11E-D: order card total, shown in the card header next to the
order number -- was previously buried mid-card next to the payment
badge, easy to misread as part of the status line. */
.admin-order-status-total { font-weight: 700; font-size: 14.5px; color: var(--admin-green-dark); white-space: nowrap; }
/* Payment vs. Order (fulfillment) status are deliberately separate
concepts (see js/admin-orders.js's buildLabeledBadgeHtml comment) --
these two labeled groups make that explicit instead of showing two
unlabeled badges back to back. */
.admin-order-status-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; }
.admin-order-status-item { display: flex; flex-direction: column; gap: 3px; }
.admin-order-status-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--admin-muted); }
.admin-enquiry-contact-actions { margin-bottom: 4px; }
/* Deliberately visually distinct (different background + a lock icon in
the label, see js/admin-enquiries.js) from the rest of the detail
modal, so it reads unambiguously as "admin-only, not customer-facing" —
the one explicit requirement for this section. */
.admin-enquiry-internal {
background: var(--admin-bg);
border: 1px dashed var(--admin-border);
border-radius: var(--admin-radius-sm);
padding: 14px 16px 2px;
margin: 18px 0;
}
.admin-enquiry-internal-label { font-size: 12.5px; font-weight: 600; color: var(--admin-muted); margin: 0 0 10px; }
/* ==================== Stage 3E: Enquiry field settings ====================
Lives inside a modal (max-width ~560px on desktop, full-width on
mobile), so it deliberately does NOT reuse .admin-table — that class is
`display:none` below the 960px breakpoint and has a 900px min-width
once shown, neither of which fits inside a modal. This is a small,
always-visible table with its own scoped styles, wrapped in a
horizontal-scroll container as a safety net on very narrow phones. */
.admin-fs-table-wrap { overflow-x: auto; margin-bottom: 18px; }
.admin-fs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-fs-table th,
.admin-fs-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--admin-border); white-space: nowrap; }
.admin-fs-table th:not(:first-child),
.admin-fs-table td:not(:first-child) { text-align: center; }
.admin-fs-table td:first-child { white-space: normal; }
.admin-fs-table tbody tr:last-child td { border-bottom: none; }
.admin-fs-table input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
.admin-fs-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }
/* ==================== Stage 4C: Order items editor ====================
Reuses .admin-fs-table (Stage 3E) for the items table itself — same
"lives inside a modal, needs to stay narrow and always-visible"
reasoning applies here too, so no separate table style was created.
Only the two order-item-specific pieces below are new: the small
number inputs inside table cells (quantity/unit price, NEW orders
only) and the "locked" banner shown instead of edit controls once an
order is CONFIRMED or later (see the Stage 4C item-editing-protection
rule in js/admin-orders.js). */
.admin-fs-table input[type="number"] {
width: 100%;
padding: 6px 8px;
border: 1.5px solid var(--admin-border);
border-radius: 8px;
font: inherit;
}
.admin-oi-locked {
background: var(--admin-bg);
border: 1px dashed var(--admin-border);
color: var(--admin-muted);
font-size: 13px;
padding: 10px 14px;
border-radius: var(--admin-radius-sm);
margin-bottom: 12px;
}
/* Stage 4D reuses .admin-oi-add-row/.admin-fs-table/.admin-conv-* below
for the enquiry-conversion product picker in js/admin-orders.js's
openConversionModal() — same "small always-visible table inside a
modal" reasoning, just with an extra category-filter ahead of
the product one; flex-wrap already handles that gracefully on narrow
screens without any new layout rules. */
.admin-oi-add-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.admin-oi-add-row select {
flex: 1 1 220px;
min-width: 0;
padding: 9px 10px;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font: inherit;
}
.admin-oi-add-row input[type="number"] {
flex: 0 0 70px;
padding: 9px 10px;
border: 1.5px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font: inherit;
}
/* ==================== Stage 5: Admin Dashboard ====================
Reuses .admin-summary-grid/.admin-summary-card (KPI numbers),
.admin-state (loading/error), .admin-history-list (Recent Activity) as-
is -- nothing here duplicates them. Everything below is new because the
Dashboard is the first Admin page with trend/breakdown charts; per the
Stage 5 design decision, these are plain CSS/SVG (no charting library
exists anywhere in this project, and adding one would be a new external
dependency contrary to its no-bundler convention). */
/* Stage 19: page-head's controls cluster is now a compact right-aligned
group (date-range pill + Refresh) sitting inline with the title/subtitle
row, rather than a separate boxed bar below it -- see admin-dashboard.html's
merged .admin-page-head. */
.admin-dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-dash-range { position: relative; display: flex; align-items: center; }
.admin-dash-range-icon { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--admin-muted); pointer-events: none; }
.admin-dash-range select {
border: 1.5px solid var(--admin-border);
border-radius: 100px;
padding: 10px 16px 10px 34px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
background: var(--admin-white);
color: var(--admin-ink);
min-height: 40px;
cursor: pointer;
}
.admin-dash-refreshbtn { padding: 9px 16px; min-height: 40px; }
.admin-dash-refreshbtn svg { width: 15px; height: 15px; flex: none; }
.admin-dash-lastrefreshed { display: block; font-size: 12px; color: var(--admin-muted); margin: 0 0 18px; }
@media (min-width: 640px) {
.admin-dash-lastrefreshed { text-align: right; }
}
/* ====================================================================
Stage 18B — Dashboard presentation redesign.
Stage 18A raised .admin-dashboard's max-width (1280px -> 1760px) to
fix the outer container being clamped narrow. That CSS math still
checks out under a fresh re-trace (see that rule's own comment) and
nothing else in the body -> admin-shell -> admin-main -> admin-
dashboard -> admin-content-area chain constrains width -- confirmed
by grepping every width/max-width rule in this file. Given the
reported screenshot still looked unchanged, a stale cached copy of
this file is a real possibility (the