/* ============================================
   GTD Dashboard v2 — Nexus Design System
   ============================================ */

/* === DESIGN TOKENS === */
:root, [data-theme="light"] {
  /* Surfaces (Nexus Beige) */
  --color-bg:             #f7f6f2;
  --color-surface:        #f9f8f5;
  --color-surface-2:      #fbfbf9;
  --color-surface-offset: #f3f0ec;
  --color-surface-offset-2: #edeae5;
  --color-surface-dynamic: #e6e4df;
  --color-divider:        #dcd9d5;
  --color-border:         #d4d1ca;

  /* Text (Sylph Gray) */
  --color-text:           #28251d;
  --color-text-muted:     #7a7974;
  --color-text-faint:     #bab9b4;
  --color-text-inverse:   #f9f8f4;

  /* Primary Accent (Hydra Teal) */
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-primary-active: #0f3638;
  --color-primary-highlight: #cedcd8;

  /* Warning (Terra Brown) */
  --color-warning:        #964219;
  --color-warning-hover:  #713417;
  --color-warning-active: #4b2614;
  --color-warning-highlight: #ddcfc6;

  /* Error (Jenova Maroon) */
  --color-error:          #a12c7b;
  --color-error-hover:    #7d1e5e;
  --color-error-active:   #561740;
  --color-error-highlight: #e0ced7;

  /* Notification (Rosa Red) */
  --color-notification:   #a13544;
  --color-notification-hover: #782b33;
  --color-notification-active: #521f24;
  --color-notification-highlight: #dececb;

  /* Orange (Costa) */
  --color-orange:         #da7101;
  --color-orange-hover:   #c55700;
  --color-orange-active:  #ac3e00;
  --color-orange-highlight: #e7d7c4;

  /* Gold (Altana) */
  --color-gold:           #d19900;
  --color-gold-hover:     #b07a00;
  --color-gold-active:    #8a5b00;
  --color-gold-highlight: #e9e0c6;

  /* Yellow (Dalmasca) */
  --color-yellow:         #d19900;
  --color-yellow-hover:   #b07a00;
  --color-yellow-active:  #8a5b00;
  --color-yellow-highlight: #e6ddc4;

  /* Success (Gridania Green) */
  --color-success:        #437a22;
  --color-success-hover:  #2e5c10;
  --color-success-active: #1e3f0a;
  --color-success-highlight: #d4dfcc;

  /* Blue (Limsa) */
  --color-blue:           #006494;
  --color-blue-hover:     #0b5177;
  --color-blue-active:    #0b3751;
  --color-blue-highlight: #c6d8e4;

  /* Purple (Kuja) */
  --color-purple:         #7a39bb;
  --color-purple-hover:   #5f2699;
  --color-purple-active:  #431673;
  --color-purple-highlight: #dacfde;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Fonts */
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-display: 'General Sans', 'Helvetica Neue', sans-serif;
}

/* DARK MODE */
[data-theme="dark"] {
  --color-bg:             #171614;
  --color-surface:        #1c1b19;
  --color-surface-2:      #201f1d;
  --color-surface-offset: #1d1c1a;
  --color-surface-offset-2: #22211f;
  --color-surface-dynamic: #2d2c2a;
  --color-divider:        #262523;
  --color-border:         #393836;
  --color-text:           #cdccca;
  --color-text-muted:     #797876;
  --color-text-faint:     #5a5957;
  --color-text-inverse:   #2b2a28;
  --color-primary:        #4f98a3;
  --color-primary-hover:  #227f8b;
  --color-primary-active: #1a626b;
  --color-primary-highlight: #313b3b;
  --color-warning:        #bb653b;
  --color-warning-hover:  #b95525;
  --color-warning-active: #993d10;
  --color-warning-highlight: #564942;
  --color-error:          #d163a7;
  --color-error-hover:    #b9478f;
  --color-error-active:   #9b2f76;
  --color-error-highlight: #4c3d46;
  --color-notification:   #dd6974;
  --color-notification-hover: #c24a59;
  --color-notification-active: #a53142;
  --color-notification-highlight: #574848;
  --color-orange:         #fdab43;
  --color-orange-hover:   #fec47e;
  --color-orange-active:  #fdd1a4;
  --color-orange-highlight: #564b3e;
  --color-gold:           #e8af34;
  --color-gold-hover:     #fdc551;
  --color-gold-active:    #feda74;
  --color-gold-highlight: #4d4332;
  --color-yellow:         #edb336;
  --color-yellow-hover:   #fdc452;
  --color-yellow-active:  #feda74;
  --color-yellow-highlight: #574e3d;
  --color-success:        #6daa45;
  --color-success-hover:  #4d8f25;
  --color-success-active: #387015;
  --color-success-highlight: #3a4435;
  --color-blue:           #5591c7;
  --color-blue-hover:     #3b78ab;
  --color-blue-active:    #275f8e;
  --color-blue-highlight: #3a4550;
  --color-purple:         #a86fdf;
  --color-purple-hover:   #9250d0;
  --color-purple-active:  #7537ba;
  --color-purple-highlight: #4e4652;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #171614;
    --color-surface:        #1c1b19;
    --color-surface-2:      #201f1d;
    --color-surface-offset: #1d1c1a;
    --color-surface-offset-2: #22211f;
    --color-surface-dynamic: #2d2c2a;
    --color-divider:        #262523;
    --color-border:         #393836;
    --color-text:           #cdccca;
    --color-text-muted:     #797876;
    --color-text-faint:     #5a5957;
    --color-text-inverse:   #2b2a28;
    --color-primary:        #4f98a3;
    --color-primary-hover:  #227f8b;
    --color-primary-active: #1a626b;
    --color-primary-highlight: #313b3b;
    --color-warning:        #bb653b;
    --color-warning-hover:  #b95525;
    --color-warning-active: #993d10;
    --color-warning-highlight: #564942;
    --color-error:          #d163a7;
    --color-error-hover:    #b9478f;
    --color-error-active:   #9b2f76;
    --color-error-highlight: #4c3d46;
    --color-notification:   #dd6974;
    --color-notification-hover: #c24a59;
    --color-notification-active: #a53142;
    --color-notification-highlight: #574848;
    --color-orange:         #fdab43;
    --color-orange-hover:   #fec47e;
    --color-orange-active:  #fdd1a4;
    --color-orange-highlight: #564b3e;
    --color-gold:           #e8af34;
    --color-gold-hover:     #fdc551;
    --color-gold-active:    #feda74;
    --color-gold-highlight: #4d4332;
    --color-yellow:         #edb336;
    --color-yellow-hover:   #fdc452;
    --color-yellow-active:  #feda74;
    --color-yellow-highlight: #574e3d;
    --color-success:        #6daa45;
    --color-success-hover:  #4d8f25;
    --color-success-active: #387015;
    --color-success-highlight: #3a4435;
    --color-blue:           #5591c7;
    --color-blue-hover:     #3b78ab;
    --color-blue-active:    #275f8e;
    --color-blue-highlight: #3a4550;
    --color-purple:         #a86fdf;
    --color-purple-hover:   #9250d0;
    --color-purple-active:  #7537ba;
    --color-purple-highlight: #4e4652;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* === BASE RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection {
  background: oklch(from var(--color-primary) l c h / 0.25);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role="button"], [role="link"], input, textarea, select {
  transition: color var(--transition-interactive),
              background var(--transition-interactive),
              border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}

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

/* === HEADER === */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  backdrop-filter: blur(12px);
}

.header-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  min-width: 0;
}

.header-title {
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-logo {
  flex-shrink: 0;
  display: inline-block;
  width: 28px;
  height: 28px;
}

.header-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

/* === MAIN === */
.main {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-6);
  padding-bottom: var(--space-16);
}

/* === SECTIONS === */
.section {
  margin-bottom: var(--space-10);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-icon {
  font-size: 1.2em;
}

.section-count {
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.1em 0.55em;
  border-radius: var(--radius-full);
  min-width: 1.6em;
  text-align: center;
}

/* === COLLAPSIBLE SECTIONS === */
.section-header--collapsible {
  cursor: pointer;
  user-select: none;
}

.section-header--collapsible:hover .section-title {
  color: var(--color-primary);
}

.collapse-arrow {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.collapse-arrow.collapsed {
  transform: rotate(-90deg);
}

.collapsible-content {
  transition: max-height 0.4s ease, opacity 0.3s ease;
  overflow: hidden;
}

.collapsible-content.collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* === STATS GRID === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-card--inbox .stat-number { color: var(--color-notification); }
.stat-card--projects .stat-number { color: var(--color-purple); }
.stat-card--action .stat-number { color: var(--color-primary); }
.stat-card--waiting .stat-number { color: var(--color-yellow); }
.stat-card--relationships .stat-number { color: var(--color-success); }
.stat-card--calendar .stat-number { color: var(--color-blue); }

/* === INBOX PROGRESS BAR === */
.inbox-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.inbox-progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.inbox-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--color-surface-dynamic);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.inbox-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* === INBOX CARDS === */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.inbox-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, box-shadow var(--transition-interactive);
  overflow: hidden;
}

.inbox-card:hover {
  box-shadow: var(--shadow-md);
}

.inbox-card.removing {
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  border-width: 0;
  pointer-events: none;
}

.inbox-card.completed {
  border-color: var(--color-success);
  background: var(--color-success-highlight);
}

.inbox-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.inbox-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.inbox-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
}

.inbox-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

/* === OPEN NOTES LINK (calendar cards) === */
.cal-notes-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm);
  background: var(--color-purple-highlight);
  color: var(--color-purple);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
  margin-left: auto;
}
.cal-notes-link:hover {
  background: var(--color-purple);
  color: #fff;
}
.cal-notes-link svg {
  flex-shrink: 0;
}

/* === SOURCE BADGES === */
.source-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.source-badge--email { background: var(--color-blue-highlight); color: var(--color-blue); }
.source-badge--notion { background: var(--color-purple-highlight); color: var(--color-purple); }
.source-badge--google-tasks { background: var(--color-orange-highlight); color: var(--color-orange); }
.source-badge--manual { background: var(--color-surface-dynamic); color: var(--color-text-muted); }

/* === PRIORITY BADGES === */
.priority-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15em 0.65em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.priority-badge--high { background: #dc2626; color: #fff; }
.priority-badge--medium { background: var(--color-yellow); color: #28251d; }
.priority-badge--low { background: var(--color-surface-dynamic); color: var(--color-text-muted); }

/* === AI RECOMMENDATION === */
.ai-recommendation {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-text-faint);
  flex-wrap: wrap;
}

.ai-rec-icon { font-size: 1rem; flex-shrink: 0; }
.ai-rec-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.ai-rec-category {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.ai-rec-category--next { background: var(--color-primary-highlight); color: var(--color-primary); }
.ai-rec-category--read { background: var(--color-orange-highlight); color: var(--color-orange); }
.ai-rec-category--reference { background: var(--color-blue-highlight); color: var(--color-blue); }
.ai-rec-category--project { background: var(--color-purple-highlight); color: var(--color-purple); }
.ai-rec-category--someday { background: var(--color-surface-dynamic); color: var(--color-text-muted); }
.ai-rec-category--waiting { background: var(--color-yellow-highlight); color: var(--color-yellow-active); }
.ai-rec-text { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; line-height: 1.5; }

/* === ACTION BUTTONS === */
.inbox-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.action-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-interactive);
}

.action-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* Confirm button — prominent */
.action-btn--confirm {
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-2) var(--space-5);
}

.action-btn--confirm-next { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.action-btn--confirm-next:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.action-btn--confirm-read { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.action-btn--confirm-read:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover); }
.action-btn--confirm-reference { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.action-btn--confirm-reference:hover { background: var(--color-blue-hover); border-color: var(--color-blue-hover); }
.action-btn--confirm-project { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }
.action-btn--confirm-project:hover { background: var(--color-purple-hover); border-color: var(--color-purple-hover); }
.action-btn--confirm-someday { background: var(--color-text-muted); color: #fff; border-color: var(--color-text-muted); }
.action-btn--confirm-someday:hover { background: var(--color-text); border-color: var(--color-text); }
.action-btn--confirm-waiting { background: var(--color-yellow); color: #28251d; border-color: var(--color-yellow); }
.action-btn--confirm-waiting:hover { background: var(--color-yellow-hover); border-color: var(--color-yellow-hover); }

.action-btn--next { background: var(--color-primary); color: var(--color-text-inverse); }
.action-btn--next:hover { background: var(--color-primary-hover); }
.action-btn--waiting { background: var(--color-yellow-highlight); color: var(--color-yellow-active); border-color: var(--color-yellow); }
[data-theme="dark"] .action-btn--waiting { background: var(--color-yellow-highlight); color: var(--color-yellow); }
.action-btn--waiting:hover { background: var(--color-yellow); color: #28251d; }
.action-btn--someday { background: var(--color-surface-dynamic); color: var(--color-text-muted); }
.action-btn--someday:hover { background: var(--color-border); color: var(--color-text); }
.action-btn--reference { background: var(--color-blue-highlight); color: var(--color-blue); }
.action-btn--reference:hover { background: var(--color-blue); color: #fff; }
.action-btn--read { background: var(--color-orange-highlight); color: var(--color-orange); border-color: var(--color-orange); }
.action-btn--read:hover { background: var(--color-orange); color: #fff; }
.action-btn--delegate { background: var(--color-purple-highlight); color: var(--color-purple); border-color: var(--color-purple); }
.action-btn--delegate:hover { background: var(--color-purple); color: #fff; }
.action-btn--project { background: var(--color-purple-highlight); color: var(--color-purple); border-color: var(--color-purple); }
.action-btn--project:hover { background: var(--color-purple); color: #fff; }
.action-btn--complete { background: var(--color-success-highlight); color: var(--color-success); border-color: var(--color-success); }
.action-btn--complete:hover { background: var(--color-success); color: #fff; }
.action-btn--dismiss { background: transparent; color: var(--color-notification); border-color: var(--color-notification); }
.action-btn--dismiss:hover { background: var(--color-notification); color: #fff; }

/* === PROJECTS === */
.projects-list { display: flex; flex-direction: column; gap: var(--space-4); }

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive);
}
.project-card:hover { box-shadow: var(--shadow-md); }

.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
}
.project-card-header:hover { background: var(--color-surface-offset); }

.project-card-left { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; flex-wrap: wrap; }

.project-card-title { font-size: var(--text-base); font-weight: 600; font-family: var(--font-display); }

.project-toggle-arrow {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.project-toggle-arrow.collapsed { transform: rotate(-90deg); }

.project-status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.project-status--in-progress { background: var(--color-primary-highlight); color: var(--color-primary); }
.project-status--active { background: var(--color-success-highlight); color: var(--color-success); }
.project-status--waiting { background: var(--color-yellow-highlight); color: var(--color-yellow-active); }
[data-theme="dark"] .project-status--waiting { color: var(--color-yellow); }
.project-status--complete { background: var(--color-success-highlight); color: var(--color-success); }

.project-area-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.project-area--finance { background: var(--color-gold-highlight); color: var(--color-gold); }
.project-area--work { background: var(--color-blue-highlight); color: var(--color-blue); }
.project-area--personal { background: var(--color-purple-highlight); color: var(--color-purple); }

.project-next-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-offset);
  flex-wrap: wrap;
}

.project-na-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.project-na-text { font-size: var(--text-sm); color: var(--color-text); flex: 1; min-width: 0; }

.project-na-editor { flex: 1; min-width: 0; display: flex; gap: var(--space-2); align-items: center; }
.project-na-editor input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.project-na-editor input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}

.project-detail {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-divider);
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.project-detail.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; }

.project-supporting { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

/* === NEXT ACTIONS TABLE === */
.na-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.na-table { background: var(--color-surface); font-size: var(--text-sm); }
.na-table thead { background: var(--color-surface-offset); }
.na-table th {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: left;
  white-space: nowrap;
}
.na-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  vertical-align: middle;
}

.na-row { transition: opacity 0.3s ease, transform 0.3s ease; }
.na-row.removing { opacity: 0; transform: translateX(-20px); }

.na-action-text { font-weight: 500; }
.na-project { color: var(--color-text-muted); white-space: nowrap; }
.na-person { color: var(--color-text-muted); white-space: nowrap; }

.context-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.context-badge--computer { background: var(--color-blue-highlight); color: var(--color-blue); }
.context-badge--phone { background: var(--color-purple-highlight); color: var(--color-purple); }
.context-badge--errands { background: var(--color-orange-highlight); color: var(--color-orange); }
.context-badge--agenda { background: var(--color-gold-highlight); color: var(--color-gold); }
.context-badge--home { background: var(--color-success-highlight); color: var(--color-success); }
.context-badge--anywhere { background: var(--color-surface-dynamic); color: var(--color-text-muted); }
.context-badge--office { background: var(--color-primary-highlight); color: var(--color-primary); }

/* === WAITING TABLE === */
.waiting-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.waiting-table { background: var(--color-surface); font-size: var(--text-sm); }
.waiting-table thead { background: var(--color-surface-offset); }
.waiting-table th {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: left;
  white-space: nowrap;
}
.waiting-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  vertical-align: middle;
}

.waiting-row { transition: opacity 0.3s ease, transform 0.3s ease; }
.waiting-row.removing { opacity: 0; transform: translateX(-20px); }
.waiting-item-desc { font-weight: 500; }
.waiting-who { color: var(--color-text-muted); white-space: nowrap; }
.waiting-date { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--color-text-muted); }
.waiting-expected { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.waiting-person { color: var(--color-text-muted); white-space: nowrap; }
.waiting-actions { display: flex; gap: var(--space-2); flex-wrap: nowrap; }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.status-dot--yellow { background: var(--color-yellow); }
.status-dot--red { background: #dc2626; }

/* === RELATIONSHIPS === */
.relationships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.relationship-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.relationship-card:hover { box-shadow: var(--shadow-md); }

.relationship-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.relationship-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
  color: #fff;
  background: var(--color-primary);
}
.relationship-avatar--family { background: var(--color-purple); }
.relationship-avatar--friend { background: var(--color-success); }
.relationship-avatar--work { background: var(--color-blue); }
.relationship-avatar--community { background: var(--color-orange); }

.relationship-name {
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-display);
}

.relationship-category-chip {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.relationship-category--family { background: var(--color-purple-highlight); color: var(--color-purple); }
.relationship-category--friend { background: var(--color-success-highlight); color: var(--color-success); }
.relationship-category--work { background: var(--color-blue-highlight); color: var(--color-blue); }
.relationship-category--community { background: var(--color-orange-highlight); color: var(--color-orange); }

.relationship-detail { font-size: var(--text-xs); color: var(--color-text-muted); }
.relationship-agenda {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: var(--space-1);
}

.relationship-actions { margin-top: auto; padding-top: var(--space-2); }

/* === MEETING NOTES === */
.empty-state {
  background: var(--color-surface-offset);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* === SOMEDAY/MAYBE === */
.someday-list { display: flex; flex-direction: column; gap: var(--space-3); }

.someday-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.someday-item.removing { opacity: 0; transform: scale(0.95); }

.someday-title { flex: 1; font-size: var(--text-sm); font-weight: 500; }

.someday-category-chip {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.someday-category--career { background: var(--color-blue-highlight); color: var(--color-blue); }
.someday-category--other { background: var(--color-surface-dynamic); color: var(--color-text-muted); }
.someday-category--personal { background: var(--color-purple-highlight); color: var(--color-purple); }
.someday-category--travel { background: var(--color-orange-highlight); color: var(--color-orange); }

/* Someday action input area */
.someday-input-area { margin-top:0.75rem; }
.someday-quick-actions {
  display:flex; gap:0.5rem; margin-bottom:0.5rem;
}
.someday-quick-btn {
  padding:0.35rem 0.85rem;
  font-size:0.78rem;
  font-weight:600;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  font-family:var(--font-body, 'General Sans', sans-serif);
}
.someday-quick-btn:hover { transform:scale(1.03); }
.someday-quick-btn:active { transform:scale(0.97); }
.someday-quick-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.someday-quick-btn--done {
  background:var(--color-surface-dynamic);
  color:var(--color-text-muted);
  border-color:var(--color-border);
}
.someday-quick-btn--done:hover {
  background:var(--color-border);
  color:var(--color-text);
}
.someday-quick-btn--promote {
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  border-color:var(--color-primary);
}
.someday-quick-btn--promote:hover {
  background:var(--color-primary);
  color:#fff;
}

/* === REFERENCE === */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.reference-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow var(--transition-interactive);
}
.reference-card:hover { box-shadow: var(--shadow-md); }
.reference-card.removing { opacity: 0; transform: scale(0.95); }

.reference-card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.ref-category-chip {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ref-location-chip {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ref-location--notion { background: var(--color-blue-highlight); color: var(--color-blue); }
.ref-location--google-drive { background: var(--color-success-highlight); color: var(--color-success); }
.ref-location--onedrive { background: var(--color-purple-highlight); color: var(--color-purple); }
.ref-location--gmail { background: var(--color-notification-highlight); color: var(--color-notification); }
.ref-location--outlook { background: var(--color-orange-highlight); color: var(--color-orange); }
.ref-location--web { background: var(--color-yellow-highlight); color: var(--color-yellow-active); }

.ref-title { font-size: var(--text-sm); font-weight: 500; }
.ref-source-link { font-size: var(--text-xs); color: var(--color-primary); text-decoration: none; }
.ref-source-link:hover { text-decoration: underline; }
.ref-tags { font-size: var(--text-xs); color: var(--color-text-faint); }

/* === SCHEDULE OVERVIEW === */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.schedule-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.schedule-emoji { font-size: 1.5rem; flex-shrink: 0; }
.schedule-name { font-weight: 600; font-size: var(--text-sm); font-family: var(--font-display); display: block; }
.schedule-time { font-size: var(--text-xs); color: var(--color-text-muted); display: block; font-variant-numeric: tabular-nums lining-nums; }

/* === FOOTER === */
.footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-6);
  background: var(--color-surface);
}

.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-attribution {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-attribution:hover { color: var(--color-primary); }

.footer-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* === MODALS === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.15 0 0 / 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

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

.modal-title { font-size: var(--text-lg); font-weight: 600; }

.modal-close {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--color-surface-offset); color: var(--color-text); }

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

.modal-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.nextaction-item-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.modal-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  resize: vertical;
}
.modal-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}

.modal-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  appearance: auto;
}
.modal-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}

.modal-field-group { margin-bottom: var(--space-4); }
.modal-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: var(--space-2); }
.modal-row { display: flex; gap: var(--space-4); }
.modal-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.modal-save-btn {
  width: 100%;
  text-align: center;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.nextaction-textarea { min-height: 80px; }

.nextaction-contexts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.context-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-dynamic);
  color: var(--color-text-muted);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.context-chip:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.context-chip.selected { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

.priority-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-dynamic);
  color: var(--color-text-muted);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.priority-chip:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.priority-chip.selected { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }

/* Delegate modal */
.contacts-list { max-height: 200px; overflow-y: auto; margin-bottom: var(--space-3); }

.contact-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.contact-option:hover { background: var(--color-surface-offset); }
.contact-option-info { display: flex; flex-direction: column; gap: 0.15em; }
.contact-option-name { font-weight: 600; font-size: var(--text-sm); }
.contact-option-email { font-size: var(--text-xs); color: var(--color-text-muted); }
.contact-option-arrow { color: var(--color-primary); font-size: var(--text-sm); }
.contacts-list-empty { text-align: center; padding: var(--space-4); color: var(--color-text-faint); font-size: var(--text-sm); }

.delegate-divider {
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  margin: var(--space-4) 0;
  position: relative;
}
.delegate-divider::before,
.delegate-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--color-divider);
}
.delegate-divider::before { left: 0; }
.delegate-divider::after { right: 0; }

/* === TOAST === */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  pointer-events: auto;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-undo {
  margin-left: var(--space-3);
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

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

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .schedule-grid { grid-template-columns: 1fr; }
  .modal-row { flex-direction: column; gap: 0; }
  .waiting-table th:nth-child(4),
  .waiting-table td:nth-child(4),
  .waiting-table th:nth-child(5),
  .waiting-table td:nth-child(5) { display: none; }
  .na-table th:nth-child(5),
  .na-table td:nth-child(5) { display: none; }
}

@media (max-width: 600px) {
  .main { padding: var(--space-4); }
  .header-inner { padding: var(--space-3) var(--space-4); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .relationships-grid { grid-template-columns: 1fr 1fr; }
  .reference-grid { grid-template-columns: 1fr; }
  .inbox-actions { gap: var(--space-1); }
  .action-btn { padding: var(--space-1) var(--space-3); font-size: 0.7rem; }
  .action-btn--confirm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
  .inbox-progress { display: none; }
  .section-header-right .inbox-progress { display: none; }
  .waiting-table th:nth-child(6),
  .waiting-table td:nth-child(6) { display: none; }
  .na-table th:nth-child(4),
  .na-table td:nth-child(4) { display: none; }
}

@media (max-width: 400px) {
  .relationships-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .stat-card { padding: var(--space-3) var(--space-2); }
}

/* === LIVE DASHBOARD ADDITIONS === */

/* Notion deep links */
.notion-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.notion-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Relationship card links */
.relationship-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: var(--space-4);
}
.relationship-link:hover {
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
}
.relationship-agenda {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-1);
}

/* Data tables */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-divider);
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: var(--color-surface-offset);
}
.data-table td.overdue,
.data-table td[class="overdue"] {
  color: var(--color-notification);
  font-weight: 600;
}
td.overdue { color: var(--color-notification); font-weight: 600; }

/* Section note (e.g., reference hybrid model) */
.section-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 0 0 var(--space-3) 0;
  line-height: 1.5;
}

/* Additional badge variants */
.source-badge--calendar {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 600;
}
.source-badge--done {
  background: #e0f2e9;
  color: #1a7d4b;
}
[data-theme="dark"] .source-badge--done {
  background: #1a3a28;
  color: #6fcf97;
}
.source-badge--followup {
  background: var(--color-notification-highlight);
  color: var(--color-notification);
}
.source-badge--inprogress,
.source-badge--active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.source-badge--onhold {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.source-badge--waiting {
  background: var(--color-orange-highlight, #eddccc);
  color: var(--color-orange);
}
.source-badge--googledrive {
  background: #dcedc8;
  color: #33691e;
}
[data-theme="dark"] .source-badge--googledrive {
  background: #2a3a1e;
  color: #8bc34a;
}
.source-badge--onedrive {
  background: #e3d9f2;
  color: #5b2d90;
}
.source-badge--notion {
  background: var(--color-surface-offset-2);
  color: var(--color-text);
}
.source-badge--gmail,
.source-badge--outlook {
  background: #fce4ec;
  color: #c62828;
}
.source-badge--web {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

/* Context badges */
.source-badge--computer { background: #e3f2fd; color: #1565c0; }
.source-badge--phone { background: #e8f5e9; color: #2e7d32; }
.source-badge--office { background: #f3e5f5; color: #6a1b9a; }
.source-badge--errands { background: #fff3e0; color: #e65100; }
.source-badge--home { background: #efebe9; color: #4e342e; }
.source-badge--anywhere { background: var(--color-surface-offset-2); color: var(--color-text-muted); }
.source-badge--agenda { background: #ffebee; color: #b71c1c; }
[data-theme="dark"] .source-badge--computer { background: #1a2a3a; color: #64b5f6; }
[data-theme="dark"] .source-badge--phone { background: #1a3a28; color: #66bb6a; }
[data-theme="dark"] .source-badge--office { background: #2a1a3a; color: #ab47bc; }
[data-theme="dark"] .source-badge--errands { background: #3a2a1a; color: #ff9800; }
[data-theme="dark"] .source-badge--home { background: #2a2420; color: #8d6e63; }
[data-theme="dark"] .source-badge--agenda { background: #3a1a1a; color: #ef5350; }

/* Category badges */
.source-badge--travel { background: #e3f2fd; color: #1565c0; }
.source-badge--learning { background: #f3e5f5; color: #6a1b9a; }
.source-badge--projectidea { background: #e8f5e9; color: #2e7d32; }
.source-badge--purchase { background: #fff3e0; color: #e65100; }
.source-badge--hobby { background: #fce4ec; color: #c62828; }
.source-badge--career { background: #ffebee; color: #b71c1c; }
.source-badge--important { background: #ffebee; color: #b71c1c; font-weight: 600; }
.source-badge--archive { background: var(--color-surface-offset-2); color: var(--color-text-muted); }
.source-badge--template { background: #e3f2fd; color: #1565c0; }

/* Area badges */
.source-badge--work { background: #e3f2fd; color: #1565c0; }
.source-badge--personal { background: #e8f5e9; color: #2e7d32; }
.source-badge--family { background: #f3e5f5; color: #6a1b9a; }
.source-badge--finance { background: #fff3e0; color: #e65100; }
.source-badge--health { background: #fce4ec; color: #c62828; }
.source-badge--technical { background: #ede7f6; color: #4527a0; }
.source-badge--legal { background: #ffebee; color: #b71c1c; }

/* Meeting type badges */
.source-badge--11 { background: #e3f2fd; color: #1565c0; }
.source-badge--team { background: #e8f5e9; color: #2e7d32; }
.source-badge--client { background: #fff3e0; color: #e65100; }
.source-badge--board { background: #f3e5f5; color: #6a1b9a; }
.source-badge--interview { background: #fce4ec; color: #c62828; }
.source-badge--zoom { background: #e3f2fd; color: #1565c0; }
.source-badge--googlemeet { background: #e8f5e9; color: #2e7d32; }
.source-badge--teams { background: #f3e5f5; color: #6a1b9a; }
.source-badge--inperson { background: #fff3e0; color: #e65100; }

/* Schedule card variants */
.schedule-card--refresh {
  border-left: 3px solid var(--color-primary);
}
.schedule-card--eod {
  border-left: 3px solid var(--color-orange, #ea580c);
}

/* Footer */
.footer {
  padding: var(--space-6) var(--space-6);
  text-align: center;
  border-top: 1px solid var(--color-divider);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.footer-attribution {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-attribution:hover {
  color: var(--color-primary);
}
.footer-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ============================================
   AI Recommendation Banner — Inbox Cards
   ============================================ */

/* Base banner */
.ai-rec {
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid transparent;
}

.ai-rec-action {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ai-rec-rationale {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
  line-height: 1.4;
}

.ai-rec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ai-rec-meta-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: oklch(0 0 0 / 0.07);
  color: var(--color-text-muted);
}

/* Color variants per action type */
.ai-rec--nextaction {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-left-color: var(--color-primary);
}
.ai-rec--nextaction .ai-rec-action { color: var(--color-primary); }

.ai-rec--delegate {
  background: color-mix(in srgb, var(--color-blue) 10%, transparent);
  border-left-color: var(--color-blue);
}
.ai-rec--delegate .ai-rec-action { color: var(--color-blue); }

.ai-rec--readreview {
  background: color-mix(in srgb, var(--color-orange) 10%, transparent);
  border-left-color: var(--color-orange);
}
.ai-rec--readreview .ai-rec-action { color: var(--color-orange); }

.ai-rec--reference {
  background: color-mix(in srgb, var(--color-purple) 10%, transparent);
  border-left-color: var(--color-purple);
}
.ai-rec--reference .ai-rec-action { color: var(--color-purple); }

.ai-rec--somedaymaybe {
  background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
  border-left-color: var(--color-text-muted);
}
.ai-rec--somedaymaybe .ai-rec-action { color: var(--color-text-muted); }

.ai-rec--complete {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-left-color: var(--color-success);
}
.ai-rec--complete .ai-rec-action { color: var(--color-success); }

.ai-rec--trash {
  background: color-mix(in srgb, var(--color-notification) 10%, transparent);
  border-left-color: var(--color-notification);
}
.ai-rec--trash .ai-rec-action { color: var(--color-notification); }

/* ============================================
   Full Action Buttons — Inbox Processing
   ============================================ */

.inbox-actions-full {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.inbox-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-interactive),
              color var(--transition-interactive),
              border-color var(--transition-interactive);
  border: 1.5px solid transparent;
  background: transparent;
  white-space: nowrap;
}

/* Color variants — outlined by default */
.inbox-action-btn--nextaction {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.inbox-action-btn--nextaction:hover,
.inbox-action-btn--nextaction.inbox-action-btn--recommended {
  background: var(--color-primary);
  color: #fff;
}

.inbox-action-btn--delegate {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.inbox-action-btn--delegate:hover,
.inbox-action-btn--delegate.inbox-action-btn--recommended {
  background: var(--color-blue);
  color: #fff;
}

.inbox-action-btn--readreview {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.inbox-action-btn--readreview:hover,
.inbox-action-btn--readreview.inbox-action-btn--recommended {
  background: var(--color-orange);
  color: #fff;
}

.inbox-action-btn--reference {
  border-color: var(--color-purple);
  color: var(--color-purple);
}
.inbox-action-btn--reference:hover,
.inbox-action-btn--reference.inbox-action-btn--recommended {
  background: var(--color-purple);
  color: #fff;
}

.inbox-action-btn--somedaymaybe {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
}
.inbox-action-btn--somedaymaybe:hover,
.inbox-action-btn--somedaymaybe.inbox-action-btn--recommended {
  background: var(--color-text-muted);
  color: #fff;
}

.inbox-action-btn--complete {
  border-color: var(--color-success);
  color: var(--color-success);
}
.inbox-action-btn--complete:hover,
.inbox-action-btn--complete.inbox-action-btn--recommended {
  background: var(--color-success);
  color: #fff;
}

.inbox-action-btn--trash {
  border-color: var(--color-notification);
  color: var(--color-notification);
}
.inbox-action-btn--trash:hover,
.inbox-action-btn--trash.inbox-action-btn--recommended {
  background: var(--color-notification);
  color: #fff;
}

/* ============================================
   KPI Stat Card — Read / Review
   ============================================ */

/* Calendar stat card border (matches existing color scheme) */
.stat-card--calendar {
  border-top: 3px solid var(--color-blue);
}

/* AI Recommendation — Next Action line */
.ai-rec-next-action {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.35rem 0 0.25rem;
  line-height: 1.4;
}

/* 2-minute rule badge */
.ai-rec-meta-badge--2min {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  font-weight: 700;
  border: 1px solid var(--color-warning);
}

/* Delegate person badge */
.ai-rec-meta-badge--person {
  background: oklch(0.92 0.03 250);
  color: var(--color-blue);
  font-weight: 700;
  border: 1px solid var(--color-blue);
}

/* ============================================
   Dark Mode adjustments
   ============================================ */

[data-theme="dark"] .ai-rec-meta-badge {
  background: oklch(1 0 0 / 0.08);
}

[data-theme="dark"] .inbox-action-btn--nextaction.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--nextaction:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--delegate.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--delegate:hover {
  background: var(--color-blue);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--readreview.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--readreview:hover {
  background: var(--color-orange);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--reference.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--reference:hover {
  background: var(--color-purple);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--somedaymaybe.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--somedaymaybe:hover {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--complete.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--complete:hover {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .inbox-action-btn--trash.inbox-action-btn--recommended,
[data-theme="dark"] .inbox-action-btn--trash:hover {
  background: var(--color-notification);
  color: var(--color-text-inverse);
}

/* === MODAL DIALOG SYSTEM === */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 200ms ease; pointer-events:none; }
.modal-backdrop.active { opacity:1; pointer-events:auto; }

.modal-card { background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:90%; max-width:500px; max-height:85vh; overflow-y:auto; transform:translateY(20px); transition:transform 200ms ease; }
.modal-backdrop.active .modal-card { transform:translateY(0); }

.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--color-divider); }
.modal-title { font-size:1.1rem; font-weight:700; color:var(--color-text); margin:0; }
.modal-close { background:none; border:none; font-size:1.5rem; color:var(--color-text-muted); cursor:pointer; padding:0.25rem; line-height:1; }
.modal-close:hover { color:var(--color-text); }

.modal-body { padding:1.5rem; }
.modal-item-title { font-size:0.85rem; color:var(--color-text-muted); margin-bottom:1rem; padding:0.75rem; background:var(--color-surface-offset); border-radius:var(--radius-md); }

.modal-field { margin-bottom:1rem; }
.modal-label { display:block; font-size:0.8rem; font-weight:600; color:var(--color-text-muted); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.03em; }
.modal-input, .modal-select, .modal-textarea { width:100%; padding:0.6rem 0.75rem; border:1.5px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-2); color:var(--color-text); font-size:0.9rem; font-family:inherit; transition:border-color var(--transition-interactive); box-sizing:border-box; }
.modal-input:focus, .modal-select:focus, .modal-textarea:focus { outline:none; border-color:var(--color-primary); }
.modal-textarea { min-height:80px; resize:vertical; }
.modal-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7974' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.75rem center; padding-right:2rem; }

.modal-row { display:flex; gap:0.75rem; }
.modal-row .modal-field { flex:1; }

.modal-footer { display:flex; gap:0.75rem; justify-content:flex-end; padding:1rem 1.5rem; border-top:1px solid var(--color-divider); }
.modal-btn { padding:0.6rem 1.25rem; border-radius:var(--radius-md); font-size:0.85rem; font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:all var(--transition-interactive); }
.modal-btn--cancel { background:transparent; border-color:var(--color-border); color:var(--color-text-muted); }
.modal-btn--cancel:hover { background:var(--color-surface-offset); }
.modal-btn--confirm { color:#fff; }
.modal-btn--confirm:disabled { opacity:0.5; cursor:not-allowed; }
/* Action-specific confirm button colors */
.modal-btn--nextaction { background:var(--color-primary); border-color:var(--color-primary); }
.modal-btn--nextaction:hover { background:var(--color-primary-hover); }
.modal-btn--delegate { background:var(--color-blue); border-color:var(--color-blue); }
.modal-btn--delegate:hover { background:var(--color-blue-hover); }
.modal-btn--readreview { background:var(--color-orange); border-color:var(--color-orange); }
.modal-btn--readreview:hover { background:var(--color-orange-hover); }
.modal-btn--reference { background:var(--color-purple); border-color:var(--color-purple); }
.modal-btn--reference:hover { background:var(--color-purple-hover); }
.modal-btn--somedaymaybe { background:var(--color-text-muted); border-color:var(--color-text-muted); }
.modal-btn--complete { background:var(--color-success); border-color:var(--color-success); }
.modal-btn--complete:hover { background:var(--color-success-hover); }
.modal-btn--trash { background:var(--color-notification); border-color:var(--color-notification); }
.modal-btn--trash:hover { background:var(--color-notification-hover); }

.modal-error { color:var(--color-notification); font-size:0.8rem; margin-top:0.5rem; display:none; }
.modal-error.visible { display:block; }

/* ========================================
   Resolve Action Dialog
   ======================================== */

.resolve-dialog { max-width:540px; }

.resolve-action-title {
  font-size:0.92rem;
  font-weight:600;
  color:var(--color-text);
  padding:0.75rem 1rem;
  background:var(--color-surface-offset);
  border-radius:var(--radius-md);
  margin-bottom:1.25rem;
  line-height:1.4;
}

.resolve-outcomes {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0.5rem;
}

.resolve-outcome-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.25rem;
  padding:0.7rem 0.5rem;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  cursor:pointer;
  transition:all 150ms ease;
  text-align:center;
}
.resolve-outcome-btn:hover {
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
}
.resolve-outcome-btn--active {
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  box-shadow:0 0 0 2px var(--color-primary-highlight);
}

.resolve-outcome-icon {
  font-size:1.3rem;
  line-height:1;
}
.resolve-outcome-label {
  font-size:0.8rem;
  font-weight:650;
  color:var(--color-text);
}
.resolve-outcome-desc {
  font-size:0.68rem;
  color:var(--color-text-muted);
  line-height:1.3;
}

.resolve-notes {
  min-height:72px;
  resize:vertical;
}

.resolve-confirm-btn {
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.resolve-confirm-btn:hover {
  background:var(--color-primary-hover);
}

/* Responsive: stack outcome buttons on small screens */
@media (max-width: 480px) {
  .resolve-outcomes {
    grid-template-columns:1fr 1fr;
  }
}

/* Dark mode overrides for resolve dialog */
[data-theme="dark"] .resolve-action-title {
  background:var(--color-surface-offset);
}
[data-theme="dark"] .resolve-outcome-btn {
  background:var(--color-surface-2);
  border-color:var(--color-border);
}
[data-theme="dark"] .resolve-outcome-btn:hover {
  border-color:var(--color-primary);
  background:rgba(1, 105, 111, 0.15);
}
[data-theme="dark"] .resolve-outcome-btn--active {
  border-color:var(--color-primary);
  background:rgba(1, 105, 111, 0.2);
  box-shadow:0 0 0 2px rgba(1, 105, 111, 0.15);
}

/* Free-text inbox input */
.inbox-input-area { margin-top:0.75rem; }
.inbox-input-row {
  display:flex; gap:0.5rem; align-items:center;
}
.inbox-text-input {
  flex:1;
  padding:0.55rem 0.85rem;
  border:1px solid var(--color-divider);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:0.88rem;
  font-family:var(--font-body, 'General Sans', sans-serif);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
  outline:none;
}
.inbox-text-input:focus {
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary-highlight);
}
.inbox-text-input::placeholder {
  color:var(--color-text-muted);
  font-size:0.82rem;
  opacity:0.7;
}
.inbox-text-input:disabled {
  opacity:0.5; cursor:not-allowed;
}
.inbox-send-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-md);
  background:var(--color-primary); color:#fff; border:none;
  cursor:pointer; flex-shrink:0;
  transition:background 0.15s ease, transform 0.1s ease;
}
.inbox-send-btn:hover { background:var(--color-primary-hover, #0f766e); transform:scale(1.04); }
.inbox-send-btn:active { transform:scale(0.96); }
.inbox-send-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.inbox-input-error {
  color:var(--color-notification); font-size:0.78rem; margin-top:0.35rem;
  display:none;
}
.inbox-input-error.visible { display:block; }

/* Queued state for inbox cards */
.inbox-card--queued { border-left:3px solid var(--color-success); opacity:0.7; }
.inbox-card--queued .inbox-actions-full { display:none; }
.inbox-card--queued .inbox-input-area { display:none; }
.queued-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; background:var(--color-success-highlight); color:var(--color-success); border-radius:var(--radius-md); font-size:0.85rem; font-weight:600; }

/* Queued banner */
.queue-banner { padding:0.75rem 1rem; background:var(--color-primary-highlight); border-radius:var(--radius-md); margin-bottom:1rem; font-size:0.85rem; color:var(--color-primary); display:flex; align-items:center; gap:0.5rem; }

/* Follow-up flags on waiting cards */
.follow-up-flag { padding:0.5rem 0.75rem; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:600; margin-top:0.5rem; display:flex; align-items:center; gap:0.4rem; }
.follow-up-flag--overdue { background:var(--color-notification-highlight, rgba(239,68,68,0.1)); color:var(--color-notification); border-left:3px solid var(--color-notification); }
.follow-up-flag--nudge { background:var(--color-warning-highlight, rgba(245,158,11,0.08)); color:var(--color-warning, #b45309); border-left:3px solid var(--color-warning, #d97706); }
.follow-up-flag-text { flex:1; }

.waiting-card--overdue { border-left:3px solid var(--color-notification); }
.waiting-card--nudge { border-left:3px solid var(--color-warning, #d97706); }
.waiting-card--queued { border-left:3px solid var(--color-success); opacity:0.7; }

/* Follow-up action button */
.inbox-action-btn--followup { background:var(--color-orange, #ea580c); color:#fff; border-color:var(--color-orange, #ea580c); }
.inbox-action-btn--followup:hover { background:var(--color-orange-hover, #c2410c); border-color:var(--color-orange-hover, #c2410c); }

/* Mark Received action button */
.inbox-action-btn--received { background:var(--color-success); color:#fff; border-color:var(--color-success); }
.inbox-action-btn--received:hover { background:var(--color-success-hover); border-color:var(--color-success-hover); }
.inbox-action-btn--received:disabled { opacity:0.6; cursor:not-allowed; }

/* Follow-up modal confirm button */
.modal-btn--followup { background:var(--color-orange, #ea580c); border-color:var(--color-orange, #ea580c); }
.modal-btn--followup:hover { background:var(--color-orange-hover, #c2410c); }

/* Calendar subsection titles */
.subsection-title { font-family:var(--font-heading, 'General Sans', sans-serif); font-size:0.95rem; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:0.75rem 0 0.5rem; padding-bottom:0.25rem; border-bottom:1px solid var(--color-divider); }

/* Conflict flags on calendar cards */
.conflict-flag { padding:0.4rem 0.65rem; border-radius:var(--radius-sm, 4px); font-size:0.8rem; font-weight:500; margin-top:0.4rem; background:rgba(245,158,11,0.08); color:var(--color-warning, #b45309); border-left:3px solid var(--color-warning, #d97706); }
.conflict-flag--exercise { background:rgba(239,68,68,0.07); color:var(--color-notification, #dc2626); border-left-color:var(--color-notification, #dc2626); }
.inbox-card--conflict { border-left:3px solid var(--color-warning, #d97706); }

/* Conflict recommendations summary */
.conflicts-summary { margin:1rem 0; padding:1rem; background:var(--color-surface-offset); border-radius:var(--radius-md, 8px); border:1px solid var(--color-divider); }
.conflicts-title { font-size:0.9rem; font-weight:600; color:var(--color-warning, #b45309); margin:0 0 0.75rem; }
.conflict-rec { padding:0.5rem 0; border-bottom:1px solid var(--color-divider); }
.conflict-rec:last-child { border-bottom:none; }
.conflict-rec-events { font-size:0.8rem; font-weight:600; color:var(--color-text); margin-bottom:0.25rem; }
.conflict-rec-text { font-size:0.8rem; color:var(--color-text-muted); }

/* Dark mode overrides */
[data-theme="dark"] .modal-card { background:var(--color-surface); }
[data-theme="dark"] .modal-input, [data-theme="dark"] .modal-select, [data-theme="dark"] .modal-textarea { background:var(--color-surface-2); border-color:var(--color-border); color:var(--color-text); }
[data-theme="dark"] .modal-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bab9b4' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); }
[data-theme="dark"] .follow-up-flag--overdue { background:rgba(239,68,68,0.15); }
[data-theme="dark"] .follow-up-flag--nudge { background:rgba(245,158,11,0.12); }
[data-theme="dark"] .conflict-flag { background:rgba(245,158,11,0.12); }
[data-theme="dark"] .conflict-flag--exercise { background:rgba(239,68,68,0.12); }
[data-theme="dark"] .conflicts-summary { background:var(--color-surface-2); }

/* ===========================================
   TODAY'S FOCUS — Phase 1
   =========================================== */

.focus-section {
  margin-bottom: var(--space-6);
}

.focus-section > .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.focus-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

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

.focus-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive),
              opacity var(--transition-interactive),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.focus-card:hover {
  border-color: var(--color-primary-highlight);
  background: var(--color-surface-2);
}

.focus-card--overdue {
  border-left: 4px solid var(--color-notification);
}

.focus-card--today {
  border-left: 4px solid var(--color-primary);
}

.focus-card--completed {
  opacity: 0.5;
  background: var(--color-surface-offset);
}

.focus-card--completed .focus-card-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.focus-card-checkbox {
  flex-shrink: 0;
  padding-top: 2px;
}

.focus-check-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-interactive);
}

.focus-check-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.focus-check-btn--done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.focus-check-btn--done:hover {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.focus-card-body {
  flex: 1;
  min-width: 0;
}

.focus-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.focus-card-title .notion-link {
  color: inherit;
  text-decoration: none;
}

.focus-card-title .notion-link:hover {
  color: var(--color-primary);
}

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

.focus-meta-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.focus-meta-text.overdue {
  color: var(--color-notification);
  font-weight: 600;
}

.focus-meta-text.due-today {
  color: var(--color-primary);
  font-weight: 600;
}

.focus-meta-project {
  padding: 2px 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
}

.focus-see-all {
  margin-top: var(--space-3);
  text-align: center;
}

.focus-see-all-btn {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}

.focus-see-all-btn:hover {
  background: var(--color-primary-highlight);
}

.focus-queue-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-success-highlight);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 500;
  text-align: center;
}

/* Completed row strikethrough in full table */
.row--completed td {
  text-decoration: line-through;
  opacity: 0.5;
}
.row--completed .td-done {
  text-decoration: none;
}

/* Blocked row (waiting on dependency) */
.row--blocked td {
  opacity: 0.5;
}
.row--blocked .td-done {
  opacity: 1;
}
.blocked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warning);
}
.blocked-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Next Actions table check button */
.th-done,
.td-done {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  padding: var(--space-1) var(--space-2) !important;
}

.na-check-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-interactive);
  padding: 0;
  vertical-align: middle;
}

.na-check-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.na-check-btn--done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.na-check-btn--done:hover {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

[data-theme="dark"] .na-check-btn {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

/* Dark mode adjustments for focus */
[data-theme="dark"] .focus-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .focus-card:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary-highlight);
}

[data-theme="dark"] .focus-card--completed {
  background: var(--color-surface-offset);
}

[data-theme="dark"] .focus-check-btn {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="dark"] .focus-queue-banner {
  background: rgba(109, 170, 69, 0.12);
}

[data-theme="dark"] .focus-meta-project {
  background: var(--color-surface-offset-2);
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
  .focus-card {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .focus-card-meta {
    gap: var(--space-1);
  }
}

/* ============================================================
 * NEW FEATURES — Local SQLite Migration
 * ============================================================ */

/* --- Item Link (replaces Notion links) --- */
.item-link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-border);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.item-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Done Badge (replaces queued badge) --- */
.done-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--color-success-bg, #ecfdf5);
  color: var(--color-success, #059669);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
}
[data-theme="dark"] .done-badge {
  background: rgba(5, 150, 105, 0.15);
  color: #6ee7b7;
}

/* --- Quick Add Bar --- */
.quick-add-bar {
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}
.quick-add-inner {
  display: flex;
  gap: 0.5rem;
  max-width: 720px;
}
.quick-add-input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.quick-add-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.quick-add-btn {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-add-btn:hover { opacity: 0.85; }
.quick-add-feedback {
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  min-height: 1.25rem;
  max-width: 720px;
}
.quick-add-feedback--success { color: var(--color-success, #059669); }
.quick-add-feedback--error { color: var(--color-danger, #dc2626); }
.quick-add-feedback--pending { color: var(--color-muted); }

/* --- Do It Now Button --- */
.inbox-do-it-now {
  margin-bottom: 0.5rem;
}
.inbox-action-btn--doitnow {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.inbox-action-btn--doitnow:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* --- Stuck Projects Alert --- */
.stuck-projects-alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin: 0 1rem 1rem;
  border-radius: 0.625rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}
[data-theme="dark"] .stuck-projects-alert {
  background: rgba(252, 211, 77, 0.1);
  border-color: rgba(252, 211, 77, 0.25);
  color: #fcd34d;
}
.stuck-projects-icon { font-size: 1.25rem; flex-shrink: 0; }
.stuck-projects-text { font-size: 0.875rem; line-height: 1.5; }

/* --- Activated Someday/Maybe Alert --- */
.activated-someday-alert {
  padding: 1rem 1.25rem;
  margin: 0 1rem 1rem;
  border-radius: 0.625rem;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
}
[data-theme="dark"] .activated-someday-alert {
  background: rgba(196, 181, 253, 0.1);
  border-color: rgba(196, 181, 253, 0.25);
  color: #c4b5fd;
}
.activated-someday-icon { font-size: 1.25rem; margin-bottom: 0.25rem; }
.activated-someday-text { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }
.activated-someday-list { display: flex; flex-direction: column; gap: 0.5rem; }
.activated-someday-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}
.activated-someday-title { font-weight: 600; }
.activated-someday-date { color: inherit; opacity: 0.7; }

/* --- Detail Popup --- */
.detail-popup-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.detail-popup-backdrop.active {
  display: flex;
}
.detail-popup-card {
  background: var(--color-surface);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
}
.detail-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.detail-popup-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.detail-popup-body {
  padding: 1rem 1.5rem 1.5rem;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row label {
  font-weight: 600;
  color: var(--color-muted);
  min-width: 120px;
  flex-shrink: 0;
}
.detail-value {
  color: var(--color-text);
  text-align: right;
}
.detail-row--full {
  flex-direction: column;
  gap: 0.5rem;
}
.detail-value--content {
  text-align: left;
  white-space: pre-wrap;
  font-size: 0.8125rem;
  line-height: 1.6;
  background: var(--color-bg);
  padding: 0.75rem;
  border-radius: 0.375rem;
}

/* --- Meeting Notes Editor --- */
.note-editor-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.note-editor-backdrop.active {
  display: flex;
}
.note-editor-card {
  background: var(--color-surface);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.note-editor-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
}
.note-editor-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}
.note-editor-status {
  font-size: 0.75rem;
  color: var(--color-muted);
}
#note-editor-textarea {
  min-height: 400px;
}
.note-editor-card .EasyMDEContainer {
  border: none;
}
.note-editor-card .CodeMirror {
  border: none;
  border-top: 1px solid var(--color-border);
  font-family: inherit;
  font-size: 0.875rem;
  min-height: 400px;
}
[data-theme="dark"] .note-editor-card .CodeMirror {
  background: var(--color-surface);
  color: var(--color-text);
}
[data-theme="dark"] .note-editor-card .CodeMirror .CodeMirror-cursor {
  border-left-color: var(--color-text);
}
[data-theme="dark"] .note-editor-card .editor-toolbar {
  background: var(--color-bg);
  border-color: var(--color-border);
}
[data-theme="dark"] .note-editor-card .editor-toolbar button {
  color: var(--color-muted) !important;
}
[data-theme="dark"] .note-editor-card .editor-toolbar button:hover {
  background: var(--color-surface);
}
[data-theme="dark"] .note-editor-card .editor-preview {
  background: var(--color-surface);
  color: var(--color-text);
}
[data-theme="dark"] .note-editor-card .editor-toolbar.fullscreen,
[data-theme="dark"] .note-editor-card .CodeMirror-fullscreen {
  background: var(--color-bg);
}

/* --- Meeting Notes Toolbar --- */
.meeting-notes-toolbar {
  margin-bottom: 0.75rem;
}
.meeting-note-new-btn {
  padding: 0.5rem 1rem;
  border: 1.5px dashed var(--color-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.meeting-note-new-btn:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 20, 184, 166), 0.05);
}

/* === FOCUS MODE FILTER BAR (Improvement 2) === */
.focus-filter-bar {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.focus-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.focus-filter-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.focus-filter-clear {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.focus-filter-clear:hover { color: var(--color-text); }

.focus-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.focus-filter-group:last-child { margin-bottom: 0; }

.focus-filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 4.5rem;
}

.focus-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.focus-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.focus-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.focus-chip--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* === INLINE FORM (Improvement 5: Meeting Note) === */
.inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.inline-form-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s;
}
.inline-form-input:focus {
  border-color: var(--color-primary);
}
.inline-form-actions {
  display: flex;
  gap: var(--space-2);
}

/* === API CONFIGURATION & SETUP MODALS === */

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

.config-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.config-toggle:hover {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

.setup-modal,
.config-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.setup-modal-content,
.config-modal-content {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
}

.setup-modal-content h2,
.config-modal-content h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.setup-modal-content p,
.config-modal-content p {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.setup-form-group,
.config-form-group {
  margin-bottom: var(--space-4);
}

.setup-form-group label,
.config-form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.setup-form-group input,
.config-form-group input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.setup-form-group input:focus,
.config-form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

.setup-form-actions,
.config-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.setup-btn-save,
.config-btn-save {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.setup-btn-save:hover,
.config-btn-save:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.setup-btn-save:active,
.config-btn-save:active {
  transform: translateY(0);
}

.config-btn-cancel {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.config-btn-cancel:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.setup-error,
.config-error {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid #dc3545;
  border-radius: var(--radius-md);
  color: #dc3545;
  font-size: var(--text-sm);
}

.error-state {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.error-state p {
  margin-bottom: var(--space-3);
}

.error-state button {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.error-state button:hover {
  background: var(--color-primary-hover);
}