/* ════════════════════════════════════════════════════════════════════
   Common stylesheet — loaded on every page.
   Normalizes native <select> dropdown appearance so it renders
   identically in Chrome, Safari (macOS & iOS) and Firefox.
   ════════════════════════════════════════════════════════════════════ */

/* Single-value dropdowns: strip the native look and add a consistent
   chevron arrow (matches Chrome's default arrow, slate/gray). */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.05em;

    /* Keep the selected text clear of the chevron (overrides Tailwind px-*) */
    padding-right: 2.5rem !important;
}

/* Multi-select / listbox selects: keep the native look, no chevron. */
select[multiple],
select[size]:not([size="1"]) {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Option text/background consistency (helps Chrome & Firefox; Safari's
   dropdown popup is rendered by the OS and cannot be fully styled). */
select option {
    color: #1e293b;
    background-color: #ffffff;
}