/* ═══════════════════════════════════════════════════════════════════
DarkGuard v2 - Operator Console design system
Light-default, full dark parity. Top navigation. Refined typography.
═══════════════════════════════════════════════════════════════════ */
:root {
/* Brand */
--brand: #0f172a;
--brand-2: #1e293b;
/* Accent - refined indigo, not neon */
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-press: #3730a3;
--accent-subtle: #eef2ff;
--accent-ring: rgba(79, 70, 229, 0.20);
/* Semantics - muted, enterprise */
--success: #15803d;
--success-subtle: #dcfce7;
--success-ring: rgba(21, 128, 61, 0.18);
--danger: #b91c1c;
--danger-subtle: #fee2e2;
--danger-ring: rgba(185, 28, 28, 0.18);
--warning: #b45309;
--warning-subtle: #fef3c7;
--warning-ring: rgba(180, 83, 9, 0.18);
--info: #1d4ed8;
--info-subtle: #dbeafe;
/* Surfaces & ink - light */
--bg-app: #f7f6f3;
--bg-surface: #ffffff;
--bg-elevated: #f1efea;
--bg-hover: #f3f1ec;
--bg-overlay: rgba(15, 23, 42, 0.45);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--text-disabled: #94a3b8;
--text-inverse: #ffffff;
--border: #e7e3da;
--border-strong: #d6d1c4;
--divider: #ede9df;
--badge-allow-text: #14532d;
--badge-deny-text: #7f1d1d;
--badge-ask-text: #78350f;
--radius-xs: 4px;
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
--transition: 150ms cubic-bezier(.4, 0, .2, 1);
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--topbar-h: 56px;
--subbar-h: 52px;
--content-max: 1480px;
--content-pad: 28px;
}
[data-theme="dark"] {
--brand: #f1f5f9;
--brand-2: #e2e8f0;
--accent: #818cf8;
--accent-hover: #6366f1;
--accent-press: #4f46e5;
--accent-subtle: rgba(129, 140, 248, 0.10);
--accent-ring: rgba(129, 140, 248, 0.28);
--success: #4ade80;
--success-subtle: rgba(74, 222, 128, 0.10);
--success-ring: rgba(74, 222, 128, 0.25);
--danger: #f87171;
--danger-subtle: rgba(248, 113, 113, 0.10);
--danger-ring: rgba(248, 113, 113, 0.25);
--warning: #fbbf24;
--warning-subtle: rgba(251, 191, 36, 0.10);
--warning-ring: rgba(251, 191, 36, 0.25);
--info: #60a5fa;
--info-subtle: rgba(96, 165, 250, 0.10);
--bg-app: #0a0d14;
--bg-surface: #10141d;
--bg-elevated: #161b26;
--bg-hover: #1a202c;
--bg-overlay: rgba(0, 0, 0, 0.65);
--text-primary: #e6e8ed;
--text-secondary: #a3acbb;
--text-muted: #6b7589;
--text-disabled: #4b5468;
--text-inverse: #0a0d14;
--border: #1f2633;
--border-strong: #2c3445;
--divider: #1a202c;
--badge-allow-text: #86efac;
--badge-deny-text: #fca5a5;
--badge-ask-text: #fcd34d;
--shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* ───────── Reset & base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
background: var(--bg-app);
font-feature-settings: 'ss01', 'cv11', 'tnum';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4, h5 {
margin: 0;
font-family: var(--font-display);
color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.012em;
}
h1 { font-size: 1.5rem; letter-spacing: -0.020em; }
h2 { font-size: 1.15rem; letter-spacing: -0.014em; }
h3 { font-size: 0.95rem; }
p { margin: 0 0 0.75rem 0; }
::selection { background: var(--accent-ring); color: var(--text-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); }
code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-ligatures: none; }
kbd {
display: inline-block;
padding: 1px 6px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 5px;
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 0.02em;
}
hr { border: 0; border-top: 1px solid var(--divider); margin: 20px 0; }
/* ───────── Utility ───────── */
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.ml-auto { margin-left: auto; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* cluster: the ubiquitous "row of buttons/chips" — wraps, centred, gapped.
toolbar: title on the left, actions on the right, wraps gracefully.
These two absorb the bulk of ad-hoc inline `display:flex;gap;align-items`. */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Spacing utilities reference the 8pt design tokens (R5-6). Values unchanged. */
.gap-4 { gap: var(--space-1); }
.gap-6 { gap: 6px; }
.gap-8 { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }
.gap-16 { gap: var(--space-4); }
.gap-24 { gap: var(--space-6); }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: var(--space-2); }
.mt-12 { margin-top: var(--space-3); }
.mt-16 { margin-top: var(--space-4); }
.mt-24 { margin-top: var(--space-6); }
.mb-8 { margin-bottom: var(--space-2); }
.mb-12 { margin-bottom: var(--space-3); }
.mb-16 { margin-bottom: var(--space-4); }
.mb-24 { margin-bottom: var(--space-6); }
.mb-32 { margin-bottom: var(--space-8); }
/* ───────── App shell ───────── */
.app {
min-height: 100vh;
display: flex;
flex-direction: row; /* sidebar | content column */
background: var(--bg-app);
}
.app-body {
flex: 1;
min-width: 0; /* let content shrink instead of overflowing */
display: flex;
flex-direction: column;
}
.topbar {
height: var(--topbar-h);
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 24px;
gap: 24px;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(160%) blur(8px);
}
.topbar-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.14em;
color: var(--text-primary);
text-transform: uppercase;
flex-shrink: 0;
}
.topbar-brand:hover { color: var(--text-primary); }
.topbar-brand .brand-logo { height: 24px; width: 24px; border-radius: 5px; }
.topbar-nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a, .nav-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
transition: all var(--transition);
position: relative;
}
.topbar-nav a:hover, .nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-nav a.active, .nav-link.active {
color: var(--text-primary);
background: var(--bg-elevated);
}
.topbar-nav a.active::after {
content: '';
position: absolute;
left: 12px; right: 12px;
bottom: -14px;
height: 2px;
background: var(--accent);
border-radius: 2px 2px 0 0;
}
.topbar-nav a svg, .nav-link svg { opacity: 0.75; }
.topbar-nav a.active svg { opacity: 1; color: var(--accent); }
.topbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.topbar-search {
display: inline-flex;
align-items: center;
gap: 10px;
height: 32px;
padding: 0 10px 0 12px;
background: var(--bg-elevated);
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 12.5px;
min-width: 220px;
cursor: pointer;
transition: all var(--transition);
}
.topbar-search:hover { border-color: var(--border); color: var(--text-secondary); }
.topbar-search kbd { margin-left: auto; }
.topbar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
transition: background var(--transition);
cursor: pointer;
color: var(--text-primary);
}
.topbar-user:hover { background: var(--bg-elevated); color: var(--text-primary); }
.user-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--brand);
color: var(--bg-surface);
display: inline-flex;
align-items: center; justify-content: center;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
}
.topbar-user .user-name {
font-size: 13px;
font-weight: 500;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-icon {
width: 32px; height: 32px;
display: inline-flex;
align-items: center; justify-content: center;
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
}
.topbar-icon:hover {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border);
}
.topbar-burger {
display: none;
width: 32px; height: 32px;
align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-primary);
}
.topbar-burger span,
.topbar-burger span::before,
.topbar-burger span::after {
display: block;
width: 14px; height: 1.5px;
background: currentColor;
position: relative;
border-radius: 1px;
}
.topbar-burger span::before { content: ''; position: absolute; left: 0; top: -5px; }
.topbar-burger span::after { content: ''; position: absolute; left: 0; top: 5px; }
.main {
flex: 1;
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: 24px var(--content-pad) 80px;
}
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 0 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--divider);
flex-wrap: wrap;
}
.page-header h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 4px; }
.page-header-sub { font-size: 0.875rem; color: var(--text-muted); line-height: 1.4; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-content { display: block; }
.crumbs {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 500;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-secondary); }
.crumbs .sep { opacity: 0.5; }
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 28px 0 12px;
}
.section-heading h2 {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 2px;
}
.section-heading h2.section-title {
font-size: 1rem;
text-transform: none;
letter-spacing: -0.01em;
color: var(--text-primary);
font-weight: 600;
}
.section-sub { font-size: 0.82rem; color: var(--text-muted); }
.role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--bg-elevated);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.role-badge.admin {
background: var(--accent-subtle);
color: var(--accent);
border-color: transparent;
}
.role-badge.member { background: var(--bg-elevated); color: var(--text-secondary); }
/* ───────── Buttons ─────────
Hierarchy - pick exactly one variant + at most one size + at most one width.
Variant : .btn-primary → the canonical CTA on a screen ("Sign in", "Save", "+ New")
.btn-ghost → secondary actions, drill-into links ("View full log →"), "Cancel"
.btn-danger → destructive ("Delete org", "Revoke", "Remove member")
Size : .btn-sm → in-card / in-row actions (default = page-level form CTAs)
.btn-lg → marketing / auth CTAs only
Width : .w-full → form submit buttons inside narrow auth-card layouts
Icon : .btn-icon → square ✕ / ⋮ buttons in modal headers and row menus
Two variants on one button (e.g. `btn-primary btn-danger`) is a bug. Prefer
`btn btn-ghost btn-sm` for "View more →" affordances next to a section header.
*/
.btn {
appearance: none;
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-primary);
height: 34px;
padding: 0 14px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all var(--transition);
white-space: nowrap;
user-select: none;
box-shadow: var(--shadow-xs);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-press); }
.btn-ghost {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: transparent; }
.btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #ffffff;
}
.btn-danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
[data-theme="dark"] .btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
[data-theme="dark"] .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-success { background: var(--success); border-color: var(--success); color: #ffffff; }
.btn-success:hover { background: #166534; border-color: #166534; }
.btn-outline {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent-subtle); color: var(--accent-hover); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-icon { width: 32px; height: 32px; padding: 0; color: var(--text-secondary); }
.btn-icon:hover { color: var(--text-primary); }
.btn-block, .btn.w-full { width: 100%; display: flex; }
.btn-group {
display: inline-flex;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 2px;
gap: 2px;
}
.btn-group .btn {
height: 26px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--text-secondary);
font-size: 12px;
padding: 0 10px;
}
.btn-group .btn.active {
background: var(--bg-surface);
color: var(--text-primary);
box-shadow: var(--shadow-xs);
}
/* ───────── Cards ───────── */
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
.card.is-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
a.card-link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
a.card-link:hover { color: inherit; }
a.card-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--divider);
background: var(--bg-surface);
}
.card-header h3, .card-header h2 {
font-size: 0.92rem;
font-weight: 600;
margin: 0;
letter-spacing: -0.005em;
}
.card-header .card-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.card-header-actions { display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }
.card-body.dense { padding: 12px 14px; }
.card-footer {
padding: 12px 18px;
border-top: 1px solid var(--divider);
background: var(--bg-app);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12.5px;
color: var(--text-muted);
}
/* Canonical card/panel eyebrow label. Single source of truth — do not
redefine its type elsewhere (older duplicates caused an uppercase label
to inherit sentence-case sizing). */
.panel-title {
display: flex;
align-items: center;
gap: var(--space-2, 8px);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 14px;
}
/* ───────── Forms ───────── */
.form-group {
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.form-group label .req { color: var(--danger); }
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* IMPORTANT: longhand only - the `select` rule below sets a chevron
background-image. The shorthand `background:` here would reset it
via the cascade because `.form-control` has higher specificity than
the bare `select` selector when matching `select.form-control`. */
background-color: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0 12px;
height: 36px;
font-family: inherit;
font-size: 13.5px;
line-height: 1.4;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
font-feature-settings: 'tnum';
}
textarea.form-control, textarea {
height: auto;
min-height: 80px;
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 12.5px;
resize: vertical;
}
.form-control:hover, input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
.form-control:focus, input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-control:disabled, input:disabled, select:disabled, textarea:disabled {
background-color: var(--bg-elevated);
color: var(--text-disabled);
cursor: not-allowed;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-disabled); }
select {
/* Native arrow is suppressed via appearance:none above. Render a chevron
inline so it always matches the surrounding text colour (works in
light + dark without a second rule). */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
/* IE/Edge legacy native arrow */
select::-ms-expand { display: none; }
[data-theme="dark"] select {
background-image: url("data:image/svg+xml;utf8,");
}
/* Option items inside an open dropdown - give them theme-aware colors so
the OS-rendered popup matches the select's colour scheme. Use longhand to
avoid the chevron leaking into the popup as a background-image. */
select option {
background-color: var(--bg-surface);
background-image: none;
color: var(--text-primary);
}
.form-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.form-notice {
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--info-subtle);
color: var(--info);
font-size: 12.5px;
border: 1px solid transparent;
}
/* ── Inline notice / callout ──────────────────────────────────────────
Mature replacement for tinted "pill" panels. Neutral surface, thin
border, a small tone-coloured icon — the colour is carried by the icon
and a restrained 2px leading edge, not a full background wash. */
.dg-notice {
display: flex; gap: 11px; align-items: flex-start;
padding: 12px 14px; margin-bottom: var(--space-6, 24px);
border: 1px solid var(--border); border-left-width: 2px;
border-radius: var(--radius);
background: var(--bg-surface); color: var(--text-secondary);
font-size: var(--fs-sm, 13px); line-height: 1.5;
}
.dg-notice:last-child { margin-bottom: 0; }
.dg-notice .nt-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-muted); }
.dg-notice .nt-body { min-width: 0; flex: 1; }
.dg-notice .nt-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.dg-notice .nt-text { color: var(--text-secondary); }
.dg-notice .nt-text strong, .dg-notice strong { color: var(--text-primary); font-weight: 600; }
.dg-notice .nt-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.dg-notice.tone-warn { border-left-color: var(--warning); }
.dg-notice.tone-warn .nt-ico { color: var(--warning); }
.dg-notice.tone-danger { border-left-color: var(--danger); }
.dg-notice.tone-danger .nt-ico { color: var(--danger); }
.dg-notice.tone-success { border-left-color: var(--success); }
.dg-notice.tone-success .nt-ico { color: var(--success); }
.dg-notice.tone-info { border-left-color: var(--info); }
.dg-notice.tone-info .nt-ico { color: var(--info); }
@media (max-width: 640px) {
.dg-notice { flex-wrap: wrap; }
.dg-notice .nt-actions { margin-left: 0; width: 100%; }
}
input[type="checkbox"], input[type="radio"] {
appearance: none;
width: 16px; height: 16px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--bg-surface);
cursor: pointer;
position: relative;
transition: all var(--transition);
flex-shrink: 0;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 3px;
background: #fff;
border-radius: 50%;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
outline: 2px solid var(--accent-ring);
outline-offset: 2px;
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 56px; }
.pw-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
height: 24px;
padding: 0 8px;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: 4px;
transition: all var(--transition);
}
.pw-toggle:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.selector-row {
display: flex;
gap: 16px;
align-items: flex-end;
flex-wrap: wrap;
}
.selector-group {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 200px;
}
.selector-group label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ───────── Tables ───────── */
.table-wrap {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.table-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--divider);
background: var(--bg-surface);
flex-wrap: wrap;
}
.table-toolbar .toolbar-spacer { flex: 1; }
.table-toolbar input.form-control { height: 32px; max-width: 260px; }
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
table thead th {
background: var(--bg-app);
border-bottom: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
}
table tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--divider);
color: var(--text-primary);
vertical-align: middle;
}
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr { transition: background var(--transition); }
table tbody tr:hover { background: var(--bg-hover); }
table tbody tr.is-selected { background: var(--accent-subtle); }
table.compact tbody td, table.compact thead th { padding: 8px 12px; }
table .num, table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
table .mono-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
table .row-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
opacity: 0.4;
transition: opacity var(--transition);
}
table tbody tr:hover .row-actions { opacity: 1; }
/* ───────── Badges / chips ───────── */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: 11.5px;
font-weight: 500;
border-radius: 999px;
white-space: nowrap;
}
.badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
.badge.no-dot::before { display: none; }
.badge-allow, .badge-approve, .badge-active {
background: var(--success-subtle);
color: var(--badge-allow-text);
border-color: transparent;
}
.badge-deny, .badge-blocked, .badge-error, .badge-inactive {
background: var(--danger-subtle);
color: var(--badge-deny-text);
border-color: transparent;
}
.badge-ask, .badge-pending, .badge-warning {
background: var(--warning-subtle);
color: var(--badge-ask-text);
border-color: transparent;
}
.badge-info {
background: var(--info-subtle);
color: var(--info);
border-color: transparent;
}
.badge-manager, .badge-admin {
background: var(--accent-subtle);
color: var(--accent);
border-color: transparent;
}
.badge-match, .badge-service, .badge-neutral {
background: var(--bg-elevated);
color: var(--text-secondary);
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 999px;
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition);
}
.chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.chip.active {
background: var(--accent-subtle);
color: var(--accent);
border-color: var(--accent);
}
.dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.dot.dot-on { background: var(--success); box-shadow: 0 0 0 3px var(--success-ring); }
.dot.dot-off { background: var(--text-disabled); }
.dot.dot-warn { background: var(--warning); }
.dot.dot-err { background: var(--danger); }
/* ───────── Modals ───────── */
.modal-backdrop {
position: fixed;
inset: 0;
background: var(--bg-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
backdrop-filter: blur(4px);
}
.modal-backdrop.active { opacity: 1; pointer-events: auto; }
.modal {
width: 100%;
max-width: 520px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
transform: translateY(8px) scale(0.985);
transition: transform var(--transition);
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
overflow: hidden;
}
.modal-backdrop.active .modal { transform: translateY(0) scale(1); }
.modal.lg { max-width: 720px; }
.modal.xl { max-width: 960px; }
.modal-header {
padding: 18px 22px 16px;
border-bottom: 1px solid var(--divider);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.modal-header h2, .modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-header .modal-sub { margin-top: 4px; font-size: 0.82rem; color: var(--text-muted); }
.modal-close {
width: 28px; height: 28px;
border: 0; background: transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
font-size: 18px;
line-height: 1;
}
.modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.modal-body { padding: 20px 22px; overflow: auto; }
.modal-footer {
padding: 14px 22px;
border-top: 1px solid var(--divider);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
background: var(--bg-app);
}
/* ───────── Toasts ───────── */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 3px solid var(--text-muted);
box-shadow: var(--shadow-md);
border-radius: var(--radius);
padding: 12px 14px;
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 260px;
max-width: 380px;
font-size: 13px;
color: var(--text-primary);
animation: toast-in 200ms cubic-bezier(.2,.7,.2,1);
}
.toast.out { animation: toast-out 200ms forwards; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateX(20px); opacity: 0; } }
.toast .toast-icon {
flex-shrink: 0;
width: 18px; height: 18px;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.toast .toast-msg { flex: 1; line-height: 1.45; }
.toast .toast-dismiss {
flex-shrink: 0;
width: 18px; height: 18px;
border: 0; background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 15px;
line-height: 1;
border-radius: 3px;
}
.toast .toast-dismiss:hover { color: var(--text-primary); background: var(--bg-elevated); }
.toast.success { border-left-color: var(--success); }
.toast.success .toast-icon { background: var(--success-subtle); color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.error .toast-icon { background: var(--danger-subtle); color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.warning .toast-icon { background: var(--warning-subtle); color: var(--warning); }
.toast.info { border-left-color: var(--info); }
.toast.info .toast-icon { background: var(--info-subtle); color: var(--info); }
/* ───────── Auth pages ───────── */
body.auth-page {
min-height: 100vh;
display: grid;
grid-template-columns: 1.05fr 1fr;
background: var(--bg-app);
}
.auth-aside {
position: relative;
background:
radial-gradient(900px 600px at -10% 100%, rgba(79, 70, 229, 0.30), transparent 50%),
radial-gradient(700px 500px at 110% -10%, rgba(15, 23, 42, 0.20), transparent 50%),
linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
color: #f1f5f9;
padding: 56px 56px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.auth-aside::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 75%);
}
.auth-aside-brand {
position: relative;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.auth-aside-brand img { height: 28px; width: 28px; }
.auth-aside-headline { position: relative; max-width: 460px; }
.auth-aside-headline h2 {
color: #f1f5f9;
font-size: 2.4rem;
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0 0 16px;
}
.auth-aside-headline p {
color: #cbd5e1;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.auth-aside-features {
position: relative;
margin-top: 32px;
display: grid;
gap: 16px;
}
.auth-aside-feat { display: flex; gap: 14px; align-items: flex-start; }
.auth-aside-feat .ico {
width: 28px; height: 28px;
flex-shrink: 0;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px;
color: #fff;
display: inline-flex;
align-items: center; justify-content: center;
}
.auth-aside-feat strong { color: #f1f5f9; font-weight: 600; font-size: 13.5px; display: block; }
.auth-aside-feat span { color: #cbd5e1; font-size: 12.5px; line-height: 1.5; }
.auth-aside-footer {
position: relative;
color: rgba(241, 245, 249, 0.55);
font-size: 11.5px;
letter-spacing: 0.04em;
}
.auth-main {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
position: relative;
background: var(--bg-app);
}
.auth-theme-toggle { position: absolute; top: 20px; right: 20px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-brand { display: none; margin-bottom: 28px; }
.auth-brand h1 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 4px;
}
.auth-brand p { color: var(--text-muted); font-size: 13px; margin: 0; }
.auth-card h1.auth-title {
font-size: 1.7rem;
margin: 0 0 8px;
letter-spacing: -0.02em;
}
.auth-card .auth-subtitle {
color: var(--text-muted);
font-size: 14px;
margin: 0 0 28px;
line-height: 1.5;
}
.auth-alert {
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 12.5px;
margin-bottom: 18px;
border: 1px solid transparent;
}
.auth-alert.error { background: var(--danger-subtle); color: var(--badge-deny-text); }
.auth-alert.success { background: var(--success-subtle); color: var(--badge-allow-text); }
.auth-alert.info { background: var(--info-subtle); color: var(--info); }
.auth-footer {
margin-top: 24px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
}
/* Password strength meter (signup) */
.pw-strength {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-top: 6px;
}
.pw-strength span {
height: 3px;
background: var(--bg-elevated);
border-radius: 999px;
transition: background var(--transition);
}
.pw-strength.s1 span:nth-child(-n+1),
.pw-strength.s2 span:nth-child(-n+2),
.pw-strength.s3 span:nth-child(-n+3),
.pw-strength.s4 span:nth-child(-n+4) { background: var(--accent); }
.pw-strength.s1 span:nth-child(-n+1) { background: var(--danger); }
.pw-strength.s2 span:nth-child(-n+2) { background: var(--warning); }
.pw-strength.s3 span:nth-child(-n+3) { background: var(--success); }
.pw-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; min-height: 14px; }
@media (max-width: 900px) {
body.auth-page { grid-template-columns: 1fr; }
.auth-aside { display: none; }
.auth-brand { display: block; }
}
/* ───────── Dashboard layout ───────── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 980px) {
.dash-grid, .dash-grid-3 { grid-template-columns: 1fr; }
}
.selector-card {
display: flex;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
padding: 14px 16px;
}
.selector-card .selector-group { flex: 1; min-width: 220px; }
.selector-card .selector-meta {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
font-size: 11.5px;
color: var(--text-muted);
}
.selector-card .selector-meta b {
color: var(--text-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
.live-pulse {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 11.5px;
}
.live-pulse .live-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 0 var(--success-ring);
animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 var(--success-ring); }
70% { box-shadow: 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ───────── Metric strip ───────── */
.metric-grid {
display: grid;
grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.metric-grid.cols-2 { --cols: 2; }
.metric-grid.cols-3 { --cols: 3; }
.metric-grid.cols-4 { --cols: 4; }
.metric-grid.cols-5 { --cols: 5; }
.metric-grid.cols-6 { --cols: 6; }
.metric-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px 12px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
transition: border-color var(--transition), box-shadow var(--transition);
position: relative;
overflow: hidden;
}
.metric-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.metric-label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metric-value {
font-size: 1.65rem;
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.metric-value.accent { color: var(--text-primary); }
.metric-value.success { color: var(--success); }
.metric-value.danger { color: var(--danger); }
.metric-value.warning { color: var(--warning); }
.metric-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
}
.metric-sub {
font-size: 11.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trend-pill {
display: inline-flex;
align-items: center;
gap: 3px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
background: var(--bg-elevated);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.trend-pill.up { background: var(--success-subtle); color: var(--badge-allow-text); }
.trend-pill.down { background: var(--danger-subtle); color: var(--badge-deny-text); }
.trend-pill.flat { background: var(--bg-elevated); color: var(--text-muted); }
/* ───────── Charts ───────── */
.donut-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0 12px;
position: relative;
}
.donut {
--donut-size: 150px;
width: var(--donut-size);
height: var(--donut-size);
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
transition: transform var(--transition);
}
.donut-hole {
width: 70%;
height: 70%;
background: var(--bg-surface);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px var(--divider);
position: relative;
z-index: 1;
}
.donut-total {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.donut-label {
font-size: 0.62rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 2px;
}
.donut-empty {
color: var(--text-muted);
font-size: 0.78rem;
text-align: center;
padding: 36px 0;
}
.chart-tooltip {
position: absolute;
pointer-events: none;
background: var(--brand);
color: var(--text-inverse);
padding: 6px 10px;
border-radius: 6px;
font-size: 11.5px;
line-height: 1.4;
box-shadow: var(--shadow-md);
z-index: 20;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.chart-tooltip strong { font-weight: 600; }
.chart-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 18px;
margin-top: 14px;
padding: 0 8px;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.legend-pct { color: var(--text-muted); }
.chart-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 18px;
cursor: pointer;
transition: all var(--transition);
position: relative;
}
.chart-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.chart-card h3 {
font-size: 0.92rem;
font-weight: 600;
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 8px;
}
.chart-icon {
display: inline-flex;
width: 22px; height: 22px;
background: var(--accent-subtle);
color: var(--accent);
border-radius: 5px;
align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
}
.chart-hint {
font-size: 11px;
color: var(--text-muted);
text-align: right;
margin-top: 8px;
}
.hbar-list { display: flex; flex-direction: column; gap: 10px; }
.hbar-row {
display: grid;
grid-template-columns: 160px 1fr 48px;
align-items: center;
gap: 12px;
}
.hbar-label {
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hbar-track {
height: 8px;
background: var(--bg-elevated);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.hbar-fill {
height: 100%;
border-radius: 999px;
transition: width 400ms cubic-bezier(.2,.7,.2,1);
min-width: 2px;
background: var(--accent);
}
.hbar-fill.danger { background: linear-gradient(90deg, var(--danger), #ef4444); }
.hbar-fill.success { background: linear-gradient(90deg, var(--success), #22c55e); }
.hbar-fill.accent { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }
.hbar-fill.warning { background: linear-gradient(90deg, var(--warning), #f59e0b); }
.hbar-value {
text-align: right;
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
.hbar-empty {
padding: 28px 0;
text-align: center;
color: var(--text-muted);
font-size: 12.5px;
}
.daily-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 160px;
padding-top: 12px;
position: relative;
}
.daily-bar {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
min-width: 0;
}
.daily-stack {
width: 100%;
border-radius: 4px 4px 0 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
transition: opacity var(--transition);
}
.daily-bar:hover .daily-stack { opacity: 0.85; }
.daily-seg { width: 100%; transition: height 400ms cubic-bezier(.2,.7,.2,1); }
.daily-seg.s-allowed { background: var(--success); border-radius: 4px 4px 0 0; }
.daily-seg.s-denied { background: var(--danger); }
.daily-day {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.daily-count {
font-size: 10.5px;
color: var(--text-muted);
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.daily-legend {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 12px;
}
.daily-legend span {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--text-secondary);
}
.daily-legend .dot { width: 8px; height: 8px; border-radius: 2px; box-shadow: none; }
.pillar-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
align-items: center;
margin-bottom: 10px;
}
.pillar-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.pillar-value {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
font-family: var(--font-mono);
}
.pillar-fill {
grid-column: 1 / -1;
height: 6px;
background: var(--bg-elevated);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.pillar-fill::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--pillar-pct, 0%);
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
border-radius: 999px;
transition: width 400ms cubic-bezier(.2,.7,.2,1);
}
/* ───────── Tabs ───────── */
.tabs {
display: flex;
align-items: center;
gap: 2px;
border-bottom: 1px solid var(--divider);
margin-bottom: 18px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
border: 0;
background: transparent;
color: var(--text-secondary);
height: 36px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
position: relative;
transition: color var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .tab-count {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tab.active .tab-count { background: var(--accent-subtle); color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ───────── Empty state ───────── */
.empty-state {
text-align: center;
padding: 56px 20px;
color: var(--text-muted);
}
.empty-state .empty-icon {
width: 56px; height: 56px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center; justify-content: center;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
margin-bottom: 18px;
}
.empty-state .empty-title {
color: var(--text-primary);
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 6px;
}
.empty-state .empty-message {
color: var(--text-muted);
font-size: 13px;
max-width: 420px;
margin: 0 auto 18px;
line-height: 1.55;
}
/* ───────── Theme toggle ───────── */
.theme-toggle {
width: 32px; height: 32px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center; justify-content: center;
transition: all var(--transition);
position: relative;
}
.theme-toggle:hover {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border);
}
.theme-toggle::before {
content: '';
width: 14px; height: 14px;
border-radius: 50%;
background: currentColor;
box-shadow: inset -4px -4px 0 0 var(--bg-surface);
transition: all var(--transition);
}
[data-theme="dark"] .theme-toggle::before {
box-shadow: inset -4px -4px 0 0 var(--bg-app);
transform: rotate(-30deg);
}
/* ───────── Mobile drawer ───────── */
.mobile-topbar, .mobile-nav, .mobile-actions, .mobile-menu-btn { display: none !important; }
.mobile-drawer {
position: fixed;
inset: 0;
background: var(--bg-overlay);
z-index: 100;
display: none;
}
.mobile-drawer.open { display: block; }
.mobile-drawer-panel {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 280px;
max-width: 80vw;
background: var(--bg-surface);
box-shadow: var(--shadow-lg);
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-drawer-panel .topbar-brand { margin-bottom: 16px; }
.mobile-drawer-panel a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
}
.mobile-drawer-panel a.active { background: var(--bg-elevated); color: var(--accent); }
.mobile-drawer-panel a:hover { background: var(--bg-hover); }
/* Legacy sidebar - hidden in v2 */
.sidebar, .sidebar-header, .sidebar-nav, .sidebar-footer, .sidebar-user,
.sidebar-actions, .sidebar-logout { display: none !important; }
.brand-logo { height: 22px; width: 22px; border-radius: 5px; vertical-align: middle; }
/* ───────── Misc ───────── */
.ep-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-muted);
margin-bottom: 8px;
}
.ep-back:hover { color: var(--text-primary); }
pre, .code-block {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.55;
overflow: auto;
color: var(--text-primary);
}
.skeleton {
background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-hover) 50%, var(--bg-elevated) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
border-radius: 4px;
color: transparent;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Responsive */
@media (max-width: 1080px) {
.topbar-search { display: none; }
}
@media (max-width: 900px) {
.metric-grid.cols-6, .metric-grid.cols-5, .metric-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
:root { --content-pad: 18px; }
.page-header { align-items: flex-start; }
}
@media (max-width: 720px) {
.topbar-nav { display: none; }
.topbar-burger { display: inline-flex; }
.topbar { gap: 12px; padding: 0 16px; }
.topbar-user .user-name { display: none; }
.metric-grid.cols-6, .metric-grid.cols-5, .metric-grid.cols-4, .metric-grid.cols-3 { grid-template-columns: 1fr 1fr; }
.hbar-row { grid-template-columns: 110px 1fr 40px; }
.selector-row { flex-direction: column; align-items: stretch; }
.selector-group { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
.metric-grid { grid-template-columns: 1fr 1fr !important; }
.main { padding: 16px 16px 56px; }
.auth-aside { padding: 32px 24px; }
.auth-aside-headline h2 { font-size: 1.6rem; }
}
/* ═══════════════════════════════════════════════════════════════════
Page components - re-implementations of original DarkGuard widgets
in the v2 design language.
═══════════════════════════════════════════════════════════════════ */
/* ───────── Compliance: score ring + breakdown ───────── */
.score-panel {
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: center;
padding: 8px;
}
@media (max-width: 720px) { .score-panel { grid-template-columns: 1fr; justify-items: center; } }
.score-ring {
width: 180px;
height: 180px;
position: relative;
}
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .track {
stroke: var(--bg-elevated);
fill: none;
}
.score-ring .value {
stroke: var(--accent);
fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(.2,.7,.2,1), stroke 300ms ease;
}
.score-ring.good .value { stroke: var(--success); }
.score-ring.warn .value { stroke: var(--warning); }
.score-ring.crit .value { stroke: var(--danger); }
.score-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.score-num {
font-size: 2.4rem;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.score-max { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.score-lbl {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.10em;
font-weight: 700;
color: var(--text-muted);
margin-top: 4px;
}
#score-tier {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 6px;
}
.score-breakdown { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.score-pillar { display: grid; grid-template-columns: 140px 1fr 60px; gap: 14px; align-items: center; }
.score-pillar .pillar-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.score-pillar .pillar-bar {
height: 6px;
background: var(--bg-elevated);
border-radius: 999px;
overflow: hidden;
grid-column: auto;
display: block;
margin-bottom: 0;
}
.score-pillar .pillar-fill {
display: block;
height: 100%;
background: var(--accent);
border-radius: 999px;
transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.score-pillar .pillar-fill.good { background: var(--success); }
.score-pillar .pillar-fill.warn { background: var(--warning); }
.score-pillar .pillar-fill.crit { background: var(--danger); }
.score-pillar .pillar-value {
text-align: right;
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
/* ───────── Compliance: posture list ───────── */
.posture-list { display: flex; flex-direction: column; gap: 0; }
.posture-item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: flex-start;
padding: 14px 4px;
border-bottom: 1px solid var(--divider);
}
.posture-item:last-child { border-bottom: 0; }
.posture-item .posture-icon {
width: 32px; height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center; justify-content: center;
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: 14px;
font-weight: 700;
}
.posture-item.pass .posture-icon { background: var(--success-subtle); color: var(--success); }
.posture-item.fail.severity-low .posture-icon { background: var(--bg-elevated); color: var(--text-muted); }
.posture-item.fail.severity-medium .posture-icon { background: var(--warning-subtle); color: var(--warning); }
.posture-item.fail.severity-high .posture-icon { background: var(--danger-subtle); color: var(--danger); }
.posture-item.fail.severity-critical .posture-icon { background: var(--danger-subtle); color: var(--danger); }
.posture-body { min-width: 0; }
.posture-label {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.posture-detail {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.posture-sev {
flex-shrink: 0;
align-self: center;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--bg-elevated);
color: var(--text-muted);
}
.posture-sev.pass { background: var(--success-subtle); color: var(--badge-allow-text); }
.posture-sev.severity-low { background: var(--bg-elevated); color: var(--text-muted); }
.posture-sev.severity-medium { background: var(--warning-subtle); color: var(--badge-ask-text); }
.posture-sev.severity-high { background: var(--danger-subtle); color: var(--badge-deny-text); }
.posture-sev.severity-critical { background: var(--danger-subtle); color: var(--badge-deny-text); }
/* ───────── Compliance: area trend chart ───────── */
.area-chart { width: 100%; height: 200px; display: block; }
.area-chart .grid-line { stroke: var(--divider); stroke-width: 1; }
.area-chart .grid-lbl { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.area-chart .area-allowed { fill: color-mix(in srgb, var(--success) 14%, transparent); }
.area-chart .area-denied { fill: color-mix(in srgb, var(--danger) 22%, transparent); }
.area-chart .line-allowed { fill: none; stroke: var(--success); stroke-width: 1.5; }
.area-chart .line-denied { fill: none; stroke: var(--danger); stroke-width: 1.5; }
/* ───────── Compliance: dept coverage ───────── */
.dept-cov-list { display: flex; flex-direction: column; gap: 8px; }
.dept-cov-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-surface);
}
.dept-cov-row .name {
color: var(--text-primary);
font-weight: 500;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dept-cov-row .chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--bg-elevated);
color: var(--text-muted);
border: 1px solid transparent;
cursor: default;
}
.dept-cov-row .chip.has { background: var(--success-subtle); color: var(--badge-allow-text); }
.dept-cov-row .chip.missing { background: var(--danger-subtle); color: var(--badge-deny-text); }
/* ───────── Org: stat row + cards ───────── */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-value {
font-size: 1.45rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.stat-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* ───────── Org: members table rows ───────── */
.member-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-bottom: 1px solid var(--divider);
}
.member-row:last-child { border-bottom: 0; }
.member-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.member-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--brand);
color: var(--bg-surface);
display: inline-flex;
align-items: center; justify-content: center;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.member-name {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-email {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.3;
}
/* ───────── Org: key display (deploy / agent token) ───────── */
.key-display {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-top: 8px;
}
.key-display code {
flex: 1;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-primary);
word-break: break-all;
user-select: all;
background: transparent;
border: 0;
padding: 0;
}
/* ───────── Org: settings rows + toggle switch ───────── */
.setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--divider);
}
.setting-row:last-child { border-bottom: 0; }
.setting-label {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.setting-hint {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.5;
max-width: 540px;
}
.setting-value {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.setting-value input.form-control { width: 200px; height: 32px; }
.toggle-switch {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute;
inset: 0;
cursor: pointer;
background: var(--border-strong);
border-radius: 999px;
transition: background var(--transition);
}
.toggle-slider::before {
content: '';
position: absolute;
width: 16px; height: 16px;
left: 3px;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: transform var(--transition);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translate(16px, -50%); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* ───────── Org: agent-status indicator ───────── */
.agent-status {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--text-muted);
margin-right: 6px;
}
.agent-status.active { background: var(--success); box-shadow: 0 0 0 3px var(--success-ring); }
.agent-status.revoked { background: var(--danger); }
.agent-status.stale { background: var(--warning); }
/* ───────── Org / Endpoints: side drawer ───────── */
.drawer-backdrop {
position: fixed;
inset: 0;
background: var(--bg-overlay);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
backdrop-filter: blur(4px);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 480px;
max-width: 100%;
background: var(--bg-surface);
box-shadow: var(--shadow-lg);
border-left: 1px solid var(--border);
transform: translateX(100%);
transition: transform var(--transition);
display: flex;
flex-direction: column;
}
.drawer-backdrop.open .drawer { transform: translateX(0); }
.drawer-header {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--divider);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-shrink: 0;
}
.drawer-header h3 { font-size: 1.05rem; margin: 0; }
.drawer-body {
padding: 20px 22px;
overflow-y: auto;
flex: 1;
}
.drawer-body dl.kv {
display: grid;
grid-template-columns: 140px 1fr;
gap: 10px 16px;
margin: 0;
}
.drawer-body dl.kv dt {
color: var(--text-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
padding-top: 2px;
}
.drawer-body dl.kv dd {
margin: 0;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-primary);
word-break: break-all;
}
/* ───────── Org / Endpoints: expiry badge ───────── */
.expiry-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 11.5px;
font-weight: 600;
background: var(--bg-elevated);
color: var(--text-muted);
white-space: nowrap;
}
.expiry-badge.ok { background: var(--success-subtle); color: var(--badge-allow-text); border-color: transparent; }
.expiry-badge.warn { background: var(--warning-subtle); color: var(--badge-ask-text); border-color: transparent; }
.expiry-badge.crit { background: var(--danger-subtle); color: var(--badge-deny-text); border-color: transparent; }
.expiry-badge.none { background: var(--bg-elevated); color: var(--text-muted); }
/* ───────── Org: masked value (reveal-on-click) ───────── */
.masked-value {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition);
}
.masked-value:hover { border-color: var(--border-strong); color: var(--text-primary); }
.masked-value .masked-text {
font-family: var(--font-mono);
letter-spacing: 0.04em;
user-select: all;
}
/* ───────── Keyboard help table ───────── */
.kbd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kbd-table td { padding: 8px 4px; border-bottom: 1px solid var(--divider); color: var(--text-secondary); }
.kbd-table tr:last-child td { border-bottom: 0; }
.kbd-table kbd { margin-right: 4px; }
/* ───────── Misc helpers used by various pages ───────── */
.col-actions { text-align: right; white-space: nowrap; }
.row-check { width: 36px; padding-left: 14px; }
.text-center { text-align: center; }
.text-sm { font-size: 12.5px; }
.spinner {
width: 18px; height: 18px;
border: 2px solid var(--bg-elevated);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 700ms linear infinite;
display: inline-block;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
backdrop-filter: blur(2px);
}
.skeleton-row td { padding: 12px 14px; }
.skeleton-row .skeleton {
display: block;
height: 12px;
border-radius: 4px;
}
.empty-panel {
padding: 56px 24px;
text-align: center;
color: var(--text-muted);
}
/* Search box with leading icon */
.searchbox { position: relative; display: inline-block; flex: 1; max-width: 320px; }
.searchbox-input {
padding-left: 32px !important;
height: 32px !important;
}
.searchbox::before {
content: '';
position: absolute;
left: 10px; top: 50%;
width: 14px; height: 14px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.7;
}
[data-theme="dark"] .searchbox::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Bulk-action bar (rules.php / logs.php selection) */
.bulk-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--accent-subtle);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius);
margin-bottom: 12px;
font-size: 12.5px;
color: var(--accent);
}
.bulk-bar .bulk-count { font-weight: 700; }
.bulk-bar .toolbar-spacer { flex: 1; }
/* Form error inline messages */
.form-error {
font-size: 11.5px;
color: var(--danger);
margin-top: 4px;
}
/* Confirm modal helper */
.confirm-modal { max-width: 440px; }
.confirm-icon {
width: 40px; height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.confirm-icon.danger { background: var(--danger-subtle); color: var(--danger); }
.confirm-icon.warning { background: var(--warning-subtle); color: var(--warning); }
.confirm-icon.info { background: var(--info-subtle); color: var(--info); }
.confirm-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
/* Sparkline (small inline trend chart) */
.sparkline {
display: inline-block;
vertical-align: middle;
width: 60px;
height: 18px;
}
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
/* Endpoint table tiny match-preview */
.match-preview {
background: var(--bg-elevated);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.match-preview-title {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
font-family: var(--font-sans);
}
/* Logs: KPI rows in the side stats */
.kpi-rows { display: flex; flex-direction: column; gap: 10px; }
/* Chart row (logs page horizontal layout) */
.chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }
/* Sidebar section label (used as a hint above a list) */
.sidebar-section-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin: 12px 0 6px;
}
/* Account dropdown in the topbar */
.topbar-user-wrap { position: relative; }
button.topbar-user {
border: 0;
background: transparent;
font: inherit;
}
.user-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
padding: 6px;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--transition), transform var(--transition);
z-index: 50;
}
.user-menu.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.user-menu-head {
padding: 8px 10px 6px;
}
.user-menu-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.user-menu-email {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu-divider {
height: 1px;
background: var(--border);
margin: 6px 0;
}
.user-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
background: transparent;
color: var(--text-primary);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
}
.user-menu-item:hover {
background: var(--bg-elevated);
}
.user-menu-item svg {
color: var(--text-muted);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════
Command palette (⌘K) - added 2026-06-24
═══════════════════════════════════════════════════════════ */
.cmdk-backdrop {
position: fixed; inset: 0; z-index: 1200;
background: var(--bg-overlay);
display: flex; align-items: flex-start; justify-content: center;
padding-top: 12vh;
backdrop-filter: blur(2px);
animation: cmdk-fade .12s ease;
}
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
width: min(560px, 92vw);
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: cmdk-pop .12s ease;
}
@keyframes cmdk-pop { from { transform: translateY(-6px); opacity: .6; } to { transform: none; opacity: 1; } }
.cmdk-input {
width: 100%; border: none; outline: none;
background: transparent; color: var(--text-primary);
font-family: var(--font-sans); font-size: 1rem;
padding: 16px 18px;
border-bottom: 1px solid var(--divider);
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto; }
.cmdk-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
font-size: .88rem; color: var(--text-secondary);
}
.cmdk-item.active { background: var(--accent-subtle); color: var(--accent); }
.cmdk-item kbd {
font-family: var(--font-mono); font-size: .7rem;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: 4px; padding: 1px 6px; color: var(--text-muted);
}
.cmdk-empty { padding: 16px 12px; color: var(--text-muted); font-size: .85rem; text-align: center; }
/* ═══════════════════════════════════════════════════════════
Premium polish pass - added 2026-06-24 (additive, low-risk)
═══════════════════════════════════════════════════════════ */
/* Custom scrollbars for a more app-like feel */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-app); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); }
/* Crisper keyboard focus across interactive controls */
a:focus-visible, button:focus-visible, .nav-link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Subtle press feedback on primary/ghost buttons */
.btn:active:not(:disabled) { transform: translateY(.5px); }
/* Slightly richer topbar separation */
.topbar { backdrop-filter: saturate(1.1); }
/* Active nav link gets a soft underline accent (in addition to existing styling) */
.nav-link.active { position: relative; }
/* Polish pass (part 2) - typographic + motion refinements (low-risk) */
.page-header h1 { letter-spacing: -0.02em; }
.card { transition: box-shadow var(--transition), border-color var(--transition); }
.table-wrap table tbody tr { transition: background-color var(--transition); }
.badge { letter-spacing: .2px; }
.empty-panel .empty-icon { opacity: .82; }
/* Clickable cards (rule-posture etc.) get a gentle lift */
.card-link { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Status/scope chips read a touch crisper */
.chip, .ep-gchip, .ep-hero-gchip { letter-spacing: .2px; }
/* ═══════════════════════════════════════════════════════════
Round-2 chart library styles - added 2026-06-24
═══════════════════════════════════════════════════════════ */
.chart-tip {
position: fixed; z-index: 1300; pointer-events: none;
background: var(--bg-surface); color: var(--text-primary);
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
box-shadow: var(--shadow-md); padding: 7px 10px; font-size: .76rem;
line-height: 1.5; max-width: 280px;
}
.chart-tip .ct-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-tip .ct-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.chart-tip .ct-head { font-weight: 700; margin-bottom: 3px; }
.chart-tip .ct-val { font-family: var(--font-mono); margin-left: auto; font-weight: 600; }
.chart-skeleton {
border-radius: var(--radius); width: 100%;
background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 37%, var(--bg-elevated) 63%);
background-size: 400% 100%; animation: chart-shimmer 1.3s ease infinite;
}
@keyframes chart-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.chart-empty {
display: flex; align-items: center; justify-content: center; text-align: center;
color: var(--text-muted); font-size: .82rem; border: 1px dashed var(--border);
border-radius: var(--radius); padding: 20px;
}
.dg-chart { width: 100%; height: auto; display: block; overflow: visible; }
.dg-chart .grid-line { stroke: var(--divider); stroke-width: 1; }
.dg-chart .axis-label { fill: var(--text-muted); font-size: 10px; font-family: var(--font-sans); }
.dg-chart .ln-area { opacity: .14; }
.dg-chart .ln-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dg-chart .ln-dot { stroke: var(--bg-surface); stroke-width: 1.5; }
.dg-chart .ln-pt { stroke: var(--bg-surface); stroke-width: 1.25; }
.dg-chart .bar-rect { transition: opacity .12s ease; }
.dg-chart .bar-rect:hover { opacity: .82; }
.dg-chart .guide { stroke: var(--text-muted); stroke-dasharray: 3 3; opacity: .5; }
.chart-legend2 { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; justify-content: center; }
.chart-legend2 .li { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-secondary); }
.chart-legend2 .li .dot { width: 9px; height: 9px; border-radius: 2px; }
/* Heatmap */
.dg-heatmap { width: 100%; }
.dg-heatmap .hm-cell { rx: 2; transition: opacity .1s ease; cursor: default; }
.dg-heatmap .hm-cell:hover { stroke: var(--text-primary); stroke-width: 1.5; }
.dg-heatmap .hm-lab { fill: var(--text-muted); font-size: 9px; font-family: var(--font-sans); }
.hm-scale { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 8px; font-size: .68rem; color: var(--text-muted); }
.hm-scale .sw { width: 14px; height: 10px; border-radius: 2px; }
/* Gauge */
.dg-gauge { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.dg-gauge .g-track { stroke: var(--bg-elevated); fill: none; }
.dg-gauge .g-val { stroke-linecap: round; fill: none; transition: stroke-dashoffset .6s ease; }
.dg-gauge .g-num { fill: var(--text-primary); font-weight: 700; font-family: var(--font-mono); }
.dg-gauge .g-cap { font-size: .72rem; color: var(--text-secondary); text-align: center; }
/* 100% stacked composition bar */
.dg-stack { display: flex; flex-direction: column; gap: 10px; }
.dg-stack .row { display: grid; grid-template-columns: 110px 1fr 52px; align-items: center; gap: 10px; }
.dg-stack .row .name { font-size: .76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-stack .row .track { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--bg-elevated); }
.dg-stack .row .seg { height: 100%; transition: opacity .12s ease; }
.dg-stack .row .seg:hover { opacity: .82; }
.dg-stack .row .tot { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; text-align: right; color: var(--text-primary); }
/* Generic chart card grid */
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.viz-grid.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }
/* Gauge row (shared). Panel-title is defined once, canonically, above. */
.gauge-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-around; align-items: flex-start; }
/* Reusable 3-stage Sankey (renderSankey3) */
.dgsk { width: 100%; height: auto; display: block; overflow: visible; }
.dgsk .l { fill: none; opacity: .5; transition: opacity .16s ease; }
.dgsk .links:hover .l { opacity: .12; }
.dgsk .links .l:hover { opacity: .95; }
.dgsk .n { stroke: var(--bg-surface); stroke-width: 1.5; }
.dgsk .lab { fill: var(--text-primary); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; stroke-linejoin: round; }
.dgsk .lab .c { fill: var(--text-muted); font-weight: 500; font-family: var(--font-mono); }
.dgsk .head { fill: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Reusable horizontal bar list (renderHBar) */
.dg-hbar { display: flex; flex-direction: column; gap: 9px; }
.dg-hbar .hb-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.dg-hbar .hb-top { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; }
.dg-hbar .hb-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.dg-hbar .hb-val { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); flex: 0 0 auto; }
.dg-hbar .hb-track { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.dg-hbar .hb-fill { height: 100%; border-radius: 4px; transition: width .4s ease; min-width: 2px; }
/* 3-up viz grid that collapses on small screens (replaces inline grid styles) */
.viz-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1024px) { .viz-grid.cols-3 { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════
Searchable combobox (enhanceSelect) - added 2026-06-24 r3
═══════════════════════════════════════════════════════════ */
.dgcb { position: relative; display: inline-block; width: 100%; }
.dgcb-native { display: none !important; }
/* A card with `overflow:hidden` clips the combobox's absolutely-positioned
dropdown, so it gets cut off inside the card (the reported bug). Any card
that *hosts* a popover-style control must not clip. Scoped via :has() so
ordinary content cards (charts/tables) keep their rounded-corner clipping. */
.card:has(.dgcb),
.card:has(.dash-customize-menu),
.card:has(.dg-views-panel) { overflow: visible; }
.dgcb-trigger {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; text-align: left; cursor: pointer; font: inherit;
}
.dgcb-trigger .dgcb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgcb-trigger .dgcb-label.is-placeholder { color: var(--text-muted); }
.dgcb-trigger .dgcb-chev { flex: 0 0 auto; opacity: .55; transition: transform var(--transition); }
.dgcb-trigger[aria-expanded="true"] .dgcb-chev { transform: rotate(180deg); }
.dgcb-trigger.is-disabled { opacity: .55; cursor: not-allowed; }
/* ── Row action ("kebab") menu ────────────────────────────────────────
Shared, body-portaled, fixed-position menu (set inline by JS) so it never
gets clipped by a table-wrap/card overflow. Trigger = .dg-kebab-btn. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dg-kebab-btn { line-height: 0; }
.dg-kebab-btn .dg-kebab-dots { display: block; opacity: .7; }
.dg-kebab-btn:hover .dg-kebab-dots, .dg-kebab-btn[aria-expanded="true"] .dg-kebab-dots { opacity: 1; }
.dg-kebab-menu {
position: fixed; z-index: 1400; min-width: 188px;
background: var(--bg-surface); border: 1px solid var(--border-strong);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
padding: 6px; animation: dgcb-in .1s ease;
}
.dg-kebab-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: none; background: none; cursor: pointer;
font: inherit; font-size: .85rem; color: var(--text-secondary);
text-align: left; border-radius: var(--radius-sm);
}
.dg-kebab-item:hover, .dg-kebab-item:focus-visible { background: var(--bg-hover); color: var(--text-primary); outline: none; }
.dg-kebab-item.danger { color: var(--danger); }
.dg-kebab-item.danger:hover, .dg-kebab-item.danger:focus-visible { background: var(--danger-subtle); color: var(--danger); }
.dg-kebab-item[disabled] { opacity: .5; cursor: not-allowed; }
.dg-kebab-item .dg-kebab-ico { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.dg-kebab-item:hover .dg-kebab-ico, .dg-kebab-item:focus-visible .dg-kebab-ico, .dg-kebab-item.danger .dg-kebab-ico { color: currentColor; }
.dg-kebab-sep { height: 1px; background: var(--divider); margin: 5px 2px; }
.dgcb-panel.dgcb-up { top: auto; bottom: calc(100% + 4px); }
.dgcb-panel {
position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
min-width: 200px;
background: var(--bg-surface); border: 1px solid var(--border-strong);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
padding: 6px; overflow: hidden;
animation: dgcb-in .1s ease;
}
@keyframes dgcb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dgcb-search {
width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--bg-elevated); color: var(--text-primary);
padding: 7px 10px; font: inherit; font-size: .82rem; outline: none; margin-bottom: 6px;
}
.dgcb-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.dgcb-list { max-height: 260px; overflow-y: auto; }
.dgcb-option {
padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
font-size: .85rem; color: var(--text-secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dgcb-option.active { background: var(--accent-subtle); color: var(--accent); }
.dgcb-option.selected { font-weight: 600; color: var(--text-primary); }
.dgcb-option.selected.active { color: var(--accent); }
.dgcb-option.disabled { opacity: .5; cursor: not-allowed; }
.dgcb-empty { padding: 12px 10px; text-align: center; color: var(--text-muted); font-size: .82rem; }
/* ═══════════════════════════════════════════════════════════
Round 3 - display prefs + styling refresh (2026-06-24)
═══════════════════════════════════════════════════════════ */
/* Compact table density (user-menu toggle) */
.density-compact table th, .density-compact table td { padding-top: 6px; padding-bottom: 6px; }
.density-compact .card-body { padding: 14px 16px; }
.density-compact .metric-grid { gap: 10px; }
.density-compact .ep-activity-cell { gap: 2px; }
.density-compact .dgcb-trigger, .density-compact .form-control { height: 32px; }
/* Nav active: a crisp accent underline indicator */
.topbar-nav .nav-link { position: relative; }
.topbar-nav .nav-link.active::after {
content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
background: var(--accent); border-radius: 2px 2px 0 0;
}
/* Topbar: subtle depth + sticky polish */
.topbar { box-shadow: var(--shadow-xs); }
/* Cards: smoother interactive feedback */
.card.is-hover:hover, a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* Buttons: a touch more presence */
.btn-primary { box-shadow: var(--shadow-xs); }
.btn-primary:hover { box-shadow: var(--shadow-sm); }
/* Inputs/selects: consistent focus ring already set globally; tighten radius harmony */
.searchbox-input:focus, .dgcb-search:focus { box-shadow: 0 0 0 2px var(--accent-ring); }
/* Section headings: a little more hierarchy */
.section-title { letter-spacing: -0.01em; }
/* Topbar search affordance (opens command palette) */
.topbar-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; transition: var(--transition); }
.topbar-search:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.topbar-search .topbar-search-kbd { font-family: var(--font-mono); font-size: .68rem; background: var(--bg-surface);
border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-muted); }
@media (max-width: 720px) { .topbar-search .topbar-search-text, .topbar-search .topbar-search-kbd { display: none; } }
/* ── Copy-to-clipboard affordance (R3-26) ──────────────── */
.copy-btn { display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; padding: 0; margin-left: 6px; vertical-align: middle;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--text-muted); cursor: pointer; transition: var(--transition); flex: none; }
.copy-btn:hover { color: var(--text); background: var(--bg-elevated); border-color: var(--border); }
.copy-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); color: var(--text); }
.copy-btn .copy-ok { display: none; color: var(--success, #16a34a); }
.copy-btn.copied { color: var(--success, #16a34a); border-color: transparent; background: transparent; }
.copy-btn.copied .copy-ico { display: none; }
.copy-btn.copied .copy-ok { display: inline; }
/* Monospace value paired with a copy button (IDs, tokens, machine-ids). */
.copy-value { font-family: var(--font-mono); font-size: .82rem; color: var(--text-secondary);
word-break: break-all; }
.copy-pair { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
/* ── Multi-select searchable picker (R3-7) ─────────────── */
.dg-mpick { position: relative; width: 100%; }
.dg-mpick-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
min-height: 38px; padding: 5px 8px; background: var(--bg-input, var(--bg-elevated));
border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: text;
transition: var(--transition); }
.dg-mpick-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.dg-mpick-chips { display: contents; }
.dg-mpick-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
padding: 2px 4px 2px 9px; background: var(--accent-soft, var(--bg-surface));
border: 1px solid var(--border); border-radius: 999px; font-size: .8rem;
color: var(--text); white-space: nowrap; }
.dg-mpick-x { display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; padding: 0; border: none; background: transparent;
color: var(--text-muted); cursor: pointer; border-radius: 999px; font-size: 1rem; line-height: 1; }
.dg-mpick-x:hover { background: var(--danger-soft, var(--bg-surface)); color: var(--danger); }
.dg-mpick-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.dg-mpick-input { flex: 1 1 80px; min-width: 80px; border: none; outline: none;
background: transparent; color: var(--text); font: inherit; font-size: .85rem; padding: 3px 2px; }
.dg-mpick-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, var(--shadow-md)); overflow: hidden; }
.dg-mpick-list { max-height: 264px; overflow-y: auto; padding: 4px; }
.dg-mpick-option { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
border-radius: var(--radius-sm); cursor: pointer; }
.dg-mpick-option.active { background: var(--bg-surface-hover, var(--bg-surface)); }
.dg-mpick-option.selected { color: var(--text); }
.dg-mpick-check { display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; flex: none; color: var(--accent); font-weight: 700; font-size: .85rem; }
.dg-mpick-otext { display: flex; flex-direction: column; min-width: 0; }
.dg-mpick-olabel { font-size: .86rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-mpick-osub { font-size: .74rem; color: var(--text-muted); font-family: var(--font-mono);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-mpick-empty { padding: 14px 12px; text-align: center; color: var(--text-muted); font-size: .82rem; }
/* ── Policy templates (R3-14) ──────────────────────────── */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpl-card { display: flex; flex-direction: column; justify-content: space-between;
gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg-surface); transition: var(--transition); }
.tpl-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.tpl-card-name { font-weight: 600; font-size: .92rem; color: var(--text); margin-bottom: 4px; }
.tpl-card-desc { font-size: .8rem; color: var(--text-secondary); margin: 0 0 4px; line-height: 1.45; }
.tpl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpl-card-count { font-size: .72rem; color: var(--text-muted); font-family: var(--font-mono); }
.tpl-card .tpl-use { align-self: flex-start; }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: 1fr; } }
/* ── Empty states - unified & polished (R3-33) ─────────── */
.empty-panel { padding: 48px 24px; text-align: center; color: var(--text-muted); }
.empty-panel .empty-icon,
.empty-state .empty-icon {
width: 60px; height: 60px; margin: 0 auto 16px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 50% 32%, var(--bg-elevated), var(--bg-surface));
border: 1px solid var(--border); box-shadow: var(--shadow-xs);
color: var(--text-secondary); font-family: var(--font-mono);
font-size: 23px; font-weight: 600; opacity: 1; line-height: 1;
}
.empty-panel .empty-title,
.empty-state .empty-title { color: var(--text-primary, var(--text)); font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; }
.empty-panel .empty-msg,
.empty-state .empty-message,
.empty-state .empty-msg {
color: var(--text-muted); font-size: 13px; max-width: 440px; margin: 0 auto 18px; line-height: 1.55; }
.empty-panel .empty-cta, .empty-state .empty-cta { margin-top: 2px; }
/* ── Accessibility sweep (R3-29) ───────────────────────── */
/* Skip-to-content link: off-screen until focused. */
.skip-link { position: fixed; left: 12px; top: -56px; z-index: 2000; padding: 9px 16px;
background: var(--accent); color: #fff; border-radius: var(--radius-sm);
font-size: .85rem; font-weight: 600; text-decoration: none;
box-shadow: var(--shadow-md); transition: top .16s ease; }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
/* Consistent keyboard focus ring for links/buttons/rows that lack their own.
Inputs and selects keep their existing box-shadow ring (no double indicator). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
[tabindex="0"]:focus-visible, summary:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* The skip-link target is programmatically focused; don't show a ring on it. */
.main:focus, .main:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ── Responsive polish (R3-30) ─────────────────────────── */
@media (max-width: 760px) {
/* Breadcrumbs wrap instead of overflowing. */
.crumbs { flex-wrap: wrap; row-gap: 2px; }
/* Wide tables scroll horizontally rather than being clipped. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Inline forms (assign policy, add rule, add group members) stack and
give their controls / pickers the full width on small screens. */
.inline-form { flex-direction: column; align-items: stretch; }
.inline-form .filter-group { width: 100%; min-width: 0; }
.inline-form .form-control,
.inline-form .dgcb,
.inline-form .dg-mpick { width: 100% !important; min-width: 0 !important; }
.inline-form-mpick .btn { align-self: flex-start; }
/* Comboboxes / multi-pickers never exceed their container. */
.dgcb, .dg-mpick { max-width: 100%; }
.dgcb-panel { left: 0; right: 0; }
/* Page header: title and actions stack. */
.page-header { flex-direction: column; gap: 10px; }
.page-header-actions { width: 100%; }
}
@media (max-width: 480px) {
.modal-backdrop { padding: 12px; }
.modal { max-height: calc(100vh - 24px); }
.cmdk { width: calc(100vw - 24px); }
/* Toolbars (search + buttons) wrap so nothing is cut off. */
.toolbar > div { flex-wrap: wrap; }
}
/* ── Sortable table headers (R4-2) ─────────────────────── */
/* Visual affordance for makeSortable() (app.js): the click/keyboard wiring
already existed but had no cursor or caret, so columns looked un-sortable. */
th.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable-col:hover { color: var(--text); }
th.sortable-col::after { content: '\2195'; margin-left: 5px; font-size: .72em; opacity: .3; }
th.sortable-col.sort-asc::after { content: '\2191'; opacity: .95; color: var(--accent); }
th.sortable-col.sort-desc::after { content: '\2193'; opacity: .95; color: var(--accent); }
th.sortable-col:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ── Saved filter views (R4-3) ─────────────────────────── */
.dg-views { position: relative; display: inline-block; }
.dg-views-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 210px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, var(--shadow-md)); padding: 4px; }
.dg-view-row { display: flex; align-items: center; gap: 2px; }
.dg-view-apply { flex: 1; text-align: left; background: none; border: none; color: var(--text);
padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: .82rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-view-apply:hover { background: var(--bg-surface); }
.dg-view-del { background: none; border: none; color: var(--text-muted); cursor: pointer;
width: 24px; height: 28px; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; flex: none; }
.dg-view-del:hover { color: var(--danger); background: var(--bg-surface); }
.dg-views-empty { padding: 10px 12px; color: var(--text-muted); font-size: .8rem; text-align: center; }
.dg-views-sep { height: 1px; background: var(--border); margin: 4px 0; }
.dg-view-save { width: 100%; text-align: left; background: none; border: none; color: var(--accent);
padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.dg-view-save:hover { background: var(--bg-surface); }
/* ── Dashboard security posture (R4-7 / R4-9) ──────────── */
.dash-risk { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.risk-factors { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 11px; }
.risk-factor { font-size: .78rem; }
.rf-top { display: flex; justify-content: space-between; align-items: baseline; }
.rf-label { color: var(--text-secondary); }
.rf-score { font-family: var(--font-mono); font-weight: 700; }
.rf-track { height: 6px; background: var(--bg-elevated); border-radius: 3px; margin: 4px 0 3px; overflow: hidden; }
.rf-fill { height: 100%; border-radius: 3px; transition: width .4s ease; min-width: 2px; }
.rf-danger { color: var(--danger); } .rf-warning { color: var(--warning); } .rf-success { color: var(--success); }
.rf-fill.rf-danger { background: var(--danger); } .rf-fill.rf-warning { background: var(--warning); } .rf-fill.rf-success { background: var(--success); }
.rf-detail { color: var(--text-muted); font-size: .72rem; }
/* ── Manual reduce-motion preference (R4-28) ───────────── */
[data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Settings page layout */
.settings-grid { display: flex; flex-direction: column; gap: 0; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 0; border-top: 1px solid var(--divider); }
.set-row:first-child { border-top: none; }
.set-info { min-width: 0; }
.set-label { font-size: .9rem; font-weight: 600; color: var(--text); }
.set-hint { font-size: .78rem; color: var(--text-muted); margin-top: 2px; max-width: 520px; }
.set-control { flex: none; }
/* ── Clickable KPI cards (R4-11) ───────────────────────── */
a.metric-link { text-decoration: none; color: inherit; cursor: pointer; }
a.metric-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
a.metric-link { transition: var(--transition); }
/* ── Since-last-visit banner (R4-13) ───────────────────── */
.dash-since { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px;
background: var(--accent-subtle); border: 1px solid var(--accent-ring, var(--border)); border-radius: var(--radius);
font-size: .84rem; color: var(--text); }
.dash-since-ico { color: var(--accent); font-size: .7rem; }
.dash-since a { color: var(--accent); font-weight: 600; text-decoration: none; }
.dash-since a:hover { text-decoration: underline; }
.dash-since-x { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.dash-since-x:hover { color: var(--text); }
/* ── Onboarding checklist (R4-12) ──────────────────────── */
.onboard-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.onboard-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.onboard-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border);
border-radius: 999px; font-size: .82rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); }
.onboard-step:hover { border-color: var(--accent); color: var(--text); }
.onboard-step .ob-check { font-weight: 700; color: var(--text-muted); }
.onboard-step.done { color: var(--text-muted); border-color: var(--divider); }
.onboard-step.done .ob-check { color: var(--success); }
/* ── Segmented control + KPI window bar (R4-10) ────────── */
.kpi-windowbar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
.kpi-wlabel { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface); }
.seg-btn { appearance: none; border: none; background: none; cursor: pointer; padding: 5px 12px; font: inherit;
font-size: .78rem; font-weight: 600; color: var(--text-muted); border-right: 1px solid var(--border); transition: var(--transition); }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--text); background: var(--bg-elevated); }
.seg-btn.active { background: var(--accent); color: #fff; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ── Logs quick-filter chips + regex toggle (R4-20) ────── */
.log-regex-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-muted); margin-top: 4px; cursor: pointer; }
.log-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.log-chips-lbl { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.log-chip { appearance: none; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary);
border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.log-chip:hover { border-color: var(--accent); color: var(--text); }
/* ── Audit detail diff table (R4-24) ───────────────────── */
.diff-table { width: 100%; font-size: .8rem; }
.diff-table td, .diff-table th { padding: 6px 10px; }
.diff-table .diff-k { font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.diff-table .diff-old { color: var(--text-muted); text-decoration: line-through; }
.diff-table .diff-new { color: var(--text); }
.diff-table tr.diff-changed { background: var(--warning-subtle); }
/* ── Blast-radius preview (R4-18) ──────────────────────── */
.mg-blast { margin-top: 10px; font-size: .82rem; color: var(--text-secondary); }
.mg-blast:empty { display: none; }
.mg-blast .mg-blast-ico { color: var(--accent); margin-right: 4px; }
.mg-blast strong { color: var(--text); }
/* ── Clickable bar chart (R4-21) ───────────────────────── */
.dg-chart-clickable .bar-hit { cursor: pointer; }
/* ── Explain denial (R4-23) ────────────────────────────── */
.log-explain-hit { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .82rem; flex-wrap: wrap; }
.log-explain-hit code { font-family: var(--font-mono); }
/* ═══════════════════════════════════════════════════════════
ROUND 5 - Design system
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
Left sidebar navigation (replaced the former top nav bar)
Layout: .app is a flex row → [ .dg-sidebar | .app-body ].
Desktop = persistent sidebar (collapsible to an icon rail);
<=1024px = off-canvas drawer toggled by the topbar burger.
═══════════════════════════════════════════════════════════ */
:root { --sidebar-w: 250px; --sidebar-w-collapsed: 66px; }
.dg-sidebar {
width: var(--sidebar-w);
flex: 0 0 var(--sidebar-w);
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-surface);
border-right: 1px solid var(--border);
z-index: 60;
transition: width var(--transition);
}
/* Header / brand (aligns with the topbar height to form one continuous bar) */
.dg-side-head {
height: var(--topbar-h);
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
flex-shrink: 0;
border-bottom: 1px solid var(--divider);
}
.dg-side-head .dg-brand { overflow: hidden; min-width: 0; }
.dg-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-side-close { display: none; }
/* Scrolling nav list */
.dg-side-nav {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
scrollbar-width: thin;
}
.dg-side-nav::-webkit-scrollbar { width: 8px; }
.dg-side-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.dg-side-nav::-webkit-scrollbar-track { background: transparent; }
.dg-nav-link {
display: flex;
align-items: center;
gap: 11px;
height: 38px;
padding: 0 11px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
position: relative;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.dg-nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.dg-nav-link.active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.dg-nav-link.active::before {
content: '';
position: absolute;
left: -12px; top: 7px; bottom: 7px;
width: 3px; border-radius: 0 3px 3px 0;
background: var(--accent);
}
.dg-nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.dg-nav-link svg { opacity: 0.8; }
.dg-nav-link.active .dg-nav-ic svg { opacity: 1; color: var(--accent); }
.dg-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Group header + caret */
.dg-nav-group { display: flex; flex-direction: column; }
.dg-nav-group-btn { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.dg-nav-caret { flex-shrink: 0; opacity: 0.55; transition: transform var(--transition); }
.dg-nav-group.is-expanded > .dg-nav-group-btn .dg-nav-caret { transform: rotate(180deg); }
/* An active group header stays quiet in the expanded sidebar (no fill/bar) — its
active child carries the highlight, so the row isn't doubly emphasised. The
collapsed rail re-asserts a prominent active header below (the child is hidden there). */
.dg-nav-group-btn.active { background: transparent; }
.dg-nav-group-btn.active::before { content: none; }
/* Group children — inline accordion in the expanded sidebar */
.dg-nav-sub {
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
max-height: 0;
transition: max-height var(--transition);
}
.dg-nav-group.is-expanded > .dg-nav-sub { max-height: 260px; }
.dg-nav-sub-head { display: none; }
.dg-nav-sublink { padding-left: 38px; height: 34px; }
.dg-nav-sublink .dg-nav-ic { width: 15px; height: 15px; }
.dg-nav-sublink.active::before { top: 6px; bottom: 6px; }
/* Footer / account (menu opens upward) */
.dg-side-foot { flex-shrink: 0; border-top: 1px solid var(--divider); padding: 10px; }
.dg-acct-wrap { position: relative; }
.dg-acct-btn {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 7px 9px; border: 0; background: transparent;
border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary);
font: inherit; text-align: left;
}
.dg-acct-btn:hover { background: var(--bg-hover); }
.dg-acct-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dg-acct-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-acct-email { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-acct-caret { flex-shrink: 0; opacity: 0.5; }
.dg-side-foot .user-menu { top: auto; bottom: calc(100% + 6px); left: 8px; right: 8px; min-width: 0; }
/* Slim topbar (now inside .app-body) */
.topbar { gap: 8px; padding: 0 16px; }
.topbar-spacer { flex: 1 1 auto; min-width: 8px; }
.dg-side-toggle, .dg-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
border: 0; background: transparent; border-radius: var(--radius-sm);
color: var(--text-secondary); cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.dg-side-toggle:hover, .dg-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dg-bell { position: relative; }
.dg-bell .notif-badge {
position: absolute; top: 3px; right: 3px; margin: 0;
min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
font-size: 9.5px; border: 1.5px solid var(--bg-surface);
}
/* Off-canvas backdrop (mobile) */
.dg-side-backdrop { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 150; }
.dg-side-backdrop[hidden] { display: none; }
/* ── Desktop (>=1025px): collapsed = icon rail + click fly-outs ── */
@media (min-width: 1025px) {
.dg-side-backdrop { display: none !important; }
html[data-sidebar="collapsed"] .dg-sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
html[data-sidebar="collapsed"] .dg-brand-text,
html[data-sidebar="collapsed"] .dg-nav-label,
html[data-sidebar="collapsed"] .dg-nav-caret,
html[data-sidebar="collapsed"] .dg-acct-meta,
html[data-sidebar="collapsed"] .dg-acct-caret { display: none; }
html[data-sidebar="collapsed"] .dg-side-head { padding: 0; justify-content: center; }
html[data-sidebar="collapsed"] .dg-side-nav { padding: 12px 9px; }
html[data-sidebar="collapsed"] .dg-nav-link { justify-content: center; padding: 0; gap: 0; height: 40px; }
html[data-sidebar="collapsed"] .dg-nav-link.active::before { left: -9px; }
/* In the rail the active group icon is the only cue, so re-assert it here */
html[data-sidebar="collapsed"] .dg-nav-group-btn.active { background: var(--bg-elevated); }
html[data-sidebar="collapsed"] .dg-nav-group-btn.active::before { content: ''; }
html[data-sidebar="collapsed"] .dg-acct-btn { justify-content: center; padding: 7px 0; }
/* In the rail the children fly out (position:fixed; JS sets coords) */
html[data-sidebar="collapsed"] .dg-nav-sub {
position: fixed; left: 0; top: 0; max-height: none; overflow: visible;
min-width: 190px; background: var(--bg-surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 200;
opacity: 0; transform: translateX(-4px); pointer-events: none;
transition: opacity var(--transition), transform var(--transition);
}
html[data-sidebar="collapsed"] .dg-nav-group.is-flyout-open > .dg-nav-sub { opacity: 1; transform: none; pointer-events: auto; }
html[data-sidebar="collapsed"] .dg-nav-sub-head {
display: block; padding: 3px 10px 6px; font-size: var(--fs-2xs);
text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted);
}
html[data-sidebar="collapsed"] .dg-nav-sublink { padding-left: 11px; height: 34px; }
html[data-sidebar="collapsed"] .dg-nav-sublink.active::before { display: none; }
html[data-sidebar="collapsed"] .dg-side-foot .user-menu { left: 8px; right: auto; min-width: 220px; }
}
/* ── Mobile (<=1024px): off-canvas drawer (collapsed pref ignored) ── */
@media (max-width: 1024px) {
.dg-sidebar {
position: fixed; left: 0; top: 0; bottom: 0; height: auto;
width: var(--sidebar-w); flex-basis: var(--sidebar-w);
transform: translateX(-100%);
transition: transform var(--transition);
box-shadow: var(--shadow-lg); z-index: 200;
}
.dg-sidebar.is-open { transform: none; }
.dg-side-close {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto; width: 32px; height: 32px; border: 0; background: transparent;
font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.dg-side-close:hover { background: var(--bg-hover); color: var(--text-primary); }
}
/* Keep the global search reachable on smaller screens (icon-only instead of hidden) */
@media (max-width: 1080px) {
.topbar-search { display: inline-flex; min-width: 0; width: 34px; height: 34px; padding: 0; justify-content: center; }
.topbar-search-text, .topbar-search-kbd { display: none; }
}
/* ── R5-1: Design tokens (additive) ────────────────────── */
:root {
/* 8pt spacing scale */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
/* Type scale */
--fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13px;
--fs-md: 14px; --fs-lg: 1rem; --fs-xl: 1.15rem; --fs-2xl: 1.5rem; --fs-3xl: 1.6rem;
/* Line-height */
--lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.6;
/* Letter-spacing */
--ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.14em;
/* Motion */
--duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 300ms; --duration-slower: 600ms;
--ease-standard: cubic-bezier(.4, 0, .2, 1);
/* Layout widths */
--modal-sm: 380px; --modal-md: 520px; --modal-lg: 720px; --modal-xl: 960px;
/* Inset highlight (top edge) */
--shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.12);
/* Chart series palette (replaces hardcoded hex in app.js DG_SERIES) */
--series-1: var(--accent); --series-2: var(--success); --series-3: var(--warning);
--series-4: var(--danger); --series-5: var(--info);
--series-6: #a855f7; --series-7: #0ea5e9; --series-8: #f97316;
/* Risk-category accents (used by denial-category widgets) */
--cat-destructive: var(--danger); --cat-network: #a855f7; --cat-package: var(--warning);
--cat-privilege: #0ea5e9; --cat-scm: var(--accent);
}
[data-theme="dark"] {
--shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.06);
--series-6: #c084fc; --series-7: #38bdf8; --series-8: #fb923c;
--cat-network: #c084fc; --cat-privilege: #38bdf8;
}
/* ── Per-service posture top-denied list (R5-11) ───────── */
.svc-top { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.svc-top-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin-bottom: var(--space-1); }
.svc-top-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.svc-top-name { min-width: 96px; color: var(--text-secondary); }
.svc-top-row code { flex: 1; font-family: var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-top-cnt { font-family: var(--font-mono); font-weight: 700; color: var(--danger); }
/* ── Denial anomaly banner (R5-12) ─────────────────────── */
.dash-anomaly-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4); background: var(--danger-subtle); border: 1px solid var(--danger);
border-radius: var(--radius); font-size: var(--fs-base); color: var(--text); }
.dash-anomaly-ico { color: var(--danger); }
.dash-anomaly-banner a { margin-left: auto; flex: none; }
/* ── Posture check framework refs + fix CTAs (R5-14/R5-28) ─ */
.posture-fw { display: inline-block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted);
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-left: var(--space-2); vertical-align: middle; }
.posture-fix { display: inline-block; margin-left: var(--space-2); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-decoration: none; }
.posture-fix:hover { text-decoration: underline; }
/* ── R5-5: button & shadow polish ──────────────────────── */
.btn-primary { box-shadow: var(--shadow-xs), var(--shadow-inset-top); }
.btn-primary:hover { box-shadow: var(--shadow-sm), var(--shadow-inset-top); }
.btn-primary:active { box-shadow: var(--shadow-xs); transform: translateY(.5px); }
/* empty-state default SVG sits cleanly in the icon circle */
.empty-icon svg { display: block; }
/* ── R5-24: toast polish ───────────────────────────────── */
.toast { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info { border-left: 3px solid var(--accent); }
/* ── R5-25: loading shimmer polish ─────────────────────── */
.skeleton, .chart-skeleton {
background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface-hover, var(--bg-hover, var(--bg-surface))) 50%, var(--bg-elevated) 75%);
background-size: 200% 100%;
animation: dg-shimmer 1.4s ease-in-out infinite;
}
@keyframes dg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ── Endpoint peer comparison (R5-17) ──────────────────── */
.ep-peer-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0;
padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-base);
background: var(--bg-elevated); border: 1px solid var(--border); }
.ep-peer-row.tone-danger { border-left: 3px solid var(--danger); }
.ep-peer-row.tone-success { border-left: 3px solid var(--success); }
.ep-peer-row.tone-muted { border-left: 3px solid var(--border-strong); }
.ep-peer-ico { color: var(--text-muted); }
/* ── Policy rule dry-run result (R5-9) ─────────────────── */
.ar-test-result { margin-top: var(--space-2); font-size: var(--fs-base); }
.ar-test-result:empty { display: none; }
.ar-test-hit { color: var(--text); }
/* ── Logs column visibility (R5-19) ────────────────────── */
.log-cols { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.log-col-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
#logs-table.hide-mid th:nth-child(3), #logs-table.hide-mid td:nth-child(3) { display: none; }
/* ── Alert fire acknowledge (R5-20) ────────────────────── */
.fire-ack { appearance: none; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-muted);
border-radius: var(--radius-sm); padding: 1px 8px; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; margin-left: 6px; }
.fire-ack:hover { border-color: var(--accent); color: var(--text); }
tr.fire-acked { opacity: .55; }
tr.fire-acked .fire-ack { border-color: var(--success); color: var(--success); }
/* ── R5-29: responsive polish (new widgets & pages) ────── */
@media (max-width: 760px) {
.dash-risk { flex-direction: column; align-items: stretch; }
.rep-score { flex-direction: column; align-items: stretch; }
.rep-kpis { grid-template-columns: repeat(2, 1fr); }
.kpi-windowbar { justify-content: flex-start; }
.svc-top-name { min-width: 72px; }
.dash-anomaly-banner { flex-wrap: wrap; }
.dash-anomaly-banner a { margin-left: 0; }
.act-item { grid-template-columns: 26px 1fr; }
.act-meta { grid-column: 2; flex-direction: row; gap: var(--space-2); margin-top: 2px; }
.set-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.set-control { width: 100%; }
.ep-peer-row { align-items: flex-start; }
.log-cols, .kpi-windowbar { flex-wrap: wrap; }
}
@media (max-width: 480px) {
.rep-kpis { grid-template-columns: 1fr 1fr; }
.posture-fw { display: none; }
}
/* ── Contextual help icon (R6-20) ──────────────────────── */
.dg-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
margin-left: 6px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border);
color: var(--text-muted); font-size: 9px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; user-select: none; }
.dg-help:hover { color: var(--accent); border-color: var(--accent); }
.dg-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ── At-risk endpoints list (R6-4) ─────────────────────── */
.atrisk-list { display: flex; flex-direction: column; }
.atrisk-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1);
border-top: 1px solid var(--divider); text-decoration: none; color: var(--text); }
.atrisk-row:first-child { border-top: none; }
.atrisk-row:hover { background: var(--bg-elevated); }
.atrisk-host { font-weight: 600; font-size: var(--fs-base); }
.atrisk-reason { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.panel-link { float: right; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.panel-link:hover { text-decoration: underline; }
/* ── Endpoint risk panel (R6-6) ────────────────────────── */
.ep-risk-panel { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-3);
padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); flex-wrap: wrap; }
.ep-risk-score { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.ep-risk-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1; }
.ep-risk-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }
.ep-risk-score.tone-danger .ep-risk-num { color: var(--danger); }
.ep-risk-score.tone-warning .ep-risk-num { color: var(--warning); }
.ep-risk-score.tone-success .ep-risk-num { color: var(--success); }
.ep-risk-factors { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-2); }
.rf-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.rf-row .rf-n { color: var(--text-secondary); }
.rf-row .rf-track { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.rf-row .rf-d { text-align: right; color: var(--text-muted); font-family: var(--font-mono); }
/* ── Posture history / SLA tile / exceptions / evidence (R6-9..12) ── */
.posture-trend { display: flex; align-items: center; gap: var(--space-4); }
.posture-spark { flex: 1; min-width: 120px; height: 44px; }
.posture-spark .sparkline { width: 100%; height: 44px; }
.posture-trend-now { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; }
.posture-trend-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sla-tile { display: flex; align-items: center; gap: var(--space-4); }
.sla-num { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.sla-num.tone-success { color: var(--success); } .sla-num.tone-warning { color: var(--warning); } .sla-num.tone-danger { color: var(--danger); }
.sla-meta { flex: 1; font-size: var(--fs-sm); color: var(--text-secondary); }
.sla-bar { height: 6px; background: var(--bg-elevated); border-radius: 3px; margin: var(--space-1) 0; overflow: hidden; }
.sla-fill { height: 100%; border-radius: 3px; }
.sla-fill.tone-success { background: var(--success); } .sla-fill.tone-warning { background: var(--warning); } .sla-fill.tone-danger { background: var(--danger); }
.posture-accept { appearance: none; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-muted);
border-radius: var(--radius-sm); padding: 1px 8px; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; margin-left: 6px; }
.posture-accept:hover { border-color: var(--warning); color: var(--warning); }
.posture-item.accepted { opacity: .7; }
.posture-item.accepted .posture-icon { color: var(--warning); }
@media print {
.topbar, .crumbs, .page-header-actions, .mobile-drawer, .dg-sidebar, .dg-side-backdrop, .skip-link, .no-print, #org-select, .selector-row, .section-heading button { display: none !important; }
body { background: #fff !important; }
.card { break-inside: avoid; box-shadow: none !important; border-color: #ccc !important; }
}
/* ── Fleet health & version adoption (R6-13/14) ────────── */
.health-adopt { display: flex; align-items: center; gap: var(--space-4); }
.ha-score { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.ha-num { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.ha-score.tone-success .ha-num { color: var(--success); } .ha-score.tone-warning .ha-num { color: var(--warning); } .ha-score.tone-danger .ha-num { color: var(--danger); }
.ha-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }
.ha-detail { flex: 1; font-size: var(--fs-sm); }
.ha-line { margin-bottom: var(--space-1); }
.ha-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-elevated); margin: var(--space-1) 0; }
.ha-seg { display: block; height: 100%; }
/* ── Toast action button (R6-24) ───────────────────────── */
.toast-action { appearance: none; border: 1px solid var(--border); background: var(--bg-surface); color: var(--accent);
border-radius: var(--radius-sm); padding: 3px 10px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; margin-left: var(--space-2); white-space: nowrap; }
.toast-action:hover { border-color: var(--accent); }
/* ── Command palette group headers (R6-25) ─────────────── */
.cmdk-group { padding: 8px 14px 4px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
letter-spacing: var(--ls-wide); color: var(--text-muted); pointer-events: none; }
.cmdk-list .cmdk-group:first-child { padding-top: 4px; }
/* ── Topbar quick-create menu (R6-15) ──────────────────── */
.quicknew-wrap { position: relative; }
.quicknew-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 190px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, var(--shadow-md)); padding: 4px; display: none; }
.quicknew-menu.open { display: block; }
.quicknew-menu .user-menu-item { width: 100%; }
@media (max-width: 720px) { .quicknew-wrap .quicknew-btn .qn-text { display: none; } }
/* ── Pinned organisations (R6-17) ──────────────────────── */
.pin-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 220px; overflow-y: auto; }
.pin-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 10px; font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.pin-row:hover { border-color: var(--border-strong); }
.pin-row .pin-star { color: var(--text-muted); font-size: .9rem; }
.pin-row.pinned .pin-star { color: var(--warning); }
/* ═══════════════════════════════════════════════════════════
R6-29 - Visual rhythm & micro-interactions (additive)
═══════════════════════════════════════════════════════════ */
/* Interactive cards lift consistently; links/buttons settle on press. */
a.card, .card.is-hover, a.metric-link, a.atrisk-row, .tpl-card, .pin-row { transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
a.card:active, a.metric-link:active { transform: translateY(0); }
.btn { transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.btn:active { transform: translateY(.5px); }
/* Panel titles: consistent rhythm + optional inline link on the right. */
.panel-title { display: flex; align-items: center; gap: var(--space-2); }
.panel-title .panel-link, .panel-title .dg-help { margin-left: auto; }
.panel-title .dg-help { margin-left: var(--space-2); }
/* Section headings: even vertical rhythm. */
.section-heading { margin-top: var(--space-6); }
/* Tables: subtle row hover for scannability. */
.table-wrap tbody tr:hover { background: var(--bg-elevated); }
.table-wrap tbody tr.skeleton-row:hover { background: transparent; }
/* Badges: align baseline with adjacent text. */
.badge { vertical-align: middle; }
/* Keyboard focus is always visible and consistent. */
:where(a, button, [tabindex="0"], input, select, textarea):focus-visible { outline-offset: 2px; }
/* ── Dashboard customize menu (R6-21) ──────────────────── */
.dash-customize-wrap { position: relative; display: inline-block; }
.dash-customize-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg, var(--shadow-md)); padding: var(--space-2); }
.dcm-title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin-bottom: var(--space-2); }
.dcm-row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 2px; font-size: var(--fs-sm); cursor: pointer; }
/* ═══════════════════════════════════════════════════════════════════
ROUND 7 - Mobile responsiveness overhaul (consolidated)
Breakpoints: 1024 (tablet) · 768 (small tablet) · 640 (phone) · 420 (small phone)
Appended last so it authoritatively governs responsive behaviour.
═══════════════════════════════════════════════════════════════════ */
/* R7-12: horizontal-overflow guard. .main is the content scroll area and is NOT
the sticky context for the topbar, so clipping it never breaks the sticky bar. */
.main { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
pre, code, .copy-value { overflow-wrap: anywhere; word-break: break-word; }
.table-wrap { max-width: 100%; }
/* ── Tablet & below (<=1024) ───────────────────────────── */
@media (max-width: 1024px) {
/* R7-2: wide tables scroll (closes the old 720-760 dead-zone). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.viz-grid, .viz-grid.cols-3 { grid-template-columns: 1fr; }
}
/* ── Small tablet (<=768) ──────────────────────────────── */
@media (max-width: 768px) {
:root { --content-pad: 16px; }
.metric-grid, .metric-grid.cols-6, .metric-grid.cols-5, .metric-grid.cols-4, .metric-grid.cols-3,
.ep-stats, #risk-kpis, .rep-kpis { grid-template-columns: repeat(2, 1fr) !important; }
.dash-grid, .dash-grid-3, .chart-row, .compliance-split, .score-panel, .rep-grid { grid-template-columns: 1fr !important; }
.page-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.page-header-actions { width: 100%; flex-wrap: wrap; }
.selector-row, .selector-card { flex-direction: column; align-items: stretch; }
.selector-group, .selector-card .selector-group { width: 100%; min-width: 0; }
/* Filter bars + inline-width controls go full-width (beats inline min-width). */
.filters-bar, .ep-filters { gap: var(--space-2); }
.filters-bar .filter-group, .ep-filters .filter-group, .filter-group { flex: 1 1 100%; min-width: 0 !important; }
.filters-bar .form-control, .ep-filters .form-control, .filter-group .form-control,
.filters-bar input, .filters-bar select, .form-group[style*="min-width"] { min-width: 0 !important; width: 100% !important; }
/* dg-stack composition: drop the fixed name column. */
.dg-stack .row { grid-template-columns: 84px 1fr 44px; gap: var(--space-2); }
}
/* ── Phone (<=640) ─────────────────────────────────────── */
@media (max-width: 640px) {
.metric-grid, .metric-grid.cols-6, .metric-grid.cols-5, .metric-grid.cols-4, .metric-grid.cols-3,
.ep-stats, #risk-kpis, .rep-kpis { grid-template-columns: repeat(2, 1fr) !important; }
/* R7-4: keep the identifying first column visible while a wide table scrolls. */
#ep-table tbody td:nth-child(2), #risk-ep-table tbody td:first-child, #audit-table tbody td:first-child { position: sticky; left: 0; background: var(--bg-surface); z-index: 1; }
/* R7-3: hide low-priority columns so the essentials fit. */
#ep-table th:nth-child(4), #ep-table td:nth-child(4), /* Department */
#ep-table th:nth-child(7), #ep-table td:nth-child(7) { /* Version */ display: none; }
#audit-table th:nth-child(5), #audit-table td:nth-child(5), /* Service */
#audit-table th:nth-child(6), #audit-table td:nth-child(6), /* Platform */
#audit-table th:nth-child(7), #audit-table td:nth-child(7) { /* Dept */ display: none; }
#logs-table th:nth-child(3), #logs-table td:nth-child(3) { display: none; } /* Machine ID (also has a toggle) */
.ep-id-mid { display: none; }
/* Charts breathe less; donut shrinks. */
.donut { --donut-size: 128px; }
/* Dropdown menus never exceed the viewport. */
.quicknew-menu, .dash-customize-menu, .dg-views-panel, .dgcb-panel, .dg-mpick-panel { left: auto; right: 0; max-width: calc(100vw - 24px); }
.user-menu { right: 0; max-width: calc(100vw - 16px); }
/* Section rhythm tightens. */
.section-heading { margin-top: var(--space-5); }
.card-body { padding: var(--space-4); }
}
/* ── Small phone (<=420) ───────────────────────────────── */
@media (max-width: 420px) {
.metric-grid, .metric-grid.cols-6, .metric-grid.cols-5, .metric-grid.cols-4, .metric-grid.cols-3,
.ep-stats, #risk-kpis, .rep-kpis { grid-template-columns: 1fr !important; }
#ep-table th:nth-child(6), #ep-table td:nth-child(6) { display: none; } /* Activity */
#risk-ep-table th:nth-child(3), #risk-ep-table td:nth-child(3),
#risk-ep-table th:nth-child(4), #risk-ep-table td:nth-child(4) { display: none; } /* denial rate, denied */
.main { padding-left: 12px; padding-right: 12px; }
}
/* ── R7-5: touch targets on small screens (desktop unchanged) ── */
@media (max-width: 768px) {
.btn { min-height: 38px; }
.btn-sm { min-height: 34px; height: auto; padding: 6px 12px; }
.btn-icon { width: 40px; height: 40px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
.table-wrap td, .table-wrap th { padding-top: 12px; padding-bottom: 12px; }
.mobile-drawer-panel a { padding: 13px 12px; }
.user-menu-item, .quicknew-menu .user-menu-item { padding: 12px 12px; }
.topbar-user { min-height: 40px; }
.ep-row, .log-row, .audit-row { min-height: 44px; }
}
/* ── R7-6/R7-7: mobile drawer polish + topbar declutter ── */
.mobile-drawer-panel { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.md-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.md-close { font-size: 1.4rem; }
.md-search { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 11px 12px; margin-bottom: var(--space-3);
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.md-search:hover { border-color: var(--accent); color: var(--text); }
.md-section-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin: var(--space-3) 0 var(--space-1); }
.md-nav { display: flex; flex-direction: column; gap: 2px; }
.md-act { text-align: left; background: none; border: none; color: var(--text-secondary); font: inherit; padding: 13px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.md-act:hover { background: var(--bg-elevated); color: var(--text); }
/* Topbar: hide the +New button on phones (it lives in the drawer's Create group). */
@media (max-width: 640px) { .quicknew-wrap { display: none; } }
/* ═══════════════════════════════════════════════════════════════════
ROUND 7 - Design maturity (additive; appended last)
═══════════════════════════════════════════════════════════════════ */
:root {
--fs-h1: 1.55rem; --fs-h2: 1.15rem; --fs-h3: .95rem;
--shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shadow-card-hover: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05);
}
html { scroll-behavior: smooth; }
/* R7-17: typography hierarchy applied consistently. */
.page-header h1 { font-size: var(--fs-h1); letter-spacing: -.015em; line-height: var(--lh-tight); }
.page-header-sub { color: var(--text-muted); }
.card-header h2, .card-header h3 { font-size: var(--fs-h3); letter-spacing: -.005em; }
.section-title { font-size: var(--fs-h2); letter-spacing: -.01em; }
/* R7-18: section headers - consistent eyebrow with a subtle accent tick. */
.section-heading { align-items: center; }
.section-heading .section-title { position: relative; padding-left: 11px; }
.section-heading .section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 1em; border-radius: 2px; background: var(--accent); opacity: .85; }
/* R7-19: card elevation & surface refinement. */
.card { box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
a.card:hover, .card.is-hover:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
.card-header { border-bottom: 1px solid var(--divider); }
/* R7-21: button micro-interactions + clearer hierarchy. */
.btn { transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.btn-primary:hover { box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-ring); }
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text); }
/* R7-23: stronger, consistent keyboard focus. */
:where(a,button,[role="button"],[tabindex="0"],input,select,textarea,summary):focus-visible {
outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* R7-24: topbar refinement - separator before the controls + sticky shadow. */
.topbar { box-shadow: 0 1px 0 var(--divider); }
.topbar-right { position: relative; }
.topbar-right::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
height: 22px; width: 1px; background: var(--divider); }
@media (max-width: 720px) { .topbar-right::before { display: none; } }
/* R7-25: subtle gradient wash behind page headers + key score panels. */
.page-header { position: relative; }
.score-ring, .dg-gauge { position: relative; }
/* R7-26: form input refinement. */
.form-control { transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.form-control:hover:not(:focus) { border-color: var(--border-strong); }
.form-control:focus { box-shadow: 0 0 0 3px var(--accent-ring); }
.form-control[aria-invalid="true"], .form-control.is-invalid { border-color: var(--danger); }
/* R7-27: sticky table headers on tall tables + scroll-margin for anchors. */
.table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-elevated); }
[id] { scroll-margin-top: 72px; }
/* R7-29 + R7-30: refined data tables - tabular numerics, zebra, breathable cells. */
table { font-variant-numeric: tabular-nums; }
.table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-elevated) 45%, transparent); }
.table-wrap tbody tr:hover { background: var(--bg-elevated); }
.table-wrap tbody tr.skeleton-row:nth-child(even), .table-wrap tbody tr.skeleton-row:hover { background: transparent; }
/* R7-20 + R7-31: unify badge/pill family - consistent radius, weight, baseline. */
.badge, .role-badge, .chip, .posture-sev { font-weight: 600; letter-spacing: .01em; }
.ep-status-pill, .badge { line-height: 1.4; }
/* ── R7-22: dark-mode punch (brighter accent/text, deeper depth) ── */
[data-theme="dark"] {
--accent: #8b93f8;
--accent-ring: rgba(139,147,248,.30);
--text-primary: #eceef3;
--text: #eceef3;
--shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
--shadow-card-hover: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
}
/* ── R7-25: subtle gradient accents (premium, low-noise) ── */
.page-header::after {
content: ''; position: absolute; inset: -24px -40px auto -40px; height: 120px; z-index: -1; pointer-events: none;
background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.dash-risk #dash-risk-gauge, .score-ring { filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent)); }
/* ── R7-33: brand lockup refinement ── */
.topbar-brand { font-weight: 700; letter-spacing: .04em; gap: 9px; }
.topbar-brand .brand-logo { width: 22px; height: 22px; }
/* ── R7-28: empty-state + skeleton consistency ── */
.empty-panel { padding: var(--space-8) var(--space-5); }
.empty-title { font-size: var(--fs-h3); }
.skeleton { border-radius: var(--radius-sm); }
/* ── R7-32: bottom-sheet modals on phones ── */
@media (max-width: 640px) {
.modal-backdrop { align-items: flex-end; padding: 0; }
.modal { width: 100%; max-width: 100% !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: 92vh; transform: translateY(100%); }
.modal-backdrop.active .modal { transform: translateY(0); }
.modal-header { position: sticky; top: 0; background: var(--bg-surface); z-index: 1; }
.drawer { width: 100%; max-width: 100%; }
}
/* ── R7-34: auth page mobile polish ── */
@media (max-width: 640px) {
.auth-main { padding: 28px 16px; }
.auth-card { max-width: 100%; }
}
.auth-card { box-shadow: var(--shadow-card); }
/* ── R7-14: new-widget mobile safeguards ── */
@media (max-width: 640px) {
.rf-row, .ep-risk-panel .rf-row { grid-template-columns: 96px 1fr 52px; }
.ep-risk-panel { gap: var(--space-3); }
.health-adopt, .sla-tile, .posture-trend, .dash-risk, .ep-peer-row { flex-wrap: wrap; }
.svc-top-name { min-width: 64px; }
.atrisk-reason { max-width: 100%; }
.rep-score, .rep-kpis { gap: var(--space-2); }
}
/* ── Fix: topbar search is desktop-only ────────────────── */
/* An earlier unconditional rule re-enabled .topbar-search below 1080px, where
its 220px min-width pushed the topbar wider than the viewport (content no
longer spanned full width on phones). Authoritatively hide it <=1024; mobile
users get search via the nav drawer's "Search…" entry. */
@media (max-width: 1024px) {
.topbar-search { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
Round 8 — shared component styles (tokens only; dark-mode automatic).
════════════════════════════════════════════════════════════════════════ */
/* Watchlist star */
.dg-watch-star { background:none; border:none; cursor:pointer; padding:2px; line-height:1;
font-size:var(--star,16px); color:var(--text-disabled); transition:color var(--transition), transform var(--transition); }
.dg-watch-star:hover { transform:scale(1.18); color:var(--warning); }
.dg-watch-star.on { color:var(--warning); }
.dg-watch-star:focus-visible { outline:2px solid var(--accent-ring); border-radius:var(--radius-xs); }
/* Column chooser */
.dg-colchooser { position:relative; display:inline-block; }
.dg-colchooser > summary { list-style:none; cursor:pointer; }
.dg-colchooser > summary::-webkit-details-marker { display:none; }
.dg-colchooser-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:60;
background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
box-shadow:var(--shadow-lg); padding:8px; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.dg-colchooser-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-sm);
font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; }
.dg-colchooser-item:hover { background:var(--bg-hover); }
td.col-hidden, th.col-hidden { display:none; }
/* Date preset chip row */
.dg-date-presets { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
/* Tags */
.dg-tags { display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.dg-tag { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px;
background:var(--accent-subtle); color:var(--accent); border-radius:999px; font-size:var(--fs-2xs);
font-weight:600; letter-spacing:.02em; }
.dg-tag .dg-tag-x { cursor:pointer; opacity:.6; font-size:13px; line-height:1; }
.dg-tag .dg-tag-x:hover { opacity:1; }
.dg-note-indicator { color:var(--text-muted); font-size:var(--fs-xs); cursor:help; }
/* Compare table (endpoints) */
.dg-compare { width:100%; border-collapse:collapse; }
.dg-compare th, .dg-compare td { padding:9px 12px; border-bottom:1px solid var(--divider); text-align:left;
font-size:var(--fs-sm); vertical-align:top; }
.dg-compare th.metric-name { color:var(--text-muted); font-weight:500; width:170px; }
.dg-compare thead th { color:var(--text-primary); font-weight:600; font-size:var(--fs-base); }
.dg-compare td.num { text-align:right; font-variant-numeric:tabular-nums; }
/* Remediation queue / generic action list */
.dg-actionlist { display:flex; flex-direction:column; gap:8px; }
.dg-action-item { display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center;
padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); }
.dg-action-item .dg-action-icon { width:28px; height:28px; border-radius:var(--radius-sm); display:flex;
align-items:center; justify-content:center; background:var(--warning-subtle); color:var(--warning); }
.dg-action-item.ok .dg-action-icon { background:var(--success-subtle); color:var(--success); }
.dg-action-body { min-width:0; }
.dg-action-title { font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.dg-action-sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
/* Diff / key-value rows (policy compare, payload preview) */
.dg-kv-grid { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:var(--fs-sm); }
.dg-kv-grid dt { color:var(--text-muted); }
.dg-kv-grid dd { margin:0; color:var(--text-primary); }
.dg-code-block { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
padding:10px 12px; font-family:var(--font-mono); font-size:var(--fs-xs); white-space:pre-wrap; word-break:break-all;
color:var(--text-secondary); max-height:280px; overflow:auto; }
/* New-row flash for live tail */
@keyframes dgRowFlash { from { background:var(--accent-subtle); } to { background:transparent; } }
tr.dg-row-new td { animation:dgRowFlash 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) { tr.dg-row-new td { animation:none; } }
/* Inline toolbar helper */
.dg-inline-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dg-live-dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block;
box-shadow:0 0 0 0 var(--success-ring); animation:dgPulse 1.8s infinite; }
@keyframes dgPulse { 0%{box-shadow:0 0 0 0 var(--success-ring);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion: reduce) { .dg-live-dot { animation:none; } }
/* Watched endpoint row highlight (R8) */
.dg-watched-row td { background:color-mix(in srgb, var(--warning) 6%, transparent); }
.dg-watched-row:hover td { background:color-mix(in srgb, var(--warning) 11%, transparent); }
/* Generic bulk action bar (R8) — page-agnostic (policies, etc.) */
.dg-bulkbar { display:none; align-items:center; gap:12px; padding:10px 16px; margin-bottom:14px;
background:var(--accent-subtle); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:var(--radius); }
.dg-bulkbar.show { display:flex; }
.dg-bulkbar .count { font-weight:700; color:var(--accent); }
.dg-bulkbar .spacer { flex:1; }
body:not(.is-admin) .col-select { display:none; }
/* Diff/lint helpers */
.dg-diff-only-a { background:color-mix(in srgb, var(--danger) 9%, transparent); }
.dg-diff-only-b { background:color-mix(in srgb, var(--success) 9%, transparent); }
.dg-lint-finding { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; background:var(--bg-surface); }
.dg-lint-finding .lint-head { font-weight:600; font-size:var(--fs-base); }
/* Topbar org switcher (R8).
NOTE: use background-color (longhand), not the `background` shorthand — the
shorthand resets background-repeat/position/size and makes the inherited