/* Tag color safelist — do not remove (used by Tag#color_classes in Ruby):
   bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300
   bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400
   bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400
   bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400
   bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400
   bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400
   bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400
   bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
   bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400
   bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
   bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400
   bg-gray-400 bg-red-500 bg-orange-500 bg-amber-500 bg-yellow-400
   bg-green-500 bg-teal-500 bg-blue-500 bg-indigo-500 bg-purple-500 bg-pink-500 */

/* Cursor pointer on all interactive elements */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
summary,
label[for] {
  cursor: pointer;
}

/* Card */
.card {
  @apply bg-white dark:bg-surface-dark rounded-md border border-black/10 dark:border-white/10;
}

/* Form Input */
.form-input {
  @apply w-full px-4 py-2 bg-white dark:bg-surface-dark border border-black/10 dark:border-white/10 rounded-md text-black/90 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50;
}

/* Form Input (compact, for table cells) */
.form-input-sm {
  @apply w-full px-2 py-1.5 text-sm bg-white dark:bg-surface-dark border border-black/10 dark:border-white/10 rounded text-black/90 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50;
}

/* Page Title */
.page-title {
  @apply text-2xl font-bold font-heading text-black/90 dark:text-white;
}

/* Breadcrumb */
.breadcrumb {
  @apply flex items-center gap-2 text-sm text-black/60 dark:text-white/60 mb-1;
}

/* Badge */
.badge {
  @apply inline-flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md min-w-[4.5rem];
}

/* Page Header Layout */
.page-header-layout {
  @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4;
}

/* Alert Error */
.alert-error {
  @apply p-4 bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 rounded;
}

/* Primary Button */
.btn-primary {
  @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors cursor-pointer;
}

/* Fix for submit buttons in dark mode */
.dark input[type="submit"].btn-primary,
.dark button[type="submit"].btn-primary {
  background-color: #1193d4 !important;
}

.dark input[type="submit"].btn-primary:hover,
.dark button[type="submit"].btn-primary:hover {
  background-color: rgba(17, 147, 212, 0.9) !important;
}

/* Secondary Button */
.btn-secondary {
  @apply px-4 py-2 text-black/60 dark:text-white/60 hover:text-black dark:hover:text-white border border-black/10 dark:border-white/10 rounded-md transition-colors;
}

/* Icon Button */
.icon-button {
  @apply p-2 text-black/60 dark:text-white/60 hover:text-primary hover:bg-primary/10 rounded-md transition-colors;
}

/* Card Header */
.card-header {
  @apply px-6 py-4 border-b border-black/10 dark:border-white/10;
}

/* Table styles */
.table-header-cell {
  @apply px-6 py-2 text-left text-xs font-semibold uppercase tracking-wider text-black/60 dark:text-white/60;
}

.table-row {
  @apply hover:bg-black/[0.02] dark:hover:bg-white/[0.05];
}

.table-cell {
  @apply px-6 py-2 text-sm text-black/90 dark:text-white;
}

.table-cell-secondary {
  @apply px-6 py-2 text-sm text-black/60 dark:text-white/60;
}

.table-actions {
  @apply flex items-center justify-end gap-2;
}

/* Badge variants */
.badge-success {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-md bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700/30;
}

.badge-neutral {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400 border border-gray-200 dark:border-gray-700/30;
}

/* Danger Button (delete) */
.btn-danger {
  @apply p-2 text-black/60 dark:text-white/60 hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-md transition-colors;
}

/* Modal Overlay */
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.5);
}

.modal-overlay.hidden {
  display: none;
}

/* Card footer */
.card-footer {
  @apply px-6 py-3 border-t border-black/10 dark:border-white/10 bg-gray-50 dark:bg-white/5 rounded-b-md;
}

/* WorkItem tabs (Priorisation widget) */
.work-tab {
  @apply border-black/10 dark:border-white/10 text-black/70 dark:text-white/70 hover:text-primary hover:border-primary/40;
}

.work-tab-active {
  @apply bg-primary/10 text-primary border-primary/40;
}

/* ────────────────────────────────────────────────────────────────────
   MOBILE — Priorities page
   Spectacular touch-first treatment activated below lg breakpoint.
   ──────────────────────────────────────────────────────────────────── */

/* Mobile pill (filter strip in priorisation widget) — when active,
   gets a stronger fill and a subtle ring glow for tactile feedback. */
.mobile-pill.work-tab-active {
  @apply bg-primary text-white border-primary shadow-[0_4px_12px_rgba(17,147,212,0.35)];
}
.mobile-pill.work-tab-active span {
  @apply text-white opacity-100;
}

/* Hide the native scrollbar for the mobile pill strip — keeps it clean. */
.mobile-pill-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-pill-scroll::-webkit-scrollbar {
  display: none;
}

/* Bottom-sheet quick-add: kind selector buttons */
.mobile-kind-btn {
  @apply border-black/10 dark:border-white/10 text-black/65 dark:text-white/65;
}
.mobile-kind-active {
  @apply bg-primary/10 dark:bg-primary/15 border-primary/40 text-primary;
}

/* ─── Mobile section visibility ─── */
/* On lg+, both sections are always visible regardless of any `hidden`
   class the mobile controller may toggle — Tailwind's `display: flex`
   from `flex` is reasserted so the desktop two-column layout never
   collapses. */
@media (min-width: 1024px) {
  .mobile-section {
    display: flex !important;
  }
}

/* ─── Hero (warm cream) ─── */
.mobile-hero {
  background: linear-gradient(180deg, rgb(254 243 226) 0%, rgb(254 248 240) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .mobile-hero {
  background: linear-gradient(180deg, rgb(35 28 22) 0%, rgb(28 24 20) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.mobile-hero-title {
  text-transform: none;
  letter-spacing: -0.02em;
}

/* ─── Bottom navigation (mobile only) ─── */
.mobile-bottom-nav {
  /* Subtle elevation away from content */
  box-shadow: 0 -4px 24px -8px rgba(0, 0, 0, 0.12);
  background-color: rgb(254 250 245 / 0.95) !important;
}
.dark .mobile-bottom-nav {
  box-shadow: 0 -4px 24px -8px rgba(0, 0, 0, 0.5);
  background-color: rgb(28 24 20 / 0.95) !important;
}
/* iPhone home-bar safe-area cushion */
.mobile-bottom-nav-safe {
  height: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-tab {
  @apply text-black/55 dark:text-white/55;
}
.mobile-nav-tab .mobile-nav-icon-wrap {
  position: relative;
  padding: 0.25rem 0.625rem;
  border-radius: 0.625rem;
  transition: background-color 200ms;
}
.mobile-nav-active {
  color: rgb(234 88 12); /* orange-600 */
}
.dark .mobile-nav-active {
  color: rgb(251 146 60); /* orange-400 */
}
.mobile-nav-active .mobile-nav-icon-wrap {
  background: rgb(254 215 170); /* orange-200 */
}
.dark .mobile-nav-active .mobile-nav-icon-wrap {
  background: rgb(154 52 18 / 0.4); /* orange-900 tinted */
}
.mobile-nav-active .mobile-nav-indicator {
  display: none; /* indicator replaced by the rounded highlight bg */
}

/* FAB sits above the bottom-nav (≈ 64px) plus iPhone safe-area inset. */
.mobile-fab {
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

/* Mobile-only refinements scoped to the priorities page.
   Premium card treatment: borderless + soft elevation + stagger fade-in. */
@media (max-width: 1023px) {
  .priorities-page #today_widget,
  .priorities-page #prioritization_widget {
    @apply border-0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.08);
  }
  .dark .priorities-page #today_widget,
  .dark .priorities-page #prioritization_widget {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  }

  /* The desktop inline quick-add is redundant on mobile (FAB handles it).
     Force-hide regardless of work-tabs controller state. */
  .priorities-page [data-work-tabs-target="quickAdd"] {
    display: none !important;
  }

  /* Bottom-pad scrollable areas so the bottom-nav (≈64px) + FAB don't
     cover the last row. Includes iPhone safe-area inset. */
  .priorities-page #today_widget > .overflow-y-auto,
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"] {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  }

  /* Container — keep the existing `divide-y` hairlines (they're clean)
     but ensure backgrounds and padding are right for the rail look. */
  .priorities-page #today_widget > .divide-y,
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"].divide-y,
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"] > .divide-y {
    background: white;
  }
  .dark .priorities-page #today_widget > .divide-y,
  .dark .priorities-page #prioritization_widget [data-work-tabs-target="panel"].divide-y,
  .dark .priorities-page #prioritization_widget [data-work-tabs-target="panel"] > .divide-y {
    background: var(--color-surface-dark);
  }

  /* Each item is a continuous "rail" row — flat, no individual card
     chrome, hairline divider between (provided by partial's divide-y).
     The colored left edge IS the rail; it spans full row height and
     reads as a continuous chromatic ribbon from top to bottom. */
  .priorities-page [id^="work_item_"],
  .priorities-page [id^="priority_row_task_"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 0.5rem !important;
    row-gap: 0.625rem !important;
    padding: 1rem 1rem 1rem 1.25rem !important;
    border-left: 5px solid rgb(148 163 184); /* slate-400 fallback */
    background: white;
    position: relative;
  }
  .dark .priorities-page [id^="work_item_"],
  .dark .priorities-page [id^="priority_row_task_"] {
    background: var(--color-surface-dark);
  }

  /* Kind-coded rails. Pure color, no fill — the rail itself is the
     statement. */
  .priorities-page [data-kind="todo"]       { border-left-color: rgb(59 130 246); }
  .priorities-page [data-kind="follow_up"]  { border-left-color: rgb(249 115 22); }
  .priorities-page [data-kind="commitment"] { border-left-color: rgb(168 85 247); }
  .priorities-page [data-kind="task"]       { border-left-color: rgb(16 185 129); }

  /* Hook icon (↳) before the title — colored to match the rail. */
  .priorities-page .mobile-hook {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .priorities-page [data-kind="todo"] .mobile-hook       { color: rgb(59 130 246); }
  .priorities-page [data-kind="follow_up"] .mobile-hook  { color: rgb(249 115 22); }
  .priorities-page [data-kind="commitment"] .mobile-hook { color: rgb(168 85 247); }
  .priorities-page [data-kind="task"] .mobile-hook       { color: rgb(16 185 129); }

  /* Title — bigger, bolder, mixed-case (override Megabyte uppercase). */
  .priorities-page [id^="work_item_"] [data-inline-edit-target="display"] > div > button.truncate,
  .priorities-page [id^="priority_row_task_"] a.truncate {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
  }

  /* Convert the kind chip pill into inline caps text — same idea as
     the reference: "TÂCHE · subject" without the rounded background. */
  .priorities-page [id^="work_item_"] > div[data-controller*="work-item-kind-picker"] > button.badge,
  .priorities-page [id^="priority_row_task_"] > span.badge {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    font-family: 'Megabyte', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
  .priorities-page [id^="work_item_"] > div[data-controller*="work-item-kind-picker"] > button.badge svg,
  .priorities-page [id^="priority_row_task_"] > span.badge svg {
    display: none !important;
  }
  /* Color the caps text in the kind hue. */
  .priorities-page [data-kind="todo"] > div[data-controller*="work-item-kind-picker"] > button.badge       { color: rgb(37 99 235); }
  .priorities-page [data-kind="follow_up"] > div[data-controller*="work-item-kind-picker"] > button.badge  { color: rgb(194 65 12); }
  .priorities-page [data-kind="commitment"] > div[data-controller*="work-item-kind-picker"] > button.badge { color: rgb(126 34 206); }
  .priorities-page [data-kind="task"] > span.badge { color: rgb(4 120 87); }
  .dark .priorities-page [data-kind="todo"] > div[data-controller*="work-item-kind-picker"] > button.badge       { color: rgb(96 165 250); }
  .dark .priorities-page [data-kind="follow_up"] > div[data-controller*="work-item-kind-picker"] > button.badge  { color: rgb(251 146 60); }
  .dark .priorities-page [data-kind="commitment"] > div[data-controller*="work-item-kind-picker"] > button.badge { color: rgb(192 132 252); }
  .dark .priorities-page [data-kind="task"] > span.badge { color: rgb(52 211 153); }
  /* Title column claims ~all remaining width, pushing siblings to row 2. */
  .priorities-page [id^="work_item_"] > div.flex-1.min-w-0,
  .priorities-page [id^="priority_row_task_"] > div.flex-1.min-w-0 {
    flex: 1 1 calc(100% - 2rem) !important;
    min-width: 0;
  }
  /* Allow row titles to wrap on 2 lines (override `truncate` from the
     shared partial) so users can read the full content on a phone. */
  .priorities-page [id^="work_item_"] [data-inline-edit-target="display"] > div > button.truncate,
  .priorities-page [id^="priority_row_task_"] a.truncate {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: initial !important;
    line-height: 1.35;
    font-size: 0.95rem;
  }

  /* Hide rarely-used action buttons on mobile: deleguer, lier, et les
     spacers correspondants dans les rows de tâches. Decongèle la rangée
     d'actions pour ne laisser que ce qui est utilisé fréquemment au
     pouce : aujourd'hui (☀), prioritaire (🚩), date (📅), notes, type. */
  .priorities-page [id^="work_item_"] > button[title="Déléguer"],
  .priorities-page [id^="work_item_"] > button[title^="Délégué à"],
  .priorities-page [id^="work_item_"] > button[title^="Reçu de"],
  .priorities-page [id^="work_item_"] > button[title="Lier à une entité"],
  .priorities-page [id^="work_item_"] > button[title^="Lié à"],
  .priorities-page [id^="priority_row_task_"] > button[title="Déléguer"],
  .priorities-page [id^="priority_row_task_"] > button[title^="Assignée à"],
  .priorities-page [id^="priority_row_task_"] > span.shrink-0.w-6.h-6 {
    display: none !important;
  }

  /* Indent the action row so it sits flush with the title (skip the
     checkbox column). The 3rd direct child is always the first
     element of row 2 — checkbox/leading-link is 1st, title block is
     2nd. Margin matches the checkbox width + first column-gap. */
  .priorities-page [id^="work_item_"] > *:nth-child(3),
  .priorities-page [id^="priority_row_task_"] > *:nth-child(3) {
    margin-left: 1.75rem !important;
  }

  /* Hide the scrollbar inside the scrollable widget panes — content
     remains scrollable but the chrome stays clean. */
  .priorities-page #today_widget > .overflow-y-auto,
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .priorities-page #today_widget > .overflow-y-auto::-webkit-scrollbar,
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Stagger fade-in of items on initial paint — first ~5 visible rows. */
  .priorities-page #today_widget > div > [id],
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]:not(.hidden) > div > [id] {
    animation: priority-row-in 420ms cubic-bezier(.21,.61,.35,1) both;
  }
  .priorities-page #today_widget > div > [id]:nth-child(2),
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]:not(.hidden) > div > [id]:nth-child(2) { animation-delay: 50ms; }
  .priorities-page #today_widget > div > [id]:nth-child(3),
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]:not(.hidden) > div > [id]:nth-child(3) { animation-delay: 100ms; }
  .priorities-page #today_widget > div > [id]:nth-child(4),
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]:not(.hidden) > div > [id]:nth-child(4) { animation-delay: 150ms; }
  .priorities-page #today_widget > div > [id]:nth-child(n+5),
  .priorities-page #prioritization_widget [data-work-tabs-target="panel"]:not(.hidden) > div > [id]:nth-child(n+5) { animation-delay: 200ms; }
}

@keyframes priority-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Normalize select height to match text inputs */
select {
  @apply h-[42px];
}

/* Time tracking styles */
@keyframes timer-pulse {
  0%, 100% {
    border-color: rgb(34 197 94);
    background-color: rgb(240 253 244);
  }
  50% {
    border-color: rgb(22 163 74);
    background-color: rgb(220 252 231);
  }
}

@keyframes timer-pulse-dark {
  0%, 100% {
    border-color: rgb(34 197 94);
    background-color: rgb(34 197 94 / 0.1);
  }
  50% {
    border-color: rgb(22 163 74);
    background-color: rgb(34 197 94 / 0.15);
  }
}

.timer-running {
  @apply border-l-4;
  animation: timer-pulse 2s ease-in-out infinite;
}

.dark .timer-running {
  animation: timer-pulse-dark 2s ease-in-out infinite;
}

/* Timer spinning icon */
@keyframes timer-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.timer-spin {
  animation: timer-spin 3s linear infinite;
  transform-origin: center;
}

.time-cell {
  @apply w-16 px-2 py-1 text-center text-sm bg-transparent border border-transparent rounded
         hover:border-black/10 dark:hover:border-white/10
         focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none
         text-black/90 dark:text-white;
}

.time-cell::-webkit-inner-spin-button,
.time-cell::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.time-cell[type=number] {
  -moz-appearance: textfield;
}

.week-day-cell {
  @apply px-3 py-2 text-center rounded-md transition-colors;
}

.week-day-cell.is-selected {
  @apply bg-white dark:bg-surface-dark shadow-sm;
}

.week-day-cell.is-today {
  @apply text-primary font-medium;
}