body {
  --ui-button-border-width: 1px;
}

/* Specific styling when both tiptap and ui-styled-text classes are used together */
.tiptap.ui-styled-text {

  /* Heading styles */
  h1 {
    font-size: 2.25rem;
    /* 36px - equivalent to text-4xl */
    font-weight: 700;
    /* equivalent to font-bold */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  h2 {
    font-size: 1.875rem;
    /* 30px - equivalent to text-3xl */
    font-weight: 600;
    /* equivalent to font-semibold */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  h3 {
    font-size: 1.5rem;
    /* 24px - equivalent to text-2xl */
    font-weight: 600;
    /* equivalent to font-semibold */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  h4 {
    font-size: 1.25rem;
    /* 20px - equivalent to text-xl */
    font-weight: 500;
    /* equivalent to font-medium */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  h5 {
    font-size: 1.125rem;
    /* 18px - equivalent to text-lg */
    font-weight: 500;
    /* equivalent to font-medium */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  h6 {
    font-size: 1rem;
    /* 16px - equivalent to text-base */
    font-weight: 500;
    /* equivalent to font-medium */
    line-height: 1.25;
    /* equivalent to leading-tight */
  }

  /* Placeholder styling */
  .is-editor-empty:first-child::before {
    color: rgb(156 163 175);
    /* gray-400 */
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }
}

.dark .tiptap.ui-styled-text {
  blockquote {
    background-color: rgb(75, 85, 99);
    color: rgb(229, 231, 235);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: rgb(229, 231, 235);
  }
}

.htmx-request.faded-while-loading,
.htmx-request .faded-while-loading {
  opacity: 0.6;
}

.htmx-request .hidden-while-loading {
  display: none;
}

.shown-while-loading {
  display: none;
}

.htmx-request.shown-while-loading,
.htmx-request .shown-while-loading {
  display: block;
}

/* Additional class for loading spinners that are not inside a button */
/* Using shown-while-loading conflicts with base styles */
.show-while-loading {
  display: none;
}

.htmx-request.show-while-loading,
.htmx-request .show-while-loading {
  display: block;
}

.dark .ui-box {
  border-color: rgb(55, 65, 81);
  /* gray-700 */
}

/* Combobox styles */

.--item:has(.--option-caption) {
  min-height: 56px !important;
  align-items: flex-start !important;
}

.--option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.--option-caption {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.1;
}


.dark .--option-caption {
  color: #9ca3af;
}

.--item.--highlighted {
  background-color: #f3f4f6 !important;
}

.dark .--item.--highlighted {
  background-color: #374151 !important;
}

/* Multiple select styling */
.ui-combobox[data-select-type="multiple"] {
  .--input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 6px;
    gap: 4px;
    cursor: text;
    min-height: 40px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
  }

  .--input-field {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none !important;
    background: transparent;
    min-width: 120px;
  }

  .--input-field:focus {
    outline: none;
    border: none;
    box-shadow: none;
  }

  .--selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .--selected-tag {
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.875rem;
    gap: 4px;
  }

  .--tag-label {
    font-weight: 500;
  }
}

.dark .ui-combobox[data-select-type="multiple"] {
  .--input-container {
    border-color: #4B5563;
    background-color: #374151;
  }
}

.ui-chip, .ui-select {
  &.--purple {
    background-color: #faf5ff;
    border-color: #7c3aed1a;
    color: #7c3aed;
  }
  &.--indigo {
    background-color: #eef2ff;
    border-color: #4338ca1a;
    color: #4338ca;
  }
  &.--orange {
    background-color: #fff7ed;
    border-color: #c2410c1a;
    color: #c2410c;
  }
  &.--pink {
    background-color: #fdf2f8;
    border-color: #be185d1a;
    color: #be185d;
  }
  &.--slate {
    background-color: #f8fafc;
    border-color: #3341551a;
    color: #334155;
  }
  &.--amber {
    background-color: #fffbeb;
    border-color: #a162071a;
    color: #a16207;
  }
  &.--rose {
    background-color: #fff1f2;
    border-color: #be123c1a;
    color: #be123c;
  }
  &.--teal {
    background-color: #f0fdfa;
    border-color: #0d94881a;
    color: #0d9488;
  }
  &.--cyan {
    background-color: #ecfeff;
    border-color: #0e74901a;
    color: #0e7490;
  }
  &.--fuchsia {
    background-color: #fdf4ff;
    border-color: #a21caf1a;
    color: #a21caf;
  }
  &.--emerald {
    background-color: #d1fae5;
    border-color: #0478571a;
    color: #065f46;
  }
  &.--lime {
    background-color: #f7fee7;
    border-color: #4d7c0f1a;
    color: #4d7c0f;
  }
  &.--sky {
    background-color: #f0f9ff;
    border-color: #0369a11a;
    color: #0369a1;
  }
  &.--violet {
    background-color: #f5f3ff;
    border-color: #7c3aed1a;
    color: #7c3aed;
  }
  &.--gray {
    background-color: #f9fafb;
    border-color: #6b73801a;
    color: #6b7280;
  }
  &.--stone {
    background-color: #f5f5f4;
    border-color: #57534e1a;
    color: #57534e;
  }
  &.--neutral {
    background-color: #f8f8f8;
    border-color: #4040401a;
    color: #404040;
  }
}

.dark .ui-chip, .dark .ui-select {
  &.--blue {
    background-color: #1e3a8a;
    border-color: #60a5fa1a;
    color: #60a5fa;
  }
  &.--green {
    background-color: #14532d;
    border-color: #4ade801a;
    color: #4ade80;
  }
  &.--red {
    background-color: #7f1d1d;
    border-color: #f871711a;
    color: #f87171;
  }
  &.--yellow {
    background-color: #451a03;
    border-color: #fde0471a;
    color: #fde047;
  }
  &.--purple {
    background-color: #1e1b3a;
    border-color: #a78bfa1a;
    color: #a78bfa;
  }
  &.--indigo {
    background-color: #1e1b4b;
    border-color: #818cf81a;
    color: #818cf8;
  }
  &.--orange {
    background-color: #431a07;
    border-color: #fb923c1a;
    color: #fb923c;
  }
  &.--pink {
    background-color: #3f1728;
    border-color: #f472b61a;
    color: #f472b6;
  }
  &.--slate {
    background-color: #1e293b;
    border-color: #94a3b81a;
    color: #94a3b8;
  }
  &.--amber {
    background-color: #451a03;
    border-color: #fbbf241a;
    color: #fbbf24;
  }
  &.--rose {
    background-color: #4c0519;
    border-color: #fb7c951a;
    color: #fb7c95;
  }
  &.--teal {
    background-color: #042f2e;
    border-color: #2dd4bf1a;
    color: #2dd4bf;
  }
  &.--cyan {
    background-color: #083344;
    border-color: #22d3ee1a;
    color: #22d3ee;
  }
  &.--fuchsia {
    background-color: #4a044e;
    border-color: #e879f91a;
    color: #e879f9;
  }
  &.--emerald {
    background-color: #022c22;
    border-color: #34d3991a;
    color: #34d399;
  }
  &.--lime {
    background-color: #1a2e05;
    border-color: #a3e6351a;
    color: #a3e635;
  }
  &.--sky {
    background-color: #0c2543;
    border-color: #38bdf81a;
    color: #38bdf8;
  }
  &.--violet {
    background-color: #2d1b69;
    border-color: #a78bfa1a;
    color: #a78bfa;
  }
  &.--gray {
    background-color: #1f2937;
    border-color: #9ca3af1a;
    color: #9ca3af;
  }
  &.--stone {
    background-color: #292524;
    border-color: #a8a29e1a;
    color: #a8a29e;
  }
  &.--neutral {
    background-color: #262626;
    border-color: #a3a3a31a;
    color: #a3a3a3;
  }
}

.ui-combobox {
  .--drawer {
    width: 100% !important;
    max-width: var(--drawer-max-width, 300px) !important;
    z-index: 300 !important;
  }
}

/* Hide indicators by default */
.htmx-indicator { display: none; }

/* Show indicators during a request */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* Resizable table columns */
.data-table th {
  position: relative;
}

.data-table th .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  cursor: col-resize;
  user-select: none;
  height: 100%;
  z-index: 1;
}

.data-table th .resizer:hover,
.data-table th .resizer.active {
  border-right: 3px solid #3b82f6;
}

.data-table th.resizing {
  user-select: none;
}

/* Petition Mission Control - Freeze first 4 columns on horizontal scroll */
/* Remove overflow-x from .paginated-collection when inside .overflow-x-auto to allow sticky positioning */
.overflow-x-auto .paginated-collection {
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
}

/* Add border to overflow container to replace the removed paginated-collection border */
.overflow-x-auto:has(.paginated-collection) {
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(229 231 235);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .overflow-x-auto:has(.paginated-collection) {
  border-color: rgb(31 41 55);
}

/* Disable overflow-x on .paginated-collection-contents when inside .overflow-x-auto to prevent nested scroll containers */
.overflow-x-auto .paginated-collection-contents {
  overflow-x: visible !important;
}

/* The scroll container is .overflow-x-auto, so sticky works relative to that */
.overflow-x-auto .data-table.petition-mission-control-table {
  border-collapse: separate !important;
}

/* Make first 4 columns sticky - calculate left values based on cumulative column widths */
/* Only apply to petition mission control table */
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(1),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(2),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(3),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(4) {
  position: sticky !important;
  z-index: 1 !important;
}


.overflow-x-auto .data-table.petition-mission-control-table th {
  position: sticky !important;
  z-index: 1 !important;
}
/* Sticky columns need higher z-index */
.overflow-x-auto .data-table.petition-mission-control-table th:nth-child(1),
.overflow-x-auto .data-table.petition-mission-control-table th:nth-child(2),
.overflow-x-auto .data-table.petition-mission-control-table th:nth-child(3),
.overflow-x-auto .data-table.petition-mission-control-table th:nth-child(4) {
  z-index: 2 !important;
}

/* Sticky columns need solid backgrounds to hide scrolled content behind them */
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(1),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(2),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(3),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(4) {
  background-color: white !important;
}

/* Dark mode - use solid dark background to match table and hide scrolled content */
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(1):where(.dark, .dark *),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(2):where(.dark, .dark *),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(3):where(.dark, .dark *),
.overflow-x-auto .data-table.petition-mission-control-table td:nth-child(4):where(.dark, .dark *) {
  background-color: rgb(16, 20, 30) !important;
}

/* Custom responsive utilities for Tailwind Lite compatibility */
/* Base transform utility - always hidden on mobile */
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translateX(var(--tw-translate-x));
}

/* xl breakpoint utilities (1280px and above) */
@media (min-width: 1280px) {
  /* xl:left-60 - 15rem (240px) at 1280px breakpoint */
  .xl\:left-60 {
    left: 15rem; /* 240px */
  }

  /* xl:translate-x-0 - Show sidebar on desktop */
  .xl\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translateX(var(--tw-translate-x));
  }

  /* xl:-translate-x-full - Hide sidebar on desktop */
  .xl\:-translate-x-full {
    --tw-translate-x: -100%;
    transform: translateX(var(--tw-translate-x));
  }
}