/* RTL Fixes for the KIU Portal 
 * This file contains comprehensive fixes for RTL languages (Arabic and Urdu)
 */

/* Global RTL Fixes */
[dir="rtl"] body {
    text-align: right;
}

/* Force RTL Grid Layout */
[dir="rtl"] .grid {
    display: grid !important;
}

/* Fix for two-column grid layout in RTL mode */
@media (min-width: 768px) {
    [dir="rtl"] .md\:grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Fix grid child items to ensure proper display */
    [dir="rtl"] .md\:grid-cols-2 > * {
        grid-column: auto !important;
    }
}

/* Fix for three-column grid layout in RTL mode */
@media (min-width: 1024px) {
    [dir="rtl"] .lg\:grid-cols-3 {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* RTL for text alignment */
[dir="rtl"] .text-left {
    text-align: right !important;
}

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

/* RTL for tables */
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right !important;
}

/* RTL for flex items */
[dir="rtl"] .flex {
    display: flex !important;
}

/* RTL for margin adjustments */
[dir="rtl"] .mr-1, [dir="rtl"] .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

[dir="rtl"] .mr-2, [dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .mr-3, [dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

[dir="rtl"] .mr-4, [dir="rtl"] .me-4 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .ml-1, [dir="rtl"] .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

[dir="rtl"] .ml-2, [dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .ml-3, [dir="rtl"] .ms-3 {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

[dir="rtl"] .ml-4, [dir="rtl"] .ms-4 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* RTL for padding adjustments */
[dir="rtl"] .pl-1, [dir="rtl"] .ps-1 {
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
}

[dir="rtl"] .pl-2, [dir="rtl"] .ps-2 {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

[dir="rtl"] .pl-3, [dir="rtl"] .ps-3 {
    padding-left: 0 !important;
    padding-right: 0.75rem !important;
}

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

[dir="rtl"] .pr-1, [dir="rtl"] .pe-1 {
    padding-right: 0 !important;
    padding-left: 0.25rem !important;
}

[dir="rtl"] .pr-2, [dir="rtl"] .pe-2 {
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

[dir="rtl"] .pr-3, [dir="rtl"] .pe-3 {
    padding-right: 0 !important;
    padding-left: 0.75rem !important;
}

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

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

/* RTL for SVG icons - flip horizontally */
[dir="rtl"] svg.flip-rtl {
    transform: scaleX(-1);
}

/* Fix for input groups in RTL */
[dir="rtl"] .rounded-l-md {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

[dir="rtl"] .rounded-r-md {
    border-radius: 0.375rem 0 0 0.375rem !important;
}

[dir="rtl"] .rounded-none.rounded-r-md {
    border-radius: 0.375rem 0 0 0.375rem !important;
}

/* Fix for borders in RTL */
[dir="rtl"] .border-r {
    border-right: none !important;
    border-left: 1px solid rgba(229, 231, 235, 1) !important;
}

[dir="rtl"] .border-l {
    border-left: none !important;
    border-right: 1px solid rgba(229, 231, 235, 1) !important;
}

/* Special fix for transcript table */
[dir="rtl"] table.min-w-full th,
[dir="rtl"] table.min-w-full td {
    text-align: right !important;
}

/* Fix for floating elements */
[dir="rtl"] .float-right {
    float: left !important;
}

[dir="rtl"] .float-left {
    float: right !important;
}

/* Fix for the notification badge */
[dir="rtl"] .notification-badge {
    right: auto;
    left: 5px;
}

/* Fix for floating chat */
[dir="rtl"] #floating-chat {
    left: 1rem !important;
    right: auto !important;
}

[dir="rtl"] #chat-window {
    left: 1rem !important;
    right: auto !important;
}

/* RTL specific fixes for semester results table alignment */
[dir="rtl"] table {
    direction: rtl;
    text-align: right;
}

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

/* Fix for the column alignment in semester results table */
[dir="rtl"] table th, 
[dir="rtl"] table td {
    text-align: center !important;
}

[dir="rtl"] table th:first-child, 
[dir="rtl"] table td:first-child {
    text-align: right !important;
}

/* Apply specific fixes to the semester results table to ensure column alignment */
[dir="rtl"] h3:contains("Semester Results") + div table th,
[dir="rtl"] h3:contains("Semester Results") + div table td,
[dir="rtl"] h3:contains("Semester Results") + table th,
[dir="rtl"] h3:contains("Semester Results") + table td,
[dir="rtl"] h3:contains("نتائج الفصل الدراسي") + div table th,
[dir="rtl"] h3:contains("نتائج الفصل الدراسي") + div table td,
[dir="rtl"] h3:contains("نتائج الفصل الدراسي") + table th,
[dir="rtl"] h3:contains("نتائج الفصل الدراسي") + table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Ensure cells in GPA column maintain alignment */
[dir="rtl"] td:last-child,
[dir="rtl"] th:last-child {
    text-align: center !important;
}

/* Alternative for specific table targeting with table-specific classes */
[dir="rtl"] .semester-results-table th,
[dir="rtl"] .semester-results-table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Add width constraints for table columns to ensure alignment */
[dir="rtl"] table.min-w-full th,
[dir="rtl"] table.min-w-full td {
    width: auto !important;
    min-width: 50px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Apply specific fixes to the semester results table by targeting its container */
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Fix for specific heading-based targeting */
[dir="rtl"] h3 + div > table th,
[dir="rtl"] h3 + div > table td,
[dir="rtl"] h3 + table th,
[dir="rtl"] h3 + table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Target the Semester Results table specifically */
[dir="rtl"] h3 + .overflow-x-auto table th,
[dir="rtl"] h3 + .overflow-x-auto table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Target the Semester Results table using the class */
[dir="rtl"] .semester-results-table th,
[dir="rtl"] .semester-results-table td {
    text-align: center !important;
    vertical-align: middle;
}

/* Fix column width alignment issues in RTL mode */
[dir="rtl"] .semester-results-table {
    width: 100%;
    table-layout: fixed;
}

[dir="rtl"] .semester-results-table th,
[dir="rtl"] .semester-results-table td {
    width: auto;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
}

/* Fix specific alignment for the GPA and percentage columns */
[dir="rtl"] .semester-results-table th:nth-child(7),
[dir="rtl"] .semester-results-table td:nth-child(7),
[dir="rtl"] .semester-results-table th:nth-child(6),
[dir="rtl"] .semester-results-table td:nth-child(6) {
    text-align: center !important;
}

/* Fix column alignment using specific width values */
[dir="rtl"] .semester-results-table th:nth-child(1),
[dir="rtl"] .semester-results-table td:nth-child(1) {
    width: 18%;
    text-align: right !important;
}

[dir="rtl"] .semester-results-table th:nth-child(2),
[dir="rtl"] .semester-results-table td:nth-child(2) {
    width: 14%;
    text-align: center !important;
}

[dir="rtl"] .semester-results-table th:nth-child(3),
[dir="rtl"] .semester-results-table td:nth-child(3) {
    width: 14%;
    text-align: center !important;
}

[dir="rtl"] .semester-results-table th:nth-child(4),
[dir="rtl"] .semester-results-table td:nth-child(4) {
    width: 14%;
    text-align: center !important;
}

[dir="rtl"] .semester-results-table th:nth-child(5),
[dir="rtl"] .semester-results-table td:nth-child(5) {
    width: 14%;
    text-align: center !important;
}

[dir="rtl"] .semester-results-table th:nth-child(6),
[dir="rtl"] .semester-results-table td:nth-child(6) {
    width: 14%;
    text-align: center !important;
}

[dir="rtl"] .semester-results-table th:nth-child(7),
[dir="rtl"] .semester-results-table td:nth-child(7) {
    width: 12%;
    text-align: center !important;
}

/* ============================================
   ADMIN PANEL SPECIFIC RTL FIXES
   ============================================ */

/* Admin Sidebar RTL Fixes */
[dir="rtl"] .admin-layout nav a svg.mr-3,
[dir="rtl"] .admin-layout nav button svg.mr-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

[dir="rtl"] .admin-layout nav .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Admin Form RTL Fixes */
[dir="rtl"] .admin-layout label {
    text-align: right;
    display: block;
}

[dir="rtl"] .admin-layout input,
[dir="rtl"] .admin-layout select,
[dir="rtl"] .admin-layout textarea {
    text-align: right;
}

/* Admin Checkbox and Label Spacing */
[dir="rtl"] .admin-layout input[type="checkbox"] + label,
[dir="rtl"] .admin-layout input[type="radio"] + label {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .admin-layout .flex.items-center input[type="checkbox"] {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Admin Table RTL Fixes */
[dir="rtl"] .admin-layout table th,
[dir="rtl"] .admin-layout table td {
    text-align: right !important;
}

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

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

/* Admin Button Spacing in RTL */
[dir="rtl"] .admin-layout .space-x-2 > * + * {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .admin-layout .inline {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .admin-layout .inline:first-child {
    margin-left: 0;
}

/* Admin Card and Content Spacing */
[dir="rtl"] .admin-layout .flex.items-center.justify-between {
    direction: rtl;
}

[dir="rtl"] .admin-layout .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Admin Language Dropdown RTL */
[dir="rtl"] .admin-layout .origin-top-right {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .admin-layout .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .admin-layout .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Admin Input Fields with Icons RTL Fixes */
[dir="rtl"] .admin-layout .relative input[type="text"],
[dir="rtl"] .admin-layout .relative input[type="email"],
[dir="rtl"] .admin-layout .relative input[type="password"],
[dir="rtl"] .admin-layout .relative input[type="url"] {
    padding-right: 2.5rem !important;
    padding-left: 0.75rem !important;
}

[dir="rtl"] .admin-layout .absolute.inset-y-0.left-0 {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .admin-layout .absolute.inset-y-0.right-0 {
    right: auto !important;
    left: 0 !important;
}

/* Admin Card Icon Spacing RTL */
[dir="rtl"] .admin-layout .bg-white.shadow .flex.items-center svg {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

[dir="rtl"] .admin-layout .rounded-lg .flex.items-center svg {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Admin Dashboard Cards RTL */
[dir="rtl"] .admin-layout .grid .bg-white .p-4 .flex.items-center {
    direction: rtl;
}

[dir="rtl"] .admin-layout .grid .bg-white .p-4 svg {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

/* Admin Sidebar Icon Spacing - More Specific */
[dir="rtl"] .admin-layout .bg-green-700 nav a svg,
[dir="rtl"] .admin-layout .bg-green-700 nav button svg {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Admin Mobile Menu RTL */
[dir="rtl"] .admin-layout .mobile-menu a {
    text-align: right;
}

/* Admin Table Actions Column RTL */
[dir="rtl"] .admin-layout table td:last-child,
[dir="rtl"] .admin-layout table th:last-child {
    text-align: left !important;
}

/* Admin Form Button Groups RTL */
[dir="rtl"] .admin-layout .pt-2 a,
[dir="rtl"] .admin-layout .pt-2 button {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .admin-layout .pt-2 a:first-child,
[dir="rtl"] .admin-layout .pt-2 button:first-child {
    margin-left: 0;
}

/* Admin Status Badges RTL */
[dir="rtl"] .admin-layout .px-2.py-1 {
    text-align: center;
}

/* Admin Search and Filter Inputs RTL */
[dir="rtl"] .admin-layout input[type="search"] {
    text-align: right;
    padding-right: 1rem;
    padding-left: 2.5rem;
}

/* Admin Dropdown Menus RTL */
[dir="rtl"] .admin-layout .relative .absolute {
    left: 0 !important;
    right: auto !important;
}

/* Admin Notification Badges RTL */
[dir="rtl"] .admin-layout .ml-auto.inline-flex {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ============================================
   DASHBOARD CARDS DIAGONAL FLIP EFFECT
   ============================================ */

/* Enhanced 3D hover effect for dashboard cards */
.dashboard-card {
    perspective: 1000px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Add subtle depth even in normal state */
.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* Beautiful 3D card effect on hover */
.dashboard-card:hover {
    transform: scale(1.05) rotateX(5deg) rotateY(5deg) translateY(-15px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
}

/* Add the 3D lighting effect on hover */
.dashboard-card:hover::before {
    opacity: 1;
}

/* Smooth transitions for all card content */
.dashboard-card * {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Enhanced hover effect for card content */
.dashboard-card:hover .text-center {
    transform: translateZ(10px);
}

/* Subtle hover effect for text elements */
.dashboard-card:hover h3,
.dashboard-card:hover p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Add a subtle glow around the card border */
.dashboard-card:hover {
    filter: brightness(1.1);
}

/* Special effect for links inside cards */
.dashboard-card:hover a {
    transform: translateZ(5px);
    text-decoration: none;
}

/* RTL support for 3D effect */
[dir="rtl"] .dashboard-card:hover {
    transform: scale(1.05) rotateX(5deg) rotateY(-5deg) translateY(-15px);
}

/* Ensure cards maintain their layout in grid */
.dashboard-card {
    position: relative;
}

/* Add a subtle border glow effect */
.dashboard-card:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Mouse tracking effect - creates dynamic 3D based on mouse position */
.dashboard-card {
    transition: transform 0.1s ease-out;
}

/* Reset animation for smooth return */
.dashboard-card:not(:hover) {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}