/* ═══════════════════════════════════════════════════════════════════════════
   DC Hub — Core Design System
   A deep, flat, technical interface. Dense when needed, breathing room
   everywhere else.

   Architecture:
     Layer 1 → Global Tokens (raw values, never used in components)
     Layer 2 → Semantic Tokens (named by purpose, theme-switchable)
     Layer 3 → Component Tokens (scoped, overridable per-context)
     Layer 4 → Layout Shell (sidebar + main + responsive)
     Layer 5 → Component Library
     Layer 6 → App-Specific Layouts
     Layer 7 → Utilities & Responsive

   Typography: Outfit (display/body) + JetBrains Mono (code/data)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 1: Global Tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* Color Primitives — deep, cool blue-tinted neutrals */
	--gray-50:  #f0f2f6;
	--gray-100: #e8eaf0;
	--gray-200: #c0c6d4;
	--gray-300: #8891a4;
	--gray-400: #6b7490;
	--gray-500: #6a7189;
	--gray-600: #454d60;
	--gray-700: #343a4a;
	--gray-800: #1e2330;
	--gray-850: #181c24;
	--gray-900: #11141a;
	--gray-950: #0a0c10;

	--blue-300: #7dd3fc;
	--blue-400: #38bdf8;
	--blue-500: #0ea5e9;
	--blue-600: #0284c7;

	--green-300: #6ee7b7;
	--green-400: #34d399;
	--green-500: #10b981;
	--green-600: #059669;

	--red-300: #fca5a5;
	--red-400: #f87171;
	--red-500: #ef4444;

	--yellow-300: #fde68a;
	--yellow-400: #fbbf24;
	--yellow-500: #f59e0b;

	--cyan-300: #67e8f9;
	--cyan-400: #22d3ee;
	--cyan-500: #06b6d4;

	--purple-300: #c4b5fd;
	--purple-400: #a78bfa;
	--purple-500: #8b5cf6;

	--orange-300: #fdba74;
	--orange-400: #fb923c;
	--orange-500: #f97316;

	/* Dim tokens — 12% opacity for tinted backgrounds */
	--blue-dim:   rgba(56, 189, 248, 0.12);
	--green-dim:  rgba(52, 211, 153, 0.12);
	--red-dim:    rgba(248, 113, 113, 0.12);
	--yellow-dim: rgba(251, 191, 36, 0.12);
	--cyan-dim:   rgba(34, 211, 238, 0.12);
	--purple-dim: rgba(167, 139, 250, 0.12);
	--orange-dim: rgba(251, 146, 60, 0.12);

	/* Spacing — 4px base, harmonic scale */
	--space-px: 1px;
	--space-0: 0px;
	--space-0h: 2px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* Typography Scale */
	--text-2xs: 0.6875rem;  /* 11px */
	--text-xs:  0.75rem;    /* 12px */
	--text-sm:  0.8125rem;  /* 13px */
	--text-base: 0.875rem;  /* 14px */
	--text-md:  1rem;       /* 16px */
	--text-lg:  1.125rem;   /* 18px */
	--text-xl:  1.25rem;    /* 20px */
	--text-2xl: 1.5rem;     /* 24px */
	--text-3xl: 1.875rem;   /* 30px */
	--text-4xl: 2.25rem;    /* 36px */

	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;

	--tracking-tight: -0.015em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.08em;

	--font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Radii — flattened scale */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 10px;
	--radius-2xl: 10px;
	--radius-full: 9999px;

	/* Shadows — minimal, flat design */
	--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
	--shadow-md: 0 2px 4px rgba(0,0,0,0.08);
	--shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
	--shadow-xl: 0 8px 16px rgba(0,0,0,0.1);
	--shadow-inner: inset 0 1px 2px rgba(0,0,0,0.06);
	--shadow-ring: 0 0 0 3px;

	/* Transitions */
	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);

	--duration-instant: 50ms;
	--duration-fast: 100ms;
	--duration-normal: 180ms;
	--duration-moderate: 250ms;
	--duration-slow: 350ms;
	--duration-slower: 500ms;

	/* Z-index scale */
	--z-base: 0;
	--z-raised: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-popover: 500;
	--z-toast: 600;
	--z-tooltip: 700;
	--z-max: 9999;

	/* Scrollbar */
	--scrollbar-w: 6px;
	--scrollbar-track: transparent;
	--scrollbar-thumb: var(--gray-700);
	--scrollbar-thumb-hover: var(--gray-600);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Layer 2: Semantic Tokens (Dark default)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* Surfaces — deeper hierarchy */
	--color-bg:             var(--gray-950);
	--color-bg-raised:      var(--gray-900);
	--color-bg-overlay:     var(--gray-850);
	--color-bg-wash:        rgba(0, 0, 0, 0.3);
	--color-surface:        var(--gray-850);
	--color-surface-hover:  var(--gray-800);
	--color-surface-active: var(--gray-700);
	--color-surface-sunken: var(--gray-950);

	/* Borders */
	--color-border:        var(--gray-600);
	--color-border-subtle: rgba(42, 47, 60, 0.5);
	--color-border-focus:  var(--blue-400);

	/* Text — brighter primary */
	--color-text:           var(--gray-100);
	--color-text-heading:   var(--gray-50);
	--color-text-secondary: var(--gray-300);
	--color-text-muted:     var(--gray-400);
	--color-text-inverse:   var(--gray-950);
	--color-text-link:      var(--blue-400);

	/* Interactive / Accent */
	--color-accent:       var(--blue-400);
	--color-accent-hover: var(--blue-300);
	--color-accent-text:  #fff;
	--color-accent-bg:    var(--blue-dim);
	--color-accent-glow:  rgba(56, 189, 248, 0.25);

	/* Focus ring */
	--color-focus-ring: rgba(56, 189, 248, 0.4);

	/* Status */
	--color-success:    var(--green-400);
	--color-success-bg: var(--green-dim);
	--color-warning:    var(--yellow-400);
	--color-warning-bg: var(--yellow-dim);
	--color-danger:     var(--red-400);
	--color-danger-bg:  var(--red-dim);
	--color-info:       var(--cyan-400);
	--color-info-bg:    var(--cyan-dim);
	--color-neutral:    var(--gray-400);
	--color-neutral-bg: rgba(107, 116, 144, 0.12);

	/* Layout */
	--nav-width: 220px;
	--nav-width-collapsed: 0px;
	--header-height: 52px;
	--content-padding: var(--space-6);
	--page-gutter: var(--space-5);
}


/* ── Light Theme ── */
[data-theme="light"] {
	--color-bg:             #f5f6f8;
	--color-bg-raised:      #fff;
	--color-bg-overlay:     #fff;
	--color-bg-wash:        rgba(0, 0, 0, 0.04);
	--color-surface:        #fff;
	--color-surface-hover:  var(--gray-50);
	--color-surface-active: var(--gray-100);
	--color-surface-sunken: var(--gray-50);

	--color-border:        var(--gray-200);
	--color-border-subtle: rgba(0, 0, 0, 0.06);
	--color-border-focus:  var(--blue-500);

	--color-text:           var(--gray-900);
	--color-text-heading:   var(--gray-950);
	--color-text-secondary: var(--gray-500);
	--color-text-muted:     var(--gray-400);
	--color-text-inverse:   #fff;
	--color-text-link:      var(--blue-600);

	--color-accent:       var(--blue-500);
	--color-accent-hover: var(--blue-600);
	--color-accent-text:  #fff;
	--color-accent-bg:    rgba(14, 165, 233, 0.08);
	--color-accent-glow:  rgba(14, 165, 233, 0.15);

	--color-focus-ring: rgba(14, 165, 233, 0.3);

	--color-success:    var(--green-600);
	--color-success-bg: rgba(5, 150, 105, 0.08);
	--color-warning:    var(--orange-500);
	--color-warning-bg: rgba(249, 115, 22, 0.08);
	--color-danger:     var(--red-500);
	--color-danger-bg:  rgba(239, 68, 68, 0.08);
	--color-info:       var(--cyan-500);
	--color-info-bg:    rgba(6, 182, 212, 0.08);
	--color-neutral:    var(--gray-500);
	--color-neutral-bg: rgba(86, 94, 114, 0.08);

	--shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md: 0 2px 4px rgba(0,0,0,0.04);
	--shadow-lg: 0 4px 8px rgba(0,0,0,0.06);
	--shadow-xl: 0 8px 16px rgba(0,0,0,0.06);

	--scrollbar-thumb: var(--gray-300);
	--scrollbar-thumb-hover: var(--gray-400);
}


/* ── Per-App Accent Overrides ── */
[data-app="dashboard"] { --color-accent: var(--blue-400);   --color-accent-hover: var(--blue-300);   --color-accent-bg: var(--blue-dim);   --color-focus-ring: rgba(56,189,248,0.4); }
[data-app="tempo"]     { --color-accent: var(--green-400);  --color-accent-hover: var(--green-300);  --color-accent-bg: var(--green-dim);  --color-focus-ring: rgba(52,211,153,0.4); }
[data-app="links"]     { --color-accent: var(--blue-400);   --color-accent-hover: var(--blue-300);   --color-accent-bg: var(--blue-dim);   --color-focus-ring: rgba(56,189,248,0.4); }
[data-app="commands"]  { --color-accent: var(--cyan-400);   --color-accent-hover: var(--cyan-300);   --color-accent-bg: var(--cyan-dim);   --color-focus-ring: rgba(34,211,238,0.4); }
[data-app="feedback"]  { --color-accent: var(--orange-400); --color-accent-hover: var(--orange-300); --color-accent-bg: var(--orange-dim); --color-focus-ring: rgba(251,146,60,0.4); }
[data-app="changes"]   { --color-accent: var(--red-400);    --color-accent-hover: var(--red-300);    --color-accent-bg: var(--red-dim);    --color-focus-ring: rgba(248,113,113,0.4); }
[data-app="templates"] { --color-accent: var(--purple-400); --color-accent-hover: var(--purple-300); --color-accent-bg: var(--purple-dim); --color-focus-ring: rgba(167,139,250,0.4); }
[data-app="team"]      { --color-accent: var(--green-400);  --color-accent-hover: var(--green-300);  --color-accent-bg: var(--green-dim);  --color-focus-ring: rgba(52,211,153,0.4); }
[data-app="reminders"] { --color-accent: var(--yellow-400); --color-accent-hover: var(--yellow-300); --color-accent-bg: var(--yellow-dim); --color-focus-ring: rgba(251,191,36,0.4); }

/* Light-mode accent adjustments */
[data-theme="light"][data-app="tempo"]     { --color-accent: var(--green-600);  --color-accent-hover: var(--green-500); }
[data-theme="light"][data-app="commands"]  { --color-accent: var(--cyan-500);   --color-accent-hover: var(--cyan-400); }
[data-theme="light"][data-app="feedback"]  { --color-accent: var(--orange-500); --color-accent-hover: var(--orange-400); }
[data-theme="light"][data-app="changes"]   { --color-accent: var(--red-500);    --color-accent-hover: var(--red-400); }
[data-theme="light"][data-app="templates"] { --color-accent: var(--purple-500); --color-accent-hover: var(--purple-400); }
[data-theme="light"][data-app="reminders"] { --color-accent: var(--yellow-500); --color-accent-hover: var(--yellow-400); }

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 3: Base Reset & Global Styles
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	scroll-behavior: smooth;
}

/* HiDPI: sharpen fonts on retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	html {
		-webkit-font-smoothing: subpixel-antialiased;
	}
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	display: flex;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-text-heading);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p { margin: 0; }
p + p { margin-top: var(--space-3); }

a {
	color: inherit;
	text-decoration: none;
}

a:not(.btn):not(.nav-item):not(.brand):not(.link-tile):not(.list-row):not(.action-card):not(.widget-list-item):not(.widget-footer-link):not(.dash-tempo-link):hover {
	color: var(--color-text-link);
}

img, svg, video {
	display: block;
	max-width: 100%;
}

/* Selection */
::selection {
	background: var(--color-accent-bg);
	color: var(--color-text);
}

/* Focus: visible only for keyboard nav */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Scrollbars */
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Firefox scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Layer 4: Layout Shell — Sidebar + Main + Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Main Content ── */
main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--color-bg-raised);
	overflow: hidden;
}

.page-header {
	padding: 0 var(--content-padding);
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	flex-shrink: 0;
}

.page-header-text {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.page-header h1 {
	font-size: 15px;
	font-weight: var(--weight-semibold);
	letter-spacing: -0.01em;
}

.page-subtitle {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
	letter-spacing: 0.02em;
}

.page-actions {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-3) var(--content-padding);
	flex-wrap: wrap;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	transition: box-shadow var(--duration-fast) var(--ease-default);
}

.page-actions.scrolled {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.page-actions:empty,
.page-actions:not(:has(*)) {
	display: none;
	padding: 0;
}

.page-content {
	flex: 1;
	overflow: auto;
	padding: var(--content-padding);
	width: 100%;
}

/* ── Sidebar ── */
.sidebar {
	width: var(--nav-width);
	min-width: var(--nav-width);
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--color-bg-raised);
	border-right: 1px solid var(--color-border);
}

.sidebar .brand {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: var(--weight-bold);
	color: var(--color-accent);
	height: 52px;
	padding: 0 18px;
	text-decoration: none;
	letter-spacing: 0.05em;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
	justify-content: center;
}

.brand-logo {
	height: 28px;
	width: auto;
	color: var(--color-accent);
	transition: color var(--duration-normal);
}

.brand-logo .logo-letter {
	fill: var(--color-text-heading);
}

/* Recolor logo border to match active app */
.sidebar:has(.nav-item[href="/dashboard/"].active) .brand-logo { color: var(--blue-400); }
.sidebar:has(.nav-item[href="/tempo/"].active)     .brand-logo { color: var(--green-400); }
.sidebar:has(.nav-item[href="/links/"].active)     .brand-logo { color: var(--blue-400); }
.sidebar:has(.nav-item[href="/commands/"].active)   .brand-logo { color: var(--cyan-400); }
.sidebar:has(.nav-item[href="/feedback/"].active)   .brand-logo { color: var(--orange-400); }
.sidebar:has(.nav-item[href="/changes/"].active)    .brand-logo { color: var(--red-400); }
.sidebar:has(.nav-item[href="/templates/"].active)  .brand-logo { color: var(--purple-400); }
.sidebar:has(.nav-item[href="/team/"].active)       .brand-logo { color: var(--green-400); }

.sidebar .nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	margin: 0 8px 2px;
	border-radius: var(--radius-sm);
	border-left: 2px solid transparent;
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: var(--weight-normal);
	transition: all 0.15s;
	user-select: none;
}

.sidebar .brand + .nav-item {
	margin-top: 8px;
}


/* Per-app nav colors — dulled on hover, full on active */
.sidebar .nav-item[href="/dashboard/"] { --nav-color: var(--blue-400);   --nav-dim: var(--blue-dim); }
.sidebar .nav-item[href="/tempo/"]     { --nav-color: var(--green-400);  --nav-dim: var(--green-dim); }
.sidebar .nav-item[href="/links/"]     { --nav-color: var(--blue-400);   --nav-dim: var(--blue-dim); }
.sidebar .nav-item[href="/commands/"]  { --nav-color: var(--cyan-400);   --nav-dim: var(--cyan-dim); }
.sidebar .nav-item[href="/feedback/"]  { --nav-color: var(--orange-400); --nav-dim: var(--orange-dim); }
.sidebar .nav-item[href="/changes/"]   { --nav-color: var(--red-400);    --nav-dim: var(--red-dim); }
.sidebar .nav-item[href="/templates/"] { --nav-color: var(--purple-400); --nav-dim: var(--purple-dim); }
.sidebar .nav-item[href="/team/"]      { --nav-color: var(--green-400);  --nav-dim: var(--green-dim); }

.sidebar .nav-item:hover {
	color: var(--nav-color, var(--color-text));
	background: var(--nav-dim, var(--color-surface-hover));
}

.sidebar .nav-item.active {
	color: var(--nav-color, var(--color-accent));
	background: var(--nav-dim, var(--color-accent-bg));
	border-left-color: var(--nav-color, var(--color-accent));
	font-weight: var(--weight-semibold);
}

.sidebar .nav-icon {
	width: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Material Icons Round';
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: color 0.15s;
}

.sidebar .nav-item:hover .nav-icon {
	color: var(--nav-color, var(--color-text));
	opacity: 0.65;
}

.sidebar .nav-item.active .nav-icon {
	color: var(--nav-color, var(--color-accent));
	opacity: 1;
}

.sidebar .nav-footer {
	margin-top: auto;
	padding: 12px 16px;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.sidebar .user-info {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* ── Mobile Sidebar Toggle (hidden by default, visible < 768px) ── */
.sidebar-toggle {
	display: none;
	position: fixed;
	bottom: var(--space-5);
	left: var(--space-5);
	z-index: var(--z-overlay);
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-accent-text);
	border: none;
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-family: 'Material Icons Round';
	font-size: 24px;
	-webkit-font-smoothing: antialiased;
	transition: transform var(--duration-normal) var(--ease-spring);
}

.sidebar-toggle:active {
	transform: scale(0.92);
}

/* Backdrop for mobile sidebar */
.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: calc(var(--z-overlay) - 1);
	opacity: 0;
	transition: opacity var(--duration-moderate) var(--ease-default);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 5: Component Library
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card ── */
.card {
	--card-bg: var(--color-surface);
	--card-border: var(--color-border);
	--card-radius: var(--radius-lg);
	--card-padding: var(--space-5);
	--card-gap: var(--space-4);

	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	padding: var(--card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.card > h3, .widget-header h3 {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	margin: 0;
}

/* ── Buttons ── */
.btn {
	--btn-bg: var(--color-accent);
	--btn-text: #fff;
	--btn-border: var(--color-accent);
	--btn-radius: var(--radius-sm);
	--btn-padding-x: var(--space-4);
	--btn-padding-y: var(--space-2);
	--btn-font: var(--text-sm);
	--btn-weight: var(--weight-semibold);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	background: var(--btn-bg);
	color: var(--btn-text);
	border: 1px solid var(--btn-border);
	border-radius: var(--btn-radius);
	font-size: var(--btn-font);
	font-weight: var(--btn-weight);
	font-family: var(--font-sans);
	letter-spacing: 0.01em;
	line-height: var(--leading-tight);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	transition:
		background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

.btn:hover {
	--btn-bg: var(--color-accent-hover);
	--btn-border: var(--color-accent-hover);
	filter: none;
}

.btn:active {
	transform: scale(0.97);
}

.btn:disabled, .btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn:focus-visible {
	box-shadow: var(--shadow-ring) var(--color-focus-ring);
	outline: none;
}

.btn .material-icons-round {
	font-size: 18px;
}

/* Variants */
.btn.secondary {
	--btn-bg: transparent;
	--btn-text: var(--color-text);
	--btn-border: var(--color-border);
}

.btn.secondary:hover {
	--btn-bg: var(--color-surface-hover);
	--btn-text: var(--color-text);
	--btn-border: var(--color-text-secondary);
	filter: none;
}

.btn.danger {
	--btn-bg: var(--color-danger);
	--btn-text: #fff;
	--btn-border: var(--color-danger);
}

.btn.danger:hover {
	--btn-bg: var(--color-danger);
	--btn-border: var(--color-danger);
	filter: brightness(1.15);
}

.btn.ghost {
	--btn-bg: transparent;
	--btn-text: var(--color-text-secondary);
	--btn-border: transparent;
	border-width: 1px;
}

.btn.ghost:hover {
	--btn-bg: var(--color-surface-hover);
	--btn-text: var(--color-text);
	filter: none;
}

/* Sizes */
.btn.sm {
	--btn-padding-x: var(--space-3);
	--btn-padding-y: var(--space-1);
	--btn-font: var(--text-xs);
	--btn-radius: var(--radius-md);
}

.btn.lg {
	--btn-padding-x: var(--space-6);
	--btn-padding-y: var(--space-3);
	--btn-font: var(--text-base);
}

/* Icon-only button */
.btn.icon-only {
	--btn-padding-x: var(--space-2);
	--btn-padding-y: var(--space-2);
}

/* ── Inputs ── */
.input, .select, .textarea {
	--input-bg: var(--color-surface);
	--input-border: var(--color-border);
	--input-text: var(--color-text);
	--input-placeholder: var(--color-text-muted);
	--input-radius: var(--radius-md);
	--input-padding-x: var(--space-3);
	--input-padding-y: var(--space-2);
	--input-font: var(--text-sm);

	width: 100%;
	padding: var(--input-padding-y) var(--input-padding-x);
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	font-size: var(--input-font);
	font-family: var(--font-sans);
	line-height: var(--leading-normal);
	transition:
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

.input:hover, .select:hover, .textarea:hover {
	border-color: var(--color-text-muted);
}

.input:focus, .select:focus, .textarea:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: var(--shadow-ring) var(--color-focus-ring);
}

.input::placeholder, .textarea::placeholder {
	color: var(--input-placeholder);
}

.textarea {
	resize: vertical;
	min-height: 180px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.6;
	padding: 10px var(--space-3);
}

.select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7490' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right var(--space-2) center;
	background-repeat: no-repeat;
	background-size: 20px;
	padding-right: var(--space-8);
}

/* ── Field (label + input) ── */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.field + .field {
	margin-top: var(--space-3);
}

[style*="display:grid"] > .field + .field {
	margin-top: 0;
}

.field label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
}

.field .help-text {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.field .error-text {
	font-size: var(--text-xs);
	color: var(--color-danger);
}

.field .required {
	color: var(--color-danger);
}

/* Inline field */
.field.inline {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
}

.field.inline label {
	white-space: nowrap;
	min-width: fit-content;
}

/* ── Badge / Chip ── */
.badge {
	--badge-bg: var(--color-neutral-bg);
	--badge-text: var(--color-neutral);

	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 3px var(--space-2);
	background: var(--badge-bg);
	color: var(--badge-text);
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.badge.success { --badge-bg: var(--color-success-bg); --badge-text: var(--color-success); }
.badge.warning { --badge-bg: var(--color-warning-bg); --badge-text: var(--color-warning); }
.badge.danger  { --badge-bg: var(--color-danger-bg);  --badge-text: var(--color-danger); }
.badge.info    { --badge-bg: var(--color-info-bg);    --badge-text: var(--color-info); }
.badge.accent  { --badge-bg: var(--color-accent-bg);  --badge-text: var(--color-accent); }

/* Dot before badge text */
.badge.dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: currentColor;
	flex-shrink: 0;
}

/* ── Table ── */
.table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.table th {
	text-align: left;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

.table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border-subtle);
	color: var(--color-text);
	vertical-align: middle;
}

.table tr {
	transition: background var(--duration-fast) var(--ease-default);
}

.table tbody tr:hover td {
	background: var(--color-surface-hover);
}

.table tbody tr {
	cursor: pointer;
}

/* Responsive table wrapper */
.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-lg);
}

/* ── Tabs ── */
.tab {
	padding: var(--space-2) var(--space-3);
	font-size: 12px;
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: transparent;
	color: var(--color-text-muted);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
	user-select: none;
}

.tab:hover {
	color: var(--color-text);
	background: var(--color-surface-hover);
}

.tab.active {
	color: var(--color-accent);
	background: var(--color-accent-bg);
}


/* ── Toast / Notification ── */
#toast-container {
	position: fixed;
	bottom: var(--space-5);
	right: var(--space-5);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-2);
	z-index: var(--z-toast);
	pointer-events: none;
}

.toast {
	pointer-events: auto;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-overlay);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: none;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text);
	animation: toast-in var(--duration-moderate) var(--ease-out) forwards;
	max-width: 360px;
}

.toast.success { border-color: var(--color-success); border-left-width: 3px; }
.toast.danger  { border-color: var(--color-danger);  border-left-width: 3px; }
.toast.warning { border-color: var(--color-warning); border-left-width: 3px; }
.toast.info    { border-color: var(--color-info);    border-left-width: 3px; }

@keyframes toast-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ── Entrance Animations ── */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes glow {
	0%, 100% { box-shadow: 0 0 4px var(--color-accent-glow, rgba(56, 189, 248, 0.25)); }
	50%      { box-shadow: 0 0 16px var(--color-accent-glow, rgba(56, 189, 248, 0.25)); }
}

.fade-in { animation: fadeIn 0.3s ease forwards; }
.slide-in { animation: slideIn 0.3s ease forwards; }
.glow { animation: glow 2s ease-in-out infinite; }

.stagger-1 { animation-delay: 0.04s; opacity: 0; }
.stagger-2 { animation-delay: 0.08s; opacity: 0; }
.stagger-3 { animation-delay: 0.12s; opacity: 0; }
.stagger-4 { animation-delay: 0.16s; opacity: 0; }
.stagger-5 { animation-delay: 0.20s; opacity: 0; }

/* ── Alert ── */
.alert {
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	border-left: 3px solid;
}

.alert a { font-weight: var(--weight-medium); text-decoration: underline; }

.alert.info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }
.alert.success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert.danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert.warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }


/* ── Empty State ── */
.empty-state {
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	padding: var(--space-10) var(--space-4);
}

.empty-state p {
	max-width: 320px;
	margin: 0 auto;
}


/* ── Pagination ── */
.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-3) 0;
}

.pagination button {
	background: transparent;
	border: none;
	color: var(--color-text-secondary);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--text-sm);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}

.pagination button:hover {
	background: var(--color-surface-hover);
	color: var(--color-text);
}

.pagination button.active {
	background: var(--color-accent);
	color: var(--color-accent-text);
}

/* ── Login Page ── */
.login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--color-bg);
}

.login-card {
	width: 380px;
	max-width: 90vw;
	padding: var(--space-8);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.login-card h1 {
	font-size: var(--text-2xl);
	margin: 0 0 var(--space-6);
	text-align: center;
}

.login-card .btn {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-5);
}

.login-error {
	color: var(--color-danger);
	font-size: var(--text-sm);
	text-align: center;
	margin-top: var(--space-3);
}

/* ── Modal ── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal);
	padding: var(--space-4);
	animation: overlay-in var(--duration-normal) var(--ease-default);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

@keyframes overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.modal {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	width: 480px;
	max-width: 90vw;
	max-height: 85vh;
	max-height: 85dvh;
	overflow-y: auto;
	box-shadow: none;
	animation: modal-in var(--duration-moderate) var(--ease-out);
}

@keyframes modal-in {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-border-subtle);
	position: sticky;
	top: 0;
	background: var(--color-surface);
	z-index: 1;
}

.modal-header h2, .modal-header h3 {
	margin: 0;
	font-size: var(--text-lg);
}

.modal-close {
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	font-size: var(--text-xl);
	padding: var(--space-1);
	border-radius: var(--radius-sm);
	transition: color var(--duration-fast), background var(--duration-fast);
}

.modal-close:hover {
	color: var(--color-text);
	background: var(--color-surface-hover);
}

.modal-body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--color-border-subtle);
}

/* ── Avatar ── */
.avatar {
	--avatar-size: 32px;
	width: var(--avatar-size);
	height: var(--avatar-size);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-accent-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--avatar-size) * 0.4);
	font-weight: var(--weight-semibold);
	flex-shrink: 0;
	overflow: hidden;
	line-height: 1;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar.sm { --avatar-size: 24px; }
.avatar.lg { --avatar-size: 40px; }
.avatar.xl { --avatar-size: 48px; }

/* ── Progress Bar ── */
.progress {
	height: 6px;
	background: var(--color-surface-sunken);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	transition: width var(--duration-slow) var(--ease-default);
}

.progress-fill.success { background: var(--color-success); }
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger  { background: var(--color-danger); }

/* ── Skeleton Loader ── */
.skeleton {
	background: var(--color-surface-hover);
	border-radius: var(--radius-md);
	animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-text {
	height: 14px;
	width: 100%;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.xs    { width: 30%; }

.skeleton-circle {
	border-radius: var(--radius-full);
}

@keyframes skeleton-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* ── Tooltip ── */
[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface-active);
	color: var(--color-text);
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-default);
	z-index: var(--z-tooltip);
	border: 1px solid var(--color-border);
	box-shadow: none;
}

[data-tooltip]:hover::after {
	opacity: 1;
}

/* ── Dropdown ── */
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-menu {
	position: absolute;
	top: calc(100% + var(--space-1));
	left: 0;
	min-width: 180px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: none;
	z-index: var(--z-dropdown);
	padding: var(--space-1);
	display: none;
	animation: dropdown-in var(--duration-normal) var(--ease-out);
}

.dropdown-menu.open {
	display: block;
}

.dropdown-menu.right {
	left: auto;
	right: 0;
}

@keyframes dropdown-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text);
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: background var(--duration-fast);
	font-family: var(--font-sans);
}

.dropdown-item:hover {
	background: var(--color-surface-hover);
}

.dropdown-item.danger {
	color: var(--color-danger);
}

.dropdown-divider {
	height: 1px;
	background: var(--color-border-subtle);
	margin: var(--space-1) 0;
}

/* ── Divider ── */
.divider {
	height: 1px;
	background: var(--color-border-subtle);
	border: none;
	margin: var(--space-4) 0;
}

/* ── Switch / Toggle ── */
.switch {
	position: relative;
	display: inline-flex;
	width: 40px;
	height: 22px;
	cursor: pointer;
}

.switch input {
	appearance: none;
	width: 100%;
	height: 100%;
	background: var(--color-surface-active);
	border-radius: var(--radius-full);
	border: none;
	cursor: pointer;
	transition: background var(--duration-normal) var(--ease-default);
}

.switch input::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-full);
	background: #fff;
	box-shadow: var(--shadow-xs);
	transition: transform var(--duration-normal) var(--ease-spring);
}

.switch input:checked {
	background: var(--color-accent);
}

.switch input:checked::before {
	transform: translateX(18px);
}

/* ── Checkbox & Radio ── */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-accent);
}

/* ── Kbd ── */
kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 var(--space-1);
	background: var(--color-surface-sunken);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	line-height: 1;
}

/* ── Code ── */
code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 1px var(--space-1);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-xs);
	color: var(--color-success);
}

pre {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	padding: var(--space-4);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-lg);
	overflow-x: auto;
	line-height: var(--leading-relaxed);
}

pre code {
	padding: 0;
	background: transparent;
}

/* ── Filter Bar ── */
.filter-bar {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
}

.filter-bar .select {
	width: auto;
	min-width: 140px;
}

.filter-bar .input {
	width: auto;
	min-width: 200px;
}

/* ── Stacked List ── */
.stacked-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--color-border-subtle);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* ── List Row ── */
.list-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	transition: background var(--duration-fast) var(--ease-default);
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
	font-size: var(--text-sm);
}

.list-row:hover {
	background: var(--color-surface-hover);
}

.list-row.active {
	background: var(--color-surface-hover);
	box-shadow: inset 3px 0 0 var(--color-accent);
}

.list-row-title {
	flex: 1;
	font-weight: var(--weight-medium);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-row-meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	flex-shrink: 0;
}

/* ── Detail Layout ── */
.detail-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.detail-grid {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--space-5);
	align-items: start;
}

.detail-header h2 {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	margin: 0 0 var(--space-2);
}

.detail-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.detail-body {
	line-height: var(--leading-relaxed);
	font-size: var(--text-sm);
}

.detail-body p {
	margin: 0;
}

/* ── Status Dot ── */
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	display: inline-block;
	flex-shrink: 0;
}

.status-dot[data-status="green"] {
	background: var(--color-success);
	box-shadow: 0 0 0 3px var(--color-success-bg);
}

.status-dot[data-status="red"] {
	background: var(--color-danger);
	box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.status-dot[data-status="gray"] {
	background: var(--color-text-muted);
}

.status-dot[data-status="yellow"] {
	background: var(--color-warning);
	box-shadow: 0 0 0 3px var(--color-warning-bg);
}

.status-dot.pulse {
	animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ── Severity Badge ── */
.sev-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--space-2);
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sev-badge[data-sev="critical"] { background: var(--color-danger-bg); color: var(--color-danger); }
.sev-badge[data-sev="high"]     { background: var(--color-warning-bg); color: var(--color-warning); }
.sev-badge[data-sev="medium"]   { background: var(--color-info-bg); color: var(--color-info); }
.sev-badge[data-sev="low"]      { background: var(--color-neutral-bg); color: var(--color-neutral); }

/* ── Category Label ── */
.cat-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 3px var(--space-2);
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--color-neutral-bg);
	color: var(--color-text-secondary);
}

.cat-dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--cat-color, var(--color-neutral));
	display: inline-block;
	flex-shrink: 0;
}

.table td .badge,
.table td .sev-badge,
.table td .cat-label {
	vertical-align: middle;
}

/* ── Tag Button ── */
.tag-btn {
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	cursor: pointer;
	font-family: inherit;
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast),
		color var(--duration-fast);
}

.tag-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-text);
}

.tag-btn.active {
	background: color-mix(in srgb, var(--color-accent) 15%, transparent);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* ── Field Hint ── */
.field-hint {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
	display: block;
}

/* ── Action Card ── */
.action-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-4);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast),
		transform var(--duration-fast) var(--ease-spring);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	font-family: var(--font-sans);
}

.action-card:hover {
	background: var(--color-surface-hover);
	transform: translateY(-1px);
	border-color: var(--color-accent);
}

.action-icon {
	font-size: var(--text-3xl);
	line-height: 1;
}

.action-card span:last-child {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

/* ── Comments ── */
.comments-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.comments-section > h3 {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-muted);
	margin: 0;
}

.comment {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
}

.comment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
}

.comment-header strong {
	color: var(--color-text-heading);
}

.comment-header time {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.comment-body {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

/* ── Timeline ── */
.timeline {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	position: relative;
	padding-left: var(--space-5);
}

.timeline-entry {
	position: relative;
	font-size: var(--text-sm);
}

/* Dot */
.timeline-entry::before {
	content: '';
	position: absolute;
	left: calc(-1 * var(--space-5) + 2px);
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--color-border);
	z-index: 1;
}

/* Connector line below the dot — omitted on last entry */
.timeline-entry::after {
	content: '';
	position: absolute;
	left: calc(-1 * var(--space-5) + 5px);
	top: 12px;
	bottom: calc(-1 * var(--space-3) - 4px);
	width: 2px;
	background: var(--color-border-subtle);
}

.timeline-entry:last-child::after {
	display: none;
}

.timeline-entry.comment {
	padding: 0;
}

.timeline-entry.comment::before {
	background: var(--color-accent);
}

.timeline-entry.resolved::before {
	background: var(--color-success);
	width: 10px;
	height: 10px;
	left: calc(-1 * var(--space-5) + 1px);
	top: 3px;
}

.timeline-meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}

/* ── Popover (change management ack list, etc.) ── */
.cm-popover {
	position: fixed;
	z-index: 9999;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2) 0;
	min-width: 200px;
	max-width: 300px;
	max-height: 260px;
	overflow-y: auto;
}

.cm-popover-title {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: var(--space-1) var(--space-3) var(--space-2);
}

.cm-popover-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
}

.cm-popover-row:hover {
	background: var(--color-surface-hover);
}

/* ── Icon toggle buttons (bookmark, watch) ── */
.cm-icon-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	padding: 0;
	flex-shrink: 0;
}

.cm-icon-toggle:hover {
	background: var(--color-surface-hover);
}

.cm-icon-toggle .material-icons-round {
	font-size: 20px;
}

.cm-icon-toggle.active[title*="bookmark"],
.cm-icon-toggle.active[title*="Bookmark"],
.cm-icon-toggle.active[title*="bookmarked"] {
	color: #e6a817;
	background: rgba(230, 168, 23, 0.12);
}

.cm-icon-toggle.active[title*="watch"],
.cm-icon-toggle.active[title*="Watch"],
.cm-icon-toggle.active[title*="Unwatch"] {
	color: #3b82f6;
	background: rgba(59, 130, 246, 0.12);
}

/* ── External reference rows ── */
.cm-ref-row {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	transition: background 0.15s;
}

.cm-ref-row:hover {
	background: var(--color-surface-hover);
}

.cm-ref-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--red-400);
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
	padding: 0;
}

.cm-ref-row:hover .cm-ref-delete {
	opacity: 1;
}

.cm-ref-delete:hover {
	background: rgba(239, 68, 68, 0.12);
}

.cm-ref-delete .material-icons-round {
	font-size: 16px;
}

/* ── Bar Graph ── */
.bar-graph {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 140px;
	padding: var(--space-3) 0;
}

.bar-graph.compact {
	height: 100px;
}

.bar {
	flex: 1;
	min-width: 3px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-1);
	position: relative;
	border-radius: 3px 3px 0 0;
	opacity: 0.8;
	transition: opacity var(--duration-fast);
}

.bar:hover {
	opacity: 1;
}

.bar .bar-fill {
	width: 100%;
	border-radius: 3px 3px 0 0;
	transition: height var(--duration-moderate) var(--ease-default);
	opacity: 0.8;
	min-height: 4px;
}

.bar:hover .bar-fill {
	opacity: 1;
}

/* Status-colored bars (with .bar-fill child) */
.bar[data-status="green"] .bar-fill  { background: var(--color-success); height: 100%; }
.bar[data-status="yellow"] .bar-fill { background: var(--color-warning); height: 66%; }
.bar[data-status="red"] .bar-fill    { background: var(--color-danger); height: 60%; }
.bar[data-status="blue"] .bar-fill   { background: var(--color-info); height: 100%; }
.bar[data-status="gray"] .bar-fill   { background: var(--color-text-muted); height: 20%; opacity: 0.5; }

/* Severity-colored bars (direct background) */
.bar[data-severity="critical"] { background: var(--color-danger); }
.bar[data-severity="high"]     { background: var(--color-warning); }
.bar[data-severity="medium"]   { background: var(--color-info); }
.bar[data-severity="low"]      { background: var(--color-success); }
.bar[data-severity="none"]     { background: var(--color-text-muted); opacity: 0.3; }

.bar-date {
	font-size: 9px;
	color: var(--color-text-muted);
	white-space: nowrap;
	position: absolute;
	bottom: -16px;
}

.bar:nth-child(even) .bar-date {
	display: none;
}

/* ── Inline Input ── */
.inline-input {
	background: transparent;
	border: none;
	border-bottom: 1px dashed var(--color-border);
	color: var(--color-text-secondary);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	padding: var(--space-1) 0;
	outline: none;
	transition: border-color var(--duration-fast);
	min-width: 0;
}

.inline-input:focus {
	border-bottom-color: var(--color-accent);
}

/* ── Inline Textarea ── */
.inline-textarea {
	background: var(--color-surface-sunken);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-3);
	resize: vertical;
	min-height: 60px;
	outline: none;
	line-height: var(--leading-relaxed);
	transition: border-color var(--duration-fast);
	min-width: 0;
}

.inline-textarea:focus {
	border-color: var(--color-accent);
}

/* ── Nav List Item ── */
.nav-list-item {
	display: flex;
	align-items: center;
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	font-size: var(--text-sm);
	border: none;
	border-bottom: 1px solid var(--color-border-subtle);
	background: transparent;
	color: var(--color-text);
	text-align: left;
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	transition: all var(--duration-fast);
}

.nav-list-item:hover {
	background: var(--color-surface-hover);
}

.nav-list-item.active {
	background: var(--color-surface-hover);
	color: var(--color-accent);
	box-shadow: inset 3px 0 0 var(--color-accent);
}

/* ── Empty State ── */
.empty-state {
	padding: var(--space-6);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 6: App-Specific Layouts
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard ── */
.dashboard {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.dash-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.greeting h2 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
}

.dash-tempo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.dash-tempo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: var(--weight-medium);
	transition: all 0.15s;
	color: var(--color-text);
}

.dash-tempo-link:hover {
	background: var(--color-surface-hover);
	border-color: var(--color-accent);
}

/* Stat cards row — 4-column grid */
.dash-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

.dash-stat-value {
	font-family: var(--font-mono);
	font-size: 28px;
	font-weight: var(--weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.dash-stat-label {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: var(--space-1);
}

/* Quick links row */
.dash-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, 96px);
	gap: var(--space-5) var(--space-4);
	justify-content: start;
	padding: var(--space-1) 0;
}

/* Two-column grid */
.dash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	align-items: start;
}

.dash-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-height: 60px;
}

/* Widget span & height variants */
.widget-span-2 { grid-column: 1 / -1; }
.widget-compact .widget-body { max-height: 120px; overflow-y: auto; }
.widget-tall .widget-body { min-height: 400px; }

/* Dashboard hero right side */
.dash-hero-right {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* Customize button active state */
#dash-customize-btn.active {
	background: var(--color-accent);
	color: var(--color-on-accent, #fff);
}

/* Edit mode styles */
.dash-grid.edit-mode .widget {
	cursor: grab;
	outline: 2px dashed var(--color-border);
	outline-offset: 2px;
	transition: outline-color 0.15s, opacity 0.15s;
}

.dash-grid.edit-mode .widget:hover {
	outline-color: var(--color-accent);
}

.dash-grid.edit-mode .widget.dragging {
	/* Card is replaced by a placeholder in the DOM —
	   hide it so it doesn't render alongside the placeholder */
	display: none;
}

.widget-drag-handle {
	cursor: grab;
	color: var(--color-text-muted);
	font-size: 18px;
	margin-right: var(--space-1);
	user-select: none;
}

.widget-drag-handle:hover {
	color: var(--color-text);
}

.widget-edit-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.widget-size-btn,
.widget-hide-btn {
	padding: 2px 4px;
}

.widget-size-btn .material-icons-round,
.widget-hide-btn .material-icons-round {
	font-size: 16px;
}

.widget-drop-placeholder {
	border: 2px dashed var(--color-accent);
	border-radius: var(--radius-lg);
	min-height: 60px;
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	box-sizing: border-box;
}

/* Hidden widgets panel */
.widget-hidden-panel {
	grid-column: 1 / -1;
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
}

.widget-hidden-panel h4 {
	margin: 0 0 var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.widget-hidden-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Quick actions card */
.dash-actions-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Widget cards */
.widget {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	--card-padding: 0;
	--card-gap: 0;
}

.widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.widget-header-link {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--color-accent);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}

.widget-header-link:hover {
	color: var(--color-accent-hover);
}

.widget-body {
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.widget-empty {
	padding: var(--space-6) var(--space-4);
	color: var(--color-text-muted);
	text-align: center;
	font-size: var(--text-sm);
}

.widget-error {
	color: var(--color-danger);
	font-size: var(--text-sm);
	padding: var(--space-3) var(--space-4);
}

/* Widget list items */
.widget-list {
	display: flex;
	flex-direction: column;
}

.widget-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-bottom: 1px solid var(--color-border);
	transition: background var(--duration-fast);
	color: var(--color-text);
}

a.widget-list-item:hover {
	background: var(--color-surface-hover);
}

.widget-list-item:last-child {
	border-bottom: none;
}

.widget-item-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--weight-medium);
}

.widget-item-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

/* Command items */
.widget-cmd-item {
	justify-content: space-between;
}

.widget-cmd-text {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-success);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

/* Team member list */
.widget-member-list {
	display: flex;
	flex-direction: column;
}

.widget-member {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

.widget-member:last-child {
	border-bottom: none;
}

.widget-member-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-accent-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	flex-shrink: 0;
}

.widget-member-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.widget-member-role {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
}

/* Alert banner inside widget */
.widget-alert {
	display: flex;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

/* Footer link */
.widget-footer-link {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: var(--weight-semibold);
	color: var(--color-accent);
	border-top: 1px solid var(--color-border);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: color var(--duration-fast);
}

.widget-footer-link:hover {
	color: var(--color-accent-hover);
}

/* === Feedback App === */
.feedback-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* === LinkHub App === */
.linkhub-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.link-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 96px);
	gap: var(--space-5) var(--space-4);
	justify-content: start;
	padding: var(--space-2) 0;
}

.link-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 96px;
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
	position: relative;
}

.link-tile:hover .link-icon {
	transform: translateY(-2px);
	border-color: var(--color-accent);
}

.link-tile.dragging { opacity: 0.3; }

.link-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 22%;
	background: linear-gradient(
		135deg,
		var(--tile-color, var(--color-accent)),
		color-mix(in srgb, var(--tile-color, var(--color-accent)) 60%, black)
	);
	font-size: 28px;
	color: #fff;
	overflow: hidden;
	border: 1px solid transparent;
	box-shadow: none;
	transition:
		transform var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
	flex-shrink: 0;
}

.link-icon .material-icons-round {
	font-size: 32px;
	color: #fff;
}

.link-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
}


.link-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	text-align: center;
	max-width: 96px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tile action buttons */
.tile-actions {
	position: absolute;
	top: -6px;
	right: -4px;
	display: flex;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--duration-fast);
	z-index: 2;
}

.link-tile:hover .tile-actions { opacity: 1; }

.tile-action-btn {
	width: 24px;
	height: 22px;
	background: transparent;
	border: none;
	color: var(--color-text-muted);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}

.tile-action-btn:hover {
	background: var(--color-accent);
	color: #fff;
}

.drop-placeholder {
	width: 96px;
	height: 96px;
	border-radius: 22%;
	border: 2px dashed var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	opacity: 0.7;
}

.drag-ghost {
	opacity: 0.85;
}

.tag-filters {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
}

/* Workflows */
.workflow-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: stretch;
}

.workflow-bar h3 {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-muted);
	margin: 0;
}

.wf-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	transition:
		background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
	cursor: pointer;
}

.wf-card:hover {
	background: var(--color-surface-hover);
	border-color: var(--color-accent);
}

.wf-card-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	background: linear-gradient(
		135deg,
		var(--wf-color),
		color-mix(in srgb, var(--wf-color) 60%, black)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	overflow: hidden;
}

.wf-card-icon .material-icons-round {
	font-size: 20px;
	color: #fff;
}

.wf-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.wf-card-info {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.wf-card-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wf-card-badge {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	background: var(--color-surface-sunken);
	padding: 1px 8px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.wf-card-edit {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	flex-shrink: 0;
	transition:
		opacity var(--duration-fast),
		background var(--duration-fast),
		color var(--duration-fast);
}

.wf-card:hover .wf-card-edit {
	opacity: 1;
}

.wf-card-edit:hover {
	background: var(--color-accent);
	color: #fff;
}

/* Workflow link picker */
.wf-link-picker {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	max-height: 200px;
	overflow-y: auto;
	padding: var(--space-2);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-subtle);
}

.wf-pick-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--text-sm);
}

.wf-pick-item:hover { background: var(--color-surface-hover); }

/* Icon picker */
.icon-picker {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	background: var(--color-surface-sunken);
	overflow: hidden;
}

.icon-picker-controls {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-border-subtle);
}

.icon-picker-controls .input {
	font-size: var(--text-sm);
	width: 100%;
}

.icon-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 44px);
	gap: 4px;
	padding: var(--space-2);
	max-height: 200px;
	overflow-y: auto;
	justify-content: start;
}

.icon-picker-grid .icon-option {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	background: var(--color-surface);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	transition: border-color var(--duration-fast) var(--ease-default);
}

.icon-picker-grid .icon-option:hover {
	border-color: var(--color-accent);
}

.icon-picker-grid .icon-option.selected {
	border-color: var(--color-accent);
	background: var(--color-accent-bg);
}

.icon-picker-grid .icon-option img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.share-banner {
	max-width: 400px;
	margin: var(--space-10) auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

.share-banner p {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
}

.share-banner .link-tile {
	pointer-events: none;
}

.share-actions {
	display: flex;
	gap: var(--space-3);
}

.link-preview-row {
	display: flex;
	justify-content: center;
	padding: var(--space-3) 0;
}

.link-preview-row .link-tile {
	pointer-events: none;
}

.color-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.color-row input[type="color"] {
	width: 40px;
	height: 40px;
	padding: 2px;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-sunken);
	cursor: pointer;
}

.color-swatches {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.swatch {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		transform var(--duration-fast) var(--ease-spring),
		border-color var(--duration-fast);
}

.swatch:hover {
	transform: scale(1.2);
	border-color: var(--color-text);
}

/* === Templates App === */
/* ── NoteGen (Templates) ── */
.ng-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-4);
}

.ng-sidebar {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--header-height) - var(--space-16));
	position: sticky;
	top: var(--space-4);
}

.ng-sidebar-list {
	display: flex;
	flex-direction: column;
}


/* Inline fillable document — 2-column grid, label column auto-sized */
.ng-document {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	max-height: calc(100dvh - var(--header-height) - var(--space-16));
	overflow-y: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-3);
	row-gap: var(--space-4);
	align-items: center;
}

/* Lines use display:contents so label + input sit in parent grid */
.ng-line {
	display: contents;
}

.ng-label {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	white-space: nowrap;
	text-transform: uppercase;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-align: right;
}


/* Section (label + textarea) — also display:contents */
.ng-section {
	display: contents;
}

.ng-section > .ng-label {
	align-self: flex-start;
	padding-top: var(--space-2);
}

/* Toggle lines — display:contents too */
.ng-toggle-line {
	display: contents;
}

/* Conditional sections — span the input column */
.ng-conditional {
	grid-column: 2;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-accent);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ng-conditional .ng-line {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.ng-conditional .ng-label {
	width: auto;
	min-width: 120px;
}

.ng-conditional .inline-input {
	flex: 1;
}


/* Divider between form and preview */
.ng-divider {
	grid-column: 1 / -1;
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-4) 0;
}

/* Preview section */
.ng-preview-section {
	grid-column: 1 / -1;
}

.ng-preview-section #ng-preview {
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}

/* Info blocks — span full width */
.ng-document .ng-info {
	grid-column: 1 / -1;
	overflow-wrap: break-word;
	word-break: break-word;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.ng-document .ng-info a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* Part/DBD cards — full-width when inside conditional */
.ng-conditional:has(.ng-cards-container) {
	grid-column: 1 / -1;
	padding-left: var(--space-6);
}

.ng-document .ng-cards-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ng-document .ng-part-card {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-sm);
	align-items: end;
}

.ng-document .ng-part-card--wide {
	grid-template-columns: repeat(5, 1fr) auto;
}

.ng-document .ng-dbd-card {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-sunken);
	border-radius: var(--radius-sm);
	align-items: end;
}

.ng-document .ng-part-card .field,
.ng-document .ng-dbd-card .field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ng-document .ng-part-card .field label,
.ng-document .ng-dbd-card .field label {
	font-size: var(--text-2xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.ng-document .ng-card-remove {
	align-self: end;
	padding-bottom: var(--space-1);
}

.ng-document .ng-card-remove .btn {
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-xs);
	line-height: 1;
}


/* === Commands App === */
.commands-layout {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.2fr);
	gap: var(--space-4);
}

.commands-search-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.commands-builder {
	background: var(--color-surface);
	border: none;
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	position: sticky;
	top: var(--space-4);
	max-height: calc(100dvh - var(--space-8));
	overflow-y: auto;
}

.cmd-tabs {
	display: flex;
	gap: var(--space-1);
	border-bottom: 1px solid var(--color-border-subtle);
	padding-bottom: var(--space-1);
}


/* Commands builder sub-components */
.cmd-result {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	border: none;
	text-align: left;
	color: var(--color-text);
	font-family: var(--font-sans);
}

.cmd-name { font-weight: var(--weight-medium); }

.cmd-desc {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: 2px;
}

.cmd-preview {
	background: var(--color-surface-sunken);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	overflow-x: auto;
}

.cmd-preview code {
	color: var(--color-success);
	background: transparent;
	padding: 0;
}

.flag-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.cmd-param-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.flag-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.flag-field label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.builder-actions {
	display: flex;
	gap: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-subtle);
}

/* NoteGen responsive */
@media (max-width: 900px) {
	.ng-layout {
		grid-template-columns: 1fr;
	}
	.ng-sidebar {
		position: static;
		max-height: 200px;
	}
	.ng-document {
		max-height: none;
	}
}

/* Team member rows (Tempo team view) */
.team-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border-subtle);
}

.member-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	flex-shrink: 0;
}

.member-days {
	display: flex;
	gap: 2px;
	flex: 1;
}

.day-cell {
	flex: 1;
	height: 24px;
	border-radius: 3px;
	min-width: 4px;
	transition: opacity var(--duration-fast);
}

.day-cell:hover { opacity: 0.8; }

.day-cell[data-status="green"]  { background: var(--color-success); opacity: 0.7; }
.day-cell[data-status="yellow"] { background: var(--color-warning); opacity: 0.7; }
.day-cell[data-status="red"]    { background: var(--color-danger);  opacity: 0.7; }
.day-cell[data-status="blue"]   { background: var(--color-info);    opacity: 0.7; }
.day-cell[data-status="gray"]   { background: var(--color-surface-hover); }



/* === Tempo App === */
.tempo-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Two-column top row: cool-bar + chart */
.tempo-top-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	align-items: stretch;
}

.tempo-chart-card {
	display: flex;
	flex-direction: column;
}

.tempo-chart-card .tempo-chart {
	flex: 1;
	min-height: 80px;
}

/* Action buttons grid */
.tempo-actions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.tempo-range-controls {
	display: flex;
	gap: var(--space-1);
}

/* Cool-bar — check-in hero */
.cool-bar {
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transition: background var(--duration-moderate) var(--ease-default);
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
}

.cool-bar[data-state="idle"] {
	background: var(--color-surface);
}

.cool-bar[data-state="late-notice"] {
	background: var(--color-warning-bg);
	border-color: var(--color-warning);
}

.cool-bar[data-state="late-no-notice"] {
	background: var(--color-danger-bg);
	border-color: var(--color-danger);
}

.cool-bar[data-state="checked-in"] {
	background: var(--color-success-bg);
	border-color: var(--color-success);
}

.cool-bar .live-clock {
	font-size: var(--text-sm);
	font-family: var(--font-mono);
	color: var(--color-text-muted);
	display: flex;
	justify-content: space-between;
}

.cool-bar .status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.cool-bar .status-message {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-primary);
}

.cool-bar .status-sub {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	font-family: var(--font-mono);
}

.cool-bar .late-reason-input {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--duration-moderate) var(--ease-default),
	            opacity var(--duration-moderate) var(--ease-default);
}

.cool-bar .late-reason-input.visible {
	max-height: 80px;
	opacity: 1;
}

/* Tempo Chart — 30-day variable-height bars */
.tempo-chart {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 80px;
	padding: var(--space-3) 0;
}

.tempo-chart.compact {
	height: 50px;
}

.tempo-bar {
	flex: 1;
	min-width: 3px;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-default),
	            filter var(--duration-fast) var(--ease-default);
	position: relative;
	opacity: 0.8;
}

.tempo-bar:hover,
.tempo-bar:focus-visible {
	transform: scaleY(1.15);
	filter: brightness(1.15);
	opacity: 1;
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.tempo-bar[data-status="red"]    { height: 25px; background: var(--color-danger); }
.tempo-bar[data-status="gray"]   { height: 40px; background: var(--color-text-muted); opacity: 0.4; }
.tempo-bar[data-status="yellow"] { height: 50px; background: var(--color-warning); }
.tempo-bar[data-status="green"]  { height: 60px; background: var(--color-success); }
.tempo-bar[data-status="blue"]   { height: 75px; background: var(--color-info); }

.tempo-bar.today::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid var(--color-text-muted);
}

/* Tempo Tooltip */
.tempo-tooltip {
	position: fixed;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text-primary);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	pointer-events: none;
	z-index: 1000;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-default);
	max-width: 250px;
	box-shadow: var(--shadow-lg);
}

.tempo-tooltip.visible {
	opacity: 1;
}

.tempo-tooltip .tooltip-date {
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	margin-bottom: var(--space-1);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid var(--color-border-subtle);
}

.tempo-tooltip .tooltip-status {
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-1);
}

.tempo-tooltip .tooltip-details {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Notice toggle group (used in modal) */
.notice-toggle-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.notice-toggle-group .btn.active {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-accent-bg);
}

.time-selectors {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--duration-moderate) var(--ease-default),
	            opacity var(--duration-moderate) var(--ease-default);
}

.time-selectors.visible {
	max-height: 200px;
	opacity: 1;
}

.time-picker {
	display: flex;
	gap: var(--space-3);
	align-items: flex-end;
}

.time-picker .input {
	width: 80px;
}

.time-picker .field {
	flex: 1;
}

/* Hour Selector (+/-) */
.hour-selector {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.hour-selector .btn.icon-only {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
}

.hour-selector .hour-display {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	font-family: var(--font-mono);
	min-width: 80px;
	text-align: center;
	white-space: nowrap;
}

.hour-selector.error .hour-display {
	color: var(--color-danger);
	animation: shake 0.4s ease;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.ot-summary {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	font-family: var(--font-mono);
	color: var(--color-info);
	background: var(--color-info-bg);
	padding: 0;
	border-radius: var(--radius-md);
	text-align: center;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--duration-moderate) var(--ease-default),
	            opacity var(--duration-moderate) var(--ease-default),
	            padding var(--duration-moderate) var(--ease-default);
}

.ot-summary.visible {
	max-height: 50px;
	opacity: 1;
	padding: var(--space-2) var(--space-3);
}

.other-reason-input {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--duration-moderate) var(--ease-default),
	            opacity var(--duration-moderate) var(--ease-default);
}

.other-reason-input.visible {
	max-height: 80px;
	opacity: 1;
}

.section-row {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
}

/* Calendar */
.cal-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.cal-header h3 {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	margin: 0;
	min-width: 160px;
	text-align: center;
}

.cal-header #cal-today-btn {
	margin-left: auto;
}

.cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: var(--space-2) 0;
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
}

.cal-legend-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-2xs);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-text-muted);
}

.cal-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.cal-swatch[data-status="green"]  { background: var(--color-success); }
.cal-swatch[data-status="yellow"] { background: var(--color-warning); }
.cal-swatch[data-status="red"]    { background: var(--color-danger); }
.cal-swatch[data-status="blue"]   { background: var(--color-info); }
.cal-swatch[data-status="gray"]   { background: var(--color-text-muted); opacity: 0.5; }

.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.cal-weekday {
	background: var(--color-surface-sunken);
	padding: var(--space-2);
	text-align: center;
	font-size: var(--text-2xs);
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-muted);
}

.cal-day {
	background: var(--color-surface);
	padding: var(--space-3);
	min-height: 128px;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	position: relative;
	transition: background var(--duration-fast) var(--ease-default);
}

.cal-day:hover {
	background: var(--color-surface-hover);
}

.cal-day.today {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
	z-index: 1;
}

.cal-day.empty {
	background: var(--color-surface-sunken);
	min-height: 0;
	pointer-events: none;
}

.cal-day .cal-date {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	color: var(--color-text-primary);
}

.cal-day.today .cal-date {
	color: var(--color-accent);
}

.cal-day.outside .cal-date {
	color: var(--color-text-muted);
	opacity: 0.4;
}

.cal-day .cal-status-bar {
	height: 4px;
	border-radius: 2px;
	margin-top: auto;
}

.cal-day .cal-status-bar[data-status="green"]  { background: var(--color-success); }
.cal-day .cal-status-bar[data-status="yellow"] { background: var(--color-warning); }
.cal-day .cal-status-bar[data-status="red"]    { background: var(--color-danger); }
.cal-day .cal-status-bar[data-status="blue"]   { background: var(--color-info); }
.cal-day .cal-status-bar[data-status="gray"]   { background: var(--color-text-muted); opacity: 0.3; }

.cal-day .cal-label {
	font-size: var(--text-2xs);
	font-family: var(--font-mono);
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cal-day .cal-time {
	font-size: var(--text-2xs);
	font-family: var(--font-mono);
	color: var(--color-text-secondary);
}

.cal-day .cal-reason {
	font-size: var(--text-2xs);
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Team View */
/* Team members list */
.team-members-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.team-layout, .team-calendar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* ── Team context view ── */
.tm-section-label {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	margin-bottom: var(--space-2);
}

.tm-member-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.tm-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
	background: var(--color-surface);
	transition: background var(--duration-fast) var(--ease-default);
}

.tm-card:hover {
	background: var(--color-surface-hover);
}

.tm-card-self {
	border-left: 3px solid var(--color-accent);
	background: var(--color-accent-bg);
}

.tm-card-self:hover {
	background: var(--color-accent-bg);
}

.tm-card-sup {
	border-left: 3px solid var(--color-text-muted);
	opacity: 0.85;
}

.tm-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-surface-active);
	color: var(--color-text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	flex-shrink: 0;
}

.tm-card-self .tm-avatar {
	background: var(--color-accent);
	color: var(--color-accent-text);
}

.tm-card-info {
	flex: 1;
	min-width: 0;
}

.tm-card-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

.tm-card-title {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	font-style: italic;
}

.tm-card-badges {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--space-1);
}

.tm-card-dept {
	font-size: var(--text-2xs);
	color: var(--color-text-muted);
}

.tm-card-actions {
	display: flex;
	gap: var(--space-1);
	flex-shrink: 0;
}

/* Shift row */
.tm-shift-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border-subtle);
}

.tm-shift-row:last-child {
	border-bottom: none;
}

.tm-shift-name {
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	flex: 1;
}

/* Day picker for shift schedules */
.tm-day-picker {
	display: flex;
	gap: var(--space-1);
}

.tm-day {
	cursor: pointer;
	user-select: none;
}

.tm-day span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 32px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	color: var(--color-text-muted);
	transition: all var(--duration-fast) var(--ease-default);
}

.tm-day input { display: none; }

.tm-day input:checked + span {
	background: var(--color-accent-bg);
	border-color: var(--color-accent);
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
}

/* Title fuzzy search suggestions */
.tm-title-suggestions {
	position: absolute;
	z-index: var(--z-dropdown);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	max-height: 160px;
	overflow-y: auto;
	width: 100%;
	margin-top: var(--space-1);
}

.tm-title-option {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: background var(--duration-fast);
}

.tm-title-option:hover {
	background: var(--color-surface-hover);
}

.field:has(.tm-title-suggestions) {
	position: relative;
}

/* Team Member Cards */
.team-member-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: border-color var(--duration-fast) var(--ease-default);
}

.team-member-card:hover {
	border-color: var(--color-border);
}

.team-member-card.ot-visitor {
	border-left: 3px solid var(--color-info);
}

.team-member-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.team-member-header .member-name {
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
}

.team-member-header .member-status {
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
}

.team-member-header .member-status.status-green  { color: var(--color-success); }
.team-member-header .member-status.status-yellow { color: var(--color-warning); }
.team-member-header .member-status.status-red    { color: var(--color-danger); }
.team-member-header .member-status.status-gray   { color: var(--color-text-muted); }

.ot-badge {
	margin-left: auto;
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: var(--space-0h) var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-info-bg);
	color: var(--color-info);
}

/* Team Grade */
.team-grade {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
	flex-shrink: 0;
}

.grade-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	font-family: var(--font-mono);
	color: #fff;
	flex-shrink: 0;
}

.grade-badge[data-grade="A"] { background: var(--color-success); }
.grade-badge[data-grade="B"] { background: var(--color-accent); }
.grade-badge[data-grade="C"] { background: var(--color-warning); }
.grade-badge[data-grade="D"] { background: #e67e22; }
.grade-badge[data-grade="F"] { background: var(--color-danger); }
.grade-badge[data-grade="-"] { background: var(--color-text-muted); opacity: 0.5; }

.grade-flavor {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-style: italic;
}

.grade-score {
	font-size: var(--text-2xs);
	font-family: var(--font-mono);
	color: var(--color-text-muted);
}

.team-member-card .tempo-chart.compact .tempo-bar[data-status="red"]    { height: 16px; }
.team-member-card .tempo-chart.compact .tempo-bar[data-status="gray"]   { height: 25px; }
.team-member-card .tempo-chart.compact .tempo-bar[data-status="yellow"] { height: 32px; }
.team-member-card .tempo-chart.compact .tempo-bar[data-status="green"]  { height: 38px; }
.team-member-card .tempo-chart.compact .tempo-bar[data-status="blue"]   { height: 48px; }

.team-pending-requests {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.team-pending-request {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	background: var(--color-surface-sunken);
}

.team-pending-request .request-label {
	flex: 1;
	color: var(--color-text-secondary);
}

.team-pending-request .request-actions {
	display: flex;
	gap: var(--space-1);
}

/* Team Calendar — status bubbles per member per day */
.team-cal-day {
	background: var(--color-surface);
	padding: var(--space-2);
	min-height: 80px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.team-cal-day:hover {
	background: var(--color-surface-hover);
}

.team-cal-day.today {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
	z-index: 1;
}

.team-cal-day.empty {
	background: var(--color-surface-sunken);
	min-height: 0;
	pointer-events: none;
}

.team-cal-day .cal-date {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	font-family: var(--font-mono);
	color: var(--color-text-primary);
	margin-bottom: 2px;
}

.team-cal-day.today .cal-date {
	color: var(--color-accent);
}

.team-cal-member {
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}

.team-cal-member .status-bubble {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.team-cal-member .status-bubble[data-status="green"]  { background: var(--color-success); }
.team-cal-member .status-bubble[data-status="yellow"] { background: var(--color-warning); }
.team-cal-member .status-bubble[data-status="red"]    { background: var(--color-danger); }
.team-cal-member .status-bubble[data-status="blue"]   { background: var(--color-info); }
.team-cal-member .status-bubble[data-status="gray"]   { background: var(--color-text-muted); opacity: 0.4; }

.team-cal-member .member-name-sm {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#pending-requests h3,
#pending-section h3 {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	margin: 0;
}

/* === Team Management === */
.org-chart-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.org-chart {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Org nodes — nested indentation with connector lines */
.org-node {
	position: relative;
	margin-left: 24px;
}

.org-chart > .org-node {
	margin-left: 0;
}

/* Vertical connector line (on non-root nodes) */
.org-node::before {
	content: '';
	position: absolute;
	left: -16px;
	top: -6px;
	bottom: 0;
	width: 1px;
	background: var(--color-border);
}

.org-chart > .org-node::before {
	display: none;
}

/* Horizontal connector line */
.org-node::after {
	content: '';
	position: absolute;
	left: -16px;
	top: 20px;
	width: 14px;
	height: 1px;
	background: var(--color-border);
}

.org-chart > .org-node::after {
	display: none;
}

/* Last child — stop vertical line at the horizontal connector */
.org-node:last-child::before {
	top: -6px;
	bottom: auto;
	height: calc(20px + 6px + 1px);
}

/* Org card — bordered with depth-colored left accent */
.org-card {
	--org-accent: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--org-accent);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: var(--text-sm);
	transition: all 0.15s;
	position: relative;
}

.org-card:hover {
	background: var(--color-surface-hover);
}

/* Depth-based accent colors: cycle accent → purple → green → amber */
.org-chart > .org-node .org-card                                            { --org-accent: var(--blue-400); }
.org-chart > .org-node .org-children .org-node > .org-card                  { --org-accent: var(--purple-400); }
.org-chart > .org-node .org-children .org-children .org-node > .org-card    { --org-accent: var(--green-400); }
.org-chart > .org-node .org-children .org-children .org-children .org-node > .org-card { --org-accent: var(--yellow-400); }

.org-card .org-avatar {
	display: none;
}

.org-card .name {
	font-size: 13px;
	font-weight: var(--weight-semibold);
}

.org-card .title-text {
	font-size: 11px;
	color: var(--color-text-secondary);
	font-style: italic;
}

.org-card .role-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-muted);
}

.org-card .metro-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--color-text-muted);
	margin-left: auto;
}

.org-card.temp-assign {
	border: 1px dashed var(--color-warning);
	border-left: 3px solid var(--color-warning);
}

/* Collapse toggle — arrow that rotates */
.collapse-toggle {
	background: none;
	border: none;
	color: var(--color-text-muted);
	width: 16px;
	font-size: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s, color 0.15s;
	order: -1;
}

.collapse-toggle:hover {
	color: var(--color-text);
}

.org-node.collapsed .collapse-toggle {
	transform: rotate(-90deg);
}

/* Children count (from JS) */
.org-node.collapsed > .org-children {
	display: none;
}

.org-node.collapsed > .connector-down {
	display: none;
}

/* Legacy connector-down — hidden, now using ::before pseudoelement */
.connector-down {
	display: none;
}

.org-children {
	padding-left: 0;
}

/* === Change Management === */
.cm-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Table enhancements */
.table tbody tr {
	cursor: pointer;
}


/* ── Reminders / Corkboard ── */
.corkboard {
	position: relative;
	min-height: calc(100vh - 180px);
	background:
		radial-gradient(circle, var(--color-border) 1px, transparent 1px);
	background-size: 32px 32px;
	border-radius: var(--radius-lg);
	border: 2px dashed var(--color-border);
	overflow: hidden;
}

.corkboard-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	color: var(--color-text-muted);
}

.sticky-note {
	position: absolute;
	width: 220px;
	min-height: 120px;
	background: var(--note-color, #FFE045);
	border: none;
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	padding-bottom: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	cursor: grab;
	transition: box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
	box-shadow: 2px 3px 8px rgba(0,0,0,0.25);
	color: rgba(0,0,0,0.9);
}

.sticky-note:hover {
	box-shadow: 3px 5px 14px rgba(0,0,0,0.3);
}

.sticky-note.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

.sticky-body {
	font-size: var(--text-sm);
	color: rgba(0,0,0,0.87);
	line-height: 1.45;
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	white-space: pre-wrap;
	word-break: break-word;
}

.sticky-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	font-size: var(--text-xs);
	color: rgba(0,0,0,0.7);
}

.sticky-deadline,
.sticky-recur {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

/* Bottom bar: actions left, urgency bubble right */
.sticky-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	margin-top: auto;
}

.sticky-actions {
	display: flex;
	gap: 0;
	opacity: 0;
	transition: opacity var(--duration-fast);
}

.sticky-note:hover .sticky-actions {
	opacity: 1;
}

.sticky-actions .btn {
	padding: 2px;
	min-width: 0;
	border: none;
	color: rgba(0,0,0,0.6);
	border-radius: var(--radius-sm);
}

.sticky-actions .btn:hover {
	color: rgba(0,0,0,0.85);
	background: rgba(0,0,0,0.08);
}

.sticky-actions .material-icons-round {
	font-size: 15px;
}

/* Urgency status bubble */
.sticky-urgency {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	border: 2px solid rgba(255,255,255,0.6);
	background: var(--color-text-muted);
	flex-shrink: 0;
}

.urgency-none .sticky-urgency    { background: rgba(0,0,0,0.15); border-color: rgba(0,0,0,0.1); }
.urgency-low .sticky-urgency     { background: var(--green-500); }
.urgency-medium .sticky-urgency  { background: var(--yellow-600); }
.urgency-high .sticky-urgency    { background: var(--orange-500); box-shadow: 0 0 6px var(--orange-400); }
.urgency-overdue .sticky-urgency { background: var(--red-500); box-shadow: 0 0 8px var(--red-400); animation: urgency-pulse 1.5s ease-in-out infinite; }

@keyframes urgency-pulse {
	0%, 100% { box-shadow: 0 0 4px var(--red-400); }
	50% { box-shadow: 0 0 12px var(--red-400); }
}

/* Urgency deadline text emphasis */
.urgency-high .sticky-deadline   { color: rgba(0,0,0,0.8); font-weight: 600; }
.urgency-overdue .sticky-deadline { color: rgba(0,0,0,0.9); font-weight: 700; }

/* Color swatches */
.color-swatches {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.swatch {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color var(--duration-fast);
}

.swatch:hover { border-color: var(--color-text-muted); }
.swatch.active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg); }

/* Webhook items */
.webhook-item {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
}

.webhook-item-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.webhook-item-detail {
	margin-bottom: var(--space-2);
	font-size: var(--text-xs);
}

.webhook-item-actions {
	display: flex;
	gap: var(--space-2);
}

.webhook-log-item {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.webhook-log-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-1);
	font-size: var(--text-xs);
}

.webhook-log-time {
	color: var(--color-text-muted);
	margin-left: auto;
}

.webhook-log-error {
	color: var(--red-400);
	font-size: var(--text-xs);
	margin-bottom: var(--space-1);
}

.webhook-log-payload {
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	background: var(--color-surface-alt);
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 100px;
}

/* Context menu */
.ctx-menu {
	position: fixed;
	z-index: 9999;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-1);
	min-width: 160px;
}

.ctx-menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: none;
	background: none;
	color: var(--color-text);
	font-size: var(--text-sm);
	cursor: pointer;
	border-radius: var(--radius-sm);
	text-align: left;
}

.ctx-menu-item:hover {
	background: var(--color-surface-hover);
}

.ctx-confirm-msg {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text);
	white-space: nowrap;
}

.ctx-confirm-actions {
	display: flex;
	gap: var(--space-1);
	padding: 0 var(--space-1) var(--space-1);
}

.ctx-confirm-actions .ctx-menu-item {
	flex: 1;
	justify-content: center;
	font-weight: 500;
}

.ctx-confirm-action {
	color: var(--red-400);
}

/* Reminders tabs */
.reminders-tabs {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.tab-badge {
	display: inline-block;
	background: var(--red-500);
	color: #fff;
	font-size: 10px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: var(--space-1);
	vertical-align: middle;
}

/* Sender label on received notes */
.sticky-sender {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: rgba(0,0,0,0.6);
	font-weight: 600;
}

/* Custom date/time picker */
.datetime-picker {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.datetime-presets {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
}

.datetime-fields {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.datetime-fields input[type="date"] {
	flex: 1;
	min-width: 130px;
}

.datetime-fields select {
	width: auto;
	min-width: 55px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.sticky-note {
		width: 180px;
		min-height: 100px;
	}

	.sticky-actions {
		opacity: 1;
	}

	.datetime-fields {
		flex-wrap: wrap;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Layer 7: Utilities
   ═══════════════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Transition-ready for JS state changes */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity var(--duration-moderate) var(--ease-default); }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity var(--duration-moderate) var(--ease-default); }

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 8: Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
	:root {
		--content-padding: var(--space-5);
	}

	.dash-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.dash-grid {
		grid-template-columns: 1fr;
	}

	.dash-grid .widget-span-2 { grid-column: 1; }

	#dash-customize-btn { display: none; }

	.commands-layout {
		grid-template-columns: 1fr;
	}

	.commands-builder {
		position: static;
		max-height: none;
	}

	.tempo-top-row {
		grid-template-columns: 1fr;
	}

	.tempo-actions-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
	:root {
		--content-padding: var(--space-4);
		--nav-width: 0px;
	}

	body {
		flex-direction: column;
	}

	main {
		min-height: 100dvh;
		flex: 1;
	}

	/* Sidebar becomes a slide-out drawer */
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		min-width: 280px;
		background: var(--color-bg-raised);
		z-index: var(--z-overlay);
		transform: translateX(-100%);
		transition: transform var(--duration-moderate) var(--ease-default);
		padding: var(--space-4);
		border-right: none;
		max-height: 100dvh;
	}

	.sidebar.open {
		transform: translateX(0);
	}

	.sidebar-toggle {
		display: flex;
	}

	.sidebar-backdrop.visible {
		display: block;
		opacity: 1;
	}

	/* Page header stacks */
	.page-header h1 {
		font-size: var(--text-lg);
	}

	.page-actions {
		padding: var(--space-2) var(--content-padding);
	}

	/* Dashboard */
	.dash-hero {
		flex-direction: column;
		align-items: flex-start;
	}

	.dash-hero-right {
		width: 100%;
		justify-content: space-between;
	}

	.greeting h2 {
		font-size: var(--text-lg);
	}

	.dash-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.dash-grid {
		grid-template-columns: 1fr;
	}

	.dash-grid .widget-span-2 { grid-column: 1; }

	.dash-actions-row {
		flex-direction: column;
	}

	/* Tempo: stack on mobile */
	.tempo-top-row {
		grid-template-columns: 1fr;
	}

	.tempo-actions-grid {
		grid-template-columns: 1fr;
	}

	.cool-bar {
		padding: var(--space-4);
	}

	.cool-bar .status-message {
		font-size: var(--text-xl);
	}

	/* Modal fullscreen on mobile */
	.modal {
		width: 100%;
		max-width: 100%;
		max-height: 100dvh;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
		margin-top: auto;
	}

	.modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	/* Table horizontal scroll */
	.table {
		font-size: var(--text-xs);
	}

	.table th, .table td {
		padding: var(--space-2);
	}

	/* Link grid: tighter on mobile */
	.link-grid {
		grid-template-columns: repeat(auto-fill, 80px);
		gap: var(--space-3);
	}

	.link-icon {
		width: 56px;
		height: 56px;
		font-size: 24px;
	}

	.link-label {
		max-width: 80px;
	}

	/* Toast: full width */
	#toast-container {
		left: var(--space-4);
		right: var(--space-4);
		bottom: var(--space-4);
	}

	.toast {
		max-width: 100%;
	}

	/* Calendar */
	.cal-day {
		min-height: 52px;
		padding: var(--space-1);
	}

	.cal-day .cal-label,
	.cal-day .cal-reason {
		display: none;
	}

	.cal-legend {
		gap: var(--space-2);
	}

	/* Commands: single column */
	.commands-layout {
		grid-template-columns: 1fr;
	}

	/* Filters wrap */
	.filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-bar .select,
	.filter-bar .input {
		width: 100%;
		min-width: 0;
	}

	/* Detail grids */
	.detail-grid { grid-template-columns: 1fr; }
	.cmd-param-grid { grid-template-columns: 1fr; }
}

/* ── Small Mobile (≤ 480px) ── */
@media (max-width: 480px) {
	.section-row {
		flex-direction: column;
		align-items: stretch;
	}

	.cool-bar .status-row {
		flex-direction: column;
		text-align: center;
	}

	.dash-links {
		grid-template-columns: repeat(auto-fill, 80px);
		gap: var(--space-3);
	}
}

/* ── Settings Modal ── */
.settings-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.settings-btn-mobile {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-lg);
	transition: color var(--duration-fast) var(--ease-default);
}

.settings-btn-mobile:hover {
	color: var(--color-text);
}

.nav-footer-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.settings-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
}

.settings-modal.open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.settings-backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-bg-wash);
	backdrop-filter: blur(2px);
}

.settings-panel {
	position: relative;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	width: 360px;
	max-width: calc(100vw - 32px);
	box-shadow: var(--shadow-xl);
}

.settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-border-subtle);
}

.settings-header h2 {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--color-text-heading);
	margin: 0;
}

.settings-close {
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: var(--space-1);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	transition: color var(--duration-fast) var(--ease-default);
}

.settings-close:hover {
	color: var(--color-text);
}

.settings-body {
	padding: var(--space-5);
}

.settings-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.settings-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-family: var(--font-mono);
}

.theme-picker {
	display: flex;
	gap: var(--space-2);
}

.theme-option {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-2);
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	cursor: pointer;
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	transition: all var(--duration-fast) var(--ease-default);
}

.theme-option:hover {
	color: var(--color-text);
	border-color: var(--color-text-muted);
}

.theme-option.active {
	color: var(--color-accent);
	border-color: var(--color-accent);
	border-style: solid;
	background: var(--color-accent-bg);
}

.theme-option .material-icons-round {
	font-size: 22px;
}

/* Light-mode sidebar nav colors — use -500/-600 instead of -400 for contrast on white */
[data-theme="light"] .sidebar .nav-item[href="/dashboard/"] { --nav-color: var(--blue-500);   --nav-dim: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/tempo/"]     { --nav-color: var(--green-600);  --nav-dim: rgba(5, 150, 105, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/links/"]     { --nav-color: var(--blue-500);   --nav-dim: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/commands/"]  { --nav-color: var(--cyan-500);   --nav-dim: rgba(6, 182, 212, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/feedback/"]  { --nav-color: var(--orange-500); --nav-dim: rgba(249, 115, 22, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/changes/"]   { --nav-color: var(--red-500);    --nav-dim: rgba(239, 68, 68, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/templates/"] { --nav-color: var(--purple-500); --nav-dim: rgba(139, 92, 246, 0.08); }
[data-theme="light"] .sidebar .nav-item[href="/team/"]      { --nav-color: var(--green-600);  --nav-dim: rgba(5, 150, 105, 0.08); }

/* Light-mode sidebar logo colors */
[data-theme="light"] .sidebar:has(.nav-item[href="/dashboard/"].active) .brand-logo { color: var(--blue-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/tempo/"].active)     .brand-logo { color: var(--green-600); }
[data-theme="light"] .sidebar:has(.nav-item[href="/links/"].active)     .brand-logo { color: var(--blue-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/commands/"].active)  .brand-logo { color: var(--cyan-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/feedback/"].active)  .brand-logo { color: var(--orange-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/changes/"].active)   .brand-logo { color: var(--red-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/templates/"].active) .brand-logo { color: var(--purple-500); }
[data-theme="light"] .sidebar:has(.nav-item[href="/team/"].active)      .brand-logo { color: var(--green-600); }

@media (max-width: 768px) {
	.settings-btn-mobile {
		display: flex;
	}
}

/* ── Print ── */
@media print {
	.sidebar, .sidebar-toggle, #toast-container, .page-actions, .modal-overlay {
		display: none !important;
	}

	body {
		display: block;
		background: #fff;
		color: #000;
		padding: 0;
	}

	main {
		border-radius: 0;
		box-shadow: none;
	}

	.card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}
}