/* ============================================================
   Job Control — Main Stylesheet
   Design system: Linear / Things 3 inspired
   ============================================================ */

/* ---- Design tokens ----------------------------------------- */
:root {
  /* Backgrounds */
  --bg-base:         #F5F5F7;
  --bg-surface:      #FFFFFF;
  --bg-sidebar:      #111111;
  --bg-sidebar-item: transparent;
  --bg-sidebar-hover: rgba(255,255,255,0.07);
  --bg-sidebar-active: rgba(255,255,255,0.12);

  /* Text */
  --text-primary:        #0F0F0F;
  --text-secondary:      #6B6B6B;
  --text-tertiary:       #9B9B9B;
  --text-sidebar:        #D4D4D4;
  --text-sidebar-muted:  #5A5A5A;
  --text-sidebar-active: #FFFFFF;

  /* Accent */
  --accent:       #5B5BD6;
  --accent-hover: #4A4AC0;
  --accent-light: rgba(91,91,214,0.1);

  /* Status */
  --color-active:  #22C55E;
  --color-waiting: #F59E0B;
  --color-done:    #9B9B9B;
  --color-stale:   #EF4444;

  /* Workspace dots */
  --ws-personal: #6366F1;
  --ws-clients:  #0EA5E9;
  --ws-internal: #8B5CF6;

  /* Borders */
  --border:         #E5E5E5;
  --border-sidebar: rgba(255,255,255,0.08);

  /* Layout */
  --sidebar-width: 224px;
  --mobile-nav-h:  60px;
  --content-max:   760px;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
}

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

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

body {
  font-family:    var(--font);
  font-size:      0.9375rem;    /* 15px */
  line-height:    1.6;
  color:          var(--text-primary);
  background:     var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family:      var(--font-mono);
  font-size:        0.8125em;
  background:       rgba(0,0,0,0.06);
  padding:          0.1em 0.35em;
  border-radius:    4px;
}

/* ---- App shell ------------------------------------------------- */
/* Sidebar (hidden on mobile) */
.sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      var(--sidebar-width);
  height:     100vh;
  background: var(--bg-sidebar);
  display:    flex;
  flex-direction: column;
  z-index:    100;
  overflow-y: auto;
}

/* Main content sits to the right of sidebar on desktop */
.app-shell {
  margin-left: var(--sidebar-width);
  min-height:  100vh;
}

.main-content {
  max-width:  var(--content-max);
  margin:     0 auto;
  padding:    48px 32px 80px;
}

/* ---- Sidebar brand -------------------------------------------- */
.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     20px 16px 16px;
  border-bottom: 1px solid var(--border-sidebar);
}

.brand-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--accent);
  flex-shrink:   0;
}

.brand-name {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--text-sidebar-active);
  letter-spacing: 0.01em;
}

/* ---- Sidebar navigation --------------------------------------- */
.sidebar-nav {
  flex:    1;
  padding: 8px 0;
}

.nav-group {
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border-sidebar);
}

.nav-group:last-child { border-bottom: none; }

.nav-group-label {
  font-size:      0.6875rem;    /* 11px */
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-sidebar-muted);
  padding:        8px 16px 4px;
}

.nav-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 12px;
  margin:      1px 8px;
  border-radius: var(--radius-sm);
  font-size:   0.875rem;
  font-weight: 450;
  color:       var(--text-sidebar);
  cursor:      pointer;
  transition:  background 120ms ease, color 120ms ease;
  line-height: 1.4;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color:      var(--text-sidebar-active);
  text-decoration: none;
}

.nav-item.is-active {
  background: var(--bg-sidebar-active);
  color:      var(--text-sidebar-active);
  font-weight: 500;
}

/* Disabled items (future phases) */
.nav-item.is-disabled {
  opacity: 0.45;
  cursor:  default;
  pointer-events: none;
}

/* Nav icons */
.nav-icon {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
  opacity:    0.8;
}

/* Workspace color dots */
.ws-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}

.ws-dot--personal         { background: var(--ws-personal); }
.ws-dot--clients,
.ws-dot--znexus-clients   { background: var(--ws-clients); }
.ws-dot--internal,
.ws-dot--znexus-internal  { background: var(--ws-internal); }

/* ---- Sidebar footer ------------------------------------------ */
.sidebar-footer {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       12px 16px;
  border-top:    1px solid var(--border-sidebar);
}

.sidebar-username {
  font-size:  0.8125rem;
  color:      var(--text-sidebar-muted);
  overflow:   hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  font-size:  0.8125rem;
  color:      var(--text-sidebar-muted);
  cursor:     pointer;
  flex-shrink: 0;
  transition: color 120ms ease;
}

.sidebar-logout-btn:hover {
  color: var(--text-sidebar);
  text-decoration: none;
}

/* ---- Mobile bottom nav --------------------------------------- */
.mobile-nav {
  display: none; /* shown via media query below */
  position: fixed;
  bottom:   0;
  left:     0;
  right:    0;
  height:   var(--mobile-nav-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index:    100;
  align-items: stretch;
}

.mobile-nav-item {
  flex:         1;
  display:      flex;
  flex-direction: column;
  align-items:  center;
  justify-content: center;
  gap:          3px;
  color:        var(--text-secondary);
  border:       none;
  background:   transparent;
  cursor:       pointer;
  font-family:  var(--font);
  padding:      0;
  transition:   color 120ms ease;
  text-decoration: none;
}

.mobile-nav-item.is-active { color: var(--accent); }
.mobile-nav-item:hover     { color: var(--text-primary); text-decoration: none; }

.mobile-nav-icon {
  width:  22px;
  height: 22px;
}

.mobile-nav-label {
  font-size:  0.625rem;   /* 10px */
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mobile-nav-add {
  color:      var(--accent);
  flex:       0 0 56px;
}

.mobile-add-icon {
  font-size:   1.5rem;
  font-weight: 300;
  line-height: 1;
}

/* ---- Page layout components ---------------------------------- */
.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-size:   1.625rem;   /* 26px */
  font-weight: 600;
  color:       var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.page-subtitle {
  margin-top: 4px;
  font-size:  0.9375rem;
  color:      var(--text-secondary);
}

.section {
  margin-top: 40px;
}

.section-title {
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:         var(--text-tertiary);
  margin-bottom: 12px;
}

/* ---- Phase 1 dashboard components ---------------------------- */
.phase-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       28px 28px 24px;
  box-shadow:    var(--shadow-sm);
}

.phase-card__badge {
  display:       inline-block;
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:         var(--accent);
  background:    var(--accent-light);
  padding:       3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.phase-card__title {
  font-size:   1.1875rem;
  font-weight: 600;
  color:       var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.phase-card__body {
  font-size:    0.9375rem;
  color:        var(--text-secondary);
  line-height:  1.65;
  margin-bottom: 20px;
}

/* Checklist */
.checklist {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}

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

.checklist__item::before {
  content:       '';
  width:         18px;
  height:        18px;
  border-radius: 50%;
  border:        1.5px solid var(--border);
  flex-shrink:   0;
  background:    var(--bg-base);
}

.checklist__item--done { color: var(--text-primary); }

.checklist__item--done::before {
  background: var(--color-active);
  border-color: var(--color-active);
  /* Checkmark via SVG mask */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7L5.5 10L11.5 4' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size:     12px 12px;
  background-repeat:   no-repeat;
  background-position: center;
}

/* Workspace grid */
.workspace-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-tile {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       14px 16px;
  box-shadow:    var(--shadow-sm);
}

.workspace-tile__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

.workspace-tile--personal        .workspace-tile__dot { background: var(--ws-personal); }
.workspace-tile--znexus-clients  .workspace-tile__dot { background: var(--ws-clients); }
.workspace-tile--znexus-internal .workspace-tile__dot { background: var(--ws-internal); }

.workspace-tile__info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.workspace-tile__name {
  font-size:  0.9375rem;
  font-weight: 500;
  color:      var(--text-primary);
}

.workspace-tile__meta {
  font-size: 0.8125rem;
  color:     var(--text-tertiary);
}

/* Phase next hint */
.phase-next {
  margin-top:    24px;
  padding:       16px 20px;
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  font-size:     0.875rem;
  color:         var(--text-secondary);
}

.phase-next strong { color: var(--text-primary); }

/* ---- Forms --------------------------------------------------- */
.form-group {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-bottom: 16px;
}

.form-label {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--text-primary);
}

.form-input {
  width:         100%;
  padding:       10px 12px;
  font-family:   var(--font);
  font-size:     0.9375rem;
  color:         var(--text-primary);
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  outline:       none;
  transition:    border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-light);
}

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

.form-hint {
  font-size: 0.8125rem;
  color:     var(--text-tertiary);
}

/* ---- Buttons ------------------------------------------------- */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  padding:       10px 18px;
  font-family:   var(--font);
  font-size:     0.9375rem;
  font-weight:   500;
  border-radius: var(--radius-sm);
  border:        none;
  cursor:        pointer;
  transition:    background 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  line-height:   1;
}

.btn--primary {
  background: var(--accent);
  color:      #FFFFFF;
}

.btn--primary:hover {
  background: var(--accent-hover);
  color:      #FFFFFF;
  text-decoration: none;
}

.btn--full { width: 100%; }

/* ---- Alerts -------------------------------------------------- */
.alert {
  padding:       12px 14px;
  border-radius: var(--radius-sm);
  font-size:     0.875rem;
  line-height:   1.55;
  margin-bottom: 16px;
}

.alert--error {
  background:  rgba(239,68,68,0.08);
  border:      1px solid rgba(239,68,68,0.25);
  color:       #B91C1C;
}

.alert--success {
  background:  rgba(34,197,94,0.08);
  border:      1px solid rgba(34,197,94,0.25);
  color:       #15803D;
}

.alert--warning {
  background:  rgba(245,158,11,0.08);
  border:      1px solid rgba(245,158,11,0.25);
  color:       #92400E;
}

.alert a {
  color:           inherit;
  text-decoration: underline;
}

/* ---- Auth pages (login, setup) ------------------------------- */
.auth-page {
  background:  var(--bg-sidebar);
  min-height:  100vh;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     24px 16px;
}

.auth-card {
  width:         100%;
  max-width:     380px;
  background:    var(--bg-surface);
  border-radius: var(--radius-lg);
  padding:       36px 32px 32px;
  box-shadow:    var(--shadow-md);
}

.auth-brand {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 28px;
}

.auth-brand-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--accent);
}

.auth-brand-name {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--text-primary);
  letter-spacing: 0.01em;
}

.auth-heading {
  font-size:     1.375rem;
  font-weight:   600;
  color:         var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.auth-subheading {
  font-size:     0.9375rem;
  color:         var(--text-secondary);
  margin-bottom: 24px;
}

.auth-footer-note {
  margin-top: 20px;
  font-size:  0.8125rem;
  color:      var(--text-tertiary);
  text-align: center;
}

/* ---- Responsive: mobile -------------------------------------- */
@media (max-width: 767px) {

  /* Hide desktop sidebar */
  .sidebar { display: none; }

  /* Show mobile bottom nav */
  .mobile-nav { display: flex; }

  /* Remove sidebar margin, add bottom padding for nav */
  .app-shell {
    margin-left: 0;
    padding-bottom: var(--mobile-nav-h);
  }

  .main-content {
    padding: 28px 20px calc(var(--mobile-nav-h) + 20px);
  }

  .page-title { font-size: 1.375rem; }

  .phase-card { padding: 20px; }

  .auth-card {
    padding:       28px 20px 24px;
    border-radius: var(--radius-md);
  }
}

@media (min-width: 768px) {
  /* Ensure mobile nav stays hidden on desktop */
  .mobile-nav { display: none; }
}


/* ============================================================
   Phase 2 — Project / Task / Sub-task CRUD
   ============================================================ */

/* ---- Page header with action button ------------------------- */
.page-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
  margin-bottom:   28px;
}

.page-header__left {
  display:     flex;
  align-items: baseline;
  gap:         10px;
}

.page-count {
  font-size:  0.875rem;
  color:      var(--text-tertiary);
  font-weight: 400;
}

/* Small button variant */
.btn--sm {
  padding:   7px 13px;
  font-size: 0.875rem;
}

/* Ghost button */
.btn--ghost {
  background: transparent;
  color:      var(--text-secondary);
  border:     1px solid var(--border);
}
.btn--ghost:hover {
  background:      var(--bg-base);
  color:           var(--text-primary);
  text-decoration: none;
}

/* Waiting-specific submit button */
.btn--waiting {
  background: rgba(245,158,11,0.15);
  color:      #92400E;
  border:     1px solid rgba(245,158,11,0.3);
}
.btn--waiting:hover {
  background: rgba(245,158,11,0.25);
  color:      #92400E;
  text-decoration: none;
}

/* ---- Empty state -------------------------------------------- */
.empty-state {
  text-align: center;
  padding:    60px 24px;
}
.empty-state__text {
  font-size:     0.9375rem;
  color:         var(--text-tertiary);
  margin-bottom: 16px;
}

/* ---- Item list (projects / tasks / subtasks) ---------------- */
.item-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

/* ---- Item row ---------------------------------------------- */
.item-row {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    box-shadow 150ms ease, opacity 300ms ease;
}

.item-row:hover { box-shadow: var(--shadow-sm); }

/* Indent levels */
.item-row--task    { margin-left: 20px; border-radius: var(--radius-sm); }
.item-row--subtask { margin-left: 40px; border-radius: var(--radius-sm); }

/* ---- Item row header --------------------------------------- */
.item-row__header {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     10px 10px 10px 8px;
  min-height:  48px;
}

/* Expand/collapse chevron */
.expand-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border:          none;
  background:      transparent;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  color:           var(--text-tertiary);
  flex-shrink:     0;
  transition:      color 120ms ease, background 120ms ease;
}
.expand-btn:hover { background: var(--bg-base); color: var(--text-primary); }

.expand-icon {
  width:      14px;
  height:     14px;
  transition: transform 200ms ease;
}
.expand-btn[aria-expanded="true"] .expand-icon { transform: rotate(90deg); }

/* Content: title + meta */
.item-row__content {
  flex:        1;
  min-width:   0;
  display:     flex;
  align-items: baseline;
  gap:         10px;
  flex-wrap:   wrap;
}

.item-row__title {
  font-size:   0.9375rem;
  font-weight: 450;
  color:       var(--text-primary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.item-row__meta {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
  flex-shrink: 0;
}

/* Deadline */
.meta-deadline {
  font-size:  0.8125rem;
  color:      var(--text-tertiary);
}
.meta-deadline.is-overdue { color: var(--color-stale); font-weight: 500; }

/* Effort chip */
.effort-chip {
  font-size:     0.75rem;
  font-weight:   500;
  padding:       2px 7px;
  border-radius: 100px;
  white-space:   nowrap;
}
.effort-chip--quick  { background: rgba(34,197,94,0.1);  color: #166534; }
.effort-chip--medium { background: rgba(99,102,241,0.1); color: #4338CA; }
.effort-chip--long   { background: rgba(239,68,68,0.1);  color: #B91C1C; }

/* Category chip */
.category-chip {
  font-size:     0.75rem;
  font-weight:   500;
  padding:       2px 7px;
  border-radius: 100px;
  background:    rgba(0,0,0,0.05);
  color:         var(--text-secondary);
  white-space:   nowrap;
}

/* Actions area */
.item-row__actions {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}

/* Status button */
.status-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 9px;
  border-radius: 100px;
  border:        1px solid transparent;
  background:    transparent;
  font-family:   var(--font);
  font-size:     0.8125rem;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 120ms ease, border-color 120ms ease;
}

.status-btn--active  { background: rgba(34,197,94,0.1);  border-color: rgba(34,197,94,0.25);  color: #166534; }
.status-btn--waiting { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #92400E; }
.status-btn--done    { background: rgba(107,114,128,0.1);border-color: rgba(107,114,128,0.25);color: #6B7280; }

.status-btn:hover { filter: brightness(0.95); }

/* Status dots */
.status-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot--active  { background: var(--color-active); }
.status-dot--waiting { background: var(--color-waiting); }
.status-dot--done    { background: var(--color-done); }

/* Icon buttons (edit, delete) */
.icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border:          none;
  background:      transparent;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  color:           var(--text-tertiary);
  transition:      background 120ms ease, color 120ms ease;
}
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { background: var(--bg-base); color: var(--text-primary); }
.icon-btn--danger:hover { background: rgba(239,68,68,0.08); color: var(--color-stale); }

/* ---- Tasks / subtasks expand areas ------------------------- */
.tasks-area,
.subtasks-area {
  border-top:     1px solid var(--border);
  padding:        6px 8px 8px 36px;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.tasks-area[hidden],
.subtasks-area[hidden] { display: none; }

/* "Add" row at the bottom of a tasks/subtasks area */
.add-item-row {
  padding: 4px 0 2px;
}

.add-item-btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     5px 8px;
  border:      1px dashed var(--border);
  border-radius: var(--radius-sm);
  background:  transparent;
  font-family: var(--font);
  font-size:   0.8125rem;
  color:       var(--text-tertiary);
  cursor:      pointer;
  transition:  background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.add-item-btn:hover {
  background:   var(--accent-light);
  color:        var(--accent);
  border-color: var(--accent);
}

/* Spinner shown while tasks load */
.tasks-loading {
  font-size: 0.875rem;
  color:     var(--text-tertiary);
  padding:   8px 0;
}

/* Done row fade-out animation */
.item-row.is-fading {
  opacity:  0;
  transform: translateX(8px);
  transition: opacity 350ms ease, transform 350ms ease;
}

/* ---- Status popover ---------------------------------------- */
#status-popover {
  position:      absolute;
  z-index:       200;
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  padding:       4px;
  min-width:     130px;
  display:       flex;
  flex-direction: column;
  gap:           2px;
}

#status-popover[hidden] { display: none; }

.status-option {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  border:        none;
  background:    transparent;
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.875rem;
  color:         var(--text-primary);
  cursor:        pointer;
  width:         100%;
  text-align:    left;
  transition:    background 100ms ease;
}
.status-option:hover      { background: var(--bg-base); }
.status-option.is-current { font-weight: 600; }

/* ---- Modal ------------------------------------------------- */
#modal-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,0.35);
  backdrop-filter:  blur(2px);
  z-index:          300;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          20px;
}
#modal-overlay[hidden] { display: none; }

#modal-dialog {
  background:    var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-md);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  overflow-y:    auto;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px 0;
}

.modal-title {
  font-size:   1.0625rem;
  font-weight: 600;
  color:       var(--text-primary);
}

.modal-close {
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  border-radius: var(--radius-sm);
  font-size:   1.25rem;
  line-height: 1;
  color:       var(--text-tertiary);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background 120ms ease, color 120ms ease;
}
.modal-close:hover { background: var(--bg-base); color: var(--text-primary); }

.modal-body {
  padding: 20px 24px 24px;
}

.modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
  padding-top:     8px;
}

/* Two-column form row (deadline + effort side by side) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-select { cursor: pointer; }

.form-required { color: var(--color-stale); }

/* Deadline warning (subtasks) */
.deadline-warning {
  font-size:   0.8125rem;
  color:       #92400E;
  background:  rgba(245,158,11,0.08);
  border:      1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  padding:     6px 10px;
  margin-top:  4px;
  display:     none;
}
.deadline-warning.is-visible { display: block; }

/* ---- Toast notifications ----------------------------------- */
#toast-container {
  position:       fixed;
  bottom:         24px;
  right:          24px;
  z-index:        400;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  pointer-events: none;
}

.toast {
  padding:       10px 16px;
  border-radius: var(--radius-md);
  font-size:     0.875rem;
  font-weight:   500;
  box-shadow:    var(--shadow-md);
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity 200ms ease, transform 200ms ease;
  pointer-events: auto;
  max-width:     320px;
}
.toast.is-visible   { opacity: 1; transform: translateY(0); }
.toast--success     { background: #ECFDF5; color: #166534; border: 1px solid #BBF7D0; }
.toast--error       { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.toast--info        { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); }
.toast--warning     { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

/* Mobile adjustments for Phase 2 */
@media (max-width: 767px) {
  .item-row--task    { margin-left: 12px; }
  .item-row--subtask { margin-left: 24px; }

  .tasks-area,
  .subtasks-area     { padding-left: 16px; }

  .item-row__content { gap: 6px; }

  .status-btn .status-label { display: none; } /* show dot only on mobile */

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

  #toast-container { bottom: calc(var(--mobile-nav-h) + 12px); right: 12px; left: 12px; }

  #modal-dialog { max-height: 85vh; }
}