) so navigation works.
Reset anchor defaults on .nav-item to match the original
styling.
============================================================ */
.nav-item, .nav-item:link, .nav-item:visited, .nav-item:hover, .nav-item:active {
text-decoration: none;
color: inherit;
}
/* ============================================================
RESPONSIVE — auto-collapse and mobile overlay
Breakpoints:
- Desktop (>=1200px): both sidebars expanded by default
- Tablet (900-1199px): right sidebar auto-collapsed to rail (via JS),
left becomes icon-only rail (existing rule at line ~562)
- Mobile (<900px): sidebars become slide-in overlays controlled by
hamburger (left) and context button (right) in the topbar.
============================================================ */
/* Mobile-only buttons — hidden on desktop, shown when body.has-mobile-shell */
.mobile-hamburger,
.mobile-context-btn {
display: none;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 9px;
height: 32px;
cursor: pointer;
color: var(--ink);
font-family: var(--sans);
}
.mobile-hamburger:hover,
.mobile-context-btn:hover {
background: var(--bone-3);
}
/* Backdrop element added by JS when overlay is open */
.mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 150;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.mobile-backdrop.active {
opacity: 1;
pointer-events: auto;
}
/* ============= Mobile (<900px) — overlay sidebars ============= */
@media (max-width: 899px) {
/* Layout collapses to single column when in mobile mode */
body.has-mobile-shell .layout {
grid-template-columns: 1fr !important;
grid-template-rows: auto;
}
/* Sidebars leave the grid flow and become fixed overlays */
body.has-mobile-shell .sidebar-left,
body.has-mobile-shell .sidebar-right {
position: fixed;
top: 0;
height: 100vh;
z-index: 200;
transition: transform 0.22s ease;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}
body.has-mobile-shell .sidebar-left {
left: 0;
width: 280px;
max-width: 85vw;
transform: translateX(-100%);
border-right: 1px solid var(--line);
}
body.has-mobile-shell .sidebar-right {
right: 0;
width: 320px;
max-width: 90vw;
transform: translateX(100%);
border-left: 1px solid var(--line);
}
body.has-mobile-shell .sidebar-left.mobile-open,
body.has-mobile-shell .sidebar-right.mobile-open {
transform: translateX(0);
}
/* Force full nav (labels visible) inside the mobile overlay,
overriding the 1200px icon-rail rule that would otherwise hide them */
body.has-mobile-shell .sidebar-left .nav-item-label,
body.has-mobile-shell .sidebar-left .nav-section-label,
body.has-mobile-shell .sidebar-left .role-badge,
body.has-mobile-shell .sidebar-left .sidebar-left-header > div:first-child span {
display: inline !important;
}
body.has-mobile-shell .sidebar-left .nav-item {
justify-content: flex-start !important;
padding: 9px 14px !important;
}
body.has-mobile-shell .sidebar-left .sidebar-left-header {
padding: 18px 16px 12px !important;
justify-content: flex-start !important;
flex-direction: row !important;
}
/* Show mobile-only topbar buttons */
body.has-mobile-shell .mobile-hamburger,
body.has-mobile-shell .mobile-context-btn {
display: inline-flex;
}
body.has-mobile-shell .mobile-context-btn {
margin-left: auto;
}
/* Hide desktop "toggle sidebars" control on mobile — drawers replace it.
(Other items in .topbar-controls, like the download button, stay visible.) */
body.has-mobile-shell .desktop-only-toggle {
display: none;
}
/* Topbar wraps on small screens; search drops to its own row */
body.has-mobile-shell .center-topbar {
flex-wrap: wrap;
padding: 10px 14px 12px;
gap: 10px;
}
body.has-mobile-shell .center-topbar h2 {
font-size: 17px;
}
body.has-mobile-shell .center-topbar-left {
min-width: 0;
}
body.has-mobile-shell .search-box {
flex: 1 0 100%;
width: auto;
order: 10;
}
/* Tighter content padding */
body.has-mobile-shell .center-scroll {
padding: 12px;
}
/* Lock body scroll while an overlay is open */
body.has-mobile-shell.scroll-locked {
overflow: hidden;
}
/* ============================================================
MOBILE BRAND BAR — visible only on mobile.
Shows ProofOfThings logo + name + role badge as a horizontal
band at the top of .center (above .center-topbar). On scroll
JS adds .scrolled — shrinks the bar and applies a translucent
blur backdrop, matching iOS-style condensed headers.
============================================================ */
body.has-mobile-shell .mobile-brand-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bone-2);
border-bottom: 1px solid var(--line-2);
color: var(--ink);
flex-shrink: 0;
z-index: 50;
/* Smooth transitions for the scroll-shrink effect */
transition: padding 0.18s ease, background 0.18s ease;
}
body.has-mobile-shell .mobile-brand-bar svg {
transition: width 0.18s ease, height 0.18s ease;
flex-shrink: 0;
}
body.has-mobile-shell .mobile-brand-name {
font-family: var(--sans);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.02em;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: font-size 0.18s ease;
}
body.has-mobile-shell .mobile-brand-bar .role-badge {
/* Reset margin-left:auto from the sidebar context — here we want
the badge sitting tight against the brand name, not pushed right. */
margin: 0;
flex-shrink: 0;
}
/* Scrolled state — applied by JS when .center-scroll has scrolled. */
body.has-mobile-shell .mobile-brand-bar.scrolled {
padding: 8px 16px;
background: color-mix(in oklch, var(--bone-2) 80%, transparent);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom-color: color-mix(in oklch, var(--line-2) 60%, transparent);
}
body.has-mobile-shell .mobile-brand-bar.scrolled svg {
width: 16px;
height: 16px;
}
body.has-mobile-shell .mobile-brand-bar.scrolled .mobile-brand-name {
font-size: 13px;
}
}
/* ============= Tablet (900-1199px) — right sidebar collapses to rail =============
The existing rule at the top of this stylesheet (~line 562) already handles
the left-side icon-rail behavior for <=1200px. We add JS-driven default-collapse
for the right side on first load (see admin-shell.js applyTabletDefaults).
Below: column overrides so tablet width has a coherent layout regardless of
whether the user has manually toggled state. */
@media (max-width: 1199px) and (min-width: 900px) {
.layout {
grid-template-columns: 60px 1fr 320px;
}
.layout.right-collapsed {
grid-template-columns: 60px 1fr 40px;
}
.layout.left-collapsed {
grid-template-columns: 60px 1fr 320px;
}
.layout.left-collapsed.right-collapsed {
grid-template-columns: 60px 1fr 40px;
}
}
/* ============= Mobile list-view layout (<600px) =============
The default 3-column grid for vendor/parent rows doesn't fit on phones.
Stack vertically: name on row 1, secondary metadata on row 2,
status/score align right.
This applies to any page using the list-view template (.vendor-list,
.vendor-card, .vendor-header, .product-row), regardless of the
domain entity (vendors, clients, users, etc.). */
@media (max-width: 599px) {
body.has-mobile-shell .vendor-list-header {
grid-template-columns: 1fr 32px;
padding: 10px 12px;
gap: 8px;
}
body.has-mobile-shell .vendor-list-header-cell:nth-child(2) {
/* Secondary column header is implied by the stacked subrow below */
display: none;
}
body.has-mobile-shell .vendor-header {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
padding: 12px 14px;
gap: 2px 12px;
}
body.has-mobile-shell .vendor-header > .vendor-name {
grid-column: 1;
grid-row: 1;
}
body.has-mobile-shell .vendor-header > div:nth-child(2) {
grid-column: 1;
grid-row: 2;
font-size: 11px;
}
body.has-mobile-shell .vendor-header > div:nth-child(3) {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
body.has-mobile-shell .product-row {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
padding: 10px 14px 10px 24px;
gap: 2px 10px;
}
body.has-mobile-shell .product-row > .product-name {
grid-column: 1;
grid-row: 1;
}
body.has-mobile-shell .product-row > span:nth-child(2) {
grid-column: 1;
grid-row: 2;
font-size: 11px;
color: var(--ink-3);
}
body.has-mobile-shell .product-row > .product-status {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
body.has-mobile-shell .product-row > span:nth-child(4) {
grid-column: 2;
grid-row: 2;
text-align: right;
font-size: 11px;
color: var(--ink-3);
}
}
/* ============================================================
RIGHT SIDEBAR COLLAPSED RAIL
The right sidebar has two visual states controlled by a single
class on the element: .collapsed.
Default (no .collapsed class):
- Header, content, and any footer render normally.
- The collapsed rail is hidden.
When .sidebar-right.collapsed is set:
- Header and content are hidden.
- The collapsed rail is shown — a thin column with an expand button.
This class is toggled by:
- User clicking the collapse/expand button on the sidebar.
- JS auto-applying it at tablet widths (900–1199px) on first load
and on resize, unless the user has explicitly overridden via click.
============================================================ */
/* Default: rail hidden, regular content shown. */
.sidebar-right-collapsed-rail {
display: none;
}
/* Collapsed state: hide content, show rail. */
.sidebar-right.collapsed > .sidebar-right-header,
.sidebar-right.collapsed > .sidebar-right-content {
display: none;
}
.sidebar-right.collapsed > .sidebar-right-collapsed-rail {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 14px 6px;
flex: 1;
}
.sidebar-right.collapsed {
overflow: hidden;
padding: 0;
}
/* The expand button inside the rail — match the existing collapse-btn
styling so toggling collapse/expand looks consistent. */
.sidebar-right-collapsed-rail .collapse-btn {
margin: 0;
}
/* ============================================================
DETAIL PAGE COMPONENTS (cross-page, cross-role)
Patterns used by detail pages (client detail, vendor detail,
questionnaire detail, etc). Designed once, reused everywhere.
============================================================ */
/* --- Editable form (page-level edit mode) ---
Wrapper class .edit-form holds field definitions. Adding .editing
swaps read-only field values for inputs and Edit-button for Save/Cancel.
This is the canonical editable-record pattern — use it on any detail
page where an admin can edit the record's metadata. */
.edit-form .field-input,
.edit-form .field-textarea,
.edit-form .field-select { display: none; }
.edit-form.editing .field-value { display: none; }
.edit-form.editing .field-input,
.edit-form.editing .field-textarea,
.edit-form.editing .field-select { display: block; }
.edit-form .edit-cancel,
.edit-form .edit-save { display: none; }
.edit-form.editing .edit-toggle { display: none; }
.edit-form.editing .edit-cancel,
.edit-form.editing .edit-save { display: inline-flex; }
.edit-form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding: 18px;
}
.edit-form-grid .field.span-2 { grid-column: span 2; }
.edit-form-grid .field.span-3 { grid-column: span 3; }
.field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.field-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 600;
}
.field-value {
font-size: 13px;
color: var(--ink);
min-height: 32px;
padding: 6px 0;
line-height: 1.4;
word-break: break-word;
}
.field-value.muted { color: var(--ink-4); font-style: italic; }
.field-value.mono { font-family: var(--mono); font-size: 12px; }
.field-input,
.field-select {
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bone);
width: 100%;
}
.field-input:focus,
.field-select:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px var(--indigo-soft);
}
.field-textarea {
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bone);
width: 100%;
min-height: 70px;
resize: vertical;
}
/* --- Client summary bar (6-cell stats strip) ---
Generic per-record stats display. Use for client detail, vendor detail, etc. */
.client-summary {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
background: var(--bone-2);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 18px;
overflow: hidden;
}
.summary-item {
padding: 14px 16px;
border-right: 1px solid var(--line-2);
}
.summary-item:last-child { border-right: none; }
.summary-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 6px;
}
.summary-value {
font-size: 18px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
}
.summary-unit {
font-size: 12px;
color: var(--ink-4);
font-weight: 500;
margin-left: 2px;
}
/* --- Advisory banner (generic — admin notice, warning, etc.) --- */
.advisory-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px solid color-mix(in oklch, var(--amber) 35%, transparent);
background: var(--amber-soft);
border-radius: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.advisory-banner.info {
border-color: color-mix(in oklch, var(--indigo) 35%, transparent);
background: var(--indigo-soft);
}
.advisory-icon {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--amber-soft);
display: flex;
align-items: center;
justify-content: center;
color: color-mix(in oklch, var(--amber) 60%, var(--ink));
flex-shrink: 0;
}
.advisory-banner.info .advisory-icon {
background: var(--indigo-soft);
color: var(--indigo);
}
.advisory-title {
font-size: 13.5px;
font-weight: 500;
color: color-mix(in oklch, var(--amber) 80%, var(--ink));
}
.advisory-banner.info .advisory-title { color: var(--indigo); }
.advisory-subtitle {
font-size: 12px;
color: color-mix(in oklch, var(--amber) 45%, var(--ink-3));
margin-top: 2px;
}
.advisory-banner.info .advisory-subtitle { color: var(--ink-3); }
/* --- Flash messages --- */
.flash-msg {
margin: 1rem; padding: 10px 14px; border-radius: 8px;
font-size: 13px; line-height: 1.5;
border: 1px solid transparent;
}
.flash-msg.success {
background: var(--green-soft);
color: color-mix(in oklch, var(--green) 80%, var(--ink));
border-color: color-mix(in oklch, var(--green) 35%, transparent);
}
.flash-msg.error {
background: var(--red-soft);
color: color-mix(in oklch, var(--red) 80%, var(--ink));
border-color: color-mix(in oklch, var(--red) 35%, transparent);
}
/* --- Detail section card --- */
.detail-section {
border: 1px solid var(--line);
background: var(--bone-2);
/* Paint background only inside the border. Default `border-box` lets
background bleed under the 1px border, which on some renderers shows
a faint sharp corner just past the rounded curve. */
background-clip: padding-box;
border-radius: 10px;
overflow: hidden;
margin-bottom: 18px;
}
.section-header {
display: flex;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--line-2);
gap: 14px;
}
.section-title {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
}
.section-subtitle {
font-size: 11.5px;
color: var(--ink-4);
margin-top: 3px;
}
.section-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.section-link {
margin-left: auto;
font-size: 12px;
color: var(--indigo);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
}
.section-link:hover { color: color-mix(in oklch, var(--indigo) 80%, var(--ink)); }
/* --- Two-column layout (used inside detail pages) ---
margin-bottom matches .detail-section so vertical rhythm stays
consistent whether sections are alone or paired in a two-col. */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.two-col .detail-section { margin-bottom: 0; }
/* --- Table (lightweight, in-section table) ---
NEVER use horizontal scrolling. Cells shrink with the container via
min-width: 0 on grid items; long text truncates with ellipsis. At mobile
widths, .table-row stacks vertically (see responsive overrides below). */
.table {
/* Column template — every header cell and every row
inherits from this variable, so adding/removing a column is a
one-line change on the parent element. Override per-table:
*/
--table-cols: minmax(0, 1fr); display: flex; flex-direction: column; }
.table-header,
.table-row { /* width: container — no min-width forcing overflow */ }
.table-header {
display: grid;
padding: 10px 18px;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-4);
text-transform: uppercase;
font-family: var(--mono);
border-bottom: 1px solid var(--line-2);
font-weight: 600;
}
.table-row {
display: grid;
padding: 12px 18px;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--line-2);
transition: background 0.12s;
font-size: 13px;
}
.table-row.clickable { cursor: pointer; }
.table-row.clickable:hover { background: var(--bone-3); }
.table-row:last-child { border-bottom: none; }
.table-row.compact { padding: 10px 18px; }
/* Allow grid items to shrink below their content width — required so cells
don't force the row wider than the container. Pair with text truncation
on long-text cells (.app-name, .rec-name, etc). */
.table-row > *,
.table-header > * { min-width: 0; }
/* Cell variants */
.cell-app { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-swatch {
width: 24px; height: 24px; border-radius: 5px;
opacity: 0.55; flex-shrink: 0;
}
.cell-app > div { min-width: 0; flex: 1; }
.app-name {
font-size: 13px; color: var(--ink); font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-meta {
font-size: 10.5px; color: var(--ink-4); font-family: var(--mono);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-mono { font-size: 12px; color: var(--ink-2); font-family: var(--mono); text-align: right; }
.cell-ink3 { color: var(--ink-3); }
.cell-amber { color: color-mix(in oklch, var(--amber) 60%, var(--ink)); }
.cell-red { color: var(--red); }
.cell-util { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.util-bar {
width: 46px; height: 4px;
background: var(--line-2);
border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.util-fill { height: 100%; border-radius: 2px; }
.util-green { background: var(--green); }
.util-amber { background: var(--amber); }
.util-red { background: var(--red); }
.util-indigo { background: var(--indigo); }
/* --- Badge (re-usable status pill, separate from .product-status) --- */
.badge {
display: inline-block;
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.02em;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-amber { background: var(--amber-soft); color: color-mix(in oklch, var(--amber) 60%, var(--ink)); }
.badge-indigo { background: var(--indigo-soft); color: var(--indigo); }
.badge-neutral { background: var(--bone-3); color: var(--ink-3); }
.chev { font-size: 16px; color: var(--ink-4); line-height: 1; }
/* --- Recommendations / surveys / generic ranked list --- */
.rec-list { display: flex; flex-direction: column; }
.rec-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-2);
transition: background 0.12s;
}
.rec-row.clickable { cursor: pointer; }
.rec-row.clickable:hover { background: var(--bone-3); }
.rec-row:last-child { border-bottom: none; }
.rec-rank {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-4);
width: 20px;
text-align: center;
}
.rec-main { flex: 1; min-width: 0; }
.rec-name {
font-size: 13px; font-weight: 500; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-meta {
font-size: 11px; color: var(--ink-4); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-score { font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 600; }
.score-num { color: var(--indigo); }
.score-max { color: var(--ink-4); font-weight: 400; font-size: 11px; }
/* --- Activity log --- */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-2);
align-items: flex-start;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
width: 26px; height: 26px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.activity-indigo { background: var(--indigo-soft); color: var(--indigo); }
.activity-amber { background: var(--amber-soft); color: color-mix(in oklch, var(--amber) 60%, var(--ink)); }
.activity-green { background: var(--green-soft); color: var(--green); }
.activity-neutral { background: var(--bone-3); color: var(--ink-3); }
.activity-body {
font-size: 12.5px;
line-height: 1.45;
color: var(--ink-2);
}
.activity-actor { font-weight: 500; color: var(--ink); }
/* --- Buttons --- */
.btn {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.12s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--bone-3); }
.btn-danger { background: var(--red-soft); color: var(--red); border-color: color-mix(in oklch, var(--red) 30%, transparent); }
.btn-danger:hover { background: color-mix(in oklch, var(--red) 12%, var(--red-soft)); }
/* --- Toggle switch (for anonymization rows etc.) --- */
.toggle {
position: relative;
display: inline-block;
width: 32px;
height: 18px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle .slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--line);
border-radius: 999px;
transition: 0.18s;
}
.toggle .slider::before {
content: '';
position: absolute;
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background: white;
border-radius: 50%;
transition: 0.18s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle input:checked + .slider { background: var(--indigo); }
.toggle input:checked + .slider::before { transform: translateX(14px); }
/* --- Detail-page responsive overrides --- */
@media (max-width: 1100px) {
.two-col { grid-template-columns: 1fr; }
.client-summary { grid-template-columns: repeat(3, 1fr); }
.summary-item:nth-child(3n) { border-right: none; }
.summary-item:nth-child(-n+3) { border-bottom: 1px solid var(--line-2); }
.edit-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
body.has-mobile-shell .client-summary { grid-template-columns: repeat(2, 1fr); }
body.has-mobile-shell .summary-item { border-right: 1px solid var(--line-2) !important; border-bottom: 1px solid var(--line-2); }
body.has-mobile-shell .summary-item:nth-child(2n) { border-right: none !important; }
body.has-mobile-shell .summary-item:nth-last-child(-n+2) { border-bottom: none; }
body.has-mobile-shell .edit-form-grid { grid-template-columns: 1fr; padding: 14px; }
body.has-mobile-shell .advisory-banner { flex-direction: column; align-items: flex-start; }
body.has-mobile-shell .section-header { padding: 12px 14px; }
body.has-mobile-shell .detail-section { border-radius: 8px; }
/* --- Tables on mobile: STACK rows vertically (NEVER scroll horizontally).
The header is hidden; each cell becomes its own row inside the .table-row.
The primary cell (.cell-app, vendor name) takes full width; secondary cells
(badges, scores, toggles) wrap below in a tight row. */
body.has-mobile-shell .table-header { display: none; }
body.has-mobile-shell .table-row {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 14px 16px !important;
grid-template-columns: none !important;
}
body.has-mobile-shell .table-row.compact {
padding: 12px 14px !important;
}
body.has-mobile-shell .table-row > .cell-app {
flex: 1 1 100%;
}
/* All secondary cells become inline auto-width pieces */
body.has-mobile-shell .table-row > div:not(.cell-app) {
flex: 0 0 auto;
text-align: left !important;
}
/* Hide the trailing chevron on mobile — saves space, tap-target is the row */
body.has-mobile-shell .table-row > div > .chev {
display: none;
}
}
/* ============================================================
EDITABLE SUMMARY STRIP (top row of an .edit-form)
Inputs styled to match .summary-value's big-bold display so
the visual stays clean when toggling between view and edit.
============================================================ */
.summary-input,
.summary-select {
display: none;
font-family: var(--sans);
font-size: 18px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
border: none;
border-bottom: 1.5px solid transparent;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
outline: none;
appearance: none;
line-height: 1.3;
}
.summary-input:focus,
.summary-select:focus {
border-bottom-color: var(--indigo);
}
.summary-select {
background-image: url("data:image/svg+xml;utf8,
");
background-position: right 0 center;
background-repeat: no-repeat;
background-size: 10px 10px;
padding-right: 14px;
cursor: pointer;
}
.edit-form.editing .summary-item.editable .summary-value { display: none; }
.edit-form.editing .summary-item.editable .summary-input,
.edit-form.editing .summary-item.editable .summary-select { display: block; }
/* Read-only cells get muted in edit mode to make editable cells stand out */
.edit-form.editing .summary-item:not(.editable) .summary-value { opacity: 0.55; }
/* Nested .client-summary inside an .edit-form — strip its own border/radius
so it sits flush against the section-header above. Use descendant
combinator (not direct child) because new forms wrap the summary inside
a .detail-section card. */
.edit-form .client-summary {
border: none;
border-radius: 0;
margin-bottom: 0;
}
/* ============================================================
EXPAND LINK (text-link variant of "Show more details")
Lives in the section-actions row alongside the icon buttons.
Matches .section-link styling but with a rotating chevron.
============================================================ */
.expand-link {
cursor: pointer;
margin-left: 0; /* not auto — we share the actions row with icon buttons */
}
.expand-link svg {
transition: transform 0.18s;
}
.expand-link.expanded svg {
transform: rotate(180deg);
}
/* Hide the expand link in edit mode — panel is auto-open. */
.edit-form.editing .expand-link { display: none; }
/* ============================================================
EXPANDED PANEL — wrapper around the per-section cards. Used to be
an inner panel inside the main form card (with its own background
+ top border), now it's just a vertical-stack wrapper that lives
OUTSIDE the main card. No background — each .form-section-card
paints its own — and no border. Display rules (flex stack, gap)
are set further down in the section-cards block.
============================================================ */
.form-expanded[hidden] { display: none; }
.edit-form.editing .form-expanded { display: flex; }
/* ============================================================
ICON BUTTONS in section-actions (Edit / Save / Cancel)
Same display behaviour as the previous text buttons:
Edit visible in view mode, Save+Cancel visible in edit mode.
============================================================ */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.edit-form .edit-cancel,
.edit-form .edit-save { display: none; }
.edit-form.editing .edit-toggle { display: none; }
.edit-form.editing .edit-cancel,
.edit-form.editing .edit-save { display: inline-flex; }
/* Save icon gets a subtle indigo tint to read as "primary action" */
.icon-btn.edit-save { color: var(--indigo); }
.icon-btn.edit-save:hover { background: var(--indigo-soft); color: var(--indigo); }
.icon-btn.edit-cancel:hover { background: var(--bone-3); color: var(--ink); }
/* ============================================================
FILTER POPOVER + ACTIVE-FILTER CHIPS (cross-page, cross-role)
A generic, anchored popover that the page can attach to any
"Filter" button. Markup contract:
Chips container:
Each row to filter:
Multi-value: separate values with spaces, e.g. data-industry="banking treasury".
============================================================ */
.filter-popover-anchor {
position: relative;
display: inline-flex;
}
.filter-popover {
/* position: fixed (not absolute) so the popover escapes the parent
.detail-section's overflow:hidden — popovers must float above all
page content regardless of where the trigger lives in the DOM.
JS sets the inline top/left/bottom when opening on desktop; on mobile,
the @media rule below pins it to the bottom edge with !important. */
position: fixed;
min-width: 280px;
max-width: 360px;
/* If popover content is taller than the viewport, scroll inside the
popover instead of overflowing off-screen. */
max-height: calc(100vh - 20px);
overflow-y: auto;
background: var(--bone);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
padding: 14px 16px;
z-index: 200;
display: none;
}
.filter-popover.open { display: block; }
/* --- Filter search input (a recognized filter type alongside checkboxes) --- */
.filter-search { margin-bottom: 14px; }
.filter-search input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 13px;
font-family: var(--sans);
background: var(--bone-2);
color: var(--ink);
box-sizing: border-box;
}
.filter-search input::placeholder { color: var(--ink-4); }
.filter-search input:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px var(--indigo-soft);
background: var(--bone);
}
.filter-popover-header {
display: flex;
align-items: center;
margin-bottom: 12px;
gap: 12px;
}
.filter-popover-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.filter-popover-clear {
margin-left: auto;
font-size: 11px;
color: var(--indigo);
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: var(--sans);
font-weight: 500;
}
.filter-popover-clear:hover { text-decoration: underline; }
.filter-group { margin-bottom: 14px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.filter-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-option {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--ink);
cursor: pointer;
padding: 4px 0;
}
.filter-option input { margin: 0; cursor: pointer; }
/* Filter-count badge in the trigger button (hidden until JS sets a value) */
.filter-count {
display: none;
background: var(--indigo);
color: var(--bone);
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 999px;
margin-left: 4px;
line-height: 1.5;
}
.filter-count.active { display: inline-block; }
/* --- Filter trigger (icon-only button on lists) ---
Required on every list/table that supports filtering. Two icons sit inside;
CSS swaps them based on .has-active (toggled by JS in applyFilters when any
filter is active). The "active" icon is the same funnel filled in indigo,
making it instantly clear that a filter is applied without needing text or
a count badge (active filters are also shown as chips below the header). */
.filter-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 6px;
}
.filter-trigger .icon-active { display: none; }
.filter-trigger.has-active .icon-empty { display: none; }
.filter-trigger.has-active .icon-active { display: inline-block; }
.filter-trigger.has-active {
color: var(--indigo);
background: var(--indigo-soft);
}
.filter-trigger.has-active:hover {
background: color-mix(in oklch, var(--indigo-soft) 80%, var(--indigo) 15%);
color: var(--indigo);
}
/* ============================================================
ACTIVE FILTER CHIPS (sits between section-header and the list)
Auto-hides when empty via .filter-chips:empty.
============================================================ */
.filter-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-bottom: 1px solid var(--line-2);
background: var(--bone);
}
.filter-chips:empty { display: none; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
background: var(--indigo-soft);
color: var(--indigo);
padding: 3px 4px 3px 9px;
border-radius: 4px;
font-weight: 500;
}
.filter-chip-remove {
background: none;
border: none;
cursor: pointer;
color: inherit;
font-size: 14px;
padding: 0 5px;
line-height: 1;
border-radius: 3px;
font-family: var(--sans);
}
.filter-chip-remove:hover {
background: rgba(255, 255, 255, 0.6);
}
.filter-chip-clear-all {
font-size: 11px;
color: var(--ink-3);
background: none;
border: none;
cursor: pointer;
padding: 3px 6px;
margin-left: auto;
font-family: var(--sans);
}
.filter-chip-clear-all:hover { color: var(--ink); }
/* ============================================================
Mobile: filter popover becomes a bottom sheet
============================================================ */
@media (max-width: 899px) {
body.has-mobile-shell .filter-popover.open {
/* Override any inline top/left/right that desktop JS may have set —
mobile is always anchored to the bottom edge as a sheet. */
position: fixed !important;
inset: auto 0 0 0 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-radius: 14px 14px 0 0;
padding: 18px 18px 24px;
z-index: 220;
box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.18);
border-bottom: none;
}
/* Larger tap targets on the bottom sheet */
body.has-mobile-shell .filter-popover.open .filter-option {
padding: 8px 0;
font-size: 14px;
}
body.has-mobile-shell .filter-chips {
padding: 10px 14px;
}
}
/* ============================================================
RIGHT-RAIL LIST PATTERN
============================================================
Unified pattern for any list-like content in the right rail (Team
members, recent activity, watchlists, related items, etc).
Two right-rail-only behaviors that don't apply to main-content lists:
1. Lists with > 4 items collapse everything past the first 4 into
a hidden .rail-overflow region, exposed via an in-place expand
toggle. The list never drills to a separate page.
2. The filter icon and chip strip live in the same compact rail
context. CSS overrides shrink the chip-strip padding for the
narrower rail width.
Markup contract:
...
... (first 4 items always visible)
...
... (items 5+ hidden until expand or filter)
============================================================ */
.rail-section {
padding: 12px 14px;
background: var(--bone);
border: 1px solid var(--line);
border-radius: 8px;
}
.rail-section + .rail-section { margin-top: 14px; }
.rail-section-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.rail-section-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 600;
flex: 1;
min-width: 0;
}
.rail-section-actions {
display: flex;
gap: 2px;
align-items: center;
flex-shrink: 0;
}
/* The actual list — column flex container of items. */
.rail-list {
display: flex;
flex-direction: column;
}
.rail-list-item {
display: flex;
gap: 8px;
align-items: center;
padding: 6px 0;
min-width: 0;
}
/* Items past the first 4 carry .rail-overflow and stay hidden by default. */
.rail-list-item.rail-overflow { display: none; }
/* Two ways an overflow item becomes visible:
(a) user clicked the expand toggle → .rail-list.expanded
(b) a filter is active → .rail-list.filtering (set by applyFiltersToRows)
The "filtering" override exists so search/checkbox filters can match
against overflow items even when the list is in its collapsed state. */
.rail-list.expanded .rail-list-item.rail-overflow { display: flex; }
.rail-list.filtering .rail-list-item.rail-overflow { display: flex; }
.rail-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
flex: 0 0 auto;
}
.rail-list-item-text { flex: 1; min-width: 0; }
.rail-list-item-name {
font-size: 12px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rail-list-item-meta {
font-size: 10.5px;
color: var(--ink-4);
font-family: var(--mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* In-place expand toggle. Replaces any "View all X →" link on rail-lists. */
.rail-expand-toggle {
font-size: 11px;
color: var(--indigo);
background: none;
border: none;
padding: 8px 0 0 0;
margin: 0;
cursor: pointer;
font-family: var(--sans);
font-weight: 500;
text-align: left;
display: inline-flex;
align-items: center;
gap: 4px;
}
.rail-expand-toggle:hover { text-decoration: underline; }
/* Filter chips inside a rail section need slimmer padding and no border
since the rail-section already provides its own visual boundary. */
.rail-section .filter-chips {
padding: 0 0 8px 0;
background: transparent;
border-bottom: none;
}
/* === Column-aligned table: header + rows share the same grid template ===
Headers and rows use `var(--table-cols)`. The variable is set ONCE on the
.table parent. Any inline grid-template-columns on individual rows is
redundant and should be removed during refactor. */
.table-header,
.table-row {
grid-template-columns: var(--table-cols);
}
/* Row progress bar — full-width visual under questionnaire rows. Sits
inside the .table-row as a grid-column: 1 / -1 child so it sorts with
its parent row when the user picks a sort order. */
.row-progress {
grid-column: 1 / -1;
height: 4px;
background: var(--bone-3);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.row-progress-fill {
height: 100%;
border-radius: 2px;
transition: width 0.2s;
}
.row-progress-fill.success { background: var(--green); }
.row-progress-fill.indigo { background: var(--indigo); }
.row-progress-fill.warning { background: var(--amber); }
.row-progress-fill.empty { background: transparent; }
/* Rank cell — small grey number for Top-matches-style ranked lists */
.cell-rank {
font-size: 11.5px;
color: var(--ink-3);
font-family: var(--mono);
text-align: center;
}
/* Activity cell — avatar/dot + body text combined. Sits in a .table-row
where the avatar is its own column (28px) and the body wraps freely. */
.cell-activity-icon {
width: 22px;
height: 22px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cell-activity-body {
font-size: 12.5px;
color: var(--ink);
line-height: 1.45;
}
.cell-activity-body .actor { font-weight: 500; }
.cell-activity-body .meta { color: var(--ink-3); }
.cell-activity-time {
font-size: 11px;
color: var(--ink-4);
font-family: var(--mono);
text-align: right;
white-space: nowrap;
}
/* === Sort trigger button (icon-only, mirrors .filter-trigger) ===
Same styling pattern — outlined icon by default, filled when sort is
applied (anything other than the default sort). Toggled via .has-active
by applySort() in app-shell.js. */
.sort-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 6px;
}
.sort-trigger .icon-active { display: none; }
.sort-trigger.has-active .icon-empty { display: none; }
.sort-trigger.has-active .icon-active { display: inline-block; }
.sort-trigger.has-active {
color: var(--indigo);
background: var(--indigo-soft);
}
.sort-trigger.has-active:hover {
background: color-mix(in oklch, var(--indigo-soft) 80%, var(--indigo) 15%);
color: var(--indigo);
}
/* --- Inline progress cell ---------------------------------------------
Compact horizontal bar + percent label, sized to fit inside a single
table cell (NOT a full-width row-progress). Used for columns like
"Seats used" or "Coverage %" where each row shows its own value.
Color modifiers — pick by VALUE THRESHOLD, never by row status:
.cell-progress-fill.success >=70% (green)
.cell-progress-fill.warning 40-69% (amber)
.cell-progress-fill.danger <40% (red)
The bar's color expresses how the value reads on its own. A row may
have a separate status badge (keep/review/cut) that depends on multiple
factors — never use the row's status to drive the bar color, since a
row can be "review" overall while still having healthy utilization.
---------------------------------------------------------------------- */
.cell-progress {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
width: 100%;
}
.cell-progress-bar {
display: block;
flex: 1;
min-width: 0;
height: 4px;
background: var(--bone-3);
border-radius: 2px;
overflow: hidden;
}
.cell-progress-fill {
display: block;
height: 100%;
border-radius: 2px;
}
.cell-progress-fill.success { background: var(--green); }
.cell-progress-fill.warning { background: var(--amber); }
.cell-progress-fill.danger { background: var(--red); }
.cell-progress-label {
font-size: 12px;
color: var(--ink);
font-family: var(--mono);
white-space: nowrap;
flex-shrink: 0;
}
/* === AI Results grid (3-column card grid for KPI/insight tiles) === */
.ai-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.ai-card {
padding: 16px 18px;
border-right: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
cursor: pointer;
transition: background 0.12s;
}
.ai-card:hover { background: var(--bone-3); }
.ai-card:nth-child(3n) { border-right: none; }
.ai-card:nth-last-child(-n+3) { border-bottom: none; }
.ai-card-label {
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 600;
font-family: var(--mono);
}
.ai-card-value {
font-size: 28px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.02em;
margin-top: 8px;
}
.ai-card-sub {
font-size: 11.5px;
color: var(--ink-3);
margin-top: 4px;
line-height: 1.45;
}
.ai-card-action {
font-size: 11.5px;
color: var(--indigo);
margin-top: 10px;
font-weight: 500;
}
/* Below 700px: stack to 2 columns to keep cards readable */
@media (max-width: 700px) {
.ai-grid { grid-template-columns: repeat(2, 1fr); }
.ai-card:nth-child(3n) { border-right: 1px solid var(--line-2); }
.ai-card:nth-child(2n) { border-right: none; }
.ai-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-2); }
.ai-card:nth-last-child(-n+2) { border-bottom: none; }
}
/* === Live-indicator pill with pulsing dot (used in section-actions) === */
.pill-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--green);
padding: 2px 8px;
background: var(--green-soft);
border-radius: 999px;
font-weight: 500;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--green);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* === Infographic variant: full-width edge-to-edge container ===
Used for sections that contain SVG charts, narrative typography, and
large display elements. Removes the inner padding of .detail-section
so the infographic can manage its own layout. */
.detail-section.infographic {
padding: 0;
overflow: hidden;
}
/* ============================================================
AUTH SHELL — for logged-out pages (login, forgot-password,
reset-password, accept-invite, magic-link-sent, logout)
Two-column layout: left brand panel (bone-2) with serif tagline,
right form panel (bone) with the form card.
Collapses to single column (right only) under 768px.
============================================================ */
body.auth-shell {
margin: 0;
background: var(--bone);
min-height: 100vh;
font-family: var(--sans);
}
/* Two-column container */
.auth-container {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
gap: 0;
}
/* ----- LEFT PANEL ---------------------------------------------- */
/* Brand panel: logo top, serif tagline middle, footer bottom.
Keeps a consistent "you're entering ProofOfThings" feeling
across all auth flows. The headline copy varies per page. */
.auth-left {
background: var(--bone-2);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 48px;
color: var(--ink);
border-right: 1px solid var(--line);
}
.auth-left-header {
display: flex;
align-items: center;
gap: 12px;
}
.auth-logo-icon {
/* Holds the ProofOfThings brand-mark SVG. SVG uses currentColor so we just
set the color here. Transparent background — the bars themselves are the mark. */
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
}
.auth-logo-text {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.auth-left-content {
flex: 1;
display: flex;
align-items: center;
margin: 32px 0;
}
.auth-left-message {
max-width: 360px;
}
.auth-left-message h1 {
/* Serif headline, larger and tighter. Variable per page. */
font-family: var(--serif);
font-size: 42px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 18px 0;
}
.auth-left-message p {
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
.auth-left-footer {
font-size: 12.5px;
color: var(--ink-3);
line-height: 1.5;
}
.auth-left-footer a {
color: var(--indigo);
text-decoration: none;
font-weight: 500;
}
.auth-left-footer a:hover { text-decoration: underline; }
/* ----- RIGHT PANEL --------------------------------------------- */
/* Form panel. Card lives centered vertically; same width across all
auth pages so visual rhythm doesn't shift between flows. */
.auth-right {
background: var(--bone);
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px;
}
.auth-form-wrapper {
max-width: 380px;
margin: 0 auto;
width: 100%;
}
.auth-form-header {
margin-bottom: 28px;
}
.auth-eyebrow {
/* Optional small uppercase label above the title (e.g., "You've been invited") */
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.auth-form-header h2 {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 8px 0;
line-height: 1.2;
}
.auth-form-header p {
font-size: 13.5px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.auth-form-header p strong { color: var(--ink); font-weight: 500; }
/* Form fields */
.auth-field {
margin-bottom: 18px;
}
.auth-field-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.auth-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--ink);
margin-bottom: 8px;
}
/* When label is in a flex row with a side-link, kill the bottom margin */
.auth-field-row .auth-label { margin-bottom: 0; }
.auth-field-link {
font-size: 12.5px;
color: var(--indigo);
text-decoration: none;
font-weight: 500;
}
.auth-field-link:hover { text-decoration: underline; }
.auth-input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 14px;
background: var(--bone);
color: var(--ink);
transition: border-color 0.12s, box-shadow 0.12s;
box-sizing: border-box;
}
.auth-input:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px var(--indigo-soft);
}
.auth-input::placeholder { color: var(--ink-4); }
.auth-input.has-error {
border-color: var(--red);
background: var(--red-soft);
}
.auth-input.has-error:focus {
box-shadow: 0 0 0 3px color-mix(in oklch, var(--red) 18%, transparent);
}
.auth-help {
font-size: 12px;
color: var(--ink-3);
margin-top: 6px;
line-height: 1.45;
}
.auth-error {
font-size: 12px;
color: var(--red);
margin-top: 6px;
line-height: 1.45;
display: none;
}
.auth-input.has-error + .auth-error,
.auth-error.show {
display: block;
}
/* Password input + reveal eye button */
.auth-password-wrap { position: relative; }
.auth-password-wrap .auth-input { padding-right: 42px; }
.auth-password-toggle {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--ink-4);
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.auth-password-toggle:hover { color: var(--ink); }
.auth-password-toggle:focus {
outline: none;
box-shadow: 0 0 0 2px var(--indigo-soft);
}
/* Remember me + Forgot password row (login only) */
.auth-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
font-size: 13px;
}
.auth-checkbox {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
color: var(--ink-2);
}
.auth-checkbox input[type="checkbox"] { cursor: pointer; }
/* Primary submit (full-width indigo) */
.auth-submit {
width: 100%;
padding: 12px 16px;
background: var(--indigo);
color: var(--bone);
border: none;
border-radius: 8px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
letter-spacing: -0.01em;
transition: background 0.12s, box-shadow 0.12s, transform 0.04s;
}
.auth-submit:hover {
background: color-mix(in oklch, var(--indigo) 80%, var(--ink));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.auth-submit:active { transform: scale(0.99); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.auth-submit.loading {
color: transparent;
position: relative;
}
.auth-submit.loading::after {
content: '';
position: absolute;
width: 16px; height: 16px;
top: 50%; left: 50%;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: var(--bone);
border-radius: 50%;
animation: auth-spin 0.6s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
/* Secondary button (outlined). Use as
for "Back to sign in" links. */
.auth-secondary {
display: block;
width: 100%;
padding: 11px 16px;
background: var(--bone);
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
margin-top: 10px;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.auth-secondary:hover {
background: var(--bone-3);
border-color: var(--ink-4);
color: var(--ink);
}
/* SSO row + divider (kept commented in markup until SSO decided) */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 26px 0;
font-size: 12px;
color: var(--ink-4);
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.auth-sso-row {
display: flex;
gap: 12px;
margin-bottom: 26px;
}
.auth-sso-button {
flex: 1;
padding: 10px 12px;
background: var(--bone-2);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.12s, border-color 0.12s;
}
.auth-sso-button:hover {
background: var(--bone-3);
border-color: var(--ink-4);
}
/* Card-bottom footer line (e.g., "Don't have an account? Contact admin") */
.auth-card-footer {
margin-top: 26px;
text-align: center;
font-size: 13px;
color: var(--ink-3);
}
.auth-card-footer a {
color: var(--indigo);
text-decoration: none;
font-weight: 500;
}
.auth-card-footer a:hover { text-decoration: underline; }
/* Big confirmation icon (magic-link-sent, logout) */
.auth-icon-tile {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--indigo-soft);
color: var(--indigo);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
}
.auth-icon-tile.green { background: var(--green-soft); color: var(--green); }
.auth-icon-tile.amber { background: var(--amber-soft); color: color-mix(in oklch, var(--amber) 60%, var(--ink)); }
/* Password strength meter (reset-password, accept-invite) */
.auth-strength { margin-top: 10px; }
.auth-strength-bar {
height: 4px;
background: var(--bone-3);
border-radius: 2px;
overflow: hidden;
margin-bottom: 6px;
}
.auth-strength-fill {
display: block;
height: 100%;
width: 0;
background: var(--ink-4);
transition: width 0.18s ease, background 0.18s ease;
border-radius: 2px;
}
.auth-strength-fill.weak { width: 25%; background: var(--red); }
.auth-strength-fill.fair { width: 55%; background: var(--amber); }
.auth-strength-fill.good { width: 80%; background: var(--green); }
.auth-strength-fill.strong { width: 100%; background: var(--green); }
.auth-strength-label {
font-size: 11.5px;
color: var(--ink-3);
margin: 0;
}
/* Banner (for expired tokens or locked accounts) */
.auth-banner {
border-radius: 8px;
padding: 11px 14px;
margin-bottom: 22px;
font-size: 12.5px;
line-height: 1.5;
display: flex;
gap: 10px;
align-items: flex-start;
}
.auth-banner.amber {
background: var(--amber-soft);
color: color-mix(in oklch, var(--amber) 80%, var(--ink));
border: 1px solid color-mix(in oklch, var(--amber) 35%, transparent);
}
.auth-banner.red {
background: var(--red-soft);
color: var(--red);
border: 1px solid color-mix(in oklch, var(--red) 35%, transparent);
}
.auth-banner svg { flex-shrink: 0; margin-top: 1px; }
/* Mobile: collapse to right panel only.
Below 768px the left brand panel is hidden so the form gets full width;
this matches the source template's responsive behavior. */
@media (max-width: 768px) {
.auth-container { grid-template-columns: 1fr; }
.auth-left { display: none; }
.auth-right { padding: 32px 24px; }
.auth-form-wrapper { max-width: 100%; }
.auth-form-header h2 { font-size: 24px; }
}
/* ============================================================
CUSTOMIZE NAV EDITOR (/admin/customize)
Tree of sections + items with drag handles, inline edit fields,
visibility toggles, and add/delete buttons. Built on top of the
existing .detail-section + .icon-btn vocabulary.
============================================================ */
.role-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
padding: 0 4px;
}
.role-tab {
background: none;
border: none;
padding: 10px 14px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
text-transform: capitalize;
}
.role-tab:hover { color: var(--ink); }
.role-tab.active {
color: var(--ink);
border-bottom-color: var(--indigo);
}
.editor-section {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bone);
margin-bottom: 16px;
overflow: hidden;
}
.editor-section.is-hidden { opacity: 0.55; }
.editor-section.is-footer-pseudo { border-style: dashed; background: transparent; }
.editor-section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line-2);
background: var(--bone-2);
}
.editor-drag {
color: var(--ink-4);
cursor: grab;
user-select: none;
font-size: 14px;
line-height: 1;
padding: 0 2px;
}
.editor-drag:active { cursor: grabbing; }
.editor-section-label {
flex: 1;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.editor-section-label-input {
flex: 1;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
border: none;
background: transparent;
border-bottom: 1px solid var(--indigo);
padding: 2px 0;
outline: none;
font-family: var(--sans);
}
.editor-section-actions { display: flex; gap: 4px; align-items: center; }
.editor-items {
list-style: none;
margin: 0;
padding: 6px 6px 8px;
min-height: 36px;
}
.editor-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
}
.editor-item:hover { background: var(--bone-3); }
.editor-item.is-hidden { opacity: 0.55; }
.editor-item.is-system .editor-system-tag {
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
font-weight: 600;
padding: 1px 5px;
border: 1px solid var(--line);
border-radius: 3px;
background: var(--bone-2);
}
.editor-item-icon {
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex-shrink: 0;
}
.editor-item-label {
flex: 1;
color: var(--ink);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editor-item-label-input {
flex: 1;
border: none;
background: transparent;
border-bottom: 1px solid var(--indigo);
padding: 2px 0;
outline: none;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
font-weight: 500;
}
.editor-item-meta {
font-size: 11px;
color: var(--ink-4);
font-family: var(--mono);
margin-right: 4px;
}
.editor-item-actions { display: flex; gap: 2px; align-items: center; }
.editor-toggle {
width: 30px;
height: 16px;
border-radius: 9999px;
background: var(--line);
position: relative;
cursor: pointer;
border: none;
padding: 0;
flex-shrink: 0;
transition: background 0.15s;
}
.editor-toggle::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: white;
border-radius: 9999px;
top: 2px;
left: 2px;
transition: left 0.15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.editor-toggle.on { background: var(--green); }
.editor-toggle.on::after { left: 16px; }
.editor-add-row {
display: flex;
justify-content: flex-start;
padding: 4px 12px 8px;
}
.editor-add-btn {
background: none;
border: 1px dashed var(--line);
color: var(--ink-3);
padding: 6px 12px;
border-radius: 6px;
font-family: var(--sans);
font-size: 12px;
cursor: pointer;
transition: border-color 0.12s, color 0.12s;
}
.editor-add-btn:hover {
border-color: var(--ink-3);
color: var(--ink);
}
.editor-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.editor-toolbar-actions { display: flex; gap: 8px; }
.editor-btn {
background: var(--ink);
color: var(--bone);
border: 1px solid var(--ink);
border-radius: 6px;
padding: 7px 14px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
}
.editor-btn.ghost {
background: transparent;
color: var(--ink-2);
border-color: var(--line);
}
.editor-btn.danger {
background: transparent;
color: var(--red);
border-color: color-mix(in oklch, var(--red) 30%, transparent);
}
.editor-btn:hover { opacity: 0.9; }
/* Sortable.js drop placeholder */
.editor-ghost {
opacity: 0.4;
background: var(--indigo-soft);
}
.editor-chosen { cursor: grabbing; }
/* ========================================================
Form-friendly multi-select field (chip + flyout, real
checkboxes — usable inside a