/* ==========================================================================
   Meridian Design System - Responsive Grid & Utility Polyfill
   Ensures all Stisla Meridian templates render perfectly on all screen sizes.
   ========================================================================== */

/* 1. Page Header Layout (Stisla Meridian Native) */
.page__header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page__headline {
  flex: 1 1 300px !important;
  min-width: 0 !important;
  text-align: left !important;
}
.page__title {
  font-size: var(--text-3xl, 1.875rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: var(--color-foreground, #0f172a) !important;
  text-align: left !important;
  margin: 0 0 0.25rem 0 !important;
}
.page__title span {
  font-weight: 600 !important;
  color: var(--color-foreground, #0f172a) !important;
}
.page__description {
  font-size: var(--text-sm, 0.875rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--color-muted-foreground, #64748b) !important;
  margin-top: 0.25rem !important;
  text-align: left !important;
}
.page__action {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  justify-content: flex-end !important;
}

/* Visibility & Display Utilities */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }

/* Search Input Group & Header Form Fixes */
.input-group--search {
  display: flex !important;
  align-items: center !important;
  background: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: 9999px !important;
  padding: 0 0.85rem !important;
  height: 2.35rem !important;
  max-width: 16rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}
@media (min-width: 1280px) {
  .input-group--search {
    max-width: 22rem !important;
  }
}
.input-group--search .input-group__text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-muted-foreground, #64748b) !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.input-group--search .input,
.input-group--search input[type="search"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  border-radius: 0 !important;
  outline: none !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.8125rem !important;
  color: var(--color-foreground, #0f172a) !important;
}
.input-group--search:focus-within {
  border-color: var(--color-primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* 2. Base Grid System (1 to 12 Columns) */
.grid { display: grid !important; }
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Column Spans */
.col-span-1  { grid-column: span 1 / span 1 !important; }
.col-span-2  { grid-column: span 2 / span 2 !important; }
.col-span-3  { grid-column: span 3 / span 3 !important; }
.col-span-4  { grid-column: span 4 / span 4 !important; }
.col-span-5  { grid-column: span 5 / span 5 !important; }
.col-span-6  { grid-column: span 6 / span 6 !important; }
.col-span-7  { grid-column: span 7 / span 7 !important; }
.col-span-8  { grid-column: span 8 / span 8 !important; }
.col-span-9  { grid-column: span 9 / span 9 !important; }
.col-span-10 { grid-column: span 10 / span 10 !important; }
.col-span-11 { grid-column: span 11 / span 11 !important; }
.col-span-12 { grid-column: span 12 / span 12 !important; }

/* Gaps */
.gap-1   { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2   { gap: 0.5rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3   { gap: 0.75rem !important; }
.gap-4   { gap: 1rem !important; }
.gap-6   { gap: 1.5rem !important; }
.gap-8   { gap: 2rem !important; }

/* 3. Responsive Breakpoints: Small (sm: >= 640px) */
@media (min-width: 640px) {
  .sm\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .sm\:col-span-1  { grid-column: span 1 / span 1 !important; }
  .sm\:col-span-2  { grid-column: span 2 / span 2 !important; }
  .sm\:col-span-3  { grid-column: span 3 / span 3 !important; }
  .sm\:col-span-4  { grid-column: span 4 / span 4 !important; }
  .sm\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .sm\:col-span-6  { grid-column: span 6 / span 6 !important; }
  .sm\:col-span-7  { grid-column: span 7 / span 7 !important; }
  .sm\:col-span-8  { grid-column: span 8 / span 8 !important; }
  .sm\:col-span-9  { grid-column: span 9 / span 9 !important; }
  .sm\:col-span-10 { grid-column: span 10 / span 10 !important; }
  .sm\:col-span-11 { grid-column: span 11 / span 11 !important; }
  .sm\:col-span-12 { grid-column: span 12 / span 12 !important; }

  .sm\:flex-row { flex-direction: row !important; }
  .sm\:flex-col { flex-direction: column !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:items-start { align-items: flex-start !important; }
  .sm\:justify-between { justify-content: space-between !important; }
  .sm\:ms-auto { margin-inline-start: auto !important; }

  .sm\:hidden { display: none !important; }
  .sm\:block, .hidden.sm\:block { display: block !important; }
  .sm\:inline-block, .hidden.sm\:inline-block { display: inline-block !important; }
  .sm\:flex, .hidden.sm\:flex { display: flex !important; }
}

/* 4. Responsive Breakpoints: Medium (md: >= 768px) */
@media (min-width: 768px) {
  .md\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .md\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .md\:col-span-1  { grid-column: span 1 / span 1 !important; }
  .md\:col-span-2  { grid-column: span 2 / span 2 !important; }
  .md\:col-span-3  { grid-column: span 3 / span 3 !important; }
  .md\:col-span-4  { grid-column: span 4 / span 4 !important; }
  .md\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .md\:col-span-6  { grid-column: span 6 / span 6 !important; }
  .md\:col-span-7  { grid-column: span 7 / span 7 !important; }
  .md\:col-span-8  { grid-column: span 8 / span 8 !important; }
  .md\:col-span-9  { grid-column: span 9 / span 9 !important; }
  .md\:col-span-10 { grid-column: span 10 / span 10 !important; }
  .md\:col-span-11 { grid-column: span 11 / span 11 !important; }
  .md\:col-span-12 { grid-column: span 12 / span 12 !important; }

  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-col { flex-direction: column !important; }
  .md\:items-center { align-items: center !important; }
  .md\:items-start { align-items: flex-start !important; }
  .md\:justify-between { justify-content: space-between !important; }

  /* Desktop visibility */
  .md\:hidden { display: none !important; }
  .md\:block, .hidden.md\:block, div.hidden.md\:block { display: block !important; }
  .md\:flex, .hidden.md\:flex { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
}

/* 5. Responsive Breakpoints: Large (lg: >= 1024px) */
@media (min-width: 1024px) {
  .lg\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .lg\:col-span-1  { grid-column: span 1 / span 1 !important; }
  .lg\:col-span-2  { grid-column: span 2 / span 2 !important; }
  .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
  .lg\:col-span-4  { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-6  { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-8  { grid-column: span 8 / span 8 !important; }
  .lg\:col-span-9  { grid-column: span 9 / span 9 !important; }
  .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
  .lg\:col-span-11 { grid-column: span 11 / span 11 !important; }
  .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }

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

/* 6. Responsive Breakpoints: Extra Large (xl: >= 1280px) */
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:col-span-3  { grid-column: span 3 / span 3 !important; }
  .xl\:col-span-4  { grid-column: span 4 / span 4 !important; }
  .xl\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .xl\:col-span-6  { grid-column: span 6 / span 6 !important; }
  .xl\:col-span-7  { grid-column: span 7 / span 7 !important; }
  .xl\:col-span-8  { grid-column: span 8 / span 8 !important; }
  .xl\:col-span-12 { grid-column: span 12 / span 12 !important; }
}

/* 7. Column Width Utilities for Tables */
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.w-14 { width: 3.5rem !important; }
.w-16 { width: 4rem !important; }
.w-20 { width: 5rem !important; }
.w-24 { width: 6rem !important; }
.w-28 { width: 7rem !important; }
.w-32 { width: 8rem !important; }
.w-36 { width: 9rem !important; }
.w-40 { width: 10rem !important; }
.w-44 { width: 11rem !important; }
.w-48 { width: 12rem !important; }
.w-52 { width: 13rem !important; }
.w-60 { width: 15rem !important; }
.w-64 { width: 16rem !important; }
.w-72 { width: 18rem !important; }
.w-80 { width: 20rem !important; }
.w-88 { width: 22rem !important; }
.w-96 { width: 24rem !important; }
.w-full { width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-\[150px\] { min-width: 150px !important; }
.max-w-\[180px\] { max-width: 180px !important; }
.max-w-\[120px\] { max-width: 120px !important; }
.max-w-\[130px\] { max-width: 130px !important; }

/* 8. Spacing & Padding Utilities (Polyfill for Stisla Meridian) */
/* Space-Y and Space-X */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem !important; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem !important; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem !important; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem !important; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; }

.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem !important; }
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.375rem !important; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.625rem !important; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem !important; }

/* All-Around Padding */
.p-0   { padding: 0 !important; }
.p-0\.5 { padding: 0.125rem !important; }
.p-1   { padding: 0.25rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-2   { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3   { padding: 0.75rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-4   { padding: 1rem !important; }
.p-5   { padding: 1.25rem !important; }
.p-6   { padding: 1.5rem !important; }
.p-7   { padding: 1.75rem !important; }
.p-8   { padding: 2rem !important; }
.p-10  { padding: 2.5rem !important; }
.p-12  { padding: 3rem !important; }

/* Horizontal Padding */
.px-0   { padding-left: 0 !important; padding-right: 0 !important; }
.px-1   { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.px-2   { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3   { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-4   { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5   { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6   { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8   { padding-left: 2rem !important; padding-right: 2rem !important; }

/* Vertical Padding */
.py-0   { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1   { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2   { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3   { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.py-4   { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5   { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6   { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8   { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Directional Padding */
.pt-0   { padding-top: 0 !important; }
.pt-0\.5 { padding-top: 0.125rem !important; }
.pt-1   { padding-top: 0.25rem !important; }
.pt-1\.5 { padding-top: 0.375rem !important; }
.pt-2   { padding-top: 0.5rem !important; }
.pt-2\.5 { padding-top: 0.625rem !important; }
.pt-3   { padding-top: 0.75rem !important; }
.pt-3\.5 { padding-top: 0.875rem !important; }
.pt-4   { padding-top: 1rem !important; }
.pt-5   { padding-top: 1.25rem !important; }
.pt-6   { padding-top: 1.5rem !important; }
.pt-8   { padding-top: 2rem !important; }

.pb-0   { padding-bottom: 0 !important; }
.pb-0\.5 { padding-bottom: 0.125rem !important; }
.pb-1   { padding-bottom: 0.25rem !important; }
.pb-1\.5 { padding-bottom: 0.375rem !important; }
.pb-2   { padding-bottom: 0.5rem !important; }
.pb-2\.5 { padding-bottom: 0.625rem !important; }
.pb-3   { padding-bottom: 0.75rem !important; }
.pb-3\.5 { padding-bottom: 0.875rem !important; }
.pb-4   { padding-bottom: 1rem !important; }
.pb-5   { padding-bottom: 1.25rem !important; }
.pb-6   { padding-bottom: 1.5rem !important; }
.pb-8   { padding-bottom: 2rem !important; }

.pl-0   { padding-left: 0 !important; }
.pl-1   { padding-left: 0.25rem !important; }
.pl-2   { padding-left: 0.5rem !important; }
.pl-2\.5 { padding-left: 0.625rem !important; }
.pl-3   { padding-left: 0.75rem !important; }
.pl-4   { padding-left: 1rem !important; }
.pl-5   { padding-left: 1.25rem !important; }
.pl-6   { padding-left: 1.5rem !important; }

.pr-0   { padding-right: 0 !important; }
.pr-1   { padding-right: 0.25rem !important; }
.pr-2   { padding-right: 0.5rem !important; }
.pr-3   { padding-right: 0.75rem !important; }
.pr-4   { padding-right: 1rem !important; }
.pr-5   { padding-right: 1.25rem !important; }
.pr-6   { padding-right: 1.5rem !important; }

/* Responsive Padding */
@media (min-width: 640px) {
  .sm\:p-3   { padding: 0.75rem !important; }
  .sm\:p-3\.5 { padding: 0.875rem !important; }
  .sm\:p-4   { padding: 1rem !important; }
  .sm\:p-5   { padding: 1.25rem !important; }
  .sm\:p-6   { padding: 1.5rem !important; }
  .sm\:p-8   { padding: 2rem !important; }
  .sm\:px-4  { padding-left: 1rem !important; padding-right: 1rem !important; }
  .sm\:px-6  { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .sm\:py-4  { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .sm\:py-6  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

@media (min-width: 768px) {
  .md\:p-4   { padding: 1rem !important; }
  .md\:p-5   { padding: 1.25rem !important; }
  .md\:p-6   { padding: 1.5rem !important; }
  .md\:p-8   { padding: 2rem !important; }
}

@media (min-width: 1024px) {
  .lg\:p-5   { padding: 1.25rem !important; }
  .lg\:p-6   { padding: 1.5rem !important; }
  .lg\:p-8   { padding: 2rem !important; }
}

/* Margins */
.m-0   { margin: 0 !important; }
.m-1   { margin: 0.25rem !important; }
.m-2   { margin: 0.5rem !important; }
.m-3   { margin: 0.75rem !important; }
.m-4   { margin: 1rem !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-1    { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2    { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3    { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4    { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.mt-0   { margin-top: 0 !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-1   { margin-top: 0.25rem !important; }
.mt-1\.5 { margin-top: 0.375rem !important; }
.mt-2   { margin-top: 0.5rem !important; }
.mt-2\.5 { margin-top: 0.625rem !important; }
.mt-3   { margin-top: 0.75rem !important; }
.mt-3\.5 { margin-top: 0.875rem !important; }
.mt-4   { margin-top: 1rem !important; }
.mt-5   { margin-top: 1.25rem !important; }
.mt-6   { margin-top: 1.5rem !important; }
.mt-8   { margin-top: 2rem !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-0\.5 { margin-bottom: 0.125rem !important; }
.mb-1   { margin-bottom: 0.25rem !important; }
.mb-1\.5 { margin-bottom: 0.375rem !important; }
.mb-2   { margin-bottom: 0.5rem !important; }
.mb-2\.5 { margin-bottom: 0.625rem !important; }
.mb-3   { margin-bottom: 0.75rem !important; }
.mb-4   { margin-bottom: 1rem !important; }
.mb-5   { margin-bottom: 1.25rem !important; }
.mb-6   { margin-bottom: 1.5rem !important; }
.mb-8   { margin-bottom: 2rem !important; }

.ml-1   { margin-left: 0.25rem !important; }
.ml-1\.5 { margin-left: 0.375rem !important; }
.ml-2   { margin-left: 0.5rem !important; }
.ml-3   { margin-left: 0.75rem !important; }
.ml-4   { margin-left: 1rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-1   { margin-right: 0.25rem !important; }
.mr-1\.5 { margin-right: 0.375rem !important; }
.mr-2   { margin-right: 0.5rem !important; }
.mr-3   { margin-right: 0.75rem !important; }
.mr-4   { margin-right: 1rem !important; }
.mr-auto { margin-right: auto !important; }

/* 9. HTMX Indicators & Spinners Guard */
.htmx-indicator {
  display: none !important;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex !important;
}

@keyframes st-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: st-spin 0.8s linear infinite !important;
}
svg.animate-spin,
.animate-spin svg,
#crawl-spinner svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Guard: SVG icon sizing fallbacks so no SVG ever explodes */
svg.w-3, svg.w-3\.5 { width: 0.875rem !important; height: 0.875rem !important; }
svg.w-4, svg.w-4\.5 { width: 1rem !important; height: 1rem !important; }
svg.w-5 { width: 1.25rem !important; height: 1.25rem !important; }
svg.w-6 { width: 1.5rem !important; height: 1.5rem !important; }
svg.h-3, svg.h-3\.5 { height: 0.875rem !important; }
svg.h-4, svg.h-4\.5 { height: 1rem !important; }
svg.h-5 { height: 1.25rem !important; }
svg.h-6 { height: 1.5rem !important; }

/* 10. Leaflet Map Container */
#leads-map {
  width: 100% !important;
  min-height: 380px !important;
  height: 380px !important;
  border-radius: var(--radius-lg, 12px) !important;
  z-index: 1 !important;
}
.leaflet-pane {
  z-index: 400 !important;
}
.leaflet-bottom, .leaflet-top {
  z-index: 500 !important;
}

/* 11. Table Responsive & Card Helpers */
.table-responsive,
.table-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* 12. Card Left-Border Accent Fix:
   Renders a straight vertical 5px accent line inside the left edge of the card,
   preventing awkward rounded-corner distortion and text overlapping.
   Generous left padding ensures text never touches or sits under the line. */
.card.border-l-4,
div.card[class*="border-l-"],
.card.border-l {
  position: relative !important;
  border-left-width: 0 !important;
  overflow: hidden !important;
  padding: 1.25rem 1.5rem 1.25rem 2rem !important;
}
.card.border-l-4.p-6,
.card.p-6[class*="border-l-"] {
  padding: 1.5rem 1.75rem 1.5rem 2.25rem !important;
}
.card.border-l-4.p-5,
.card.p-5[class*="border-l-"] {
  padding: 1.25rem 1.5rem 1.25rem 2rem !important;
}
.card.border-l-4.p-4,
.card.p-4[class*="border-l-"] {
  padding: 1rem 1.25rem 1rem 1.75rem !important;
}
.card.border-l-4.p-3\.5,
.card.border-l-4.p-3 {
  padding: 0.875rem 1.25rem 0.875rem 1.75rem !important;
}

.card.border-l-4::before,
div.card[class*="border-l-"]::before,
.card.border-l::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background-color: var(--color-primary, #6366f1) !important;
  z-index: 2 !important;
}
.card.border-l-emerald-500::before, .card.border-l-emerald-600::before, .card.border-l-success::before { background-color: #10b981 !important; }
.card.border-l-primary::before { background-color: var(--color-primary, #6366f1) !important; }
.card.border-l-amber-500::before, .card.border-l-warning::before { background-color: #f59e0b !important; }
.card.border-l-rose-500::before, .card.border-l-danger::before { background-color: #f43f5e !important; }
.card.border-l-blue-500::before, .card.border-l-info::before { background-color: #3b82f6 !important; }


/* Table row border-l-4 */
tr.border-l-4 { border-left-width: 4px !important; }
tr.border-l-emerald-500 { border-left-color: #10b981 !important; }
tr.border-l-amber-500 { border-left-color: #f59e0b !important; }
tr.border-l-rose-500 { border-left-color: #f43f5e !important; }
tr.border-l-4 td:first-child {
  padding-left: 1.5rem !important;
}

/* ==========================================================================
   13. Stisla Meridian Orders Table Exact Styling
   ========================================================================== */
.table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th {
  padding: 0.75rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--color-muted-foreground, #64748b) !important;
  background-color: var(--color-surface-2, #f8fafc) !important;
  border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  vertical-align: middle !important;
  text-align: left !important;
}

.table tbody td,
.table tbody th {
  padding: 0.875rem 1rem !important;
  font-size: 0.8125rem !important;
  border-bottom: 1px solid var(--color-border, #f1f5f9) !important;
  vertical-align: middle !important;
}

.table tbody tr {
  transition: background-color 0.15s ease !important;
}

.table tbody tr:hover {
  background-color: var(--color-surface-2, #f8fafc) !important;
}

.table tbody tr[data-state="active"] {
  background-color: var(--color-highlight, rgba(34, 116, 226, 0.06)) !important;
}

/* Custom Meridian Checkbox */
.checkbox {
  width: 1.125rem !important;
  height: 1.125rem !important;
  border-radius: 0.3125rem !important;
  border: 1.5px solid var(--color-border-strong, #cbd5e1) !important;
  background-color: var(--color-surface, #ffffff) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  position: relative !important;
}

.checkbox:hover {
  border-color: var(--color-primary, #3b82f6) !important;
}

.checkbox:checked {
  background-color: var(--color-primary, #3b82f6) !important;
  border-color: var(--color-primary, #3b82f6) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5' stroke='white' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
}

.checkbox:indeterminate {
  background-color: var(--color-primary, #3b82f6) !important;
  border-color: var(--color-primary, #3b82f6) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
}

/* Avatar circle fallback */
.avatar.avatar--sm.avatar--circle {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 9999px !important;
  background-color: rgba(99, 102, 241, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar.avatar--sm.avatar--circle .avatar__fallback {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--color-primary, #6366f1) !important;
  text-transform: uppercase !important;
}

/* Toggle Group Tabs in Card Header */
.toggle-group {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem !important;
  gap: 0.25rem !important;
  background-color: var(--color-surface-2, #f1f5f9) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: 0.625rem !important;
}

.toggle-group .toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.3125rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--color-muted-foreground, #64748b) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  height: auto !important;
}

.toggle-group .toggle:hover {
  color: var(--color-foreground, #0f172a) !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.toggle-group .toggle[data-state="active"],
.toggle-group .toggle[aria-checked="true"] {
  color: var(--color-foreground, #0f172a) !important;
  background-color: var(--color-surface, #ffffff) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--color-border, #e2e8f0) !important;
}

/* ==========================================================================
   14. Global Meridian Color, Border & Rounded Polyfills
   Eliminates harsh black outlines and unstyled Tailwind utility remnants.
   ========================================================================== */

/* Subtle Borders (Never default to black/currentColor) */
.border {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--color-border, #e2e8f0) !important;
}
.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--color-border, #e2e8f0) !important;
}
.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: var(--color-border, #e2e8f0) !important;
}
.border-l {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: var(--color-border, #e2e8f0) !important;
}
.border-r {
  border-right-width: 1px !important;
  border-right-style: solid !important;
  border-right-color: var(--color-border, #e2e8f0) !important;
}
.border-border,
.border-border\/80,
.border-border\/60 {
  border-color: var(--color-border, #e2e8f0) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r,
[data-theme="dark"] .border-border,
[data-theme="dark"] .border-border\/80,
[data-theme="dark"] .border-border\/60 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Rounded Utilities */
.rounded-xs  { border-radius: 0.125rem !important; }
.rounded-sm  { border-radius: 0.25rem !important; }
.rounded     { border-radius: 0.375rem !important; }
.rounded-md  { border-radius: 0.5rem !important; }
.rounded-lg  { border-radius: 0.625rem !important; }
.rounded-xl  { border-radius: 0.875rem !important; }
.rounded-2xl { border-radius: 1.25rem !important; }
.rounded-full{ border-radius: 9999px !important; }

/* Surfaces & Muted Backgrounds */
.bg-surface-2,
.bg-muted {
  background-color: var(--color-surface-2, #f8fafc) !important;
}
.bg-muted\/30,
.bg-muted\/40 {
  background-color: rgba(241, 245, 249, 0.75) !important;
}
.bg-card,
.bg-surface {
  background-color: var(--color-surface, #ffffff) !important;
}
[data-theme="dark"] .bg-surface-2,
[data-theme="dark"] .bg-muted {
  background-color: rgba(30, 41, 59, 0.65) !important;
}
[data-theme="dark"] .bg-muted\/30,
[data-theme="dark"] .bg-muted\/40 {
  background-color: rgba(30, 41, 59, 0.45) !important;
}
[data-theme="dark"] .bg-card,
[data-theme="dark"] .bg-surface {
  background-color: var(--color-surface, #1e293b) !important;
}

/* Strict Text Truncation & Overflow Safety */
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Safety for Table Cells and Badges */
.table td, .table th {
  position: static !important;
}
.badge.truncate,
.badge > span.truncate,
a.badge.truncate,
a.badge {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  vertical-align: middle !important;
}
.badge > span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Clean Form Controls */
.field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
}
.field__label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--color-foreground, #0f172a) !important;
}
.input, .select,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select {
  padding: 0.5rem 0.875rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  min-height: 2.375rem !important;
  border: 1px solid var(--color-border, #cbd5e1) !important;
  border-radius: 0.5rem !important;
  background-color: var(--color-surface, #ffffff) !important;
  color: var(--color-foreground, #0f172a) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.input.text-xs, .select.text-xs,
input.text-xs:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  padding: 0.4375rem 0.75rem !important;
  font-size: 0.75rem !important;
  min-height: 2.125rem !important;
}
.textarea,
textarea {
  padding: 0.75rem 1rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  min-height: 100px !important;
  border: 1px solid var(--color-border, #cbd5e1) !important;
  border-radius: 0.5rem !important;
  background-color: var(--color-surface, #ffffff) !important;
  color: var(--color-foreground, #0f172a) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.textarea.text-xs,
textarea.text-xs {
  padding: 0.6875rem 0.875rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--color-surface-2, #1e293b) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-foreground, #f8fafc) !important;
}
.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--color-primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ==========================================================================
   15. Stisla Meridian Typography Hierarchy & Boldness System
   Exact match to Stisla Meridian Orders & Dashboard typography.
   ========================================================================== */

/* Headings System */
h1 {
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: var(--color-foreground, #0f172a) !important;
}
h2, .card__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-foreground, #0f172a) !important;
}
h3 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--color-foreground, #0f172a) !important;
}
h4 {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--color-foreground, #0f172a) !important;
}

/* Font Weight Utilities */
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }
.font-black    { font-weight: 900 !important; }

/* Stat & KPI Cards Typography */
.card--stat {
  background-color: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: var(--radius-xl, 0.75rem) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.card--stat .card__body {
  padding: 1.25rem !important;
}
.stat__value {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--color-foreground, #0f172a) !important;
}
.stat__label, .text-eyebrow {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--color-muted-foreground, #64748b) !important;
}

/* Table Typography (Exact Stisla Orders matching) */
.table thead th,
.table__head--alt th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--color-muted-foreground, #64748b) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0.75rem 1rem !important;
  background-color: var(--color-surface-2, #f8fafc) !important;
  border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
}

.table tbody td,
.table tbody th {
  padding: 0.875rem 1rem !important;
  font-size: 0.8125rem !important;
  color: var(--color-foreground, #0f172a) !important;
  border-bottom: 1px solid var(--color-border, #f1f5f9) !important;
  vertical-align: middle !important;
}

/* Order / Lead ID in Table */
.table a.link code,
.table code {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--color-primary, #3b82f6) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Customer / Business Entity in Table - BOLD NAME + MUTED SUBTITLE */
.table tbody td .table__entity-name,
.table tbody td div.font-medium,
.table tbody td div.font-semibold,
.table tbody td a.hover\:text-primary {
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: var(--color-foreground, #0f172a) !important;
  line-height: 1.35 !important;
}
.table tbody td div.text-xs.text-muted-foreground {
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  color: var(--color-muted-foreground, #64748b) !important;
  line-height: 1.25 !important;
}

/* Value / Total / Numbers in Table - BOLD */
.table tbody td span.font-semibold,
.table tbody td strong {
  font-weight: 600 !important;
  color: var(--color-foreground, #0f172a) !important;
}

/* Soft Pill Badges (Exact Stisla Orders) */
.badge,
.badge--soft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.25rem 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 9999px !important;
}

/* Buttons in Table & Header */
.button {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md, 0.5rem) !important;
  transition: all 0.15s ease !important;
}
.button--primary {
  font-weight: 600 !important;
}
.button--sm {
  font-size: 0.75rem !important;
  padding: 0.3125rem 0.6875rem !important;
}

/* ========================================================= */
/* 21. SKELETON SHIMMER & CRAWL LAZY LOADING ANIMATIONS      */
/* ========================================================= */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 25%,
    rgba(148, 163, 184, 0.28) 50%,
    rgba(148, 163, 184, 0.12) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
}

[data-theme="dark"] .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.05) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
}

.skeleton-bar {
  display: block;
  border-radius: var(--radius-sm, 6px);
  min-height: 0.75rem;
}

.skeleton-circle {
  display: inline-block;
  border-radius: 9999px;
  flex-shrink: 0;
}

@keyframes crawl-indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

.crawl-progress-bar {
  position: relative;
  overflow: hidden;
  height: 6px;
  background-color: var(--color-muted, #e2e8f0);
  border-radius: 9999px;
}

.crawl-progress-bar::before {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, var(--color-primary, #2563eb), #38bdf8);
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  border-radius: 9999px;
  animation: crawl-indeterminate 1.8s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

/* Crawling Step Pill Active Pulse */
@keyframes step-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
  }
}

.crawl-step-active {
  animation: step-pulse 1.8s infinite;
}

/* ========================================================= */
/* 22. LOGO SIZING & BRAND CONSTRAINTS (PREVENT BLOWOUT)     */
/* ========================================================= */
.sidebar__brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  text-decoration: none !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.sidebar__brand-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: var(--radius-md, 8px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  flex-shrink: 0 !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

.sidebar__brand-icon img,
.sidebar__brand img,
.sidebar__header img,
img.sidebar__brand-logo,
.sidebar img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm, 6px) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.sidebar__brand-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.sidebar__brand-name {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  color: var(--color-foreground, #0f172a) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.sidebar__brand-subtitle {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--color-muted-foreground, #64748b) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* On collapsed sidebar rail mode: hide brand text cleanly */
.sidebar[data-collapsed] .sidebar__brand-text,
.is-sidebar-collapsed .sidebar__brand-text {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Missing dimension utilities */
.w-6  { width: 1.5rem !important; }
.w-7  { width: 1.75rem !important; }
.w-8  { width: 2rem !important; }
.w-9  { width: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.w-11 { width: 2.75rem !important; }
.w-12 { width: 3rem !important; }

.h-6  { height: 1.5rem !important; }
.h-7  { height: 1.75rem !important; }
.h-8  { height: 2rem !important; }
.h-9  { height: 2.25rem !important; }
.h-10 { height: 2.5rem !important; }
.h-11 { height: 2.75rem !important; }
.h-12 { height: 3rem !important; }






/* Mobile-only: compact side-by-side form fields (desktop untouched) */
@media (max-width: 639px) {
  .card__body .field { min-width: 0; }
  .card__body .field .input, .card__body .field .select { min-width: 0; width: 100%; max-width: 100%; font-size: 12px; padding-left: .6rem; padding-right: 1.6rem; text-overflow: ellipsis; }
  .card__body .field__label { font-size: 11px; }
  .page__header { flex-wrap: wrap; gap: .75rem; }
  .page__action { width: 100%; }
  .table-wrap, .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 639px) {
  .card__header { flex-wrap: wrap; gap: .5rem; }
  .card__header .card__title { flex: 1 1 100%; min-width: 0; line-height: 1.3; }
  .card__header .badge.hidden { display: none !important; }
}

/* Pro upgrade banner (dashboard) */
.pro-banner { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.1rem 1.25rem; margin-bottom:1.5rem; border-radius:1rem; color:#fff; background:linear-gradient(120deg,#1d4ed8 0%,#2563eb 55%,#3b82f6 100%); box-shadow:0 6px 18px rgba(37,99,235,.25); }
.pro-banner__main { display:flex; align-items:center; gap:1rem; min-width:0; flex:1 1 auto; }
.pro-banner__icon { width:46px; height:46px; flex:0 0 46px; border-radius:.8rem; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; }
.pro-banner__text { min-width:0; }
.pro-banner__head { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-bottom:.25rem; }
.pro-banner__title { font-weight:800; font-size:1rem; line-height:1.3; color:#fff; }
.pro-banner__tag { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .6rem; border-radius:999px; background:#fff; color:#1d4ed8; }
.pro-banner__desc { margin:0; font-size:.78rem; line-height:1.5; color:#dbeafe; max-width:42rem; }
.pro-banner__desc strong { color:#fff; }
.pro-banner__btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1.1rem; border-radius:.75rem; background:#fff; color:#1d4ed8; font-weight:800; font-size:.78rem; text-decoration:none; white-space:nowrap; transition:transform .15s, box-shadow .15s; }
.pro-banner__btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
@media (max-width: 767px) {
  .pro-banner { flex-direction:column; align-items:stretch; gap:.9rem; padding:1rem; }
  .pro-banner__btn { width:100%; }
}