/**
 * RTL (Right-to-Left) Stylesheet for Arabic Language Support
 * This file contains all RTL-specific overrides for the Here Attendance System
 * Applied automatically when body has class "rtl" or dir="rtl"
 */

/* =========================
   Base RTL Adjustments
   ========================= */
[dir="rtl"],
.rtl {
    direction: rtl;
    text-align: right;
}

/* =========================
   Typography Adjustments
   ========================= */
[dir="rtl"] body,
.rtl body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, 'Cairo', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Form elements don't inherit font-family by default */
[dir="rtl"] select,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
.rtl select,
.rtl input,
.rtl textarea,
.rtl button {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, 'Cairo', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================
   Flexbox Direction Reversal
   ========================= */
/* 
 * Navbar RTL Strategy:
 * - Keep navbar in RTL context for proper text/element handling
 * - Use flexbox ordering to position logo on left
 * - This ensures all child elements inherit RTL direction properly
 */
[dir="rtl"] .navbar,
.rtl .navbar {
    /* Keep RTL direction for proper text handling */
    direction: rtl;
    /* Reverse flex to put logo (first child) on visual left */
    flex-direction: row-reverse;
}

/* Logo stays visually on the left in RTL */
[dir="rtl"] .logo,
.rtl .logo {
    /* Ensure logo content is LTR (for brand name if any) */
    direction: ltr;
}

/* Nav list maintains natural order, flex-reverse on parent handles positioning */
[dir="rtl"] .nav-list,
.rtl .nav-list {
    /* Items flow naturally in RTL */
    flex-direction: row;
}

/* Nav toggles (theme/language buttons) */
[dir="rtl"] .nav-toggles,
.rtl .nav-toggles {
    /* Buttons flow naturally in RTL */
    flex-direction: row;
}

/* Session cards */
[dir="rtl"] .session-header,
.rtl .session-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .session-card,
.rtl .session-card {
    border-left: none;
    border-right: 4px solid var(--success-color, #28a745);
    text-align: right;
}

/* Activity items */
[dir="rtl"] .activity-item,
.rtl .activity-item {
    flex-direction: row-reverse;
    text-align: right;
}

/* Page header */
[dir="rtl"] .page-header,
.rtl .page-header {
    text-align: right;
}

/* Stats */
[dir="rtl"] .stat-card,
.rtl .stat-card {
    text-align: right;
}

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

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

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

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

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

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

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

/* =========================
   Text Alignment
   ========================= */
[dir="rtl"] .text-center,
.rtl .text-center {
    text-align: center;
}

[dir="rtl"] .card-header,
.rtl .card-header {
    text-align: center;
}

[dir="rtl"] .session-header,
.rtl .session-header {
    text-align: center;
}

[dir="rtl"] .timer-container,
.rtl .timer-container {
    text-align: center;
}

[dir="rtl"] .hero-section,
.rtl .hero-section {
    text-align: center;
}

[dir="rtl"] .selection-header,
.rtl .selection-header {
    text-align: center;
}

[dir="rtl"] .role-card,
.rtl .role-card {
    text-align: center;
}

[dir="rtl"] .quick-action,
.rtl .quick-action {
    text-align: center;
}

[dir="rtl"] .empty-state,
.rtl .empty-state {
    text-align: center;
}

[dir="rtl"] .footer,
.rtl .footer {
    text-align: center;
}

[dir="rtl"] .form-footer,
.rtl .form-footer {
    text-align: center;
}

/* Left align specific elements that should stay left in RTL */
[dir="rtl"] .location-value,
.rtl .location-value {
    text-align: right;
}

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

/* =========================
   Margins and Paddings
   ========================= */
/* Swap left/right margins */
[dir="rtl"] .class-meta span,
.rtl .class-meta span {
    margin-right: 0;
    margin-left: var(--spacing-md);
}

[dir="rtl"] .session-meta span,
.rtl .session-meta span {
    margin-right: var(--spacing-md);
    margin-left: var(--spacing-md);
}

[dir="rtl"] .logo,
.rtl .logo {
    gap: 0.5rem;
}

/* =========================
   Borders
   ========================= */
/* Border-left becomes border-right */
[dir="rtl"] .class-card,
.rtl .class-card {
    border-left: none;
    border-right: 4px solid var(--primary-color, #0066cc);
}

[dir="rtl"] .alert,
.rtl .alert {
    border-left: none;
    border-right: 4px solid;
}

[dir="rtl"] .alert-success,
.rtl .alert-success {
    border-right-color: var(--success-color, #28a745);
}

[dir="rtl"] .alert-danger,
.rtl .alert-danger {
    border-right-color: var(--danger-color, #dc3545);
}

[dir="rtl"] .alert-warning,
.rtl .alert-warning {
    border-right-color: var(--warning-color, #ffc107);
}

/* =========================
   Navigation Menu (Mobile)
   ========================= */
[dir="rtl"] .nav-menu,
.rtl .nav-menu {
    left: auto;
    right: -100%;
}

[dir="rtl"] .nav-menu.active,
.rtl .nav-menu.active {
    right: 0;
    left: auto;
}

/* Box shadow direction */
[dir="rtl"] .nav-menu,
.rtl .nav-menu {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* =========================
   Form Inputs
   ========================= */
[dir="rtl"] .form-input,
.rtl .form-input {
    text-align: right;
}

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

/* Input with validation icon */
[dir="rtl"] .form-input.is-valid,
.rtl .form-input.is-valid {
    padding-right: var(--spacing-md, 1rem);
    padding-left: 2.5rem;
    background-position: left 0.75rem center;
}

/* =========================
   Tables
   ========================= */
[dir="rtl"] table,
.rtl table {
    direction: rtl;
}

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

/* =========================
   Progress Bar
   ========================= */
[dir="rtl"] .progress-fill,
.rtl .progress-fill {
    /* Progress fills from right to left in RTL */
    float: right;
}

[dir="rtl"] .strength-fill,
.rtl .strength-fill {
    float: right;
}

/* =========================
   Role Cards (Homepage)
   ========================= */
[dir="rtl"] .role-card::before,
.rtl .role-card::before {
    /* Gradient bar animation from right */
    transform-origin: right;
}

/* =========================
   Icons & Emojis
   ========================= */
[dir="rtl"] .location-icon,
.rtl .location-icon {
    order: 1;
}

[dir="rtl"] .location-content,
.rtl .location-content {
    order: 0;
}

[dir="rtl"] .stat-icon,
.rtl .stat-icon {
    order: -1;
}

/* =========================
   Arrows & Directional Elements
   ========================= */
/* Flip arrows in "Browse all classes →" */
[dir="rtl"] .section-link,
.rtl .section-link {
    direction: ltr;
    unicode-bidi: bidi-override;
}

/* Or use CSS to flip the arrow */
[dir="rtl"] .section-link::after,
.rtl .section-link::after {
    content: '←';
}

/* =========================
   Language Switcher
   ========================= */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--neutral-300, #dee2e6);
    background: var(--white, #ffffff);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-btn:hover {
    border-color: var(--primary-color, #0066cc);
    background: var(--primary-light, #e6f2ff);
}

.lang-btn.active {
    background: var(--primary-color, #0066cc);
    color: var(--white, #ffffff);
    border-color: var(--primary-color, #0066cc);
}

.lang-flag {
    padding: 0.375rem;
    border: 2px solid var(--neutral-300, #dee2e6);
    background: var(--white, #ffffff);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 200ms ease;
}

.lang-flag:hover {
    border-color: var(--primary-color, #0066cc);
    transform: scale(1.1);
}

.lang-flag.active {
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 2px var(--primary-light, #e6f2ff);
}

.lang-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 2px solid var(--neutral-300, #dee2e6);
    background: var(--white, #ffffff);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

[dir="rtl"] .lang-select,
.rtl .lang-select {
    padding: 0.5rem 1rem 0.5rem 2rem;
    background-position: left 0.75rem center;
}

.lang-select:hover,
.lang-select:focus {
    border-color: var(--primary-color, #0066cc);
    outline: none;
}

/* =========================
   Homepage Language Selector Card
   ========================= */
.language-selection-card {
    background: var(--white, #ffffff);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    text-align: center;
}

.language-selection-card h3 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    color: var(--neutral-700, #495057);
}

.language-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.language-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: 3px solid var(--neutral-200, #e9ecef);
    background: var(--white, #ffffff);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 200ms ease;
    min-width: 140px;
}

.language-button:hover {
    border-color: var(--primary-color, #0066cc);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
}

.language-button.active {
    border-color: var(--primary-color, #0066cc);
    background: var(--primary-light, #e6f2ff);
}

.language-button .flag {
    font-size: 2rem;
}

.language-button .lang-name {
    font-weight: 600;
    color: var(--neutral-900, #212529);
}

.language-button .lang-native {
    font-size: 0.875rem;
    color: var(--neutral-700, #495057);
}

/* =========================
   Responsive RTL Adjustments
   ========================= */
@media (min-width: 768px) {
    [dir="rtl"] .nav-menu,
    .rtl .nav-menu {
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
    }
}

@media (min-width: 1024px) {
    [dir="rtl"] .page-wrapper,
    .rtl .page-wrapper {
        flex-direction: row-reverse;
    }
}

/* =========================
   Animations RTL
   ========================= */
@media (prefers-reduced-motion: no-preference) {
    [dir="rtl"] .role-card:hover::before,
    .rtl .role-card:hover::before {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* =========================
   Print Styles RTL
   ========================= */
@media print {
    [dir="rtl"],
    .rtl {
        direction: rtl;
    }
}

/* =========================
   LTR Explicit Overrides
   Prevent RTL styles from bleeding into LTR mode
   ========================= */
[dir="ltr"] .stats-row,
[dir="ltr"] .filter-tabs,
[dir="ltr"] .stats-grid {
    direction: ltr;
}

/* Ensure navbar is normal row direction in LTR */
[dir="ltr"] .navbar {
    direction: ltr;
    flex-direction: row;
}

[dir="ltr"] .nav-list {
    flex-direction: row;
}

[dir="ltr"] .nav-toggles {
    flex-direction: row;
}

/* =========================
   Number Display in RTL
   Keep numbers and fractions in LTR order
   ========================= */
[dir="rtl"] .stat-value,
.rtl .stat-value {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .fraction-display,
.rtl .fraction-display {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Ensure grid items don't reverse in LTR */
[dir="ltr"] .stats-row {
    grid-auto-flow: row;
}

[dir="ltr"] .filter-tabs {
    flex-direction: row;
}