/* ================================================================
   vv_rtl.css  –  Language switcher, auth bar, and RTL overrides
   ================================================================ */

/* ── Top utility bar (dashboard) ─────────────────────────────────── */
.vv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Language buttons (topbar – two separate buttons) ────────────── */
.vv-lang-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vv-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    background: #f0f3f8;
    border: 1.5px solid #dde3ec;
    color: #666;
    transition: all .18s;
    user-select: none;
    line-height: 1;
    letter-spacing: .2px;
}
.vv-lang-btn.active {
    background: #1a3c5e;
    color: #fff;
    border-color: #1a3c5e;
    box-shadow: 0 1px 4px rgba(26,60,94,.3);
}
.vv-lang-btn:hover:not(.active) {
    border-color: #1a3c5e;
    color: #1a3c5e;
}

/* ── Language switcher – nav bar variant (flag-only compact) ─────── */
.vv-lang-sw {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 30px;
    padding: 3px;
    user-select: none;
    transition: border-color .2s;
    flex-shrink: 0;
}
.vv-lang-sw:hover { border-color: rgba(255,255,255,.5); }

.vv-lang-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 22px;
    font-size: .76rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    transition: background .18s, color .18s;
    line-height: 1;
}
.vv-lang-flag .vv-flag-emoji {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
}
.vv-lang-flag.active {
    background: rgba(255,255,255,.92);
    color: #1a3c5e;
    box-shadow: 0 1px 4px rgba(26,60,94,.2);
}

/* ── Auth dropdown (topbar) ──────────────────────────────────────── */
.vv-auth-dd {
    position: relative;
}
.vv-auth-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e0e6ef;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    color: #333;
    white-space: nowrap;
    transition: all .2s;
    user-select: none;
}
.vv-auth-trigger:hover {
    border-color: #1a3c5e;
    box-shadow: 0 4px 12px rgba(26,60,94,.15);
}
.vv-auth-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a3c5e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    transition: background .2s;
}
.vv-auth-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vv-auth-caret {
    font-size: .68rem;
    color: #aaa;
    margin-left: 2px;
    transition: transform .2s;
}
.vv-auth-dd.open .vv-auth-caret {
    transform: rotate(180deg);
}
.vv-auth-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: #fff;
    border: 1px solid #e0e6ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 4px;
    z-index: 1050;
}
.vv-auth-dd.open .vv-auth-menu { display: block; }
.vv-auth-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none !important;
    color: #333;
    transition: background .15s, color .15s;
}
.vv-auth-menu-item.vv-auth-menu-in {
    color: #1a3c5e;
}
.vv-auth-menu-item.vv-auth-menu-in:hover { background: #f0f4f8; }
.vv-auth-menu-item.vv-auth-menu-out:hover {
    background: #fff5f5;
    color: #c62828;
}

/* ── Nav auth icon buttons (dark nav bar) ────────────────────────── */

/* ── Nav auth icon buttons (dark nav bar) ────────────────────────── */
.vv-nav-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1rem;
    text-decoration: none !important;
    transition: background .18s;
    border: 1.5px solid rgba(255,255,255,.25);
}
.vv-nav-auth-in  {
    background: rgba(255,255,255,.15);
    color: #fff !important;
}
.vv-nav-auth-out {
    background: rgba(198,40,40,.55);
    color: #fff !important;
    border-color: rgba(198,40,40,.7);
}
.vv-nav-auth:hover { opacity: .82; }

/* ── RTL overrides ───────────────────────────────────────────────── */
[dir="rtl"] .vv-pwa-nav-inner {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-nav-actions {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-topbar {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-dash-grid,
[dir="rtl"] .vv-history-main,
[dir="rtl"] .vv-card-header {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .vv-stats-row {
    direction: rtl;
}
[dir="rtl"] .vv-fine-total-bar {
    text-align: right;
    direction: rtl;
}
[dir="rtl"] .vv-field-group label {
    text-align: right;
    display: block;
}
[dir="rtl"] .vv-two-col {
    direction: rtl;
}
[dir="rtl"] .vv-checkout-row,
[dir="rtl"] .vv-checkout-total {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-history-ref,
[dir="rtl"] .vv-history-meta {
    flex-direction: row-reverse;
    direction: rtl;
}

/* Flip back-arrow icon in RTL nav */
[dir="rtl"] .vv-nav-btn .fa-arrow-left::before {
    content: "\f061";   /* fa-arrow-right */
}

/* Tile text in RTL */
[dir="rtl"] .vv-tile {
    direction: rtl;
}

/* Officer section RTL */
[dir="rtl"] .vv-officer-section {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .vv-officer-section > div {
    flex-direction: row-reverse;
}

/* History item RTL */
[dir="rtl"] .vv-history-item {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-history-actions {
    flex-direction: row-reverse;
}

/* Form sections */
[dir="rtl"] .vv-section-title {
    text-align: right;
    direction: rtl;
}
[dir="rtl"] .vv-violations-grid {
    direction: rtl;
}
[dir="rtl"] .vv-violation-chip {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .vv-btn-toggle {
    flex-direction: row-reverse;
}
[dir="rtl"] .vv-ksa-plate-inputs {
    flex-direction: row-reverse;
}