/* ==========================================================================
   H-Care shared select / dropdown styling (HUNZA + Owner portals).

   Presentation-only stylesheet, loaded AFTER style.bundle.css and the
   per-portal brand overrides (hcare-modern.css for HUNZA, hcare-owner-brand.css
   for Owner). It restyles the existing Bootstrap/Metronic `.form-select`
   control and the custom open panel rendered by public/assets/js/hcare-select.js
   to match the modern SaaS design brief:

     - clean white control with a 10-12px radius, subtle border and soft shadow
     - comfortable vertical padding and clear 14-16px typography
     - popup panel aligned directly below the input at the same width
     - generous option spacing with a soft light-grey hover and a soft
       light-blue selected state, plus a small checkmark on the selected option

   It changes no layout structure, business behaviour, routes or permissions.
   The native <select> remains the source of truth; only its closed appearance
   and a JS-rendered popup panel are affected. Accent colours follow the active
   portal's --bs-primary (HUNZA brown / Owner green).
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --hc-select-border: #E4E7EC;
    --hc-select-border-strong: #D0D5DD;
    --hc-select-text: #1D2939;
    --hc-select-muted: #667085;
    --hc-select-hover: #F2F4F7;      /* soft light grey */
    --hc-select-selected: #EEF4FF;   /* soft light blue */
    --hc-select-selected-hover: #E4EDFF;
    --hc-select-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
    --hc-select-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --hc-select-panel-shadow: 0 12px 28px -8px rgba(16, 24, 40, .18),
                              0 2px 6px rgba(16, 24, 40, .06);
    --hc-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    --hc-select-chevron-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 10 4-4 4 4'/%3e%3c/svg%3e");
}

/* ==========================================================================
   1. Closed control (the native <select>)
   ========================================================================== */
select.form-select {
    --bs-form-select-bg-img: var(--hc-select-chevron);

    padding: 0.72rem 2.75rem 0.72rem 0.9rem;
    background-color: #ffffff;
    background-position: right 0.85rem center;
    background-size: 16px 12px;
    border: 1px solid var(--hc-select-border);
    border-radius: 12px;
    box-shadow: var(--hc-select-shadow);
    color: var(--hc-select-text);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease,
                background-color .15s ease;
}

/* :where() keeps this hover rule's specificity low enough that the
   focus/open brand border below still wins while the control is active. */
select.form-select:hover:where(:not(:disabled):not([multiple])) {
    border-color: var(--hc-select-border-strong);
}

select.form-select:focus {
    background-color: #ffffff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: var(--hc-select-ring);
}

select.form-select:disabled {
    background-color: var(--bs-gray-100);
    border-color: var(--hc-select-border);
    color: var(--bs-gray-500);
    box-shadow: none;
    cursor: not-allowed;
}

/* Small / large variants keep their tighter rhythm and radius. */
select.form-select-sm {
    padding: 0.5rem 2.25rem 0.5rem 0.7rem;
    border-radius: 10px;
    background-position: right 0.7rem center;
    font-size: 0.95rem; /* keep the compact form-control-sm scale */
}

select.form-select-lg {
    padding: 0.95rem 3rem 0.95rem 1.1rem;
    border-radius: 12px;
    font-size: 1.15rem;
}

/* The solid / transparent Metronic variants become the clean white control
   too, so every dropdown reads consistently. */
select.form-select.form-select-solid {
    background-color: #ffffff;
    border-color: var(--hc-select-border);
    color: var(--hc-select-text);
}

select.form-select.form-select-solid:focus,
select.form-select.form-select-transparent:focus {
    background-color: #ffffff;
    border-color: var(--bs-primary);
    box-shadow: var(--hc-select-ring);
}

select.form-select.form-select-transparent {
    background-color: #ffffff;
    border-color: var(--hc-select-border);
    color: var(--hc-select-text);
}

/* The control is open: brand border + ring and an upward chevron. */
select.form-select.hc-select-open {
    --bs-form-select-bg-img: var(--hc-select-chevron-up);

    background-color: #ffffff;
    border-color: var(--bs-primary);
    box-shadow: var(--hc-select-ring);
}

/* ==========================================================================
   1b. Phone input country-code control (inside a Bootstrap .input-group)

   The country selector must keep a readable width. Bootstrap forces every
   `.input-group > .form-select` to `width: 1%; flex: 1 1 auto; min-width: 0`,
   which (even against the old inline `flex: 0 0 auto`) collapsed the control
   to ~46px, clipping the selected country. Fixing the basis here keeps the
   control readable; the popup panel stays left-aligned under it (and widens
   to show whole country names — see §2).
   ========================================================================== */
.input-group > select.form-select.hc-phone-country {
    flex: 0 0 auto;
    width: 165px;
    max-width: 60%;
}

/* ==========================================================================
   2. Popup panel (rendered by hcare-select.js, appended to <body>)
   ========================================================================== */
.hc-select-panel {
    position: fixed;
    inset: auto;                   /* reset any inherited offsets */
    z-index: 3000;                 /* above Metronic header/sidebar + modals */
    box-sizing: border-box;
    min-width: 120px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #ffffff;
    border: 1px solid var(--hc-select-border);
    border-radius: 12px;
    box-shadow: var(--hc-select-panel-shadow);
    color: var(--hc-select-text);
    -webkit-overflow-scrolling: touch;
    transform-origin: top center;
    animation: hc-select-panel-in .12s ease-out;
}

.hc-select-panel[hidden] {
    display: none;
}

.hc-select-panel.is-up {
    transform-origin: bottom center;
    animation-name: hc-select-panel-up-in;
}

/* The phone-input country trigger is deliberately narrow, so its popup widens
   to show whole country names. The left edge still sits directly under the
   control (the JS keeps them aligned and clamps the panel to the viewport). */
.hc-select-panel.hc-select-panel--country {
    min-width: min(230px, calc(100vw - 16px));
}

@keyframes hc-select-panel-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hc-select-panel-up-in {
    from { opacity: 0; transform: translateY(4px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hc-select-panel,
    .hc-select-panel.is-up {
        animation: none;
    }
}

/* Option row */
.hc-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;              /* generous option spacing */
    border-radius: 8px;
    line-height: 1.35;
    color: var(--hc-select-text);
    cursor: pointer;
    user-select: none;
    transition: background-color .1s ease;
}

.hc-select-option__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-select-option__check {
    flex: 0 0 auto;
    display: none;
    width: 16px;
    height: 16px;
    color: var(--bs-primary);
}

.hc-select-option__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hc-select-option:hover,
.hc-select-option.is-active {
    background-color: var(--hc-select-hover);
}

.hc-select-option.is-selected {
    background-color: var(--hc-select-selected);
    font-weight: 600;
}

.hc-select-option.is-selected .hc-select-option__check {
    display: block;
}

.hc-select-option.is-selected:hover,
.hc-select-option.is-selected.is-active {
    background-color: var(--hc-select-selected-hover);
}

.hc-select-option.is-disabled {
    color: var(--bs-gray-400);
    cursor: not-allowed;
}

.hc-select-option.is-disabled:hover,
.hc-select-option.is-disabled.is-active {
    background-color: transparent;
}

/* Group heading (from <optgroup>) */
.hc-select-group {
    padding: 8px 10px 4px;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hc-select-muted);
}

.hc-select-group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid #F1F3F5;
}

/* Empty panel safety */
.hc-select-empty {
    padding: 9px 10px;
    color: var(--hc-select-muted);
}