/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* === Custom Fonts === */
@font-face {
  font-family: 'DIN Alternate';
  src: url("/assets/DINAlternateBold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Color Tokens === */
:root {
  /* Main page background: dark on desktop, lighter in mobile/PWA */
  --page-main-bg: #0f1419;
}

/* === PWA Safe Area & Dynamic Viewport ===
 *
 * `--avail-height` is the **available content height** inside <main> after
 * subtracting the iOS notch (safe-area-inset-top) and the mobile bottom-nav
 * (which itself includes safe-area-inset-bottom). Inner pages should always
 * size against this token rather than `100dvh`, otherwise on iPhone PWA they
 * end up overflowing — content gets pushed up under the notch and the bottom
 * gets clipped behind the home-indicator-aware bottom nav.
 *
 * Desktop: --safe-top=0, --bottom-nav-height=0 → --avail-height = 100dvh.
 * iPhone 14 PWA: --safe-top=47px, --bottom-nav-height=64+34=98px → 707px. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Navbar geometry: 0 on mobile (uses bottom nav), 64px sidebar on desktop. */
  --navbar-width: 64px;
  --bottom-nav-height: 0px;
  /* Visual-viewport height (set by JS in app/views/layouts/application.html.erb).
   * Tracks iOS keyboard so floating panels can use it instead of 100dvh.
   * Falls back to 100dvh until the JS init runs. */
  --vvh: 100dvh;
  /* Available content height inside Rails <main> after subtracting the iOS
   * notch and the mobile bottom nav. AppRoot scopes this *further* on its
   * own wrapper element when it mounts the desktop BottomToolbar — so any
   * page descendant gets a toolbar-aware value automatically. */
  --avail-height: calc(100dvh - var(--safe-top) - var(--bottom-nav-height));
}

/* A narrowed desktop PWA/window should use the mobile layout, but it is still
 * not a notched phone. Keep iOS/Android safe-area behavior intact while
 * preventing desktop browser chrome from becoming empty in-app top padding. */
@media (max-width: 1023px) {
  :root.desktop-runtime {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --avail-height: calc(100dvh - var(--bottom-nav-height));
  }

  :root.desktop-runtime body > main {
    padding-top: 0 !important;
  }
}

@supports not (height: 100dvh) {
  :root {
    --vvh: 100vh;
    --avail-height: calc(100vh - var(--safe-top) - var(--bottom-nav-height));
  }
}

/* Mobile overrides */
@media (max-width: 1023px) {
  :root {
    --navbar-width: 0px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
    /* PWA/Mobile: lighter main background */
    --page-main-bg: #161b21;
  }
}

/* PWA standalone mode: lighter background */
@media (display-mode: standalone) {
  :root {
    --page-main-bg: #161b21;
  }

  /* In standalone, make all dark bg elements use the lighter page bg */
  .dark body,
  .dark .bg-page-main { background-color: var(--page-main-bg) !important; }
}

/* Safe-area utility classes */
.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-left { padding-left: var(--safe-left); }
.safe-right { padding-right: var(--safe-right); }
.safe-x { padding-left: var(--safe-left); padding-right: var(--safe-right); }
.safe-y { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.safe-all { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.h-screen-safe { height: var(--avail-height); }
.min-h-screen-safe { min-height: var(--avail-height); }

/* Margin-based safe-area variants (for fixed elements) */
.mt-safe { margin-top: var(--safe-top); }
.mb-safe { margin-bottom: var(--safe-bottom); }

.pwa-desktop-hidden {
  display: none !important;
}

.pwa-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  height: max(64px, var(--bottom-nav-height));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--pwa-nav-bg);
  border-top: 1px solid var(--pwa-border);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), var(--pwa-shadow);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.pwa-bottom-nav-item {
  position: relative;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 6px 2px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pwa-muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 80ms ease;
}

.pwa-bottom-nav-item.is-active {
  color: var(--pwa-nav-active);
  background: var(--pwa-active-soft);
}

.pwa-bottom-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.pwa-bottom-nav-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.pwa-bottom-nav-label {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-bottom-nav .alerts-with-tooltip,
.pwa-bottom-nav [data-tour="user-menu"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.pwa-bottom-nav [data-tour="user-menu"] img {
  border-radius: inherit;
}

.pwa-bottom-nav .alerts-with-tooltip i {
  color: currentColor !important;
  font-size: 21px;
}

.pwa-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--pwa-backdrop);
}

.pwa-more-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  max-height: min(82dvh, 620px);
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--pwa-surface-elevated);
  border: 1px solid var(--pwa-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--pwa-shadow);
  color: var(--pwa-text);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}

.pwa-sheet-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--pwa-border-strong);
}

.pwa-more-org {
  margin-bottom: 12px;
}

.pwa-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pwa-more-tile {
  min-width: 0;
  min-height: 78px;
  padding: 10px 6px;
  border: 1px solid var(--pwa-border);
  border-radius: 8px;
  background: var(--pwa-surface-soft);
  color: var(--pwa-muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease;
}

.pwa-more-tile.is-active {
  color: var(--pwa-nav-active);
  background: var(--pwa-active-soft);
  border-color: var(--pwa-border-strong);
  border-color: color-mix(in srgb, var(--pwa-nav-active) 38%, transparent);
}

.pwa-more-tile.is-accent {
  color: var(--pwa-primary);
  background: var(--pwa-primary-soft);
  border-color: var(--pwa-border-strong);
  border-color: color-mix(in srgb, var(--pwa-primary) 28%, transparent);
}

.pwa-more-tile-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.pwa-more-tile-icon svg {
  width: 24px;
  height: 24px;
}

.pwa-more-tile-label {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared mobile application primitives. These are intentionally small and
 * neutral: screens can keep their own visual language, but the touch geometry
 * is consistent across drawers, sheets, project lists, and composers. */
@media (max-width: 1023px), (pointer: coarse) {
  :root.pwa-standalone .pwa-app-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  :root.pwa-standalone .pwa-app-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  :root.pwa-standalone .pwa-touch-target {
    min-width: 44px;
    min-height: 44px;
  }

  :root.pwa-standalone .pwa-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }

  :root.pwa-standalone .pwa-segmented-control {
    min-height: 44px;
    padding: 2px;
    border-radius: 10px;
  }

  :root.pwa-standalone .pwa-segmented-control > button {
    min-height: 40px;
  }

  :root.pwa-standalone .pwa-comment-tool {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 10px;
  }

  :root.pwa-standalone .pwa-desktop-hidden {
    display: block !important;
  }

  :root.pwa-standalone .pwa-mobile-hidden {
    display: none !important;
  }

  :root.pwa-standalone .pwa-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  :root.pwa-standalone .pwa-mobile-card {
    border: 1px solid var(--pwa-border);
    border-radius: 8px;
    background: var(--pwa-surface);
    color: var(--pwa-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  :root.pwa-standalone .pwa-mobile-card-button {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  :root.pwa-standalone .pwa-mobile-card-title {
    overflow: hidden;
    color: var(--pwa-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root.pwa-standalone .pwa-mobile-card-subtitle {
    margin-top: 3px;
    overflow: hidden;
    color: var(--pwa-muted);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root.pwa-standalone .pwa-mobile-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  :root.pwa-standalone .pwa-mobile-meta {
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--pwa-surface-soft);
  }

  :root.pwa-standalone .pwa-mobile-meta-label {
    display: block;
    overflow: hidden;
    color: var(--pwa-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  :root.pwa-standalone .pwa-mobile-meta-value {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--pwa-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root.pwa-standalone .pwa-mobile-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  :root.pwa-standalone .pwa-mobile-progress-track {
    height: 7px;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pwa-surface-soft);
  }

  :root.pwa-standalone .pwa-mobile-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--pwa-accent);
  }

  :root.pwa-standalone .pwa-mobile-progress-value {
    min-width: 36px;
    color: var(--pwa-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
  }

  :root.pwa-standalone .pwa-mobile-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  :root.pwa-standalone .pwa-mobile-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  :root.pwa-standalone .pwa-mobile-pagination {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  :root.pwa-standalone .pwa-mobile-pagination > div:last-child {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  :root.pwa-standalone .pwa-mobile-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

@media (min-width: 1024px) and (pointer: fine) {
  .pwa-desktop-hidden {
    display: none !important;
  }
}

.pwa-bottom-sheet {
  color: var(--ps-text);
}

/* Fluid typography for mobile: scale down on small screens */
@media (max-width: 639px) {
  html {
    font-size: clamp(14px, 3.8vw, 16px);
  }

  /* Touch target helper — opt-in only (add class="touch-target" to critical buttons) */
  /* Global 44px enforcement removed: it breaks badges, inline links, and small UI components */

  /* Horizontal lists → vertical or horizontal scroll on small screens */
  .mobile-scroll-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }
  .mobile-scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .mobile-scroll-x::-webkit-scrollbar {
    display: none;
  }

  .mobile-stack {
    flex-direction: column !important;
  }
}

/* Theme CSS Variables */
:root {
  --color-background: white;
  --color-surface: rgb(249, 250, 251);
  --color-border: rgb(229, 231, 235);
  --color-text-primary: rgb(17, 24, 39);
  --color-text-secondary: rgb(107, 114, 128);
  --color-accent: rgb(215, 255, 0);
  --color-accent-hover: rgb(196, 235, 0);
  --more-sheet-bg: #f3f4f6;
  --pwa-shell-bg: #f6f7fa;
  --pwa-surface: #ffffff;
  --pwa-surface-elevated: rgba(255, 255, 255, 0.92);
  --pwa-surface-soft: #eef1f5;
  --pwa-border: rgba(17, 24, 39, 0.12);
  --pwa-border-strong: rgba(17, 24, 39, 0.18);
  --pwa-text: #111827;
  --pwa-muted: #647084;
  --pwa-accent: #579600;
  --pwa-accent-contrast: #101411;
  --pwa-primary: #5b50db;
  --pwa-primary-soft: rgba(91, 80, 219, 0.11);
  --pwa-active-soft: rgba(215, 255, 0, 0.24);
  --pwa-nav-bg: rgba(255, 255, 255, 0.90);
  --pwa-nav-active: #4f8500;
  --pwa-backdrop: rgba(15, 20, 25, 0.36);
  --pwa-shadow: 0 -18px 42px rgba(17, 24, 39, 0.15);

  /* Settings/Reports surfaces — must live on `:root` so they exist on
   * the very first browser paint, before React mounts ReportsLayout
   * and injects its <style>{SETTINGS_UI_CSS}</style> block. Otherwise
   * `<main style={{ background: var(--settings-page-bg, #0f1419) }}>`
   * would fall back to the dark default and flash on light-theme reload.
   * (Mirrors light-theme block in app/javascript/components/Settings/settingsTheme.js.) */
  --settings-page-bg: #ffffff;
  --settings-content-bg: #f3f4f6;
  --settings-panel-bg: #ffffff;
  --settings-surface-bg: #f3f4f6;
  --settings-surface-hover-bg: #e5e7eb;
  --settings-border: #e5e7eb;
  --settings-border-strong: #d1d5db;
  --settings-text: #111827;
  --settings-subtext: #374151;
  --settings-muted: #6b7280;
  --settings-muted-soft: #9ca3af;
  --settings-input-bg: #f9fafb;
  --settings-input-text: #111827;
  --settings-accent-text: #579600;
  --settings-accent-bg: rgba(215,255,0,0.16);
  --settings-accent-bg-strong: rgba(215,255,0,0.20);
  --settings-accent-border: #b8d900;
  --settings-focus-ring: rgba(215,255,0,0.16);
  --settings-shadow: 0 12px 32px rgba(17,24,39,0.08);
  --settings-soft-shadow: 0 1px 3px rgba(17,24,39,0.06);
  --settings-danger-bg: #fef2f2;
  --settings-danger-border: #fecaca;
  --settings-danger-text: #b91c1c;
  --settings-success-bg: #dcfce7;
  --settings-success-text: #15803d;
  --settings-warning-bg: #fffbeb;
  --settings-warning-text: #b45309;
  --settings-purple-bg: rgba(106,92,255,0.10);
  --settings-purple-text: #5b50db;
  --stage-status-completed-text: #579600;
  --stage-status-completed-border: #8aa300;
  --stage-status-approved-text: #3f7a12;
  --stage-status-approved-border: #4d7c0f;
  --stage-status-in-progress-text: #5b4df2;
  --stage-status-in-progress-border: #5b4df2;
  --stage-status-blocked-text: #dc2626;
  --stage-status-blocked-border: #dc2626;
  --stage-status-waiting-text: #b45309;
  --stage-status-waiting-border: #b45309;
  --stage-status-default-text: #4b5563;
  --stage-status-default-border: #4b5563;
  --stage-muted-text: #4b5563;
  --stage-card-bg: #f8fafc;
  --stage-card-border: #d6deea;
  --stage-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 1px 3px rgba(15, 23, 42, 0.06);
  --stage-card-hover-bg: #fbfcfe;
  --stage-card-selected-bg: #eef3f8;
  --stage-card-hover-text: #111827;
  --stage-action-border: #cbd5e1;
  --stage-action-hover-text: #374151;

  /* Emoji Picker React overrides */
  --epr-dark-category-icon-active-color: #d7ff00;
}

.dark {
  --color-background: #161b21;
  --color-surface: #1a1f26;
  --more-sheet-bg: #161b21;
  --pwa-shell-bg: #0f1419;
  --pwa-surface: #161b21;
  --pwa-surface-elevated: rgba(22, 27, 33, 0.92);
  --pwa-surface-soft: rgba(255, 255, 255, 0.05);
  --pwa-border: rgba(255, 255, 255, 0.08);
  --pwa-border-strong: rgba(255, 255, 255, 0.14);
  --pwa-text: #f8fafc;
  --pwa-muted: #9ca3af;
  --pwa-accent: #d7ff00;
  --pwa-accent-contrast: #101411;
  --pwa-primary: #8b7dff;
  --pwa-primary-soft: rgba(139, 125, 255, 0.13);
  --pwa-active-soft: rgba(215, 255, 0, 0.10);
  --pwa-nav-bg: rgba(15, 20, 25, 0.88);
  --pwa-nav-active: #d7ff00;
  --pwa-backdrop: rgba(0, 0, 0, 0.56);
  --pwa-shadow: 0 -18px 48px rgba(0, 0, 0, 0.34);

  /* Dark variants of the settings/reports surface variables. Same
   * reasoning as on :root above — present before React. */
  --settings-page-bg: #0f1419;
  --settings-content-bg: #161b21;
  --settings-panel-bg: #1a1f26;
  --settings-surface-bg: rgba(37,43,51,0.6);
  --settings-surface-hover-bg: rgba(255,255,255,0.05);
  --settings-border: rgba(255,255,255,0.08);
  --settings-border-strong: rgba(255,255,255,0.12);
  --settings-text: #ffffff;
  --settings-subtext: #d1d5db;
  --settings-muted: #9ca3af;
  --settings-muted-soft: #6b7280;
  --settings-input-bg: rgba(37,43,51,0.6);
  --settings-input-text: #ffffff;
  --settings-accent-text: #d7ff00;
  --settings-accent-bg: rgba(215,255,0,0.10);
  --settings-accent-bg-strong: rgba(215,255,0,0.15);
  --settings-accent-border: rgba(215,255,0,0.40);
  --settings-focus-ring: rgba(215,255,0,0.12);
  --settings-shadow: 0 12px 32px rgba(0,0,0,0.30);
  --settings-soft-shadow: none;
  --settings-danger-bg: rgba(239,68,68,0.08);
  --settings-danger-border: rgba(239,68,68,0.30);
  --settings-danger-text: #fca5a5;
  --settings-success-bg: rgba(34,197,94,0.15);
  --settings-success-text: #4ade80;
  --settings-warning-bg: rgba(245,158,11,0.14);
  --settings-warning-text: #f59e0b;
  --settings-purple-bg: rgba(106,92,255,0.12);
  --settings-purple-text: #a59cff;
  --color-border: rgb(31, 41, 55);
  --color-text-primary: white;
  --color-text-secondary: rgb(209, 213, 219);
  --color-accent: rgb(215, 255, 0);
  --color-accent-hover: rgb(196, 235, 0);
  --stage-status-completed-text: #d7ff00;
  --stage-status-completed-border: #d7ff00;
  --stage-status-approved-text: #84cc16;
  --stage-status-approved-border: #84cc16;
  --stage-status-in-progress-text: #6a5cff;
  --stage-status-in-progress-border: #6a5cff;
  --stage-status-blocked-text: #ef4444;
  --stage-status-blocked-border: #ef4444;
  --stage-status-waiting-text: #f59e0b;
  --stage-status-waiting-border: #f59e0b;
  --stage-status-default-text: #4b5563;
  --stage-status-default-border: #4b5563;
  --stage-muted-text: #9ca3af;
  --stage-card-bg: #1a1f26;
  --stage-card-border: rgba(255, 255, 255, 0.05);
  --stage-card-shadow: none;
  --stage-card-hover-bg: rgba(255, 255, 255, 0.04);
  --stage-card-selected-bg: #20262e;
  --stage-card-hover-text: #e5e7eb;
  --stage-action-border: #374151;
  --stage-action-hover-text: #d1d5db;
  
  /* Emoji Picker React overrides */
  --epr-dark-category-icon-active-color: #d7ff00;
}

/* Emoji Picker: Force override category icon active color */
aside.epr-main,
.epr-main {
  --epr-category-icon-active-color: #d7ff00 !important;
  --epr-dark-category-icon-active-color: #d7ff00 !important;
}

/* Emoji Picker: Hide the circular border around active icons */
.epr-main button[aria-selected="true"]::before,
.epr-main .epr-cat-btn[aria-selected="true"]::before,
.epr-main .epr-cat-btn:focus::before {
  display: none !important;
  border: none !important;
}

/* Emoji Picker: Force recolor blue (#3371B7) SVG icons to lime (#d7ff00) */
/* The icons are background-image with hardcoded blue color in SVG */
.epr-main .epr-cat-btn.epr-active,
.epr-main button[aria-selected="true"].epr-cat-btn,
.epr-main .epr-cat-btn:hover {
  filter: brightness(0) saturate(100%) invert(88%) sepia(85%) saturate(2196%) hue-rotate(8deg) brightness(107%) contrast(106%) !important;
}

/* Disable autofill background and text color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #161b21 !important;
}

/* === Native-feel polish ===
 *
 * Tap highlight: iOS/Android default to a translucent black flash on tap,
 * which looks weird on dark UI. Match the brand instead — barely visible
 * lime tint that confirms the touch landed without screaming.
 *
 * touch-action: manipulation kills the legacy 300ms double-tap-zoom delay
 * that some Android browsers still ship. Applies to all interactive
 * surfaces; non-interactive content keeps default behaviour. */
html {
  -webkit-tap-highlight-color: rgba(215, 255, 0, 0.18);
  touch-action: manipulation;
}

/* Press-state feedback for any element a user taps: tiny scale-down + fade
 * so the UI feels physical, not like a static page. Scoped to (pointer:
 * coarse) so desktop with a precise mouse keeps its hover-only behaviour
 * (scaling on every mouse-up looks twitchy with a cursor). */
@media (pointer: coarse) {
  button:not(:disabled):active,
  [role="button"]:not([aria-disabled="true"]):active,
  a:active {
    transform: scale(0.97);
    transition: transform 80ms ease-out;
  }
}

/* Keyframes for the route-change fade-up. PageTransition.jsx applies
 * `animation: route-fade-in ...` on every pathname change. Using iOS's
 * spring-ish curve so it matches BottomSheet / MoreSheet motion. */
@keyframes route-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.route-transition {
  animation: route-fade-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity, transform;
}

/* iOS Safari zooms in on focus when an input's font-size is < 16px.
 * That zoom is jarring and never reverses on blur, so the user is left at
 * 110%+ until they manually pinch. Force every text-entry control on
 * touch devices to ≥ 16px to prevent the zoom entirely. Desktop with a
 * precise pointer keeps its compact 14px so settings/forms don't suddenly
 * look chunky on a Mac. */
@media (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
    /* Apple HIG minimum touch target — single-line inputs that would
     * otherwise be ~32px tall become hittable. */
    min-height: 44px;
  }
}

/* Honour user preferences — kill all animations for users with reduced
 * motion enabled (system setting on iOS/macOS/Android). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth theme transitions */
body,
nav,
main,
.theme-transition {
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out;
}

/* Scrollbar styles are defined in the "Custom Scrollbar" section below */

/* Disable transitions on page load */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* Radix UI Dropdown Menu Animations */
@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-state="open"][data-side="bottom"] {
  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-state="closed"][data-side="bottom"] {
  animation: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fullscreen video player styles */
.video-player-container:fullscreen,
.video-player-container:-webkit-full-screen,
.video-player-container:-moz-full-screen {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
  background: black !important;
}

.video-player-container:fullscreen > div,
.video-player-container:-webkit-full-screen > div,
.video-player-container:-moz-full-screen > div {
  border-radius: 0 !important;
}

.video-player-container:fullscreen > div:first-child,
.video-player-container:-webkit-full-screen > div:first-child,
.video-player-container:-moz-full-screen > div:first-child {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.video-player-container:fullscreen video,
.video-player-container:-webkit-full-screen video,
.video-player-container:-moz-full-screen video {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Pikaday Dark Theme */
.pika-single {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
  color: white !important;
}

.pika-title {
  background: #1a1f26 !important;
  color: white !important;
}

.pika-label {
  color: white !important;
  background: transparent !important;
}

.pika-select {
  background: #161b21 !important;
  color: white !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.25rem !important;
  padding: 0.25rem !important;
}

.pika-select:hover {
  background: rgba(215, 255, 0, 0.1) !important;
}

.pika-select option {
  background: #161b21 !important;
  color: white !important;
}

.pika-prev,
.pika-next {
  background: transparent !important;
}

.pika-prev:hover,
.pika-next:hover {
  background: rgba(215, 255, 0, 0.1) !important;
}

.pika-table th {
  color: rgb(156, 163, 175) !important;
}

.pika-button {
  background: transparent !important;
  color: white !important;
}

.pika-button:hover {
  background: rgba(215, 255, 0, 0.2) !important;
  border-radius: 0.25rem !important;
}

.is-selected .pika-button {
  background: rgb(215, 255, 0) !important;
  color: #161b21 !important;
  box-shadow: none !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
}

.is-today .pika-button {
  color: rgb(215, 255, 0) !important;
  font-weight: 600 !important;
}

.is-disabled .pika-button {
  color: rgb(75, 85, 99) !important;
}

.is-disabled .pika-button:hover {
  background: transparent !important;
  cursor: not-allowed !important;
}

/* Lime Theme Components */
.lime-block {
  background-color: rgb(215, 255, 0);
}

.lime-text {
  color: #161b21;
}

.lime-text-muted {
  color: rgba(15, 20, 25, 0.7);
}

.lime-button {
  background-color: rgb(215, 255, 0);
  color: #161b21;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 200ms ease-in-out;
}

.lime-button:hover {
  background-color: rgb(196, 235, 0);
  transform: translateY(-1px);
}

.lime-icon-bg {
  background-color: rgba(15, 20, 25, 0.1);
}

.lime-card {
  background-color: rgb(215, 255, 0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Custom Color Utilities */
.text-lime-custom {
  color: rgb(215, 255, 0);
}

.bg-lime-custom {
  background-color: rgb(215, 255, 0);
}

.border-lime-custom {
  border-color: rgb(215, 255, 0);
}

.hover\:border-lime-custom:hover {
  border-color: rgb(215, 255, 0);
}

.ring-lime-custom {
  --tw-ring-color: rgb(215, 255, 0);
}

.hover\:bg-lime-custom\/90:hover {
  background-color: rgba(215, 255, 0, 0.9);
}

.focus\:ring-lime-custom:focus {
  --tw-ring-color: rgb(215, 255, 0);
}

.focus\:border-lime-custom:focus {
  border-color: rgb(215, 255, 0);
}

.bg-dark-bg {
  background-color: #161b21;
}

.bg-dark-surface {
  background-color: #1a1f26;
}

.text-dark-bg {
  color: #161b21;
}

.dark .dark\:bg-dark-bg {
  background-color: #161b21;
}

.dark .dark\:bg-dark-surface {
  background-color: #1a1f26;
}

.dark .dark\:text-white {
  color: white;
}

.dark .dark\:border-gray-700 {
  border-color: rgb(55, 65, 81);
}

.dark .dark\:border-gray-800 {
  border-color: rgb(31, 41, 55);
}

/* Lime color utility */
.text-lime {
  color: rgb(215, 255, 0);
}

.hover\:text-lime:hover {
  color: rgb(215, 255, 0);
}

.bg-lime {
  background-color: rgb(215, 255, 0);
}

.hover\:bg-lime:hover {
  background-color: rgb(215, 255, 0);
}

.hover\:bg-lime-darker:hover {
  background-color: rgb(196, 235, 0);
}

/* Advanced Select Dropdown Animation */
.hs-select .hs-select-dropdown {
  opacity: 0;
  transition: opacity 600ms ease-in-out, margin 600ms ease-in-out;
}

.hs-select.active .hs-select-dropdown {
  opacity: 1;
}

/* Custom Scrollbar - Cross-browser */
/* CSS Variables for dynamic theme-aware colors */
:root {
  --scrollbar-thumb-color: rgba(156, 163, 175, 0.4);
  --scrollbar-track-color: transparent;
  --scrollbar-border-color: transparent;
}

.dark {
  --scrollbar-thumb-color: rgba(107, 114, 128, 0.4);
  --scrollbar-track-color: transparent;
  --scrollbar-border-color: transparent;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 200ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
  background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
  background-clip: padding-box;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.dark * {
  scrollbar-color: rgba(107, 114, 128, 0.4) transparent;
}

/* Button hover state with maximum specificity */
button.btn-lime,
a.btn-lime,
.btn-lime {
  color: rgb(215, 255, 0) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

button.btn-lime:hover,
a.btn-lime:hover,
.btn-lime:hover {
  background-color: #1a1f26 !important;
}

button.btn-lime:active,
a.btn-lime:active,
.btn-lime:active {
  background-color: #252b33 !important;
}

button.btn-lime-disabled,
a.btn-lime-disabled,
.btn-lime-disabled {
  color: rgb(156, 163, 175) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

button.btn-lime-disabled:hover,
a.btn-lime-disabled:hover,
.btn-lime-disabled:hover {
  background-color: #1a1f26 !important;
}

/* Flatpickr Custom Styling */
.flatpickr-calendar {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
}

.flatpickr-months {
  background: #1a1f26 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #252b33 !important;
  color: white !important;
}

.flatpickr-day {
  color: rgb(209, 213, 219) !important;
  border-radius: 0.375rem !important;
}

.flatpickr-day:hover {
  background: #252b33 !important;
  border-color: #252b33 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #d7ff00 !important;
  border-color: #d7ff00 !important;
  color: #161b21 !important;
}

.flatpickr-day.today {
  border-color: #d7ff00 !important;
}

.flatpickr-day.disabled {
  color: rgb(75, 85, 99) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #d7ff00 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #c4eb00 !important;
}

.flatpickr-weekday {
  color: rgb(156, 163, 175) !important;
}

/* Global autofill styling override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #161b21 inset !important;
  box-shadow: 0 0 0px 1000px #161b21 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Flatpickr Custom Styling */
.flatpickr-calendar {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
}

.flatpickr-months {
  background: #1a1f26 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #252b33 !important;
  color: white !important;
}

.flatpickr-day {
  color: rgb(209, 213, 219) !important;
  border-radius: 0.375rem !important;
}

.flatpickr-day:hover {
  background: #252b33 !important;
  border-color: #252b33 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #d7ff00 !important;
  border-color: #d7ff00 !important;
  color: #161b21 !important;
}

.flatpickr-day.today {
  border-color: #d7ff00 !important;
}

.flatpickr-day.disabled {
  color: rgb(75, 85, 99) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #d7ff00 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #c4eb00 !important;
}

.flatpickr-weekday {
  color: rgb(156, 163, 175) !important;
}

/* Global autofill styling override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #161b21 inset !important;
  box-shadow: 0 0 0px 1000px #161b21 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Tiptap CollaborationCursor Styles */
.collaboration-cursor__caret {
  border-left: 2px solid;
  border-right: 2px solid;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

.collaboration-cursor__label {
  border-radius: 3px 3px 3px 0;
  color: #161b21;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}

/* Tiptap Comments Decorations */
.comment-highlight {
  /* Remove cursor pointer - keep default text cursor */
  transition: background-color 0.2s;
  background-color: transparent;
  border-bottom: none;
}

/* Don't highlight on hover for inactive comments */
/* .comment-highlight:hover {
  background-color: rgba(215, 255, 0, 0.1);
} */

.comment-highlight-active {
  background-color: rgba(215, 255, 0, 0.3) !important;
  border-bottom: 2px solid #d7ff00;
  padding-bottom: 1px;
}

/* Slightly stronger highlight on hover for active comments */
.comment-highlight-active:hover {
  background-color: rgba(215, 255, 0, 0.4) !important;
}

/* Tiptap Editor Text Selection */
.ProseMirror ::selection {
  background: rgba(215, 255, 0, 0.3);
}

.ProseMirror::-moz-selection {
  background: rgba(215, 255, 0, 0.3);
}

/* Button with lime background sliding animation from left */
.btn-lime-slide {
  position: relative;
  overflow: hidden;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-lime-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d7ff00;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.btn-lime-slide:hover::before {
  transform: translateX(0);
}

.btn-lime-slide:hover {
  color: #161b21;
}

.btn-lime-slide > span {
  position: relative;
  z-index: 1;
}

/* Button with lime background sliding animation from left - 24px height */
.btn-lime-slide-24 {
  position: relative;
  overflow: hidden;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-lime-slide-24::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d7ff00;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.btn-lime-slide-24:hover::before {
  transform: translateX(0);
}

.btn-lime-slide-24:hover {
  color: #161b21;
  border-color: #374151;
}

.btn-lime-slide-24 > span {
  position: relative;
  z-index: 1;
}

/* Disable pointer events on lightbox backdrop only */
body.lightbox-active > *:not([class*="lightbox"]):not(#navbar-root):not(#navbar-mount):not(header):not(aside):not(.left-sidebar):not(.right-sidebar):not(#right-panel-root):not(#projects-sidebar):not(#projects-sidebar-root) {
  pointer-events: none !important;
}

/* CSS variable for navbar width (must be late in file to override any earlier `:root` blocks) */
:root {
  --navbar-width: 64px;
  --bottom-nav-height: 0px;
}

@media (max-width: 1023px) {
  :root {
    --navbar-width: 0px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ensure left sidebar navbar doesn't interfere with modals */
#navbar-mount {
  z-index: 40;
}

/* Radix UI Portal z-index hierarchy */
[data-radix-portal] {
  z-index: 9999;
}

/* Radix Tooltip Dark Theme Override - CSS Variables */
:root,
.radix-themes {
  --tooltip-bg: #1a1f26;
  --tooltip-color: #9ca3af;
  --color-overlay: #1a1f26;
  --gray-1: #9ca3af;
  --gray-2: #1a1f26;
  --gray-a1: #1a1f26;
  --gray-a2: #1a1f26;
}

/* Force override Radix Tooltip styles - Maximum Specificity */
.radix-themes .rt-TooltipContent,
.rt-TooltipContent,
[role="tooltip"],
[data-radix-popper-content-wrapper] [role="tooltip"],
[data-radix-tooltip-content] {
  background-color: #1a1f26 !important;
  background: #1a1f26 !important;
  color: #9ca3af !important;
  border: 1px solid #9ca3af !important;
  box-shadow: none !important;
}

/* Target tooltip text specifically */
.rt-TooltipText,
.rt-TooltipContent .rt-TooltipText {
  color: #9ca3af !important;
}

.radix-themes .rt-TooltipContent *,
.rt-TooltipContent * {
  color: #9ca3af !important;
}

.radix-themes .rt-TooltipArrow,
.rt-TooltipArrow {
  fill: #1a1f26 !important;
  color: #1a1f26 !important;
  filter: brightness(0) saturate(0) invert(9%) !important;
}

.radix-themes .rt-TooltipArrow svg,
.rt-TooltipArrow svg,
.rt-TooltipArrow path,
.radix-themes .rt-TooltipArrow path {
  fill: #1a1f26 !important;
  color: #1a1f26 !important;
  stroke: #1a1f26 !important;
}

/* Light theme Radix Dropdown override */
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuContent,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubContent,
html:not(.dark) .rt-DropdownMenuContent,
html:not(.dark) .rt-DropdownMenuSubContent {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  --color-panel-solid: #ffffff !important;
  --color-surface: #ffffff !important;
  --color-panel: #ffffff !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem,
html:not(.dark) .rt-DropdownMenuItem,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger,
html:not(.dark) .rt-DropdownMenuSubTrigger {
  color: #374151 !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem:hover,
html:not(.dark) .rt-DropdownMenuItem:hover,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger:hover,
html:not(.dark) .rt-DropdownMenuSubTrigger:hover,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted],
html:not(.dark) .rt-DropdownMenuItem[data-highlighted],
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted],
html:not(.dark) .rt-DropdownMenuSubTrigger[data-highlighted] {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted] svg,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted] i,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted] svg,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted] i {
  color: #111827 !important;
}

/* Gradient Background */
.gradient-bg {
  background: linear-gradient(180deg, 
    transparent 0%,
    transparent 15%,
    rgba(168, 230, 207, 0.4) 30%,
    rgba(127, 209, 174, 0.7) 45%,
    #7fd1ae 55%,
    #dcedc1 65%,
    #ffd3a5 75%,
    #ffa07a 85%,
    #ff8c69 100%
  );
  background-color: #161b21;
  background-attachment: fixed;
}

/* Responsive utilities */
@media (max-width: 639px) {
  .container-responsive {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .container-responsive {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    padding-left: 24px;
    padding-right: 24px;
  }
}

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

/* Touch-friendly targets */
@media (pointer: coarse) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Safe area for bottom navigation */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Stage description HTML rendering */
.stage-description-html p { margin: 0 0 0.4em; }
.stage-description-html p:last-child { margin-bottom: 0; }
.stage-description-html ul,
.stage-description-html ol { margin: 0.3em 0; padding-left: 1.4em; }
.stage-description-html li { margin: 0.15em 0; }
.stage-description-html li[data-type="taskItem"] {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-left: -1.4em;
  cursor: default;
}
/* CSS-only checkbox via ::before */
.stage-description-html li[data-type="taskItem"]::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(37,43,51,0.6);
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
}
.stage-description-html li[data-type="taskItem"][data-checked="true"]::before {
  background: #d7ff00;
  border-color: #d7ff00;
  /* checkmark via SVG data-uri */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' stroke='%230f1419' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.stage-description-html li[data-type="taskItem"][data-checked="true"] > p,
.stage-description-html li[data-type="taskItem"][data-checked="true"] > div { text-decoration: line-through; opacity: 0.5; }
.stage-description-html strong { font-weight: 600; }
.stage-description-html em { font-style: italic; }
.stage-description-html s { text-decoration: line-through; opacity: 0.6; }
.stage-description-html a { color: #d7ff00; text-decoration: underline; }
html:not(.dark) .stage-description-html a { color: #3b82f6; }
.stage-description-html h1,
.stage-description-html h2,
.stage-description-html h3 { font-weight: 600; margin: 0.4em 0 0.2em; }
.stage-description-html blockquote { border-left: 2px solid #6b7280; padding-left: 0.6em; margin: 0.3em 0; opacity: 0.8; }

/* Inline `<code>` — base rules (dark mode default).

   Editor toolbar's "Code" button wraps the selection in <code>. The
   rendered description previously only set a faint background for
   light mode and inherited the surrounding gray-400 text colour,
   so the highlight was invisible against the white card. We now
   match RichDescriptionEditor.jsx's colour scheme in *both* themes:
   purple text (#c084fc dark / #6d28d9 light) on a tinted surface,
   plus a monospace face so the snippet visually contrasts with
   regular prose.

   The `!important` on bg/color/border is defensive — the parent
   description container is rendered with Tailwind's `text-gray-400`
   class, and Tailwind's preflight resets several text-related
   properties on `code`. Without `!important` some setups (different
   asset-pipeline ordering, dev cache, browser quirks) ended up
   showing the `<code>` text in the same gray as surrounding prose
   and the highlight disappeared. The selector is already specific
   enough that `!important` here just guards against future
   accidents, not against any current sibling rule. */
.stage-description-html code {
  background: rgba(192, 132, 252, 0.18) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.30) !important;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.875em;
  font-weight: 500;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  display: inline-block;
  line-height: 1.4;
}
html:not(.dark) .stage-description-html code,
html:not(.dark) .stage-description-html * code {
  background-color: #ede9fe !important; /* purple-100 — clearly visible on white */
  color: #6d28d9 !important;            /* purple-700 — strong contrast against bg */
  border-color: #c4b5fd !important;     /* purple-300 — more visible than 200 */
}
.stage-description-html pre {
  background: rgba(255,255,255,0.04);
  padding: 0.5em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.3em 0;
}
html:not(.dark) .stage-description-html pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.stage-description-html pre code {
  background: none;
  padding: 0;
  color: inherit;
  border: none;
}

/* ──────────────────────────────────────────────────────────────
   Syntax-highlighting token palette for `<code>` blocks inside
   `.stage-description-html`. The JS in StageDescriptionHtml.jsx
   pipes each multi-line code segment through `lowlight` and gets
   back hljs's standard `.hljs-*` token spans — we colour them
   here. Two palettes:
     – Dark: One Dark inspired (the VSCode default).
     – Light: GitHub Light inspired.
   These were picked because they're the most familiar to
   developers, so colour ↔ meaning is read at a glance without
   thinking. ──────────────────────────────────────────────────── */

/* Light (default) — GitHub Light */
.stage-description-html .hljs-tag             { color: inherit; }
.stage-description-html .hljs-name            { color: #22863a; }                /* tag name */
.stage-description-html .hljs-attr            { color: #6f42c1; }                /* attribute */
.stage-description-html .hljs-string,
.stage-description-html .hljs-attribute       { color: #032f62; }                /* strings, attribute values */
.stage-description-html .hljs-keyword,
.stage-description-html .hljs-selector-tag,
.stage-description-html .hljs-literal,
.stage-description-html .hljs-built_in        { color: #d73a49; }                /* keywords, true/false/null */
.stage-description-html .hljs-comment,
.stage-description-html .hljs-quote           { color: #6a737d; font-style: italic; }
.stage-description-html .hljs-number,
.stage-description-html .hljs-meta            { color: #005cc5; }
.stage-description-html .hljs-title,
.stage-description-html .hljs-title.function_ { color: #6f42c1; }                /* function name */
.stage-description-html .hljs-variable,
.stage-description-html .hljs-template-variable { color: #e36209; }
.stage-description-html .hljs-symbol,
.stage-description-html .hljs-bullet          { color: #032f62; }
.stage-description-html .hljs-section,
.stage-description-html .hljs-emphasis        { color: #d73a49; font-style: italic; }
.stage-description-html .hljs-strong          { font-weight: 600; }

/* Dark — One Dark */
html.dark .stage-description-html .hljs-name            { color: #e06c75; }
html.dark .stage-description-html .hljs-attr            { color: #d19a66; }
html.dark .stage-description-html .hljs-string,
html.dark .stage-description-html .hljs-attribute       { color: #98c379; }
html.dark .stage-description-html .hljs-keyword,
html.dark .stage-description-html .hljs-selector-tag,
html.dark .stage-description-html .hljs-literal,
html.dark .stage-description-html .hljs-built_in        { color: #c678dd; }
html.dark .stage-description-html .hljs-comment,
html.dark .stage-description-html .hljs-quote           { color: #5c6370; font-style: italic; }
html.dark .stage-description-html .hljs-number,
html.dark .stage-description-html .hljs-meta            { color: #d19a66; }
html.dark .stage-description-html .hljs-title,
html.dark .stage-description-html .hljs-title.function_ { color: #61afef; }
html.dark .stage-description-html .hljs-variable,
html.dark .stage-description-html .hljs-template-variable { color: #e06c75; }
html.dark .stage-description-html .hljs-symbol,
html.dark .stage-description-html .hljs-bullet          { color: #56b6c2; }
html.dark .stage-description-html .hljs-section,
html.dark .stage-description-html .hljs-emphasis        { color: #e06c75; font-style: italic; }