/* ──────────────────────────────────────────────
 * ApexAgent Design System — Linear-inspired 2026
 * Phase 1: Design Token Overhaul (Plan 068)
 * ────────────────────────────────────────────── */

@layer reset, base, components, utilities;

/* ── Reset Layer ── */
@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--border-radius-full); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
  ::selection { background: var(--primary); color: var(--on-primary); }
}

@layer base {
  body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Form controls don't inherit font-family from body by default (browser UA stylesheet) —
     without this, every brand theme's font override silently misses all inputs/buttons/selects.
     Sprint 103 (Plan 070) found this while wiring the Anthropic brand font app-wide. */
  input, select, textarea, button {
    font-family: inherit;
  }
}

:root {
  /* ── Linear 2026: Palette (Dark default) ── */

  /* Canvas & Surface hierarchy (4-step ladder) */
  --canvas:             #010102;
  --surface-1:          #0f1011;
  --surface-2:          #141516;
  --surface-3:          #18191a;

  /* Primary — Linear lavender-blue */
  --primary:            #5e6ad2;
  --primary-hover:      #828fff;
  --primary-light:      #8f9aff;
  --primary-container:  #2a2f6e;
  --primary-glow:       rgba(94, 106, 210, 0.22);
  --on-primary:         #ffffff;
  --on-primary-container: #d8dbff;

  /* Semantic colors */
  --accent:             #8f9aff;
  --success:            #27a644;
  --success-glow:       rgba(39, 166, 68, 0.18);
  --warning:            #eab308;
  --warning-glow:       rgba(234, 179, 8, 0.18);
  --danger:             #eb5757;
  --danger-glow:        rgba(235, 87, 87, 0.18);
  --info:               #5e6ad2;
  --info-glow:          rgba(94, 106, 210, 0.18);
  --accent-purple:      #8b5cf6;

  /* Hairline borders */
  --hairline:           #23252a;
  --hairline-strong:    #34343a;

  /* Text — 4-level hierarchy */
  --ink:                #f7f8f8;
  --ink-muted:          #d0d6e0;
  --ink-subtle:         #9ca3af;
  --ink-tertiary:       #62666d;

  /* Glassmorphism (kept for legacy overlay components) */
  --glass-bg:           rgba(1, 1, 2, 0.72);
  --glass-border:       rgba(255, 255, 255, 0.06);
  --glass-border-glow:  rgba(94, 106, 210, 0.20);
  --glass-shadow:       0 8px 32px 0 rgba(0, 0, 0, 0.5);
  --glass-blur:         24px;
  --glass-inset:        inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Legacy aliases (existing code compat) ── */
  --bg-primary:         var(--canvas);
  --bg-secondary:       var(--surface-1);
  --bg-gradient:        linear-gradient(160deg, var(--canvas) 0%, var(--surface-1) 100%);
  --surface:            var(--surface-1);
  --surface-hover:      var(--surface-2);
  --surface-tonal:      rgba(94, 106, 210, 0.06);
  --border:             var(--hairline);
  --border-strong:      var(--hairline-strong);
  --divider:            rgba(255, 255, 255, 0.06);
  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-muted);
  --text-muted:         var(--ink-subtle);

  /* ── Typography: Inter (Linear standard) ── */
  --font-family:        'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display:       'Inter Variable', 'Inter', sans-serif;
  --font-mono:          'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   32px;
  --font-weight-regular:  400;
  --font-weight-medium:   510;   /* Linear uses 510, not 500 */
  --font-weight-semibold: 590;   /* Linear bold = 590 */
  --font-weight-bold:     700;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide:   0.01em;

  /* Spacing scale — shared by the app shell and external modules */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ── Radius Scale — Linear 2026 ── */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    6px;    /* default for controls (Linear: 6px) */
  --radius:       12px;   /* cards, modals */
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-pill:  9999px;
  /* Legacy aliases */
  --border-radius-sm:   var(--radius-sm);
  --border-radius:      var(--radius);
  --border-radius-lg:   var(--radius-lg);
  --border-radius-full: var(--radius-pill);

  /* ─── Z-Index Scale — single source of truth ─── */
  --z-base:      0;
  --z-content:   1;
  --z-dropdown:  1000;
  --z-sticky:    1500;
  --z-nav:       2000;
  --z-overlay:   3000;
  --z-modal:     4000;
  --z-toast:     5000;
  --z-tooltip:   6000;
  --z-max:       99999;
  --z-sidebar:   100;
  --z-topbar:    1500;
  --z-drawer:    2500;
  --z-ai-panel:  3500;
  --z-cmd-palette: 5500;

  /* ─── Layout ─── */
  --sidebar-width:     260px;
  --sidebar-collapsed:  68px;
  --topbar-height:      64px;

  /* ── Shadows — minimal (Linear avoids drop shadows) ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow:     0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.35);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow:        0 0 16px var(--primary-glow);
  --shadow-glow-strong: 0 0 28px rgba(94,106,210,0.3);
  --elevation-1: rgba(94,106,210,0.04);
  --elevation-2: rgba(94,106,210,0.07);
  --elevation-3: rgba(94,106,210,0.10);

  /* ── Transitions — Linear speed ── */
  --transition-fast:  0.15s ease;
  --transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.4s  cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Interactions — new tokens ── */
  --scale-active:     0.97;
  --hover-brightness: 1.08;
  --focus-ring:       0 0 0 3px rgba(94, 106, 210, 0.3);
  --focus-ring-danger: 0 0 0 3px rgba(235, 87, 87, 0.3);

  /* ── Z-index scale ── */

  /* ── Material Symbols helper ── */
  --ms-font-variation: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Linear 2026: Light Theme ── */
[data-theme="light"] {
  /* Surface hierarchy */
  --canvas:             #ffffff;
  --surface-1:          #f3f4f5;
  --surface-2:          #ebedf0;
  --surface-3:          #e2e4e8;

  /* Primary */
  --primary:            #5e6ad2;
  --primary-hover:      #4f5bc4;
  --primary-light:      #8f9aff;
  --primary-container:  #e0e2ff;
  --primary-glow:       rgba(94, 106, 210, 0.15);
  --on-primary:         #ffffff;
  --on-primary-container: #2a2f6e;

  /* Semantic */
  --accent:             #5e6ad2;
  --success:            #1e8e3e;
  --success-glow:       rgba(30, 142, 62, 0.12);
  --warning:            #d97706;
  --warning-glow:       rgba(217, 119, 6, 0.12);
  --danger:             #dc2626;
  --danger-glow:        rgba(220, 38, 38, 0.12);
  --info:               #5e6ad2;
  --info-glow:          rgba(94, 106, 210, 0.12);
  --accent-purple:      #7c3aed;

  /* Hairline borders */
  --hairline:           #e2e4e8;
  --hairline-strong:    #c9cdd2;

  /* Text */
  --ink:                #1a1a1a;
  --ink-muted:          #5f6368;
  --ink-subtle:         #6b7280;
  --ink-tertiary:       #b0b5bd;

  /* Glassmorphism */
  --glass-bg:           rgba(255, 255, 255, 0.78);
  --glass-border:       rgba(0, 0, 0, 0.06);
  --glass-border-glow:  rgba(94, 106, 210, 0.12);
  --glass-shadow:       0 8px 32px 0 rgba(0, 0, 0, 0.06);
  --glass-blur:         16px;
  --glass-inset:        inset 0 1px 0 rgba(255,255,255,0.9);

  /* Legacy aliases */
  --bg-primary:         var(--canvas);
  --bg-secondary:       var(--surface-1);
  --bg-gradient:        linear-gradient(160deg, var(--canvas) 0%, var(--surface-1) 100%);
  --surface:            var(--surface-1);
  --surface-hover:      var(--surface-2);
  --surface-tonal:      rgba(94, 106, 210, 0.04);
  --border:             var(--hairline);
  --border-strong:      var(--hairline-strong);
  --divider:            rgba(0, 0, 0, 0.06);
  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-muted);
  --text-muted:         var(--ink-subtle);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow:     0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-glow:        0 0 12px var(--primary-glow);
  --shadow-glow-strong: 0 0 24px rgba(94,106,210,0.18);
  --elevation-1: rgba(94,106,210,0.03);
  --elevation-2: rgba(94,106,210,0.05);
  --elevation-3: rgba(94,106,210,0.08);
}

@layer components {

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-max);
  transform: translateY(-150%);
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ──────────────────────────────────────────────
 * App Shell Layout
 * ────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition), background-color 0.3s ease, border-color 0.3s ease;
  z-index: var(--z-sidebar);
  flex-shrink: 0;
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar__logo {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sidebar__logo:hover {
  opacity: 0.8;
}

.sidebar__logo:active {
  opacity: 0.6;
}

/* Orbital Apex brand mark */
.sidebar__logo-monogram {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
  overflow: hidden;
  transition: all var(--transition-fast);
}
.sidebar__logo-monogram img {
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar__logo-monogram:hover {
  transform: scale(1.05);
}
.sidebar__logo-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
#sidebar.collapsed .sidebar__logo-monogram { margin-right: 0; }

.sidebar__logo-wrapper {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sidebar__logo-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.sidebar__logo-version {
  font-size: 9px;
  font-weight: 600;
  color: var(--primary-light);
  margin-top: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  line-height: 1;
}

.brand-prefix {
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 3px;
}

#sidebar.collapsed .sidebar__logo-text,
#sidebar.collapsed .sidebar__logo-wrapper { 
  display: none; 
}
#sidebar.collapsed .sidebar__logo { padding: 0; justify-content: center; }
#sidebar.collapsed .sidebar__logo-icon { margin-right: 0; }

.sidebar__nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.sidebar__item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__item i {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

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

.sidebar__item--active {
  color: var(--primary-light);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent) 0%, color-mix(in srgb, var(--primary) 5%, transparent) 100%);
  position: relative;
}

.sidebar__item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 65%; width: 3px;
  background: linear-gradient(to bottom, var(--primary-light), var(--primary));
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 8px var(--primary-glow);
}

#sidebar.collapsed .sidebar__item { justify-content: center; padding: 12px; }
#sidebar.collapsed .sidebar__item span { display: none; }
#sidebar.collapsed .sidebar__item i { margin-right: 0; }

.sidebar__footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar__divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.sidebar__backup-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__backup-status i { width: 14px; height: 14px; }
.backup-status--saving { color: var(--accent); animation: pulse 2s infinite; }
#sidebar.collapsed .sidebar__backup-status span { display: none; }
#sidebar.collapsed .sidebar__backup-status { padding: 8px; justify-content: center; }

/* Main Content */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

#top-bar {
  position: relative;
  z-index: var(--z-topbar);
  height: var(--topbar-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  flex-shrink: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.top-bar__left, .top-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar__context {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.top-bar__widget {
  position: relative;
  display: inline-flex;
}

.top-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
}

.top-bar__chip i,
.top-bar__chip svg,
.top-bar__chip span[id="weather-icon"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.top-bar__chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.top-bar__chip:hover i,
.top-bar__chip:hover svg {
  color: var(--text-primary);
}

.top-bar__chip.is-active {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary-light);
}

.top-bar__chip.is-active i,
.top-bar__chip.is-active svg {
  color: var(--primary-light);
}

/* Sprint 56: tach ro Duong lich / Am lich trong date-chip, moon icon SVG thay emoji */
.date-chip__lunar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.date-chip__divider {
  width: 1px;
  height: 14px;
  background: var(--glass-border);
  flex: none;
}

.date-chip__moon-icon,
.date-chip__moon-icon svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
}

.date-chip__al-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--accent-purple) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-purple) 40%, transparent);
  border-radius: 4px;
  padding: 0 3px;
  line-height: 1.4;
  flex: none;
}

[data-theme="light"] .date-chip__al-tag {
  color: color-mix(in srgb, var(--accent-purple) 80%, transparent);
  border-color: color-mix(in srgb, var(--accent-purple) 35%, transparent);
}

.date-chip__lunar-text {
  color: var(--accent-purple);
  font-weight: 600;
}

.date-chip__lunar-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-purple) 16%, transparent);
  color: var(--accent-purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-theme="light"] .date-chip__lunar-text {
  color: var(--accent-purple);
}

[data-theme="light"] .date-chip__lunar-badge {
  background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
  color: var(--accent-purple);
}

.date-chip__solar-term {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.date-chip__solar-term-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
}

[data-theme="light"] .date-chip__solar-term-text {
  color: var(--success);
}

.moon-phase-icon__disc {
  fill: rgba(148, 163, 184, 0.2);
}

.moon-phase-icon__lit {
  fill: var(--warning);
}

.moon-phase-icon__ring {
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: 1.25px;
}

.popover-value--lunar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Popover card styling */
.top-bar__popover {
  position: absolute;
  top: calc(100% + 8px);
  width: 320px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 16px;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

[data-theme="light"] .top-bar__popover {
  background: var(--surface-1);
  border-color: var(--hairline-strong);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--hairline);
}

#date-popover {
  left: 0;
  right: auto;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#weather-popover {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  animation: popoverFadeInCenter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#clock-popover {
  right: 0;
  left: auto;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

@keyframes popoverFadeInCenter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

.popover-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.popover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  min-height: 24px;
}

.popover-label {
  color: var(--text-secondary);
}

.popover-value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

.popover-row--holiday {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: var(--border-radius-sm);
}

.popover-holiday-title {
  color: var(--warning);
  font-weight: 600;
  font-size: 13px;
}

.popover-holiday-countdown {
  color: var(--text-muted);
  font-size: 11px;
}

.popover-divider {
  height: 1px;
  background: var(--border);
}

.popover-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.weather-popover-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
}

#weather-icon-large {
  font-size: 32px;
  line-height: 1;
}

.weather-popover-temp {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.weather-popover-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.popover-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary-light);
  letter-spacing: 0.05em;
  margin-top: 8px;
  margin-bottom: 4px;
}

.lunar-special {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
}
.lunar-mung1 {
  background: rgba(56, 189, 248, 0.15);
  color: var(--info);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.lunar-ram {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.weather-popover-alert {
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.weather-alert--none {
  background: rgba(16, 185, 129, 0.08);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.weather-alert--active {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-weight: 500;
  animation: pulse-soft 2s infinite;
}

@keyframes pulse-soft {
  0% { transform: scale(1); }
  50% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.top-bar__source-chip {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.1);
}

.top-bar__source-link {
  color: var(--info);
  font-size: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.top-bar__source-link:hover {
  text-decoration: underline;
}

.top-bar__inline-select,
.top-bar__timezone {
  height: 28px;
  padding: 2px 24px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.top-bar__inline-select option,
.top-bar__timezone option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.top-bar__inline-select {
  width: 110px;
}

.top-bar__timezone {
  width: 100%;
}

.top-bar__inline-select:hover,
.top-bar__timezone:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.08);
}

.top-bar__inline-select:focus,
.top-bar__timezone:focus {
  border-color: var(--primary);
}

.top-bar__panel-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.top-bar__segment {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.04);
}

.top-bar__segment-btn {
  height: 22px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.top-bar__segment-btn:hover {
  color: var(--text-secondary);
}

.top-bar__segment-btn.is-active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}

/* Light theme support */
[data-theme="light"] .top-bar__chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
}

[data-theme="light"] .top-bar__chip:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

[data-theme="light"] .top-bar__chip.is-active {
  background: var(--surface-tonal);
  border-color: var(--primary-glow);
  color: var(--primary);
}

[data-theme="light"] .top-bar__chip.is-active i,
[data-theme="light"] .top-bar__chip.is-active svg {
  color: var(--primary);
}

[data-theme="light"] .top-bar__inline-select,
[data-theme="light"] .top-bar__timezone {
  background: var(--surface-1);
  color: var(--ink-muted);
  border-color: var(--hairline-strong);
}

[data-theme="light"] .top-bar__inline-select option,
[data-theme="light"] .top-bar__timezone option {
  background: var(--surface-1);
  color: var(--ink-muted);
}

[data-theme="light"] .top-bar__segment {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .top-bar__segment-btn {
  color: var(--text-muted);
}

[data-theme="light"] .top-bar__segment-btn.is-active {
  background: var(--primary);
  color: var(--on-primary);
}

.top-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 8px;
}

.top-bar__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

#mobile-menu-btn { display: none; }

.top-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-full);
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  width: 210px;
  justify-content: space-between;
  transition: all var(--transition-fast);
}
.top-bar__search:hover {
  border-color: var(--primary);
  color: var(--text-secondary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.top-bar__search-hint {
  font-size: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.top-bar__notification { position: relative; }
.top-bar__notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: bold;
  height: 16px;
  min-width: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transform: translate(25%, -25%);
  border: 2px solid var(--surface);
}

#view-container {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  will-change: transform, opacity;
}

/* View fade-in animation — triggered on every navigation */
#view-container.view-entering {
  animation: viewFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#view-container.view-exiting {
  animation: viewFadeOut 0.15s ease-in both;
  pointer-events: none;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.996); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes viewFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-3px) scale(0.997); }
}

/* Theme flash-guard — blocks transitions on first paint to prevent page-load flash */
.no-transitions,
.no-transitions * {
  transition: none !important;
}

/* Theme-switching window — smooth 0.35s color fade on ALL elements during toggle */
html.theme-switching,
html.theme-switching body,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ──────────────────────────────────────────────
 * Buttons — Linear 2026 style (Sprint 90)
 * ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--ink);
  color: var(--canvas);
  border: 1px solid var(--hairline);
}
.btn--primary:hover:not(:disabled) {
  background: var(--ink-muted);
}
.btn--primary:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--surface-2);
}

.btn--ghost {
  background: transparent;
  border: none;
  color: var(--ink-subtle);
}
.btn--ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-2);
}

.btn--danger {
  background: rgba(235, 87, 87, 0.1);
  border: 1px solid rgba(235, 87, 87, 0.2);
  color: var(--danger);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn--loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  margin-right: 6px;
  flex-shrink: 0;
}
.btn--danger:hover:not(:disabled) {
  background: var(--danger);
  color: white;
}

.btn--sm { padding: 6px 12px; font-size: var(--text-xs); }
.btn--lg { padding: 12px 24px; font-size: var(--text-base); }
.btn--icon { padding: 8px; width: 36px; height: 36px; }
.btn--icon i { width: 18px; height: 18px; }

.btn--fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
  z-index: calc(var(--z-modal) - 100);
  padding: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn--fab:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--primary) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.btn--fab.fab--dragging {
  cursor: grabbing;
  opacity: 0.88;
  transform: scale(1.12);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--primary) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--primary) 20%, transparent);
  transition: none;
}
.btn--fab i { width: 24px; height: 24px; }
/* Bug phat hien khi kiem E2E S206: FAB z-index (var(--z-modal)-100 = 3900) CAO HON
 * .slide-over-drawer (var(--z-drawer) = 2500) -- vi tri co dinh bottom:24/right:24
 * cua FAB de len dung goc duoi-phai cua footer drawer, noi nut hanh dong chinh
 * (vd "Cap nhat Du an") thuong nam cuoi cung ben phai => click bi FAB chan, khong
 * toi duoc nut ben duoi. An tuong tac cua FAB bat cu khi nao co modal/drawer mo. */
body:has(.modal-overlay, .drawer-backdrop) .btn--fab {
  pointer-events: none;
  opacity: 0;
}

/* ──────────────────────────────────────────────
 * Cards & Layout Components
 * ────────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.card:hover {
  filter: brightness(1.08);
}

.card--hover {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.25s ease, background 0.2s ease;
  transform-style: preserve-3d;
}
.card--hover:hover {
  filter: brightness(1.08);
  transform: none;
}

.card__header {
  padding: 16px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: none;
}
.card__title { font-size: var(--text-base); font-weight: 600; margin: 0; }
.card__body { padding: 20px; }

/* ── Quote Widget — Premium "Today's Inspiration" card ──────────────────────
 * Tech-forward mesh gradient + dot-grid backdrop (Linear/Vercel-style glow
 * card) instead of the previous plain glass box with a flat left border. */
.quote-widget {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 22px 26px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(480px circle at 8% -20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%),
    radial-gradient(420px circle at 105% 130%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-xl);
  transition: opacity 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Faint dot-grid, "circuit board" texture — fades out toward the bottom so
   it reads as an accent rather than noise competing with the quote text. */
.quote-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 80%);
          mask-image: linear-gradient(180deg, black, transparent 80%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .quote-widget::before { background-image: radial-gradient(rgba(15,16,17,0.06) 1px, transparent 1px); }
/* Soft blurred glow orb, top-right — the one "hero" light source of the card. */
.quote-widget__glow {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.quote-header, .quote-body, .quote-footer { position: relative; z-index: 1; }

.quote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.quote-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-light);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.quote-badge i { width: 12px; height: 12px; }

.quote-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.quote-mark {
  font-size: 40px;
  line-height: 0.6;
  font-family: Georgia, serif;
  flex-shrink: 0;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.9;
}
.quote-texts { flex: 1; min-width: 0; }
.quote-en {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-primary);
  font-weight: 510;
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.quote-vi {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}
.quote-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-author-line {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  flex-shrink: 0;
}
.quote-author-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.quote-author {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary-light);
  letter-spacing: 0.3px;
}
.quote-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.quote-role:empty { display: none; }
.quote-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
}
.quote-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); transform: rotate(90deg); }

[data-theme="light"] .quote-widget {
  background:
    radial-gradient(480px circle at 8% -20%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(420px circle at 105% 130%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, var(--surface-1) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, var(--shadow-lg);
}
[data-theme="light"] .quote-author { color: var(--primary); }

/* ──────────────────────────────────────────────
 * Bento Grid & Radial Glow (Sprint 42 — A+ UX/UI)
 * ────────────────────────────────────────────── */
.dashboard-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.bento-card--kpi { grid-column: span 1; }
.bento-card--chart { grid-column: span 2; grid-row: span 2; }
.bento-card--tasks { grid-column: span 2; }
.bento-card--ai-brief { grid-column: span 4; }

.bento-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(350px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), color-mix(in srgb, var(--primary) 15%, transparent), transparent 80%);
  z-index: var(--z-base);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.bento-card:hover::before { opacity: 1; }

@media (max-width: 900px) {
  .dashboard-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card--chart, .bento-card--tasks, .bento-card--ai-brief { grid-column: span 2; }
  .bento-card--chart { grid-row: span 1; }
}
@media (max-width: 600px) {
  .dashboard-bento-grid { grid-template-columns: 1fr; }
  .bento-card--kpi, .bento-card--chart, .bento-card--tasks, .bento-card--ai-brief { grid-column: span 1; grid-row: span 1; }
}

/* Mobile Sidebar Overlay Backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.sidebar-backdrop.active,
.sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Slide-over Drawer with Spring Physics */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.is-open { opacity: 1; }

.slide-over-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 550px;
  max-width: 92vw;
  z-index: var(--z-drawer);
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-over-drawer.is-open { transform: translateX(0); }
.slide-over-drawer .modal__body { flex: 1; overflow-y: auto; }
.slide-over-drawer .modal__header,
.slide-over-drawer .modal__footer { flex-shrink: 0; }

/* Shimmer Skeleton Loaders */
.shimmer-placeholder {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer-wave 1.6s infinite linear;
  border-radius: 8px;
}
@keyframes shimmer-wave {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Command Palette fuzzy-match highlight */
mark.highlight-match {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.kpi-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.kpi-card__label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
.kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.kpi-card__sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.kpi-card__icon--danger  { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 16px rgba(239,68,68,0.35); }
.kpi-card__icon--warning { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 16px rgba(245,158,11,0.35); }
.kpi-card__icon--success { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 16px rgba(16,185,129,0.35); }
.kpi-card__icon--info    { background: linear-gradient(135deg, #38bdf8, #0ea5e9); box-shadow: 0 4px 16px rgba(56,189,248,0.35); }
.kpi-card__icon--primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 35%, transparent); }

.kpi-card--danger  { border-bottom: 2px solid var(--danger);  background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, transparent 60%); }
.kpi-card--warning { border-bottom: 2px solid var(--warning); background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, transparent 60%); }
.kpi-card--success { border-bottom: 2px solid var(--success); background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, transparent 60%); }
.kpi-card--info    { border-bottom: 2px solid var(--info);    background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, transparent 60%); }
.kpi-card--primary { border-bottom: 2px solid var(--primary); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 60%); }

.kpi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.kpi-card__sparkline {
  display: flex;
  align-items: center;
}

.kpi-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
}

.kpi-card__trend--up {
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
}

.kpi-card__trend--down {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
}

.kanban__card--picked {
  outline: 2px solid var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 50%, transparent);
  transform: translateY(-2px);
  z-index: 10;
}

/* Urgent Zone */
.urgent-zone {
  margin-bottom: 24px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
  animation: urgentGlow 3s infinite alternate;
}

@keyframes urgentGlow {
  0% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.1); }
  100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.2); }
}

.urgent-zone__title {
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.urgent-zone__count {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: auto;
}

/* ──────────────────────────────────────────────
 * Kanban Board
 * ────────────────────────────────────────────── */
.kanban-container {
  height: calc(100vh - var(--topbar-height) - 120px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kanban {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
  flex: 1;
  align-items: flex-start;
}

.kanban__column {
  flex: 1;
  min-width: 170px;
  max-width: 300px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* Perspective cho 3D transform trên children */
  perspective: 900px;
  perspective-origin: 50% 30%;
}

.kanban__column-header {
  padding: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  border-top: 3px solid var(--border);
}

.kanban__badge {
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.kanban__cards {
  padding: 8px 12px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 50px;
}

.kanban__cards--drag-over {
  background: rgba(255,255,255,0.02);
  outline: 2px dashed var(--border-strong);
  outline-offset: -4px;
}

.kanban__card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 0;
  cursor: grab;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.25s ease, background 0.2s ease;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  will-change: transform;
  transform-style: preserve-3d;
}
.kanban__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 55%);
  pointer-events: none;
  transition: opacity 0.25s ease;
  opacity: 0;
  border-radius: inherit;
}
/* Shimmer sweep on hover */
.kanban__card::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0.55s ease;
  border-radius: inherit;
}
.kanban__card:hover::after { left: 130%; }

/* 3D hover: translateY + rotateX (perspective set on parent column) */
.kanban__card:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow:
    0 20px 40px -8px rgba(0, 0, 0, 0.6),
    0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-8px) rotateX(3deg) scale(1.02);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.kanban__card:hover::before { opacity: 1; }
.kanban__card:active {
  cursor: grabbing;
  transform: scale(0.97) translateY(-1px) rotateX(0deg);
  transition-duration: 0.1s;
}
.kanban__card--dragging {
  opacity: 0.4;
  transform: scale(1.05) rotate(1.5deg);
  box-shadow: var(--shadow-glow-strong);
  border-color: var(--primary);
}

.kanban__placeholder {
  border: 2px dashed var(--border-strong);
  background: rgba(255, 255, 255, 0.015);
  border-radius: var(--border-radius);
  min-height: 100px;
  transition: all var(--transition-fast);
}

/* Card vừa được thêm/cập nhật tại chỗ qua `_upsertCard()` — nhấp nháy nhẹ
   viền để mắt bắt được thứ vừa đổi giữa bảng nhiều card, thay vì cả bảng
   nháy trắng như đường render() đầy đủ trước đây. Ngắn (600ms) và chỉ dùng
   opacity/transform/box-shadow nên chạy trên compositor, không gây reflow. */
/* Ô gõ-để-tìm thực thể: gõ chuỗi không khớp mục nào ⇒ viền cảnh báo, để
   User biết NGAY là chưa chọn được gì (nếu im lặng thì lưu xong mới phát hiện
   thiếu liên kết). Class riêng, KHÔNG dùng `.field-invalid` — validation sẵn
   có của renderModal tự xoá class đó trên mỗi lần gõ. */
.entity-picker__input--unmatched {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent);
}

.kanban__card--upserted { animation: kanbanCardUpsert 0.6s ease-out; }
@keyframes kanbanCardUpsert {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.97); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  35%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { box-shadow: 0 0 0 6px transparent; }
}
/* Tôn trọng người dùng bật "giảm chuyển động" ở hệ điều hành (WCAG 2.3.3) —
   vẫn hiện card, chỉ bỏ phần chuyển động. */
@media (prefers-reduced-motion: reduce) {
  .kanban__card--upserted { animation: none; }
}

/* ──────────────────────────────────────────────
 * Checklist Component Styles
 * ────────────────────────────────────────────── */
.checklist__container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-top: 12px;
}

.checklist__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.checklist__progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border-strong);
  border-radius: var(--border-radius-full);
  overflow: hidden;
  position: relative;
}

.checklist__progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--border-radius-full);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

.checklist__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.checklist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.checklist__item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.checklist__item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.checklist__checkbox-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checklist__checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checklist__checkbox-indicator {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: inline-block;
  flex-shrink: 0;
}

.checklist__checkbox-wrapper:hover .checklist__checkbox-indicator {
  border-color: var(--primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent);
}

.checklist__checkbox-input:checked ~ .checklist__checkbox-indicator {
  background-color: var(--success);
  border-color: var(--success);
}

.checklist__checkbox-indicator::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checklist__checkbox-input:checked ~ .checklist__checkbox-indicator::after {
  display: block;
  transform: rotate(45deg) scale(1);
}

.checklist__item-title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: inline-block;
}

.checklist__item-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1.5px;
  background: var(--text-muted);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-50%);
}

.checklist__checkbox-input:checked ~ .checklist__item-title {
  color: var(--text-muted);
}

.checklist__checkbox-input:checked ~ .checklist__item-title::after {
  width: 100%;
}

.checklist__item-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  border: none;
  background: transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.7;
  flex-shrink: 0;
}

.checklist__item-delete:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  opacity: 1;
}

/* Accent strip at top */
.kanban__card-accent {
  height: 3px;
  width: 100%;
}
.kanban__card-body { padding: 12px 14px 14px; }

.kanban__card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 4px;
  line-height: 1.35;
  color: var(--text-primary);
}
.kanban__card-client {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kanban__card-metrics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  flex-wrap: wrap;
  gap: 4px;
}
.kanban__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.kanban__card-prob {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kanban__card-prob-bar {
  width: 40px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
}

/* ──────────────────────────────────────────────
 * Task List
 * ────────────────────────────────────────────── */
.task-list { display: flex; flex-direction: column; gap: 8px; }

.task-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
  gap: 12px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.task-item:hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.3);
}

.task-item__checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin-top: 2px;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.task-item__checkbox:hover {
  border-color: var(--primary);
  transform: scale(1.08);
}

.task-item__checkbox:checked {
  background: var(--success);
  border-color: var(--success);
  transform: scale(1);
}

.task-item__checkbox::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 11px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-item__checkbox:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.task-item__content { flex: 1; min-width: 0; }

.task-item__title {
  position: relative;
  display: inline-block;
  font-weight: 500;
  font-size: var(--text-sm);
  margin-bottom: 4px;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.task-item__title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 52%;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--text-muted), var(--success));
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: 2px;
}

.task-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  align-items: center;
}

.task-item__actions {
  display: flex;
  opacity: 0;
  transition: opacity var(--transition-fast);
  gap: 4px;
}
.task-item:hover .task-item__actions { opacity: 1; }

.task-item--done {
  opacity: 0.6;
  transform: translateX(4px);
}
.task-item--done .task-item__title { color: var(--text-muted); }
.task-item--done .task-item__title::after { width: 100%; }
.task-item--done:hover { transform: translateX(4px) translateY(-2px); }

/* Task completion bounce animation on checkbox */
@keyframes checkPop {
  0%   { transform: scale(0.7); }
  50%  { transform: scale(1.25); }
  75%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.task-item__checkbox.just-checked {
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-item--overdue { border-left: 3px solid var(--danger); background: linear-gradient(to right, rgba(239,68,68,0.05), transparent); }

/* ──────────────────────────────────────────────
 * Badges & Tags — Linear pill style (Sprint 90)
 * ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}

.badge--critical { background: rgba(239, 68, 68, 0.08); color: #fca5a5; border-color: rgba(239, 68, 68, 0.2); }
.badge--high { background: rgba(249, 115, 22, 0.08); color: #fdba74; border-color: rgba(249, 115, 22, 0.2); }
.badge--medium { background: rgba(234, 179, 8, 0.08); color: #fde047; border-color: rgba(234, 179, 8, 0.2); }
.badge--low { background: rgba(34, 197, 94, 0.08); color: #86efac; border-color: rgba(34, 197, 94, 0.2); }

.badge--status-todo { background: rgba(107, 114, 128, 0.08); color: #d1d5db; border-color: rgba(107, 114, 128, 0.2); }
.badge--status-in-progress { background: rgba(94, 106, 210, 0.08); color: #93c5fd; border-color: rgba(94, 106, 210, 0.2); }
.badge--status-waiting { background: rgba(245, 158, 11, 0.08); color: #fcd34d; border-color: rgba(245, 158, 11, 0.2); }
.badge--status-done { background: rgba(39, 166, 68, 0.08); color: #86efac; border-color: rgba(39, 166, 68, 0.2); }
.badge--status-cancelled { background: rgba(107, 114, 128, 0.06); color: #9ca3af; border-color: rgba(107, 114, 128, 0.15); text-decoration: line-through; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
}

/* ──────────────────────────────────────────────
 * Forms
 * ────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 16px; }
.form-row > * { flex: 1; }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.form-input, .form-select, .form-textarea {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.3);
}

.form-select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-position: right .5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; }
.form-select option { background: var(--bg-primary); color: var(--text-primary); }

.form-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-error { display: block; font-size: 11px; color: var(--danger); margin-top: 4px; }

/* Plan 123 S207 (P8) — trang thai loi inline khi field khong hop le (on-blur
 * + luc bam Luu). Dung chung 1 class cho ca input/select/textarea, khong can
 * biet field do thuoc loai nao. */
.field-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-glow) !important;
}

/* ──────────────────────────────────────────────
 * Modal
 * ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

/* ──────────────────────────────────────────────
 * Key Guide Popover
 * ────────────────────────────────────────────── */
.key-guide-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 310px;
  background: var(--bg-secondary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 -4px 24px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: calc(var(--z-modal) - 100);
  overflow: hidden;
  animation: popoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* S138-3: menu "Thêm mới" — cùng một hiệu ứng mở cho cả `#quick-add-btn`
 * lẫn `#fab-add` (cùng render từ `QUICK_ADD_ITEMS` trong main.js). Gốc biến
 * đổi đặt tại góc trên nút anchor. `prefers-reduced-motion` được tôn trọng
 * bởi block global `@media (prefers-reduced-motion: reduce)` bên dưới. */
#quick-add-dropdown {
  animation: popoverIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}

.key-guide-popover__header {
  padding: 10px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
}

.key-guide-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
  text-decoration: none;
  color: var(--text-primary);
}
.key-guide-popover__item:last-child { border-bottom: none; }
.key-guide-popover__item:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }

.key-guide-popover__item-icon { font-size: 17px; flex-shrink: 0; }

.key-guide-popover__item-body { flex: 1; min-width: 0; }
.key-guide-popover__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.key-guide-popover__item-speed { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.key-guide-popover__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 99px;
  flex-shrink: 0;
}
.key-guide-popover__badge--free { background: var(--success-glow); color: var(--success); }
.key-guide-popover__badge--paid { background: rgba(245,158,11,0.15); color: var(--warning); }

.key-guide-popover__link {
  font-size: 11px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.key-guide-popover__link:hover { background: var(--primary-glow); }

.key-guide-popover__footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

[data-theme="light"] .key-guide-popover {
  background: var(--surface-1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1), 0 0 0 1px var(--primary-glow);
}

.modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal--lg { max-width: 720px; }

.modal__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.modal__body { padding: 24px; overflow-y: auto; }

/* Thanh tab bên trong modal/drawer (projects/accountmanagers/catalog/history/
   settings — `.tabs` + `.tab-btn`, dùng chung, không có CSS nền tảng nào canh
   trước đây, chỉ có style inline display:flex trên từng view). Bug thật đo
   được 05-08-2026: dự án có 10 tab, flex mặc định co (`flex-shrink:1`) ép
   MỖI nút nhỏ hơn cả chữ bên trong -- `white-space:nowrap` + `justify-
   content:center` (từ .btn) khiến chữ tràn ra ngoài cả hai bên nút đã co,
   đè chồng lên nút kế bên, đọc như bị cắt chữ ngẫu nhiên. Sửa: cho `.tabs`
   cuộn ngang thay vì co nút, khoá `.tab-btn` không co nữa. */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tab-btn { flex-shrink: 0; }
.modal__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ──────────────────────────────────────────────
 * Command Palette (Ctrl+K)
 * ────────────────────────────────────────────── */
.cmd-palette-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(8, 9, 20, 0.62);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: var(--z-cmd-palette);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-palette-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cmd-palette {
  background: rgba(12, 14, 28, 0.85);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 620px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 8%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdPaletteIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  will-change: transform, opacity;
}


@keyframes cmdPaletteIn {
  from { opacity: 0; transform: scale(0.97) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.cmd-palette__input-wrap {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.cmd-palette__input-wrap i { color: var(--text-muted); }

.cmd-palette__input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 16px;
  font-size: var(--text-lg);
  color: var(--text-primary);
  outline: none;
}

.cmd-palette__results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

.cmd-palette__group {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.cmd-palette__item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border-left: 2px solid transparent;
}

.cmd-palette__item:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  transform: translateX(2px);
}

.cmd-palette__item--active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-left-color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translateX(4px);
}

.cmd-palette__item-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease;
}

.cmd-palette__item--active .cmd-palette__item-icon { color: var(--primary); background: var(--primary-glow); }


/* Command palette footer with keyboard hints */
.cmd-palette__footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.cmd-palette__footer kbd {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: monospace;
  color: var(--text-secondary);
  margin-right: 3px;
}

.cmd-palette__item-content { flex: 1; min-width: 0; }
.cmd-palette__item-title { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-palette__item-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.cmd-palette__item-shortcut {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────
 * Toasts / Snackbars
 * ────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 92px; /* above FAB (56px) + gap */
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  min-width: 300px;
  max-width: 400px;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast--success { border-left: 4px solid var(--success); }
.toast--error { border-left: 4px solid var(--danger); }
.toast--warning { border-left: 4px solid var(--warning); }
.toast--info { border-left: 4px solid var(--info); }

.toast__icon { font-size: 20px; flex-shrink: 0; }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info .toast__icon { color: var(--info); }

.toast__content { flex: 1; font-size: var(--text-sm); line-height: 1.4; }
.toast__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px; border-radius: 4px;
  display: flex; align-items: center;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.toast__close:hover { color: var(--text-primary); }

/* Toast slide-in animation & Progress bar */
@keyframes shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.toast {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast--visible { opacity: 1; transform: translateX(0); }

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
  transform-origin: left;
  animation: shrink 3.5s linear forwards;
}

.toast--success .toast__progress { background: var(--success); }
.toast--error .toast__progress { background: var(--danger); }
.toast--warning .toast__progress { background: var(--warning); }
.toast--info .toast__progress { background: var(--info); }

/* Skeleton shimmering component */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3, var(--border)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--border-radius-sm, 4px);
}

/* ──────────────────────────────────────────────
 * Calendar
 * ────────────────────────────────────────────── */
.calendar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; }
.calendar__day-header { padding: 12px; text-align: center; font-weight: 600; font-size: var(--text-sm); border-bottom: 1px solid var(--border); background: var(--surface); }
.calendar__day { min-height: 120px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px; position: relative; }
.calendar__day:nth-child(7n) { border-right: none; }
.calendar__day-number { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; display: inline-block; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 50%; }
.calendar__day--today .calendar__day-number { background: var(--primary); color: var(--on-primary); }
.calendar__day--other-month { opacity: 0.5; background: rgba(0,0,0,0.1); }

.calendar__event {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.calendar__event--deadline { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border-left: 2px solid var(--danger); }
.calendar__event--followup { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border-left: 2px solid var(--info); }
.calendar__event--done { opacity: 0.5; text-decoration: line-through; }

/* ──────────────────────────────────────────────
 * Filter Bar
 * ────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-chip {
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-chip:hover { background: var(--surface-hover); color: var(--text-primary); }
.filter-chip--active { background: rgba(94, 106, 210, 0.15); border-color: var(--primary); color: var(--primary); }

/* ──────────────────────────────────────────────
 * Empty States & Skeletons
 * ────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: var(--text-secondary); }
.empty-state__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: 8px; }
.empty-state .btn { margin-top: 16px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
.skeleton--text { height: 1em; margin-bottom: 8px; width: 100%; }
.skeleton--text:last-child { width: 80%; }
.skeleton--circle { border-radius: 50%; width: 40px; height: 40px; }

/* Spinner */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner__dot { display: none; }

/* ──────────────────────────────────────────────
 * AI Panel
 * ────────────────────────────────────────────── */
.ai-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  background: var(--glass-bg);
  border-left: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.55), -1px 0 0 color-mix(in srgb, var(--primary) 8%, transparent);
  display: flex;
  flex-direction: column;
  z-index: var(--z-ai-panel);
  overflow: hidden;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  border-radius: 0;
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}

/* Top edge glow bar — fades in after panel opens */
.ai-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    color-mix(in srgb, var(--primary) 70%, transparent) 35%,
    rgba(139,92,246,0.6) 65%,
    transparent 95%);
  opacity: 0;
  transition: opacity 0.5s ease 0.25s;
  pointer-events: none;
  z-index: var(--z-base);
}
.ai-panel.open::before { opacity: 1; }


.ai-panel.open {
  right: 0;
  border-left-color: color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow:
    -24px 0 64px rgba(0,0,0,0.65),
    -1px 0 0 color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 80px color-mix(in srgb, var(--primary) 7%, transparent),
    inset 1px 0 0 rgba(255,255,255,0.03);
}

.ai-panel__header {
  padding: 18px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent) 0%, color-mix(in srgb, var(--primary) 4%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  position: relative;
}

.ai-panel__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 40%, transparent), transparent);
}

.ai-panel__header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-panel__header-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 40%, transparent);
}

.ai-panel__content {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent;
}

/* Message entry animation */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.ai-panel__message {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: var(--text-sm);
  max-width: 88%;
  line-height: 1.6;
  animation: msgSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ai-panel__message--ai {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  align-self: flex-start;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 5%, transparent);
}

/* Markdown content styling inside AI messages */
.ai-panel__message--ai strong { color: var(--primary-light); font-weight: 600; }
.ai-panel__message--ai em { color: var(--text-secondary); font-style: italic; }
.ai-panel__message--ai code {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
}
.ai-panel__message--ai ul, .ai-panel__message--ai ol {
  padding-left: 16px;
  margin: 6px 0;
}
.ai-panel__message--ai li { margin: 3px 0; }
.ai-panel__message--ai h1, .ai-panel__message--ai h2, .ai-panel__message--ai h3 {
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0 4px;
}
.ai-panel__message--ai h3 { font-size: 14px; }
.ai-panel__message--ai h2 { font-size: 15px; }
.ai-panel__message--ai p { margin: 4px 0; }
.ai-panel__message--ai hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

.ai-panel__message--user {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--primary) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  align-self: flex-end;
  color: var(--text-primary);
}

.ai-panel__message--error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
  font-size: 12px;
  align-self: center;
  text-align: center;
  max-width: 100%;
  border-radius: 8px;
}

.ai-panel__welcome {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 12px;
  padding: 16px;
  animation: msgSlideIn 0.3s ease both;
}

.ai-panel__quick-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
}

.ai-panel__quick-actions::-webkit-scrollbar {
  display: none;
}

.quick-action-chip {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary-light);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-weight: 500;
}

.quick-action-chip:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: var(--on-primary);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

.ai-panel__input {
  padding: 14px 16px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  display: flex;
  gap: 8px;
  background: rgba(0,0,0,0.2);
}

.ai-panel__input .form-input {
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-panel__input .form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.ai-panel__thinking {
  display: flex;
  gap: 5px;
  padding: 12px 16px;
  align-self: flex-start;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  animation: msgSlideIn 0.2s ease both;
}

.ai-panel__thinking span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
  box-shadow: 0 0 0 transparent;
}

.ai-panel__thinking span:nth-child(1) { animation-delay: 0s; }
.ai-panel__thinking span:nth-child(2) { animation-delay: 0.18s; }
.ai-panel__thinking span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
    box-shadow: 0 0 0 transparent;
  }
  30% {
    transform: translateY(-7px) scale(1.15);
    opacity: 1;
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent), 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent);
  }
}

/* ──────────────────────────────────────────────
 * Activity Feed & Timeline
 * ────────────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 16px; position: relative; padding-bottom: 16px; }
.activity-item:last-child { padding-bottom: 0; }
.activity-item::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px;
  background: var(--border); z-index: var(--z-base);
}
.activity-item:last-child::before { display: none; }
.activity-item__dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--primary); position: relative; z-index: calc(var(--z-base) + 1); margin-top: 4px; flex-shrink: 0;
}
.activity-item__content { flex: 1; font-size: var(--text-sm); }
.activity-item__time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ──────────────────────────────────────────────
 * Reports & Charts (ApexCharts overrides)
 * ────────────────────────────────────────────── */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.report-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* ──────────────────────────────────────────────
 * Animations
 * ────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ──────────────────────────────────────────────
 * Revenue Forecast Widget
 * ────────────────────────────────────────────── */
.forecast-widget {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.forecast-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--success));
}

.forecast-widget__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.forecast-widget__total {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.forecast-widget__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 20px;
}

.forecast-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.forecast-bar {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
}

.forecast-bar__label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forecast-bar__track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.forecast-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
}

.forecast-bar__value {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  min-width: 80px;
}

/* ──────────────────────────────────────────────
 * Activity Timeline
 * ────────────────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.timeline-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 20px;
  animation: msgSlideIn 0.3s ease both;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--border-strong), transparent);
  z-index: var(--z-base);
}

.timeline-item:last-child::before { display: none; }

.timeline-item__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--primary);
  position: relative;
  z-index: calc(var(--z-base) + 1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.timeline-item__body {
  flex: 1;
  padding-top: 2px;
}

.timeline-item__action {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.timeline-item__time {
  font-size: 11px;
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────
 * Email Generator Output
 * ────────────────────────────────────────────── */
.email-gen-output {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius: var(--border-radius);
  padding: 16px;
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-primary);
  font-family: var(--font-family);
  margin-top: 12px;
}

/* AI action buttons in task/project detail */
.btn--ai {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--accent-purple) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary-light);
  font-size: var(--text-xs);
  padding: 5px 12px;
}
.btn--ai:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary), var(--accent-purple));
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────
 * Responsive Adjustments
 * ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  #sidebar { position: fixed; left: -100%; z-index: var(--z-sidebar); transition: left var(--transition); }
  /* #top-bar (z-index: var(--z-topbar), 1001) sits above the default sidebar z-index (100) and
     was rendering on top of the open mobile drawer, hiding its own logo/header underneath it.
     Bump above --z-topbar while the drawer is open so it's fully visible. */
  #sidebar.mobile-open { left: 0; width: 280px; z-index: var(--z-drawer); }
  #mobile-menu-btn { display: inline-flex; }
  .top-bar__search { display: none; } /* Hide search on tablet, rely on shortcut */
}

@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 0; }
  .calendar__grid { font-size: 10px; }
  .ai-panel { width: 100vw; right: -100vw; height: 100vh; top: 0; bottom: 0; }
  .ai-panel.open { right: 0; }
  .reports-grid { grid-template-columns: 1fr; }
  .task-item__actions { opacity: 1; }

  /* Plan 070 Sprint 104 — Mobile UX audit */

  /* Inputs below 16px trigger Safari iOS auto-zoom-on-focus (jarring, well-known anti-pattern).
     Bump to 16px on mobile only — desktop keeps the tighter --text-sm sizing. */
  .form-input, .form-select, .form-textarea {
    font-size: 16px;
  }

  /* Modal had zero side gutter on mobile (.modal-overlay has no padding, .modal stretches to
     100vw) — edge-to-edge with no breathing room. Add gutter + let modal use more vertical
     space since mobile screens are taller than they are wide. */
  .modal-overlay {
    padding: 12px;
  }
  .modal {
    max-height: 92vh;
  }
  .modal__header { padding: 14px 16px; }
  .modal__body { padding: 16px; }
  .modal__footer { padding: 12px 16px; flex-wrap: wrap; }
  .modal__footer .btn { flex: 1 1 auto; min-width: 0; }

  /* WCAG/HIG touch target ≥44px. Top-bar packs icons + widgets into narrow width —
     44px is the minimum that doesn't force wrapping on 320px screens. */
  .top-bar__actions > button,
  .top-bar__widget {
    min-width: 44px;
    min-height: 44px;
  }

  /* Safe area inset for notched/dynamic island devices */
  .top-bar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* #bottom-nav (google-material-you.css) appears at this same breakpoint as a 64px-tall fixed
     bar pinned to bottom:0. .btn--fab is fixed at bottom:24px/height:56px (spans 24-80px from
     the viewport bottom) regardless of viewport width, so on mobile it lands squarely on top of
     the bottom-nav's rightmost items ("Cài đặt"/"Thêm") and — because #fab-add lives outside
     #app while #bottom-nav is z-indexed only within #app's own stacking context — physically
     blocks taps on them. Raise the FAB above the nav bar. */
  .btn--fab {
    bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ──────────────────────────────────────────────
 * Nested Subtasks
 * ────────────────────────────────────────────── */

/* Children container vá»›i connecting line */
.task-item__children {
  border-left: 2px solid var(--border);
  margin-left: 18px;
  margin-top: 4px;
  padding-left: 8px;
}

/* Subtask visual distinction */
.task-item--subtask {
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.task-item--subtask .task-item__title {
  font-size: 13px;
}

/* Expand/collapse toggle */
.task-item__toggle {
  width: 22px;
  height: 22px;
  padding: 0;
  flex-shrink: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-item__toggle i {
  width: 14px;
  height: 14px;
}

/* Subtask progress badge */
.task-item__progress {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Breadcrumb trong modal khi tạo subtask */
.subtask-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 16px;
}

/* ──────────────────────────────────────────────
 * Calendar Month Grid
 * ────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cal-cell {
  background: var(--bg-primary);
  min-height: 72px;
  padding: 6px;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-cell:hover { background: var(--bg-secondary); }
.cal-cell--header {
  min-height: unset;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 4px;
  cursor: default;
  background: var(--surface);
}
.cal-cell--header:hover { background: var(--surface); }
.cal-cell--empty { background: var(--bg-secondary); cursor: default; }
.cal-cell--today { background: color-mix(in srgb, var(--primary) 12%, var(--bg-primary)); }
.cal-cell--today .cal-day-num {
  color: var(--primary);
  font-weight: 700;
}
.cal-day-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
 * Dropdown Menu & Notification Panel
 * ────────────────────────────────────────────── */
.dropdown__menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  padding: 4px 0;
  min-width: 160px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

.dropdown__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.notification-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4);
  padding: 16px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(15px);
  max-height: 400px;
  overflow-y: auto;
}

.notification-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.notification-dropdown__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--border);
  font-size: 12px;
}

.notification-dropdown__item--overdue {
  border-left-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.notification-dropdown__item--today {
  border-left-color: var(--warning);
  background: rgba(245, 158, 11, 0.05);
}

.notification-dropdown__item-title {
  font-weight: 500;
  color: var(--text-primary);
}

.notification-dropdown__item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
}

.notification-dropdown__actions {
  display: flex;
  gap: 4px;
}

.notification-dropdown__empty {
  text-align: center;
  padding: 16px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ──────────────────────────────────────────────
 * Light Mode — Component Overrides
 * ────────────────────────────────────────────── */
/* Dùng html + ID selector để đảm bảo thắng cascade với .sidebar__item--active */
html[data-theme="light"] #sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
}
html[data-theme="light"] #sidebar .sidebar__item {
  color: var(--ink-muted);
}
html[data-theme="light"] #sidebar .sidebar__item:hover {
  background: var(--surface-tonal);
  color: var(--primary);
}
html[data-theme="light"] #sidebar .sidebar__item--active {
  background: var(--primary-container);
  color: var(--primary);
}
html[data-theme="light"] .sidebar__logo-version {
  color: var(--primary);
  background: var(--primary-container);
}
html[data-theme="light"] .sidebar__divider { background: var(--hairline); }
html[data-theme="light"] .sidebar__backup-status { color: var(--ink-subtle); }

[data-theme="light"] #top-bar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}
[data-theme="light"] .top-bar__widget { color: var(--ink-muted); }
[data-theme="light"] .top-bar__title { color: var(--ink); }

[data-theme="light"] .card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 0 0 1px var(--hairline);
}
[data-theme="light"] .card--hover:hover {
  transform: translateY(-6px) rotateX(1.5deg) rotateY(-1deg) scale(1.015);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--glass-border-glow), 0 0 20px var(--primary-glow);
  border-color: var(--glass-border-glow);
}
[data-theme="light"] .card__title { color: var(--ink); }
[data-theme="light"] .kpi-card { background: var(--surface-1); }
[data-theme="light"] .kpi-card__label { color: var(--ink-muted); }
[data-theme="light"] .kpi-card__value { color: var(--ink); }

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: var(--ink-tertiary); }
[data-theme="light"] .form-select { background-color: var(--surface-1); }
[data-theme="light"] .form-select option { background: var(--surface-1); color: var(--ink); }
[data-theme="light"] .form-label { color: var(--ink-muted); font-weight: 500; }
[data-theme="light"] .form-hint { color: var(--ink-subtle); }

[data-theme="light"] .modal {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 48px rgba(0,0,0,0.1);
}
[data-theme="light"] .modal-overlay { background: rgba(26,26,26,0.35); }
[data-theme="light"] .modal__title { color: var(--ink); }
[data-theme="light"] .modal__header { border-bottom-color: var(--hairline); }
[data-theme="light"] .modal__footer { border-top-color: var(--hairline); }

[data-theme="light"] .kanban__card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .kanban__card:hover {
  border-color: var(--primary-light, var(--primary));
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .kanban__column {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
[data-theme="light"] .kanban__column-header { color: var(--ink-muted); border-bottom-color: var(--hairline); }

[data-theme="light"] .task-item {
  background: var(--surface-1);
  border-color: var(--hairline);
}
[data-theme="light"] .task-item:hover { background: var(--surface-2); }
[data-theme="light"] .task-item--subtask { background: var(--surface-2); }
[data-theme="light"] .task-item__title { color: var(--ink); }
[data-theme="light"] .task-item__meta { color: var(--ink-subtle); }
[data-theme="light"] .task-item__children { border-left-color: var(--hairline-strong); }

[data-theme="light"] .toast {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
[data-theme="light"] .toast__content { color: var(--ink); }

[data-theme="light"] .cmd-palette {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 20px 48px rgba(0,0,0,0.1);
}
[data-theme="light"] .cmd-palette__input { background: transparent; color: var(--ink); }
[data-theme="light"] .cmd-palette__input::placeholder { color: var(--ink-tertiary); }
[data-theme="light"] .cmd-palette__item { color: var(--ink-muted); }
[data-theme="light"] .cmd-palette__item:hover { background: var(--surface-tonal); color: var(--primary); }
[data-theme="light"] .cmd-palette__section-title { color: var(--ink-subtle); }
[data-theme="light"] .cmd-palette__divider { background: var(--hairline); }

[data-theme="light"] .ai-panel {
  background: var(--glass-bg);
  border-left: 1px solid var(--hairline);
  box-shadow: -8px 0 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
[data-theme="light"] .ai-panel__header { border-bottom-color: var(--hairline); color: var(--ink); }
[data-theme="light"] .ai-panel__welcome { color: var(--ink-muted); }

[data-theme="light"] .filter-chip {
  color: var(--ink-muted);
  border-color: var(--hairline-strong);
  background: var(--surface-1);
}
[data-theme="light"] .filter-chip:hover { background: var(--surface-tonal); }
[data-theme="light"] .filter-chip--active {
  background: var(--primary-container);
  border-color: var(--primary-light, var(--primary));
  color: var(--primary);
}
[data-theme="light"] .tag { background: var(--primary-container); color: var(--primary); border: 1px solid var(--primary-glow); }
[data-theme="light"] .empty-state { color: var(--ink-subtle); }

/* Logo collapsed: chỉ hiện sphere icon */
#sidebar.collapsed .sidebar__logo-icon {
  width: 36px;
  background-size: auto 34px;
  background-position: 0 center;
}
#sidebar.collapsed .sidebar__logo-wrapper { display: none; }

/* ──────────────────────────────────────────────
 * Focus Visible — Keyboard Accessibility
 * ────────────────────────────────────────────── */
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--border-radius); }
.task-item__checkbox:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kanban__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ──────────────────────────────────────────────
 * Deal Aging — Stale Badge
 * ────────────────────────────────────────────── */
.kanban__stale-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.kanban__card--stale {
  border-left: 2px solid var(--danger) !important;
}

/* ──────────────────────────────────────────────
 * Kanban Card Drop & Bottom Sheet Animations
 * ────────────────────────────────────────────── */
@keyframes cardDropBounce {
  0% { transform: scale(1.03) translateY(-4px); box-shadow: var(--shadow-xl); }
  50% { transform: scale(0.98) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
.kanban__card--dropped {
  animation: cardDropBounce 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ──────────────────────────────────────────────
 * Bottom Sheet Overlay & Component (Sprint 36)
 * ────────────────────────────────────────────── */
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-dropdown);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bottom-sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  width: 100%;
  max-width: 600px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--glass-shadow);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 16px)) 20px;
  will-change: transform;
}

.bottom-sheet-overlay.active .bottom-sheet {
  transform: translateY(0);
}

.bottom-sheet__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 2px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.bottom-sheet__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.bottom-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 12px;
}

@media (max-width: 480px) {
  .bottom-sheet__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bottom-sheet__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.bottom-sheet__item:hover {
  color: var(--text-primary);
}

.bottom-sheet__item--active {
  color: var(--primary);
}

.bottom-sheet__icon-wrapper {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.bottom-sheet__icon-wrapper i {
  font-size: 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bottom-sheet__item:hover .bottom-sheet__icon-wrapper {
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.bottom-sheet__item--active .bottom-sheet__icon-wrapper {
  background: var(--primary-container);
  color: var(--primary-light);
  border-color: var(--primary);
}

.bottom-sheet__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ──────────────────────────────────────────────
 * Print Styles & Utilities
 * ────────────────────────────────────────────── */
.print-only {
  display: none !important;
}

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  #sidebar, #top-bar, .no-print, .btn, select, .modal-overlay, #ai-chat-panel, .ai-panel-trigger, .sidebar__toggle {
    display: none !important;
  }
  #main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
  }
  #view-container {
    padding: 0 !important;
  }
  .card {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    page-break-inside: avoid;
    padding: 15px !important;
  }
  .print-only {
    display: block !important;
  }
  .kpi-main-grid {
    display: block !important;
  }
}
/* ──────────────────────────────────────────────
 * Premium UI/UX Enhancements (Sprint 37+)
 * ────────────────────────────────────────────── */

/* Circle clip-path view transitions */
::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: reveal-theme 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: normal;
}
@keyframes reveal-theme {
  from {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
  }
}

/* Glassmorphism overrides for ApexCharts Tooltip */
.apexcharts-tooltip {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.apexcharts-tooltip-title {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  font-weight: 600 !important;
}

/* Chart containers — responsive width + prevent overflow */
#dashboard-funnel-chart,
#chart-funnel, #chart-donut, #chart-timeline, #chart-trend,
.chart-velocity, #chart-win-rate, #chart-forecast,
#monitoring-latency-chart, #monitoring-logs-chart {
  width: 100% !important;
  max-width: 100%;
}

/* Conic/linear gradient glow borders for premium cards */
.kpi-card, .card--glow {
  position: relative;
  overflow: visible; /* Allow the glow border to render slightly outside */
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card::before, .card--glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  z-index: -1;
  opacity: 0.12;
  transition: opacity 0.3s ease, inset 0.3s ease, filter 0.3s ease;
}
.kpi-card:hover::before, .card--glow:hover::before {
  opacity: 0.7;
  inset: -1.5px;
  filter: blur(3px);
}

/* ──────────────────────────────────────────────
 * Sprint 87 — Design System Polish
 * ────────────────────────────────────────────── */

/* Priority indicators */
.priority-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.priority-dot--critical { background: var(--danger); box-shadow: 0 0 0 2px rgba(239,68,68,0.25); }
.priority-dot--high { background: var(--warning); }
.priority-dot--medium { background: var(--warning); }
.priority-dot--low { background: var(--success); }

/* Priority chip — Sprint 90 (dot + label + select combo) */
.priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

.view-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.view-switcher__btn {
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background: transparent;
  border: none;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.view-switcher__btn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.view-switcher__btn--active {
  background: var(--primary);
  color: var(--on-primary);
}
.view-switcher__btn--active:hover {
  background: var(--primary-hover);
}

/* Content table — global base for all data tables */
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.content-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.content-table th:hover { color: var(--text-primary); }
.content-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.content-table tbody tr:hover td {
  background: var(--surface-2);
}
.content-table tbody tr:hover td:first-child {
  border-left: 3px solid var(--primary);
}

/* Progress bar */
.progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* ──────────────────────────────────────────────
 * Sprint 85 — Bulk Actions
 * ────────────────────────────────────────────── */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: var(--z-base);
}
.bulk-action-bar select {
  height: 36px;
}
.row-select {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ──────────────────────────────────────────────
 * Global Responsive Table System (2026) — Plan 067
 * Container context + @container queries
 * ────────────────────────────────────────────── */

/* Container context + scroll fallback */
.table-responsive {
  container-type: inline-size;
  container-name: table-wrap;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cell safety — prevent overflow */
.col-title { overflow-wrap: break-word; word-break: break-word; }
.col-cb { width: 40px; text-align: center; }
.col-value { text-align: right; font-family: monospace; font-size: 12px; }
.col-sub,
.col-cal { text-align: center; }
.inline-select { max-width: 100%; }

/* Priority column visibility — @container (2026 standard) */
@container table-wrap (max-width: 1024px) {
  .col-hide-lg { display: none; }
}
@container table-wrap (max-width: 768px) {
  .col-hide-md { display: none; }
  .tasks-table .col-project,
  .tasks-table .col-due,
  .projects-table .col-client { display: none; }
}
@container table-wrap (max-width: 480px) {
  .col-hide-sm { display: none; }
  .tasks-table .col-status { display: none; }
}

/* Header responsive (global) */
.tasks-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.tasks-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
@container table-wrap (max-width: 480px) {
  .tasks-header { flex-direction: column; align-items: stretch; }
  .tasks-header-actions { justify-content: stretch; }
  .tasks-header-actions .btn { flex: 1; text-align: center; }
}

/* Bulk action bar responsive */
.bulk-action-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
@container table-wrap (max-width: 768px) {
  .bulk-action-bar { justify-content: center; padding: 10px 14px; width: 92vw; }
  .bulk-action-bar select { flex: 1; min-width: 100px; }
}

/* Card layout on ≤360px screens — each row becomes a card */
@container table-wrap (max-width: 360px) {
  .content-table, .content-table thead, .content-table tbody,
  .content-table tr, .content-table th, .content-table td {
    display: block;
  }
  .content-table thead { display: none; }
  .content-table tr {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-bottom: 8px;
  }
  .content-table td {
    padding: 4px 0;
    border-bottom: none;
    text-align: left;
    font-size: 12px;
  }
  .content-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 2px;
  }
  .content-table td:first-child { border-left: none; }
  .content-table tbody tr:hover td { background: transparent; }
}

/* Shared component refs */
.task-link { color: var(--primary); text-decoration: none; font-weight: 500; }
.task-link:hover { text-decoration: underline; }
.priority-inline { display: inline-flex; align-items: center; gap: 4px; }
.btn-cal-link {
  background: none; border: none; cursor: pointer;
  color: var(--primary); display: inline-flex; align-items: center;
  gap: 4px; font-size: 12px; font-weight: 600;
}
.btn-fu {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hairline: var(--hairline-strong);
    --ink-subtle: var(--ink-muted);
  }
}

/* scrollbar-gutter: stable — chống layout shift */
html { scrollbar-gutter: stable; }

/* content-visibility: auto — lazy render sections */
.content-table tbody { content-visibility: auto; contain-intrinsic-size: 200px; }
}

/* ── Vỏ Work / Personal (Plan 092) ────────────────────────────────────────
   Chỉ dùng token — không hardcode màu, để tự bám theo brand theme đang chọn
   (đúng bài học R-037/R-038). */
.mode-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 12px 10px;
  background: var(--surface-tonal);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.mode-switch__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.mode-switch__btn i,
.mode-switch__btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.mode-switch__btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.mode-switch__btn--active {
  background: var(--surface-1);
  border-color: var(--hairline-strong);
  color: var(--text-primary);
  font-weight: 600;
}
/* Module chưa deploy: vẫn bấm được (để hiện hướng dẫn) nhưng phải NHÌN LÀ BIẾT
   chưa dùng được — không giả vờ như đã sẵn sàng. */
.mode-switch__btn--unavailable { opacity: 0.5; }
.mode-switch__btn--unavailable::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}
/* Sidebar thu gọn: chỉ còn icon */
#sidebar.collapsed .mode-switch { flex-direction: column; margin: 0 8px 10px; }
#sidebar.collapsed .mode-switch__btn span { display: none; }

/* apex-module-body — class được `scripts/build-personal-module.mjs` TIÊM vào
   <body> của module ngoài (vd Tony-Wordstack ở /learn/) sau khi gỡ class Tailwind
   "dark" cứng của module (xem hàm tiêm hợp đồng, mục 4 "Gỡ nền cứng").
   Đây từng là CLASS MA: được tiêm ở đúng 1 nơi (build-personal-module.mjs) nhưng
   KHÔNG file CSS nào định nghĩa nó — sau khi gỡ class Tailwind, <body> của module
   không còn nền/màu chữ/font nào từ hệ thống, rơi về mặc định trắng của trình
   duyệt trước khi CSS riêng của module kịp vẽ đè lên (hiện ra nháy trắng lúc tải).
   `platform-tokens.css` được nạp TRƯỚC bundle module (xem tài liệu
   docs/PLATFORM_WORK_PERSONAL.md mục 3) nên 3 biến dưới đây luôn có giá trị
   đúng theo brand/theme người dùng đang chọn, không cần đợi module tự vẽ. */
.apex-module-body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-family);
}

/* AI Quality Feedback (thumbs up/down) — Sprint 142-7 */
.ai-feedback {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.ai-feedback:hover {
  opacity: 1;
}
.ai-feedback__btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-feedback__btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ──────────────────────────────────────────────
 * CSS-Only Tooltip (S143-1c)
 * ────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 4px 8px;
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink, #f7f8f8);
  background: var(--surface-3, #18191a);
  border: 1px solid var(--border-strong, #34343a);
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: var(--z-tooltip, 6000);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: var(--border-strong, #34343a) transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: var(--z-tooltip, 6000);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* Step-by-step form for mobile (Sprint 143-5) */
@media (max-width: 768px) {
  .step-form__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .step-form__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s;
  }
  .step-form__dot--active {
    background: var(--primary);
    width: 24px;
    border-radius: 4px;
  }
  .step-form__panel {
    display: none;
  }
  .step-form__panel--active {
    display: block;
  }
  .step-form__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 16px;
  }
  .step-form__nav {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .step-form__nav .btn {
    flex: 1;
    min-height: 44px;
  }
}