/* reset.css */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 14px;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

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

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* tokens.css */
:root {
  /* Background */
  --color-bg-primary: #0a0a0f;
  --color-bg-secondary: #0f1019;
  --color-bg-elevated: #151621;
  --color-bg-hover: #1a1b2e;
  --color-bg-active: #1f2040;

  /* Surface */
  --color-surface: #073763;
  --color-surface-hover: #0a4a80;

  /* Accent */
  --color-accent: #4a7cf5;
  --color-accent-hover: #6090ff;

  /* Brand */
  --color-brand-github: #2da44e;
  --color-brand-gitlab: #fc6d26;
  --color-accent-muted: rgba(100, 120, 160, 0.15);

  /* Text */
  --color-text-primary: #e8e8ed;
  --color-text-secondary: #8b8b9e;
  --color-text-tertiary: #5a5a70;
  --color-text-inverse: #0a0a0f;

  /* Border */
  --color-border: #252538;
  --color-border-hover: #353550;
  --color-border-focus: var(--color-accent);

  /* Semantic */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* Priority */
  --color-priority-1: #f87171; /* urgent */
  --color-priority-2: #fbbf24; /* high */
  --color-priority-3: #60a5fa; /* medium */
  --color-priority-4: #8b8b9e; /* low */

  /* Status */
  --color-status-pending: #8b8b9e;
  --color-status-in-progress: #60a5fa;
  --color-status-completed: #34d399;
  --color-status-cancelled: #5a5a70;

  /* Task type indicators */
  --color-milestone: #14b8a6;
  --color-milestone-bg: rgba(20, 184, 166, 0.2);
  --color-epic: #a0a0af;
  --color-epic-bg: rgba(160, 160, 175, 0.2);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Control height — shared by inputs, selects, button groups */
  --control-height: 34px;

  /* Typography - larger base for modern feel */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.65rem;
  --text-3xl: 2.25rem;

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

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 56px;
  --header-height: 56px;
  --content-max-width: 900px;

  /* Z-index */
  --z-sidebar: 100;
  --z-header: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Calendar popup (dark) */
  --calendar-bg: rgba(15, 16, 25, 0.35);
  --calendar-blur: blur(6px);
}

/* Light mode overrides */
[data-theme="light"] {
  /* Background */
  --color-bg-primary: #f8f9fa;
  --color-bg-secondary: #f0f1f3;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #e9ecef;
  --color-bg-active: #dee2e6;

  /* Surface */
  --color-surface: #dbe4ff;
  --color-surface-hover: #bac8ff;

  /* Accent */
  --color-accent: #5a6d8a;
  --color-accent-hover: #4a5d7a;
  --color-accent-muted: rgba(90, 109, 138, 0.12);

  /* Text */
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #4a4a6a;
  --color-text-tertiary: #7a7a9a;
  --color-text-inverse: #ffffff;

  /* Border */
  --color-border: #dee2e6;
  --color-border-hover: #ced4da;
  --color-border-focus: var(--color-accent);

  /* Modal */
  --modal-backdrop-bg: rgba(255, 255, 255, 0.2);
  --modal-bg: rgba(255, 255, 255, 0.4);
  --modal-blur: blur(12px);

  /* Calendar popup */
  --calendar-bg: rgba(255, 255, 255, 0.35);
  --calendar-blur: blur(6px);

  /* Semantic */
  --color-success: #0d9488;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* Priority */
  --color-priority-1: #dc2626;
  --color-priority-2: #d97706;
  --color-priority-3: #2563eb;
  --color-priority-4: #7a7a9a;

  /* Status */
  --color-status-pending: #7a7a9a;
  --color-status-in-progress: #2563eb;
  --color-status-completed: #0d9488;
  --color-status-cancelled: #adb5bd;

  /* Task type indicators */
  --color-milestone: #0d9488;
  --color-milestone-bg: rgba(13, 148, 136, 0.15);
  --color-epic: #5a5a6a;
  --color-epic-bg: rgba(90, 90, 106, 0.15);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* System preference detection */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Background */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #f0f1f3;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #e9ecef;
    --color-bg-active: #dee2e6;

    /* Surface */
    --color-surface: #dbe4ff;
    --color-surface-hover: #bac8ff;

    /* Accent */
    --color-accent: #5a6d8a;
    --color-accent-hover: #4a5d7a;
    --color-accent-muted: rgba(90, 109, 138, 0.12);

    /* Text */
    --color-text-primary: #1a1a2e;
    --color-text-secondary: #4a4a6a;
    --color-text-tertiary: #7a7a9a;
    --color-text-inverse: #ffffff;

    /* Border */
    --color-border: #dee2e6;
    --color-border-hover: #ced4da;
    --color-border-focus: var(--color-accent);

    /* Modal */
    --modal-backdrop-bg: rgba(255, 255, 255, 0.2);
    --modal-bg: rgba(255, 255, 255, 0.4);
    --modal-blur: blur(12px);

    /* Calendar popup */
    --calendar-bg: rgba(255, 255, 255, 0.65);
    --calendar-blur: blur(16px);

    /* Semantic */
    --color-success: #0d9488;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Priority */
    --color-priority-1: #dc2626;
    --color-priority-2: #d97706;
    --color-priority-3: #2563eb;
    --color-priority-4: #7a7a9a;

    /* Status */
    --color-status-pending: #7a7a9a;
    --color-status-in-progress: #2563eb;
    --color-status-completed: #0d9488;
    --color-status-cancelled: #adb5bd;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
}

/* global.css */
body {
  font-family: var(--font-sans);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

#app {
  min-height: 100vh;
}

::selection {
  background: var(--color-accent-muted);
  color: var(--color-text-primary);
}

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

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

/* Typography helpers */
.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

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

.mono {
  font-family: var(--font-mono);
}

/* layout.css */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sidebar);
  transition: width var(--transition-slow), transform var(--transition-slow);
}

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

.sidebar.collapsed .sidebar-header {
  padding: 0;
  justify-content: center;
}

.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
}

.sidebar-logo {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}

.collapsed-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.collapsed-toggle:hover {
  color: var(--color-accent-hover);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: var(--space-3);
}

.sidebar-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-2) var(--space-1);
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}

.sidebar-section-label:hover {
  color: var(--color-text-secondary);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  min-height: 40px;
}

.sidebar-link:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.sidebar-link.active {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.sidebar-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sidebar-ws-select {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
  cursor: pointer;
  outline: none;
}
.sidebar-ws-select:focus {
  border-color: var(--color-accent);
}
.sidebar-ws-select:disabled {
  opacity: 0.5;
  cursor: wait;
}

.sidebar-ws-abbr {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-1);
  cursor: default;
}

.sidebar-profile-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--color-text-secondary);
}
.sidebar-profile-btn:hover {
  background: var(--color-bg-hover);
}
.sidebar-profile-btn.active {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}

.sidebar-profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

.sidebar-profile-label {
  font-size: var(--text-sm);
}

.sidebar.collapsed .sidebar-profile-btn {
  justify-content: center;
  padding: var(--space-1);
}

.main-area {
  flex: 1;
  margin-left: var(--sidebar-width);
  width: calc(100vw - var(--sidebar-width));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition-slow), width var(--transition-slow);
}

.sidebar.collapsed ~ .main-area,
.main-area.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100vw - var(--sidebar-collapsed-width));
}

.header {
  height: var(--header-height);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-content {
  flex: 1;
  padding: var(--space-6) var(--space-8);
  width: 100%;
}

@media (max-width: 1200px) {
  .page-content {
    padding: var(--space-5) var(--space-6);
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: var(--space-4);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .main-area {
    margin-left: 0 !important;
    width: 100vw !important;
  }

  .header {
    height: auto;
    min-height: var(--header-height);
    padding: var(--space-2) var(--space-4);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sidebar) - 1);
  }
}

/* flatpickr.css */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/* flatpickr-theme.css */
/* Flatpickr theme overrides */
.flatpickr-calendar {
  background: var(--calendar-bg, var(--color-bg-elevated)) !important;
  backdrop-filter: var(--calendar-blur, none);
  -webkit-backdrop-filter: var(--calendar-blur, none);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg) !important;
  font-family: inherit;
}

.flatpickr-months, .flatpickr-weekdays {
  background: transparent;
}

.flatpickr-month {
  color: var(--color-text-primary);
  fill: var(--color-text-primary);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

span.flatpickr-weekday {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.flatpickr-day {
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
}

.flatpickr-day:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-bg-hover);
}

.flatpickr-day.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.flatpickr-day.today {
  border-color: var(--color-accent);
}

.flatpickr-day.today:hover {
  background: var(--color-accent);
  color: white;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-text-tertiary);
}

.flatpickr-time {
  border-top: 1px solid var(--color-border) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--color-text-primary) !important;
  background: transparent !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--color-bg-hover) !important;
}

.numInputWrapper:hover {
  background: var(--color-bg-hover) !important;
}

.numInputWrapper span:hover {
  background: var(--color-bg-active) !important;
}

.numInputWrapper span {
  border-color: var(--color-border) !important;
}

.numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--color-text-secondary) !important;
}

.numInputWrapper span.arrowDown:after {
  border-top-color: var(--color-text-secondary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--color-text-secondary);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: var(--color-text-primary);
}

/* Remove default box shadows */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

/* components.css */
/* Button - larger touch targets */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.2;
  min-height: var(--control-height);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent-muted);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-text-primary);
}

.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-color: var(--color-accent);
}

.btn-secondary {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.btn-ghost {
  color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.btn-danger {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}

.btn-danger-outline {
  background: transparent;
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-danger-outline:hover:not(:disabled) {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}

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

.btn-icon {
  padding: var(--space-1);
  width: 28px;
  height: 28px;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Input - larger for touch */
.input {
  width: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: var(--control-height);
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
  outline: none;
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

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

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

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

/* Select - larger for touch */
.select {
  appearance: none;
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  background: var(--color-bg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b9e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  min-height: 40px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
  outline: none;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 4px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.2;
  text-transform: capitalize;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.badge-default {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

.badge-accent {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.badge-success {
  background: rgba(52, 211, 153, 0.15);
  color: var(--color-success);
}

.badge-warning {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.badge-error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--color-error);
}

/* Status colors */
.badge-completed { background: rgba(34, 197, 94, 0.13); color: #22c55e; }
.badge-in-progress { background: rgba(96, 165, 250, 0.13); color: #60a5fa; }
.badge-pending { background: rgba(139, 139, 158, 0.13); color: #8b8b9e; }
.badge-cancelled { background: rgba(90, 90, 112, 0.13); color: #5a5a70; }

/* Priority colors */
.badge-urgent { background: rgba(248, 113, 113, 0.13); color: #f87171; }
.badge-high { background: rgba(251, 191, 36, 0.13); color: #fbbf24; }
.badge-medium { background: rgba(96, 165, 250, 0.13); color: #60a5fa; }
.badge-low { background: rgba(139, 139, 158, 0.13); color: #8b8b9e; }

/* Project badge */
.badge-project { background: rgba(99, 102, 241, 0.13); color: var(--color-primary); }

/* Status/priority toggle pills (used in task list filters and profile defaults) */
.status-pill {
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.15s;
}

.status-pill:hover:not(.active) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
}

.status-pill-pending.active { background: rgba(139, 139, 158, 0.15); color: var(--color-status-pending); border-color: var(--color-status-pending); }
.status-pill-in_progress.active { background: rgba(59, 130, 246, 0.15); color: #2563eb; border-color: #3b82f6; }
.status-pill-completed.active { background: rgba(34, 197, 94, 0.15); color: #16a34a; border-color: #22c55e; }
.status-pill-cancelled.active { background: rgba(107, 114, 128, 0.15); color: #4b5563; border-color: #6b7280; }

.priority-pill-1.active { background: rgba(239, 68, 68, 0.15); color: #dc2626; border-color: #ef4444; }
.priority-pill-2.active { background: rgba(245, 158, 11, 0.15); color: #b45309; border-color: #f59e0b; }
.priority-pill-3.active { background: rgba(59, 130, 246, 0.15); color: #2563eb; border-color: #3b82f6; }
.priority-pill-4.active { background: rgba(107, 114, 128, 0.15); color: #4b5563; border-color: #6b7280; }

.type-pill-task.active { background: rgba(139, 139, 158, 0.15); color: var(--color-text-secondary); border-color: var(--color-text-tertiary); }
.type-pill-epic.active { background: var(--color-epic-bg); color: var(--color-epic); border-color: var(--color-epic); }
.type-pill-milestone.active { background: var(--color-milestone-bg); color: var(--color-milestone); border-color: var(--color-milestone); }

.tag-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 15%),
    var(--modal-bg, transparent);
  backdrop-filter: var(--modal-blur, none);
  -webkit-backdrop-filter: var(--modal-blur, none);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
}

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

.modal-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
}

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

.modal-wide {
  max-width: 740px;
  height: 92vh;
}

.modal-body-scroll {
  padding: var(--space-3) var(--space-4);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

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

@media (max-width: 480px) {
  .modal-wide {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  min-width: 250px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: toast-in 200ms ease;
}

.toast-error {
  border-left: 3px solid var(--color-error);
}

.toast-success {
  border-left: 3px solid var(--color-success);
}

.toast-info {
  border-left: 3px solid var(--color-info);
}

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

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.spinner-lg {
  width: 24px;
  height: 24px;
}

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

/* Block — the universal visual frame.
   Set --row-accent on element or ancestor to customize the accent color.
   Defaults to --color-accent when --row-accent is not set. */
.block,
.empty-state {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--row-accent, var(--color-accent));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--row-accent, var(--color-accent)) 8%, transparent) 0%, transparent 15%),
    var(--block-bg, transparent);
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

/* Empty state layout — inherits visual frame from .block,.empty-state above */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-secondary);
  text-align: center;
  gap: var(--space-4);
  margin: 0;
}

.empty-state-icon {
  font-size: 3.5rem;
  opacity: 0.6;
  margin-bottom: var(--space-2);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.empty-state-description {
  font-size: var(--text-sm);
  max-width: 300px;
  line-height: 1.6;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.pagination-info {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-left: auto;
}

/* Checkbox - larger for touch */
.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.checkbox:hover {
  border-color: var(--color-border-hover);
  transform: scale(1.05);
}

.checkbox:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Task-completion checkbox: green border + tinted fill + green checkmark, matching iOS client */
.task-checkbox .checkbox:checked {
  background-color: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: var(--color-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.task-checkbox .checkbox:checked:hover {
  border-color: var(--color-success);
}

/* Block list — container for .block items with spacing */
.block-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Hover lift — opt-in hover animation for interactive elements */
.hover-lift {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}


/* Table-like rows - more spacious */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  min-height: 52px;
}

.list-row:last-child,
.list-row:last-of-type {
  border-bottom: none;
}

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

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

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

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

.color-swatch.selected {
  border-color: var(--color-text-primary);
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  flex-wrap: wrap;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* Textarea */
textarea.input {
  min-height: 80px;
  resize: vertical;
}

/* Confirm dialog */
.confirm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Metadata editor */
.metadata-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Section titles (used in panels and forms) */
.section-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* Section header (title + action button row) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.section-header .section-title {
  margin-bottom: 0;
}

/* Section description */
.section-desc {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2) 0;
}

.metadata-row .input {
  flex: 1;
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Priority icon */
.priority-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: var(--font-bold);
}

/* Date picker */
.date-input,
.timespan-input[type="date"] {
  color-scheme: dark;
}

[data-theme="light"] .date-input,
[data-theme="light"] .timespan-input[type="date"] {
  color-scheme: light;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

.tab {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

.tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

/* Error state */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-secondary);
  text-align: center;
  gap: var(--space-3);
}

.error-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.15);
  color: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.error-state-message {
  font-size: var(--text-sm);
  max-width: 400px;
}

/* Loading state */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  gap: var(--space-3);
}

.loading-message {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Keyboard shortcuts */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

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

.shortcut-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* Form layout */
.form-section {
  margin-bottom: var(--space-6);
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h2 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

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

/* Loading container */
.loading-container {
  display: flex;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-bg-tertiary, #1e1e2e);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--color-text-secondary);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle input:checked + .toggle-slider {
  background: var(--color-accent, #6366f1);
}

.toggle input:checked + .toggle-slider::after {
  transform: translateX(20px);
  background: #fff;
}

.toggle input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Feature toggle row */
.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.feature-info {
  flex: 1;
}

.feature-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

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

/* Panel — subtle frame without accent left border.
   Use for static content, settings forms, info bars, legends. */
.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-sm);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--row-accent, var(--color-accent)) 8%, transparent) 0%, transparent 15%),
    var(--block-bg, transparent);
}

/* Info bar — horizontal flex layout panel for stats, legends, role info. */
.info-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

/* Inline form — horizontal form layout with wrapping fields */
.inline-form {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
}

/* Form group — vertical label + input pair inside .inline-form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 200px;
}

/* Select small — compact select for inline use */
.select-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  min-height: 36px;
}

/* Member row — shared across member lists */
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 64px;
}

.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.member-name {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  font-size: var(--text-base);
}

.member-email {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.member-row-clickable {
  cursor: pointer;
}

.member-role {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-transform: capitalize;
  flex-shrink: 0;
  min-width: 68px;
  text-align: right;
  color: var(--color-text-secondary);
}

.member-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

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

.member-actions .select {
  width: auto;
  min-width: 0;
}

.member-actions-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .member-row {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* Detail row — key-value pair with label left, value right */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

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

.detail-row-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.detail-row-value {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Permission badge variants */
.perm-badge {
  font-weight: 500;
}

.perm-badge-full-access {
  background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-blue));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.perm-badge-full {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--color-success, #22c55e);
  border: 1px solid var(--color-success, #22c55e);
}

.perm-badge-read {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
  border: 1px solid var(--color-info, #3b82f6);
}

.perm-badge-partial {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Ghost danger — tertiary text, red on hover */
.btn-ghost-danger {
  color: var(--color-text-tertiary);
}

.btn-ghost-danger:hover {
  color: var(--color-error);
}

/* Masked value (for secrets/tokens) */
.masked-value {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary, var(--bg-tertiary));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: monospace;
  letter-spacing: 0.15em;
}

/* Markdown view */
.markdown-view {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-primary);
  word-wrap: break-word;
}

.markdown-view h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: var(--space-6) 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.markdown-view h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: var(--space-5) 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.markdown-view h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: var(--space-4) 0 var(--space-2);
}

.markdown-view h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: var(--space-4) 0 var(--space-2);
}

.markdown-view h1:first-child,
.markdown-view h2:first-child,
.markdown-view h3:first-child,
.markdown-view h4:first-child {
  margin-top: 0;
}

.markdown-view p {
  margin: 0 0 var(--space-3);
}

.markdown-view p:last-child {
  margin-bottom: 0;
}

.markdown-view a {
  color: var(--color-accent);
  text-decoration: none;
}

.markdown-view a:hover {
  text-decoration: underline;
}

.markdown-view ul,
.markdown-view ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-6);
}

.markdown-view li {
  margin-bottom: var(--space-1);
}

.markdown-view li > ul,
.markdown-view li > ol {
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.markdown-view blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-secondary);
}

.markdown-view blockquote p:last-child {
  margin-bottom: 0;
}

.markdown-view pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.markdown-view pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-xs);
}

.markdown-view code {
  background: var(--color-bg-tertiary);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.markdown-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
}

.markdown-view th,
.markdown-view td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
}

.markdown-view th {
  background: var(--color-bg-secondary);
  font-weight: var(--font-semibold);
}

.markdown-view input[type="checkbox"] {
  accent-color: var(--color-accent);
  margin-right: var(--space-1);
}

.markdown-view hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

.markdown-view img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.mermaid-container {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0;
}

.markdown-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.markdown-empty-text {
  color: var(--color-text-tertiary);
  font-style: italic;
  font-size: var(--text-sm);
}

/* Description preview in task form */
.description-preview {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  min-height: 40px;
  transition: border-color var(--transition-fast);
  max-height: 80px;
  overflow: hidden;
  position: relative;
}

.description-preview:hover {
  border-color: var(--color-border-focus);
}

.description-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(transparent, var(--color-bg-primary));
  pointer-events: none;
}

.description-preview-content {
  font-size: var(--text-xs);
  line-height: 1.5;
}

.description-preview-content h1,
.description-preview-content h2,
.description-preview-content h3 {
  font-size: var(--text-sm);
  margin: 0;
}

.description-preview-empty {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* Task description */
.task-description-view { display: flex; flex-direction: column; height: 100%; }
.task-description-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.task-description-actions { display: flex; gap: var(--space-2); }
.task-description-body { flex: 1; overflow-y: auto; }
.task-description-editor { min-height: 400px; font-family: monospace; font-size: var(--text-sm); line-height: 1.6; resize: vertical; }

/* Task description icon — shown on hover in task rows */
.task-desc-icon {
  opacity: 0;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.task-row:hover .task-desc-icon,
.task-row.focused .task-desc-icon {
  opacity: 0.5;
}

.task-desc-icon:hover {
  opacity: 1 !important;
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

/* Task list container */
.task-list {
  position: relative;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1));
}

/* Task rows */
.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  min-height: 52px;
  border-bottom: 1px solid var(--color-border, var(--border));
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
  position: relative;
  z-index: 1;
  background: var(--color-bg-elevated, var(--bg-elevated));
}

/* Hover/focus signals the active row by promoting the priority border
   to white. No translateY — the row stays put so its border-left
   doesn't ride past the task-list's rounded edge. */
.task-row:hover,
.task-row.focused {
  border-left-color: var(--color-text-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 2;
}

.task-row:active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.task-row.selected {
  background: rgba(255, 255, 255, 0.05) !important;
  border-left-color: var(--color-text-primary) !important;
}

.task-row.completed {
  opacity: 0.6;
  border-left-color: transparent !important;
}

.task-row.cancelled {
  opacity: 0.5;
  border-left-color: transparent !important;
}

.task-row.cancelled .task-title-link {
  text-decoration: line-through;
  color: var(--color-text-tertiary);
}

.checkbox-cancelled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-tertiary);
  border: 1.5px solid var(--color-text-tertiary);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}

.checkbox-cancelled:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}

.task-row:first-child {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.task-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  color: var(--color-text-secondary);
  transition: background 0.1s, color 0.1s;
}

.collapse-toggle:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.collapse-icon {
  display: inline-flex;
  font-size: 9px;
  transition: transform 0.15s ease;
}

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

.collapse-spacer {
  width: 20px;
  flex-shrink: 0;
}

.depth-indent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-right: 4px;
}

.tree-arrow {
  color: var(--color-text-tertiary);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
}

.task-checkbox {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.task-calendar-sync {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.8;
}

.task-calendar-sync:hover {
  opacity: 1;
}

.task-sync-badge {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-sync-badge:hover {
  opacity: 1;
  text-decoration: none;
}

.task-sync-github {
  color: var(--color-brand-github);
  background: color-mix(in srgb, var(--color-brand-github) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-github) 27%, transparent);
}

.task-sync-gitlab {
  color: var(--color-brand-gitlab);
  background: color-mix(in srgb, var(--color-brand-gitlab) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-gitlab) 27%, transparent);
}

.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0;
  flex-wrap: wrap;
}

.task-due-inline {
  flex-shrink: 0;
  line-height: 0;
}

.task-title-link {
  display: block;
  font-weight: 500;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary, var(--text-primary));
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}

.task-row:hover .task-title-link,
.task-row.focused .task-title-link {
  color: var(--color-accent-hover, var(--accent-hover));
}

.task-row.completed .task-title-link {
  text-decoration: line-through;
  color: var(--color-text-tertiary, var(--text-secondary));
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-basis: 100%;
}

.milestone-indicator,
.epic-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-right: 4px;
  flex-shrink: 0;
}

.milestone-indicator {
  background: var(--color-milestone-bg);
  color: var(--color-milestone);
}

.epic-indicator {
  background: var(--color-epic-bg);
  color: var(--color-epic);
}

.task-tags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
  cursor: pointer;
}

.task-tags-expanded {
  flex-wrap: wrap;
}

.task-tags-overflow {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: 600;
  cursor: pointer;
}

.task-tag-badge {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  text-transform: none;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

.tag-with-remove {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.tag-remove-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: var(--radius-md);
}

.tag-with-remove:hover .tag-remove-btn {
  opacity: 1;
}

.tag-remove-btn.confirming {
  opacity: 1;
  background: rgba(248, 113, 113, 0.8);
}

/* Tag badge wrapper — enables hover overlay */
.tag-badge-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.tag-hover-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.tag-badge-wrap:hover .tag-hover-overlay {
  display: flex;
}

/* Protected tag (referenced by an issue-sync FilterLabels list).
   Greyed + non-clickable feel; the wrapper still flexes for layout
   but loses the click cursor and dims the chip so the user reads it
   as a system-managed tag rather than a regular removable one. The
   tag-badge component already suppresses the hover-overlay (X) when
   `protected` is set — this stylesheet only covers the visual cue. */
.tag-badge-wrap.tag-badge-protected {
  cursor: not-allowed;
  opacity: 0.6;
  filter: saturate(0.5);
}
.tag-badge-wrap.tag-badge-protected:hover .tag-hover-overlay {
  display: none;
}

/* Filter-mismatch banner shown on a task whose linked external issue
   lost its sync filter label. Yellow because sync is paused, not
   broken — the operator can re-attach by re-adding the label upstream.
   Distinguished from red error toasts. */
.filter-mismatch-banner {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem 0;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--radius-md);
  color: var(--color-text);
  align-items: flex-start;
}
.filter-mismatch-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(251, 191, 36, 0.95);
  flex: 0 0 auto;
}
.filter-mismatch-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
}
.filter-mismatch-title {
  font-weight: 600;
  font-size: var(--text-sm);
}
.filter-mismatch-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.filter-mismatch-link {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.1rem 0;
}
.filter-mismatch-link:hover {
  text-decoration: underline;
}

.task-tag-scoped {
  display: inline-flex;
  align-items: stretch;
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.2;
  white-space: nowrap;
  text-transform: capitalize;
}

.task-tag-category {
  padding: 5px 4px;
  display: inline-flex;
  align-items: center;
}

.task-tag-value {
  padding: 5px 4px;
  display: inline-flex;
  align-items: center;
}

.task-tag-segment {
  padding: 5px 4px;
  display: inline-flex;
  align-items: center;
}

.task-trailing {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 1;
  min-width: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.task-due {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.task-due.overdue {
  color: var(--color-error, #ef4444);
  font-weight: 500;
}

/* Task row — mobile */
@media (max-width: 768px) {
  .task-tags,
  .task-due,
  .task-desc-icon,
  .task-meta {
    display: none;
  }

  .task-trailing {
    gap: var(--space-2);
  }
}

/* Shared panel styles (used by task detail panels and task form) */
.tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.empty-state-small {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

.add-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
}

.add-form .input,
.add-form .select {
  flex: 1;
}

.inline-add-input {
  margin-top: var(--space-1);
}

.inline-add-select {
  max-width: 160px;
}

.hoverable-row .row-action {
  opacity: 0;
  transition: opacity 0.15s;
}

.hoverable-row:hover .row-action {
  opacity: 1;
}

/* Spinner container (promote from scoped) */
.spinner-container {
  display: flex;
  justify-content: center;
  padding: var(--space-8);
}

/* Color dot indicator (tags, selects, status) */
.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Dropdown menu (shared by custom-select, tag-search, etc.) */
/* Popover menu — portal-rendered, never clipped */
.popover-menu {
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
}

/* Menu option item (dropdown items) */
.menu-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.menu-option:hover,
.menu-option.focused {
  background: var(--color-bg-hover);
}

.menu-option.active {
  color: var(--color-accent);
}

/* Button group (toggle pill pattern) */
/* Rocker — segmented toggle control */
.rocker {
  display: flex;
  gap: var(--space-1);
  border-radius: var(--radius-md);
  width: fit-content;
}

.rocker-item {
  padding: var(--space-1) var(--space-3);
  min-height: calc(var(--control-height) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  background: none;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  border-right: none;
  border-left: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rocker-item:first-child {
  border-left: 2px solid transparent;
}

.rocker-item:last-child {
  border-right: 2px solid transparent;
}

.rocker-item:first-child:not(.active):hover {
  background: linear-gradient(90deg, var(--color-accent-muted) 0%, transparent 100%);
  border-left-color: var(--color-accent);
  color: var(--color-accent);
}

.rocker-item:last-child:not(.active):hover {
  background: linear-gradient(270deg, var(--color-accent-muted) 0%, transparent 100%);
  border-right-color: var(--color-accent);
  color: var(--color-accent);
}

.rocker-item:not(:first-child):not(:last-child):not(.active):hover {
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-accent) 20%, transparent) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  color: var(--color-accent);
}

.rocker-item:first-child.active {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  border-left-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.rocker-item:last-child.active {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  border-right-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.rocker-item:not(:first-child):not(:last-child).active {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  color: var(--color-text-primary);
}

/* Action row (save/cancel button groups) */
.action-row {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.action-row--end {
  justify-content: flex-end;
}

/* Cog button with conflict badge */
.cog-btn {
  position: relative;
}

.cog-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-error, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* External (non-Hilo) assignee — display-only, set by issue-sync when the
   GitLab/GitHub assignee has no Hilo account. Visually distinct (muted/italic)
   so it reads as "nobody in Hilo owns this" rather than a real assignee. */
.task-assignee-external {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.85;
}
.external-assignee {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-style: italic;
  padding: 4px 0;
}
.external-assignee-note {
  opacity: 0.7;
  font-size: 0.8em;
}

/* hljs-dark.css */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #c9d1d9;
  background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}