/**
 * Aretimo — “Evening clouds” (light) & “Storm” (dark)
 * Glass panels sit on layered gradients; Tailwind gray utilities get tinted overrides.
 */

/* ─── Light: soft evening sky ─── */
html:not(.dark) body {
  min-height: 100vh;
  color: #312e81;
  /* Pastel page bg; panels use glass rules below */
  background-color: #f8f5ff !important;
  background-image:
    radial-gradient(ellipse 130% 90% at 50% -25%, rgba(255, 228, 240, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 100% 20%, rgba(221, 214, 254, 0.85) 0%, transparent 50%),
    radial-gradient(ellipse 90% 60% at -5% 55%, rgba(191, 219, 254, 0.75) 0%, transparent 45%),
    radial-gradient(ellipse 80% 50% at 85% 85%, rgba(252, 231, 243, 0.5) 0%, transparent 40%),
    linear-gradient(165deg, #ffffff 0%, #faf5ff 28%, #f3e8ff 52%, #eef2ff 78%, #e0e7ff 100%);
  /* scroll avoids costly repaints when compositing hover layers over a fixed gradient (Chrome). */
  background-attachment: scroll;
}

html:not(.dark) .aretimo-shell {
  background: transparent !important;
  color: #312e81;
}

/* Wide main column (Kanban + Calendar); header / tabs stay max-w-4xl in markup */
.aretimo-main-wide {
  max-width: min(100%, 100rem);
}

/* Calendar: month stays week rows (7 cols); narrow screens can scroll horizontally */
.aretimo-calendar-root {
  width: 100%;
  min-width: 0;
}

.aretimo-calendar-grid-scroll {
  width: 100%;
  min-width: 0;
}

@media (max-width: 639px) {
  .aretimo-calendar-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}

.aretimo-calendar-grid-sheet {
  width: 100%;
  min-width: min(100%, 32rem);
  container-type: inline-size;
}

@media (min-width: 640px) {
  .aretimo-calendar-grid-sheet {
    min-width: 0;
  }
}

.aretimo-calendar-weekdays,
.aretimo-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.aretimo-calendar-weekdays {
  margin-bottom: 0.25rem;
  text-align: center;
  font-size: clamp(0.65rem, 0.55rem + 0.85vw, 0.75rem);
  font-weight: 500;
}

.aretimo-calendar-days {
  padding: 0.65rem;
  border-radius: 1.5rem;
  align-items: stretch;
  /* Equal row heights: row grows with content, but no cell forces width-based height */
  grid-auto-rows: minmax(4rem, auto);
  /* Scope paint invalidation to this subtree while scrubbing hovers across ~35 cells */
  contain: layout paint;
}

/*
 * Day-cell grid is a dense hover surface — nested `bg-gray-800` used to stack backdrop-filter
 * on top of the outer calendar card’s glass panel, which made every :hover repaint expensive.
 * Solid fill here keeps the same card look without compositing blur under each cell.
 */
html:not(.dark) .aretimo-calendar-days.bg-gray-800 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 2px 14px rgba(139, 92, 246, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

html.dark .aretimo-calendar-days.bg-gray-800 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(51, 65, 85, 0.5),
    0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Match placeholder (leading blanks) to day buttons — do not use aspect-square (it tracked column width) */
.aretimo-calendar-placeholder {
  min-height: 4rem;
  box-sizing: border-box;
}

.aretimo-calendar-day-cell {
  box-sizing: border-box;
  min-height: 4rem;
  width: 100%;
  transition: none; /* instant hover; grid is a dense pointer target */
}

@media (max-width: 639px) {
  .aretimo-calendar-days {
    grid-auto-rows: minmax(2.75rem, auto);
  }

  .aretimo-calendar-placeholder,
  .aretimo-calendar-day-cell {
    min-height: 2.75rem;
  }

  .aretimo-calendar-day-cell {
    font-size: clamp(0.62rem, 2.5vw, 0.8rem) !important;
    padding: 2px !important;
  }
}

/* Kanban columns: one stacked column on narrow screens; four columns from lg up. */
.aretimo-kanban-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  align-items: start;
}

@media (min-width: 1024px) {
  .aretimo-kanban-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.aretimo-kanban-column-tasks {
  min-height: 12rem;
}

@media (min-width: 1024px) {
  .aretimo-kanban-column-tasks {
    min-height: 400px;
  }
}

/* Glass panels */
html:not(.dark) .bg-gray-900 {
  background: transparent !important;
}

html:not(.dark) .bg-gray-800 {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 4px 24px rgba(139, 92, 246, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  border-radius: 1.125rem;
}

html:not(.dark) .bg-gray-700 {
  background: rgba(255, 247, 251, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 114, 182, 0.22);
  box-shadow: 0 2px 16px rgba(167, 139, 250, 0.1);
  border-radius: 1rem;
}

html:not(.dark) .bg-gray-600 {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(199, 210, 254, 0.45);
  border-radius: 0.75rem;
}

/* Typography */
html:not(.dark) .text-white {
  color: #312e81 !important;
}

html:not(.dark) .text-gray-300 {
  color: #5b21b6 !important;
}

/* Tailwind gray-200 has no natural contrast on glass/white panels in light mode */
html:not(.dark) .text-gray-200 {
  color: #5b21b6 !important;
}

html:not(.dark) .text-gray-400 {
  color: #6d28d9 !important;
  opacity: 0.92;
}

html:not(.dark) .text-gray-500 {
  color: #7c3aed !important;
  opacity: 0.85;
}

/* Accents: violet / pink instead of flat yellow */
html:not(.dark) .text-yellow-400 {
  color: #7c3aed !important;
  font-weight: 700;
}

/* Active tab & primary CTAs — sunset-lilac gradient */
html:not(.dark) .aretimo-shell .bg-yellow-400.text-gray-900,
html:not(.dark) .aretimo-shell .shadow-md.bg-yellow-400,
html:not(.dark) .aretimo-shell .shadow-sm.bg-yellow-400 {
  background: linear-gradient(125deg, #fce7f3 0%, #e9d5ff 45%, #c7d2fe 100%) !important;
  color: #4c1d95 !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

html:not(.dark) .bg-yellow-500,
html:not(.dark) .hover\:bg-yellow-600:hover {
  background: linear-gradient(125deg, #f472b6, #a78bfa, #818cf8) !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}

html:not(.dark) .hover\:bg-yellow-600:hover {
  filter: brightness(1.05);
}

/* Destructive actions — soft rose → fuchsia → violet */
html:not(.dark) .aretimo-shell button.aretimo-btn-destructive,
html:not(.dark) .aretimo-shell a.aretimo-btn-destructive {
  background: linear-gradient(125deg, #fecdd3 0%, #f9a8d4 38%, #e9d5ff 72%, #c4b5fd 100%) !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(244, 114, 182, 0.35);
  box-shadow: 0 2px 14px rgba(192, 38, 211, 0.12);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-destructive:hover,
html:not(.dark) .aretimo-shell a.aretimo-btn-destructive:hover {
  filter: brightness(1.04);
  box-shadow: 0 4px 18px rgba(167, 139, 250, 0.22);
}

/* Action buttons */
html:not(.dark) .aretimo-shell button.aretimo-btn-edit,
html:not(.dark) .aretimo-shell button.aretimo-btn-cancel {
  background: linear-gradient(130deg, #60a5fa 0%, #3b82f6 52%, #2563eb 100%) !important;
  color: #eff6ff !important;
  border: 1px solid rgba(37, 99, 235, 0.35);
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.22);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-edit:hover,
html:not(.dark) .aretimo-shell button.aretimo-btn-cancel:hover {
  filter: brightness(1.06);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-complete {
  background: linear-gradient(130deg, #34d399 0%, #10b981 50%, #059669 100%) !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.22);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-complete:hover {
  filter: brightness(1.06);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-save {
  background: linear-gradient(130deg, #22c55e 0%, #16a34a 52%, #15803d 100%) !important;
  color: #f0fdf4 !important;
  border: 1px solid rgba(22, 163, 74, 0.38);
  box-shadow: 0 2px 12px rgba(22, 163, 74, 0.24);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-save:hover {
  filter: brightness(1.06);
}

/* Kanban move buttons */
html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-backlog {
  background: linear-gradient(130deg, #dc2626 0%, #b91c1c 48%, #7f1d1d 100%) !important;
  color: #fff1f2 !important;
  border: 1px solid rgba(127, 29, 29, 0.55);
  box-shadow: 0 3px 14px rgba(127, 29, 29, 0.42);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-backlog:hover {
  filter: brightness(1.08);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-ready {
  background: linear-gradient(130deg, #6b7280 0%, #4b5563 52%, #374151 100%) !important;
  color: #f3f4f6 !important;
  border: 1px solid rgba(75, 85, 99, 0.45);
  box-shadow: 0 2px 10px rgba(55, 65, 81, 0.22);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-ready:hover {
  filter: brightness(1.07);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-doing {
  background: linear-gradient(130deg, #2563eb 0%, #1e40af 54%, #0f766e 100%) !important;
  color: #eff6ff !important;
  border: 1px solid rgba(30, 64, 175, 0.42);
  box-shadow: 0 2px 12px rgba(30, 64, 175, 0.28);
}

html:not(.dark) .aretimo-shell button.aretimo-btn-kanban-doing:hover {
  filter: brightness(1.07);
}

/* Tab bar: outer clips so end segments follow the rounded rail */
html:not(.dark) .aretimo-shell .aretimo-tab-rail {
  border-radius: 0.75rem;
}

html:not(.dark) .aretimo-shell .aretimo-tab-rail__track {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

html:not(.dark) .aretimo-shell .aretimo-tab-rail .aretimo-tab.bg-yellow-400:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

html:not(.dark) .aretimo-shell .aretimo-tab-rail .aretimo-tab.bg-yellow-400:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

html:not(.dark) .aretimo-shell .text-gray-300.hover\:bg-gray-700 {
  color: #6b21a8 !important;
}

html:not(.dark) .hover\:bg-gray-700:hover {
  background: rgba(233, 213, 255, 0.55) !important;
}

html:not(.dark) .hover\:bg-gray-600:hover {
  background: rgba(224, 231, 255, 0.75) !important;
}

html:not(.dark) .hover\:bg-gray-500:hover {
  background: rgba(196, 181, 253, 0.65) !important;
}

html:not(.dark) .border-gray-600 {
  border-color: rgba(167, 139, 250, 0.35) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: rgba(109, 40, 217, 0.45);
}

html:not(.dark) select,
html:not(.dark) input,
html:not(.dark) textarea {
  color: #312e81;
}

html:not(.dark) select option {
  background: #faf5ff;
  color: #312e81;
}

/* Brand title */
html:not(.dark) .aretimo-brand {
  background: linear-gradient(110deg, #db2777, #9333ea, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Header Rules — compact control (avoid stretching full header width) */
html:not(.dark) .aretimo-shell .aretimo-header-rules,
html.dark .aretimo-shell .aretimo-header-rules {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
}

/* Left header column: stats font scales with width remaining beside Rules button */
.aretimo-shell .aretimo-header-main {
  container-type: inline-size;
}

/* Header stats — one row, no horizontal scroll; text scales with header width */
.aretimo-shell .aretimo-header-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: clamp(0.15rem, 1.8cqi, 0.55rem);
  margin-top: 0.75rem;
  line-height: 1.3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  /* Fallback when container queries are unavailable */
  font-size: clamp(0.5625rem, 0.38rem + 1.2vw, 0.9375rem);
  font-size: clamp(0.5rem, 0.28rem + 3.2cqi, 0.9375rem);
}

.aretimo-shell .aretimo-header-stat {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.aretimo-shell .aretimo-header-stat .font-semibold {
  font-weight: 600;
}

.aretimo-shell .aretimo-header-stat-suffix {
  margin-left: 0.15em;
  font-size: 0.92em;
}

/* Progress */
html:not(.dark) .aretimo-progress-track {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(199, 210, 254, 0.5);
}

html:not(.dark) .aretimo-progress-fill {
  background: linear-gradient(90deg, #e879f9, #a78bfa, #60a5fa) !important;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.45);
}

/* Goal cards — linked task bullets inset (Tailwind spacing may be absent from slim builds) */
.aretimo-shell ul.aretimo-linked-task-list {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin-left: 0.625rem;
  margin-top: 0.125rem;
}

/* Calendar — today marker (semantic class; avoids yellow utilities) */
html:not(.dark) button.calendar-day-today {
  background: linear-gradient(145deg, #fde68a, #fbcfe8, #ddd6fe) !important;
  color: #4c1d95 !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/* Match dark mode’s interactive ring — today had no Tailwind hover:* because it uses theme CSS only */
html:not(.dark) button.calendar-day-today:hover {
  border-color: rgba(124, 58, 237, 0.55) !important;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 0.45),
    0 4px 18px rgba(139, 92, 246, 0.22);
  background: linear-gradient(145deg, #fcd34d, #f9a8d4, #d8b4fe) !important;
}

html:not(.dark) button.calendar-day-today .calendar-day-points {
  color: #6d28d9 !important;
}

html:not(.dark) .calendar-day-points {
  color: #7c3aed !important;
}

html:not(.dark) .text-yellow-400.text-xs {
  color: #7c3aed !important;
}

/* Fallback: legacy yellow “today” if class missing */
html:not(.dark) .bg-yellow-400.text-gray-900 {
  background: linear-gradient(145deg, #fde68a, #fbcfe8, #ddd6fe) !important;
  color: #4c1d95 !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/*
 * Dark: layered “storm sky” — deep slate/indigo base + soft cloud masses + cyan/violet
 * blooms (higher chroma than before so splotches read like the light theme’s clouds).
 */
html.dark {
  background-color: #030712;
}

html.dark body {
  min-height: 100vh;
  color: #e2e8f0;
  background-color: #030712 !important;
  background-image:
    /* Cool lightning bloom — upper cloud edge */
    radial-gradient(ellipse 62% 42% at 76% 4%, rgba(186, 230, 253, 0.26) 0%, transparent 55%),
    /* Violet sheet — upper left */
    radial-gradient(ellipse 52% 36% at 12% 12%, rgba(165, 180, 252, 0.22) 0%, transparent 52%),
    /* Soft rose mist — mid page (pairs with light theme’s pink patches) */
    radial-gradient(ellipse 55% 44% at 42% 38%, rgba(244, 114, 182, 0.1) 0%, transparent 58%),
    /* Distant strike — lower quadrant */
    radial-gradient(ellipse 48% 40% at 90% 70%, rgba(56, 189, 248, 0.2) 0%, transparent 52%),
    /* Indigo depth — lower mid */
    radial-gradient(ellipse 44% 38% at 18% 82%, rgba(99, 102, 241, 0.14) 0%, transparent 50%),
    /* Heavy storm cloud volume (slightly stronger edges vs base so masses read as shapes) */
    radial-gradient(ellipse 125% 92% at 48% -24%, rgba(30, 41, 59, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 102% 72% at 102% 22%, rgba(49, 46, 129, 0.48) 0%, transparent 54%),
    radial-gradient(ellipse 98% 62% at -6% 52%, rgba(15, 23, 42, 0.68) 0%, transparent 50%),
    radial-gradient(ellipse 90% 58% at 90% 94%, rgba(30, 27, 75, 0.52) 0%, transparent 46%),
    /* Deep night base — wider lightness spread so bands stay visible under glass panels */
    linear-gradient(
      166deg,
      #010409 0%,
      #071018 18%,
      #0c1929 40%,
      #0a1522 62%,
      #08121c 82%,
      #030712 100%
    );
  background-attachment: scroll;
}

html.dark .aretimo-shell {
  background: transparent !important;
  color: #e2e8f0;
}

html.dark .bg-gray-900 {
  background: transparent !important;
}

html.dark .bg-gray-800 {
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.45);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(148, 163, 184, 0.06) inset;
  border-radius: 1.125rem;
}

html.dark .bg-gray-700 {
  background: rgba(30, 41, 59, 0.68) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

html.dark .bg-gray-600 {
  background: rgba(51, 65, 85, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(71, 85, 105, 0.4);
  border-radius: 0.75rem;
}

/*
 * Snappy interaction: backdrop-filter on large panels forces the GPU to sample/blur the page
 * behind controls — expensive when hover states repaint often. Under .aretimo-shell we use
 * nearly-opaque fills instead (same borders/shadows from utility rules still apply).
 */
html:not(.dark) .aretimo-shell .bg-gray-800:not(.aretimo-tab-rail__track):not(.aretimo-calendar-days) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) .aretimo-shell .aretimo-tab-rail__track.bg-gray-800 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark .aretimo-shell .bg-gray-800:not(.aretimo-tab-rail__track):not(.aretimo-calendar-days) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.94) !important;
}

html.dark .aretimo-shell .aretimo-tab-rail__track.bg-gray-800 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark) .aretimo-shell .aretimo-kanban-column.bg-gray-700 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 247, 251, 0.92) !important;
}

html.dark .aretimo-shell .aretimo-kanban-column.bg-gray-700 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(30, 41, 59, 0.94) !important;
}

/*
 * Task / goal list cards: Tailwind hover loses to html.dark .bg-gray-700 { … !important }.
 * Dedicated classes; instant hover (no transition — reads snappier).
 */
html:not(.dark) .aretimo-shell .aretimo-task-card,
html:not(.dark) .aretimo-shell .aretimo-goal-card {
  background: rgba(255, 247, 251, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 114, 182, 0.22);
  box-shadow: 0 2px 16px rgba(167, 139, 250, 0.1);
  border-radius: 1rem;
}

/*
 * Light mode: base uses frosted glass; tiny alpha shifts are invisible over the page gradient.
 * Hover removes blur and uses a solid lilac panel (aligned with other light-mode control hovers).
 */
html:not(.dark) .aretimo-shell .aretimo-task-card:hover,
html:not(.dark) .aretimo-shell .aretimo-goal-card:hover {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(233, 213, 255, 0.92) !important;
  border-color: rgba(139, 92, 246, 0.38) !important;
  box-shadow:
    0 6px 26px rgba(139, 92, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

html.dark .aretimo-shell .aretimo-task-card,
html.dark .aretimo-shell .aretimo-goal-card {
  background: rgba(30, 41, 59, 0.68) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

html.dark .aretimo-shell .aretimo-task-card:hover,
html.dark .aretimo-shell .aretimo-goal-card:hover {
  background: rgba(51, 65, 85, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}

/*
 * Metrics: category drilldown rows — no transition, no backdrop blur (blur on/off hover
 * repaints the whole subtree and feels laggy; solid panels swap instantly).
 */
html:not(.dark) .aretimo-shell button.aretimo-metrics-category-row {
  transition: none !important;
  background: rgba(255, 247, 251, 0.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(244, 114, 182, 0.22) !important;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px rgba(167, 139, 250, 0.08);
}

html:not(.dark) .aretimo-shell button.aretimo-metrics-category-row:hover {
  transition: none !important;
  background: rgba(233, 213, 255, 0.92) !important;
  border-color: rgba(139, 92, 246, 0.36) !important;
  box-shadow:
    0 4px 18px rgba(139, 92, 246, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html.dark .aretimo-shell button.aretimo-metrics-category-row {
  transition: none !important;
  background: rgba(51, 65, 85, 0.62) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

html.dark .aretimo-shell button.aretimo-metrics-category-row:hover {
  transition: none !important;
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

html.dark .text-white {
  color: #f1f5f9 !important;
}

html.dark .text-gray-300 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-400 {
  color: #94a3b8 !important;
}

html.dark .text-gray-500 {
  color: #64748b !important;
}

html.dark .border-gray-600 {
  border-color: rgba(71, 85, 105, 0.55) !important;
}

html.dark .aretimo-brand {
  background: linear-gradient(110deg, #bae6fd, #818cf8, #38bdf8, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ─── Dark: retire flat yellow accents — sky / indigo / cyan unified theme ─── */
html.dark .aretimo-shell .text-yellow-400 {
  color: #93c5fd !important;
}

html.dark .aretimo-shell button.bg-yellow-500,
html.dark .aretimo-shell a.bg-yellow-500 {
  background: linear-gradient(135deg, #4338ca, #2563eb, #0284c7) !important;
  color: #f8fafc !important;
  border: none;
  box-shadow: 0 2px 14px rgba(14, 165, 233, 0.22);
}

html.dark .aretimo-shell button.bg-yellow-500:hover,
html.dark .aretimo-shell a.bg-yellow-500:hover {
  background: linear-gradient(135deg, #4f46e5, #1d4ed8, #0e7490) !important;
  filter: brightness(1.06);
}

/* Neutralize Tailwind hover:bg-yellow-600 on primary actions */
html.dark .aretimo-shell button.hover\:bg-yellow-600:hover,
html.dark .aretimo-shell a.hover\:bg-yellow-600:hover {
  background-image: linear-gradient(135deg, #4f46e5, #1d4ed8, #0e7490) !important;
  background-color: transparent !important;
}

/* Storm — soften remove/delete buttons (muted wine → violet → indigo) */
html.dark .aretimo-shell button.aretimo-btn-destructive,
html.dark .aretimo-shell a.aretimo-btn-destructive {
  background: linear-gradient(135deg, #9d4b6d 0%, #7c3aed 45%, #4338ca 100%) !important;
  color: #fce7f3 !important;
  border: 1px solid rgba(244, 114, 182, 0.22);
  box-shadow: 0 2px 16px rgba(76, 29, 149, 0.35);
}

html.dark .aretimo-shell button.aretimo-btn-destructive:hover,
html.dark .aretimo-shell a.aretimo-btn-destructive:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.35);
}

/* Action buttons */
html.dark .aretimo-shell button.aretimo-btn-edit,
html.dark .aretimo-shell button.aretimo-btn-cancel {
  background: linear-gradient(132deg, #1d4ed8 0%, #2563eb 52%, #0ea5e9 100%) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(56, 189, 248, 0.32);
  box-shadow: 0 2px 14px rgba(37, 99, 235, 0.32);
}

html.dark .aretimo-shell button.aretimo-btn-edit:hover,
html.dark .aretimo-shell button.aretimo-btn-cancel:hover {
  filter: brightness(1.08);
}

html.dark .aretimo-shell button.aretimo-btn-complete {
  background: linear-gradient(132deg, #047857 0%, #059669 50%, #14b8a6 100%) !important;
  color: #ecfeff !important;
  border: 1px solid rgba(45, 212, 191, 0.28);
  box-shadow: 0 2px 16px rgba(20, 184, 166, 0.28);
}

html.dark .aretimo-shell button.aretimo-btn-complete:hover {
  filter: brightness(1.1);
}

html.dark .aretimo-shell button.aretimo-btn-save {
  background: linear-gradient(132deg, #166534 0%, #15803d 52%, #16a34a 100%) !important;
  color: #dcfce7 !important;
  border: 1px solid rgba(74, 222, 128, 0.26);
  box-shadow: 0 2px 16px rgba(22, 163, 74, 0.28);
}

html.dark .aretimo-shell button.aretimo-btn-save:hover {
  filter: brightness(1.1);
}

/* Kanban move buttons */
html.dark .aretimo-shell button.aretimo-btn-kanban-backlog {
  background: linear-gradient(132deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%) !important;
  color: #ffe4e6 !important;
  border: 1px solid rgba(239, 68, 68, 0.42);
  box-shadow: 0 3px 18px rgba(127, 29, 29, 0.52);
}

html.dark .aretimo-shell button.aretimo-btn-kanban-backlog:hover {
  filter: brightness(1.1);
}

html.dark .aretimo-shell button.aretimo-btn-kanban-ready {
  background: linear-gradient(132deg, #64748b 0%, #475569 52%, #334155 100%) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(100, 116, 139, 0.36);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
}

html.dark .aretimo-shell button.aretimo-btn-kanban-ready:hover {
  filter: brightness(1.08);
}

html.dark .aretimo-shell button.aretimo-btn-kanban-doing {
  background: linear-gradient(132deg, #0ea5e9 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(56, 189, 248, 0.32);
  box-shadow: 0 2px 14px rgba(37, 99, 235, 0.35);
}

html.dark .aretimo-shell button.aretimo-btn-kanban-doing:hover {
  filter: brightness(1.1);
}

html.dark button.calendar-day-today {
  background: linear-gradient(148deg, #1e3a5f, #172554, rgba(67, 56, 202, 0.45)) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
}

/* Avoid filter compositing when scrubbing across the grid (filters repaint the whole subtree). */
html.dark button.calendar-day-today:hover {
  filter: none;
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.42),
    0 2px 14px rgba(56, 189, 248, 0.22);
}

html.dark .calendar-day-points {
  color: #93c5fd !important;
}

html.dark button.calendar-day-today .calendar-day-points {
  color: #bae6fd !important;
}

html.dark .calendar-streak-star {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

html:not(.dark) .calendar-streak-star {
  color: #d97706 !important;
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.25);
}

html.dark .aretimo-progress-track {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(71, 85, 105, 0.5);
}

html.dark .aretimo-progress-fill {
  background: linear-gradient(90deg, #6366f1, #38bdf8, #a78bfa) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

html.dark .aretimo-shell .aretimo-tab-rail {
  border-radius: 0.75rem;
}

html.dark .aretimo-shell .aretimo-tab-rail__track {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(51, 65, 85, 0.4);
}

html.dark .aretimo-shell .aretimo-tab-rail .aretimo-tab.bg-yellow-400:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

html.dark .aretimo-shell .aretimo-tab-rail .aretimo-tab.bg-yellow-400:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

html.dark .aretimo-shell .bg-yellow-400.text-gray-900,
html.dark .aretimo-shell .shadow-md.bg-yellow-400,
html.dark .aretimo-shell .shadow-sm.bg-yellow-400 {
  background: linear-gradient(125deg, #6366f1, #3b82f6, #0ea5e9) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 22px rgba(14, 165, 233, 0.25) !important;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

html.dark .hover\:bg-gray-700:hover {
  background: rgba(51, 65, 85, 0.75) !important;
}

html.dark .hover\:bg-gray-600:hover {
  background: rgba(71, 85, 105, 0.65) !important;
}

html.dark .hover\:bg-gray-500:hover {
  background: rgba(100, 116, 139, 0.55) !important;
}

/* Inputs: slight blue tint in storm mode */
html.dark select option,
html.dark input,
html.dark textarea {
  color-scheme: dark;
}

/* Calendar modal — point values match grid .calendar-day-points (blue/violet, not yellow) */
html:not(.dark) .calendar-modal-points {
  color: #7c3aed !important;
}

html.dark .calendar-modal-points {
  color: #93c5fd !important;
}

/* Calendar day detail modal (layout utilities omitted from slim Tailwind build) */
.calendar-modal-overlay {
  position: fixed;
  inset: 0;
  /* Above shell/footer (modal is portaled to body; keep high for nav chrome) */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
}

.calendar-modal-card {
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.55);
}

/* Opaque surfaces: global .bg-gray-800 uses glass (translucent); modal must block content behind (e.g. tab bar). */
html.dark .calendar-modal-card.bg-gray-800 {
  background: #111827 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark) .calendar-modal-card.bg-gray-800 {
  background: #f1f5f9 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.calendar-modal-header {
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(75, 85, 99, 0.55);
  flex-shrink: 0;
  /* Explicit layer so the title row never picks up glass/transparency from parent overrides */
  background: inherit;
}

html.dark .calendar-modal-header {
  background: #111827;
}

html:not(.dark) .calendar-modal-header {
  background: #f1f5f9;
}

.calendar-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.calendar-modal-body > * + * {
  margin-top: 1.25rem;
}

.calendar-modal-h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

html:not(.dark) .calendar-modal-card {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
}

html:not(.dark) .calendar-modal-header {
  border-bottom-color: rgba(167, 139, 250, 0.3);
}

html:not(.dark) .calendar-modal-h4 {
  color: #6d28d9;
  opacity: 0.9;
}