/*
 * Graceful degradation when the main Tailwind bundle (index.css) fails to load.
 * Fixes: duplicate mobile+desktop list UIs, filter chips running together, bottom nav on desktop.
 * Keep rules minimal and avoid !important so real Tailwind can override when present.
 */

/* --- Core layout (list pages + header) --- */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.self-stretch {
  align-self: stretch;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.min-w-0 {
  min-width: 0;
}
.w-full {
  width: 100%;
}
.max-w-md {
  max-width: 28rem;
}

.gap-0 {
  gap: 0;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}

.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.inset-0 {
  inset: 0;
}
.inset-y-0 {
  top: 0;
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}
.top-1\/2 {
  top: 50%;
}

.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[200\] {
  z-index: 200;
}

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.table-header-group {
  display: table-header-group;
}
.table-row-group {
  display: table-row-group;
}

/* --- display:none base (responsive utilities below override when both apply) --- */
.hidden {
  display: none;
}

/* --- sm (640px) --- */
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:table-cell {
    display: table-cell;
  }
}

/* --- md (768px) --- */
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:inline {
    display: inline;
  }
  .md\:hidden {
    display: none;
  }
  .md\:table-cell {
    display: table-cell;
  }
  .md\:grid {
    display: grid;
  }
}

/* --- lg (1024px) --- */
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:inline {
    display: inline;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:table-cell {
    display: table-cell;
  }
}

/* --- xl (1280px) --- */
@media (min-width: 1280px) {
  .xl\:block {
    display: block;
  }
  .xl\:flex {
    display: flex;
  }
  .xl\:inline-flex {
    display: inline-flex;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:table-cell {
    display: table-cell;
  }
}

/* Translate for search icon etc. when utilities missing */
.\-translate-y-1\/2 {
  transform: translateY(-50%);
}