/* RTL/LTR Support for All Pages */

/* HTML and Body Direction */
html {
    direction: ltr;
}

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

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

body {
    direction: inherit;
}

/* Flexbox Direction Support: only flip row-oriented flex containers */
[dir="rtl"] .flex-row,
[dir="rtl"] .flex-row-reverse {
    flex-direction: row-reverse !important;
}

/* Sidebar positioning */
[dir="rtl"] nav.sidebar-modern {
    left: auto !important;
    right: 0 !important;
}

/* Flip sidebar box-shadow for RTL so shadow appears on the left side */
[dir="rtl"] nav.sidebar-modern {
    box-shadow: -4px 0 30px rgba(0,0,0,0.3) !important;
}

[dir="ltr"] nav.sidebar-modern {
    left: 0 !important;
    right: auto !important;
}

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

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

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

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

/* Padding and Margin for Text Elements */
[dir="rtl"] .pl-4 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

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

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

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

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

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

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

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

/* Sidebar Items */
[dir="rtl"] .sidebar-item {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .sidebar-item svg {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

[dir="ltr"] .sidebar-item svg {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

/* Border adjustments */
[dir="rtl"] .border-l-4 {
    border-left: 0 !important;
    border-right: 4px solid !important;
}

[dir="ltr"] .border-l-4 {
    border-left: 4px solid !important;
    border-right: 0 !important;
}

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

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

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

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

/* Icon margins in buttons */
[dir="rtl"] button svg,
[dir="rtl"] .btn svg,
[dir="rtl"] a svg {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="ltr"] button svg,
[dir="ltr"] .btn svg,
[dir="ltr"] a svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Forms and inputs */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right !important;
    direction: rtl !important;
}

[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] select {
    text-align: left !important;
    direction: ltr !important;
}

/* Navbar and topbar adjustments */
[dir="rtl"] .navbar {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .navbar-brand {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="ltr"] .navbar-brand {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Dropdown menus */
[dir="rtl"] .dropdown-menu {
    text-align: right !important;
    left: auto !important;
    right: 0 !important;
}

[dir="ltr"] .dropdown-menu {
    text-align: left !important;
    left: 0 !important;
    right: auto !important;
}

/* Modal dialogs */
[dir="rtl"] .modal-header,
[dir="rtl"] .modal-body,
[dir="rtl"] .modal-footer {
    text-align: right !important;
}

[dir="ltr"] .modal-header,
[dir="ltr"] .modal-body,
[dir="ltr"] .modal-footer {
    text-align: left !important;
}

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

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

/* Alerts and notifications */
[dir="rtl"] .alert {
    text-align: right !important;
}

[dir="rtl"] .alert-icon {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

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

[dir="ltr"] .alert-icon {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

/* Breadcrumb navigation */
[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

[dir="rtl"] .breadcrumb-item::before {
    content: "" !important;
}

[dir="rtl"] .breadcrumb-item::after {
    content: "/" !important;
    margin: 0 0.5rem !important;
}

/* Control buttons group */
[dir="rtl"] .control-buttons-group {
    right: auto !important;
    left: 28px !important;
}

[dir="ltr"] .control-buttons-group {
    left: auto !important;
    right: 28px !important;
}

/* Floating control buttons base styles */
.control-buttons-group {
    position: fixed;
    top: 24px;
    z-index: 60;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.control-buttons-group .btn-floating {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Default unified themed color for floating buttons */
    background: linear-gradient(135deg,#2563EB,#7C3AED) !important;
    color: #fff !important;
    border: 1px solid rgba(124,58,237,0.14) !important;
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 6px 18px rgba(2,6,23,0.4);
}

.control-buttons-group .btn-floating:hover {
    transform: translateY(-4px);
    filter: brightness(1.08) contrast(1.02);
}

.control-buttons-group .btn-floating svg {
    width: 18px;
    height: 18px;
}

/* Themed colors for floating buttons */
.control-buttons-group #fb-lang {
    background: linear-gradient(135deg,#10B981,#059669) !important;
    border-color: rgba(16,185,129,0.16) !important;
}
.control-buttons-group #fb-lang:hover { box-shadow: 0 8px 28px rgba(16,185,129,0.12) !important; }

.control-buttons-group #fb-theme {
    background: linear-gradient(135deg,#7C3AED,#A78BFA) !important;
    border-color: rgba(167,139,250,0.14) !important;
}
.control-buttons-group #fb-theme:hover { box-shadow: 0 8px 28px rgba(124,58,237,0.12) !important; }

.control-buttons-group a.btn-floating {
    background: linear-gradient(135deg,#06B6D4,#3B82F6) !important;
    border-color: rgba(59,130,246,0.14) !important;
}
.control-buttons-group a.btn-floating:hover { box-shadow: 0 8px 28px rgba(59,130,246,0.12) !important; }

.control-buttons-group .btn-floating svg { color: #fff !important; }

/* Labels next to floating buttons */
.control-buttons-group .control-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.control-buttons-group .btn-label {
    color: #ffffffcc;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* Positioning for RTL/LTR label spacing */
[dir="ltr"] .control-buttons-group .control-item { flex-direction: row; }
[dir="rtl"] .control-buttons-group .control-item { flex-direction: row-reverse; }

/* Hide labels on small screens to avoid clutter */
@media (max-width: 640px) {
    .control-buttons-group .btn-label { display: none; }
    .control-buttons-group { gap: 0.35rem; }
}

/* Sidebar toggle button */
[dir="rtl"] #sidebar-toggle.open svg {
    transform: scaleX(-1) !important;
}

/* Modals and overlays */
[dir="rtl"] .modal-dialog {
    margin: auto !important;
}

/* Card content alignment */
[dir="rtl"] .card {
    text-align: right !important;
}

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

/* Flex items with justification */
[dir="rtl"] .justify-between {
    flex-direction: row-reverse !important;
}

/* Span and inline elements with margins */
[dir="rtl"] span {
    direction: rtl !important;
}

[dir="ltr"] span {
    direction: ltr !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [dir="rtl"] nav.sidebar-modern {
        display: none !important;
    }
    
    [dir="ltr"] nav.sidebar-modern {
        display: none !important;
    }
}