/* app/assets/stylesheets/tailwind_compat_patch.css
 * Load after tailwind.css
 */

/* ---------- OKLCH fallback ---------- */
@supports not (color: oklch(0 0 0)) {

  :root,
  :host {
    /* Blues */
    --color-blue-50: rgb(239 246 255);
    --color-blue-100: rgb(219 234 254);
    --color-blue-400: rgb(96 165 250);
    --color-blue-500: rgb(59 130 246);
    --color-blue-600: rgb(37 99 235);

    /* Indigo */
    --color-indigo-50: rgb(238 242 255);
    --color-indigo-100: rgb(224 231 255);
    --color-indigo-500: rgb(99 102 241);
    --color-indigo-600: rgb(79 70 229);
    --color-indigo-800: rgb(55 48 163);

    /* Greens */
    --color-green-100: rgb(220 252 231);
    --color-green-800: rgb(22 101 52);

    /* Grays */
    --color-gray-50: rgb(249 250 251);
    --color-gray-100: rgb(243 244 246);
    --color-gray-200: rgb(229 231 235);
    --color-gray-300: rgb(209 213 219);
    --color-gray-500: rgb(107 114 128);
    --color-gray-600: rgb(75 85 99);
    --color-gray-700: rgb(55 65 81);
    --color-gray-800: rgb(31 41 55);
    --color-gray-900: rgb(17 24 39);

    --color-white: #fff;
    --color-black: #000;
  }

  /* Make SVGs follow text color (so .text-* affects icons) */
  svg {
    fill: currentColor;
    stroke: currentColor;
  }

  /* Buttons */
  .btn {
    border-width: 1px;
    border-style: solid;
  }

  /* Primary = black */
  .btn.btn-primary {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
  }

  .btn.btn-primary:hover,
  .btn.btn-primary:focus {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
    color: var(--color-white);
  }

  .btn.btn-primary:disabled {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-800);
    color: var(--color-white);
    opacity: .7;
  }

  /* Secondary = light gray */
  .btn.btn-secondary {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-200);
    color: var(--color-gray-800);
  }

  .btn.btn-secondary:hover,
  .btn.btn-secondary:focus {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-gray-800);
  }

  /* Visible focus ring */
  .btn:focus {
    outline: 2px solid var(--color-indigo-500);
    outline-offset: 2px;
  }
}

/* UA quirks */
button,
.btn {
  -webkit-appearance: none;
  appearance: none;
}

/* Utility shims */
.ml-auto {
  margin-left: auto !important;
}

.pr-2 {
  padding-right: .5rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

/* Opacity helpers */
.opacity-50 {
  opacity: .5 !important;
}

.opacity-60 {
  opacity: .6 !important;
}

.opacity-70 {
  opacity: .7 !important;
}

.opacity-80 {
  opacity: .8 !important;
}

/* Helpers */
.flex-nowrap {
  flex-wrap: nowrap !important;
}

.shrink-0 {
  flex-shrink: 0 !important;
}

.min-w-0 {
  min-width: 0 !important;
}

/* ---------- BASE NAV STYLES (mobile first) ---------- */
/* NOTE: do NOT force .nav-container display here.
   Let the Tailwind `hidden` class control visibility so Stimulus can toggle it. */
.top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 1rem !important;
  /* px-4 */
  padding-right: 1rem !important;
}

/* Edge sections must not shrink */
.top-nav .logo,
.top-nav .nav-user-controls {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Middle section may be hidden on mobile via .hidden; when visible it can flex */
.top-nav .nav-container {
  min-width: 0 !important;
}

/* ---------- Classic media queries (sm/md) ---------- */
@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row !important;
  }

  .sm\:items-end {
    align-items: flex-end !important;
  }

  .sm\:space-x-4> :not([hidden])~ :not([hidden]) {
    margin-left: 1rem !important;
  }

  .sm\:space-y-0> :not([hidden])~ :not([hidden]) {
    margin-top: 0 !important;
  }

  .sm\:w-auto {
    width: auto !important;
  }

  .sm\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .sm\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .sm\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .sm\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }

  .sm\:text-6xl {
    font-size: 3.75rem !important;
    line-height: 1 !important;
  }

  .sm\:grid {
    display: grid !important;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sm\:gap-x-8 {
    column-gap: 2rem !important;
  }
}

@media (min-width: 768px) {
  .md\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---------- DESKTOP (lg ≥ 1024px) ---------- */
@media (min-width: 1024px) {

  /* Use a robust 3-column grid to avoid flex wrapping quirks */
  .top-nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    /* logo | middle | actions */
    align-items: center !important;
    column-gap: .5rem !important;
    padding-left: 1.5rem !important;
    /* lg:px-6-ish */
    padding-right: 1.5rem !important;
  }

  /* Middle cell holds the two <nav>s */
  .top-nav .nav-container {
    display: flex !important;
    /* show desktop menu */
    align-items: center !important;
    min-width: 0 !important;
    /* allow shrinking instead of wrapping */
    gap: .5rem !important;
    /* gap-2 */
    padding-right: .5rem !important;
    /* pr-2 */
  }

  /* left_nav grows, right_nav hugs content on the far right */
  .top-nav .nav-container>nav:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .top-nav .nav-container>nav:last-child {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: .5rem !important;
    white-space: nowrap !important;
    /* keep buttons on one line */
  }

  /* gap fallback if flex-gap is ignored */
  .top-nav .nav-container>nav:last-child>*+* {
    margin-left: .5rem !important;
  }

  /* Keep edge columns fixed */
  .top-nav .logo,
  .top-nav .nav-user-controls {
    min-width: 0 !important;
  }

  /* Hide hamburger on desktop */
  #sidebar-open {
    display: none !important;
  }

  /* Other utilities you use */
  .lg\:flex {
    display: flex !important;
  }

  .lg\:hidden {
    display: none !important;
  }

  .lg\:items-center {
    align-items: center !important;
  }

  .lg\:justify-end {
    justify-content: flex-end !important;
  }

  .lg\:justify-between {
    justify-content: space-between !important;
  }

  .lg\:space-x-4> :not([hidden])~ :not([hidden]) {
    margin-left: 1rem !important;
  }

  .lg\:space-x-6> :not([hidden])~ :not([hidden]) {
    margin-left: 1.5rem !important;
  }

  .lg\:grid {
    display: grid !important;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .lg\:gap-x-12 {
    column-gap: 3rem !important;
  }

  .lg\:gap-x-16 {
    column-gap: 4rem !important;
  }

  .lg\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .lg\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  .lg\:max-w-7xl {
    max-width: 80rem !important;
  }
}

/* ---------- LAST-RESORT NO-FLEX FALLBACK ---------- */
@supports not (display: flex) {
  .top-nav {
    display: block !important;
  }

  .top-nav .logo {
    float: left !important;
  }

  .top-nav .nav-user-controls {
    float: right !important;
  }

  .top-nav .nav-container {
    clear: both !important;
    display: block !important;
  }

  @media (min-width: 1024px) {
    .top-nav .nav-container {
      clear: none !important;
    }

    .top-nav .nav-container>nav:first-child {
      float: left !important;
      width: 70% !important;
    }

    .top-nav .nav-container>nav:last-child {
      float: right !important;
      width: auto !important;
      white-space: nowrap !important;
    }
  }
}