/* ============================================
   RTL/LTR Support Styles
   ============================================ */

/* Direction Classes */
[dir="rtl"] {
    text-align: right;
}

[dir="ltr"] {
    text-align: left;
}

/* Font Families */
.font-arabic,
[dir="rtl"] {
    font-family: 'Tajawal', 'Segoe UI Arabic', 'Segoe UI', Tahoma, sans-serif;
}

.font-english,
[dir="ltr"] {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* RTL specific adjustments */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

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

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

[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}

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

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

/* Sidebar RTL */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid hsl(var(--border));
}

[dir="rtl"] .sidebar-collapsed {
    transform: translateX(100%);
}

[dir="rtl"] .main-content-with-sidebar {
    margin-right: var(--sidebar-width, 280px);
    margin-left: 0;
}

/* Icons RTL flip */
[dir="rtl"] .icon-flip {
    transform: scaleX(-1);
}

/* Arrow icons */
[dir="rtl"] .arrow-left {
    transform: rotate(180deg);
}

[dir="rtl"] .arrow-right {
    transform: rotate(180deg);
}

/* Tables RTL */
[dir="rtl"] table {
    text-align: right;
}

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

/* Form elements RTL */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

[dir="rtl"] input[type="number"] {
    text-align: left;
    direction: ltr;
}

/* Checkbox/Radio labels RTL */
[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5rem;
}

/* Breadcrumbs RTL */
[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-left: 0.5rem;
    padding-right: 0;
}

/* Dropdown RTL */
[dir="rtl"] .dropdown-menu {
    text-align: right;
}

[dir="rtl"] .dropdown-menu-end {
    --bs-position: start;
}

/* Modal RTL */
[dir="rtl"] .modal-header .btn-close {
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) auto calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x));
}

/* Alerts RTL */
[dir="rtl"] .alert {
    text-align: right;
}

[dir="rtl"] .alert-dismissible {
    padding-left: 3rem;
    padding-right: 1rem;
}

[dir="rtl"] .alert-dismissible .btn-close {
    left: 0;
    right: auto;
}

/* Toast RTL */
[dir="rtl"] .toast-container {
    left: 1rem;
    right: auto;
}

/* ============================================
   RTL Support - Additional utilities
   Used alongside the main design system
   ============================================ */

/* Apply theme colors - Using HSL variables from design system */
body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   Button Hover Fix (Override tailwind-output.css)
   ============================================ */
.btn-primary:hover:not(:disabled) {
    background: hsl(217 91% 32%) !important;
    box-shadow: 0 6px 20px -3px hsl(217 91% 40% / 0.45);
}

.btn-outline:hover:not(:disabled) {
    background: hsl(210 40% 94%);
    color: hsl(222 47% 8%);
}

.btn-ghost:hover:not(:disabled) {
    background: hsl(210 40% 94%);
    color: hsl(222 47% 8%);
}

/* ============================================
   Modal Button Variants (Premium Design)
   ============================================ */
.btn-modal-primary {
    min-width: 100px;
    height: 42px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, hsl(217 91% 40%) 0%, hsl(217 91% 35%) 100%);
    color: hsl(0 0% 100%);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px hsl(217 91% 40% / 0.25);
    transition: all 0.2s ease;
}

.btn-modal-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, hsl(217 91% 35%) 0%, hsl(217 91% 30%) 100%);
    box-shadow: 0 4px 8px hsl(217 91% 40% / 0.35);
    transform: translateY(-1px);
}

.btn-modal-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px hsl(217 91% 40% / 0.2);
}

.btn-modal-cancel {
    min-width: 100px;
    height: 42px;
    padding: 0 1.25rem;
    background: hsl(210 40% 96%);
    color: hsl(215 20% 40%);
    border: 1px solid hsl(214 32% 85%);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover:not(:disabled) {
    background: hsl(210 40% 92%);
    color: hsl(222 47% 8%);
    border-color: hsl(214 32% 75%);
}

.btn-modal-danger {
    min-width: 100px;
    height: 42px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, hsl(0 84% 55%) 0%, hsl(0 84% 48%) 100%);
    color: hsl(0 0% 100%);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px hsl(0 84% 55% / 0.25);
    transition: all 0.2s ease;
}

.btn-modal-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, hsl(0 84% 48%) 0%, hsl(0 84% 42%) 100%);
    box-shadow: 0 4px 8px hsl(0 84% 55% / 0.35);
    transform: translateY(-1px);
}