@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&display=swap');
:root {
/* ========================================
Design Tokens (Unified Design System)
======================================== */
/* Spacing Scale (8px Grid) */
--space-0: 0;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
/* Typography */
--font-sans: 'Fira Sans', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Fira Code', 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Font Size */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-lg: 17px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
/* Font Weight */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
/* Line Height */
--lh-tight: 1.25;
--lh-base: 1.5;
--lh-loose: 1.75;
/* Semantic Colors (Light Mode) */
--color-bg: #f1f8f4;
--color-surface-1: #ffffff;
--color-surface-2: #ecf5ef;
--color-surface-hover: rgba(22, 163, 74, 0.1);
--color-text: #0b1710;
--color-text-muted: #4c6456;
--color-text-inverse: #f3fdf8;
--color-border: rgba(16, 64, 41, 0.2);
--color-border-subtle: rgba(16, 64, 41, 0.11);
--color-primary: #22c55e;
--color-primary-hover: #16a34a;
--color-primary-light: rgba(34, 197, 94, 0.18);
--color-primary-dark: #15803d;
--color-cta: #10b981;
--color-cta-hover: #059669;
--color-success: #22c55e;
--color-success-light: rgba(34, 197, 94, 0.18);
--color-warning: #f59e0b;
--color-warning-light: rgba(245, 158, 11, 0.2);
--color-danger: #ef4444;
--color-danger-light: rgba(239, 68, 68, 0.2);
/* Z-Index Layers */
--z-base: 0;
--z-sticky: 40;
--z-dropdown: 50;
--z-drawer: 100;
--z-modal: 120;
--z-toast: 110;
/* Component constants */
--nav-height: 64px;
/* ========================================
Legacy Compatibility Aliases
(Will be removed in Phase 4)
======================================== */
/* Core colors */
--bg: var(--color-bg);
--panel: var(--color-surface-2);
--panel-solid: var(--color-surface-1);
--text: var(--color-text);
--muted: var(--color-text-muted);
--text-muted: var(--color-text-muted);
--text-inverse: var(--color-text-inverse);
--border: var(--color-border);
--border-light: var(--color-border-subtle);
/* Shadows */
--shadow: 0 3px 16px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 16px 42px rgba(15, 23, 42, 0.13);
--shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.22);
/* Brand colors */
--primary: var(--color-primary);
--primary-hover: var(--color-primary-hover);
--primary-light: var(--color-primary-light);
--primary-dark: var(--color-primary-dark);
--primary-2: var(--color-primary-hover);
--cta: var(--color-cta);
--cta-hover: var(--color-cta-hover);
/* Status colors */
--danger: var(--color-danger);
--danger-hover: #dc2626;
--danger-light: var(--color-danger-light);
--success: var(--color-success);
--success-light: var(--color-success-light);
--warning: var(--color-warning);
--warning-light: var(--color-warning-light);
/* Layout */
--radius: 16px;
--radius-sm: 12px;
--radius-lg: 22px;
/* Transitions */
--transition-fast: 120ms ease;
--transition-base: 220ms ease;
--transition-slow: 320ms ease;
/* 2026 Dashboard Enhancements */
--glass-border: var(--border);
--surface-hover: var(--color-surface-hover);
--accent-cyan: #34d399;
--accent-purple: #10b981;
}
html[data-theme='dark'] {
/* Semantic Colors (Dark Mode) */
--color-bg: #020805;
--color-surface-1: #08130d;
--color-surface-2: #0f1f17;
--color-surface-hover: rgba(74, 222, 128, 0.14);
--color-text: #e6fff0;
--color-text-muted: #9cc5ae;
--color-text-inverse: #03120a;
--color-border: rgba(92, 157, 120, 0.34);
--color-border-subtle: rgba(92, 157, 120, 0.2);
--color-primary: #34d399;
--color-primary-hover: #6ee7b7;
--color-primary-light: rgba(52, 211, 153, 0.26);
--color-primary-dark: #10b981;
--color-cta: #22c55e;
--color-cta-hover: #4ade80;
--color-success: #4ade80;
--color-success-light: rgba(74, 222, 128, 0.24);
--color-warning: #fbbf24;
--color-warning-light: rgba(251, 191, 36, 0.2);
--color-danger: #fb7185;
--color-danger-light: rgba(251, 113, 133, 0.2);
/* Legacy Compatibility Aliases */
--bg: var(--color-bg);
--panel: var(--color-surface-1);
--panel-solid: var(--color-surface-2);
--text: var(--color-text);
--muted: var(--color-text-muted);
--text-muted: var(--color-text-muted);
--text-inverse: var(--color-text-inverse);
--border: var(--color-border);
--border-light: var(--color-border-subtle);
--glass-border: var(--color-border);
--surface-hover: var(--color-surface-hover);
/* Shadow adjustments for dark mode */
--shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.66);
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
appearance: none;
border: none;
background: none;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary) 72%, #ffffff 28%);
outline-offset: 2px;
border-radius: 6px;
}
a {
color: inherit;
}
code {
font-family: var(--font-mono);
}
#root {
min-height: 100%;
}
.skipLink {
position: fixed;
left: var(--space-2);
top: var(--space-2);
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--panel-solid);
color: var(--text);
font-weight: var(--font-semibold);
text-decoration: none;
z-index: var(--z-toast);
transform: translateY(-200%);
transition: transform var(--transition-fast);
}
.skipLink:focus {
transform: translateY(0);
}
.appFrame,
.container {
width: 100%;
margin: 0 auto;
height: 100vh;
padding: 0;
box-sizing: border-box;
}
.appShell,
.shell {
display: grid;
grid-template-columns: 240px 1fr;
gap: 0;
height: 100%;
transition: grid-template-columns var(--transition-base);
}
@media (max-width: 900px) {
.appFrame,
.container {
width: 100%;
padding: 0;
}
.appShell,
.shell {
grid-template-columns: 1fr;
}
}
/* Tabs */
.tabs {
display: flex;
gap: 4px;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px;
}
.tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: var(--text-sm);
font-weight: var(--font-medium);
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
transition: all 0.15s ease;
}
.tab:hover {
background: var(--surface-hover);
color: var(--text);
}
.tab--active {
background: var(--primary);
color: var(--text-inverse);
}
.tab--active:hover {
background: var(--primary-hover);
color: var(--text-inverse);
}
.tabBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: var(--font-semibold);
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
.tab--active .tabBadge {
background: rgba(255, 255, 255, 0.2);
}
.card {
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
}
.cardHeader {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.cardBody {
padding: 16px;
flex-grow: 1;
}
/* ==========================================================
New App Layout (2026 redesign)
========================================================== */
.sidebar {
background: transparent;
border: none;
border-right: 1px solid var(--border);
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mainPanel {
background: transparent;
border: none;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.appHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: transparent;
}
.mainBody {
padding: 16px;
flex-grow: 1;
overflow-y: auto;
min-height: 0;
}
@media (max-width: 900px) {
.sidebar {
display: none;
}
.mainBody {
padding-bottom: 86px;
}
}
.authFrame {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px 12px;
}
.authCenter {
width: min(680px, 100%);
}
.h1 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
}
.h2 {
font-size: 16px;
font-weight: 700;
margin: 0;
}
.muted {
color: var(--muted);
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.stack {
display: grid;
gap: 12px;
}
.usagePage {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.usagePageCard {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.usagePageCard > .cardBody:not(.usageTableScroller) {
flex: 0 0 auto;
}
.usageTableScroller {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
.usageTableScroller .table thead th {
position: sticky;
top: 0;
background: var(--panel-solid);
z-index: 2;
}
.usageTableScroller .table thead th:last-child {
z-index: 3;
}
.grid2 {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
.grid2 {
grid-template-columns: 1fr;
}
.usagePage {
height: auto;
}
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 6px 10px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
}
html[data-theme='dark'] .pill {
background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
}
.badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
border: 1px solid var(--border);
}
.badge[data-variant='success'] {
color: var(--success);
border-color: color-mix(in srgb, var(--success) 35%, var(--border));
background: color-mix(in srgb, var(--success) 12%, transparent);
}
.badge[data-variant='warning'] {
color: var(--warning);
border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.badge[data-variant='info'] {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.badge[data-variant='danger'] {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.badge[data-variant='neutral'] {
color: var(--muted);
background: rgba(148, 163, 184, 0.14);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--panel-solid);
color: var(--text);
font-weight: 500;
font-size: 13px;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
user-select: none;
}
.btn--xs {
padding: 4px 8px;
font-size: 12px;
}
.btn--sm {
padding: 6px 12px;
font-size: 13px;
}
.btn--icon {
padding: 6px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn:hover:not(:disabled) {
background: var(--color-surface-hover);
border-color: var(--border);
}
.btn[data-variant='primary'] {
background: var(--primary);
color: white;
border-color: transparent;
}
.btn[data-variant='primary']:hover:not(:disabled) {
background: var(--primary-hover);
}
.btn[data-variant='danger'] {
background: color-mix(in srgb, var(--danger) 12%, var(--panel-solid));
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.btn[data-variant='ghost'] {
background: transparent;
}
.input,
.select,
.textarea {
width: 100%;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--panel-solid);
color: var(--text);
font-size: 13px;
outline: none;
transition: border-color var(--transition-fast);
}
.textarea {
min-height: 96px;
resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
}
.label {
font-weight: 650;
font-size: 13px;
}
.help {
font-size: 12px;
color: var(--muted);
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed; /* Force fixed column widths */
}
.table th,
.table td {
padding: 10px 12px;
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
text-align: left;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Simplified: no sticky actions column */
.table th:last-child,
.table td:last-child {
position: static;
right: auto;
background: transparent;
z-index: auto;
}
.table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 500;
}
.table tbody tr:nth-child(even) td {
background-color: transparent;
}
.mono {
font-family: var(--font-mono);
}
.nav {
padding: 14px;
}
.navHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
border-bottom: 1px solid var(--border);
}
.navTitle {
display: flex;
gap: 10px;
align-items: center;
}
.navTitleText {
display: grid;
gap: 2px;
}
.navBrand {
font-weight: 500;
letter-spacing: -0.02em;
font-size: 14px;
}
.navItemLabel {
font-weight: 500;
}
.navConnectionSummary {
font-size: 12px;
opacity: 0.85;
margin-top: 6px;
}
.navItem {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
border: none;
background: transparent;
cursor: pointer;
text-align: left;
color: var(--color-text-muted);
transition: background var(--transition-fast), color var(--transition-fast);
position: relative;
font-size: 13px;
}
.navItem:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--color-text);
}
.navItem[data-active='true'] {
background: transparent;
border: none;
color: var(--color-text);
font-weight: 600;
}
.navItem[data-active='true']::before {
content: '';
position: absolute;
left: -14px;
top: 8px;
bottom: 8px;
width: 2px;
border-radius: 99px;
background: var(--primary);
}
html[data-theme='dark'] .navItem:hover {
background: rgba(255, 255, 255, 0.04);
}
.navItemIcon {
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--text) 65%, transparent);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.navItemIcon svg {
display: block;
width: 100%;
height: 100%;
}
.navFooter {
padding: 14px;
border-top: 1px solid var(--color-border-subtle);
margin-top: auto;
}
/* Sidebar Toggle Button */
.sidebarToggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebarToggle:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
html[data-theme='dark'] .sidebarToggle:hover {
background: rgba(255, 255, 255, 0.04);
}
.sidebarToggle svg {
display: block;
transition: transform var(--transition-base);
}
/* Connection Info in Sidebar */
.navConnectionInfo {
margin-top: 12px;
}
/* ========================================
Collapsible Sidebar Styles
======================================== */
.appFrame.sidebar-collapsed .appShell,
.container.sidebar-collapsed .shell {
grid-template-columns: 56px 1fr;
}
/* Hide text elements when collapsed */
.appFrame.sidebar-collapsed .navItemLabel,
.appFrame.sidebar-collapsed .navTitleText,
.appFrame.sidebar-collapsed .navConnectionInfo,
.appFrame.sidebar-collapsed .sidebarToggle span,
.container.sidebar-collapsed .navItemLabel,
.container.sidebar-collapsed .navTitleText,
.container.sidebar-collapsed .navConnectionInfo,
.container.sidebar-collapsed .sidebarToggle span {
display: none;
}
/* Center elements when collapsed */
.appFrame.sidebar-collapsed .navTitle,
.container.sidebar-collapsed .navTitle {
justify-content: center;
}
.appFrame.sidebar-collapsed .navItem,
.container.sidebar-collapsed .navItem {
justify-content: center;
padding: 8px;
}
.appFrame.sidebar-collapsed .navItemIcon,
.container.sidebar-collapsed .navItemIcon {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--text);
}
.appFrame.sidebar-collapsed .sidebarToggle svg,
.container.sidebar-collapsed .sidebarToggle svg {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.appFrame.sidebar-collapsed .sidebarToggle,
.container.sidebar-collapsed .sidebarToggle {
justify-content: center;
padding: 8px;
}
.appFrame.sidebar-collapsed .navHeader,
.container.sidebar-collapsed .navHeader {
justify-content: center;
padding: 12px 8px;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--border);
}
.topbarTitle {
display: grid;
gap: 4px;
}
@media (max-width: 900px) {
.appHeader {
flex-direction: column;
align-items: stretch;
}
}
.kpis {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
.kpis {
grid-template-columns: 1fr;
}
}
.overviewBentoRow {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
@media (max-width: 900px) {
.overviewBentoRow {
grid-template-columns: 1fr;
}
}
.kpiCard {
position: relative;
text-align: left;
padding: 16px;
cursor: pointer;
overflow: hidden;
background: var(--panel-solid);
border: 1px solid var(--border);
transition: border-color var(--transition-fast);
}
.kpiCard:hover {
border-color: var(--color-border);
}
.kpiCardHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.kpiCardIcon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
}
.kpiCardIcon[data-variant='keys'] {
background: var(--primary-light);
color: var(--primary);
}
.kpiCardIcon[data-variant='tokens'] {
background: var(--success-light);
color: var(--success);
}
.kpiCardIcon[data-variant='usage'] {
background: var(--warning-light);
color: var(--warning);
}
.kpiValue {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.kpiCardFooter {
display: flex;
align-items: center;
justify-content: space-between;
}
.kpiCardArrow {
opacity: 0;
color: var(--muted);
font-weight: 500;
}
.kpiCard:hover .kpiCardArrow {
opacity: 0.5;
}
/* Metrics Card */
.metricsCardHeader {
align-items: flex-start;
}
.metricsCardTitleStack {
display: grid;
gap: 4px;
}
.metricsLivePill {
font-size: 11px;
font-weight: 500;
padding: 4px 8px;
user-select: none;
}
.liveDot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--success);
}
@media (prefers-reduced-motion: reduce) {
.liveDot { animation: none; }
}
.metricsGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-3);
margin: 0;
}
.metricTile {
background: var(--color-surface-2);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.metricLabel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 650;
margin: 0;
}
.metricValue {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--text);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.metricValue[data-variant='success'] { color: var(--success); }
.metricValue[data-variant='warning'] { color: var(--warning); }
.metricValue[data-variant='danger'] { color: var(--danger); }
.dialogOverlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: rgba(0, 0, 0, 0.4);
display: grid;
place-items: center;
padding: var(--space-2);
}
.dialog {
width: min(720px, 100%);
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.dialogHeader {
padding: 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dialogBody {
padding: 16px;
}
.toastWrap {
position: fixed;
right: 14px;
bottom: 14px;
display: grid;
gap: 10px;
z-index: var(--z-toast);
}
.toast {
width: min(420px, calc(100vw - 28px));
padding: 12px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--panel-solid);
position: relative;
transform: translateX(0);
opacity: 1;
transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.toast--exiting {
transform: translateX(120%);
opacity: 0;
}
.toastDismiss {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 4px;
margin-top: -2px;
margin-right: -4px;
border-radius: 6px;
display: flex;
transition: color var(--transition-fast), background var(--transition-fast);
}
.toastDismiss:hover {
color: var(--text);
background: var(--surface-hover);
}
.toastTitle {
font-weight: 600;
margin: 0;
}
.toastMsg {
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
}
/* Toast variants */
.toast[data-variant='success'] {
border-left: 4px solid var(--success);
}
.toast[data-variant='error'] {
border-left: 4px solid var(--danger);
}
.toast[data-variant='warning'] {
border-left: 4px solid var(--warning);
}
.toast[data-variant='info'] {
border-left: 4px solid var(--primary);
}
.toastIcon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.toastIcon[data-variant='success'] {
background: var(--success-light);
color: var(--success);
}
.toastIcon[data-variant='error'] {
background: var(--danger-light);
color: var(--danger);
}
.toastIcon[data-variant='warning'] {
background: var(--warning-light);
color: var(--warning);
}
.toastIcon[data-variant='info'] {
background: var(--primary-light);
color: var(--primary);
}
.toastProgress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--border-light);
overflow: hidden;
}
.toastProgressBar {
height: 100%;
transition: width linear 50ms;
}
.skeleton {
background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-border) 50%, var(--color-border-subtle) 75%);
background-size: 200% 100%;
border-radius: var(--radius-sm);
}
.skeletonKpi {
height: 120px;
}
.skeletonMetricTile {
height: 72px;
}
.skeletonTableRow {
height: 48px;
margin-bottom: 8px;
}
/* Loading state */
.loadingState {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
gap: 12px;
}
.loadingState--skeleton {
align-items: stretch;
padding: 16px;
}
.loadingSpinner {
width: 32px;
height: 32px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
}
.loadingMessage {
color: var(--muted);
font-size: var(--text-sm);
}
/* Error Banner */
.errorBanner {
padding: var(--space-4);
border-color: var(--danger);
background: color-mix(in srgb, var(--danger) 5%, var(--panel-solid));
}
.errorBannerIcon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--danger-light);
color: var(--danger);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.errorBannerTitle {
font-weight: var(--font-bold);
font-size: var(--text-base);
color: var(--danger);
}
.errorBannerMessage {
font-size: var(--text-sm);
margin-top: var(--space-1);
color: var(--text);
}
/* Search and filter bar */
.filterBar {
padding: 16px;
border-bottom: 1px solid var(--border);
display: grid;
gap: 12px;
}
.filterBarGrid {
display: grid;
gap: 12px;
grid-template-columns: 1fr auto auto;
}
@media (max-width: 900px) {
.filterBarGrid {
grid-template-columns: 1fr;
}
}
.searchInput {
position: relative;
}
.searchInput input {
padding-left: 40px;
}
.searchInputIcon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
.filterResults {
margin-top: 12px;
font-size: 13px;
color: var(--muted);
display: flex;
align-items: center;
gap: 12px;
}
/* Empty state */
.emptyState {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
text-align: center;
}
.emptyStateIcon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: 24px;
}
.emptyStateIcon svg {
width: 28px;
height: 28px;
}
.emptyStateTitle {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.emptyStateMessage {
color: var(--muted);
margin-bottom: 24px;
max-width: 400px;
}
.emptyState--compact {
padding: 32px 24px;
}
.emptyState--compact .emptyStateIcon {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.emptyState--compact .emptyStateMessage {
margin-bottom: 16px;
}
/* Form validation */
.input[data-error='true'],
.select[data-error='true'],
.textarea[data-error='true'] {
border-color: var(--danger);
background: color-mix(in srgb, var(--danger) 3%, var(--panel-solid));
}
/* Phase 3: Bulk Actions Bar */
.bulkActionsBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: color-mix(in srgb, var(--primary) 8%, transparent);
border-top: 1px solid var(--border);
border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
}
.bulkActionsInfo {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.bulkActionsButtons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.bulkActionsBar {
flex-direction: column;
align-items: stretch;
}
.bulkActionsButtons {
flex-direction: column;
}
}
.input[data-error='true']:focus,
.select[data-error='true']:focus,
.textarea[data-error='true']:focus {
border-color: var(--danger);
box-shadow: 0 0 0 4px var(--danger-light);
}
.fieldError {
color: var(--danger);
font-size: 12px;
margin-top: 4px;
}
/* Button active state - removed transform */
/* Phase 3: Custom Checkbox Styling */
.table input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary);
}
.table th:first-child,
.table td:first-child {
text-align: center;
padding-left: 16px;
}
/* Removed: zebra striping */
/* Smooth scroll with reduced motion support */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn:hover:not(:disabled) {
transform: none !important;
}
.kpiCard:hover,
.mobileNavItem[data-active='true'] {
transform: none !important;
}
.toast--exiting {
transform: none !important;
opacity: 1 !important;
}
}
/* Search input with icon */
.searchInput .searchInputIcon {
width: 18px;
height: 18px;
}
/* Mobile Navigation */
.mobileNav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: var(--panel-solid);
border-top: 1px solid var(--color-border-subtle);
justify-content: space-around;
align-items: center;
z-index: var(--z-sticky);
padding-bottom: env(safe-area-inset-bottom);
}
.mobileNavItem {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
height: 100%;
background: none;
border: none;
color: var(--muted);
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
.mobileNavItem[data-active='true'] {
color: var(--primary);
}
.mobileNavItem svg {
width: 20px;
height: 20px;
}
/* Responsive Layout */
@media (max-width: 900px) {
.appShell,
.shell {
grid-template-columns: 1fr;
padding-bottom: calc(var(--nav-height) + 20px);
height: auto;
}
/* Override sidebar collapsed state on mobile */
.appFrame.sidebar-collapsed .appShell,
.container.sidebar-collapsed .shell {
grid-template-columns: 1fr;
}
/* Hide desktop sidebar */
.appShell aside,
.shell aside {
display: none;
}
/* Show mobile nav */
.mobileNav {
display: flex;
}
/* Reset container height on mobile */
.appFrame,
.container {
height: auto;
min-height: 100vh;
}
}
/* Responsive Table (Card View) */
@media (max-width: 768px) {
.table thead {
display: none;
}
.table tbody tr {
display: flex;
flex-direction: column;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
padding: 12px;
}
.table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
border-top: none;
text-align: right;
}
.table tbody td:last-child {
border-bottom: none;
justify-content: flex-end;
padding-top: 12px;
}
.table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--muted);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 12px;
text-align: left;
}
/* Full width for actions in card view */
.table tbody td:last-child > div {
width: 100%;
justify-content: flex-end;
}
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--border);
gap: 12px;
flex-wrap: wrap;
}
.paginationButtons {
display: flex;
gap: 8px;
}
@media (max-width: 600px) {
.pagination {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.paginationButtons {
justify-content: center;
}
}
/* Utility */
.iconBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: all 150ms ease;
}
.iconBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 10%, transparent);
color: var(--text);
}
.iconBtn:active:not(:disabled) {
/* Removed transform effect */
}
.iconBtn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* IconButton size variants */
.iconBtn--sm {
width: 28px;
height: 28px;
}
/* IconButton color variants */
.iconBtn--primary {
color: var(--primary);
background: var(--primary-light);
}
.iconBtn--primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 20%, var(--primary-light));
}
.iconBtn--danger {
color: white;
background: var(--danger);
border-color: var(--danger);
}
.iconBtn--danger:hover:not(:disabled) {
background: var(--danger-hover, color-mix(in srgb, var(--danger) 90%, black));
}
.iconBtn--ghost-danger {
color: var(--danger);
}
.iconBtn--ghost-danger:hover:not(:disabled) {
background: var(--danger-light);
}
/* Drawer Component */
.drawerOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: var(--z-drawer);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.drawerOverlay[data-open='true'] {
opacity: 1;
pointer-events: auto;
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(480px, 90vw);
background: var(--panel-solid);
border-left: 1px solid var(--border);
z-index: var(--z-drawer);
transform: translateX(100%);
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
}
.drawer[data-open='true'] {
transform: translateX(0);
}
.drawerHeader {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.drawerBody {
padding: 20px;
overflow-y: auto;
flex: 1;
}
/* Status Menu Popover */
.statusMenu {
position: fixed;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
z-index: var(--z-dropdown);
max-height: min(280px, calc(100vh - 16px));
overflow: auto;
min-width: 140px;
}
.statusMenuItem {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
transition: background var(--transition-fast);
font-size: 13px;
}
.statusMenuItem:hover {
background: var(--border-light);
}
.statusMenuItem[data-focused='true'] {
background: var(--primary-light);
}
/* Action Menu (Import/Export Dropdowns) */
.actionMenu {
position: fixed;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
z-index: var(--z-dropdown);
min-width: 160px;
}
.actionMenuItem {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
cursor: pointer;
transition: background var(--transition-fast);
font-size: 13px;
color: var(--text);
background: transparent;
border: none;
width: 100%;
text-align: left;
}
.actionMenuItem:hover {
background: var(--surface-hover);
}
.actionMenuItem[data-focused='true'] {
background: var(--surface-hover);
}
.actionMenuItem svg {
width: 16px;
height: 16px;
color: var(--muted);
}
/* Key Reveal Cell */
.keyReveal {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
width: 100%;
min-width: 0; /* Allow flex children to shrink below content size */
}
.keyReveal__text {
flex: 1;
min-width: 0; /* Allow text to shrink and truncate */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
letter-spacing: 0.02em;
}
.keyRevealValue[data-revealed='true'] .keyReveal__text {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-all;
text-overflow: clip;
}
.keyReveal__actions {
display: flex;
gap: 4px;
flex-shrink: 0; /* Prevent buttons from shrinking */
}
.keyRevealValue {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
overflow: hidden;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: var(--border-light);
transition: all var(--transition-base);
border: 1px solid transparent;
}
.keyRevealValue[data-revealed='true'] {
background: color-mix(in srgb, var(--primary) 10%, transparent);
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
/* Key Credits Cell */
.creditsCell {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.creditsInfo {
display: flex;
flex-direction: column;
min-width: 80px;
}
.creditsText {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.2;
}
.creditsValue {
font-weight: 600;
}
.creditsTotal {
color: var(--muted);
font-size: 0.9em;
margin-left: 2px;
}
.creditsMeta {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
.creditsVisual {
flex: 1;
min-width: 60px;
max-width: 120px;
}
.progressBar {
height: 8px; /* 2026: Enhanced from 6px for better visibility */
background: var(--border);
border-radius: 99px;
overflow: hidden;
position: relative;
}
.progressFill {
height: 100%;
border-radius: 99px;
transition: width 0.3s ease;
position: relative;
overflow: hidden;
}
/* Removed: animated stripes */
.progressFill[data-variant='success'] { background: var(--success); }
.progressFill[data-variant='warning'] { background: var(--warning); }
.progressFill[data-variant='danger'] { background: var(--danger); }
.creditsActions {
flex-shrink: 0;
}
@media (max-width: 768px) {
.creditsVisual {
display: none;
}
}
/* ========================================
Utility Classes (2026 Design System)
======================================== */
/* Layout - Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
/* Layout - Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
/* Padding */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* Margin */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
/* Width */
.w-full { width: 100%; }
/* Typography - Size */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
/* Typography - Weight */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
/* Typography - Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* JSON Viewer */
.json-viewer {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.5;
color: var(--text);
background: var(--panel-solid);
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
}
.json-key { color: var(--primary); font-weight: 600; }
.json-string { color: var(--success); }
.json-number { color: var(--warning); }
.json-boolean { color: var(--danger); }
.json-null { color: var(--muted); }
/* ==========================================================
2026 UI Refresh (component/layout overrides)
========================================================== */
body {
background:
radial-gradient(circle at 6% 0%, rgba(34, 197, 94, 0.18), transparent 42%),
radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.14), transparent 36%),
radial-gradient(circle at 50% 100%, rgba(4, 120, 87, 0.1), transparent 46%),
var(--color-bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "calt" 1, "ss01" 1;
}
.appFrame,
.container {
padding: var(--space-2);
min-height: 100vh;
height: auto;
}
.appShell,
.shell {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background:
linear-gradient(160deg, color-mix(in srgb, var(--panel-solid) 94%, transparent) 0%, color-mix(in srgb, var(--panel) 90%, transparent) 100%);
box-shadow: var(--shadow-lg);
overflow: hidden;
min-height: calc(100vh - (var(--space-2) * 2));
backdrop-filter: blur(12px);
}
.sidebar {
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 92%, #030b07 8%) 0%, color-mix(in srgb, var(--panel) 84%, #020704 16%) 100%);
border-right: 1px solid var(--border-light);
}
.mainPanel {
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 96%, transparent) 0%, color-mix(in srgb, var(--panel) 90%, transparent) 100%);
}
.appHeader {
padding: var(--space-2) var(--space-2);
border-bottom: 1px solid var(--border-light);
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 96%, transparent) 0%, color-mix(in srgb, var(--panel) 90%, transparent) 100%);
position: sticky;
top: 0;
z-index: var(--z-sticky);
backdrop-filter: blur(10px);
}
.appHeaderMeta {
display: flex;
align-items: center;
gap: 8px;
max-width: 55%;
min-width: 0;
padding: 7px 10px;
border: 1px solid var(--border-light);
border-radius: 999px;
background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
}
.appHeaderMeta:last-child {
max-width: none;
width: auto;
padding: 0;
border: none;
background: transparent;
}
.appHeaderMeta .btn {
white-space: nowrap;
}
.headerConnection {
font-size: var(--text-xs);
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mainBody {
padding: var(--space-2);
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel) 58%, transparent) 0%, color-mix(in srgb, var(--panel-solid) 92%, transparent) 100%);
}
.authFrame {
padding: 40px 16px;
}
.h1 {
font-size: var(--text-xl);
font-weight: var(--font-bold);
letter-spacing: -0.02em;
line-height: var(--lh-tight);
}
.h2 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
letter-spacing: -0.01em;
line-height: var(--lh-tight);
}
.help {
color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.stack {
gap: var(--space-2);
}
.grid2 {
gap: var(--space-2);
}
.card {
border: 1px solid var(--border-light);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: clip;
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 96%, transparent) 0%, color-mix(in srgb, var(--panel) 90%, transparent) 100%);
}
.cardHeader {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-light);
background: color-mix(in srgb, var(--panel) 74%, transparent);
}
.cardBody {
padding: var(--space-3);
}
.pill {
border-color: var(--border-light);
background: color-mix(in srgb, var(--primary) 10%, var(--panel-solid));
}
.badge {
border-color: var(--border-light);
font-weight: var(--font-medium);
}
.btn {
min-height: 38px;
padding: 8px 14px;
border-radius: var(--radius-sm);
border-color: var(--border-light);
background: color-mix(in srgb, var(--panel-solid) 95%, transparent);
color: var(--text);
font-weight: var(--font-semibold);
letter-spacing: 0.01em;
box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 11%, var(--panel-solid));
border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
transform: translateY(-1px);
}
.btn[data-variant='primary'] {
border-color: color-mix(in srgb, var(--primary) 56%, transparent);
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-hover) 100%);
color: #02140a;
box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 36%, transparent);
}
.btn[data-variant='primary']:hover:not(:disabled) {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 42%, transparent);
}
.btn[data-variant='danger'] {
border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
background: color-mix(in srgb, var(--danger) 16%, var(--panel-solid));
color: color-mix(in srgb, var(--danger) 75%, var(--text));
}
.btn[data-variant='ghost'] {
background: transparent;
box-shadow: none;
}
.input,
.select,
.textarea {
min-height: 38px;
padding: 9px 12px;
border-radius: var(--radius-sm);
border-color: var(--border-light);
background: color-mix(in srgb, var(--panel-solid) 97%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.textarea {
min-height: 108px;
}
.input:hover,
.select:hover,
.textarea:hover {
border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}
.input:focus,
.select:focus,
.textarea:focus {
border-color: color-mix(in srgb, var(--primary) 74%, var(--border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent);
}
.table th,
.table td {
padding: 12px 14px;
}
.table th {
letter-spacing: 0.09em;
font-weight: 600;
color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.table tbody tr {
transition: background var(--transition-fast);
}
.table tbody tr:hover td {
background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.navHeader,
.nav {
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.nav {
display: grid;
gap: 8px;
}
.navBrand {
font-size: 15px;
font-weight: var(--font-semibold);
}
.navItem {
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 10px 12px;
gap: 12px;
font-weight: var(--font-medium);
}
.navItem:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary) 68%, #ffffff 32%);
outline-offset: 1px;
}
.navItem:hover {
background: color-mix(in srgb, var(--primary) 10%, transparent);
border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
.navItem[data-active='true'] {
background: color-mix(in srgb, var(--primary) 15%, transparent);
border-color: color-mix(in srgb, var(--primary) 34%, transparent);
color: var(--text);
}
.navItem[data-active='true']::before {
display: none;
}
.navItemIcon {
width: 20px;
height: 20px;
}
.navFooter {
padding: var(--space-2);
border-top: 1px solid var(--border-light);
background: color-mix(in srgb, var(--panel) 75%, transparent);
}
.sidebarToggle {
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 9px 10px;
}
.sidebarToggle:hover {
border-color: color-mix(in srgb, var(--primary) 22%, transparent);
background: color-mix(in srgb, var(--primary) 8%, transparent);
color: var(--text);
}
.sidebarToggle:focus-visible,
.mobileNavItem:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary) 68%, #ffffff 32%);
outline-offset: 1px;
}
.navConnectionInfo {
margin-top: 14px;
padding: 10px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-light));
background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
}
.appFrame.sidebar-collapsed .appShell,
.container.sidebar-collapsed .shell {
grid-template-columns: 78px 1fr;
}
.appFrame.sidebar-collapsed .navItem,
.container.sidebar-collapsed .navItem,
.appFrame.sidebar-collapsed .sidebarToggle,
.container.sidebar-collapsed .sidebarToggle {
padding: 10px 8px;
}
.kpis {
gap: 14px;
}
.kpiCard {
border-radius: 14px;
border-color: var(--border-light);
background:
linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 95%, transparent) 0%, color-mix(in srgb, var(--panel) 90%, transparent) 100%);
box-shadow: var(--shadow);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}
.kpiCard:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
box-shadow: var(--shadow-lg);
}
.kpiValue {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.015em;
}
.metricTile {
border-color: var(--border-light);
border-radius: 12px;
background: color-mix(in srgb, var(--panel-solid) 95%, transparent);
}
.drawer,
.dialog {
border-color: var(--border-light);
border-radius: var(--radius);
box-shadow: var(--shadow-xl);
background: color-mix(in srgb, var(--panel-solid) 97%, transparent);
}
.statusMenu,
.actionMenu {
border-color: var(--border-light);
border-radius: 12px;
box-shadow: var(--shadow-lg);
background: color-mix(in srgb, var(--panel-solid) 98%, transparent);
}
.emptyStateIcon {
border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
}
.mobileNav {
background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
border-top: 1px solid var(--border-light);
backdrop-filter: blur(12px);
box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
}
.mobileNavItem {
padding-top: 4px;
gap: 2px;
transition: color var(--transition-fast), background var(--transition-fast);
}
.mobileNavItem span {
font-size: 10px;
line-height: 1;
font-weight: var(--font-semibold);
letter-spacing: 0.01em;
white-space: nowrap;
}
.mobileNavItem[data-active='true'] {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
@media (max-width: 900px) {
.appFrame,
.container {
padding: 0;
}
.appShell,
.shell {
border-radius: 0;
border-left: none;
border-right: none;
min-height: 100vh;
}
.appHeader {
padding: 14px 16px;
flex-wrap: wrap;
gap: 10px;
}
.appHeaderMeta {
max-width: 100%;
width: 100%;
}
.appHeaderMeta:last-child {
justify-content: flex-start;
}
.mainBody {
padding: 16px;
padding-bottom: calc(var(--nav-height) + 18px);
}
}
