/* ============================================================
   FIELD LAYOUT FIX (Unfold 0.101.x)
   ------------------------------------------------------------
   Unfold auto-generates a fixed-column CSS Grid per field-row
   (e.g. "lg:grid-cols-5") based on how many fields are grouped
   in one fieldset tuple. Inside nested inlines (indented with
   ml-3 + border, inside tabs, inside the sidebar layout) the
   available width is much narrower than a top-level page, so a
   rigid 5-column grid squeezes each field until the label and
   input visually collide.

   Fix: replace the fixed column count with an auto-fit grid that
   wraps fields onto new rows once they'd get too narrow, and
   hard-guarantee the label always stacks above its input.
   ============================================================ */

.form-rows .field-row.grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

/* Label always above the input, full width, regardless of flex/grid context */
.field-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.field-line > div:first-child {
    width: 100%;
}

.field-line > div:first-child label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    white-space: normal;
}

.field-line .grow.relative {
    width: 100%;
    min-width: 0; /* allow inputs/selects to shrink instead of overflowing their grid cell */
}

.field-line input,
.field-line select,
.field-line textarea {
    max-width: 100% !important;
}

/* ============================================================
   SECTION HEADER BACKGROUNDS (Unfold 0.101.x)
   ------------------------------------------------------------
   New Unfold markup wraps h2/h3 section titles inside a
   full-width flex row div:

     <div class="bg-base-50 border-b border-base-200 flex ...">
       <h2>Destination & Travel</h2>
     </div>

   The div spans the full row width; the h2/h3 inside it does
   NOT (flex items shrink-to-fit by default). Coloring the
   heading alone produces a small "pill" instead of a full bar.
   Fix: color the wrapper div, not the heading text inside it.
   ============================================================ */

/* Fieldset section headers, e.g. "Destination & Travel", "Package Inclusion",
   "Hotel Details" (also matches the collapsible <details><summary> variant) */
fieldset > div.bg-base-50.border-b.border-base-200,
fieldset > details > summary > div.bg-base-50.border-b.border-base-200 {
    background: linear-gradient(90deg, rgb(165 123 237 / 0.85), rgb(198 173 241 / 0.85)) !important;
    border-color: transparent !important;
    border-radius: 6px 6px 0 0;
    padding: 14px 18px !important;
}

fieldset > div.bg-base-50.border-b.border-base-200 h2,
fieldset > details > summary > div.bg-base-50.border-b.border-base-200 h2 {
    color: #ffffff !important;
}

/* Dark theme: keep the same gradient but avoid Unfold's dark bg peeking through borders */
.dark fieldset > div.bg-base-50.border-b.border-base-200,
.dark fieldset > details > summary > div.bg-base-50.border-b.border-base-200 {
    background: linear-gradient(90deg, rgb(114 37 245 / 0.5), rgb(150 99 239 / 0.5)) !important;
}

/* Collapsible section headers (e.g. "Hotel Details") sit flush against the
   next section's header when collapsed, merging into one solid bar.
   Add breathing room below the collapsed summary bar. */
fieldset > details > summary {
    margin-bottom: 12px;
    display: block;
}

fieldset > details[open] > summary {
    margin-bottom: 0;
}

/* Repeating formset entry titles, e.g. "Package object (16)" / "Package: #2" */
.form-row > h3.group\/title,
h3.group\/title {
    background: linear-gradient(90deg, #efe4af, #f8f5dc) !important;
    color: #1f2937 !important;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 4px 12px rgb(157 145 246 / 0.25);
}

.dark .form-row > h3.group\/title,
.dark h3.group\/title {
    background: linear-gradient(90deg, #d8c88a, #efe4af) !important;
    color: #1f2937 !important;
}

/* Standalone page-level headers, e.g. "Travel Lead Info", "Customer Information" */
h2.bg-base-100 {
    background: linear-gradient(90deg, #efe4af, #f8f5dc) !important;
    color: black !important;
    margin-bottom: 20px;
    border-radius: 6px 6px 0 0;
    padding: 10px 14px;
}

.dark h2.bg-base-100 {
    background: linear-gradient(90deg, #d8c88a, #efe4af) !important;
    color: #1f2937 !important;
}

h2.border-b.border-base-200 {
    margin-bottom: 20px;
}

h3.border-b.border-base-200 {
    margin-bottom: 20px;
}

/* Booked */
tr:has(.row-booked) {
    background-color: #f1ecf8 !important;
}

/* Verbal Confirmation */
tr:has(.row-verbal) {
    background-color: #eaf2fb !important;
}

/* Partial Payment Received */
tr:has(.row-partial) {
    background-color: #faf0cb !important;
}

/* Full Payment */
tr:has(.row-full) {
    background-color: #dafad6 !important;
}

/* Hover state preserve */
tr:has(.row-booked):hover {
    background-color: #dac6f3 !important;
}

tr:has(.row-verbal):hover {
    background-color: #bfdbfe !important;
}

tr:has(.row-partial):hover {
    background-color: #fde68a !important;
}

tr:has(.row-full):hover {
    background-color: #86efac !important;
}

#lead-stage-legend-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    margin-top: 10px;
    margin-bottom: 10px;

    padding: 10px 10px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.legend-pill {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}

.legend-pill:hover {
    transform: translateY(-1px);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.booked {
    background: #ede9fe;
    color: #6d28d9;
}
.booked .legend-dot {
    background: #7c3aed;
}

.verbal {
    background: #dbeafe;
    color: #2563eb;
}
.verbal .legend-dot {
    background: #2563eb;
}

.partial {
    background: #fef3c7;
    color: #d97706;
}
.partial .legend-dot {
    background: #f59e0b;
}

.full {
    background: #dcfce7;
    color: #16a34a;
}
.full .legend-dot {
    background: #22c55e;
}

.clear-filter {
    background: #efeeee;
    color: #f37979;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.clear-filter:hover {
    color: #b91c1c;
}

.align-middle, .px-3 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  white-space: normal !important;
}

/* ===== Fit table to screen — no horizontal scroll ===== */

/* Remove the scroll wrapper */
/* ===== Keep original table width on small screens ===== */

.result-list-wrapper .overflow-x-auto {
    overflow-x: auto !important;
    width: 100% !important;
}

#result_list {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1000px !important;
}

/* Base cell reset */
#result_list th,
#result_list td {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 11.5px !important;
    line-height: 1.3;
    padding: 6px 6px !important;
    vertical-align: middle;
}

/* Column widths (percentages add up to 100%) */
#result_list .action-checkbox-column        { width: 2%; }
#result_list .column-status_class           { width: 1%; }
#result_list .column-formatted_query_id     { width: 6%; }
#result_list .column-display_customer       { width: 8%; }
#result_list .column-display_requirement_type { width: 8%; }
#result_list .column-display_destination    { width: 9%; }
#result_list .column-display_start_date     { width: 6%; }
#result_list .column-send_to_supplier_link  { width: 8%; }
#result_list .column-display_lead_stage     { width: 12%; }
#result_list .column-display_lead_stage_remark { width: 10%; }
#result_list .column-display_assigned_to    { width: 12%; }
#result_list .column-created_at             { width: 8%; }

/* Override inline min-width/width on the select + input (they use !important-blocking inline styles) */
#result_list .lead-stage-select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px 0 6px !important;
    font-size: 11px !important;
    height: 28px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#result_list .lead-stage-remark-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    height: 28px !important;
}

/* Shrink the "Send to Supplier" pill button */
#result_list .field-send_to_supplier_link a {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    white-space: normal !important;
    display: inline-block;
    text-align: center;
}

/* Row height can grow now that text wraps — remove fixed h-[45px] constraint visually */
#result_list td,
#result_list th {
    height: auto !important;
    min-height: 36px;
}

/* Assigned To / Customer text truncation with tooltip-friendly ellipsis on 2 lines max */
#result_list .field-display_assigned_to span,
#result_list .field-display_customer strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Column widths (percentages add up to 100%) */
#result_list .action-checkbox-column         { width: 2%; }
#result_list .column-formatted_itinerary_id  { width: 8%; }
#result_list .column-base_query              { width: 30%; }
#result_list .column-get_package_type        { width: 12%; }
#result_list .column-get_currency            { width: 8%; }
#result_list .column-get_nights              { width: 5%; }
#result_list .column-formatted_download_itinerary { width: 16%; }
#result_list .column-created_at              { width: 12%; }

/* ============================================================
   FIX: Purple bulk-actions bar overlapping pagination bar
   ------------------------------------------------------------
   When any row checkbox is selected, Unfold shows a fixed
   purple actions bar pinned to bottom:0. The pagination bar
   below the table is also sticky/bottom-anchored, so the two
   overlap. Using :has() to detect selection state and push
   the pagination bar up to make room — no JS required.
   ============================================================ */

/* When at least one row checkbox (or "select all") is checked anywhere
   on the page, push the pagination bar up so it clears the purple bar */
body:has(.action-select:checked) .lg\:sticky.lg\:bottom-0,
body:has(#action-toggle:checked) .lg\:sticky.lg\:bottom-0 {
    margin-bottom: 72px !important;
    transition: margin-bottom 0.15s ease;
}

/* Ensure the purple actions bar always renders above the pagination bar */
.fixed.bottom-0.right-0.group-has-\[input\.action-select\:checked\]\:flex {
    z-index: 50 !important;
}

/* Subtle shadow on the actions bar so the boundary is visually clear
   from whatever sits above/below it */
#changelist-actions {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

/* Give the pagination bar itself a solid background + top border so
   it doesn't visually blend into the purple bar during the transition */
.px-4.lg\:backdrop-blur-xs.lg\:bg-white\/80 {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.dark .px-4.lg\:backdrop-blur-xs.lg\:bg-white\/80 {
    background: rgb(17 24 39 / 0.95);
    border-top: 1px solid #374151;
}

/* ============================================================
   REDUCE HEADER + SIDEBAR FONT SIZE (real Unfold DOM, verified)
   ------------------------------------------------------------
   Targets the exact structure: #nav-sidebar-inner for the sidebar,
   #header-inner for the top breadcrumb/title bar.
   ============================================================ */

/* ── SIDEBAR ── */

/* Org name, e.g. "Luxe Comfort Travels" */
#nav-sidebar-inner #site-name {
    font-size: 13px !important;
}

/* Branch line, e.g. "Vijay Nagar · Indore" */
#nav-sidebar-inner .text-subtle.text-xs.truncate {
    font-size: 11px !important;
}

/* Search apps/models box text */
#nav-sidebar-inner .text-font-subtle-light.truncate {
    font-size: 12.5px !important;
}

/* Section headings, e.g. "Manage Dashboard", "Manage Leads" */
#nav-sidebar-apps h2.font-semibold {
    font-size: 11px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Nav links, e.g. "Dashboard", "Itineraries", "Queries" */
#nav-sidebar-apps ol li a {
    font-size: 12.5px !important;
    height: 34px !important;
}

#nav-sidebar-apps ol li a span.material-symbols-outlined {
    font-size: 18px !important;
}

/* Footer user block — name + email */
.border-t.border-base-200.px-6.py-3.relative .font-semibold.text-important.tracking-tight.truncate {
    font-size: 13px !important;
}

.border-t.border-base-200.px-6.py-3.relative .text-subtle.text-xs.truncate {
    font-size: 11px !important;
}

/* ── HEADER (breadcrumb + page title bar) ── */

#header-inner {
    min-height: unset !important;
}

/* Breadcrumb / page title, e.g. "Leads > Travel Request Forms > L143-Q6 | ..." */
#header-inner h1 {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

#header-inner h1 a {
    font-size: 12px !important;
}

#header-inner h1 span.material-symbols-outlined {
    font-size: 14px !important;
}

/* Top-right controls: History button etc. */
#header-inner ul.bg-white.container li a {
    font-size: 11px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Currency widget top-right */
#currency-widget .cw-label,
#currency-widget .cw-rate,
#currency-widget .cw-code {
    font-size: 12px !important;
}

/* Slightly reduce header bar's overall height so text doesn't look
   oversized relative to its container at 100%+ browser zoom */
.bg-white.border-b.border-base-200.mb-6.px-4 .container.flex.items-center.h-16 {
    height: 52px !important;
}