/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Clinical Premium SaaS palette + typography (phase-A: tokens only).
Bright #F7F9FC page surface, white cards, slate text, signal-red
accent. Space Grotesk drives display, Inter carries UI/body.
This phase swaps tokens only — every component rule below is
unchanged so layout dimensions stay identical to the previous
build. */
:root {
/* Clinical Premium palette */
--bg-main: #F7F9FC; /* page background */
--bg-secondary: #F1F4F8; /* tray / muted panel */
--color-accent: #9F2942; /* signal red */
--color-accent-hover: #8A243A;
--text-title: #111827; /* slate-900 — headings */
--text-body: #111827; /* slate-900 — body */
--surface-card: #FFFFFF;
--border-light: #E5E7EB; /* slate-200 */
/* Legacy aliases — concrete hex, no var() chains, so cascade
never depends on multi-step custom-property resolution. */
--bg: #F7F9FC;
--bg-card: #FFFFFF;
--bg-sidebar: #FFFFFF;
--border: #E5E7EB;
--text: #111827;
--text-muted: #6B7280;
--text-sub: #6B7280;
--text-faint: #9CA3AF;
--accent: #9F2942;
--accent-hover: #8A243A;
--accent-light: #F6E8ED;
--accent-border:#DFC2CC;
--success: #0F9D58;
--success-bg: #E6F4EA;
--warning: #D97706;
--warning-bg: #FEF3C7;
--danger: #DC2626;
--danger-bg: #FEE2E2;
--info: #2563EB;
--info-bg: #EFF6FF;
--topbar-h: 58px;
--sidebar-w: 0px;
--radius: 4px;
--shadow-sm: 0 1px 2px rgba(17,24,39,0.04);
--shadow: 0 4px 12px rgba(17,24,39,0.05);
--shadow-md: 0 10px 30px rgba(17,24,39,0.06);
--sans: 'Inter', system-ui, -apple-system, sans-serif;
--serif: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--mono: 'Inter', system-ui, -apple-system, sans-serif;
--body: 'Inter', system-ui, -apple-system, sans-serif;
/* ── Type scale — calibrated. h1 ramps 30→40→48→56→64 across
the breakpoint ladder (was 34→48→56→64→72 — too dominant
for a working B2B environment). Stat numbers and body
copy come down in proportion so the hierarchy stays
intact but no element shouts. */
--fs-h1: 1.875rem; /* 30px */
--fs-h2: 1.625rem; /* 26px */
--fs-h3: 1.25rem; /* 20px */
--fs-h4: 1.0625rem; /* 17px */
--fs-stat: 1.75rem; /* 28px */
--fs-body-lg: 1.0625rem; /* 17px */
--fs-body: 0.9375rem; /* 15px */
--fs-body-sm: 0.8125rem; /* 13px */
--fs-label: 0.6875rem; /* 11px */
/* ── Component dimensions + spacing (mobile-first, refined). ── */
--btn-h: 44px;
--btn-px: 18px;
--input-h: 48px;
--space-card: 18px;
--space-grid-gap: 16px;
--space-section: 48px;
--max-content: 1440px;
--max-reading: 900px;
--max-form: 520px;
}
@media (min-width: 768px) {
:root {
--fs-h1: 2.125rem; /* 34px (mobile-large) */
--fs-h2: 1.75rem; /* 28px */
--fs-h3: 1.375rem; /* 22px */
--fs-h4: 1.125rem; /* 18px */
--fs-stat: 2rem; /* 32px */
--fs-body-lg: 1.125rem; /* 18px */
--fs-body: 1rem; /* 16px */
--fs-body-sm: 0.875rem; /* 14px */
--fs-label: 0.75rem; /* 12px */
--btn-h: 46px;
--input-h: 50px;
--space-card: 22px;
--space-grid-gap: 20px;
--space-section: 64px;
}
}
@media (min-width: 1024px) {
:root {
--fs-h1: 2.5rem; /* 40px (laptop) */
--fs-h2: 2rem; /* 32px */
--fs-h3: 1.5rem; /* 24px */
--fs-h4: 1.25rem; /* 20px */
--fs-stat: 2.25rem; /* 36px */
--fs-body-lg: 1.1875rem; /* 19px */
--fs-body: 1.0625rem; /* 17px */
--btn-h: 48px;
--btn-px: 24px;
--input-h: 52px;
--space-card: 24px;
--space-grid-gap: 24px;
--space-section: 80px;
}
}
@media (min-width: 1280px) {
:root {
--fs-h1: 3rem; /* 48px (desktop) */
--fs-h2: 2.25rem; /* 36px */
--fs-h3: 1.625rem; /* 26px */
--fs-stat: 2.5rem; /* 40px */
--space-card: 28px;
--space-section: 96px;
}
}
@media (min-width: 1440px) {
:root {
--fs-h1: 3.5rem; /* 56px (desktop large) */
--fs-h2: 2.5rem; /* 40px */
--space-section: 112px;
}
}
@media (min-width: 1680px) {
:root {
--fs-h1: 4rem; /* 64px (XL displays only) */
}
}
html {
font-size: 16px;
/* iOS Safari auto-zooms text inside position:fixed popovers when
this is left at the default `auto`, blowing up the dropdown
option font on mobile. Pin to 100% so option labels render at
the size CSS asks for. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background: var(--bg-main);
color: var(--text-body);
font-family: var(--body);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Display layer (h1-h4, article / stat / hero titles) uses
--serif (Space Grotesk) at weight 600. UI / body / labels use
--sans (Inter) via the cascade. NO uppercase by default —
eyebrow / chip / filter classes opt-in below. */
h1, h2, h3, h4, h5, h6,
.article-title, .product-detail-title, .stat-value {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-title);
text-transform: none;
}
h1, .article-title, .product-detail-title { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
.stat-value { font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.025em; }
p { font-size: var(--fs-body); line-height: 1.65; }
.body-large { font-size: var(--fs-body-lg); line-height: 1.7; }
.body-small { font-size: var(--fs-body-sm); color: var(--text-secondary, var(--text-muted)); }
.section-eyebrow,
.article-tag-chip,
.field-label {
font-family: var(--sans);
font-weight: 300;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-muted);
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
/* ── Topbar (clinical) ─────────────────────────────────────── */
.topbar {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
display: flex; align-items: center; gap: 12px;
max-width: var(--max-content);
margin: 0 auto;
padding: 0 24px;
min-height: var(--topbar-h);
}
.topbar-brand { display: flex; align-items: center; }
.brand-logo { display: block; width: auto; }
.topbar-brand .brand-logo { height: 32px; }
.login-brand .brand-logo { height: 54px; margin: 0 auto; }
.topbar-nav {
display: flex; align-items: stretch;
margin-left: 20px; gap: 2px;
/* min-width:0 lets the flex algorithm shrink the nav below its
min-content if the right-side cluster (CTA / user-area / Logout)
is competing for room. fitTopbarNav() in portal.js then walks
items right-to-left into the More dropdown until the bar fits
again — see assets/js/portal.js. We deliberately keep overflow
visible here: the More dropdown is an absolutely-positioned
descendant of the nav, and any clip on this ancestor (overflow:
clip / hidden / contain: paint) would also clip the dropdown,
producing the "Companie…" cut-off effect. The nav-overflow
safety net is JS, not CSS. */
min-width: 0;
}
.topbar-nav-item {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 0 14px;
height: var(--topbar-h);
color: var(--text-muted);
font-family: var(--sans);
font-size: 0.9375rem; font-weight: 500;
letter-spacing: 0;
text-decoration: none;
transition: color .25s ease, background .25s ease;
}
.topbar-nav-item:hover { color: var(--text); }
/* Active state: wine ink + soft accent-light tinted background
(--accent-light = #F6E8ED) + 2px underline. The tint stays
gentle so the navbar reads as Scandinavian-minimal rather
than highlighted with a hard pill. */
.topbar-nav-item.is-active {
color: var(--accent) !important;
font-weight: 500 !important;
background: var(--accent-light) !important;
}
.topbar-nav-item.is-active::after {
content: '';
position: absolute;
left: 14px; right: 14px; bottom: 0;
height: 2px;
background: var(--accent);
}
.topbar-nav-badge {
font-family: var(--mono);
font-size: 10px; font-weight: 500; letter-spacing: 0;
padding: 1px 6px;
color: #fff; background: var(--accent);
}
/* ── Dropdown nav group ─────────────────────────────────────────
Shop is the only dropdown so far, but the markup is generic so
any nav item with `children` gets the same treatment. Hover
on desktop, click-toggle on touch (handled via .is-open in JS). */
.topbar-nav-group { position: relative; display: inline-flex; align-items: stretch; }
/* Group items (Shop, More …) carry a caret on their right edge. The
.topbar-nav-item already supplies a 10px flex-gap between its
children, so the caret needs no extra left margin — and the right
padding only needs to leave breathing room for the caret itself,
not for a phantom label after it. */
.topbar-nav-group > .topbar-nav-item { padding-right: 8px; }
.topbar-nav-caret {
margin-left: 0;
color: inherit;
opacity: .85;
transition: transform .18s;
flex-shrink: 0;
}
.topbar-nav-group:hover .topbar-nav-caret,
.topbar-nav-group.is-open .topbar-nav-caret { transform: rotate(180deg); }
.topbar-dropdown {
position: absolute;
top: 100%; left: 0;
min-width: 180px;
background: var(--bg-card);
border: 1px solid var(--border);
border-top: 2px solid var(--accent);
box-shadow: 0 6px 16px rgba(15,20,24,.08);
display: none;
z-index: 80;
padding: 4px 0;
}
.topbar-nav-group:hover .topbar-dropdown,
.topbar-nav-group.is-open .topbar-dropdown { display: block; }
/* ── Catalog facet panel ───────────────────────────────────────────
In-page section on /devices that lists three browse-by-X axes
(Areas of use / Brands / Technologies). Each item deep-links to
/devices with the matching facet pre-applied. Auto-fit grid
means the columns wrap naturally on narrower viewports without
media-query gymnastics. */
.catalog-mega {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px 36px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 22px 24px 18px;
margin: 0 0 22px;
}
.catalog-mega-col { display: flex; flex-direction: column; min-width: 0; }
.catalog-mega-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text);
margin: 0 0 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
}
.catalog-mega-list {
list-style: none;
margin: 0;
padding: 0;
}
/* By default each column shows its first 10 entries — anything past
that hides behind a "Show all (N)" affordance. Expanding one
column is column-scoped: the `.is-expanded` class lives only on
the column the visitor clicked, so the rest of the panel keeps
its compact layout. */
.catalog-mega-list > li:nth-child(n+11) { display: none; }
.catalog-mega-col.is-expanded .catalog-mega-list > li:nth-child(n+11) { display: list-item; }
.catalog-mega-expand {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 4px 0;
background: none;
border: none;
border-top: 1px solid var(--border-light);
width: 100%;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--accent);
letter-spacing: 0.02em;
cursor: pointer;
text-align: left;
}
.catalog-mega-expand:hover { color: var(--accent-dark, var(--accent)); filter: brightness(0.95); }
/* Show / Hide labels swap based on the column's expanded state. */
.catalog-mega-expand-expanded { display: none; }
.catalog-mega-col.is-expanded .catalog-mega-expand-collapsed { display: none; }
.catalog-mega-col.is-expanded .catalog-mega-expand-expanded { display: inline; }
.catalog-mega-list li { margin: 0; }
.catalog-mega-list a {
display: block;
padding: 7px 0;
font-size: 13.5px;
color: var(--text-muted);
text-decoration: none;
transition: color .12s;
letter-spacing: 0.01em;
}
.catalog-mega-list a:hover { color: var(--accent); }
.catalog-mega-see-all {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border-light);
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
letter-spacing: 0.02em;
}
.catalog-mega-see-all:hover { color: var(--accent-dark, var(--accent)); }
.catalog-mega-see-all svg { transition: transform .12s; }
.catalog-mega-see-all:hover svg { transform: translateX(2px); }
/* Phone layout: stack columns, tighten padding, the list items
take a denser vertical rhythm. */
@media (max-width: 640px) {
.catalog-mega {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px 18px 14px;
margin-bottom: 16px;
}
.catalog-mega-title { padding-bottom: 6px; margin-bottom: 4px; }
.catalog-mega-list a { padding: 5px 0; font-size: 13px; }
.catalog-mega-see-all { margin-top: 8px; padding-top: 8px; }
}
/* ── Catalog active filter chips ─────────────────────────────
When the visitor lands on /devices with brand=, area=, or
tech= in the URL, the mega panel is hidden and each active
value surfaces here as a removable chip. Clicking × strips
that value from the URL and reloads. The wrapper also carries
a "Show categories" toggle so the visitor can bring the mega
panel back without having to clear filters first. */
.catalog-active-chips-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 14px;
}
.catalog-active-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.catalog-mega-toggle,
.catalog-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 12.5px;
font-weight: 500;
color: var(--text);
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: background .12s, border-color .12s, color .12s;
}
.catalog-mega-toggle:hover,
.catalog-back-link:hover {
background: var(--bg);
border-color: var(--accent);
color: var(--accent);
}
/* The "back to all devices" link is the primary exit — give it the
accent treatment so visitors don't have to puzzle over which X to
click to undo a filter selection. */
.catalog-back-link {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.catalog-back-link:hover {
background: var(--accent-dark, var(--accent));
border-color: var(--accent-dark, var(--accent));
color: #fff;
filter: brightness(0.95);
}
.catalog-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12.5px;
color: var(--text);
cursor: pointer;
transition: background .12s, border-color .12s;
font-family: inherit;
}
.catalog-chip:hover { background: var(--bg); border-color: var(--accent); }
.catalog-chip-label { white-space: nowrap; }
.catalog-chip-label strong { color: var(--text); font-weight: 600; }
.catalog-chip-x {
display: inline-flex;
align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg);
font-size: 14px;
line-height: 1;
color: var(--text-muted);
}
.catalog-chip:hover .catalog-chip-x { color: var(--accent); }
.topbar-dropdown-item {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 10px 16px;
color: var(--text-muted);
font-size: 13px;
text-decoration: none;
letter-spacing: 0.02em;
transition: color .12s, background .12s;
white-space: nowrap;
}
.topbar-dropdown-item:hover {
color: var(--text);
background: var(--bg);
}
.topbar-dropdown-item.is-active {
color: var(--accent);
background: var(--accent-light);
font-weight: 600;
}
.topbar-dropdown-badge {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0;
padding: 1px 7px;
color: #fff;
background: var(--accent);
}
.topbar-spacer { flex: 1; }
/* Adaptive topbar collapse rules live further down the file (after
the base .topbar-user / .topbar-cta declarations) so they actually
override them at narrow widths. Search for "Adaptive topbar
collapse" to find them.
*/
/* Burgundy primary call-to-action sitting inside the topbar, just
before the user tile. Clients only — admins don't file requests.
Compact-pill sizing lives in .topbar-inner .topbar-cta below at
higher specificity so the .btn / .btn-sm cascade can't win it. */
.topbar-cta {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
}
.topbar-cta svg { flex-shrink: 0; }
.topbar-inner .topbar-cta {
padding: 4px 8px;
gap: 4px;
letter-spacing: 0;
}
/* 3-step progress indicator above the service-request form.
The wrapper lays three circular dots connected by lines. The
current step is burgundy, past steps are solid grey, future steps
are outlined grey. Mobile stacks the dots slightly tighter. */
.sr-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 4px 0 6px;
}
.sr-step-dot {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-muted);
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
display: grid; place-items: center;
flex-shrink: 0;
transition: background .15s, border-color .15s, color .15s;
}
.sr-step-dot.is-current {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.sr-step-dot.is-done {
background: var(--text);
border-color: var(--text);
color: #fff;
}
.sr-step-line {
flex: 0 0 60px;
height: 1px;
background: var(--border);
}
.sr-step-title {
text-align: center;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 22px;
}
/* Individual steps. Only the `is-active` one is rendered; the
others still live in the DOM so their inputs submit with the
form. */
.sr-step { display: none; }
.sr-step.is-active { display: block; }
/* Footer row per step: ← Back / Cancel on the left, Next → or
Submit on the right. On mobile stacks to two full-width rows so
the submit button doesn't get tucked in a corner. */
.sr-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 18px 0 32px;
}
@media (max-width: 600px) {
.sr-nav { flex-direction: column-reverse; }
.sr-nav .btn { width: 100%; justify-content: center; }
}
/* Collected-files chip list rendered below the upload input on the
service-request form. Lets the user see what's already attached and
drop items individually before submitting. */
.sr-file-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.sr-file-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--border);
background: var(--bg-card);
font-size: 13px;
min-width: 0;
}
.sr-file-row-name {
display: flex; align-items: baseline; gap: 8px;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-file-row-name strong { color: var(--text); font-weight: 500; }
.sr-file-row-name span { color: var(--text-muted); font-size: 11.5px; font-family: var(--mono); }
.sr-file-row-remove {
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 4px;
}
.sr-file-row-remove:hover { color: var(--danger); }
.topbar-user-area {
display: flex; align-items: center; gap: 12px;
/* Never compress — the .topbar-spacer next to nav already
pushes us to the right edge, but flex-shrink:0 here is what
guarantees Logout never gets squeezed off-screen even when
the nav (with overflow → More) plus CTA are demanding more
room than the viewport has. */
flex-shrink: 0;
}
.topbar-logout-form { flex-shrink: 0; }
.topbar-user {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px;
border-left: 1px solid var(--border);
min-width: 0;
}
.topbar-avatar {
width: 32px; height: 32px;
background: var(--accent); color: #fff;
display: grid; place-items: center;
font-family: var(--sans);
font-size: 13px; font-weight: 600;
flex-shrink: 0;
}
.topbar-user-meta { line-height: 1.2; min-width: 0; max-width: 220px; }
.topbar-user-email {
font-size: 12.5px; color: var(--text); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user-role {
font-family: var(--mono); font-size: 10px; color: var(--text-muted);
letter-spacing: 0.12em; margin-top: 1px;
}
.topbar-user-link {
text-decoration: none; color: inherit; cursor: pointer;
transition: background-color .12s ease;
border-radius: 0;
}
.topbar-user-link:hover { background: rgba(17, 24, 39, 0.04); }
.topbar-logout-form { margin: 0; }
.topbar-logout-btn {
background: transparent;
border: 1px solid var(--border);
padding: 7px 12px;
color: var(--text-muted);
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
transition: color .12s, border-color .12s;
}
.topbar-logout-btn:hover { color: var(--accent); border-color: var(--accent); }
.topbar-logout-btn svg { display: block; width: 16px; height: 16px; }
.topbar-logout-label { white-space: nowrap; }
.topbar-menu-toggle {
display: none;
width: 36px; height: 36px;
flex-direction: column; align-items: center; justify-content: center;
gap: 5px;
background: transparent; border: 1px solid var(--border); cursor: pointer; padding: 4px;
}
.topbar-menu-toggle span {
display: block; width: 18px; height: 1.5px;
background: var(--text-sub); transition: all .2s;
}
.overlay {
display: none;
position: fixed; inset: 0;
background: rgba(15,20,24,.35);
z-index: 40;
backdrop-filter: blur(2px);
}
.overlay.active { display: block; }
/* ── Main content ───────────────────────────────────────────── */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--topbar-h));
}
.page-inner {
padding: 28px 32px 40px;
max-width: var(--max-content);
width: 100%;
margin: 0 auto;
flex: 1;
min-width: 0;
}
.page-inner.is-reading { max-width: var(--max-reading); }
.page-inner.is-form { max-width: var(--max-form); }
/* Impersonate banner */
.impersonate-bar {
background: #111417; color: #fff;
padding: 10px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; font-size: 13px; flex-wrap: wrap;
}
.impersonate-label {
color: var(--accent); font-family: var(--mono);
letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px;
}
.impersonate-back {
color: #fff !important;
border-color: rgba(255,255,255,.4) !important;
background: transparent !important;
}
/* ── Breadcrumb + page header ──────────────────────────────── */
.breadcrumb {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
font-family: var(--mono);
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb .current { color: var(--text); }
.page-header {
display: flex;
/* flex-start so action buttons (e.g. Edit on the device /
company detail page) sit level with the h1 title at the top
of the row instead of dropping to the bottom when the title
block contains a subtitle + secondary action below it. */
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.page-header h1 {
font-family: var(--serif);
font-size: var(--fs-h1);
font-weight: 600;
color: var(--text);
letter-spacing: -0.03em;
line-height: 1.05;
font-variant-numeric: tabular-nums lining-nums;
}
.page-subtitle {
font-family: var(--sans);
font-size: var(--fs-body-sm);
color: var(--text-muted);
letter-spacing: 0;
text-transform: none;
margin-top: 8px;
}
/* ── Buttons ────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center; justify-content: center;
gap: 8px;
height: var(--btn-h);
padding: 0 var(--btn-px);
font-family: var(--sans);
font-size: 0.9375rem; /* 15px desktop, 14px mobile via cascade */
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
border: 1px solid transparent;
border-radius: 12px;
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
text-decoration: none;
white-space: nowrap;
}
@media (max-width: 767px) { .btn { font-size: 0.875rem; } }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(159,41,66,0.18); }
.btn-primary { background: var(--color-accent); color: #fff; border: none; border-radius: 12px; }
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn-secondary { background: #FFFFFF; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-secondary, #F1F4F8); color: var(--text); border-color: var(--border); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 0.8125rem; border-radius: 8px; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; }
.btn-ghost:hover { color: var(--text); background: var(--bg-secondary, #F1F4F8); }
/* ── Cards ─────────────────────────────────────────────────── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: var(--space-card);
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.card-header {
display: flex; align-items: baseline; justify-content: space-between;
margin: calc(var(--space-card) * -1) calc(var(--space-card) * -1) 20px;
padding: var(--space-card);
border-bottom: 1px solid var(--border);
gap: 12px; flex-wrap: wrap;
}
/* Let the title-block child of a card-header take up all the
available space (flex: 1 1 0) so any sibling .btn keeps its
natural width on the right. We use `flex-basis: 0` rather than
`auto` because flex-wrap collects items into a line based on
their basis, and `auto` resolves to max-content — when the
subtitle is long ("LANGUAGES: RUSSIAN, ENGLISH, ESTONIAN")
the basis exceeds the container before any shrinking happens
and the button drops to a second row. With basis 0 each item
starts at zero width, fits trivially, then flex-grow shares
the remaining space — title block grows to fill, button stays
at content width.
:first-child guards us against the materials cards (and any
future header with multiple wrapper divs), where a non-title
actions wrapper would otherwise also pick up flex:1 and end up
centred mid-row instead of anchoring to the right edge. */
.card-header > div:first-child:not(.card-title):not(.card-subtitle) {
min-width: 0;
flex: 1 1 0;
}
.card-header > .btn,
.card-header > a.btn,
.card-header > button.btn { flex-shrink: 0; }
/* Same trick for the page-level header on detail pages
(devices, companies). Title block takes all available width;
any action button on the right side keeps its natural size
and anchors to the corner. */
.page-header > div { min-width: 0; flex: 1 1 0; }
.page-header > .btn,
.page-header > a.btn,
.page-header > button.btn { flex-shrink: 0; }
.card-title {
font-family: var(--serif);
font-size: 17px; font-weight: 600;
color: var(--text); letter-spacing: -0.01em;
text-transform: none;
}
.card-subtitle {
font-family: var(--sans);
font-size: 12px; color: var(--text-muted);
margin-top: 4px;
letter-spacing: 0.04em;
text-transform: none;
}
/* ── Stats: monospace caps label, big serif number ─────────── */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin-bottom: 28px;
max-width: 720px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 20px;
box-shadow: var(--shadow-sm);
}
.stat-card-link {
display: block;
color: inherit;
text-decoration: none;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.stat-card-link:hover {
color: inherit;
border-color: var(--border);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-label {
font-family: var(--sans);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
}
.stat-value {
font-family: var(--serif);
font-size: var(--fs-stat); font-weight: 600;
color: var(--text); line-height: 1;
margin-top: 8px;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums lining-nums;
}
/* ── Form fields: plain labels above input, mono uppercase —
kept here because most pages reuse .form-group + .form-control.
Design-wise the serif-heavy pages use mono labels; others still
look fine with the current caps styling below. ──────────── */
/* ── Table ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
table { width: 100%; border-collapse: collapse; }
th {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .7px;
color: var(--text-muted);
padding: 9px 14px;
border-bottom: 1px solid var(--border);
text-align: left;
white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; color: var(--text-sub); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #faf9f7; }
td a { color: var(--text); font-weight: 500; }
td a:hover { color: var(--accent); }
/* ── Badges ── */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.perm-chip {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-sub);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .2px;
white-space: nowrap;
}
/* ── Team card on company-detail ── */
.team-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.team-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid var(--border-light);
background: var(--bg);
padding: 12px 14px;
}
.team-row.is-self {
border-color: var(--accent);
background: var(--bg-card);
}
.team-row-main {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.team-row-email {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 600;
font-size: 13.5px;
color: var(--text);
word-break: break-word;
}
.team-row-perms {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.team-self-tag {
display: inline-block;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
background: var(--accent);
color: #fff;
}
.team-role-pill {
display: inline-block;
padding: 1px 7px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .3px;
text-transform: uppercase;
border: 1px solid var(--border);
color: var(--text-sub);
}
.team-role-pill.team-role-owner { color: var(--accent); border-color: var(--accent); }
.team-role-pill.team-role-salon-admin { color: var(--accent); border-color: var(--accent); opacity: .85; }
.team-row-actions { flex-shrink: 0; }
.team-perm-cell {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
}
.team-perm-cell input { margin-top: 3px; }
@media (max-width: 540px) {
.team-row { flex-direction: column; align-items: stretch; gap: 10px; }
.team-row-actions .btn { width: 100%; }
}
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: #f3f2ef; color: var(--text-muted); }
/* ── Info Grid ── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
/* Two form-groups side by side on desktop, auto-stacked under ~520px
regardless of any global .info-grid responsive overrides. Flex-wrap
makes the breakpoint container-relative, so a narrow card collapses
to one column even when the viewport is wide. */
.form-row-pair {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
/* Match the .form-group bottom margin so the next form element
(e.g. Country under Website/Instagram on company-edit) doesn't
butt up against the row when the inner cells reset their own
margin-bottom to 0. */
margin-bottom: 18px;
}
.form-row-pair > .form-group {
flex: 1 1 240px;
min-width: 0;
margin-bottom: 0;
}
.info-item { min-width: 0; }
.info-item label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 3px; font-weight: 600; }
.info-item span { font-size: 13.5px; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
/* ── Contact Fields (clinical: mono uppercase type pill, thin border) ── */
.contact-section-label {
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 10px;
font-weight: 500;
}
.contact-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--border-light);
}
.contact-row:first-child { border-top: none; }
.contact-type-badge {
font-family: var(--sans);
font-size: 0.6875rem;
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
background: transparent;
border: 0;
padding: 0;
min-width: 64px;
text-align: left;
flex-shrink: 0;
}
.contact-value {
font-size: 13px; color: var(--text);
word-break: break-all;
overflow-wrap: anywhere;
min-width: 0;
}
/* ── Email subscriptions (clinical: dot + label / mono pill) ── */
.sub-list { display: flex; flex-direction: column; }
.sub-row {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 0;
border-top: 1px solid var(--border-light);
gap: 12px;
}
.sub-row:first-child { border-top: none; }
.sub-row-label {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--text);
min-width: 0;
}
.sub-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--text-faint);
flex-shrink: 0;
}
.sub-dot.is-on { background: var(--success); }
.sub-pill {
font-family: var(--sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
background: var(--bg-secondary);
border: 0;
border-radius: 999px;
padding: 5px 12px;
flex-shrink: 0;
line-height: 1.4;
}
.sub-pill.is-on {
color: var(--success);
background: var(--success-bg);
}
/* Button variant: re-assert font + padding because user-agent button
styles otherwise reset both. Same shape, soft hover transition. */
button.sub-pill {
cursor: pointer;
transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
button.sub-pill:hover:not(:disabled) { background: #E5E7EB; color: var(--text); }
button.sub-pill.is-on:hover:not(:disabled) { background: #D9EBE0; color: var(--success); }
button.sub-pill:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(159,41,66,0.18);
}
button.sub-pill:disabled { cursor: default; opacity: .6; }
/* ── Colleagues ── */
.colleague-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
}
.colleague-row:last-child { border-bottom: none; }
.colleague-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: #f0efeb;
color: var(--text-sub);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.colleague-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
/* ── Device Row (Dashboard) ── */
.device-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--border-light);
gap: 12px;
flex-wrap: wrap;
}
.device-row:last-child { border-bottom: none; }
.device-row-info { flex: 1; min-width: 0; overflow: hidden; }
.device-row-model { font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-word; }
.device-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; word-break: break-word; overflow-wrap: anywhere; }
.device-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
/* ── Device Cards (Equipment list) ── */
.device-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color .15s, box-shadow .15s;
box-shadow: var(--shadow-sm);
}
.device-card:hover { border-color: #d0cdc8; box-shadow: var(--shadow); }
.device-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.device-model { font-size: 14px; font-weight: 650; color: var(--text); }
.device-serial { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.device-meta { min-width: 0; }
.device-meta label { font-size: 11px; color: var(--text-muted); display: block; font-weight: 600; letter-spacing: .3px; }
.device-meta span { font-size: 12.5px; color: var(--text-sub); display: block; overflow-wrap: anywhere; word-break: break-word; }
.device-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Footer strip for device cards — margin-top:auto bottom-aligns it
inside the flex column so every "View details →" lines up across
the grid regardless of how many meta rows each card has. */
.device-card-actions {
display: flex;
justify-content: flex-end;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border-light);
}
/* ── Dashboard 2-column grid: left = contact info, right = linked
companies + email subscriptions stacked. Collapses to a single
column below 900px so the contact card keeps breathing room on
tablets / phones. ─────────────────────────────────────────── */
.dashboard-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 20px;
align-items: start;
}
.dashboard-main,
.dashboard-aside {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
/* The grid/aside use `gap` for spacing — suppress the default bottom
margin on cards inside it so we don't stack 16px + 20px of gap. */
.dashboard-grid > .card,
.dashboard-aside .card { margin-bottom: 0; }
@media (max-width: 900px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
/* ── Clickable row used in the right-column "Linked Companies" card.
Name + reg number on the left, subtle chevron on the right. ── */
.linked-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 24px;
border-top: 1px solid var(--border-light);
color: inherit;
text-decoration: none;
transition: background .12s;
min-width: 0;
}
.linked-row:first-child { border-top: none; }
.linked-row:hover { background: var(--bg); }
.linked-row-name { font-size: 13.5px; color: var(--text); font-weight: 500; word-break: break-word; }
.linked-row-meta { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.linked-row-arrow { color: var(--text-faint); flex-shrink: 0; }
/* ── Subtle "view details" link used on cards instead of a filled
button. Text + arrow, no chrome. ─────────────────────────── */
.link-action {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--text);
text-decoration: none;
letter-spacing: 0.04em;
padding: 4px 0;
transition: color .12s, gap .12s;
cursor: pointer;
background: transparent;
border: 0;
}
.link-action:hover { color: var(--accent); gap: 9px; }
/* ── "+N more" collapse used on company cards to cap their device
list at the first 3 rows. Clicking the pill reveals the rest.
Note: display is driven entirely by these rules — do NOT put
`display:flex` on .more-row inline, or the "is-extra hidden"
state gets overridden and every device ends up visible. */
.more-list {
border-top: 1px solid var(--border-light);
margin-top: 10px;
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.more-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
padding: 2px 0;
gap: 10px;
min-width: 0;
}
.more-row .more-row-text {
min-width: 0;
display: flex; flex-direction: column;
}
.more-row .more-row-label {
font-weight: 500; color: var(--text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Location line under the device name — lighter and smaller so it
reads as supporting detail, not another equally-weighted column. */
.more-row .more-row-sub {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.35;
margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.more-list .more-row.is-extra { display: none; }
.more-list.is-expanded .more-row.is-extra { display: flex; }
.more-list-btn {
align-self: flex-start;
margin-top: 4px;
background: transparent;
border: 0;
padding: 4px 0;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
cursor: pointer;
}
.more-list-btn:hover { color: var(--accent-hover); }
/* Default: "+N more" visible, "Show less" hidden; when the list is
expanded those flip. Both buttons share .js-more-toggle so the same
delegated click handler toggles the list either way. */
.more-list-btn[data-less] { display: none; }
.more-list.is-expanded .more-list-btn[data-more]{ display: none; }
.more-list.is-expanded .more-list-btn[data-less]{ display: inline-flex; }
/* ── Company card actions row: pinned to the bottom of the flex
column so every card's "View details →" sits on the same line
regardless of how many devices it has. ─────────────────── */
.company-actions {
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border-light);
display: flex;
justify-content: flex-end;
}
/* ── Lean device card (clinical "My Devices" grid: whole card is a link,
three sections divided by hairlines — identity / meta / Open →) ── */
.dev-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.dev-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.dev-card:hover {
border-color: var(--text);
transform: translateY(-1px);
}
.dev-card-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-light);
}
.dev-card-head .dev-name {
font-family: var(--sans);
font-size: 15px; font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.dev-card-head .dev-serial {
font-family: var(--mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.dev-card-body {
padding: 14px 20px;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.dev-card-body .kv-label {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--text-faint);
text-transform: uppercase;
margin-bottom: 2px;
}
.dev-card-body .kv-value {
font-size: 12.5px;
color: var(--text);
word-break: break-word;
overflow-wrap: anywhere;
}
.dev-card-foot {
padding: 12px 20px;
border-top: 1px solid var(--border-light);
display: flex;
justify-content: flex-end;
align-items: center;
}
.dev-card-foot .dev-open {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── Timeline ── */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 22px; }
.timeline-dot {
position: absolute; left: -26px; top: 5px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--bg-card);
border: 2px solid var(--border);
}
.timeline-dot.dot-engineer { border-color: var(--accent); }
.timeline-dot.dot-closed { border-color: var(--success); background: var(--success); }
.timeline-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-author { font-weight: 600; color: var(--text-sub); }
.timeline-msg { font-size: 13px; color: var(--text-sub); background: #faf9f7; border: 1px solid var(--border-light); border-radius: 7px; padding: 10px 14px; line-height: 1.65; }
/* ── Materials (legacy list, kept for fallback) ── */
.material-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid var(--border-light);
}
.material-item:last-child { border-bottom: none; }
.material-icon { color: var(--accent); flex-shrink: 0; opacity: .8; }
.material-title { font-size: 13px; color: var(--text); font-weight: 500; }
.material-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.material-action { margin-left: auto; flex-shrink: 0; }
/* ── SharePoint File Browser ── */
.sp-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 20px 10px;
font-size: 13px;
flex-wrap: wrap;
min-height: 32px;
}
.sp-bc-seg {
color: var(--accent);
cursor: pointer;
white-space: nowrap;
font-weight: 500;
}
.sp-bc-seg:hover { text-decoration: underline; }
.sp-bc-seg.current { color: var(--text); cursor: default; font-weight: 600; }
.sp-bc-sep { color: var(--text-muted); margin: 0 2px; }
.sp-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
}
.sp-sel-bar {
display: none;
align-items: center;
gap: 12px;
padding: 8px 20px;
background: var(--accent-light);
border-bottom: 1px solid var(--border-light);
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
.sp-sel-bar.active { display: flex; }
/* ── Grid View ── */
.sp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 2px;
padding: 10px;
}
.sp-grid-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px 10px;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: background 0.12s;
user-select: none;
}
.sp-grid-item:hover { background: rgba(0,0,0,.05); }
.sp-grid-item.sp-selected { background: rgba(168,36,32,.08); outline: 1.5px solid rgba(168,36,32,.25); outline-offset: -1.5px; border-radius: 8px; }
.sp-grid-thumb {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 8px;
}
.sp-grid-thumb img {
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 5px;
border: 1px solid var(--border-light);
}
.sp-grid-cb {
position: absolute;
top: -5px;
left: -5px;
z-index: 2;
opacity: 0;
transition: opacity 0.1s;
}
.sp-grid-item:hover .sp-grid-cb,
.sp-grid-item.sp-selected .sp-grid-cb { opacity: 1; }
.sp-grid-cb input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.sp-grid-name {
font-size: 12px;
text-align: center;
color: var(--text);
word-break: break-word;
line-height: 1.35;
max-width: 108px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.sp-grid-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-align: center; }
/* ── List View ── */
.sp-list { width: 100%; }
.sp-list-head,
.sp-list-row {
display: grid;
grid-template-columns: 36px 1fr 100px 80px 90px;
align-items: center;
padding: 7px 16px;
border-bottom: 1px solid var(--border-light);
}
.sp-list-head {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--text-muted);
font-weight: 600;
}
.sp-list-row {
font-size: 13px;
transition: background 0.1s;
cursor: default;
}
.sp-list-row:last-child { border-bottom: none; }
.sp-list-row:hover { background: rgba(0,0,0,.04); }
.sp-list-row.sp-selected { background: rgba(168,36,32,.07); }
.sp-list-name-cell {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
min-width: 0;
}
.sp-list-name-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list-date { color: var(--text-muted); font-size: 12px; }
.sp-list-size { color: var(--text-muted); font-size: 12px; }
.sp-list-acts { display: flex; justify-content: flex-end; }
.sp-list-check { display: flex; align-items: center; }
.sp-list-check input { accent-color: var(--accent); cursor: pointer; }
/* ── File type icons ── */
.sp-icon-wrap {
width: 52px;
height: 64px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.sp-icon-folder-svg { width: 62px; height: 52px; }
.sp-icon-file {
width: 42px;
height: 54px;
border-radius: 3px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
color: #fff;
position: relative;
}
.sp-icon-file::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 14px; height: 14px;
background: rgba(255,255,255,.3);
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.sp-icon-pdf { background: #e53935; }
.sp-icon-doc { background: #1976d2; }
.sp-icon-xls { background: #388e3c; }
.sp-icon-ppt { background: #e64a19; }
.sp-icon-img { background: #6a1b9a; }
.sp-icon-zip { background: #f57c00; }
.sp-icon-video { background: #c62828; }
.sp-icon-other { background: #607d8b; }
/* list view icon (smaller) */
.sp-list-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.sp-list-icon svg { width: 22px; height: 18px; }
.sp-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }
.sp-loading { text-align: center; padding: 48px 20px; color: var(--text-muted); }
@media (max-width: 600px) {
.sp-list-head,
.sp-list-row { grid-template-columns: 36px 1fr 80px; }
.sp-list-date,
.sp-list-acts { display: none; }
.sp-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
/* Drop the "Modified" column on the JS-rendered SharePoint file list —
filenames get clipped to 2-3 chars otherwise on a 390px phone.
The Modified is marked .sp-col-mod by the JS; the cells are
targeted by :nth-child(3) (the third column in the rendered table). */
.sp-file-table .sp-col-mod { width: 0 !important; }
.sp-file-table thead th:nth-child(3),
.sp-file-table tbody td:nth-child(3) { display: none !important; }
}
/* ── Forms (clinical style: mono uppercase labels, square inputs) ── */
.form-group { margin-bottom: 18px; }
.form-group label {
display: block;
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
height: var(--input-h);
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
padding: 0 16px;
font-family: var(--sans);
font-size: 0.9375rem;
outline: none;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
-webkit-appearance: none;
}
.form-control:hover { border-color: #D1D5DB; }
.form-control:focus { border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 4px rgba(159,41,66,0.18); }
.form-control::placeholder { color: var(--text-faint); }
/* Read-only value rendered in place of a form input. Deliberately looks
nothing like an editable field so the user doesn't try to click into it. */
.readonly-value {
display: block;
padding: 9px 12px;
background: transparent;
border: 0;
border-bottom: 1px dashed var(--border);
color: var(--text-sub);
font-size: 13px;
min-height: 20px;
line-height: 1.5;
cursor: default;
user-select: text;
}
.readonly-value.readonly-empty { color: var(--text-muted); font-style: italic; }
.readonly-list { margin: 0; padding: 0; list-style: none; }
.readonly-list li {
padding: 6px 0;
border-bottom: 1px dashed var(--border);
font-size: 13px;
color: var(--text-sub);
}
.readonly-list li:last-child { border-bottom: 0; }
.readonly-list li::before { content: "• "; color: var(--text-muted); }
textarea.form-control { height: auto; resize: vertical; min-height: 96px; padding: 14px 18px; line-height: 1.55; }
/* Native