/* =============================================
   KANBAN DESIGN SYSTEM - KANBAN.CSS
   Responsive & Theme Overrides
   ============================================= */

/* The `hidden` attribute must win over Tailwind display utilities. Without
   this, `<div hidden class="flex">` stays visible (the class's display:flex
   beats the UA's [hidden] rule) — which is how the Move-into panel, the
   Backlog tray body and the focus banner all showed when they shouldn't. */
[hidden] { display: none !important; }

/* Theme Override: Modern SaaS Palette */
:root[data-theme="light"] {
  --bg: #F9FAFB !important;
  --surface: #FFFFFF !important;
  --surface-2: #F3F4F6 !important;
  --surface-3: #E5E7EB !important;
  --line: #E5E7EB !important;
  --ink: #111827 !important;
  /* Secondary text (times, counts, labels) was #6B7280 at 11px, which passed AA
     only barely and read faint. This clears 5.5:1 on both white and the card tone. */
  --muted: #5B6472 !important;
  /* Cards are a warm neutral surface instead of a bordered white box. */
  --card: #F6F3EE;
  --card-hover: #EFEBE3;
  /* "Progress made" green for text: dark enough on the light card. */
  --ok: #047857;
}
/* Dark has two states: no data-theme attribute at all (the page's first load —
   only light sets one, see the pre-paint script) and an explicit "dark" after the
   toggle. Both need the card tokens, so this fallback keys off "not light"; the
   explicit block below then overrides it with the cooler board palette. */
:root:not([data-theme="light"]) {
  --card: #2B2723;
  --card-hover: #332E29;
  --ok: #4ADE80;
}
:root[data-theme="dark"] {
  --bg: #0E1116 !important;
  --surface: #161B22 !important;
  --surface-2: #21262D !important;
  --surface-3: #30363D !important;
  --line: #262C35 !important;
  --ink: #F9FAFB !important;
  --muted: #9BA4AE !important;
  --card: #25262A;
  --card-hover: #2D2E33;
}

/* Dark mode loses the shadow as a separation cue (dark-on-dark barely reads),
   but the card fill itself (--card) now carries the "this is a card" weight, so
   it only needs a soft drop shadow — no outline ring. */
:root[data-theme="dark"] .kanban-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .kanban-card:hover {
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
}

/* A calmer category palette for the board. The shared one (styles.css) is tuned
   for the timer, where a category tints the whole page; on small labels and dots
   beside warm cards it read as too saturated. Scoped to #kanban-app, so the timer
   page (which doesn't load this file) is untouched. Light values keep ≥4.5:1 on the
   card tone. */
:root[data-theme="light"] #kanban-app,
:root[data-theme="light"] #islands-app {
  --c-deep-work: #5a5aa8;
  --c-creative: #a24f72;
  --c-learning: #36707e;
  --c-admin: #4f647f;
  --c-communication: #a05040;
  --c-personal: #75599b;
}
:root:not([data-theme="light"]) #kanban-app,
:root:not([data-theme="light"]) #islands-app {
  --c-deep-work: #a0a5de;
  --c-creative: #d99fba;
  --c-learning: #7fb3c0;
  --c-admin: #9db0c7;
  --c-communication: #dc9d90;
  --c-personal: #bfa4dc;
}

/* Roadmap colours (core/roadmaps, color 0…3): saturated "signal" hues, so a
   roadmap's dot, ring and lighthouse never read as one of the calm category
   colours above. Non-text marks: each keeps ≥3:1 on the card tone. */
:root[data-theme="light"] #kanban-app,
:root[data-theme="light"] #islands-app {
  --r-0: #0e7c86;
  --r-1: #a86b00;
  --r-2: #b0279e;
  --r-3: #1d5fd1;
}
:root:not([data-theme="light"]) #kanban-app,
:root:not([data-theme="light"]) #islands-app {
  --r-0: #3cc7d3;
  --r-1: #f2b43a;
  --r-2: #ec6ad8;
  --r-3: #6aa2ff;
}

/* Scrollbar */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

#board-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#board-wrapper::-webkit-scrollbar { height: 8px; }
#board-wrapper::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Mobile (<640px): Day-view scrollable strip */
@media (max-width: 639px) {
  #kanban-app {
    overflow: hidden;
  }
  
  /* Board: horizontal snap scroll */
  #board-wrapper {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Each day column fits the screen almost fully */
  #board .kanban-day-col {
    min-width: 90vw !important;
    width: 90vw !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  #board {
    /* override tailwind gap to create a paginated feel */
    gap: 12px;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  /* Modal bottom sheet on mobile */
  #kanban-task-modal,
  #move-modal {
    width: 100% !important;
    max-width: 100vw !important;
    margin: auto 0 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
  }
}

/* Tablet & Desktop (>=640px): 7 columns share the available width as a grid,
   so the whole week fits the viewport instead of forcing horizontal scroll. */
@media (min-width: 640px) {
  #board-wrapper {
    overflow-x: hidden;
  }

  #board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  #board .kanban-day-col {
    width: auto;
    min-width: 0;
  }

  /* Focus mode: a single wide, centered column reads far better than one
     grid cell stretched (or squeezed) to a 1/7 share of the viewport. */
  #board.focus-today {
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
    margin: 0 auto;
  }
}