/* Vendor-widget CSS for the admin component library (resources/views/components/forms/*).
   Kept separate from admin.css (sidebar layout + DataTables theme) because this file is
   going to grow one banner per third-party widget as Phases 2-4 land (Flatpickr, FilePond,
   Cropper.js, Coloris, intl-tel-input, Tiptap/ProseMirror) — mixing that many unrelated
   vendor themes into admin.css's existing 296 lines would make it unreadable. Same
   "one banner per section" convention as admin.css. Imported from admin.js exactly the
   way admin.css already is, so it never ships to the marketing frontend bundle. */

/* ===== RANGE SLIDER (dual-handle) =====
   Two overlapping native <input type=range> elements, each shrunk to a thin
   click-through track so only their thumb is interactive — the standard
   vanilla technique for a two-handle slider with no JS library. */
.range-thumb {
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.range-thumb::-webkit-slider-thumb {
    pointer-events: auto;
    appearance: none;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    background: #0f4c81;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.range-thumb::-moz-range-thumb {
    pointer-events: auto;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    background: #0f4c81;
    cursor: pointer;
    border: none;
}
/* ===== FLATPICKR (Date Picker) ===== */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0f4c81;
    border-color: #0f4c81;
}

/* ===== COLORIS (Color Picker) ===== */
.clr-picker {
    border-radius: 0.75rem;
}

/* ===== INTL-TEL-INPUT (Phone Number) =====
   Matches the shared forms/input.blade.php field height/border/radius — the
   library injects its own inline padding-left to make room for the flag
   dropdown, so phone-input.blade.php deliberately omits a left-padding
   utility class to avoid double-padding. */
.iti {
    width: 100%;
}
.iti__tel-input {
    width: 100%;
    border-radius: 0.75rem !important;
}

/* ===== FILEPOND (File / Image Upload) ===== */
.filepond--root {
    font-family: inherit;
}
.filepond--panel-root {
    border-radius: 1rem;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
}

/* ===== CROPPER.JS (Image Upload crop modal) ===== */
.cropper-view-box,
.cropper-face {
    border-radius: 0;
}
.cropper-modal {
    opacity: 0.6;
}

/* ===== TIPTAP / PROSEMIRROR (Rich Text Editor) =====
   No @tailwindcss/typography plugin here (not installed, not needed for
   this one editor) — content styling is hand-written to match the rest of
   the admin panel's type scale instead. */
.ProseMirror {
    min-height: 10rem;
    outline: none;
}
.ProseMirror p {
    margin: 0.5em 0;
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3 {
    font-weight: 700;
    margin: 0.75em 0 0.4em;
}
.ProseMirror h2 {
    font-size: 1.25rem;
}
.ProseMirror h3 {
    font-size: 1.1rem;
}
.ProseMirror ul,
.ProseMirror ol {
    padding-left: 1.25rem;
    margin: 0.5em 0;
}
.ProseMirror ul {
    list-style: disc;
}
.ProseMirror ol {
    list-style: decimal;
}
.ProseMirror blockquote {
    border-left: 3px solid #cbd5e1;
    padding-left: 1rem;
    color: #64748b;
    margin: 0.75em 0;
}
.ProseMirror img {
    max-width: 100%;
    border-radius: 0.5rem;
}