/* ========================= */
/* Design Tokens             */
/* ========================= */

:root {
  /* Light theme — VS Code GitHub Light, colorblind-safe palette */
  --bg:            #f6f8fa;
  --bg-deep:       #eaeef2;
  --text:          #24292f;
  --text-muted:    #57606a;
  --card-bg:       #ffffff;
  --card-border:   #d0d7de;
  --input-bg:      #ffffff;
  --input-border:  #d0d7de;
  --project-bg:      rgba(175,184,193,0.2);
  --project-text:    #57606a;
  --primary:       #0969da;
  --primary-hover: #0550ae;
  --primary-glow:  rgba(9,105,218,0.2);
  --primary-subtle:rgba(9,105,218,0.08);
  --danger:        #bc4c00;
  --danger-glow:   rgba(188,76,0,0.2);
  --success:       #0550ae;
  --success-glow:  rgba(5,80,174,0.2);
  --radius:        6px;
  --glass-blur:    blur(16px) saturate(180%);
  --shadow:        0 1px 2px rgba(31,35,40,0.08);
  --shadow-card:   0 1px 0 rgba(31,35,40,0.04), 0 1px 3px rgba(31,35,40,0.06);
}

body.dark {
  color-scheme: dark;
  --bg:            #0c0c10;
  --bg-deep:       #08080b;
  --text:          #e2e2e8;
  --text-muted:    #46464f;
  --card-bg:       rgba(255,255,255,0.03);
  --card-border:   rgba(255,255,255,0.07);
  --input-bg:      rgba(255,255,255,0.05);
  --input-border:  rgba(255,255,255,0.09);
  --project-bg:      rgba(255,255,255,0.07);
  --project-text:    #9090a0;
  --primary:       #d4af37;
  --primary-hover: #c49c2f;
  --primary-glow:  rgba(212,175,55,0.25);
  --primary-subtle:rgba(212,175,55,0.08);
  --danger:        #f78166;
  --danger-glow:   rgba(247,129,102,0.28);
  --success:       #54aeff;
  --success-glow:  rgba(84,174,255,0.28);
  --shadow:        0 1px 4px rgba(0,0,0,0.5);
  --shadow-card:   0 4px 20px rgba(0,0,0,0.5);
}

body.github-dark {
  color-scheme: dark;
  --bg:            #0d1117;
  --bg-deep:       #010409;
  --text:          #e6edf3;
  --text-muted:    #7d8590;
  --card-bg:       #161b22;
  --card-border:   #30363d;
  --input-bg:      #0d1117;
  --input-border:  #30363d;
  --project-bg:      rgba(48,54,61,0.6);
  --project-text:    #8b949e;
  --primary:       #2f81f7;
  --primary-hover: #1f6feb;
  --primary-glow:  rgba(47,129,247,0.3);
  --primary-subtle:rgba(47,129,247,0.1);
  --danger:        #f78166;
  --danger-glow:   rgba(247,129,102,0.28);
  --success:       #54aeff;
  --success-glow:  rgba(84,174,255,0.28);
  --shadow:        0 1px 4px rgba(1,4,9,0.6);
  --shadow-card:   0 0 0 1px #21262d, 0 4px 20px rgba(1,4,9,0.5);
}

/* ========================= */
/* Utility                   */
/* ========================= */

.hidden { display: none !important; }

/* ========================= */
/* Scrollbar                 */
/* ========================= */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(9,105,218,0.22);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(9,105,218,0.45); }

body.dark ::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.45); }
body.github-dark ::-webkit-scrollbar-thumb { background: rgba(47,129,247,0.25); }
body.github-dark ::-webkit-scrollbar-thumb:hover { background: rgba(47,129,247,0.5); }

/* ========================= */
/* Base                      */
/* ========================= */

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  padding: 48px 20px 16px;
  margin: 0;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

/* ========================= */
/* Window Controls           */
/* ========================= */

.titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
  -webkit-app-region: drag;
  z-index: 9998;
}

:fullscreen .titlebar,
:-webkit-full-screen .titlebar { display: none; }

.win-controls {
  position: fixed;
  top: 13px;
  left: 14px;
  display: flex;
  gap: 7px;
  align-items: center;
  z-index: 10000;
  -webkit-app-region: no-drag;
}

.win-btn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.4);
  transition: filter 0.12s, transform 0.1s;
}

.win-btn:hover  { filter: brightness(1.2); transform: scale(1.15); }
.win-btn:active { filter: brightness(0.85); transform: scale(0.9); }

.win-close    { background: radial-gradient(circle at 38% 34%, #ff928a, #ff5f57 55%, #e0453d); }
.win-minimize { background: radial-gradient(circle at 38% 34%, #ffd64a, #febc2e 55%, #d4a000); }
.win-maximize { background: radial-gradient(circle at 38% 34%, #5be06c, #28c840 55%, #14ae28); }

:fullscreen .win-controls,
:-webkit-full-screen .win-controls { display: none; }

/* ========================= */
/* Inputs                    */
/* ========================= */

input {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 0 10px;
  height: 32px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.dark input { backdrop-filter: var(--glass-blur); }
body.github-dark input { background: var(--input-bg); }

/* color-scheme does not inherit — set explicitly so native OS popups render dark */
body.dark select, body.dark input, body.dark textarea { color-scheme: dark; }
body.github-dark select, body.github-dark input, body.github-dark textarea { color-scheme: dark; }

/* Theme the native <select> dropdown list to match the active theme.
   (--card-bg is translucent in dark mode, so the option list uses solid colors.) */
body.dark select option {
  background-color: #16161e;
  color: var(--text);
}
body.github-dark select option {
  background-color: var(--card-bg);
  color: var(--text);
}
select option:checked {
  background-color: var(--primary-subtle);
  color: var(--primary);
}

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

input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

/* ========================= */
/* Buttons – Base            */
/* ========================= */

button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 12px;
  height: 32px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}
.btn-primary:hover { background: var(--primary-hover); }

body.dark .btn-primary { color: #000; box-shadow: 0 0 14px var(--primary-glow); }
body.dark .btn-primary:hover { box-shadow: 0 0 22px var(--primary-glow); }
body.github-dark .btn-primary { color: #fff; box-shadow: 0 0 14px var(--primary-glow); }
body.github-dark .btn-primary:hover { box-shadow: 0 0 22px var(--primary-glow); }

.btn-secondary {
  background: #f6f8fa;
  color: var(--text-muted);
  border-color: rgba(31,35,40,0.15);
}
.btn-secondary:hover {
  background: #eaeef2;
  color: var(--text);
  border-color: rgba(31,35,40,0.25);
}

body.dark .btn-secondary {
  background: transparent;
  border-color: var(--card-border);
  backdrop-filter: var(--glass-blur);
}
body.dark .btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }
body.github-dark .btn-secondary { background: transparent; border-color: var(--card-border); }
body.github-dark .btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }

.btn-delete {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--card-border);
}
.btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
  opacity: 1;
}
body.dark .btn-delete:hover,
body.github-dark .btn-delete:hover { box-shadow: 0 0 8px var(--danger-glow); }

.btn-done {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--card-border);
}
.btn-done:hover {
  color: var(--success);
  border-color: var(--success);
  opacity: 1;
}
body.dark .btn-done:hover,
body.github-dark .btn-done:hover {
  color: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 8px var(--success-glow);
}

.btn-restore {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--card-border);
}
.btn-restore:hover {
  color: var(--primary);
  border-color: var(--primary);
  opacity: 1;
}
body.dark .btn-restore:hover,
body.github-dark .btn-restore:hover { box-shadow: 0 0 8px var(--primary-glow); }

/* ========================= */
/* Top Bar                   */
/* ========================= */

.top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.top-bar input { flex: 1; min-width: 0; }

.top-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  position: fixed;
  top: 6px;
  right: 14px;
  z-index: 9999;
  -webkit-app-region: no-drag;
}

.btn-icon {
  padding: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:not(.btn-primary) {
  color: var(--primary);
}
.btn-icon:not(.btn-primary):hover {
  color: var(--primary);
  opacity: 0.75;
}

.btn-icon-gh {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--primary);
}
.btn-icon-gh:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--primary);
  opacity: 0.75;
}

/* ========================= */
/* Options Panel             */
/* ========================= */

.options-wrap {
  position: relative;
}

.options-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 214px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 5000;
  /* The panel's content (theme, toggles, data, archive, sign out...) can
     be taller than a short window/browser viewport — without a scroll
     fallback here, anything past the bottom (Sign out, Quit) becomes
     completely unreachable with no way to scroll to it. */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
}

body.dark .options-panel,
body.github-dark .options-panel {
  background: #16161e;
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: var(--glass-blur);
}

.options-user {
  padding: 12px 14px 10px;
}

.options-user-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.options-user-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.options-sep {
  height: 1px;
  background: var(--card-border);
}

.options-section {
  padding: 10px 14px;
}

.options-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}

.options-theme-row,
.options-density-row {
  display: flex;
  gap: 4px;
}

.options-theme-btn,
.options-density-btn {
  flex: 1;
  height: 26px;
  padding: 0;
  font-size: 11px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius);
}

.options-theme-btn:hover,
.options-density-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.options-theme-btn-active,
.options-density-btn-active {
  color: var(--primary);
  border-color: var(--primary);
}

body.dark .options-theme-btn-active,
body.dark .options-density-btn-active,
body.github-dark .options-theme-btn-active,
body.github-dark .options-density-btn-active { box-shadow: 0 0 6px var(--primary-glow); }

.options-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
  padding: 2px 0;
}

.options-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  background: var(--card-border);
  border-radius: 9px;
  position: relative;
  transition: background 0.2s;
}

.options-toggle.options-toggle-on { background: var(--primary); }

body.dark .options-toggle.options-toggle-on,
body.github-dark .options-toggle.options-toggle-on { box-shadow: 0 0 6px var(--primary-glow); }

/* Pro toggle */
.pro-toggle-row { padding: 4px 0; }

.pro-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
}

.pro-toggle-crown {
  font-size: 10px;
  color: #9ca3af;
  transition: color 0.3s;
}

.pro-toggle-tag {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  background: rgba(156,163,175,0.12);
  border: 1px solid rgba(156,163,175,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  transition: all 0.3s;
}

.pro-toggle.options-toggle-on {
  background: #d4af37;
  box-shadow: 0 0 8px rgba(212,175,55,0.5);
}

body.pro .pro-toggle-crown { color: #d4af37; }

body.pro .pro-toggle-tag {
  content: 'pro';
  color: #d4af37;
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.35);
}

/* 2px Pro border around window */
body.pro::after {
  content: '';
  position: fixed;
  inset: 2px;
  border: 2px solid var(--primary);
  border-radius: 10px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
}

.options-toggle-knob {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.15s;
}

.options-toggle.options-toggle-on .options-toggle-knob { left: 16px; }

.options-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 14px;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  font-size: 13px;
  justify-content: flex-start;
}

.options-action:hover {
  background: var(--primary-subtle);
  color: var(--text);
}

.options-action-danger:hover {
  background: rgba(247,129,102,0.08);
  color: var(--danger);
}

/* Options header + help (?) button */
.options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
}
.options-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.options-help-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.options-help-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ========================= */
/* About / Details dialog    */
/* ========================= */
.about-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.about-panel {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  color: var(--text);
  display: grid;
  gap: 12px;
  padding: 18px;
}
body.dark .about-panel { background: rgba(20, 20, 26, 0.97); }
body.github-dark .about-panel { background: rgba(22, 27, 34, 0.97); }

.about-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.about-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}
.about-version {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.about-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.about-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.about-scroll {
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.about-defs {
  margin: 0;
  display: grid;
  gap: 6px;
}
.about-defs dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.about-defs dd {
  margin: 0 0 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.about-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--card-border);
  padding-top: 10px;
}
.about-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.3px;
}
.about-hex {
  width: 14px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}
.about-actions {
  display: flex;
  justify-content: flex-end;
}
.about-actions .btn-primary {
  height: 30px;
  padding: 0 16px;
  font-size: 12px;
}

/* ========================= */
/* Share dialog              */
/* ========================= */
.share-panel {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  color: var(--text);
  display: grid;
  gap: 12px;
  padding: 18px;
}
body.dark .share-panel { background: rgba(20, 20, 26, 0.97); }
body.github-dark .share-panel { background: rgba(22, 27, 34, 0.97); }

.share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.share-title { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.share-resource {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.share-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.share-x:hover { color: var(--text); }

.share-field-label,
.share-list-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.share-perm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.share-invite-row { display: flex; gap: 8px; }
.share-invite-row input { flex: 1; min-width: 0; }
.share-invite-row .btn-primary { flex-shrink: 0; height: 30px; padding: 0 12px; font-size: 12px; }

.share-hint { margin: -4px 0 0; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.share-link-row { display: flex; gap: 8px; }
.share-link-row input {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.share-link-row .btn-secondary { flex-shrink: 0; height: 30px; padding: 0 12px; font-size: 12px; }

.share-msg { font-size: 12px; padding: 2px 0; }
.share-msg.share-msg-ok { color: var(--success); }
.share-msg.share-msg-err { color: var(--danger); }

.share-list { display: grid; gap: 6px; }
.share-list:empty { display: none; }
.share-list:not(:empty) + .share-empty { display: none; }
.share-empty { font-size: 12px; color: var(--text-muted); }

.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--input-bg);
}
.share-row-main { flex: 1; min-width: 0; }
.share-row-who {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-row-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.share-row-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--project-bg);
  color: var(--project-text);
  flex-shrink: 0;
}
.share-row-badge.share-row-badge-pending { color: var(--primary); }
.share-row .btn-delete { flex-shrink: 0; height: 24px; width: 24px; padding: 0; }

/* Small share button that sits in the top bar / detail headers */
.share-trigger-btn.btn-icon svg { width: 13px; height: 13px; }

/* ========================= */
/* Shared with me view       */
/* ========================= */
.shared-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.shared-view-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-incoming-list { display: grid; gap: 8px; }
.shared-incoming-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s;
}
body.dark .shared-incoming-card { backdrop-filter: var(--glass-blur); }
.shared-incoming-card:hover { border-color: var(--primary-subtle); }
.shared-incoming-icon { color: var(--primary); flex-shrink: 0; display: flex; }
.shared-incoming-main { flex: 1; min-width: 0; }
.shared-incoming-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-incoming-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.shared-incoming-chevron { color: var(--text-muted); flex-shrink: 0; display: flex; }

.shared-tasks-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.shared-tasks-meta strong { color: var(--text); font-weight: 600; }

.shared-empty { font-size: 12px; color: var(--text-muted); padding: 14px 2px; }

.options-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: auto;
  border-radius: 8px;
  background: var(--primary);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
}

/* ========================= */
/* Tabs                      */
/* ========================= */

.tab-btn {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 0 12px;
  height: 32px;
  font-size: 13px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab-icon { flex-shrink: 0; }

/* Default: icons only. The "Tab labels" option reveals the text. */
.tab-label { display: none; }
body.tabs-show-labels .tab-label { display: inline; }

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

body.dark .tab-btn.tab-active,
body.github-dark .tab-btn.tab-active { text-shadow: 0 0 10px var(--primary-glow); }

.tab-btn:hover:not(.tab-active) { color: var(--text); }

/* ========================= */
/* Project Filters           */
/* ========================= */

.queue-items-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 12px;
}

.queue-items-section.hidden { display: none; }

.queue-items-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.queue-toggle-btn {
  padding: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

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

.queue-toggle-btn.collapsed svg {
  transform: rotate(-90deg);
}

.queue-items-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.queue-items-icon {
  opacity: 0.6;
}

.queue-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}

.queue-items-list.hidden { display: none; }

.queue-quick-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-size: 12px;
}

.queue-quick-item-title {
  flex: 1;
  color: var(--text);
}

.queue-quick-item-priority {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
}

.queue-quick-item-priority.high {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.queue-quick-item-priority.medium {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.queue-quick-item-priority.low {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.project-filter-btn {
  background: var(--project-bg);
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.project-filter-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.project-filter-btn.project-filter-active {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 500;
}

body.dark .project-filter-btn.project-filter-active,
body.github-dark .project-filter-btn.project-filter-active { box-shadow: 0 0 6px var(--primary-glow); }

/* ========================= */
/* Project Chip Picker       */
/* ========================= */

.project-picker {
  position: relative;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  padding: 4px 6px;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  cursor: text;
}

.project-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--project-bg);
  color: var(--project-text);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.project-picker-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
}
.project-picker-chip-remove:hover { opacity: 1; }

.project-picker-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  min-width: 120px;
  flex: 1;
  padding: 2px 2px;
}
.project-picker-input::placeholder { color: var(--text-muted); }

.project-picker-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  z-index: 200;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}
.project-picker-menu.hidden { display: none; }

body.dark .project-picker-menu { background: #18181f; border-color: rgba(255,255,255,0.12); }
body.github-dark .project-picker-menu { background: #1c2128; border-color: #30363d; }

.project-picker-item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.project-picker-item:hover {
  color: var(--primary);
  background: var(--project-bg);
}

/* ========================= */
/* Create Task Form          */
/* ========================= */

.create-task-form {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 20;
}

body.dark .create-task-form { backdrop-filter: var(--glass-blur); }
body.github-dark .create-task-form { background: #161b22; border-color: #30363d; }

.create-task-form.hidden { display: none; }

.form-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: -4px;
  letter-spacing: 0.02em;
}

.form-field-optional {
  font-weight: 400;
  opacity: 0.6;
}

.form-actions { display: flex; gap: 6px; }

/* ========================= */
/* Task Cards                */
/* ========================= */

.task-card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 10px;
  margin-bottom: 5px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.task-card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* Lead column: reorder handle + open/close chevron (left side of each card) */
.task-lead {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  margin-top: 1px;
}

.task-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  opacity: 0;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  transition: opacity 0.1s;
}
.task-card:hover .task-drag-handle { opacity: 0.45; }
.task-drag-handle:hover { opacity: 1; }
.task-drag-handle:active { cursor: grabbing; }

.task-expand-toggle {
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  color: var(--text-muted);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.task-expand-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}
.task-expand-toggle.expanded svg { transform: rotate(90deg); }
.task-expand-toggle:hover { color: var(--primary); }

.task-card.task-dragging { opacity: 0.4; }
.task-card.task-drag-over { box-shadow: inset 0 2px 0 var(--primary); }

/* Collapsed (compact) card — show only title + time + timer button */
.task-collapsed { padding: 7px 14px; }
.task-collapsed .task-card-body { align-items: center; }
.task-collapsed .task-description,
.task-collapsed .task-projects,
.task-collapsed .task-dates,
.task-collapsed .task-progress,
.task-collapsed .task-pomodoro-count,
.task-collapsed .subtask-section { display: none; }
.task-collapsed .task-actions > :not(.task-timer-btn) { display: none; }

/* ── Spacing / density (Compact · Cozy(default) · Spacious) ──────────────────── */
/* The density setting drives app-wide spacing tokens consumed by every card
   surface (tasks, routines, events, projects). Cozy is the default. */
body {
  --space-card-pad-y:  12px;  /* vertical padding inside a card */
  --space-card-pad-x:  14px;  /* horizontal padding inside a card */
  --space-card-gap:     8px;  /* gap between cards in a list */
  --space-card-inner:  10px;  /* gap between rows inside a card */
  --card-radius:       12px;
}
body.density-compact {
  --space-card-pad-y:  9px;
  --space-card-pad-x:  12px;
  --space-card-gap:    5px;
  --space-card-inner:  7px;
  --card-radius:       9px;
}
body.density-spacious {
  --space-card-pad-y:  17px;
  --space-card-pad-x:  18px;
  --space-card-gap:    13px;
  --space-card-inner:  13px;
  --card-radius:       14px;
}

/* Tasks keep their own collapse-aware padding but follow the density gaps. */
body.density-compact .task-card { padding: 8px 12px 7px; margin-bottom: 3px; }
body.density-compact .task-card.task-collapsed { padding: 4px 12px; }
body.density-compact .subtask-item { padding: 1px 0; }
body.density-compact .subtask-body { margin-top: 3px; }

body.density-spacious .task-card { padding: 18px 18px 16px; margin-bottom: 14px; }
body.density-spacious .task-card.task-collapsed { padding: 12px 18px; }
body.density-spacious .subtask-item { padding: 5px 0; }
body.density-spacious .subtask-body { margin-top: 9px; }

.task-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 3px;
  margin-top: 10px;
}

.task-progress-intervals {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
}

.task-progress-interval {
  width: 16px;
  height: 3px;
  border-radius: 1px;
  background: var(--primary);
  opacity: 0.75;
  flex-shrink: 0;
}

.task-active .task-progress-interval {
  opacity: 1;
}

.task-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--project-bg);
  border-radius: 2px;
  overflow: hidden;
  min-width: 20px;
}

.task-progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 2px;
  opacity: 0.75;
  transition: width 0.6s ease;
}

.task-active .task-progress-fill {
  opacity: 1;
}

body.dark .task-card { backdrop-filter: var(--glass-blur); }
body.github-dark .task-card { background: var(--card-bg); border-color: var(--card-border); }

.task-card:hover { border-color: var(--primary-subtle); }

.task-active {
  border: 1px solid var(--primary);
  background: var(--primary-subtle);
}

body.dark .task-active {
  box-shadow: var(--shadow-card), 0 0 12px var(--primary-glow);
}
body.github-dark .task-active {
  box-shadow: var(--shadow-card), 0 0 10px var(--primary-glow);
}

/* ========================= */
/* Task Left                 */
/* ========================= */

.task-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.task-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.1px;
}

.task-description {
  font-size: 12px;
  color: var(--text-muted);
}

.task-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.task-date {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0.1px;
}

.task-date-finished {
  color: var(--primary);
  opacity: 0.85;
}

.task-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.task-project {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  border-radius: var(--radius);
  background: var(--project-bg);
  color: var(--project-text);
  border: 1px solid var(--card-border);
  letter-spacing: 0.2px;
}

/* ========================= */
/* Task Right                */
/* ========================= */

.task-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.task-right-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-time {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--text);
}

.task-active .task-time { color: var(--primary); }

.task-estimate {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans, inherit);
  letter-spacing: 0;
  color: var(--text-muted);
  background: var(--project-bg);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.task-estimate-over { color: #ef4444; background: rgba(239,68,68,0.12); }

/* Sync (refresh) icon button — glows the accent colour when fully synced */
.sync-btn { transition: color 0.2s; color: var(--text-muted); }
.sync-btn.sync-pending { color: var(--text-muted); }
.sync-btn.sync-synced { color: var(--primary); }
.sync-btn.sync-synced svg { filter: drop-shadow(0 0 5px var(--primary)); }
.sync-btn.sync-syncing { color: var(--primary); }
.sync-btn.sync-syncing svg { animation: sync-spin 0.8s linear infinite; }
.sync-btn.sync-error { color: #ef4444; }
@keyframes sync-spin { to { transform: rotate(360deg); } }

.estimate-input-row { display: flex; gap: 8px; }
.estimate-input-row input { flex: 1; }
.estimate-unit-select {
  flex: 0 0 auto;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
}

body.dark .task-active .task-time,
body.github-dark .task-active .task-time { text-shadow: 0 0 16px var(--primary-glow); }

.task-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ========================= */
/* Time Adjust Controls      */
/* ========================= */

.task-adjust {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-adjust {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.btn-adjust:hover { color: var(--primary); border-color: var(--primary); }
body.dark .btn-adjust:hover,
body.github-dark .btn-adjust:hover { box-shadow: 0 0 6px var(--primary-glow); }

.adjust-input {
  width: 48px;
  height: 24px;
  padding: 0 6px;
  font-size: 11px;
  text-align: center;
}

.adjust-input::-webkit-inner-spin-button,
.adjust-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ========================= */
/* Inline Edit Form          */
/* ========================= */

.task-editing {
  flex-direction: column;
  align-items: stretch;
}

.edit-task-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.edit-adjust-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--card-border);
}

.edit-time-display {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  letter-spacing: 0.5px;
  min-width: 72px;
}

/* ========================= */
/* Login Screen              */
/* ========================= */

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 1000;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 36px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  width: 320px;
  text-align: center;
}

body.dark .login-card {
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card), 0 0 40px rgba(212,175,55,0.07);
}
body.github-dark .login-card { background: #161b22; border-color: #30363d; }

.login-logo { margin-bottom: 4px; }

.login-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.2px;
}

.login-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.btn-google:hover {
  background: var(--project-bg);
  border-color: var(--text-muted);
}

body.dark .btn-google {
  background: rgba(255,255,255,0.04);
  backdrop-filter: var(--glass-blur);
}
body.dark .btn-google:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 14px rgba(212,175,55,0.1);
}
body.github-dark .btn-google { background: #21262d; border-color: #30363d; }
body.github-dark .btn-google:hover { background: #30363d; }

.login-error {
  font-size: 12px;
  color: var(--danger);
  margin: 0;
  min-height: 16px;
}
.login-error.login-ok { color: var(--success); }

/* Verify-email screen */
.verify-lead {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 6px;
  text-align: center;
}
.verify-email { color: var(--text); font-weight: 600; word-break: break-all; }
.verify-code-input {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  letter-spacing: 8px;
  padding-left: 8px; /* offset the trailing letter-spacing so digits look centered */
}
.verify-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 2px;
}
.btn-link:hover { text-decoration: underline; }

/* ========================= */
/* Auth Tabs                 */
/* ========================= */

.auth-tabs {
  display: flex;
  width: 100%;
  background: var(--project-bg);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}

.auth-tab {
  flex: 1;
  height: 30px;
  font-size: 13px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: calc(var(--radius) - 1px);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.auth-tab.auth-tab-active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

body.dark .auth-tab.auth-tab-active,
body.github-dark .auth-tab.auth-tab-active {
  background: rgba(255,255,255,0.08);
  box-shadow: none;
}

/* ========================= */
/* Auth Form                 */
/* ========================= */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.auth-form input {
  width: 100%;
  height: 38px;
}

.auth-submit {
  height: 40px !important;
  width: 100%;
  font-size: 14px;
  margin-top: 2px;
}

.cf-turnstile-wrap {
  display: flex;
  justify-content: center;
  min-height: 65px;
}

/* ========================= */
/* Auth Divider              */
/* ========================= */

.auth-divider {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--card-border);
}

/* ========================= */
/* Reports                   */
/* ========================= */

.report-view {
  padding-top: 4px;
}

.report-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.report-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.report-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-range-btns {
  display: flex;
  gap: 4px;
}

.report-range-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--radius);
}

.report-range-btn:hover { color: var(--text); border-color: var(--text-muted); }

.report-range-btn.report-range-active {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 500;
}

body.dark .report-range-btn.report-range-active,
body.github-dark .report-range-btn.report-range-active { box-shadow: 0 0 6px var(--primary-glow); }

.btn-pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  font-size: 12px;
  padding: 0 12px;
}

.report-select {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  padding: 0 28px 0 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  min-width: 140px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23636c76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.dark .report-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body.github-dark .report-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.report-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.report-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-date-input {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  border-radius: var(--radius);
  width: 136px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.report-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: none;
}

body.dark .report-date-input::-webkit-calendar-picker-indicator,
body.github-dark .report-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
}

.report-date-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.report-date-sep {
  color: var(--text-muted);
  font-size: 12px;
}

/* ========================= */
/* Report Export Bar         */
/* ========================= */

.report-export-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}

body.dark .report-export-bar { backdrop-filter: var(--glass-blur); }

.report-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.report-view-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
}

.report-toggle-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: all 0.15s;
}

.report-toggle-btn.report-toggle-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-subtle);
}

body.dark .report-toggle-btn.report-toggle-active,
body.github-dark .report-toggle-btn.report-toggle-active { box-shadow: 0 0 6px var(--primary-glow); }

.report-project-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.report-export-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.report-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

body.dark .report-total { backdrop-filter: var(--glass-blur); }

.report-total-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-total-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-total-period {
  font-size: 12px;
  color: var(--text-muted);
}

.report-total-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 1px;
}

body.dark .report-total-time,
body.github-dark .report-total-time { text-shadow: 0 0 20px var(--primary-glow); }

.report-status-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.report-status-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--card-border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.report-status-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
}

.report-status-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-status-time {
  font-size: 11px;
  color: var(--text-muted);
}

.report-status-queued   { border-left-color: #6366f1; }
.report-status-queued   .report-status-count { color: #6366f1; }
.report-status-progress { border-left-color: var(--primary); }
.report-status-progress .report-status-count { color: var(--primary); }
.report-status-done     { border-left-color: #22c55e; }
.report-status-done     .report-status-count { color: #22c55e; }

.report-project-status-badge {
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 0 8px 0;
  margin-top: -4px;
}

@media (max-width: 640px) {
  .report-status-overview { grid-template-columns: 1fr; }
}

.report-section {
  margin-bottom: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
}

body.dark .report-section { backdrop-filter: var(--glass-blur); }

.report-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}

.report-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.report-row:last-child { margin-bottom: 0; }

.report-row-label {
  width: 130px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.report-row-bar {
  flex: 1;
  height: 6px;
  background: var(--project-bg);
  border-radius: 3px;
  overflow: hidden;
}

.report-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}

body.dark .report-bar,
body.github-dark .report-bar { box-shadow: 0 0 6px var(--primary-glow); }

.report-bar-routine {
  background: #16a34a;
}
body.dark .report-bar-routine,
body.github-dark .report-bar-routine { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }

.report-row-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 56px;
  text-align: right;
  flex-shrink: 0;
}

.report-routine-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.report-routine-days {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.report-routine-streak {
  font-size: 11px;
  font-weight: 600;
  color: #f97316;
  white-space: nowrap;
}

.report-routine-streak-hot {
  color: #ef4444;
}

.report-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0 3px 12px;
  margin-left: 4px;
  border-left: 2px solid var(--primary-subtle);
}

.report-task-name {
  width: 130px;
  font-size: 11.5px;
  color: var(--text);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-task-bar {
  flex: 1;
  height: 4px;
  background: var(--project-bg);
  border-radius: 2px;
  overflow: hidden;
}

.report-task-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  opacity: 0.6;
  transition: width 0.4s ease;
}

.report-task-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 56px;
  text-align: right;
  flex-shrink: 0;
}

.report-row + .report-task-row { margin-top: 5px; }
.report-task-row + .report-row { margin-top: 12px; }
.report-task-row + .report-task-row { margin-top: 1px; }

.report-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 0;
}

/* ========================= */
/* Pomodoro Timer            */
/* ========================= */

.pomodoro-wrap { position: relative; }

.pomodoro-apple-icon {
  display: block;
  image-rendering: pixelated;
  border-radius: 2px;
}

.pomodoro-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 5000;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.dark .pomodoro-panel,
body.github-dark .pomodoro-panel {
  background: #16161e;
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: var(--glass-blur);
}

.pomodoro-modes {
  display: flex;
  gap: 4px;
}

.pomodoro-mode-btn {
  flex: 1;
  height: 26px;
  font-size: 10px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.pomodoro-mode-btn:hover { color: var(--text); border-color: var(--text-muted); }

.pomodoro-mode-btn.pomodoro-mode-active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-subtle);
}

body.dark .pomodoro-mode-btn.pomodoro-mode-active,
body.github-dark .pomodoro-mode-btn.pomodoro-mode-active { box-shadow: 0 0 6px var(--primary-glow); }

.pomodoro-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  text-align: center;
  letter-spacing: 3px;
  line-height: 1;
  padding: 8px 0;
}

body.dark .pomodoro-display,
body.github-dark .pomodoro-display { text-shadow: 0 0 20px var(--primary-glow); }

.pomodoro-controls {
  display: flex;
  gap: 6px;
}

.pomodoro-controls .btn-primary,
.pomodoro-controls .btn-secondary {
  flex: 1;
  height: 30px;
  font-size: 12px;
}

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

.task-pomodoro-count {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px 10px 5px;
}
.task-pomodoro-count .pomodoro-apple-icon {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.task-list.hide-pomodoro-btns .btn-pomodoro-task,
.task-list.hide-pomodoro-btns .task-pomodoro-count { display: none; }
.task-list.hide-progress-bars .task-progress       { display: none; }

.pomodoro-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--primary-subtle);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

.pomodoro-task-name {
  flex: 1;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pomodoro-unlink-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
}
.pomodoro-unlink-btn:hover { color: var(--danger); }

.btn-pomodoro-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 6px var(--primary-glow) !important;
}

/* ========================= */
/* Print / PDF               */
/* ========================= */

@media print {
  body { background: #fff !important; color: #24292f !important; padding: 24px !important; }
  body > *:not(#reportView) { display: none !important; }
  #reportView { display: block !important; color: #24292f; }
  .report-controls { display: none !important; }
  .report-export-bar { display: none !important; }
  .report-total { background: #f6f8fa !important; border-color: #d0d7de !important; border-left-color: #0969da !important; box-shadow: none !important; }
  .report-total-time { color: #0969da !important; text-shadow: none !important; }
  .report-section { background: #fff !important; border-color: #d0d7de !important; box-shadow: none !important; }
  .report-section-title { color: #57606a !important; border-bottom-color: #d0d7de !important; }
  .report-row-label { color: #24292f !important; }
  .report-bar { background: #0969da !important; box-shadow: none !important; }
  .report-bar-routine { background: #16a34a !important; box-shadow: none !important; }
  .report-row-bar { background: #eaeef2 !important; }
  .report-row-time { color: #24292f !important; }
  .report-task-row { border-left-color: #d0d7de !important; }
  .report-task-name { color: #24292f !important; }
  .report-task-bar { background: #eaeef2 !important; }
  .report-task-bar-fill { background: #0969da !important; opacity: 0.5 !important; }
  .report-task-time { color: #57606a !important; }
}

/* ========================= */
/* Routine View              */
/* ========================= */

.routine-view { display: flex; flex-direction: column; gap: 0; }

.routine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 8px;
}

.routine-header-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.routine-header-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.routine-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.routine-progress-bar-wrap {
  height: 3px;
  background: var(--project-bg);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}

.routine-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  width: 0;
  transition: width 0.4s ease;
  opacity: 0.85;
}

.routine-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

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

.routine-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--space-card-pad-y) var(--space-card-pad-x);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, opacity 0.3s, transform 0.12s;
}
.routine-card:hover { transform: translateY(-1px); }
.routine-card .task-pomodoro-count {
  width: 100%;
  margin-left: 27px;
  margin-top: -4px;
}

body.dark .routine-card  { backdrop-filter: var(--glass-blur); }
body.github-dark .routine-card { background: var(--card-bg); }

.routine-card.done { opacity: 0.45; }

.routine-card:hover { border-color: var(--primary-subtle); }

.routine-checkbox {
  width: 17px;
  height: 17px;
  border: 2px solid var(--card-border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.routine-checkbox:hover { border-color: var(--primary); }
.routine-checkbox.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.routine-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.routine-card.done .routine-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.routine-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 44px;
  text-align: right;
}

.routine-card:not(.done) .routine-time { color: var(--text-muted); }
.routine-running .routine-time { color: var(--primary); }

.routine-actions { display: flex; gap: 3px; }

.routine-streak {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.45;
}
.routine-streak:not(.routine-streak-zero) {
  opacity: 1;
  color: #f97316;
}
.routine-streak-hot {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239,68,68,0.5);
}

.routine-interval {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--project-bg);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.routine-interval-due {
  color: #fff;
  background: var(--primary);
}

.routine-interval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.routine-interval-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.routine-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Routine day tabs */
.routine-day-tabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 10px;
}

.routine-day-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px 10px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.routine-day-tab-week { flex: 1.4; }
.routine-day-tab:hover { border-color: var(--primary-subtle); }
.routine-day-tab.active {
  border-color: var(--primary);
  color: var(--text);
}
.routine-day-tab.is-today .routine-day-tab-label { color: var(--text); }
.routine-day-tab.is-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}

.routine-day-tab-count {
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 14px;
  line-height: 14px;
  padding: 0 4px;
  text-align: center;
  border-radius: 7px;
  background: var(--project-bg);
  color: var(--text-muted);
}
.routine-day-tab.active .routine-day-tab-count {
  background: var(--primary);
  color: #fff;
}

/* Routine create-form day picker */
.routine-day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.routine-day-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.routine-day-chip:hover { border-color: var(--primary-subtle); }
.routine-day-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.routine-day-chip-week { margin-left: auto; }

/* "All week" badge shown on a routine card inside a single-day view */
.routine-week-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--project-bg);
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ========================= */
/* Events                    */
/* ========================= */
/* Queue View                  */
/* ========================= */

.queue-view { display: flex; flex-direction: column; gap: 0; }

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

.queue-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.queue-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  margin-bottom: 12px;
}

.queue-create-form.hidden { display: none; }

.queue-description-input {
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  resize: vertical;
}

.queue-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.queue-field select {
  padding: 6px 8px;
  font-size: 13px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  color: var(--text);
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.queue-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-group-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
}

.queue-separator {
  height: 1px;
  background: var(--card-border);
  margin: 16px 0 8px;
}

.queue-done-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.queue-item.queue-item-done {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  opacity: 0.5;
}

.queue-item.queue-item-done .queue-title {
  text-decoration: line-through;
  color: var(--text-muted);
  flex: 1;
}

.queue-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.priority-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.priority-badge.priority-high {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.priority-badge.priority-medium {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.priority-badge.priority-low {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

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

.queue-description {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

.queue-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-small:hover {
  background: var(--btn-hover-bg);
  border-color: var(--primary-accent);
}

.btn-small:active {
  opacity: 0.8;
}

.btn-small.btn-primary {
  background: var(--primary-accent);
  color: white;
  border-color: var(--primary-accent);
}

.btn-small.btn-primary:hover {
  opacity: 0.9;
  border-color: var(--primary-glow);
}

.btn-small.btn-danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  padding: 6px 8px;
}

.btn-small.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}

.queue-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.queue-empty.hidden { display: none; }

/* ========================= */
/* Events View                */
/* ========================= */

.events-view { display: flex; flex-direction: column; gap: 0; }

.events-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
}

.events-count-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-right: auto;
}

.events-view-toggle {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  overflow: hidden;
}
.events-view-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.events-view-btn:hover { color: var(--text); }
.events-view-btn.active {
  background: var(--primary);
  color: #fff;
}

/* Events calendar */
.events-calendar { display: flex; flex-direction: column; gap: 6px; }

.events-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.events-cal-year {
  height: 26px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
}
.events-cal-year:hover { border-color: var(--primary-subtle); }

.events-cal-navbtn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.events-cal-navbtn:hover { border-color: var(--primary-subtle); }
.events-cal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
}
.events-cal-today {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
}
.events-cal-today:hover { border-color: var(--primary-subtle); color: var(--text); }

.events-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.events-cal-weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.events-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.events-cal-cell {
  min-height: 62px;
  padding: 4px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.events-cal-cell:hover { border-color: var(--primary); }
.events-cal-blank {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.events-cal-blank:hover { border-color: transparent; }
.events-cal-daynum {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.events-cal-today-cell {
  border-color: var(--primary);
}
.events-cal-today-cell .events-cal-daynum {
  color: var(--primary);
  font-weight: 700;
}
.events-cal-has { background: var(--primary-subtle); }
.events-cal-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.events-cal-detail {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.events-cal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.events-cal-detail-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.events-cal-detail-add {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
}
.events-cal-detail-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}
.events-cal-detail-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.events-cal-detail-info { flex: 1; min-width: 0; }
.events-cal-detail-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-cal-detail-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ========================= */
/* Projects                  */
/* ========================= */

.projects-view { display: flex; flex-direction: column; gap: 0; }

.projects-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
}
.projects-count-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-right: auto;
}
.projects-view-toggle {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  overflow: hidden;
}
.projects-view-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.projects-view-btn:hover { color: var(--text); }
.projects-view-btn.active { background: var(--primary); color: #fff; }

.project-create-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}
.project-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.project-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  color: var(--text-muted);
}
.project-field input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
}
.project-field-color { flex: 0 0 64px; min-width: 64px; }
.project-field-color input { height: 32px; padding: 2px; cursor: pointer; }
.project-field-status input,
.project-links-input,
.project-images-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: inherit;
  resize: vertical;
}

/* Project list cards */
.projects-list { display: flex; flex-direction: column; gap: var(--space-card-gap); }
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-card-inner);
  padding: var(--space-card-pad-y) var(--space-card-pad-x);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.12s, box-shadow 0.2s;
  cursor: pointer;
}
/* Accent strip down the left edge */
.project-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--project-accent, var(--primary));
}
.project-card:hover {
  border-color: var(--project-accent, var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
body.dark .project-card { backdrop-filter: var(--glass-blur); }

.project-card-head { display: flex; align-items: center; gap: 10px; }
.project-title-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.project-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-accent, var(--primary)) 18%, transparent);
}
.project-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badge */
.project-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.project-status-active   { color: #2563eb; background: rgba(37,99,235,0.12); }
.project-status-upcoming { color: #6b7280; background: rgba(107,114,128,0.14); }
.project-status-overdue  { color: #ef4444; background: rgba(239,68,68,0.13); }
.project-status-complete { color: #10b981; background: rgba(16,185,129,0.14); }
.project-status-none     { color: var(--text-muted); background: var(--project-bg); }
.project-status-custom   { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }

.project-actions { display: flex; gap: 3px; flex-shrink: 0; }

.project-description {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, var(--text-muted));
  white-space: pre-wrap;
  margin-top: -3px;
}

/* Project detail: links, images, comments */
.project-links-list { display: flex; flex-wrap: wrap; gap: 6px; }
.project-link-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--primary);
  cursor: pointer;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-link-chip:hover { border-color: var(--primary); }

.project-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.project-image-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  cursor: pointer;
}

.project-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.project-comments-header {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.project-comment-input-row { display: flex; gap: 8px; align-items: flex-start; }
.project-comment-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: inherit;
  resize: vertical;
}
.project-comments-list { display: flex; flex-direction: column; gap: 10px; }
.project-comment-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--project-bg);
}
.project-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.project-comment-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.project-comment-delete:hover { color: var(--danger, #ef4444); }
.project-comment-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* Progress section */
.project-progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.project-bar-row { display: flex; align-items: center; gap: 10px; }
.project-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  width: 54px;
  flex-shrink: 0;
}
.project-bar {
  flex: 1;
  height: 8px;
  background: var(--project-bg);
  border-radius: 999px;
  overflow: hidden;
}
.project-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.project-bar-time { background: var(--text-muted); opacity: 0.55; }
.project-bar-overdue { background: #ef4444 !important; opacity: 1; }
.project-bar-pct {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  width: 86px;
  text-align: right;
  flex-shrink: 0;
}
.project-bar-pct-over { color: #ef4444; }

/* Footer meta */
.project-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  font-size: 11px;
  color: var(--text-muted);
}
.project-foot-item { display: inline-flex; align-items: center; gap: 5px; }
.project-foot-item svg { opacity: 0.75; flex-shrink: 0; }

.project-description-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 8px;
  border-radius: 6px;
  resize: vertical;
  width: 100%;
  padding-right: 30px;
}

.project-desc-wrap { position: relative; }
.emoji-insert-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.7;
}
.emoji-insert-btn:hover { opacity: 1; }

/* Shared emoji picker popup */
.emoji-picker {
  position: fixed;
  z-index: 10050;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: 236px;
}
.emoji-picker-item {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1.4;
  padding: 3px;
  border-radius: 4px;
  cursor: pointer;
}
.emoji-picker-item:hover { background: rgba(127,127,127,0.18); }

.projects-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Projects timeline (Gantt) */
.projects-timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-axis {
  position: relative;
  height: 18px;
  margin-left: 120px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--card-border);
}
.timeline-tick {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.timeline-body { position: relative; display: flex; flex-direction: column; gap: 6px; }
.timeline-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
  opacity: 0.6;
  margin-left: 120px;
  z-index: 2;
  pointer-events: none;
}
.timeline-row { display: flex; align-items: center; gap: 0; height: 26px; }
.timeline-row-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}
.timeline-track {
  position: relative;
  flex: 1;
  height: 18px;
  background: var(--project-bg);
  border-radius: 5px;
}
.timeline-bar {
  position: absolute;
  top: 0;
  height: 18px;
  border: 1px solid;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.timeline-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  opacity: 0.55;
}
.timeline-bar-text {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
  padding-left: 5px;
  white-space: nowrap;
}
.timeline-bar-overdue { border-style: dashed; }

.timeline-row-label {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}
.timeline-row-label-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.timeline-row-complete {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.timeline-row-complete:hover { opacity: 1; }
.timeline-row-complete.project-complete-active { color: #10b981; opacity: 1; }
.timeline-row-complete.project-archive-active { color: var(--primary); opacity: 1; }
.timeline-row-completed { opacity: 0.55; }

/* Completed / archived state on the list-view project card */
.project-card-completed { opacity: 0.6; }
.project-card-completed:hover { opacity: 0.85; }
.project-card-archived { opacity: 0.5; }
.project-card-archived:hover { opacity: 0.8; }
.project-actions .project-complete-active,
.project-detail-actions .project-complete-active {
  color: #10b981;
  border-color: #10b981;
}
.project-actions .project-archive-active,
.project-detail-actions .project-archive-active {
  color: var(--primary);
  border-color: var(--primary);
}

#projectsShowArchivedBtn { font-size: 11px; padding: 5px 10px; }
#projectsShowArchivedBtn.active { color: var(--primary); border-color: var(--primary); }

/* ========================= */
/* Project Detail Page       */
/* ========================= */

.project-detail-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-detail-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0 6px;
}
.project-detail-name {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-detail-actions { display: flex; gap: 3px; flex-shrink: 0; }

.project-detail-view-toggle { margin-bottom: 2px; }

.project-detail-list, .project-detail-board, .project-detail-whiteboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.project-detail-list.hidden, .project-detail-board.hidden, .project-detail-whiteboard.hidden { display: none; }

/* The Mind Map view gets reparented in here when a project's Whiteboard
   sub-view is open (see mmEmbedIntoProject / mmReturnToOwnView in JS). It
   needs a shorter height than its normal full-page slot, since it now sits
   below the project header, description and progress bars. */
.mind-map-view.mind-map-embedded { height: 60vh; }
.mind-map-embedded #mmClearAll { display: none; }

.project-detail-section { display: flex; flex-direction: column; gap: 10px; }
.project-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-detail-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.project-ticket-list { display: flex; flex-direction: column; gap: 8px; }
.project-ticket {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}
.project-ticket-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.project-ticket-time {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.project-ticket.project-ticket-done .project-ticket-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Kanban board */
.project-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.project-board-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--project-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.project-board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.project-board-col-count {
  background: var(--card-bg);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}
.project-board-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.project-board-col-body .project-ticket,
.project-board-col-body .queue-item {
  padding: 8px;
}
.project-board-empty {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 4px;
}

@media (max-width: 720px) {
  .project-board { grid-template-columns: 1fr; }
}

/* ========================= */
/* Mobile / narrow phones    */
/* ========================= */

@media (max-width: 640px) {
  body { padding: 48px 12px 16px; }

  /* Top bar becomes two rows on a phone: the tab buttons wrap across the
     top, then the search field and the action cluster share the row below.
     .top-actions is normally pulled out of flow via position:fixed to float
     over the top-right corner at desktop widths; on a phone that both
     overlaps the tab row and (once it flowed back into a nowrap/scroll bar)
     pushed New task / Sync / Options / Pomodoro off-screen — so here it
     flows back in as a normal wrapped row that stays fully on screen. */
  .top-bar {
    flex-wrap: wrap;
    overflow: visible;
  }
  .top-bar .tab-btn { order: 1; }
  .top-bar #taskSearch {
    order: 2;
    flex: 1 1 60%;
  }
  .top-actions {
    order: 3;
    position: static;
    flex: 0 0 auto;
  }

  /* Expanded task card: the action cluster (timer / pomodoro / done / edit /
     delete + elapsed time) has flex-shrink:0, so on a narrow screen it
     starved the title down to a one-word-per-line column wedged against it.
     Drop it onto its own full-width row under the title instead. Collapsed
     cards only show the timer button, so they already fit and are left as-is. */
  .task-card:not(.task-collapsed) .task-card-body { flex-wrap: wrap; }
  .task-card:not(.task-collapsed) .task-right {
    flex-basis: 100%;
    align-items: flex-start;
    margin-top: 8px;
    padding-left: 27px; /* line up under the title, clear of the lead column */
  }
  .task-card:not(.task-collapsed) .task-right-row { width: 100%; }

  .login-card {
    width: min(320px, calc(100vw - 32px));
    padding: 32px 24px;
  }

  .report-top-row,
  .report-bottom-row,
  .report-date-range {
    flex-wrap: wrap;
  }

  .events-cal-cell {
    min-height: 44px;
    padding: 2px;
  }
}

.events-cal-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.events-cal-chip {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-cal-more {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  padding-left: 2px;
}

.event-create-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

.event-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  color: var(--text-muted);
}
.event-field select,
.event-field input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

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

.event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-card-pad-y) var(--space-card-pad-x);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, transform 0.12s;
}
body.dark .event-card { backdrop-filter: var(--glass-blur); }
body.github-dark .event-card { background: var(--card-bg); }
.event-card:hover { border-color: var(--primary-subtle); transform: translateY(-1px); }
.event-card.event-soon { border-color: var(--primary-subtle); }
.event-card.event-overdue { border-color: rgba(239, 68, 68, 0.5); }

.event-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--project-bg);
  line-height: 1;
}
.event-date-month {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.event-date-day {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.event-overdue .event-date-day { color: #ef4444; }

.event-main { flex: 1; min-width: 0; }
.event-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.event-countdown {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.event-countdown-soon { color: var(--primary); }
.event-countdown-overdue { color: #ef4444; }

.event-actions { display: flex; gap: 3px; flex-shrink: 0; }

.events-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ========================= */
/* Mind Map                  */
/* ========================= */

.mind-map-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}

.mm-view-toggle { margin: 4px 0 2px; flex-shrink: 0; align-self: flex-start; }

/* Project nodes — the Mind Map tab's "Projects" view reuses the same
   draggable canvas as Tasks, just with one node per project instead of
   per task/note. */
.mm-node.mm-node-proj { min-width: 140px; font-weight: 650; }
.mm-node.mm-node-proj-archived { opacity: 0.5; }
.mm-node.mm-node-proj-archived:hover { opacity: 0.8; }
.mm-node.mm-node-queue-root { min-width: 100px; font-weight: 650; }
.mm-node-proj-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}
.mm-node-proj-stat {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: inherit;
  opacity: 0.8;
  white-space: nowrap;
}

.mm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  flex-shrink: 0;
}

.mm-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}

.mm-tool-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 0 10px;
  height: 28px;
}

.mm-tool-danger {
  color: var(--danger);
  border-color: var(--danger);
  opacity: 0.7;
}
.mm-tool-danger:hover { opacity: 1; }

.mm-canvas-wrap {
  flex: 1;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--bg-deep);
  position: relative;
  cursor: crosshair;
}

.mm-canvas {
  width: 3000px;
  height: 2000px;
  position: relative;
}

.mm-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.mm-project-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.mm-project-btn {
  padding: 2px 10px;
  height: 24px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.mm-project-btn:hover { border-color: var(--primary); color: var(--text); }
.mm-project-btn-active {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.mm-node {
  position: absolute;
  min-width: 80px;
  max-width: 200px;
  padding: 6px 14px 7px;
  border-radius: 20px;
  border: 2px solid transparent;
  cursor: grab;
  user-select: none;
  touch-action: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
  z-index: 2;
}

.mm-node-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-node-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}

.mm-node-project {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: inherit;
  opacity: 0.75;
  white-space: nowrap;
}

.mm-node-project-inherited {
  font-size: 10px;
  font-weight: 400;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px dashed currentColor;
  color: inherit;
  opacity: 0.38;
  white-space: nowrap;
}

.mm-node-dim {
  opacity: 0.12 !important;
  pointer-events: none;
}

.mm-node:hover { filter: brightness(1.05); }
.mm-node:active { cursor: grabbing; }

.mm-node.mm-node-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.mm-node.mm-node-connect-target {
  border-color: #54aeff !important;
  box-shadow: 0 0 0 3px rgba(84,174,255,0.3);
  cursor: pointer;
}

.mm-node-input {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-align: center;
  width: 100%;
  min-width: 60px;
  padding: 0;
  height: auto;
  display: block;
}

/* Sticky notes — a distinct node kind on the Whiteboard: freeform text,
   not linked to a task, sized/shaped like a post-it rather than a pill. */
.mm-node.mm-node-note {
  min-width: 150px;
  max-width: 220px;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 4px;
  text-align: left;
  box-shadow: 3px 4px 10px rgba(0,0,0,0.22);
  cursor: grab;
}
.mm-node-note-text {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}
.mm-node-note-placeholder { opacity: 0.5; font-style: italic; }

.mm-node-note-edit { display: flex; flex-direction: column; gap: 6px; }
.mm-node-textarea {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  width: 100%;
  min-width: 130px;
  min-height: 70px;
  padding: 0;
  resize: none;
}
.mm-note-emoji-btn {
  align-self: flex-end;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,0.15);
  border: 1px solid currentColor;
  opacity: 0.55;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
}
.mm-note-emoji-btn:hover { opacity: 0.9; }

.mm-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
  min-width: 160px;
  backdrop-filter: var(--glass-blur);
}

/* Dark theme's --card-bg is translucent; give popup menus a solid backing so
   they match the other dropdowns (options / pomodoro / project picker). */
body.dark .mm-context-menu,
body.dark .mm-tasks-panel {
  background: #16161e;
  border-color: rgba(255,255,255,0.1);
}

.mm-ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.mm-ctx-item:hover { background: var(--primary-subtle); color: var(--text); }
.mm-ctx-item:disabled { opacity: 0.35; cursor: not-allowed; }
.mm-ctx-item:disabled:hover { background: none; }
.mm-ctx-danger { color: var(--danger); }
.mm-ctx-danger:hover { background: var(--danger-glow); color: var(--danger); }

.mm-ctx-sep {
  height: 1px;
  background: var(--card-border);
  margin: 3px 0;
}

.mm-canvas-wrap.mm-connect-mode { cursor: default; }
.mm-connect-mode .mm-node { cursor: pointer; }

/* From Tasks panel */
.mm-tasks-panel {
  position: fixed;
  z-index: 9998;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 260px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
}

.mm-tasks-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.mm-tasks-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  font-family: inherit;
}
.mm-tasks-panel-close:hover { color: var(--text); }

.mm-tasks-panel-addall {
  padding: 6px 8px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.mm-addall-btn { width: 100%; font-size: 12px; height: 28px; }

.mm-tasks-panel-list { overflow-y: auto; flex: 1; }

.mm-tasks-panel-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--card-border);
}
.mm-tasks-panel-item:last-child { border-bottom: none; }
.mm-tasks-panel-item.mm-item-added { opacity: 0.35; pointer-events: none; }

.mm-tasks-panel-item-title {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-tasks-panel-item-projects {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

.mm-tasks-panel-add-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  color: var(--primary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 6px;
  height: 22px;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.12s;
}
.mm-tasks-panel-add-btn:hover { background: var(--primary-subtle); }
.mm-tasks-panel-add-btn-label { font-size: 10px; font-weight: 600; padding: 0 7px; }

.mm-tasks-panel-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Create task overlay */
.mm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-create-task-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: var(--glass-blur);
}

.mm-form-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.mm-form-subtasks {
  border-top: 1px solid var(--card-border);
  padding-top: 8px;
  margin-top: 2px;
}

.mm-form-subtasks-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mm-form-subtasks-list { display: flex; flex-direction: column; gap: 4px; }

.mm-form-subtask-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
  padding: 1px 0;
}

.mm-form-subtask-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
  padding: 0;
}

/* ========================= */
/* Subtasks                  */
/* ========================= */

.subtask-section {
  border-top: 1px solid var(--card-border);
  padding: 5px 12px 7px;
}

.subtask-header {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.subtask-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.subtask-mini-bar {
  flex: 1;
  height: 3px;
  background: var(--card-border);
  border-radius: 2px;
  overflow: hidden;
  min-width: 30px;
}

.subtask-mini-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s;
}

.subtask-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color 0.12s, border-color 0.12s;
}
.subtask-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.subtask-toggle.expanded svg { transform: rotate(180deg); }
.subtask-header:hover .subtask-toggle { color: var(--primary); border-color: var(--primary); }

.subtask-body { margin-top: 5px; }

.subtask-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12px;
  border-radius: 4px;
}

.subtask-item.subtask-dragging { opacity: 0.4; }
.subtask-item.subtask-drag-over {
  box-shadow: inset 0 2px 0 var(--primary);
}

.subtask-drag-handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--text-muted);
  opacity: 0;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  transition: opacity 0.1s;
}
.subtask-item:hover .subtask-drag-handle { opacity: 0.5; }
.subtask-drag-handle:hover { opacity: 1 !important; }
.subtask-drag-handle:active { cursor: grabbing; }

.subtask-edit-input {
  flex: 1;
  height: 22px;
  font-size: 12px;
  padding: 0 6px;
  font-family: inherit;
}

.subtask-cb {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
  padding: 0;
}

.subtask-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtask-done {
  text-decoration: line-through;
  opacity: 0.4;
}

.subtask-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  flex-shrink: 0;
  font-family: inherit;
}
.subtask-item:hover .subtask-del { opacity: 0.55; }
.subtask-del:hover { opacity: 1 !important; color: var(--danger); }

.subtask-add-row {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.subtask-add-input {
  flex: 1;
  height: 26px;
  font-size: 12px;
  padding: 0 8px;
}

.subtask-add-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.subtask-add-btn svg { width: 13px; height: 13px; }
.subtask-add-btn:hover { background: var(--primary-hover); }
body.dark .subtask-add-btn { color: #000; box-shadow: 0 0 14px var(--primary-glow); }
body.dark .subtask-add-btn:hover { box-shadow: 0 0 22px var(--primary-glow); }
body.github-dark .subtask-add-btn { color: #fff; box-shadow: 0 0 14px var(--primary-glow); }
body.github-dark .subtask-add-btn:hover { box-shadow: 0 0 22px var(--primary-glow); }

/* ── Archive ─────────────────────────────────────────────────────────────────── */

.archive-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 2px;
}

.archive-delete-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--danger);
  border-color: var(--danger);
}

.archive-delete-btn:hover {
  background: rgba(247,129,102,0.1);
}

.archive-task-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
}

.options-select {
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 11px;
  height: 24px;
  padding: 0 4px;
  cursor: pointer;
}

.options-select:focus {
  outline: none;
  border-color: var(--primary);
}


/* ── Completed tab archive bar ───────────────────────────────────────────────── */

.completed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  position: sticky;
  top: 48px;
  z-index: 10;
  background: var(--bg);
}

.completed-type-toggle { flex-shrink: 0; }

.completed-archive-select {
  min-width: 180px;
}

.completed-projects-section {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.completed-projects-section .project-detail-section-title { padding: 0; }
.completed-projects-section .projects-list { gap: var(--space-card-gap); }

.completed-archive-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.archive-view-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 4px;
  background: var(--primary-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.archive-view-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.archive-view-meta {
  font-size: 11px;
  color: var(--text-muted);
}