/* Admin custom styling */

/* Form Labels */

.fi-fo-label,
.fi-fo-field-wrp-label,
.fi-fo-field-wrp label,
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label span,
.fi-fo-field-wrp-label .fi-label,
label.fi-label {
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 4px !important;
}

/* Force label visibility */
.fi-fo-field-wrp-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000000 !important;
}

/* Required Asterisk */
.fi-fo-field-wrp-label sup,
.fi-fo-label sup,
label sup {
    font-size: 16px !important;
    color: #ef4444 !important;
    font-weight: 800 !important;
    top: -0.1em !important;
    margin-left: 2px;
}

/* Form Inputs */

.fi-fo-field-wrp .fi-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    color: #000000 !important;
}

/* Universal Form Control Height & Alignment */
.fi-fo-field-wrp .fi-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp
    button:not([class*="filepond"]):not([class*="file-upload"]):not(
        [class*="icon-button"]
    ):not([class*="fi-icon-btn"]):not([class*="btn-"]):not(
        [class*="remove"]
    ):not([class*="delete"]),
.fi-fo-field-wrp select,
.fi-fo-field-wrp .fi-fo-datepicker-button,
.fi-fo-field-wrp .fi-fo-timepicker-button,
.fi-fo-field-wrp .fi-fo-time-picker-button,
.fi-fo-field-wrp .fi-select-input,
.fi-fo-field-wrp .choices__inner {
    background-color: #ffffff !important;
    border: none !important;
    color: #000000 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 14px !important;
    width: 100% !important;
    text-align: left !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 10px !important;
}

/* Ensure the wrapper also has the same fixed height and borders */
.fi-fo-field-wrp .fi-input-wrp,
.fi-fo-field-wrp .fi-select-wrp,
.fi-fo-field-wrp .fi-fo-select-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    color: #000000 !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

/* Specific fix for text visibility in pickers */
.fi-fo-datepicker button,
.fi-fo-datepicker span,
.fi-fo-timepicker button,
.fi-fo-timepicker span,
.fi-fo-time-picker-button span,
.fi-select-input span {
    color: #000000 !important;
}

.fi-fo-field-wrp .fi-select-panel,
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    color: #000000 !important;
}

/* Refined Upload Fields to Match Inputs (white-upload class) */
.white-upload,
.fi-fo-file-upload-wrp:has(.white-upload) {
}

.white-upload .filepond--root {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.white-upload:not(.gallery-uploader) .filepond--root,
.white-upload:not(.gallery-uploader) .filepond--panel-root {
    min-height: 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

/* Reset FilePond internals to look like a simple bar */
.white-upload .filepond--panel-root {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix FilePond default beige panels for the white uploader */
.white-upload .filepond--panel-center,
.white-upload .filepond--panel-top,
.white-upload .filepond--panel-bottom,
.white-upload .filepond--item-panel {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Filled state uploader styling (when image preview is active) */
.white-upload:not(.gallery-uploader) .filepond--root:has(.filepond--item) {
    min-height: 200px !important;
    height: auto !important;
    overflow: hidden !important; /* Prevents bottom border clipping */
    display: block !important;
}
.white-upload:not(.gallery-uploader)
    .filepond--root:has(.filepond--item)
    .filepond--panel-root {
    min-height: 160px !important;
    height: auto !important;
}

.white-upload .filepond--drop-label {
    min-height: 40px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 7px !important;
    justify-content: flex-start !important;
    color: #666666 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 14px !important;
    display: flex; /* Removed !important to allow FilePond to hide it */
    align-items: center !important;
    background: transparent !important;
}

/* Explicitly hide the drop label when files are uploaded to prevent the white bar placeholder from showing (single upload only) */
.white-upload:not(.gallery-uploader)
    .filepond--root:has(.filepond--item)
    .filepond--drop-label {
    display: none !important;
}

/* Add the upload icon to the right side of the bar */
.white-upload .filepond--drop-label::after {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23c8a652' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.white-upload .filepond--drop-label label {
    font-weight: 400 !important;
    cursor: pointer !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    /* Placeholder grey */
}

.white-upload .filepond--label-action {
    text-decoration: none !important;
    color: inherit !important;
    font-weight: inherit !important;
}

.white-upload .filepond--drop-label svg,
.white-upload .fi-fo-file-upload-icon {
    color: #c8a652 !important;
    display: none !important;
    /* Hide original icon as we use the one on the right */
}

/* Cleanup FilePond UI for the bar aesthetic */
.white-upload .filepond--assistant,
.white-upload .filepond--credits {
    display: none !important;
}

.white-upload .filepond--progress-indicator {
    background-color: #c8a652 !important;
}

/* Ensure the wrapper doesn't have its own background */
.white-upload {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.white-upload .fi-fo-field-wrp {
    background: transparent !important;
}

/* Handle Multiple Upload Carousel/Grid */
.white-upload .filepond--list-scroller {
    border-top: 1px solid rgba(200, 166, 82, 0.2);
}

.fi-select-input option,
.fi-select-panel .fi-select-option,
.choices__item--selectable,
.choices__item {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 7px !important;
}

.fi-select-option:hover,
.choices__item--selectable.is-highlighted {
    background-color: #f5f0e1 !important;
    color: #000000 !important;
}

.fi-fo-field-wrp .fi-select-input select {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.fi-fo-field-wrp .fi-textarea {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 10px !important;
    padding: 7px !important;
    color: #000000 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 14px !important;
}

/* Placeholder Text */
.fi-fo-field-wrp .fi-input::placeholder,
.fi-fo-field-wrp .fi-select::placeholder,
.fi-fo-field-wrp .fi-textarea::placeholder {
    color: #666666 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 14px !important;
}

/* Autofill Reset */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
    border-radius: 10px !important;
}

/* Time Picker Panel Refinement */
.fi-fo-time-picker-panel,
.fi-fo-datepicker-panel,
.fi-fo-timepicker-panel {
    background-color: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important;
    padding: 12px !important;
    color: #000000 !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
}

.fi-fo-time-picker-panel input,
.fi-fo-timepicker-panel input {
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    color: #000000 !important;
    padding: 8px !important;
    text-align: center !important;
}

.fi-fo-time-picker-panel .fi-fo-time-picker-panel-separator,
.fi-fo-timepicker-panel span {
    color: #000000 !important;
    font-weight: bold !important;
}

/* Focus States */

.fi-fo-field-wrp .fi-input:focus,
.fi-fo-field-wrp .fi-select:focus,
.fi-fo-field-wrp .fi-textarea:focus {
    border-color: #c8a652 !important;
    outline: none !important;
}

/* Section Headers */

.fi-section-header-heading {
    color: #c8a652 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin-bottom: 20px !important;
}

/* Page Header */

.fi-header-heading {
    color: #000000 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

/* Buttons */

.fi-btn-primary,
.fi-btn-secondary {
    background-color: #c8a652 !important;
    color: #000000 !important;
    border-radius: 10px !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 21px !important;
    padding: 14px 20px !important;
}

/* Table Visibility */

.fi-ta {
    visibility: visible;
    opacity: 1;
}

.fi-ta-body {
    display: table-row-group;
    visibility: visible;
}

.fi-ta-row {
    display: table-row;
    visibility: visible;
}

.fi-ta-cell {
    display: table-cell;
    visibility: visible;
}

/* Sidebar Custom Styling */

.fi-sidebar {
    background-color: #c8a652 !important;
}

.fi-sidebar-active {
    background-color: transparent !important;
}

/* SIDEBAR NAV ITEMS - TOP LEVEL */
.fi-sidebar-item-button {
    margin: 8px 12px !important;
    border-radius: 99px !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #000000 !important;
    color: #c8a652 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #c8a652 !important;
}

/* Ensure sidebar text size is completely uniform whether active or not */
.fi-sidebar-item-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: "Raleway", sans-serif !important;
    line-height: normal !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* GROUP CONTAINER STYLING - CONCIERGE MANAGEMENT (First Group) */
.fi-sidebar-group:first-of-type {
    background-color: #ffffff !important;
    margin: 16px 12px !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

/* OTHER GROUPS - TRANSPARENT */
.fi-sidebar-group {
    background-color: transparent !important;
}

.fi-sidebar-group-label-wrp {
    padding: 12px 16px !important;
}

.fi-sidebar-group-label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 1rem !important;
    text-transform: none !important;
}

/* SUB-ITEMS IN WHITE BOX */
.fi-sidebar-group .fi-sidebar-item-button {
    margin: 4px 16px !important;
    background-color: transparent !important;
    color: #000000 !important;
}

.fi-sidebar-group .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #c8a652 !important;
    color: #000000 !important;
}

/* HIDE ICONS FOR SUB-ITEMS IN CONCIERGE BUT NOT GROUP LABEL */
/* Adjust based on image: Hotels, Clubs, Yachts, Cars have no icons */
.fi-sidebar-group li:not(:first-child) .fi-sidebar-item-icon {
    display: none !important;
}

/* Ensure Logo Header is correctly styled */
.custom-brand-header {
    background-color: #c8a652 !important;
    color: #000000 !important;
}

.logo-title {
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}

.logo-subtitle {
    font-size: 0.85rem !important;
    opacity: 0.7;
}

/* Service Management & Other Groups */

/* For now, making all groups clean and separated if they are used */

/* Table Refinements */

/* HIDE SORT ARROWS (As requested: "why status has so many arrows") */
.fi-ta-header-cell-sort-button svg,
.fi-ta-header-cell-sort-icon {
    display: none !important;
}

/* ================================================================
   SEARCH BAR + FILTERS — full-width toolbar row
   Search grows to fill space; date, status & clear share the rest
   ================================================================ */

/* Make the whole toolbar a flex row that fills 100% width */
.fi-ta-header-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Search field grows to fill remaining space */
.fi-ta-header-toolbar .fi-ta-search-field,
.fi-ta-header-toolbar .fi-ta-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* The search pill wrapper stretches to full width of its parent */
.fi-ta-header-toolbar .fi-ta-search-field-wrp {
    background: #f5f5f5 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    padding-left: 10px !important;
    position: relative !important;
    overflow: visible !important;
    height: 50px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Kill the 320px fixed width override at sm breakpoint */
@media (min-width: 640px) {
    .fi-ta-header-toolbar .fi-ta-search-field-wrp {
        width: 100% !important;
        max-width: none !important;
    }
}

.fi-ta-header-toolbar .fi-ta-search-field-wrp .fi-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 15px !important;
    color: #000 !important;
}

.fi-ta-header-toolbar .fi-ta-search-field-wrp .fi-ta-search-indicator {
    background-color: #c8a652 !important;
    border-radius: 9999px !important;
    color: #000 !important;
    padding: 8px !important;
    margin-right: 2px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.fi-ta-header-toolbar .fi-ta-search-field-wrp .fi-input-wrp {
    border: none !important;
}

/* Filters section (status dropdown + date) — shrink to content, don't grow */
.fi-ta-header-toolbar .fi-ta-filters,
.fi-ta-header-toolbar .fi-ta-filters-ctn,
.fi-ta-header-toolbar > div:not(:first-child):not(.fi-ta-search-field) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* ================================================================
   THREE-DOTS ACTION DROPDOWN — fix clipping on last table rows

   Problem: the dropdown panel is absolutely positioned inside a
   table row; any ancestor with overflow != visible clips it,
   causing the page scrollbar to activate instead of showing the menu.

   Fix: give the Filament dropdown panel a very high z-index and
   ensure all table ancestors stay overflow:visible on desktop.
   ================================================================ */

/* The panel itself — bring it to the very top of the stacking context */
.fi-dropdown-panel,
[data-headlessui-state] .fi-dropdown-panel,
.fi-ta-actions-cell .fi-dropdown-panel,
.fi-ta-cell .fi-dropdown-panel {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Ensure table containers do NOT clip the panel */
.fi-ta,
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table,
.fi-ta-body,
.fi-ta-row,
.fi-ta-actions-cell,
.fi-ta-cell {
    overflow: visible !important;
}

/* The section and page wrappers also must not clip */
.fi-section-content-ctn,
.fi-section-content,
.fi-page-content > div,
.content-card {
    overflow: visible !important;
}

/* Universal Table Centering (Aggressive) */
.fi-ta-header-cell {
    text-align: center !important;
}

/* Target the flex wrapper and the button inside the header cell */
.fi-ta-header-cell-label-wrp,
.fi-ta-header-cell-label-wrp button,
.fi-ta-header-cell-content-wrp {
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    text-align: center !important;
}

.fi-ta-header-cell-label {
    margin: 0 !important;
    text-align: center !important;
}

/* Cell Content Centering and Sizing */
.fi-ta-text,
.fi-ta-text-item,
.fi-ta-text-item-label,
.fi-ta-cell,
.fi-ta-cell > div,
.fi-ta-cell > span {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    display: flex !important;
    margin: 0 auto !important;
    font-size: 14px !important;
}

/* Badge and Action Centering */
.fi-ta-cell .fi-badge,
.fi-ta-actions {
    margin: 0 auto !important;
    display: inline-flex !important;
    justify-content: center !important;
}

/* Specific fix for action columns */
.fi-ta-actions-cell {
    text-align: center !important;
}

/* =============================================
   FLEET UPLOAD SUCCESS BADGE (Global)
   ============================================= */

/* Show FilePond action button natively */
.filepond--file-action-button {
    display: flex !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.filepond--file-action-button:hover {
    transform: scale(1.1) !important;
}

/* Enable and style delete/remove buttons for all white uploaders */
.white-upload .fi-fo-file-upload-preview-item-clear-button,
.white-upload .fi-fo-file-upload-preview-item button[class*="clear"],
.white-upload .fi-fo-file-upload-preview-item button[class*="delete"] {
    display: flex !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

.white-upload .fi-fo-file-upload-preview-item-clear-button:hover,
.white-upload .fi-fo-file-upload-preview-item button[class*="clear"]:hover,
.white-upload .fi-fo-file-upload-preview-item button[class*="delete"]:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.1) !important;
}

.white-upload .fi-fo-file-upload-preview-item-clear-button svg,
.white-upload .fi-fo-file-upload-preview-item button[class*="clear"] svg,
.white-upload .fi-fo-file-upload-preview-item button[class*="delete"] svg {
    width: 10px !important;
    height: 10px !important;
    stroke: #ffffff !important;
    stroke-width: 2.5px !important;
    color: #ffffff !important;
    fill: none !important;
    display: block !important;
}

/* Remove FilePond's default black/dark panel and overlay backgrounds */
.filepond--image-preview-overlay,
.filepond--image-preview-overlay-idle,
.filepond--image-preview-overlay-success,
.filepond--image-preview-overlay-failure {
    background: transparent !important;
    background-color: transparent !important;
    fill: transparent !important;
}

.filepond--item-panel {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    z-index: -1 !important;
}

.filepond--image-preview-wrapper,
.filepond--image-preview {
    background: transparent !important;
    background-color: transparent !important;
    z-index: 10 !important;
}

/* Slightly push the main uploaded image preview down to prevent overlapping */
.white-upload .filepond--image-preview-wrapper {
    margin-top: 20px !important;
}

/* ONLY target Filament's own preview wrapper — NOT filepond--item (used for grid layout) */
.fi-fo-file-upload-preview-item {
    position: relative !important;
    overflow: visible !important;
}

/* Green UPLOADED badge & Overlay — only on Filament's wrapper */
.fi-fo-file-upload-preview-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
    /* Subtle green overlay */
    z-index: 10 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

.fi-fo-file-upload-preview-item::after {
    content: "✓ UPLOAD COMPLETED" !important;
    display: inline-block !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #10b981 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    z-index: 20 !important;
    white-space: nowrap !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    font-family: "Montserrat", sans-serif !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   CHOICES.JS / SEARCHABLE SELECT DROPDOWN VISIBILITY FIXES
   ============================================================ */

/* Prevent parent wrappers from clipping the absolute positioned dropdowns */
.fi-fo-field-wrp .fi-select-wrp,
.fi-fo-field-wrp .fi-input-wrp,
.fi-fo-field-wrp .fi-fo-select-input-wrp {
    overflow: visible !important;
    height: auto !important;
    min-height: 40px !important;
}

/* Choices.js specific container visibility and overflow */
.choices,
.choices__inner {
    overflow: visible !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 999999 !important;
    position: absolute !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #c8a652 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
}
/* Hide dropdown when not active/expanded - Handled naturally by Alpine.js */

/* Highlighted and hover items in search results */
.choices__item--selectable.is-highlighted {
    background-color: #f5f0e1 !important;
    color: #000000 !important;
}

/* Fix alignment and padding */
.choices__inner {
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

/* Choice.js search input direct override to ensure clickable and typeable styling */
.choices__list--dropdown input.choices__input,
.choices__list[aria-expanded] input.choices__input,
.choices input.choices__input,
.fi-fo-field-wrp input.choices__input {
    /* Removed absolute positioning hack that caused the input to be invisible */
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 16px !important;
    font-family: "Raleway", sans-serif !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

/* Hide the selected text or placeholder in choices__inner when open, to prevent overlay/clash */
/* .choices.is-open .choices__inner {
    opacity: 0 !important;
    pointer-events: none !important;
} */

/* Adjust dropdown list styling to start flush under our overlaid input box */
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
    border: 1.5px solid #c8a652 !important;
    border-top: none !important;
    margin-top: 0 !important;
    border-radius: 0 0 6px 6px !important;
    overflow-y: auto !important;
    padding-top: 0 !important;
}

/* Make the top input flush with the dropdown list when open */
.choices.is-open input.choices__input {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
}

/* Ensure choices container doesn't show double borders when open */
.choices.is-open {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Fix placeholder color for the Choices.js search input */
.choices__list--dropdown input.choices__input::placeholder,
.choices input.choices__input::placeholder {
    color: #9ca3af !important;
    font-family: "Raleway", sans-serif !important;
    font-size: 16px !important;
}

/* Ensure focus works correctly on the search input */
.choices__list--dropdown input.choices__input:focus,
.choices input.choices__input:focus {
    border-color: #c8a652 !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(200, 166, 82, 0.2) !important;
}

/* Force Choices.js dropdown to always open downwards (never flip up) */
.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
    top: 100% !important;
    bottom: auto !important;
    border-top: none !important;
    border-bottom: 1px solid #c8a652 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.choices.is-flipped.is-open .choices__inner {
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none !important;
}

/* Removed top/bottom absolute positioning override */

/* Decrease Referred By label font size */
.referred-by-label-fix label,
.referred-by-label-fix .fi-fo-field-wrp-label,
.referred-by-label-fix .fi-fo-field-wrp-label label,
.referred-by-label-fix .fi-fo-field-wrp-label span {
    font-size: 14px !important;
}

/* Universal layout header back button alignment */
.back-to-list-btn,
.back-link,
.header-back-btn,
.back-to-list-btn span,
.back-link .back-text,
.header-back-btn span,
.header-section .header-back-btn,
.header-left a,
.header-left a span,
.header-left a[href*="users"],
.header-left a[href*="fleet"],
.header-left a[href*="empty-leg"],
.header-left a[href*="booking"],
.header-left a[href*="concierge"],
.header-left a[href*="flight-enquiries"],
.header-left a[href*="hotels"],
.header-left a[href*="clubs"],
.header-left a[href*="yachts"],
.header-left a[href*="cars"],
.header-left a[href*="membership"],
.header-left a[href*="top-up"] {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.back-to-list-btn svg,
.back-link svg,
.header-back-btn svg,
.header-back-icon,
.back-icon,
.header-left a svg {
    width: 16px !important;
    height: 16px !important;
}

/* Global content card and background corrections to ensure #f5f5f5 is uniform */
.fi-main-ctn,
.fi-page,
.fi-body,
.fi-content,
.custom-main,
.custom-content,
body {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

.content-card {
    background: #f5f5f5 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Force ALL table SVGs to be beige regardless of specific Filament class */
.fi-ta-actions svg,
.fi-ta-row-actions svg,
.fi-ac-action svg,
table td svg {
    color: #c8a652 !important;
    stroke: #c8a652 !important;
}

/* Individual action icon buttons (View / Edit / Delete shown inline) */
.fi-ta-actions .fi-icon-btn svg,
.fi-ta-actions .fi-ac-icon-btn svg,
.fi-ta-row-actions .fi-icon-btn svg,
.fi-ta-row-actions .fi-ac-icon-btn svg,
.fi-ta-col-action .fi-icon-btn svg,
.fi-table-actions .fi-icon-btn svg {
    color: #c8a652 !important;
    stroke: #c8a652 !important;
    width: 24px !important;
    height: 24px !important;
}

/* Action group trigger (three-dot menu button) */
.fi-ta-actions .fi-dropdown-trigger svg,
.fi-ta-row-actions .fi-dropdown-trigger svg {
    color: #c8a652 !important;
    stroke: #c8a652 !important;
}

/* Generic catch-all: any icon button inside a table row */
table .fi-icon-btn svg,
table .fi-ac-icon-btn svg,
.fi-ta-row .fi-icon-btn svg,
.fi-ta-row .fi-ac-icon-btn svg {
    color: #c8a652 !important;
    stroke: #c8a652 !important;
    width: 24px !important;
    height: 24px !important;
}

/* Fix for custom eye icon images in custom tables */
table td a img[src*="eye_icon.svg"] {
    width: 22px !important;
    height: 22px !important;
}

/* Increase asterisk sign for mandatory fields in admin panel */
.fi-fo-field-wrp-label sup.text-danger-600,
sup.text-danger-600,
.fi-required sup {
    font-size: 1em !important;
    font-weight: 900 !important;
    margin-left: 4px !important;
    color: #ef4444 !important;
    vertical-align: middle !important;
}