/*
* IkeManager design system (addendum 9, then reconciled against the real NotifCenter codebase in
* addendum 11 Part D — NotifCenter's values are the source of truth for the shared system, not a
* fresh interpretation of "the brand"). Dark sidebar / light content, teal accent on charcoal, same
* card/table/badge/button/tab component patterns as NotifCenter's Settings page, applied to
* IkeManager's own entities. Two things stay IkeManager-specific by design, not oversights: Inter
* for UI text (vendored, addendum 9 — NotifCenter uses a system-font stack, but Part D's alignment
* list doesn't include typography, and Inter was a deliberate, already-shipped decision) and the
* hamburger/drawer mobile sidebar (NotifCenter collapses to an icon rail instead; IkeManager's
* drawer was an explicit addendum-9 requirement already verified against a real browser).
*/
:root {
--sidebar-bg: #111112;
--teal: #56948d;
--teal-dark: #3d7069;
--teal-light: #7ab5ae;
--teal-tint: #e7f0ef;
--bg: #f4f6f8;
--surface: #ffffff;
--border: #e2e8f0;
--text: #1a202c;
--text-muted: #718096;
--red: #e53e3e;
--amber: #d97706;
--green: #38a169;
--success-bg: #e8f5e9;
--success-text: #2e7d32;
--warning-bg: #fff8e1;
--warning-text: #f57f17;
--danger-bg: #ffebee;
--danger-text: #c62828;
--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
--radius: 8px;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
--sidebar-width: 220px;
}
/*
* Round 46 Part F: admin-dashboard-only dark mode. Explicit toggle + localStorage persistence
* (assets/js/theme.js), not @media (prefers-color-scheme) — the round asked for a user-controlled
* choice, not automatic OS-based switching. [data-theme="dark"] is set on by an inline script
* in header.php that runs before app.css finishes loading, so there's no flash of the light theme on
* a page load that should be dark.
*
* The sidebar (--sidebar-bg) and login/installer screens (.auth-box/.installer-card, their own
* hardcoded near-black colors below) are deliberately NOT re-themed here — both are already
* permanently dark regardless of this toggle (an existing, pre-round-46 design choice), so there's
* nothing for "dark mode" to change about them. Every other admin-dashboard color (.card, tables,
* forms, badges, flash/warning/error messages, the compliance-ring/chart on this page) already reads
* from the tokens below rather than a hardcoded value, so overriding just the tokens re-themes the
* whole content area in one place — see the CSS system's own top-of-file docblock. The couple of
* spots that weren't already token-driven (badge-suspended, installer-banner/update-banner border
* tints) get an explicit override in this same block instead.
*/
:root[data-theme="dark"] {
--bg: #16171a;
--surface: #1e2023;
--border: #34363b;
--text: #e8eaed;
--text-muted: #9aa0a8;
--teal-tint: #1b2b29;
--success-bg: #163a22;
--success-text: #7fdb9a;
--warning-bg: #3a2d0d;
--warning-text: #f0c26a;
--danger-bg: #3a1c19;
--danger-text: #f2988e;
--neutral-bg: #2a2c30;
--neutral-text: #b0b4bc;
--shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .badge-suspended { background: var(--neutral-bg); color: var(--neutral-text); }
:root[data-theme="dark"] .installer-banner { border-color: #6b3a34; }
:root[data-theme="dark"] .update-banner { border-color: #2c4a45; }
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Round 38 Part A: a defensive pair, not tied to any single page. -webkit-text-size-adjust guards
against iOS Safari's automatic text-inflation after rotation subtly relaying out text-heavy pages;
overflow-x:hidden is a safety net so any one stray wide element (a long unbroken token, a future
regression) clips instead of dragging the whole document wider than the viewport — the "requires
pinching out to see the full page" symptom. Neither changes any layout that already fits. */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font-ui);
color: var(--text);
background: var(--bg);
font-size: 14px;
line-height: 1.5;
}
a { color: var(--teal-dark); }
a:hover { color: var(--teal); }
.mono, .mono td, td.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------------- */
/* App shell: dark sidebar + light content area */
/* ---------------------------------------------------------------------- */
.app-shell {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: var(--sidebar-bg);
color: #e7e8e7;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
z-index: 20;
}
.sidebar-brand {
padding: 24px 20px 16px;
position: relative;
}
/* Round 38 Part C: explicit close control for the mobile drawer (desktop never shows the drawer at
all, so this stays hidden there — see the mobile media query below for its actual display:flex). */
.sidebar-close { display: none; }
.sidebar-brand .wordmark {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--teal);
display: block;
}
.sidebar-brand .tagline {
color: #fff;
font-weight: 300;
font-size: 13px;
display: block;
margin-top: 2px;
}
.sidebar-nav {
flex: 1;
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
color: #a0aec0;
text-decoration: none;
font-size: 13.5px;
transition: color .15s, background .15s;
}
.sidebar-nav a svg { flex-shrink: 0; }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-nav a.active {
color: #fff;
background: rgba(86,148,141,.2);
border-right: 3px solid var(--teal);
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-footer form button {
width: 100%;
padding: 8px;
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: #a0aec0;
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
font-family: inherit;
transition: all .15s;
}
.sidebar-footer form button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.sidebar-backdrop { display: none; }
.main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 28px;
display: flex;
align-items: center;
gap: 16px;
}
.topbar .page-title {
font-size: 18px;
font-weight: 600;
margin: 0;
flex: 1;
}
.topbar .page-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* Round 46 Part F: persistent theme toggle — lives in .topbar so it's on every authenticated page,
not tucked away in Settings only. */
.theme-toggle {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); background: var(--bg); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.hamburger {
display: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 4px;
}
.content {
padding: 24px 28px;
max-width: 1200px;
width: 100%;
}
/* ---------------------------------------------------------------------- */
/* Stat cards */
/* ---------------------------------------------------------------------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card {
background: var(--surface); border-radius: var(--radius); padding: 20px;
box-shadow: var(--shadow); border: 1px solid var(--border);
}
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.stat-card .value { font-size: 32px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.stat-card .value.teal { color: var(--teal); }
/* ---------------------------------------------------------------------- */
/* Cards, tables, badges */
/* ---------------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 20px;
}
.card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.card-header h2, .card-header h3 { font-size: 15px; font-weight: 600; margin: 0; }
.card-body { padding: 20px; }
.card-body h3 { font-size: 14px; margin: 16px 0 10px; color: var(--text-muted); }
.card-body h3:first-child { margin-top: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 10px 12px; font-size: 13px; }
th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--border); transition: background-color .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg); }
.badge {
display: inline-block; padding: 2px 8px; border-radius: 20px;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
white-space: nowrap;
}
.badge-active { background: var(--success-bg); color: var(--success-text); }
.badge-expired { background: var(--danger-bg); color: var(--danger-text); }
.badge-suspended { background: #f5f5f5; color: #616161; }
.badge-draft { background: var(--warning-bg); color: var(--warning-text); }
.empty-state { color: var(--text-muted); padding: 28px; text-align: center; }
/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-group label, form label {
display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--text);
}
.form-group label small { font-weight: 400; color: var(--text-muted); }
.form-control, form input, form select, form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
font-family: inherit;
color: var(--text);
background: var(--surface);
transition: border .15s, box-shadow .15s;
outline: none;
}
.form-control:focus, form input:focus, form select:focus, form textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(86,148,141,.12);
}
.form-control[readonly], form input[readonly] { background: var(--bg); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--teal); cursor: pointer; }
.form-check label { font-size: 13px; cursor: pointer; margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* Round 18 Part D — a real filterable dropdown (search-as-you-type + click/keyboard select),
replacing native tooltip-style suggestions wherever a searchable picker
is needed (Website creation's client field, and any future one). */
.search-dropdown { position: relative; }
.search-dropdown-panel {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; display: none;
}
.search-dropdown-panel.open { display: block; }
.search-dropdown-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.search-dropdown-item:hover, .search-dropdown-item.active { background: var(--teal-tint); }
.search-dropdown-empty { padding: 8px 12px; font-size: 13px; color: var(--text-muted); }
/* Plain markup (used outside .form-group contexts) still needs spacing.
Round 19 Part A: this was `form > label` (direct-child only) — every real field in the app's own
templates sits inside a `.card-body` (or deeper), so the rule never actually matched anything and
these labels silently fell back to inline, colliding with whatever followed (the "+ New accountant"
button running into the ΔΟΥ label below it). Widened to a plain descendant selector so it matches
at any nesting depth; `.radio-inline` (below) opts a label back out where inline is intentional. */
form label:not(.radio-inline) { margin-bottom: 12px; }
/* A small set of radio/checkbox options meant to read as one horizontal row (e.g. the partner
κατηγορία εισφοράς picker) — opts out of the block-level default above. */
.radio-inline {
display: inline-flex; align-items: center; gap: 4px; margin: 0 16px 8px 0;
font-weight: 400; cursor: pointer;
}
/* A standalone action button sitting directly in a card body between fields (Fetch from ΓΕΜΗ,
+ New accountant, + Add year, etc.) — gives it the same breathing room as a field, instead of
crowding whatever comes next now that labels correctly stack as blocks. Buttons inside .action-bar
or another explicit flex/gap wrapper are unaffected (not a direct child of .card-body). */
.card-body > .btn { margin-bottom: 12px; }
/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: var(--radius);
border: 1px solid transparent;
font-size: 13px; font-weight: 500;
font-family: inherit; cursor: pointer; text-decoration: none;
line-height: 1;
transition: all .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn, .btn-primary, .auth-box button { background: var(--teal); color: #fff; }
.btn:hover, .btn-primary:hover, .auth-box button:hover { background: var(--teal-dark); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); color: var(--text); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c53030; }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { color: var(--text); background: var(--bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.error { color: var(--danger-text); font-size: 14px; }
p.error.card { background: var(--danger-bg); border-color: transparent; padding: 14px 16px; }
.flash { background: var(--success-bg); color: var(--success-text); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.warning { background: var(--warning-bg); color: var(--warning-text); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.installer-banner {
background: var(--danger-bg); color: var(--danger-text); border: 1px solid #e8b3ac;
padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px;
}
.action-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.action-bar form { display: inline; }
.diff-added { color: var(--success-text); }
.diff-removed { color: var(--danger-text); text-decoration: line-through; }
.update-banner {
background: var(--teal-tint); border: 1px solid #bcd6d2; color: var(--teal-dark);
padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
/* Readonly value + copy button row (cron URL, etc. — matches NotifCenter's Master Dispatch URL). */
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { font-family: var(--font-mono); font-size: 12px; }
/* ---------------------------------------------------------------------- */
/* Settings tabs */
/* ---------------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn {
padding: 10px 16px; border: none; background: none;
font-size: 13.5px; font-weight: 500; cursor: pointer;
color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
transition: all .15s; font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ---------------------------------------------------------------------- */
/* Compliance ring (IkeManager-specific — no NotifCenter equivalent) */
/* ---------------------------------------------------------------------- */
.compliance-ring { display: inline-flex; align-items: center; justify-content: center; }
.compliance-ring text { font-family: var(--font-mono); fill: var(--sidebar-bg); font-weight: 600; }
.compliance-ring circle.ring-track { stroke: var(--border); fill: none; }
.compliance-ring circle.ring-value { stroke: var(--teal); fill: none; stroke-linecap: round; }
/* ---------------------------------------------------------------------- */
/* Auth screens (login / 2FA) + installer — dark card, matches */
/* NotifCenter's login. */
/* ---------------------------------------------------------------------- */
.auth-shell, .installer-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--sidebar-bg);
padding: 20px;
}
.auth-box, .installer-card {
width: 100%;
max-width: 420px;
background: #1a1a1b;
border: 1px solid #2a2a2a;
border-radius: 14px;
padding: 40px 36px;
}
.installer-card { max-width: 640px; }
.auth-box .wordmark, .installer-card > .wordmark {
display: block; text-align: center; font-weight: 800; font-size: 26px;
letter-spacing: -0.5px; color: var(--teal); margin-bottom: 4px;
}
.auth-box h1, .installer-card > h1 {
font-size: 13px; text-align: center; font-weight: 400; color: #a0aec0;
margin: 0 0 28px;
}
.installer-card > h1 { font-size: 15px; margin-bottom: 20px; }
.auth-box form { display: flex; flex-direction: column; gap: 4px; }
.auth-box .btn, .auth-box button { width: 100%; justify-content: center; margin-top: 8px; }
.auth-box label, .installer-card label { color: #a0aec0; }
.auth-box .form-control, .installer-card .form-control,
.auth-box input, .installer-card input, .installer-card select {
background: #222224; border-color: #3a3a3c; color: #e2e8f0;
}
/* Round 40 Part A: same specificity problem as round 35's password-toggle-btn comment below —
".auth-box button" (one class + one element) beats ".btn-secondary" (one class alone), so without
this the Face ID button would inherit the solid-teal primary look instead of reading as the
secondary option next to "Continue". #webauthn-login-btn (an ID) outranks both. */
.auth-box #webauthn-login-btn {
background: #222224; color: #e2e8f0; border: 1px solid #3a3a3c;
}
.auth-box #webauthn-login-btn:hover { background: #2a2a2c; border-color: #4a4a4c; }
/* Round 35: show/hide toggle inside the login password field. Higher specificity than the
".auth-box button { width:100%; margin-top:8px }" rule above (two classes vs. one class + one
element), so this small icon button doesn't inherit that full-width/stacked button styling. */
.password-field { position: relative; }
.password-field input { padding-right: 38px; }
.auth-box .password-toggle-btn {
position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
width: auto; margin-top: 0; padding: 6px; background: none; border: none; border-radius: 6px;
display: flex; align-items: center; justify-content: center; color: #a0aec0; cursor: pointer;
}
.auth-box .password-toggle-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.08); }
.auth-box .password-toggle-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.installer-card p { color: #a0aec0; }
.installer-card .card h2, .installer-card .card h3 { color: #e2e8f0; }
.installer-card .card { background: #222224; border-color: #3a3a3c; }
.installer-card table { background: transparent; color: #e2e8f0; }
.installer-card th { border-color: #3a3a3c; }
.installer-card tbody tr { border-color: #3a3a3c; }
.installer-card tbody tr:hover { background: #2a2a2c; }
.installer-card a:not(.btn) { color: var(--teal-light); }
.installer-card code { color: #e2e8f0; }
/* ---------------------------------------------------------------------- */
/* Mobile: sidebar collapses to a hamburger-triggered drawer */
/* (IkeManager-specific — addendum 9 requirement; NotifCenter uses an */
/* icon-rail collapse instead, which doesn't apply here.) */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: 0; top: 0;
transform: translateX(-100%);
transition: transform .18s ease;
/* Round 38 Part C: was a flat 260px — a fair share of most phones, but a narrow-feeling
sliver on smaller ones and not the "75-85% of viewport" a drawer is expected to feel like.
min(82vw, 320px) scales with the phone instead, capped so it doesn't get silly on a tablet-
width mobile viewport. */
width: min(82vw, 320px);
}
#sidebar-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }
/* Round 38 Part C: an explicit close control alongside the existing tap-outside-to-close
(.sidebar-backdrop, unchanged below) — some users look for a dismiss button specifically,
not just relying on tapping outside the drawer. */
.sidebar-close {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 16px; right: 12px; width: 28px; height: 28px;
border-radius: 6px; font-size: 22px; line-height: 1; color: #a0aec0; cursor: pointer;
}
.sidebar-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-backdrop {
display: none;
position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 15;
}
#sidebar-toggle:checked ~ .app-shell .sidebar-backdrop { display: block; }
.hamburger { display: block; }
/* Round 38 Part D: a genuinely-overflowing bug the audit turned up (not one of the round's named
pages, but the same root cause) — .page-title has flex:1 with no min-width override, so on a
page with several .page-actions buttons (Clients: +New Client/Export CSV/Bulk import) the title
can't shrink below its own text's min-content width, and the whole .topbar overflows the
viewport with the last button pushed off-screen. Wrapping the actions onto their own full-width
row below the title fixes it structurally instead of just clipping the overflow. */
.topbar { padding: 14px 16px; flex-wrap: wrap; row-gap: 10px; }
.topbar .page-actions { flex-basis: 100%; flex-wrap: wrap; }
.content { padding: 18px 16px; }
.form-row, .form-row-3 { grid-template-columns: 1fr; }
.stat-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.auth-box, .installer-card { padding: 28px 24px; }
/* Round 38 Part A: iOS Safari zooms the whole page in when a focused input/select/textarea
computes to under 16px, then leaves the user to manually pinch back out afterward — the
"requires pinching out to see the full form" symptom, and the actual explanation once the
viewport meta tag (present and correct app-wide, confirmed not the cause) and a fixed-width
element (none found on any of these templates) were both ruled out. 16px is the documented
minimum that suppresses it; scoped to mobile only so desktop's compact 13px is untouched. */
.form-control, form input, form select, form textarea { font-size: 16px; }
/* Round 38 Part B: Clients/Accountants lists render as stacked cards instead of a fixed-width
table below this breakpoint — opt-in via .stacked-table so other tables on the site (sync/
deploy log, GEMI snapshot history, etc. — already reasonably narrow, or fine scrolling inside
.table-wrap) are unaffected. Desktop layout above this breakpoint is untouched (the .stacked-
table rules only exist inside this media query). */
.stacked-table thead { display: none; }
.stacked-table, .stacked-table tbody, .stacked-table tr, .stacked-table td { display: block; width: 100%; }
.stacked-table { border: none; }
.stacked-table tbody tr {
border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
margin-bottom: 10px;
}
.stacked-table tbody tr:last-child { margin-bottom: 0; }
.stacked-table tbody tr:hover { background: var(--surface); }
.stacked-table td { border: none; padding: 4px 0; font-size: 13px; }
.stacked-table td.stacked-title { font-weight: 600; font-size: 14.5px; padding-top: 0; }
.stacked-table td:not(.stacked-title) {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.stacked-table td:not(.stacked-title)::before {
content: attr(data-label); color: var(--text-muted); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}
/* Round 39 Part B: an actions cell (buttons only, no column header / no "value" to label) opts
out of the label:value split above — space-between would otherwise shove a lone button toward
the far edge against its own empty ::before. Grouped left instead, wrapping if both buttons
don't fit one line. */
.stacked-table td.stacked-actions {
justify-content: flex-start; flex-wrap: wrap; padding-top: 8px;
}
.stacked-table td.stacked-actions::before { content: none; }
}