/* ============================================================
   VAAD - RTL (Right-to-Left) Overrides for Hebrew Language
   Loaded AFTER style.css only when dir="rtl"
   ============================================================ */

/* ============================================================
   RTL FONT STACK & BASE DIRECTION
   ============================================================ */
html[dir="rtl"] {
    --font: 'Heebo', 'Rubik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

[dir="rtl"] body {
    font-family: var(--font);
    text-align: right;
    direction: rtl;
}

/* ============================================================
   SCROLLBAR - mirror to left side
   ============================================================ */
[dir="rtl"] ::-webkit-scrollbar {
    /* Scrollbars on left in RTL automatically by browser */
}

/* ============================================================
   SIDEBAR - Flip from left to right
   ============================================================ */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border);
}

/* ============================================================
   SIDEBAR HEADER
   ============================================================ */
[dir="rtl"] .sidebar-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

/* ============================================================
   SIDEBAR USER
   ============================================================ */
[dir="rtl"] .sidebar-user {
    flex-direction: row-reverse;
}

[dir="rtl"] .user-info {
    text-align: right;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */
[dir="rtl"] .nav-link {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .nav-link i {
    text-align: center;
}

/* Active indicator: flip from left to right */
[dir="rtl"] .nav-link.active::before {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Nav badge: flip auto-margin */
[dir="rtl"] .nav-badge {
    margin-left: 0;
    margin-right: auto;
}

/* Logout link icon alignment */
[dir="rtl"] .logout-link {
    flex-direction: row-reverse;
}

/* ============================================================
   MAIN CONTENT - Flip margin from left to right
   ============================================================ */
[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

/* ============================================================
   TOPBAR
   ============================================================ */
[dir="rtl"] .topbar {
    flex-direction: row-reverse;
}

[dir="rtl"] .topbar-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .topbar-right {
    flex-direction: row-reverse;
}

/* ============================================================
   TOPBAR SEARCH - Flip icon and padding
   ============================================================ */
[dir="rtl"] .topbar-search {
    flex-direction: row-reverse;
}

[dir="rtl"] .topbar-search i {
    left: auto;
    right: 12px;
}

[dir="rtl"] .topbar-search input {
    padding: 0.5rem 2.3rem 0.5rem 1rem;
    text-align: right;
}

/* ============================================================
   NOTIFICATION COUNT BADGE - Flip position
   ============================================================ */
[dir="rtl"] .notification-count {
    right: auto;
    left: -2px;
}

/* ============================================================
   NOTIFICATIONS PANEL - Flip from right to left
   ============================================================ */
[dir="rtl"] .notifications-panel {
    right: auto;
    left: var(--spacing-lg);
}

[dir="rtl"] .notif-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .notif-item {
    flex-direction: row-reverse;
    text-align: right;
}

/* Unread indicator: flip from left border to right border */
[dir="rtl"] .notif-item.unread {
    border-left: none;
    border-right: 3px solid var(--primary);
}

[dir="rtl"] .notif-content {
    text-align: right;
}

/* ============================================================
   CARDS
   ============================================================ */
[dir="rtl"] .card-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .card-footer {
    flex-direction: row-reverse;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
[dir="rtl"] .stat-card {
    flex-direction: row-reverse;
}

[dir="rtl"] .stat-content {
    text-align: right;
}

[dir="rtl"] .stat-change {
    flex-direction: row-reverse;
}

/* ============================================================
   TABLES - Flip text alignment
   ============================================================ */
[dir="rtl"] th {
    text-align: right;
}

[dir="rtl"] td {
    text-align: right;
}

[dir="rtl"] .table-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* ============================================================
   BADGES
   ============================================================ */
[dir="rtl"] .badge {
    flex-direction: row-reverse;
}

/* ============================================================
   BUTTONS
   ============================================================ */
[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

/* ============================================================
   FORMS
   ============================================================ */
[dir="rtl"] .form-label {
    text-align: right;
}

[dir="rtl"] .form-control {
    text-align: right;
}

/* Select dropdown arrow: flip from right to left */
[dir="rtl"] select.form-control {
    background-position: left 12px center;
    padding-right: var(--spacing-md);
    padding-left: 36px;
}

[dir="rtl"] .form-hint {
    text-align: right;
}

[dir="rtl"] .form-error {
    text-align: right;
}

[dir="rtl"] .form-check {
    flex-direction: row-reverse;
}

/* ============================================================
   MODALS
   ============================================================ */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

[dir="rtl"] .modal-body {
    text-align: right;
}

/* ============================================================
   TOASTS - Flip from right to left
   ============================================================ */
[dir="rtl"] .toast-container {
    right: auto;
    left: var(--spacing-lg);
}

[dir="rtl"] .toast {
    flex-direction: row-reverse;
    text-align: right;
    animation: slideInLeft 0.3s ease;
}

/* Toast colored borders: flip from left to right */
[dir="rtl"] .toast.toast-success {
    border-left: none;
    border-right: 4px solid var(--success);
}

[dir="rtl"] .toast.toast-error {
    border-left: none;
    border-right: 4px solid var(--danger);
}

[dir="rtl"] .toast.toast-warning {
    border-left: none;
    border-right: 4px solid var(--warning);
}

[dir="rtl"] .toast.toast-info {
    border-left: none;
    border-right: 4px solid var(--info);
}

/* ============================================================
   PAGINATION
   ============================================================ */
[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
[dir="rtl"] .empty-state {
    text-align: center;
}

[dir="rtl"] .empty-state p {
    margin: 0 auto var(--spacing-lg);
}

/* ============================================================
   TABS
   ============================================================ */
[dir="rtl"] .tabs {
    flex-direction: row-reverse;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
[dir="rtl"] .filter-bar {
    flex-direction: row-reverse;
}

/* ============================================================
   DETAIL VIEW
   ============================================================ */
[dir="rtl"] .detail-item {
    text-align: right;
}

[dir="rtl"] .detail-label {
    text-align: right;
}

/* ============================================================
   TIMELINE - Flip from left to right
   ============================================================ */
[dir="rtl"] .timeline {
    padding-left: 0;
    padding-right: 28px;
}

[dir="rtl"] .timeline::before {
    left: auto;
    right: 8px;
}

[dir="rtl"] .timeline-item::before {
    left: auto;
    right: -24px;
}

[dir="rtl"] .timeline-content {
    text-align: right;
}

[dir="rtl"] .timeline-date {
    text-align: right;
}

/* ============================================================
   LIST CARDS
   ============================================================ */
[dir="rtl"] .list-card {
    flex-direction: row-reverse;
}

[dir="rtl"] .list-card-content {
    text-align: right;
}

[dir="rtl"] .list-card-meta {
    text-align: left;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
[dir="rtl"] .login-logo {
    text-align: center;
}

[dir="rtl"] .login-error {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .login-card .form-group {
    text-align: right;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
[dir="rtl"] .progress-fill {
    float: right;
}

/* ============================================================
   RTL ANIMATIONS
   ============================================================ */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRightRTL {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmerRTL {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[dir="rtl"] .animate-slide-up {
    animation: slideUp 0.4s ease;
}

/* Reverse skeleton shimmer direction */
[dir="rtl"] .skeleton {
    animation: shimmerRTL 1.5s infinite;
}

/* ============================================================
   UTILITY CLASSES - RTL overrides
   ============================================================ */
[dir="rtl"] .text-center {
    text-align: center;
}

[dir="rtl"] .text-right {
    text-align: left;
}

[dir="rtl"] .text-left {
    text-align: right;
}

/* Flex direction overrides */
[dir="rtl"] .d-flex {
    /* flex direction controlled per-component above */
}

/* Margin utility flips */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */
[dir="rtl"] .sidebar-lang {
    flex-direction: row-reverse;
}

[dir="rtl"] .lang-btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .lang-selector {
    flex-direction: row-reverse;
}

[dir="rtl"] .lang-option {
    flex-direction: row-reverse;
}

/* ============================================================
   RESPONSIVE - TABLET (RTL)
   ============================================================ */
@media (max-width: 1024px) {
    [dir="rtl"] .topbar-search input {
        width: 180px;
    }
    [dir="rtl"] .topbar-search input:focus {
        width: 220px;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE (RTL)
   ============================================================ */
@media (max-width: 768px) {
    /* Sidebar: flip slide direction for mobile off-canvas */
    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] .sidebar.open {
        transform: translateX(0);
    }

    /* Main content: remove right margin on mobile */
    [dir="rtl"] .main-content {
        margin-right: 0;
    }

    /* Notifications panel: full width on mobile */
    [dir="rtl"] .notifications-panel {
        left: var(--spacing-md);
        right: var(--spacing-md);
        width: auto;
    }

    /* Toast container: full width on mobile */
    [dir="rtl"] .toast-container {
        left: var(--spacing-md);
        right: var(--spacing-md);
    }

    /* Filter bar: column on mobile, no need for row-reverse */
    [dir="rtl"] .filter-bar {
        flex-direction: column;
    }

    [dir="rtl"] .filter-bar .form-control,
    [dir="rtl"] .filter-bar .search-input {
        width: 100%;
        text-align: right;
    }

    /* Bottom nav stays LTR order but items are RTL */
    [dir="rtl"] .bottom-nav {
        flex-direction: row-reverse;
    }

    /* Button groups full width on mobile */
    [dir="rtl"] .btn-group {
        width: 100%;
        flex-direction: row-reverse;
    }

    [dir="rtl"] .btn-group .btn {
        flex: 1;
    }

    /* Stat card mobile row layout */
    [dir="rtl"] .stat-card {
        flex-direction: row-reverse;
        align-items: center;
    }

    /* Topbar search hidden on mobile, no override needed */

    /* Tabs */
    [dir="rtl"] .tabs {
        flex-direction: row-reverse;
    }

    /* Modal margin */
    [dir="rtl"] .modal {
        margin: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .stat-card {
        flex-direction: row-reverse;
        align-items: center;
    }

    [dir="rtl"] .card-header {
        flex-direction: column;
        align-items: flex-end;
    }

    [dir="rtl"] .card-header .btn-group {
        width: 100%;
        flex-direction: row-reverse;
    }

    [dir="rtl"] .modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   RESPONSIVE - EXTRA SMALL RTL (320px phones)
   ============================================================ */
@media (max-width: 360px) {
    [dir="rtl"] .sidebar-header {
        padding: var(--spacing-md);
    }

    [dir="rtl"] .sidebar-user {
        padding: var(--spacing-md);
    }

    [dir="rtl"] .bottom-nav {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .list-card {
        flex-direction: row-reverse;
        gap: var(--spacing-sm);
    }
}

/* ============================================================
   PRINT (RTL)
   ============================================================ */
@media print {
    [dir="rtl"] .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   ICON MIRRORING
   Certain directional icons should be visually flipped in RTL
   (arrows, chevrons, sign-out, etc.)
   ============================================================ */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-sign-out-alt,
[dir="rtl"] .fa-sign-in-alt,
[dir="rtl"] .fa-external-link-alt,
[dir="rtl"] .fa-share,
[dir="rtl"] .fa-reply,
[dir="rtl"] .fa-undo,
[dir="rtl"] .fa-redo {
    transform: scaleX(-1);
}

/* Prevent double-flip on icons inside already-flipped containers */
[dir="rtl"] .btn .fa-arrow-right,
[dir="rtl"] .btn .fa-arrow-left,
[dir="rtl"] .btn .fa-chevron-right,
[dir="rtl"] .btn .fa-chevron-left,
[dir="rtl"] .pagination-btn .fa-chevron-right,
[dir="rtl"] .pagination-btn .fa-chevron-left,
[dir="rtl"] .pagination-btn .fa-angle-right,
[dir="rtl"] .pagination-btn .fa-angle-left {
    transform: scaleX(-1);
}

/* ============================================================
   MISC DIRECTIONAL FIXUPS
   ============================================================ */

/* Border-radius on directional elements */
[dir="rtl"] .notif-item.unread {
    border-radius: 0;
}

/* Ensure monospace values (amounts, dates) stay LTR for readability */
[dir="rtl"] .stat-value,
[dir="rtl"] .list-card-amount,
[dir="rtl"] .font-mono {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Keep numbers and currency LTR within RTL flow */
[dir="rtl"] [data-amount],
[dir="rtl"] .amount,
[dir="rtl"] .currency {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Phone numbers, emails, dates, times remain LTR */
[dir="rtl"] [type="email"],
[dir="rtl"] [type="tel"],
[dir="rtl"] [type="url"],
[dir="rtl"] [type="number"],
[dir="rtl"] [type="date"],
[dir="rtl"] [type="time"],
[dir="rtl"] [type="datetime-local"],
[dir="rtl"] [type="month"],
[dir="rtl"] [type="week"],
[dir="rtl"] [type="password"] {
    direction: ltr;
    text-align: right;
}

/* Logo gradient - keep same visual direction */
[dir="rtl"] .logo-icon {
    background: linear-gradient(225deg, var(--primary), var(--secondary));
}

[dir="rtl"] .logo-text {
    background: linear-gradient(225deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Login page logo gradient */
[dir="rtl"] .login-logo h1 {
    background: linear-gradient(225deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Skeleton shimmer reversed for RTL */
[dir="rtl"] .skeleton {
    background: linear-gradient(270deg, var(--border) 25%, var(--bg-card-hover) 50%, var(--border) 75%);
    background-size: 200% 100%;
}