/* CAFA Command Center v5.0 - CAFA Brand Theme
   Hybrid UI: Dark nav/sidebar, cream content area. Rounded corners. */

:root {
  /* Core surfaces (dark nav) */
  --bg: #081E28;
  --deep: #081E28;
  --panel: #0F1C22;
  --card: #0F1C22;
  --surface: #0D2A35;
  --surface-2: #11323E;
  --border: rgba(201,168,76,.12);
  --border-hover: rgba(201,168,76,.20);

  /* v5.0: Content area (cream/light) */
  --content-bg: #F7F5F0;
  --content-surface: #FFFFFF;
  --content-text: #1a2a32;
  --content-muted: #5a6a72;
  --content-border: rgba(8,30,40,0.08);

  /* Text hierarchy (dark surfaces) */
  --text: #FAF8F3;
  --cream: #FAF8F3;
  --text-1: #FAF8F3;
  --text-2: rgba(250,248,243,.7);
  --text-3: #6B8896;
  --text-4: rgba(107,136,150,.6);
  
  /* v5.0: Sidebar specific */
  --sidebar-text: #9FB3BC;
  --sidebar-muted: #6B8896;

  /* CAFA Brand teal */
  --dark: #081E28;
  --dark-2: #0F1C22;
  --teal: #1A6B8A;
  --teal-dk: #15586F;
  --teal-dark: #15586F;
  --teal-light: #2A8BB0;
  --teal-lt: #5BA8C4;
  --teal-dim: rgba(26,107,138,.12);

  /* Accent and status */
  --gold: #C9A84C;
  --gold-light: #E2C97E;
  --gold-mid: #B8922E;
  --gold-dark: #A07830;
  --gold-dim: rgba(201,168,76,.12);
  --accent: #C9A84C;
  --accentAlt: #E2C97E;
  --green: #2ead6b;
  --green-light: #34D67E;
  --green-dim: rgba(46,173,107,.10);
  --red: #D64545;
  --red-dim: rgba(214,69,69,.08);
  --amber: #C9A84C;
  --amber-dim: rgba(201,168,76,.10);
  --blue: #1A6B8A;
  --blue-dim: rgba(26,107,138,.10);
  --purple: #6B8896;
  --purple-dim: rgba(107,136,150,.08);

  /* v5.0: Focus timer system colour (approved exception) */
  --focus: #F59E0B;
  --focus-dark: #D97706;
  --focus-glow: rgba(245,158,11,0.15);

  /* Pillar colours */
  --commerce: #C9A84C;
  --commerce-dk: #E2C97E;
  --commerce-dim: rgba(201,168,76,.08);
  --architecture: #1A6B8A;
  --architecture-dk: #15586F;
  --architecture-dim: rgba(26,107,138,.08);
  --finance: #2ead6b;
  --finance-dk: #249358;
  --finance-dim: rgba(46,173,107,.08);
  --advisory: #6B8896;
  --advisory-dk: #4a5e6e;
  --advisory-dim: rgba(107,136,150,.08);

  /* Level hierarchy */
  --l3: #D64545;
  --l3-dim: rgba(214,69,69,.10);
  --l2: #C9A84C;
  --l2-dim: rgba(201,168,76,.10);
  --l1: #2ead6b;
  --l1-dim: rgba(46,173,107,.10);

  /* Glass */
  --glass: rgba(15,28,34,.85);
  --glass-border: rgba(201,168,76,.08);
  --glass-hover: rgba(201,168,76,.06);

  /* Fonts */
  --mono: 'JetBrains Mono', monospace;
  --sans: 'DM Sans', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  
  /* v5.0: Rounded corners */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  
  /* v5.0: Shadows */
  --shadow-sm: 0 1px 3px rgba(8,30,40,0.08);
  --shadow-md: 0 4px 12px rgba(8,30,40,0.1);
  --shadow-lg: 0 8px 30px rgba(8,30,40,0.15);
  
  /* v5.0: Animations */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --bg-2: #0F1C22;
}

/* ═══════ DARK MODE (backward compat, same values as default) ═══════ */
[data-theme="dark"] {
  --bg: #081E28;
  --panel: #0F1C22;
  --card: #0F1C22;
  --surface: #0D2A35;
  --surface-2: #11323E;
  --border: rgba(201,168,76,.12);
  --border-hover: rgba(201,168,76,.20);
  --text: #FAF8F3;
  --text-1: #FAF8F3;
  --text-2: rgba(250,248,243,.7);
  --text-3: #6B8896;
  --text-4: rgba(107,136,150,.6);
  --teal: #1A6B8A;
  --teal-dim: rgba(26,107,138,.12);
  --green-dim: rgba(46,173,107,.12);
  --red-dim: rgba(217,48,37,.10);
  --gold-dim: rgba(201,168,76,.14);
  --amber-dim: rgba(201,168,76,.12);
  --blue: #1A6B8A;
  --blue-dim: rgba(26,107,138,.12);
  --purple: #6B8896;
  --purple-dim: rgba(107,136,150,.10);
  --commerce-dim: rgba(201,168,76,.12);
  --architecture-dim: rgba(26,107,138,.12);
  --finance-dim: rgba(46,173,107,.12);
  --advisory-dim: rgba(107,136,150,.08);
  --l2-dim: rgba(201,168,76,.14);
  --l1-dim: rgba(46,173,107,.14);
  --l3-dim: rgba(217,48,37,.14);
  --glass: rgba(15,28,34,.85);
  --glass-border: rgba(201,168,76,.06);
  --glass-hover: rgba(201,168,76,.06);
  --bg-2: #0F1C22;
}
[data-theme="dark"] body { color-scheme: dark; }

/* ═══════ DARK COMPONENT OVERRIDES (backward compat) ═══════ */
[data-theme="dark"] .sidebar { background: var(--bg); }
[data-theme="dark"] .topbar { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .avatar { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] .role-btn:hover { background: rgba(250,248,243,.04); }
[data-theme="dark"] .task-item { background: var(--content-surface); border-color: var(--content-border); box-shadow: 0 1px 4px rgba(8,30,40,.04); }
[data-theme="dark"] .task-item:hover { background: var(--content-surface); box-shadow: 0 2px 8px rgba(8,30,40,.08); }
[data-theme="dark"] .task-item.selected { background: rgba(26,107,138,.06); box-shadow: 0 2px 8px rgba(26,107,138,.1); }
[data-theme="dark"] .task-item.is-focusing { background: rgba(26,107,138,.06); }
[data-theme="dark"] .todo-add-input { color: var(--content-text); }
[data-theme="dark"] .clockin-modal { background: var(--card); border: 1px solid var(--border); }
[data-theme="dark"] .clockin-time-row { background: var(--surface); }
[data-theme="dark"] .break-overlay { background: radial-gradient(ellipse at 50% 40%, rgba(26,107,138,.08) 0%, #0D2A35 60%, #081E28 100%); }
[data-theme="dark"] .break-content { background: transparent; }
[data-theme="dark"] .break-timer { color: #FAF8F3; text-shadow: 0 0 40px rgba(26,107,138,.2); }
[data-theme="dark"] .break-stat { background: transparent; }
[data-theme="dark"] .ts-edit-input { color-scheme: dark; }
[data-theme="dark"] .login-box { background: var(--card); border: 1px solid var(--border); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color: var(--text); }
[data-theme="dark"] .smm-member-btn { color: var(--text-2); }
[data-theme="dark"] .smm-member-btn.active { background: var(--teal); color: var(--text); }
[data-theme="dark"] .sb-item:hover { background: rgba(250,248,243,.04); }
[data-theme="dark"] .sb-nav-item:hover { background: rgba(250,248,243,.04); }
[data-theme="dark"] .pulse-item:hover { background: rgba(250,248,243,.03); }
[data-theme="dark"] .pomo-header:hover { background: rgba(250,248,243,.03); }
[data-theme="dark"] .standup-overlay .standup-modal { background: var(--card); }
[data-theme="dark"] .gam-overlay .gam-modal, [data-theme="dark"] .global-add-inner { background: var(--card); border: 1px solid var(--border); }
[data-theme="dark"] .notif-panel { background: rgba(15,28,34,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
[data-theme="dark"] .space-manage-modal .space-manage-inner { background: var(--card); }
[data-theme="dark"] .msg-compose-modal .msg-compose-inner { background: var(--card); }
[data-theme="dark"] .task-slideout { background: rgba(15,28,34,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: -4px 0 24px rgba(0,0,0,.3); }
[data-theme="dark"] .slideout-backdrop.open { background: rgba(0,0,0,.40); }
[data-theme="dark"] .ts-field:hover { background: var(--surface); }
[data-theme="dark"] .todo-add-row { background: var(--content-surface); border-color: var(--content-border); }
[data-theme="dark"] .wk-day-head { background: rgba(26,107,138,0.06); color: var(--content-text); }
[data-theme="dark"] .wk-task:hover { background: rgba(26,107,138,0.04); }
[data-theme="dark"] .wk-task { border-bottom-color: var(--content-border); }
[data-theme="dark"] .task-focus-btn { border-color: var(--border); }
[data-theme="dark"] .task-focus-btn:hover { border-color: var(--teal); }
[data-theme="dark"] .sb-group-menu { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .sb-group-member-panel { background: var(--card); }
/* v5.0: Main area uses cream background (hybrid theme) */
[data-theme="dark"] .main { background: var(--content-bg); }
[data-theme="dark"] .main-inner { background: var(--content-bg); }
[data-theme="dark"] .detail-panel { background: var(--content-bg); }
[data-theme="dark"] .dp-close { background: var(--content-bg); border-color: var(--content-border); color: var(--content-muted); }
[data-theme="dark"] .dp-close:hover { background: var(--content-border); color: var(--content-text); }
[data-theme="dark"] .dp-notes { background: var(--content-surface); border-color: var(--content-border); color: var(--content-text); }
[data-theme="dark"] .dp-header { background: var(--content-surface); }
[data-theme="dark"] .dp-title { color: var(--content-text); font-size: 15px; font-weight: 500; }
[data-theme="dark"] .dp-row { color: var(--content-text); }
[data-theme="dark"] .dp-row-label { color: var(--content-text); }
[data-theme="dark"] .dp-row-icon { color: var(--content-muted); }
[data-theme="dark"] .ambient-orb { opacity: .03; }
[data-theme="dark"] .logo { background: transparent; }

/* Colour scheme: dark */
body { color-scheme: dark; }

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-width: 600px; overflow-x: auto; height: 100vh; }

/* ═══════ COMPONENT DEFAULTS (v5.0 hybrid) ═══════ */
.sidebar { background: var(--bg); }
.topbar { background: var(--bg); border-bottom-color: var(--border); }
.avatar { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.role-btn:hover { background: rgba(250,248,243,.04); }
/* v5.0: Task items use white background on cream */
.task-item { background: var(--content-surface); border-color: var(--content-border); box-shadow: 0 1px 4px rgba(8,30,40,.04); }
.task-item:hover { background: var(--content-surface); box-shadow: 0 4px 20px rgba(8,30,40,.06); }
.task-item.selected { background: rgba(26,107,138,.04); box-shadow: 0 2px 8px rgba(26,107,138,.12); }
.task-item.is-focusing { background: linear-gradient(135deg, #FFFBF5 0%, #FFF8EE 100%); }
.todo-add-input { color: var(--content-text); background: var(--content-surface); }
.clockin-modal { background: var(--card); border: 1px solid var(--border); }
.clockin-time-row { background: var(--surface); }
.break-content { background: transparent; }
.break-overlay { background: radial-gradient(ellipse at 50% 40%, rgba(26,107,138,.08) 0%, #0D2A35 60%, #081E28 100%); }
.ts-edit-input { color-scheme: dark; }
.login-box { background: var(--card); border: 1px solid var(--border); }
input, textarea, select { color: var(--text); background: var(--card); border-color: var(--border); }
.smm-member-btn { color: var(--text-2); }
.smm-member-btn.active { background: var(--teal); color: var(--text); }
.sb-item:hover { background: rgba(250,248,243,.04); }
.sb-nav-item:hover { background: rgba(250,248,243,.04); }
.pulse-item:hover { background: rgba(250,248,243,.03); }
.break-stat { background: transparent; }
.pomo-header:hover { background: rgba(250,248,243,.03); }
.standup-overlay .standup-modal { background: var(--card); }
.gam-overlay .gam-modal, .global-add-inner { background: var(--card); border: 1px solid var(--border); }
.notif-panel { background: rgba(15,28,34,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.space-manage-modal .space-manage-inner { background: var(--card); }
.msg-compose-modal .msg-compose-inner { background: var(--card); }
.task-slideout { background: rgba(15,28,34,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: -4px 0 24px rgba(0,0,0,.3); }
.slideout-backdrop.open { background: rgba(0,0,0,.40); }
.ts-field:hover { background: var(--surface); }
/* v5.0: Add task row uses dashed border on cream */
.todo-add-row { background: var(--content-surface); border: 2px dashed var(--content-border); }
.wk-day-head { background: rgba(26,107,138,0.06); color: var(--content-text); }
.wk-task:hover { background: rgba(26,107,138,0.04); }
.wk-task { border-bottom-color: var(--content-border); }
.task-focus-btn { border-color: rgba(26,107,138,.2); background: rgba(26,107,138,.08); color: var(--teal); }
.task-focus-btn:hover { border-color: var(--teal); background: var(--teal); color: var(--cream); }
.sb-group-menu { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sb-group-member-panel { background: var(--card); }
/* v5.0: Main area uses cream background */
.main { background: var(--content-bg); }
.main-inner { background: var(--content-bg); }
.detail-panel { background: var(--content-bg); }
.dp-close { background: var(--content-bg); }
.dp-close:hover { background: var(--content-border); }
.dp-notes { background: var(--content-surface); border-color: var(--content-border); color: var(--content-text); }

/* v5.0: Detail panel - cream background like content area */
.dp-header { background: var(--content-surface) !important; border-bottom: 1px solid var(--content-border) !important; }
.dp-title { color: var(--content-text) !important; font-size: 15px !important; font-weight: 500 !important; }
.dp-title::placeholder { color: var(--content-muted); }
.dp-check { border-color: var(--content-border) !important; }
.dp-check:hover { border-color: var(--teal) !important; }
.dp-star { color: var(--content-muted); }
.dp-star:hover { color: var(--gold); }
.dp-star.starred { color: var(--gold); }
.dp-close { background: var(--content-bg) !important; border-color: var(--content-border) !important; color: var(--content-muted) !important; border-radius: 4px !important; }
.dp-close:hover { background: var(--content-border) !important; color: var(--content-text) !important; }

/* v5.0: Detail panel rows */
.dp-row { color: var(--content-text) !important; border-bottom: 1px solid var(--content-border) !important; background: transparent !important; }
.dp-row:hover { background: rgba(26,107,138,0.04) !important; }
.dp-row-label { color: var(--content-text) !important; }
.dp-row-icon { color: var(--content-muted) !important; }
.dp-row-icon svg { stroke: var(--content-muted) !important; }
.dp-row-value { color: var(--content-muted) !important; }
.dp-row.active { color: var(--teal) !important; }
.dp-row.active .dp-row-label { color: var(--teal) !important; }
.dp-row.active .dp-row-icon { color: var(--teal) !important; }
.dp-row.overdue { color: var(--red) !important; }
.dp-row.overdue .dp-row-label { color: var(--red) !important; }
.dp-row.overdue .dp-row-icon { color: var(--red) !important; }
.dp-row-select { background: var(--teal) !important; border: none !important; color: var(--cream) !important; border-radius: 4px !important; padding: 6px 12px !important; }
.dp-section-head { color: var(--content-muted) !important; background: transparent !important; }

/* v5.0: Detail panel section headers */
.dp-section-head { 
  color: var(--content-muted) !important; 
  background: transparent !important;
  padding: 14px 18px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: 1px solid var(--content-border) !important;
}

/* v5.0: Detail panel steps/subtasks */
.dp-steps { border-bottom: 1px solid var(--content-border) !important; background: transparent !important; }
.dp-step { border-bottom: 1px solid var(--content-border) !important; color: var(--content-text) !important; }
.dp-step:last-child { border-bottom: none !important; }
.dp-step-check { border-color: var(--content-border) !important; }
.dp-step-check:hover { border-color: var(--teal) !important; }
.dp-step-text { color: var(--content-text) !important; }
.dp-step.done .dp-step-text { color: var(--content-muted) !important; }
.dp-step-del { color: var(--content-muted) !important; }
.dp-step-add { color: var(--content-muted) !important; }
.dp-step-add:hover { color: var(--teal) !important; }
.dp-step-input { color: var(--content-text) !important; background: transparent !important; }
.dp-step-input::placeholder { color: var(--content-muted) !important; }

/* v5.0: Detail panel notes */
.dp-notes { 
  background: var(--content-surface) !important; 
  border: 1px solid var(--content-border) !important; 
  color: var(--content-text) !important;
  border-radius: 6px !important;
}
.dp-notes:focus { border-color: var(--teal) !important; }
.dp-notes::placeholder { color: var(--content-muted) !important; }

/* v5.0: Detail panel comments */
.dp-comments { 
  background: transparent !important; 
  padding: 0 18px 12px !important;
  border-top: 1px solid var(--content-border) !important;
}
.dp-comments-title { 
  color: var(--content-muted) !important; 
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 0 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
}
.dp-comment-count { 
  background: var(--teal) !important; 
  color: var(--cream) !important; 
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 8px !important;
}
.dp-comments-list { margin-bottom: 8px !important; background: transparent !important; }
.dp-comment { 
  border-bottom: 1px solid var(--content-border) !important; 
  padding: 6px 0 !important;
  background: transparent !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--content-text) !important;
}
.dp-comment:last-child { border-bottom: none !important; }
.dp-comment-name { font-weight: 600 !important; color: var(--content-text) !important; }
.dp-comment-time { color: var(--content-muted) !important; }
.dp-comment-text { color: var(--content-text) !important; }
.dp-comment-input-row { 
  display: flex !important; 
  gap: 6px !important; 
  align-items: flex-end !important;
  background: transparent !important;
}
.dp-comment-input { 
  flex: 1 !important;
  background: var(--content-surface) !important; 
  border: 1px solid var(--content-border) !important; 
  color: var(--content-text) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-family: var(--sans) !important;
  resize: none !important;
}
.dp-comment-input:focus { border-color: var(--teal) !important; outline: none !important; }
.dp-comment-input::placeholder { color: var(--content-muted) !important; }
.dp-comment-send { 
  background: var(--teal) !important; 
  color: var(--cream) !important;
  border: none !important;
  border-radius: 4px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.dp-comment-send:hover { background: var(--teal-dk) !important; }
.dp-comment-send svg { stroke: var(--cream) !important; }

/* v5.0: Comments empty and view all states */
.dp-comments-empty {
  font-size: 10px !important;
  color: var(--content-muted) !important;
  padding: 6px 0 !important;
  text-align: center !important;
}
.dp-comments-viewall {
  font-size: 10px !important;
  color: var(--teal) !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}
.dp-comments-viewall:hover {
  color: var(--teal-dk) !important;
  text-decoration: underline !important;
}

/* v5.0: Detail panel activity - single line format */
.dp-activity { 
  padding: 0 18px 12px !important; 
  border-top: 1px solid var(--content-border) !important;
  background: transparent !important;
}
.dp-activity-title { 
  color: var(--content-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 0 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
}
.dp-activity-title:hover { color: var(--content-text) !important; }
.dp-activity-arrow { font-size: 8px !important; transition: transform 0.2s !important; }
.dp-activity-list { background: transparent !important; }
.dp-activity-empty {
  font-size: 10px !important;
  color: var(--content-muted) !important;
  padding: 6px 0 !important;
  text-align: center !important;
}
.dp-activity-item { 
  font-size: 10px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--content-border) !important;
  background: transparent !important;
  line-height: 1.4 !important;
}
.dp-activity-item:last-child { border-bottom: none !important; }
.dp-activity-name {
  font-weight: 600 !important;
  color: var(--content-text) !important;
}
.dp-activity-action {
  color: var(--content-text) !important;
}
.dp-activity-time {
  color: var(--content-muted) !important;
}
.dp-activity-old {
  background: rgba(214,69,69,0.1) !important;
  color: var(--red) !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  text-decoration: line-through !important;
}
.dp-activity-new {
  background: rgba(46,173,107,0.1) !important;
  color: var(--green) !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
}

/* v5.0: Detail panel delete button */
.dp-delete { 
  padding: 18px !important; 
  text-align: center !important; 
  border-top: 1px solid var(--content-border) !important;
  background: transparent !important;
}
.dp-delete-btn, .dp-del-btn {
  padding: 10px 24px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--red) !important;
  background: transparent !important;
  border: 1px solid var(--red) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
}
.dp-delete-btn:hover, .dp-del-btn:hover { 
  background: rgba(214,69,69,0.08) !important; 
}

/* v5.0: Recurrence picker */
.dp-recurrence-value { 
  color: var(--content-text) !important; 
  cursor: pointer !important;
  flex: 1 !important;
}
.dp-recurrence-value:hover { 
  background: rgba(26,107,138,0.08) !important; 
}
.dp-recurrence-picker { 
  background: var(--content-surface) !important; 
  border: 1px solid var(--content-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
.dp-recurrence-option { 
  color: var(--content-text) !important; 
}
.dp-recurrence-option:hover { 
  background: var(--content-bg) !important; 
}
.dp-recurrence-option.active { 
  background: rgba(26,107,138,0.1) !important; 
  color: var(--teal) !important; 
}
.dp-recurrence-option .dp-rec-icon { 
  color: var(--content-muted) !important; 
}
.dp-recurrence-days { 
  border-top: 1px solid var(--content-border) !important; 
}
.dp-recurrence-day { 
  border-color: var(--content-border) !important; 
  color: var(--content-text) !important; 
}
.dp-recurrence-day:hover { 
  border-color: var(--teal) !important; 
  color: var(--teal) !important; 
}
.dp-recurrence-custom { 
  border-top: 1px solid var(--content-border) !important; 
}
.dp-recurrence-custom input,
.dp-recurrence-custom select { 
  background: var(--content-surface) !important; 
  border-color: var(--content-border) !important; 
  color: var(--content-text) !important; 
}

/* v5.0: Detail panel row value styling */
.dp-row-value { 
  color: var(--content-muted) !important;
  font-size: 12px !important;
  font-family: var(--sans) !important;
}

.ambient-orb { opacity: .03; }
.logo { background: transparent; }

/* ═══════ Level badge component ═══════ */
.level-badge {
  font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 0;
  letter-spacing: .5px; display: inline-flex; align-items: center;
}
.level-badge.l3 { background: var(--l3-dim); color: var(--l3); }
.level-badge.l2 { background: var(--l2-dim); color: var(--l2); }
.level-badge.l1 { background: var(--l1-dim); color: var(--l1); }

/* ═══════ Status badge pill ═══════ */
.status-badge-pill {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.status-badge-pill .s-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-badge-pill.st-active .s-dot { background: var(--green); box-shadow: 0 0 6px rgba(46,173,107,.5); }
.status-badge-pill.st-active { background: var(--green-dim); color: var(--green); }
.status-badge-pill.st-soon .s-dot { background: var(--amber); }
.status-badge-pill.st-soon { background: var(--amber-dim); color: var(--amber); }
.status-badge-pill.st-overdue .s-dot { background: var(--red); }
.status-badge-pill.st-overdue { background: var(--red-dim); color: var(--red); }
.status-badge-pill.st-pending .s-dot { background: var(--text-4); }
.status-badge-pill.st-pending { background: var(--surface); color: var(--text-3); }

/* ═══════ Ambient orbs ═══════ */
.ambient-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient-orb {
  position: absolute; border-radius: 50%; filter: blur(160px); opacity: .03;
  animation: ambientFloat 30s ease-in-out infinite;
}
.amb-1 { width: 480px; height: 480px; bottom: -10%; right: -5%; background: var(--teal); }
.amb-2 { width: 340px; height: 340px; top: 8%; left: 12%; background: rgba(201,168,76,.3); }
@keyframes ambientFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(15px,-10px) scale(1.03); }
  66% { transform: translate(-10px,12px) scale(.97); }
}

/* ═══════ BOTTOM BAR ═══════ */
.cafa-bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  height: 30px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; min-width: 600px;
  background: #0F1C22; border-top: 1px solid rgba(201,168,76,.12);
}
.cafa-bb-left { display: flex; align-items: center; gap: 6px; }
.cafa-bb-dot { width: 5px; height: 5px; border-radius: 50%; background: #C9A84C; }
.cafa-bb-sync { font-size: 10px; color: rgba(250,248,243,.5); font-family: var(--mono); }
.cafa-bb-version { font-size: 10px; color: rgba(250,248,243,.25); font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════
   v5.0 SIDEBAR - EXACT MOCKUP STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Time Strip (Clock Section) */
.time-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--deep);
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.time-primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.time-primary > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.time-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.5px;
}
.time-ampm {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 300;
  color: var(--sidebar-text);
}
.time-zone {
  font-size: 9px;
  color: var(--sidebar-muted);
  letter-spacing: 0.3px;
}
.time-secondary { text-align: right; }
.time-npt {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--sidebar-text);
}
.time-npt-label {
  font-size: 8px;
  color: var(--sidebar-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Status Row */
.status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.status-text {
  font-size: 10px;
  font-weight: 500;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.status-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.status-btn {
  font-size: 9px;
  color: var(--sidebar-muted);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.status-btn:hover {
  color: var(--cream);
  border-color: var(--teal);
}

/* Time Summary (Today's Time) */
.time-summary {
  display: none;
}
.time-summary-slim {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(26,107,138,0.04);
}
.time-slim-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.time-slim-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
}
.time-slim-unit {
  font-size: 9px;
  color: var(--sidebar-muted);
}
.time-slim-detail {
  font-size: 9px;
  color: var(--sidebar-muted);
  margin-left: auto;
}
.time-summary-label,
.time-summary-row,
.time-summary-num,
.time-summary-unit,
.time-summary-detail { display: none; }

/* Navigation */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sb-nav::-webkit-scrollbar { width: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--sidebar-text);
  transition: all 0.12s;
  position: relative;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--teal);
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease;
}
.nav-item:hover {
  color: var(--cream);
  background: rgba(26,107,138,0.06);
}
.nav-item.active {
  color: var(--cream);
  background: rgba(26,107,138,0.1);
}
.nav-item.active::before { height: 20px; }
.nav-icon {
  width: 18px;
  font-size: 13px;
  text-align: center;
  opacity: 0.7;
}
.nav-count {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--teal-lt);
}
.nav-count.urgent { color: var(--red); }

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.04);
  margin: 8px 16px;
}
.nav-header {
  font-size: 9px;
  font-weight: 500;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 16px 16px 8px;
}

/* List Items */
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--sidebar-text);
  transition: all 0.12s;
}
.list-item:hover {
  color: var(--cream);
  background: rgba(26,107,138,0.06);
}
.list-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.list-dot.gold { background: var(--gold); }
.list-dot.teal { background: var(--teal); }
.list-dot.green { background: var(--green); }
.list-dot.blue { background: #4A90D9; }
.list-dot.purple { background: #8B5CF6; }
.list-dot.red { background: var(--red); }
.list-count {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--sidebar-muted);
}

/* New List / New Group Actions */
.list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}
.list-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.list-action-btn:hover { color: var(--cream); }
.list-action-btn svg { width: 14px; height: 14px; }

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: var(--deep);
  margin-top: auto;
}
.nepali-date {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.3px;
}
.gregorian-date {
  font-size: 10px;
  color: var(--sidebar-muted);
  margin-top: 2px;
}

/* ═══════ Hide old sidebar components ═══════ */
.clock-card,
.clock-tz-row,
.clock-status-row,
.todays-time-section,
.staff-progress-ring,
.stats-row,
.sb-nav-item,
.sb-section-divider,
.sb-divider {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 MAIN CONTENT AREA - CREAM BACKGROUND HYBRID THEME
   ═══════════════════════════════════════════════════════════════ */

/* Main area wrapper */
.main-area,
.main,
.main-inner,
#mainArea {
  background: var(--content-bg) !important;
}

/* Main header */
.main-header,
.myday-header,
.panel-header {
  padding: 24px 32px 20px !important;
  background: var(--content-surface) !important;
  border-bottom: 1px solid var(--content-border) !important;
}

.header-top,
.myday-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Page title - v5.0 */
.main-title,
.panel-title,
.myday-title,
.my-day-title {
  font-family: var(--serif) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  color: var(--content-text) !important;
  line-height: 1.1 !important;
}

.main-subtitle,
.panel-subtitle,
.myday-date {
  font-size: 12px !important;
  color: var(--content-muted) !important;
  margin-top: 4px !important;
}

/* Header actions */
.header-actions,
.myday-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* v5.0 Buttons */
.btn-secondary,
.view-btn,
.grid-btn,
.list-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  color: var(--content-muted) !important;
  background: transparent !important;
  border: 1px solid var(--content-border) !important;
  cursor: pointer;
  border-radius: 6px !important;
  font-family: var(--sans);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-secondary:hover,
.view-btn:hover {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  background: rgba(26,107,138,0.04) !important;
}
.btn-secondary.active,
.view-btn.active {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  background: rgba(26,107,138,0.06) !important;
}

.btn-primary,
.add-task-btn,
.primary-btn {
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cream) !important;
  background: var(--teal) !important;
  border: none !important;
  cursor: pointer;
  border-radius: 6px !important;
  font-family: var(--sans);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-primary:hover,
.add-task-btn:hover {
  background: var(--teal-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,107,138,0.25);
}

/* Progress bar v5.0 */
.progress-bar,
.myday-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px 16px;
  background: var(--content-surface);
}
.progress-track {
  flex: 1;
  height: 4px;
  background: var(--content-border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--green) 100%);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.progress-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.progress-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--content-muted);
}
.progress-stat-num {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--content-text);
}
.progress-stat-num.done { color: var(--green); }
.progress-stat-num.overdue { color: var(--red); }

/* Task area */
.task-area,
.myday-tasks,
.task-list-area,
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 32px 32px !important;
  background: var(--content-bg) !important;
}
.task-area::-webkit-scrollbar,
.myday-tasks::-webkit-scrollbar { width: 6px; }
.task-area::-webkit-scrollbar-track { background: transparent; }
.task-area::-webkit-scrollbar-thumb { 
  background: rgba(26,107,138,0.2); 
  border-radius: 3px;
}

/* Add task row v5.0 */
.add-task,
.todo-add-row,
.quick-add {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: var(--content-surface) !important;
  border: 2px dashed var(--content-border) !important;
  border-radius: 8px !important;
  margin: 20px 32px 20px 32px !important;
  cursor: pointer;
  transition: all 0.2s;
}
.add-task:hover,
.todo-add-row:hover {
  border-color: var(--teal) !important;
  border-style: solid !important;
  background: rgba(26,107,138,0.02) !important;
}
.add-icon,
.todo-add-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--content-border);
  border-radius: 50%;
  color: var(--content-muted);
  font-size: 16px;
  transition: all 0.2s;
}
.add-task:hover .add-icon,
.todo-add-row:hover .todo-add-icon {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}
.add-text,
.todo-add-text {
  font-size: 14px;
  color: var(--content-muted);
}
.add-shortcut {
  margin-left: auto;
  font-size: 10px;
  color: var(--content-muted);
  opacity: 0.5;
  background: var(--content-border);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Task sections v5.0 */
.task-section { margin-bottom: 24px; }
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-left: 4px;
  cursor: pointer;
}
.section-toggle {
  font-size: 10px;
  color: var(--content-muted);
  transition: transform 0.2s;
}
.section-header.collapsed .section-toggle {
  transform: rotate(-90deg);
}
.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.section-dot.urgent { background: var(--red); }
.section-dot.normal { background: var(--teal); }
.section-dot.done { background: var(--green); }

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--content-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-count {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--content-muted);
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 TASK CARDS - WHITE WITH SHADOW
   ═══════════════════════════════════════════════════════════════ */
.task,
.task-item,
.task-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: var(--content-surface) !important;
  border: 1px solid var(--content-border) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: none;
}
.task::before,
.task-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  border-radius: 10px 0 0 10px;
  transition: background 0.2s;
}
.task:hover,
.task-item:hover {
  border-color: rgba(26,107,138,0.2) !important;
  box-shadow: 0 4px 20px rgba(8,30,40,0.06) !important;
  transform: translateY(-1px);
}
.task:hover::before,
.task-item:hover::before { background: var(--teal); }

/* Task focusing state */
.task.focusing,
.task-item.focusing,
.task.is-focusing,
.task-item.is-focusing {
  border-color: var(--focus) !important;
  background: linear-gradient(135deg, #FFFBF5 0%, #FFF8EE 100%) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15), 0 4px 20px rgba(245,158,11,0.12) !important;
}
.task.focusing::before,
.task-item.is-focusing::before { background: var(--focus) !important; }

/* Task urgent/overdue state */
.task.urgent,
.task-item.overdue {
  background: linear-gradient(135deg, #FEF8F7 0%, #FDF5F4 100%) !important;
  border-color: rgba(214,69,69,0.15) !important;
}
.task.urgent::before,
.task-item.overdue::before { background: var(--red) !important; }

/* Task completed state */
.task.completed,
.task-item.completed {
  background: var(--content-bg) !important;
  border-color: transparent !important;
  opacity: 0.7;
}
.task.completed:hover,
.task-item.completed:hover {
  opacity: 1;
  border-color: var(--content-border) !important;
}
.task.completed .task-name,
.task-item.completed .task-name {
  text-decoration: line-through;
  color: var(--content-muted) !important;
}

/* Task checkbox */
.task-check,
.task-checkbox,
.task-item .task-circle {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--content-border) !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  background: transparent !important;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-check:hover,
.task-checkbox:hover {
  border-color: var(--teal) !important;
  background: rgba(26,107,138,0.08) !important;
  transform: scale(1.1);
}
.task.completed .task-check,
.task-item.completed .task-circle {
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* Task content */
.task-content,
.task-body,
.task-item-content {
  flex: 1;
  min-width: 0;
}
.task-name,
.task-title,
.task-item .task-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--content-text) !important;
  line-height: 1.4 !important;
  margin-bottom: 6px;
}
.task-meta,
.task-details,
.task-item .task-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.task-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--content-muted);
}
.task-priority {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.task-priority.p1 {
  background: rgba(214,69,69,0.1);
  color: var(--red);
}
.task-due {
  font-size: 11px;
  font-weight: 500;
}
.task-due.overdue { color: var(--red); }
.task-due.today { color: var(--teal); }

/* Task focus button */
.task-focus-btn,
.focus-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--teal) !important;
  background: rgba(26,107,138,0.08) !important;
  border: 1px solid rgba(26,107,138,0.2) !important;
  border-radius: 5px !important;
  cursor: pointer;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.task-focus-btn:hover,
.focus-btn:hover {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border-color: var(--teal) !important;
}
.task-focus-btn.active,
.focus-btn.active {
  background: var(--focus) !important;
  color: var(--deep) !important;
  border-color: var(--focus) !important;
}

/* Topbar focus timer v5.0 */
.topbar-focus-timer {
  display: none; /* Hidden by default */
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 6px;
  margin-left: 16px;
}
.topbar-focus-timer.active {
  display: flex;
}
.topbar-focus-timer .focus-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--focus);
  animation: pulse 1.5s infinite;
}
.topbar-focus-timer .focus-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--focus);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.topbar-focus-timer .focus-time {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
}
.topbar-focus-timer .focus-task-name-topbar {
  font-size: 12px;
  font-weight: 500;
  color: var(--cream);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-focus-timer .focus-stop-btn {
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cream);
  background: var(--red);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.topbar-focus-timer .focus-stop-btn:hover {
  background: #c53030;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 FILTER DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.filter-wrap {
  position: relative;
}
.filter-btn {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--content-muted);
  background: transparent;
  border: 1px solid var(--content-border);
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--sans);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-btn:hover {
  color: var(--teal);
  border-color: var(--teal);
}
.filter-btn.has-filter {
  background: rgba(26,107,138,0.06);
  border-color: var(--teal);
  color: var(--teal);
}
.filter-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  width: 180px;
  background: var(--content-surface);
  border: 1px solid var(--content-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(8,30,40,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
}
.filter-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--content-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.filter-option:first-child {
  border-radius: 8px 8px 0 0;
}
.filter-option:last-child {
  border-radius: 0 0 8px 8px;
}
.filter-option:hover {
  background: rgba(26,107,138,0.06);
  color: var(--content-text);
}
.filter-option.active {
  background: rgba(26,107,138,0.1);
  color: var(--teal);
}
.filter-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--content-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
}
.filter-option.active .filter-check {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}

/* v5.0: View buttons (Grid/List) */
.view-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  color: var(--content-muted) !important;
  background: transparent !important;
  border: 1px solid var(--content-border) !important;
  cursor: pointer;
  border-radius: 6px !important;
  font-family: var(--sans);
  transition: all 0.15s;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.view-btn:hover {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  background: rgba(26,107,138,0.04) !important;
}
.view-btn.active {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  background: rgba(26,107,138,0.06) !important;
}
.view-btn svg {
  flex-shrink: 0;
}

/* Hide old view-toggle */
.view-toggle {
  display: none !important;
}

/* v5.0: Add task input styling */
.add-task .todo-add-input {
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--content-text);
  flex: 1;
  outline: none;
}
.add-task .todo-add-input::placeholder {
  color: var(--content-muted);
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 TASK SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.task-section {
  margin-bottom: 24px;
}
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-left: 4px;
  cursor: pointer;
  user-select: none;
}
.section-header:hover {
  opacity: 0.8;
}
.section-toggle {
  font-size: 10px;
  color: var(--content-muted);
  transition: transform 0.2s;
  width: 12px;
}
.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--content-border);
}
.section-dot.urgent {
  background: var(--red);
}
.section-dot.normal {
  background: var(--teal);
}
.section-dot.done {
  background: var(--green);
}
.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--content-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-count {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--content-muted);
  margin-left: 4px;
}
.section-content {
  /* Content container */
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 TASK META PILLS
   ═══════════════════════════════════════════════════════════════ */
.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.task-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--content-muted);
}
.task-tag-myday {
  color: var(--gold);
}
.task-tag-space {
  color: var(--teal);
}

/* Priority pills */
.task-priority-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.task-priority-pill.p1 {
  background: rgba(214,69,69,0.12);
  color: var(--red);
}
.task-priority-pill.p2 {
  background: rgba(245,158,11,0.12);
  color: var(--amber);
}

/* Due date pills */
.task-due-pill {
  font-size: 11px;
  font-weight: 500;
  color: var(--content-muted);
}
.task-due-pill.overdue {
  color: var(--red);
}
.task-due-pill.today {
  color: var(--teal);
}

/* Time estimate pill */
.task-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--teal);
  background: rgba(26,107,138,0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Recurrence pill */
.task-recurrence-pill {
  display: inline-flex;
  align-items: center;
  color: var(--content-muted);
}
.task-recurrence-pill svg {
  width: 12px;
  height: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 TASK FOCUS BUTTON
   ═══════════════════════════════════════════════════════════════ */
.task-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.task-flag-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.task-focus-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--teal);
  background: rgba(26,107,138,0.08);
  border: 1px solid rgba(26,107,138,0.2);
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.task-focus-btn:hover {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}
.task-focus-btn.active {
  background: var(--focus);
  color: var(--deep);
  border-color: var(--focus);
}
.task-focus-btn .icon {
  font-size: 10px;
}

/* v5.0: Task item body */
.task-body {
  flex: 1;
  min-width: 0;
}

/* v5.0: Urgent task item */
.task-item.urgent {
  background: linear-gradient(135deg, #FEF8F7 0%, #FDF5F4 100%) !important;
  border-color: rgba(214,69,69,0.15) !important;
}
.task-item.urgent::before {
  background: var(--red) !important;
}
.task-item.urgent:hover {
  border-color: rgba(214,69,69,0.25) !important;
  box-shadow: 0 4px 20px rgba(214,69,69,0.08) !important;
}

/* v5.0: Focusing task item */
.task-item.is-focusing {
  background: linear-gradient(135deg, #FFF8EE 0%, #FFF3E0 100%) !important;
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.25), 0 4px 20px rgba(245,158,11,0.15) !important;
}
.task-item.is-focusing::before {
  background: var(--focus) !important;
}

/* Hide old focusing badge */
.task-focusing-badge {
  display: none !important;
}

/* Hide old star (now using focus button) */
.task-star {
  display: none !important;
}


/* ═══════ v5.0: Focus Bar - Amber #F59E0B ═══════ */
.focus-task-bar {
  background: rgba(245,158,11,0.08) !important;
  border: 1px solid rgba(245,158,11,0.15) !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(245,158,11,0.15) !important;
}
.focus-task-bar:hover {
  border-color: rgba(245,158,11,0.25) !important;
}
.focus-pulse {
  background: #F59E0B !important;
  box-shadow: 0 0 8px #F59E0B !important;
}
@keyframes focusPulse {
  0%,100% { opacity:1; box-shadow: 0 0 4px #F59E0B; }
  50% { opacity:0.5; box-shadow: 0 0 12px #F59E0B; }
}
.focus-task-label {
  color: #F59E0B !important;
}
.focus-task-timer {
  color: #F59E0B !important;
}
.focus-mini-log {
  border-top-color: rgba(245,158,11,0.1) !important;
}

/* ═══════ Sidebar Focus Pulse Animations ═══════ */
@keyframes sidebarFocusPulse {
  0%, 100% { background: rgba(245,158,11,0.04); border-bottom-color: rgba(245,158,11,0.08); }
  50% { background: rgba(245,158,11,0.12); border-bottom-color: rgba(245,158,11,0.20); }
}
@keyframes focusDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}