/* ==========================================================================
   Locale selector — shared stylesheet (single audited source)
   ==========================================================================
   Loaded by every layout that renders the locale-selector component:
     - Backend  : backend/layout/auth-layout.blade.php
                  backend/layout/pages-layout.blade.php
     - Frontend : frontend/layout/app.blade.php
                  frontend/layout/pages-layout.blade.php

   Theme colors resolve through the backend --app-* tokens first, then the
   frontend --theme-* tokens, then neutral fallbacks, so one file serves both
   themes. NOTE: this couples the two theme namespaces — the frontend must
   not define --app-surface/--app-text (verified none do today) and the
   backend must not define the --theme-* menu tokens below.

   v1 — consolidated from public/backend/css/locale.css and
        public/frontend/css/locale.css. Differences audited and unified:
          - trigger: height 38px (frontend was 36px min-height)
          - focus outline: currentColor (theme-adaptive)
          - menu surface/text: dual --app-*/--theme-* fallbacks
          - margin: .75rem inline-start / .5rem inline-end, mirrored in RTL
          - frontend dark-mode menu styling now also applies to backend dark
        The viewport-aware dropdown flip lives in the component's JS. The
        scoped rules below remain for fixed-position contexts (auth corner
        alignment) and trigger compression on the tight backend header.
   ========================================================================== */

html[data-locale-script] body {
    font-family: var(--locale-font-stack, inherit);
}

.locale-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-inline-start: .75rem;
    margin-inline-end: .5rem;
    z-index: 1050;
}

.locale-selector__trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 7.25rem;
    height: 38px;
    padding: .25rem .6rem;
    border: 1px solid rgba(100, 116, 139, .35);
    border-radius: .35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.locale-selector__trigger:hover,
.locale-selector.is-open .locale-selector__trigger {
    background: rgba(100, 116, 139, .12);
    border-color: rgba(100, 116, 139, .55);
}

.locale-selector__trigger:focus-visible,
.locale-selector__option:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.locale-selector__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locale-selector__chevron {
    margin-inline-start: auto;
    font-size: .8rem;
    opacity: .7;
}

.locale-selector__menu {
    position: absolute;
    top: calc(100% + .4rem);
    inset-inline-end: 0;
    display: none;
    min-width: 11rem;
    padding: .35rem;
    border: 1px solid rgba(100, 116, 139, .25);
    border-radius: .5rem;
    background: var(--app-surface, var(--theme-surface-raised, #fff));
    color: var(--app-text, var(--theme-text, #111827));
    box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .18);
}

.locale-selector.is-open .locale-selector__menu {
    display: block;
}

.locale-selector__option-form {
    margin: 0;
}

.locale-selector__option {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .55rem;
    padding: .5rem .6rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.locale-selector__option:hover,
.locale-selector__option.is-selected {
    background: rgba(37, 99, 235, .1);
}

.locale-selector__check {
    margin-inline-start: auto;
    color: #2563eb;
    font-weight: 700;
}

.locale-flag {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.35rem;
    height: .9rem;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .16);
    vertical-align: middle;
}

.locale-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* RTL: mirror the trigger margin and open the dropdown from the inline-start. */
[dir="rtl"] .locale-selector {
    margin-inline-start: .5rem;
    margin-inline-end: .75rem;
}

[dir="rtl"] .locale-selector__menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

/* Dark themes: give the raised menu explicit dark surface styling. */
[data-theme="dark"] .locale-selector__menu {
    border-color: var(--theme-border, #334155);
    box-shadow: var(--theme-shadow-md, 0 .5rem 1.25rem rgba(2, 6, 23, .42));
}

/* Auth screens (login/register/forgot/reset): the selector sits in a fixed
   top-left corner, so the shared inline-end alignment pushes the wider
   dropdown (min-width 11rem) off-screen to the left. Open it rightward here,
   in both LTR and RTL. */
.auth-topbar .locale-selector__menu,
.auth-locale-shell .locale-selector__menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    left: 0;
    right: auto;
    max-width: calc(100vw - 2.5rem);
}

/* Narrow screens: the backend header splits 25%/75%, so on a ~360px phone
   .header-right is only ~270px wide while its items (locale selector + theme
   toggle + notifications + avatar) need ~285px. The locale selector is the
   leftmost item, so the overflow pushes it against the left viewport edge
   and its leftward-opening dropdown risks clipping. Mirror the theme's own
   .user-name treatment at this width: collapse the trigger to flag + chevron
   (the current-language label is redundant on phones) and cap the dropdown
   to the viewport. Applies to the admin and vendor headers. */
@media (max-width: 575px) {
    .header-right .locale-selector {
        margin-inline: .35rem;
    }

    .header-right .locale-selector__current {
        display: none;
    }

    .header-right .locale-selector__trigger {
        min-width: 0;
        padding: .25rem .45rem;
    }

    .header-right .locale-selector__menu {
        min-width: 10.5rem;
        max-width: calc(100vw - 1rem);
    }
}