/* File: static/css/core/rtl.css */
/* Date: 2025-09-10 20:30:00 */
/* Version: 02.00 - Enhanced RTL support with navbar v03.04 compatibility and Bootstrap 5 integration */

/* ====================================================================
   RTL CUSTOM PROPERTIES & VARIABLES
   ==================================================================== */

html[dir="rtl"] {
    /* RTL-specific spacing and typography */
    --rtl-text-spacing: 0.02em;
    --rtl-line-height: 1.7;
    --rtl-heading-weight: 600;

    /* RTL animation directions */
    --rtl-slide-in-direction: translateX(100%);
    --rtl-slide-out-direction: translateX(-100%);

    /* RTL border radius adjustments */
    --rtl-border-start: border-top-right-radius border-bottom-right-radius;
    --rtl-border-end: border-top-left-radius border-bottom-left-radius;
}

/* ====================================================================
   RTL BASE CONFIGURATION
   ==================================================================== */

/* Apply RTL direction to html when dir="rtl" attribute is set */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
    letter-spacing: var(--rtl-text-spacing);
    line-height: var(--rtl-line-height);
}

/* Enhanced Arabic typography with better font stack */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Scheherazade New', 'Amiri', 'Segoe UI', 'Tahoma', sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1;
    text-rendering: optimizeLegibility;
}

/* ====================================================================
   TYPOGRAPHY & TEXT IMPROVEMENTS
   ==================================================================== */

/* Arabic text specific improvements */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    text-align: right;
    font-weight: var(--rtl-heading-weight);
    letter-spacing: 0.01em;
}

html[dir="rtl"] p,
html[dir="rtl"] div,
html[dir="rtl"] span,
html[dir="rtl"] li {
    text-align: right;
}

/* Better Arabic number display */
html[dir="rtl"] .arabic-numbers {
    font-feature-settings: 'lnum' 1;
    direction: ltr;
    display: inline-block;
}

/* ====================================================================
   BOOTSTRAP 5 RTL OVERRIDES
   ==================================================================== */

/* Updated Bootstrap 5 utility classes RTL support */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* Bootstrap 5 margin and padding utilities RTL */
html[dir="rtl"] .ms-1 { margin-left: 0; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0; margin-right: 3rem !important; }

html[dir="rtl"] .me-1 { margin-right: 0; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0; margin-left: 3rem !important; }

html[dir="rtl"] .ps-1 { padding-left: 0; padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0; padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: 0; padding-right: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-left: 0; padding-right: 1.5rem !important; }
html[dir="rtl"] .ps-5 { padding-left: 0; padding-right: 3rem !important; }

html[dir="rtl"] .pe-1 { padding-right: 0; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0; padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-right: 0; padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-right: 0; padding-left: 3rem !important; }

/* ====================================================================
   FLEXBOX RTL ENHANCEMENTS
   ==================================================================== */

/* Enhanced flexbox RTL support - but NOT for navbar */
html[dir="rtl"] .d-flex:not(.navbar .d-flex):not(.navbar-icons-container):not(.icon-group),
html[dir="rtl"] .flex:not(.navbar .flex) {
    direction: rtl;
}

html[dir="rtl"] .flex-row:not(.navbar .flex-row):not(.navbar-icons-container) {
    flex-direction: row-reverse;
}

html[dir="rtl"] .justify-content-start:not(.navbar .justify-content-start) {
    justify-content: flex-end;
}

html[dir="rtl"] .justify-content-end:not(.navbar .justify-content-end) {
    justify-content: flex-start;
}

html[dir="rtl"] .align-items-start:not(.navbar .align-items-start) {
    align-items: flex-end;
}

html[dir="rtl"] .align-items-end:not(.navbar .align-items-end) {
    align-items: flex-start;
}

/* ====================================================================
   FORM ELEMENTS RTL ENHANCEMENTS
   ==================================================================== */

/* Enhanced input fields RTL support */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* ASTROLABE specific form elements */
html[dir="rtl"] .auth-input,
html[dir="rtl"] .form-control {
    text-align: right;
    direction: rtl;
    border-radius: 0.375rem;
}

html[dir="rtl"] .auth-select {
    text-align: right;
    direction: rtl;
    background-position: left 0.75rem center;
    padding-right: 2.5rem;
    padding-left: 0.75rem;
}

/* Enhanced phone input group RTL adjustments */
html[dir="rtl"] .phone-input-group {
    direction: ltr !important; /* Keep phone numbers LTR */
    flex-direction: row-reverse;
}

html[dir="rtl"] .phone-input-group .dial-code {
    border-right: none;
    border-left: 1px solid var(--astrolabe-border-color, #e5e7eb);
    text-align: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

html[dir="rtl"] .phone-input-group .auth-input {
    text-align: left !important; /* Phone numbers should be LTR */
    direction: ltr !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Form labels and help text */
html[dir="rtl"] .form-label,
html[dir="rtl"] .form-text {
    text-align: right;
}

/* Checkboxes and radio buttons with enhanced styling */
html[dir="rtl"] .form-check {
    text-align: right;
    direction: rtl;
}

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

html[dir="rtl"] .auth-checkbox,
html[dir="rtl"] input[type="checkbox"],
html[dir="rtl"] input[type="radio"] {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Enhanced form groups and extras */
html[dir="rtl"] .form-extras {
    flex-direction: row-reverse;
    justify-content: space-between;
}

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

html[dir="rtl"] .input-group-text {
    border-right: none;
    border-left: 1px solid var(--astrolabe-border-color);
}

/* ====================================================================
   NAVIGATION & MENUS RTL (NAVBAR EXCLUDED)
   ==================================================================== */

/*
 * IMPORTANT: NAVBAR REMAINS LTR - AS PER DESIGN REQUIREMENT
 * The navbar maintains LTR direction for consistent UX
 * All navbar-related elements are explicitly excluded from RTL transformations
 */

/* Navigation items (excluding navbar) */
html[dir="rtl"] .nav:not(.navbar .nav):not(.navbar-nav) {
    direction: rtl;
}

html[dir="rtl"] .nav-item:not(.navbar .nav-item) {
    text-align: right;
}

html[dir="rtl"] .nav-link:not(.navbar .nav-link) {
    text-align: right;
}

/* Enhanced dropdown menus RTL support */
html[dir="rtl"] .dropdown-menu:not(.navbar .dropdown-menu) {
    right: 0 !important;
    left: auto !important;
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .dropdown-item:not(.navbar .dropdown-item) {
    text-align: right;
    direction: rtl;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* Navbar dropdown RTL positioning (special handling) */
html[dir="rtl"] .navbar .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .navbar .dropdown-item {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .navbar .dropdown-item:hover {
    transform: translateX(-4px) !important;
}

/* Enhanced breadcrumbs RTL */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
    flex-direction: row-reverse;
    text-align: right;
}

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

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
}

/* ====================================================================
   BUTTONS & INTERACTIVE ELEMENTS RTL
   ==================================================================== */

/* Enhanced button groups RTL */
html[dir="rtl"] .btn-group {
    direction: rtl;
}

html[dir="rtl"] .btn-group > .btn:first-child:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

html[dir="rtl"] .btn-group > .btn:last-child:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

html[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Links with icons enhancement */
html[dir="rtl"] .link-with-icon {
    flex-direction: row-reverse;
    align-items: center;
}

html[dir="rtl"] .link-with-icon .icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Close button RTL */
html[dir="rtl"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.234 8l6.566-6.566a.8.8 0 011.132 1.132L2.366 8l5.566 5.434a.8.8 0 01-1.132 1.132L.234 8z'/%3e%3c/svg%3e");
}

/* ====================================================================
   CARDS & CONTENT CONTAINERS RTL ENHANCEMENTS
   ==================================================================== */

/* Enhanced card components RTL */
html[dir="rtl"] .card-header,
html[dir="rtl"] .card-footer,
html[dir="rtl"] .card-body,
html[dir="rtl"] .card-text {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .card-title {
    text-align: right;
    margin-bottom: 0.75rem;
}

/* ASTROLABE auth card enhancements */
html[dir="rtl"] .auth-card {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .auth-card .inner {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .auth-card .card-header {
    text-align: center; /* Keep header centered */
}

/* Help links and secondary text */
html[dir="rtl"] .auth-help,
html[dir="rtl"] .text-muted {
    text-align: right;
    direction: rtl;
}

/* ====================================================================
   TABLES RTL ENHANCEMENTS
   ==================================================================== */

html[dir="rtl"] table {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

html[dir="rtl"] .table-responsive {
    direction: rtl;
}

/* Table sorting indicators RTL */
html[dir="rtl"] .table th.sortable::after {
    right: auto;
    left: 0.5rem;
}

html[dir="rtl"] .table th.sort-asc::after,
html[dir="rtl"] .table th.sort-desc::after {
    right: auto;
    left: 0.5rem;
}

/* ====================================================================
   MODALS & OVERLAYS RTL ENHANCEMENTS
   ==================================================================== */

html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-footer {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .modal-header .modal-title {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .modal-header .btn-close {
    margin-left: auto;
    margin-right: 0;
}

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

html[dir="rtl"] .modal-footer .btn {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ====================================================================
   ALERTS & NOTIFICATIONS RTL ENHANCEMENTS
   ==================================================================== */

html[dir="rtl"] .alert {
    text-align: right;
    direction: rtl;
    padding-right: 1rem;
    padding-left: 3rem; /* Space for dismiss button */
}

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

html[dir="rtl"] .alert-heading {
    text-align: right;
}

/* Toast notifications RTL */
html[dir="rtl"] .toast {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .toast-header {
    direction: rtl;
    padding-right: 0.75rem;
    padding-left: 2rem;
}

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

/* ====================================================================
   DASHBOARD SPECIFIC RTL ENHANCEMENTS
   ==================================================================== */

/* Dashboard cards and components */
html[dir="rtl"] .dashboard-card {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .dashboard-card .card-title {
    text-align: right;
}

html[dir="rtl"] .dashboard-card .card-subtitle {
    text-align: right;
    color: var(--astrolabe-text-secondary);
}

/* Stats and metrics RTL */
html[dir="rtl"] .stat-item {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .metric-value {
    text-align: right;
    font-feature-settings: 'tnum' 1; /* Tabular numbers */
}

html[dir="rtl"] .metric-label {
    text-align: right;
    margin-top: 0.25rem;
}

/* Dashboard navigation and sidebar */
html[dir="rtl"] .dashboard-nav {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid var(--astrolabe-border-color);
}

/* ====================================================================
   RESPONSIVE RTL ADJUSTMENTS
   ======================================== */

/* Mobile RTL enhancements */
@media (max-width: 768px) {
    html[dir="rtl"] .container,
    html[dir="rtl"] .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    html[dir="rtl"] .auth-card {
        margin: 1rem 0.5rem;
        text-align: right;
    }

    /* Mobile dropdown positioning for RTL */
    html[dir="rtl"] .navbar .dropdown-menu {
        right: 10px !important;
        left: 10px !important;
        text-align: right;
    }

    /* Mobile form adjustments */
    html[dir="rtl"] .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Tablet RTL adjustments */
@media (max-width: 991.98px) {
    html[dir="rtl"] .navbar-collapse {
        text-align: right;
    }

    html[dir="rtl"] .navbar-nav {
        align-items: flex-end;
    }
}

/* ====================================================================
   ICONS & SYMBOLS RTL ENHANCEMENTS
   ==================================================================== */

/* Enhanced icon flipping for directional indicators */
html[dir="rtl"] .icon-arrow-left,
html[dir="rtl"] .fa-arrow-left {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-chevron-left,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-chevron-right,
html[dir="rtl"] .fa-chevron-right {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-angle-left,
html[dir="rtl"] .fa-angle-left {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-angle-right,
html[dir="rtl"] .fa-angle-right {
    transform: scaleX(-1);
}

/* Caret and dropdown indicators */
html[dir="rtl"] .caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
}

html[dir="rtl"] .dropup .caret {
    border-bottom: 4px solid;
    border-top: 0;
}

/* ====================================================================
   THEME INTEGRATION ENHANCEMENTS
   ==================================================================== */

/* RTL works seamlessly with both sun and moon themes */
html[dir="rtl"][data-theme="sun"] {
    /* Inherits sun theme colors and applies RTL layout */
    --rtl-theme-shadow: 0 4px 6px -1px rgba(147,197,253,.35);
}

html[dir="rtl"][data-theme="moon"] {
    /* Inherits moon theme colors and applies RTL layout */
    --rtl-theme-shadow: 0 4px 6px -1px rgba(108,109,111,.35);
}

/* RTL-aware theme transitions */
html[dir="rtl"] .theme-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================================================
   ANIMATION & TRANSITION ENHANCEMENTS
   ==================================================================== */

/* Enhanced RTL animations */
@keyframes slideInRight {
    from { transform: var(--rtl-slide-in-direction); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: var(--rtl-slide-out-direction); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInRight {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* RTL-aware slide animations */
html[dir="rtl"] .slide-in-right {
    animation: slideInLeft 0.5s ease-out;
}

html[dir="rtl"] .slide-in-left {
    animation: slideInRight 0.5s ease-out;
}

/* ====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Enhanced focus indicators for RTL */
html[dir="rtl"] *:focus-visible {
    outline: 2px solid var(--astrolabe-primary);
    outline-offset: 2px;
}

/* High contrast mode RTL support */
@media (prefers-contrast: high) {
    html[dir="rtl"] .form-control,
    html[dir="rtl"] .btn,
    html[dir="rtl"] .card {
        border: 2px solid;
    }

    html[dir="rtl"] .dropdown-menu {
        border: 2px solid #000;
    }
}

/* Reduced motion RTL support */
@media (prefers-reduced-motion: reduce) {
    html[dir="rtl"] .slide-in-right,
    html[dir="rtl"] .slide-in-left,
    html[dir="rtl"] .theme-transition {
        animation: none;
        transition: none;
    }
}

/* ====================================================================
   UTILITIES & HELPER CLASSES
   ======================================== */

/* Enhanced RTL utility classes */
.rtl-only {
    display: none;
}

html[dir="rtl"] .rtl-only {
    display: block;
}

.ltr-only {
    display: block;
}

html[dir="rtl"] .ltr-only {
    display: none;
}

/* Inline RTL/LTR utilities */
.rtl-inline {
    display: none;
}

html[dir="rtl"] .rtl-inline {
    display: inline;
}

.ltr-inline {
    display: inline;
}

html[dir="rtl"] .ltr-inline {
    display: none;
}

/* Force direction utilities */
.force-ltr {
    direction: ltr !important;
    text-align: left !important;
}

.force-rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL-aware positioning utilities */
html[dir="rtl"] .position-start {
    right: 0;
    left: auto;
}

html[dir="rtl"] .position-end {
    left: 0;
    right: auto;
}

/* ====================================================================
   PRINT STYLES RTL
   ======================================== */

@media print {
    html[dir="rtl"] {
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] .navbar,
    html[dir="rtl"] .dropdown-menu {
        display: none !important;
    }

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

/* ====================================================================
   DEBUGGING & DEVELOPMENT
   ======================================== */

/* RTL debugging utilities - remove in production */
/*
html[dir="rtl"] body::before {
    content: "RTL MODE ACTIVE - v02.00";
    position: fixed;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 12px;
    font-family: monospace;
}

.debug-rtl html[dir="rtl"] * {
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.debug-rtl html[dir="rtl"] .navbar * {
    border-color: rgba(255, 0, 0, 0.3);
}
*/

/* ====================================================================
   END OF RTL STYLES v02.00
   ======================================== */