/* RTL Layout Support */
.rtl-layout {
    direction: rtl;
}

/* RTL Sidebar Positioning */
.rtl-layout .c-sidebar {
    right: 0 !important;
    left: auto !important;
    border-right: none !important;
    border-left: 1px solid #d8dbe0 !important;
    transform: translateX(0) !important;
}

.rtl-layout .c-sidebar-fixed {
    right: 0 !important;
    left: auto !important;
}

/* RTL Sidebar Toggle States */
.rtl-layout .c-sidebar {
    transition: transform 0.3s ease !important;
}

.rtl-layout .c-sidebar-minimized {
    transform: translateX(100%) !important;
}

.rtl-layout .c-sidebar-show {
    transform: translateX(0) !important;
}

/* RTL Sidebar Desktop Toggle */
@media (min-width: 992px) {
    .rtl-layout .c-sidebar {
        transform: translateX(0) !important;
    }

    .rtl-layout .c-sidebar-minimized {
        transform: translateX(calc(100% - 56px)) !important;
    }
}

/* RTL Sidebar Mobile Toggle */
@media (max-width: 991.98px) {
    .rtl-layout .c-sidebar {
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
    }

    .rtl-layout .c-sidebar-show {
        transform: translateX(0) !important;
    }

    .rtl-layout.c-sidebar-show .c-sidebar {
        transform: translateX(0) !important;
    }

    body.rtl-layout.c-sidebar-show .c-sidebar {
        transform: translateX(0) !important;
    }
}

/* RTL Main Content Adjustment */
.rtl-layout .c-wrapper {
    margin-right: 256px !important;
    margin-left: 0 !important;
    transition: margin-right 0.3s ease !important;
}

/* RTL Main Content - Sidebar Minimized */
.rtl-layout .c-sidebar-minimized ~ .c-wrapper {
    margin-right: 56px !important;
    margin-left: 0 !important;
}

/* RTL Main Content - Sidebar Hidden (Mobile) */
.rtl-layout .c-sidebar-show ~ .c-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* RTL Header Navigation - Force left positioning */
.rtl-layout .c-header-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: static !important;
    direction: ltr !important;
}

.rtl-layout .c-header-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: left !important;
}

.rtl-layout .c-header-nav.mr-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: left !important;
}

/* RTL Dropdown Positioning */
.rtl-layout .dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

.rtl-layout .dropdown-menu-left {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

/* RTL Dropdown Menu Fixes */
.rtl-layout .dropdown-menu {
    text-align: right !important;
}

.rtl-layout .dropdown-item {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL Notification Dropdown Positioning */
.rtl-layout .notifications-menu .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    direction: ltr !important;
    text-align: left !important;
    min-width: 300px !important;
    max-width: 400px !important;
}

/* RTL Notification Dropdown Items */
.rtl-layout .notifications-menu .dropdown-item {
    direction: ltr !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f8f9fa !important;
}

.rtl-layout .notifications-menu .dropdown-item:last-child {
    border-bottom: none !important;
}

/* RTL Notification Dropdown Content */
.rtl-layout .notifications-menu .dropdown-item a {
    direction: ltr !important;
    text-align: left !important;
    color: #495057 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}

.rtl-layout .notifications-menu .dropdown-item:hover {
    background-color: #f8f9fa !important;
}

/* RTL Notification Dropdown Arrow */
.rtl-layout .notifications-menu .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 20px !important;
    right: auto !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid #fff !important;
    z-index: 1001 !important;
}

.rtl-layout .notifications-menu .dropdown-menu::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 19px !important;
    right: auto !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #dee2e6 !important;
    z-index: 1000 !important;
}

/* RTL Notification Dropdown Responsive */
@media (max-width: 767.98px) {
    .rtl-layout .notifications-menu .dropdown-menu {
        min-width: 280px !important;
        max-width: 320px !important;
        left: -100px !important;
    }

    .rtl-layout .notifications-menu .dropdown-menu::before {
        left: 120px !important;
    }

    .rtl-layout .notifications-menu .dropdown-menu::after {
        left: 119px !important;
    }
}

/* RTL Notification Text Content */
.rtl-layout .notifications-menu .text-center {
    direction: ltr !important;
    text-align: center !important;
    padding: 1rem !important;
    color: #6c757d !important;
    font-style: italic !important;
}

/* RTL Notification Strong Text */
.rtl-layout .notifications-menu strong {
    font-weight: bold !important;
    color: #495057 !important;
}

/* RTL Notification Dropdown Shadow */
.rtl-layout .notifications-menu .dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
}

/* RTL Language Dropdown Positioning */
.rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    direction: ltr !important;
    text-align: left !important;
    min-width: 200px !important;
    max-width: 300px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
}

/* RTL Language Dropdown Items */
.rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-item {
    direction: ltr !important;
    text-align: left !important;
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid #f8f9fa !important;
    color: #495057 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}

.rtl-layout
    .c-header-nav-item:not(.notifications-menu)
    .dropdown-item:last-child {
    border-bottom: none !important;
}

.rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #16181b !important;
}

/* RTL Language Dropdown Arrow */
.rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 20px !important;
    right: auto !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid #fff !important;
    z-index: 1001 !important;
}

.rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-menu::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 19px !important;
    right: auto !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #dee2e6 !important;
    z-index: 1000 !important;
}

/* RTL Language & User Dropdown Responsive */
@media (max-width: 767.98px) {
    .rtl-layout .c-header-nav-item:not(.notifications-menu) .dropdown-menu {
        min-width: 180px !important;
        max-width: 250px !important;
        left: -50px !important;
    }

    .rtl-layout
        .c-header-nav-item:not(.notifications-menu)
        .dropdown-menu::before {
        left: 70px !important;
    }

    .rtl-layout
        .c-header-nav-item:not(.notifications-menu)
        .dropdown-menu::after {
        left: 69px !important;
    }
}

/* RTL User Dropdown Specific Styling */
.rtl-layout .c-header-nav-item .dropdown-item i {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
    width: 16px !important;
    text-align: center !important;
    color: #6c757d !important;
}

.rtl-layout .c-header-nav-item .dropdown-item:hover i {
    color: #495057 !important;
}

/* RTL Language Dropdown Language Codes */
.rtl-layout .c-header-nav-item .dropdown-item {
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.rtl-layout .c-header-nav-item .dropdown-item:active {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

/* RTL User Name Display in Dropdown */
.rtl-layout .c-header-nav-item .d-flex {
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.rtl-layout .c-header-nav-item .d-flex span {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* RTL Sidebar Icons and Text */
.rtl-layout .c-sidebar-nav-icon {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

.rtl-layout .c-sidebar-nav-link {
    text-align: right !important;
}

/* RTL Header Toggler */
.rtl-layout .c-header-toggler.mfs-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

.rtl-layout .c-header-toggler.mfe-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

/* RTL Header Layout Fixes */
.rtl-layout .c-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.rtl-layout .c-header .c-header-nav {
    position: static !important;
    float: none !important;
}

/* RTL Sidebar Toggle Functionality */
.rtl-layout .c-sidebar-minimized {
    transform: translateX(100%) !important;
}

.rtl-layout .c-sidebar-show {
    transform: translateX(0) !important;
}

/* Force RTL header elements to left */
.rtl-layout .c-header-nav {
    justify-self: flex-start !important;
    align-self: center !important;
    position: static !important;
    float: none !important;
}

/* RTL Header Flex Layout */
.rtl-layout .c-header {
    width: 100% !important;
}

/* Ensure proper spacing in RTL header */
.rtl-layout .c-header .c-header-nav {
    flex: 0 0 auto !important;
}

.rtl-layout .c-header > div {
    flex: 0 0 auto !important;
}

/* RTL Content Stretching - Desktop */
@media (min-width: 992px) {
    /* Normal sidebar state */
    .rtl-layout .c-wrapper {
        margin-right: 256px !important;
        margin-left: 0 !important;
        width: calc(100% - 256px) !important;
        transition: all 0.3s ease !important;
    }

    /* Minimized sidebar state - content stretches */
    .rtl-layout.c-sidebar-minimized .c-wrapper,
    .rtl-layout .c-sidebar-minimized ~ .c-wrapper {
        margin-right: 56px !important;
        margin-left: 0 !important;
        width: calc(100% - 56px) !important;
    }

    /* Alternative selector for minimized state */
    body.rtl-layout.c-sidebar-minimized .c-wrapper {
        margin-right: 56px !important;
        width: calc(100% - 56px) !important;
    }
}

/* RTL Responsive Adjustments */
@media (max-width: 991.98px) {
    .rtl-layout .c-wrapper {
        margin-right: 0 !important;
        width: 100% !important;
    }

    .rtl-layout .c-sidebar-show .c-sidebar {
        right: 0 !important;
        left: auto !important;
    }

    /* Mobile - content always full width */
    .rtl-layout .c-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* RTL Text Alignment */
.rtl-layout .text-right {
    text-align: right !important;
}

.rtl-layout .text-left {
    text-align: left !important;
}

/* RTL Margin and Padding Utilities */
.rtl-layout .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

.rtl-layout .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.rtl-layout .mr-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

.rtl-layout .ml-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* RTL Badge and Notification Positioning */
.rtl-layout .navbar-badge {
    right: auto !important;
    left: 0.375rem !important;
}

/* RTL Notification Badge - Above button and slightly right */
.rtl-notification-badge {
    position: absolute !important;
    top: 4px !important;
    right: -2px !important;
    left: auto !important;
    z-index: 10 !important;
    transform: translateX(0) !important;
}

/* LTR Notification Badge - Above button and slightly right */
.ltr-notification-badge {
    position: absolute !important;
    top: 4px !important;
    right: -1px !important;
    left: auto !important;
    z-index: 10 !important;
    transform: translateX(0) !important;
}

/* Enhanced Notification Badge Styling */
.rtl-notification-badge,
.ltr-notification-badge {
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Notification Button Container Positioning */
.rtl-layout .notifications-menu .c-header-nav-link,
.notifications-menu .c-header-nav-link {
    position: relative !important;
    display: inline-block !important;
}

/* Header Toggle Button Positioning */
.rtl-layout .c-header {
    display: block !important;
    position: relative !important;
    direction: ltr !important;
}

/* RTL Navigation Container - LEFT side */
.rtl-layout .c-header .c-header-nav {
    position: static !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    direction: ltr !important;
}

/* RTL Toggle Button Container - RIGHT side */
.rtl-layout .c-header > div {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
}

/* RTL Toggle Button Styling */
.rtl-layout .c-header-toggler {
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    margin: 0 0.25rem !important;
    z-index: 1001 !important;
    position: relative !important;
}

.rtl-layout .c-header-toggler:hover {
    color: #495057 !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.rtl-layout .c-header-toggler:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* RTL Content Area Stretching - Match EN Mode Behavior */
.rtl-layout .c-main {
    transition: all 0.3s ease !important;
}

/* RTL Content Container */
.rtl-layout .c-body {
    transition: all 0.3s ease !important;
}

/* RTL Content when sidebar is minimized */
.rtl-layout.c-sidebar-minimized .c-main,
body.rtl-layout.c-sidebar-minimized .c-main {
    width: 100% !important;
    max-width: none !important;
}

.rtl-layout.c-sidebar-minimized .c-body,
body.rtl-layout.c-sidebar-minimized .c-body {
    width: 100% !important;
    max-width: none !important;
}

/* Ensure content stretches in all containers */
.rtl-layout.c-sidebar-minimized .container-fluid,
body.rtl-layout.c-sidebar-minimized .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* RTL Card and content stretching */
.rtl-layout.c-sidebar-minimized .card,
body.rtl-layout.c-sidebar-minimized .card {
    width: 100% !important;
}

.rtl-layout.c-sidebar-minimized .row,
body.rtl-layout.c-sidebar-minimized .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force header items to stay on left */
.rtl-layout .c-header-nav li {
    direction: ltr !important;
}

.rtl-layout .c-header-nav .dropdown-menu {
    direction: rtl !important;
}

/* LTR Header Layout */
.c-header {
    display: flex !important;
    align-items: center !important;
}

/* Toggle Button Spacing */
.c-header-toggler {
    margin-right: 0.5rem;
}

.rtl-layout .c-header-toggler {
    margin-left: 0.5rem;
    margin-right: 0;
}

.ck-editor__editable,
textarea {
    min-height: 150px;
}

.datatable {
    width: 100% !important;
}

table.dataTable tbody td.select-checkbox::before,
table.dataTable tbody td.select-checkbox::after,
table.dataTable tbody th.select-checkbox::before,
table.dataTable tbody th.select-checkbox::after {
    top: 50%;
}

.dataTables_length,
.dataTables_filter,
.dt-buttons {
    margin-bottom: 0.333em;
    margin-top: 0.2rem;
}

.dataTables_length {
    padding-top: 15px !important;
}

.dataTables_filter {
    margin-right: 0.2rem;
}

.dt-buttons .btn {
    margin-left: 0.333em;
    border-radius: 0;
}

.table.datatable {
    box-sizing: border-box;
    border-collapse: collapse;
}

table.dataTable thead th {
    border-bottom: 2px solid #c8ced3;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #c8ced3;
}

.select2 {
    max-width: 100%;
    width: 100% !important;
}

.select2-selection__rendered {
    padding-bottom: 5px !important;
}

.has-error .invalid-feedback {
    display: block !important;
}

.btn-info,
.badge-info {
    color: white;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none;
}

.sidebar .nav-item {
    cursor: pointer;
}

.btn-default {
    color: #23282c;
    background-color: #f0f3f5;
    border-color: #f0f3f5;
}

.btn-default.focus,
.btn-default:focus {
    box-shadow: 0 0 0 0.2rem rgba(209, 213, 215, 0.5);
}

.btn-default:hover {
    color: #23282c;
    background-color: #d9e1e6;
    border-color: #d1dbe1;
}

.btn-group-xs > .btn,
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.searchable-title {
    font-weight: bold;
}
.searchable-fields {
    padding-left: 5px;
}
.searchable-link {
    padding: 0 5px 0 5px;
}
.searchable-link:hover {
    cursor: pointer;
    background: #eaeaea;
}
.select2-results__option {
    padding-left: 0px;
    padding-right: 0px;
}

.form-group .required::after {
    content: " *";
    color: red;
}

.form-check.is-invalid ~ .invalid-feedback {
    display: block;
}

.c-sidebar-brand .c-sidebar-brand-full:hover {
    color: inherit;
}

.custom-select.form-control-sm {
    padding: 0.25rem 1.5rem;
}

/* Custom pagination styling with maximum specificity */
table.dataTable + .dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate span,
.dataTables_wrapper .dataTables_paginate a,
.paginate_button {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #6c757d !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    min-width: 32px !important;
    text-align: center !important;
}

table.dataTable
    + .dataTables_wrapper
    .dataTables_paginate
    .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate span:hover,
.dataTables_wrapper .dataTables_paginate a:hover,
.paginate_button:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

table.dataTable
    + .dataTables_wrapper
    .dataTables_paginate
    .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .current,
.paginate_button.current {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}

table.dataTable
    + .dataTables_wrapper
    .dataTables_paginate
    .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .disabled,
.paginate_button.disabled {
    color: #6c757d !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 0 !important;
}

.dataTables_wrapper .dataTables_info {
    color: #6c757d;
    font-size: 14px;
    margin-top: 8px;
    padding-bottom: 15px;
    padding-right: 5px;
}

/* Responsive styles for permissions page */
@media (max-width: 768px) {
    /* Stack export buttons vertically on mobile */
    .d-flex.gap-8 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .d-flex.gap-8 .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 8px;
    }

    /* Stack select all and search on mobile */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 15px;
    }

    /* Make search input full width on mobile */
    .position-relative input[type="text"] {
        width: 100% !important;
    }

    /* Adjust DataTables pagination for mobile */
    .dataTables_wrapper .d-flex.justify-content-between {
        flex-direction: column !important;
        text-align: center !important;
    }

    .dataTables_wrapper .d-flex.align-items-center {
        justify-content: center !important;
        margin-bottom: 10px;
    }

    /* Make table more mobile friendly */
    .table-responsive {
        font-size: 14px;
    }

    .table th,
    .table td {
        padding: 8px 4px !important;
        white-space: nowrap;
    }
}

/* Export buttons responsive layout */
.d-flex.gap-8 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

/* Default - Large screens - all buttons in one row */
.d-flex.gap-8 .btn {
    flex: 0 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* ==============================================
   REUSABLE MODERN TABLE & BUTTON STYLES
   ============================================== */

/* Modern Table Styling */
.modern-table {
    border: 1px solid #f1f1f1 !important;
}

.modern-table thead {
    background-color: #f8f9fa !important;
}

.modern-table th,
.modern-table td {
    border: 0 !important;
}

.modern-table th {
    color: #6c757d !important;
    padding-bottom: 8px !important;
    padding-left: 10px !important;
}

.modern-table tbody tr {
    border: 0 !important;
}

/* Modern Select All Button */
.modern-select-btn {
    background-color: #f8f7fc !important;
    border: 1px solid #dee2e6 !important;
    color: #1d2530 !important;
    padding: 8px 12px !important;
    margin-top: 10px !important;
    transition: all 0.2s ease !important;
}

.modern-select-btn.active {
    background-color: #e3f2fd !important;
    border-color: #bbdefb !important;
    color: #1976d2 !important;
}

/* Modern DataTables Buttons Container */
.modern-dt-buttons-container {
    margin-bottom: 15px;
}

.modern-dt-buttons-container .dt-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Modern DataTables Button Styling */
.modern-dt-buttons-container .dt-buttons .btn {
    background-color: #f8f7fc !important;
    border: 1px solid #dee2e6 !important;
    color: #1d2530 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.modern-dt-buttons-container .dt-buttons .btn:hover {
    background-color: #eeedf7 !important;
    border-color: #c8c7d4 !important;
    color: #1d2530 !important;
}

.modern-dt-buttons-container .dt-buttons .btn i {
    margin-right: 6px !important;
    font-size: 13px !important;
}

/* Modern Action Buttons */
.modern-action-btn {
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.modern-action-btn .fa-eye {
    color: #007bff !important;
}

.modern-action-btn .fa-edit {
    color: #17a2b8 !important;
}

.modern-action-btn .fa-trash {
    color: #dc3545 !important;
}

/* Medium screens (769px to 992px) - 3 buttons per row */
@media (max-width: 992px) and (min-width: 577px) {
    .d-flex.gap-8 .btn {
        flex: 1 1 calc(33.333% - 0.5rem) !important;
        font-size: 0.875rem !important;
        padding: 6px 8px !important;
    }
}

/* Small screens (576px and below) - 1 button per row */
@media (max-width: 576px) {
    .d-flex.gap-8 .btn {
        flex: 1 1 100% !important;
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
        margin-bottom: 0.5rem !important;
    }

    .d-flex.gap-8 .btn i {
        margin-right: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    /* Extra small screens */
    .card-header {
        padding: 15px 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .btn-xs {
        padding: 2px 6px !important;
        font-size: 11px !important;
    }

    .table th,
    .table td {
        padding: 6px 2px !important;
        font-size: 12px;
    }

    /* Hide less important columns on very small screens */
    .table th:first-child,
    .table td:first-child {
        display: none;
    }
}

/* ========================================
   ENHANCED HTML5 DATE PICKER STYLING
   ======================================== */

/* Base Date Input Styling */
input[type="date"] {
    position: relative;
    padding: 12px 16px !important;
    border: 2px solid #000000 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    color: #374151 !important;
    cursor: pointer !important;
    min-height: 48px !important;
}

/* Date Input Focus and Hover States */
input[type="date"]:focus {
    outline: none !important;
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15),
        0 4px 12px rgba(59, 130, 246, 0.1) !important;
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) !important;
}

input[type="date"]:hover {
    border-color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Date Input Invalid State */
input[type="date"]:invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Date Input Disabled State */
input[type="date"]:disabled {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ========================================
   WEBKIT BROWSER DATE PICKER STYLING
   ======================================== */

/* Calendar Picker Indicator (Calendar Icon) */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
}

/* Date Input Text Styling */
input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
}

input[type="date"]::-webkit-datetime-edit-text {
    color: #6b7280 !important;
    padding: 0 4px !important;
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 2px 4px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1e40af !important;
    outline: none !important;
}

/* Remove inner spin button */
input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    display: none !important;
}

/* Remove outer spin button */
input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    display: none !important;
}

/* ========================================
   FIREFOX DATE PICKER STYLING
   ======================================== */

/* Firefox date input styling */
@-moz-document url-prefix() {
    input[type="date"] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 18px 18px !important;
        padding-right: 45px !important;
    }

    input[type="date"]:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }
}

/* ========================================
   EDGE/IE DATE PICKER STYLING
   ======================================== */

/* Edge/IE specific styling */
input[type="date"]::-ms-clear {
    display: none !important;
}

input[type="date"]::-ms-expand {
    background: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    border: none !important;
    cursor: pointer !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

input[type="date"]:hover::-ms-expand,
input[type="date"]:focus::-ms-expand {
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
}

/* ========================================
   CALENDAR WIDGET POPUP STYLING
   ======================================== */

/* Enhanced Calendar Widget Styling for Webkit browsers */
input[type="date"]::-webkit-calendar-picker-indicator:hover
    + input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-radius: 6px !important;
}

/* Calendar popup positioning and styling */
input[type="date"]:focus::-webkit-calendar-picker-indicator {
    position: relative !important;
}

/* ========================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   ======================================== */

/* RTL Date Input Styling */
.rtl-layout input[type="date"],
[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="date"] {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Calendar Picker Indicator */
.rtl-layout input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
html[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 0 !important;
    margin-right: 8px !important;
    transform: scaleX(-1) !important;
}

/* RTL Firefox styling */
@-moz-document url-prefix() {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[dir="rtl"] input[type="date"] {
        background-position: left 12px center !important;
        padding-left: 45px !important;
        padding-right: 16px !important;
        direction: rtl !important;
    }
}

/* RTL Edge/IE styling */
.rtl-layout input[type="date"]::-ms-expand,
[dir="rtl"] input[type="date"]::-ms-expand,
html[dir="rtl"] input[type="date"]::-ms-expand {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* RTL Date field text alignment */
.rtl-layout input[type="date"]::-webkit-datetime-edit,
[dir="rtl"] input[type="date"]::-webkit-datetime-edit,
html[dir="rtl"] input[type="date"]::-webkit-datetime-edit {
    text-align: right !important;
    direction: rtl !important;
}

/* ========================================
   RESPONSIVE DESIGN FOR DATE PICKER
   ======================================== */

/* Tablet and smaller screens */
@media (max-width: 768px) {
    input[type="date"] {
        padding: 14px 18px !important;
        font-size: 1.1rem !important;
        min-height: 52px !important;
        border-radius: 14px !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 22px !important;
        height: 22px !important;
        background-size: 20px 20px !important;
        margin-left: 10px !important;
    }

    /* RTL adjustments for tablet */
    .rtl-layout input[type="date"]::-webkit-calendar-picker-indicator,
    [dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
    html[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator {
        margin-left: 0 !important;
        margin-right: 10px !important;
    }

    @-moz-document url-prefix() {
        input[type="date"] {
            padding-right: 50px !important;
            background-size: 20px 20px !important;
        }

        .rtl-layout input[type="date"],
        [dir="rtl"] input[type="date"],
        html[dir="rtl"] input[type="date"] {
            padding-left: 50px !important;
            padding-right: 18px !important;
        }
    }
}

/* Mobile screens */
@media (max-width: 576px) {
    input[type="date"] {
        padding: 16px 20px !important;
        font-size: 1.2rem !important;
        min-height: 56px !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 24px !important;
        height: 24px !important;
        background-size: 22px 22px !important;
        margin-left: 12px !important;
    }

    /* RTL adjustments for mobile */
    .rtl-layout input[type="date"]::-webkit-calendar-picker-indicator,
    [dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
    html[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator {
        margin-left: 0 !important;
        margin-right: 12px !important;
    }

    @-moz-document url-prefix() {
        input[type="date"] {
            padding-right: 55px !important;
            background-size: 22px 22px !important;
        }

        .rtl-layout input[type="date"],
        [dir="rtl"] input[type="date"],
        html[dir="rtl"] input[type="date"] {
            padding-left: 55px !important;
            padding-right: 20px !important;
        }
    }

    /* Enhanced touch targets for mobile */
    input[type="date"]::-webkit-datetime-edit-month-field,
    input[type="date"]::-webkit-datetime-edit-day-field,
    input[type="date"]::-webkit-datetime-edit-year-field {
        padding: 4px 6px !important;
        min-width: 32px !important;
        text-align: center !important;
    }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    input[type="date"] {
        border-width: 3px !important;
        border-color: #000 !important;
    }

    input[type="date"]:focus {
        border-color: #0066cc !important;
        box-shadow: 0 0 0 3px #0066cc !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    input[type="date"],
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="date"]::-webkit-datetime-edit-month-field,
    input[type="date"]::-webkit-datetime-edit-day-field,
    input[type="date"]::-webkit-datetime-edit-year-field {
        transition: none !important;
        transform: none !important;
    }

    input[type="date"]:hover,
    input[type="date"]:focus {
        transform: none !important;
    }
}

/* Focus visible for keyboard navigation */
input[type="date"]:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* ========================================
   FORM INTEGRATION STYLING
   ======================================== */

/* Bootstrap form-control integration */
input[type="date"].form-control {
    /* Inherit all the enhanced styling above */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Form group integration */
.form-group input[type="date"],
.form-floating input[type="date"] {
    /* Ensure consistent styling within form groups */
    position: relative !important;
    z-index: 1 !important;
}

/* Input group integration */
.input-group input[type="date"] {
    border-radius: 12px 0 0 12px !important;
}

.input-group input[type="date"]:last-child {
    border-radius: 0 12px 12px 0 !important;
}

.input-group input[type="date"]:only-child {
    border-radius: 12px !important;
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

/* Dark mode styling */
@media (prefers-color-scheme: dark) {
    input[type="date"] {
        background: rgba(31, 41, 55, 0.95) !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }

    input[type="date"]:focus {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15),
            0 4px 12px rgba(96, 165, 250, 0.1) !important;
        background: rgba(31, 41, 55, 1) !important;
    }

    input[type="date"]:hover {
        border-color: #6b7280 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d1d5db'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }

    input[type="date"]:focus::-webkit-calendar-picker-indicator {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2360a5fa'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }

    input[type="date"]::-webkit-datetime-edit-text {
        color: #9ca3af !important;
    }

    input[type="date"]::-webkit-datetime-edit-month-field:focus,
    input[type="date"]::-webkit-datetime-edit-day-field:focus,
    input[type="date"]::-webkit-datetime-edit-year-field:focus {
        background-color: rgba(96, 165, 250, 0.1) !important;
        color: #60a5fa !important;
    }

    @-moz-document url-prefix() {
        input[type="date"] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d1d5db'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
        }

        input[type="date"]:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2360a5fa'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
        }
    }

    input[type="date"]::-ms-expand {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d1d5db'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }

    input[type="date"]:hover::-ms-expand,
    input[type="date"]:focus::-ms-expand {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2360a5fa'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    }
}

/* ========================================
   LEGACY BROWSER FALLBACKS
   ======================================== */

/* Fallback for older browsers that don't support input[type="date"] */
.no-inputdate input[type="date"] {
    background: rgba(255, 255, 255, 0.95) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
    padding-right: 45px !important;
}

/* Print styles */
@media print {
    input[type="date"] {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        color: #000 !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        display: none !important;
    }
}

/* ========================================
   ADVANCED CALENDAR POPUP STYLING ATTEMPTS
   ======================================== */

/* Bootstrap Integration with CSS Variables */
:root {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;

    /* Custom date picker variables */
    --date-picker-primary: var(--bs-primary);
    --date-picker-bg: var(--bs-white);
    --date-picker-border: var(--bs-gray);
    --date-picker-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --date-picker-border-radius: 0.375rem;
}

/* Experimental: Webkit Calendar Popup Styling Attempts */
/* Note: These selectors are experimental and may not work in all browsers */

/* Attempt to style calendar popup container */
input[type="date"]::-webkit-calendar-picker-indicator::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 300px;
    background: var(--date-picker-bg);
    border: 1px solid var(--date-picker-border);
    border-radius: var(--date-picker-border-radius);
    box-shadow: var(--date-picker-shadow);
    z-index: 9999;
    pointer-events: none;
}

/* Experimental: Shadow DOM piercing attempts */
/* These are highly experimental and browser-specific */

/* Chrome/Webkit experimental selectors */
input[type="date"]::-webkit-calendar-picker-indicator:focus + * {
    background: var(--date-picker-bg) !important;
    border: 1px solid var(--date-picker-primary) !important;
    border-radius: var(--date-picker-border-radius) !important;
}

/* Attempt to style calendar popup using CSS custom properties */
input[type="date"] {
    --webkit-calendar-picker-background: var(--date-picker-bg);
    --webkit-calendar-picker-border: var(--date-picker-border);
    --webkit-calendar-picker-color: var(--bs-dark);
}

/* ========================================
   CREATIVE WORKAROUNDS FOR CALENDAR POPUP
   ======================================== */

/* Enhanced Input Container for Popup Positioning */
.enhanced-date-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Backdrop Filter Effect for Calendar Area */
.enhanced-date-container::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px) saturate(180%);
    border-radius: 0 0 var(--date-picker-border-radius)
        var(--date-picker-border-radius);
    box-shadow: var(--date-picker-shadow);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
}

/* Show backdrop when date input is focused */
.enhanced-date-container input[type="date"]:focus + ::after,
.enhanced-date-container:focus-within::after {
    height: 320px;
    opacity: 1;
}

/* Calendar Popup Enhancement Overlay */
.calendar-popup-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.05) 0%,
        rgba(var(--bs-secondary-rgb), 0.02) 100%
    );
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 0 0 var(--date-picker-border-radius)
        var(--date-picker-border-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

/* Show overlay when date input is active */
.enhanced-date-container input[type="date"]:focus ~ .calendar-popup-overlay,
.enhanced-date-container input[type="date"]:active ~ .calendar-popup-overlay {
    height: 300px;
    opacity: 1;
}

/* ========================================
   BROWSER-SPECIFIC EXPERIMENTAL ATTEMPTS
   ======================================== */

/* Chrome/Safari Experimental Calendar Styling */
@supports (-webkit-appearance: none) {
    /* Attempt to influence calendar popup through CSS custom properties */
    input[type="date"] {
        color-scheme: light;
        accent-color: var(--date-picker-primary);
    }

    /* Dark mode calendar theming */
    @media (prefers-color-scheme: dark) {
        input[type="date"] {
            color-scheme: dark;
            accent-color: var(--bs-info);
        }
    }
}

/* Firefox Experimental Styling */
@-moz-document url-prefix() {
    /* Attempt to style Firefox's calendar popup */
    input[type="date"] {
        accent-color: var(--date-picker-primary);
        color-scheme: light;
    }

    /* Firefox-specific calendar enhancement attempts */
    input[type="date"]:focus {
        filter: drop-shadow(0 4px 8px rgba(var(--bs-primary-rgb), 0.2));
    }
}

/* Edge/Chromium Experimental Styling */
@supports (-ms-ime-align: auto) {
    input[type="date"] {
        accent-color: var(--date-picker-primary);
    }
}

/* ========================================
   ADVANCED CSS FEATURES FOR CALENDAR POPUP
   ======================================== */

/* CSS Container Queries for Calendar Popup (Experimental) */
@container (min-width: 300px) {
    .enhanced-date-container {
        container-type: inline-size;
    }

    .calendar-popup-overlay {
        width: 300px;
        height: 280px;
    }
}

/* CSS Anchor Positioning (Experimental - Future CSS) */
.enhanced-date-container {
    anchor-name: --date-input;
}

.calendar-popup-overlay {
    position: absolute;
    position-anchor: --date-input;
    top: anchor(bottom);
    left: anchor(left);
    right: anchor(right);
}

/* CSS View Transitions for Calendar Animation (Experimental) */
@supports (view-transition-name: auto) {
    .calendar-popup-overlay {
        view-transition-name: calendar-popup;
    }
}

/* ========================================
   BOOTSTRAP UTILITY INTEGRATION
   ======================================== */

/* Bootstrap-styled date picker variants */
.date-picker-primary input[type="date"] {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.date-picker-secondary input[type="date"] {
    border-color: var(--bs-secondary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.25) !important;
}

.date-picker-success input[type="date"] {
    border-color: var(--bs-success) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
}

.date-picker-danger input[type="date"] {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
}

.date-picker-warning input[type="date"] {
    border-color: var(--bs-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25) !important;
}

.date-picker-info input[type="date"] {
    border-color: var(--bs-info) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.25) !important;
}

/* ========================================
   RTL COMPATIBILITY FOR ADVANCED FEATURES
   ======================================== */

/* RTL Enhanced Date Container */
.rtl-layout .enhanced-date-container,
[dir="rtl"] .enhanced-date-container,
html[dir="rtl"] .enhanced-date-container {
    direction: rtl;
}

/* RTL Calendar Popup Overlay */
.rtl-layout .calendar-popup-overlay,
[dir="rtl"] .calendar-popup-overlay,
html[dir="rtl"] .calendar-popup-overlay {
    left: auto;
    right: 0;
    direction: rtl;
}

/* RTL Backdrop Filter */
.rtl-layout .enhanced-date-container::after,
[dir="rtl"] .enhanced-date-container::after,
html[dir="rtl"] .enhanced-date-container::after {
    left: auto;
    right: 0;
    direction: rtl;
}

/* RTL Bootstrap Variants */
.rtl-layout .date-picker-primary input[type="date"],
.rtl-layout .date-picker-secondary input[type="date"],
.rtl-layout .date-picker-success input[type="date"],
.rtl-layout .date-picker-danger input[type="date"],
.rtl-layout .date-picker-warning input[type="date"],
.rtl-layout .date-picker-info input[type="date"],
[dir="rtl"] .date-picker-primary input[type="date"],
[dir="rtl"] .date-picker-secondary input[type="date"],
[dir="rtl"] .date-picker-success input[type="date"],
[dir="rtl"] .date-picker-danger input[type="date"],
[dir="rtl"] .date-picker-warning input[type="date"],
[dir="rtl"] .date-picker-info input[type="date"] {
    direction: rtl;
    text-align: right;
}

/* ========================================
   ADVANCED SHADOW DOM PIERCING ATTEMPTS
   ======================================== */

/* Experimental: CSS Parts for Calendar Popup (Future CSS) */
input[type="date"]::part(calendar) {
    background: var(--date-picker-bg);
    border: 1px solid var(--date-picker-primary);
    border-radius: var(--date-picker-border-radius);
    box-shadow: var(--date-picker-shadow);
}

input[type="date"]::part(calendar-header) {
    background: var(--date-picker-primary);
    color: var(--bs-white);
    padding: 0.5rem;
    border-radius: var(--date-picker-border-radius)
        var(--date-picker-border-radius) 0 0;
}

input[type="date"]::part(calendar-day) {
    border-radius: 50%;
    transition: all 0.2s ease;
}

input[type="date"]::part(calendar-day):hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--date-picker-primary);
}

input[type="date"]::part(calendar-day-selected) {
    background: var(--date-picker-primary);
    color: var(--bs-white);
}

/* Experimental: CSS Slotted for Calendar Content */
input[type="date"]::slotted(*) {
    font-family: inherit;
    color: var(--bs-dark);
}

/* ========================================
   WEBKIT SHADOW DOM EXPERIMENTAL SELECTORS
   ======================================== */

/* Highly experimental Webkit shadow DOM selectors */
/* Note: These may not work and are for experimental purposes only */

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker {
    background: var(--date-picker-bg) !important;
    border: 1px solid var(--date-picker-primary) !important;
    border-radius: var(--date-picker-border-radius) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-header {
    background: var(--date-picker-primary) !important;
    color: var(--bs-white) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day {
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day:hover {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--date-picker-primary) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day-selected {
    background: var(--date-picker-primary) !important;
    color: var(--bs-white) !important;
}

/* ========================================
   CSS CUSTOM PROPERTIES INJECTION
   ======================================== */

/* Attempt to inject custom properties into calendar popup */
input[type="date"] {
    /* Webkit calendar custom properties (experimental) */
    --webkit-calendar-background: var(--date-picker-bg);
    --webkit-calendar-border-color: var(--date-picker-primary);
    --webkit-calendar-text-color: var(--bs-dark);
    --webkit-calendar-selected-background: var(--date-picker-primary);
    --webkit-calendar-selected-text: var(--bs-white);
    --webkit-calendar-hover-background: rgba(var(--bs-primary-rgb), 0.1);

    /* Firefox calendar custom properties (experimental) */
    --moz-calendar-background: var(--date-picker-bg);
    --moz-calendar-border-color: var(--date-picker-primary);
    --moz-calendar-text-color: var(--bs-dark);

    /* Generic calendar custom properties */
    --calendar-primary-color: var(--date-picker-primary);
    --calendar-background-color: var(--date-picker-bg);
    --calendar-border-color: var(--date-picker-border);
    --calendar-text-color: var(--bs-dark);
    --calendar-selected-color: var(--bs-white);
    --calendar-hover-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* ========================================
   FILTER AND BACKDROP EFFECTS
   ======================================== */

/* Enhanced visual effects for calendar popup area */
input[type="date"]:focus {
    /* Add subtle glow effect that might influence popup appearance */
    filter: drop-shadow(0 0 8px rgba(var(--bs-primary-rgb), 0.3));
}

/* Backdrop filter for enhanced calendar popup experience */
input[type="date"]:focus::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show backdrop when calendar might be open */
input[type="date"]:focus:active::before {
    opacity: 1;
}

/* ========================================
   MODERN CSS FEATURES FOR CALENDAR POPUP
   ======================================== */

/* CSS Cascade Layers for Calendar Styling */
@layer calendar-popup {
    input[type="date"] {
        accent-color: var(--date-picker-primary);
        color-scheme: light dark;
    }
}

/* CSS Scope for Calendar Popup (Experimental) */
@scope (.enhanced-date-container) {
    input[type="date"] {
        accent-color: var(--date-picker-primary);
    }

    :scope {
        container-type: inline-size;
    }
}

/* CSS Nesting for Calendar Popup */
.enhanced-date-container {
    input[type="date"] {
        &:focus {
            accent-color: var(--date-picker-primary);

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(var(--bs-primary-rgb), 0.05);
                border-radius: inherit;
                pointer-events: none;
            }
        }
    }
}

/* ========================================
   MAXIMUM CALENDAR POPUP ENHANCEMENT ATTEMPTS
   ======================================== */

/* Ultra-Advanced Calendar Popup Styling Attempts */
/* WARNING: These are highly experimental and may not work due to browser restrictions */

/* Attempt 1: Maximum Shadow DOM Piercing with Webkit Selectors */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
    /* Attempt to style calendar container */
    background: var(--date-picker-bg) !important;
    border: 2px solid var(--date-picker-primary) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(var(--bs-primary-rgb), 0.15) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Attempt 2: Calendar Header Styling */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-header {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary),
        var(--bs-info)
    ) !important;
    color: var(--bs-white) !important;
    padding: 16px !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-radius: 16px 16px 0 0 !important;
    position: relative !important;
}

/* Attempt 3: Year Display Centering */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-year {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-white) !important;
    z-index: 10 !important;
}

/* Attempt 4: Navigation Buttons Positioning */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-prev-button {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-next-button {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Attempt 5: Enhanced Date Cell Styling */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day {
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 2px !important;
    font-weight: 500 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Attempt 6: Date Cell Hover Effects */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day:hover {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary),
        var(--bs-info)
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 16px rgba(var(--bs-primary-rgb), 0.3) !important;
    z-index: 10 !important;
}

/* Attempt 7: Selected Date Enhanced Styling */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day-selected {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary),
        var(--bs-success)
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.3),
        0 8px 16px rgba(var(--bs-primary-rgb), 0.4) !important;
    transform: scale(1.05) !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Attempt 8: Remove Bottom Buttons */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-clear-button,
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-today-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Attempt 9: Calendar Grid Enhancement */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-grid {
    padding: 16px !important;
    background: var(--date-picker-bg) !important;
    border-radius: 0 0 16px 16px !important;
}

/* Attempt 10: Month Navigation Styling */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-month-prev,
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-month-next {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: var(--date-picker-primary) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-month-prev:hover,
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-month-next:hover {
    background: var(--date-picker-primary) !important;
    color: var(--bs-white) !important;
    transform: scale(1.05) !important;
}

/* ========================================
   FIREFOX CALENDAR POPUP ENHANCEMENT ATTEMPTS
   ======================================== */

/* Firefox-specific calendar popup styling attempts */
@-moz-document url-prefix() {
    /* Attempt to style Firefox calendar popup */
    input[type="date"] {
        /* Enhanced accent color for better calendar appearance */
        accent-color: var(--date-picker-primary);

        /* Attempt to influence calendar popup through custom properties */
        --moz-calendar-header-background: var(--date-picker-primary);
        --moz-calendar-day-hover-background: rgba(var(--bs-primary-rgb), 0.1);
        --moz-calendar-day-selected-background: var(--date-picker-primary);
        --moz-calendar-day-border-radius: 50%;

        /* Enhanced filter effects for calendar area */
        filter: drop-shadow(0 4px 12px rgba(var(--bs-primary-rgb), 0.2));
    }

    /* Firefox calendar popup container attempts */
    input[type="date"]:focus {
        /* Enhanced visual effects when calendar is likely open */
        filter: drop-shadow(0 8px 24px rgba(var(--bs-primary-rgb), 0.3));
        transform: translateY(-1px);
    }
}

/* ========================================
   EDGE/CHROMIUM CALENDAR POPUP ATTEMPTS
   ======================================== */

/* Edge-specific calendar popup styling */
@supports (-ms-ime-align: auto) {
    input[type="date"] {
        accent-color: var(--date-picker-primary);

        /* Edge-specific custom properties */
        --ms-calendar-background: var(--date-picker-bg);
        --ms-calendar-border: var(--date-picker-primary);
        --ms-calendar-day-hover: rgba(var(--bs-primary-rgb), 0.1);
    }
}

/* Modern Edge/Chromium calendar enhancements */
@supports (accent-color: red) {
    input[type="date"] {
        accent-color: var(--date-picker-primary);
        color-scheme: light dark;

        /* Enhanced calendar theming */
        --calendar-primary: var(--date-picker-primary);
        --calendar-hover: rgba(var(--bs-primary-rgb), 0.1);
        --calendar-selected: var(--date-picker-primary);
    }
}

/* ========================================
   RTL SUPPORT FOR ADVANCED CALENDAR FEATURES
   ======================================== */

/* RTL Calendar Header Layout */
.rtl-layout
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-prev-button,
[dir="rtl"]
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-prev-button {
    left: auto !important;
    right: 16px !important;
}

.rtl-layout
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-next-button,
[dir="rtl"]
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-next-button {
    right: auto !important;
    left: 16px !important;
}

/* RTL Calendar Grid */
.rtl-layout
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-grid,
[dir="rtl"]
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-grid {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Date Cells */
.rtl-layout
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day,
[dir="rtl"]
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day {
    direction: rtl !important;
    text-align: center !important;
}

/* ========================================
   ALTERNATIVE CALENDAR POPUP APPROACHES
   ======================================== */

/* CSS Environment Variables Injection */
input[type="date"] {
    /* Attempt to inject environment variables for calendar styling */
    --env-calendar-primary: var(--date-picker-primary);
    --env-calendar-background: var(--date-picker-bg);
    --env-calendar-hover: rgba(var(--bs-primary-rgb), 0.1);
    --env-calendar-selected: var(--date-picker-primary);
    --env-calendar-border-radius: 12px;
}

/* CSS Subgrid for Calendar Layout (Experimental) */
@supports (display: subgrid) {
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-grid {
        display: subgrid !important;
        grid-template-columns: subgrid !important;
        gap: 4px !important;
    }
}

/* CSS Anchor Positioning for Calendar Popup */
@supports (anchor-name: --calendar) {
    input[type="date"] {
        anchor-name: --calendar-input;
    }

    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
        position: absolute;
        position-anchor: --calendar-input;
        top: anchor(bottom);
        left: anchor(left);
        right: anchor(right);
    }
}

/* CSS View Transitions for Calendar Animation */
@supports (view-transition-name: auto) {
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
        view-transition-name: calendar-popup;
    }

    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day {
        view-transition-name: calendar-day;
    }
}

/* ========================================
   MAXIMUM VISUAL ENHANCEMENT WORKAROUNDS
   ======================================== */

/* Enhanced Calendar Popup Visual Overlay */
.enhanced-date-container.calendar-active::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 320px;
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.02) 0%,
        rgba(var(--bs-info-rgb), 0.01) 100%
    );
    border: 2px solid rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(var(--bs-primary-rgb), 0.1),
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    z-index: 999;
    pointer-events: none;
    opacity: 1;
    animation: calendarPopupAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes calendarPopupAppear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Calendar Popup Backdrop Effect */
.enhanced-date-container.calendar-active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(3px);
    z-index: 998;
    pointer-events: none;
    opacity: 1;
    animation: backdropAppear 0.3s ease;
}

@keyframes backdropAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   ABSOLUTE LIMITS: EXPERIMENTAL SHADOW DOM TECHNIQUES
   ======================================== */

/* LEVEL 1: CSS Parts Specification (Future CSS) */
/* These selectors represent the CSS Parts specification for shadow DOM styling */
input[type="date"]::part(calendar-popup) {
    background: var(--date-picker-bg) !important;
    border: 2px solid var(--date-picker-primary) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px rgba(var(--bs-primary-rgb), 0.2),
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.1) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
}

input[type="date"]::part(calendar-header) {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-info) 50%,
        var(--bs-success) 100%
    ) !important;
    color: var(--bs-white) !important;
    padding: 20px !important;
    text-align: center !important;
    font-weight: 700 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

input[type="date"]::part(calendar-year) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--bs-white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    z-index: 15 !important;
}

input[type="date"]::part(calendar-nav-prev) {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10 !important;
}

input[type="date"]::part(calendar-nav-next) {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10 !important;
}

input[type="date"]::part(calendar-nav-prev):hover,
input[type="date"]::part(calendar-nav-next):hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

input[type="date"]::part(calendar-grid) {
    padding: 20px !important;
    background: var(--date-picker-bg) !important;
    border-radius: 0 0 20px 20px !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
}

input[type="date"]::part(calendar-day) {
    border-radius: 14px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    padding: 12px !important;
    font-weight: 600 !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
}

input[type="date"]::part(calendar-day):hover {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-info) 100%
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    transform: scale(1.15) rotate(2deg) !important;
    box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.4),
        0 0 0 3px rgba(var(--bs-primary-rgb), 0.2) !important;
    z-index: 10 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

input[type="date"]::part(calendar-day-selected) {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-success) 100%
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.3),
        0 12px 24px rgba(var(--bs-primary-rgb), 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
    position: relative !important;
    z-index: 15 !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
}

input[type="date"]::part(calendar-day-today) {
    border: 2px solid var(--date-picker-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    font-weight: 700 !important;
    position: relative !important;
}

input[type="date"]::part(calendar-footer) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

input[type="date"]::part(calendar-clear-button),
input[type="date"]::part(calendar-today-button) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
}

/* LEVEL 2: Advanced Webkit Shadow DOM Piercing */
/* These attempt to access deeper shadow DOM levels */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-popup {
    background: var(--date-picker-bg) !important;
    border: 3px solid var(--date-picker-primary) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(var(--bs-primary-rgb), 0.25),
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    transform-origin: top center !important;
    animation: calendarPopupEnhanced 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes calendarPopupEnhanced {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9) rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

/* Deep Shadow DOM Header Styling */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-header-container {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-info) 30%,
        var(--bs-success) 70%,
        var(--bs-warning) 100%
    ) !important;
    color: var(--bs-white) !important;
    padding: 24px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px 24px 0 0 !important;
    overflow: hidden !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-header-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 100%
    ) !important;
    pointer-events: none !important;
}

/* Year Display Ultra Enhancement */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-year-display {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--bs-white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.2) !important;
    z-index: 20 !important;
    letter-spacing: 1px !important;
    font-family: "Segoe UI", system-ui, sans-serif !important;
}

/* Ultra Navigation Buttons */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-nav-button-prev {
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-nav-button-next {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-nav-button-prev:hover,
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-nav-button-next:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-50%) scale(1.15) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
        0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}

/* Ultra Calendar Grid */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-grid-container {
    padding: 24px !important;
    background: var(--date-picker-bg) !important;
    border-radius: 0 0 24px 24px !important;
    position: relative !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-grid-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 24px !important;
    right: 24px !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--bs-primary-rgb), 0.2) 50%,
        transparent 100%
    ) !important;
}

/* Ultra Date Cells */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell {
    border-radius: 16px !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 2px !important;
    padding: 16px !important;
    font-weight: 600 !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-align: center !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.05) 0%,
        rgba(var(--bs-info-rgb), 0.02) 100%
    ) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: inherit !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell:hover {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-info) 50%,
        var(--bs-success) 100%
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    transform: scale(1.2) rotate(3deg) !important;
    box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), 0.5),
        0 0 0 4px rgba(var(--bs-primary-rgb), 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
    z-index: 20 !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell:hover::before {
    opacity: 1 !important;
}

/* Selected Date Ultra Enhancement */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell-selected {
    background: linear-gradient(
        135deg,
        var(--date-picker-primary) 0%,
        var(--bs-success) 50%,
        var(--bs-warning) 100%
    ) !important;
    color: var(--bs-white) !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), 0.3),
        0 16px 32px rgba(var(--bs-primary-rgb), 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(var(--bs-primary-rgb), 0.4) !important;
    transform: scale(1.15) !important;
    position: relative !important;
    z-index: 25 !important;
    border: 4px solid rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    animation: selectedDatePulse 2s ease-in-out infinite !important;
}

@keyframes selectedDatePulse {
    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), 0.3),
            0 16px 32px rgba(var(--bs-primary-rgb), 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            0 0 20px rgba(var(--bs-primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0.4),
            0 20px 40px rgba(var(--bs-primary-rgb), 0.7),
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            0 0 30px rgba(var(--bs-primary-rgb), 0.6);
    }
}

/* Ultra Footer Removal */
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-footer-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
}

input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-clear-btn,
input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-today-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* LEVEL 3: CSS Houdini and Custom Properties Injection */
/* These represent cutting-edge CSS techniques */
@property --calendar-primary-hue {
    syntax: "<number>";
    initial-value: 210;
    inherits: true;
}

@property --calendar-animation-duration {
    syntax: "<time>";
    initial-value: 0.3s;
    inherits: true;
}

@property --calendar-border-radius {
    syntax: "<length>";
    initial-value: 16px;
    inherits: true;
}

input[type="date"] {
    /* CSS Houdini custom properties for calendar styling */
    --calendar-primary-hue: 210;
    --calendar-animation-duration: 0.4s;
    --calendar-border-radius: 20px;
    --calendar-shadow-intensity: 0.25;
    --calendar-backdrop-blur: 25px;

    /* Attempt to inject these into shadow DOM */
    --webkit-calendar-primary: hsl(var(--calendar-primary-hue), 70%, 50%);
    --webkit-calendar-bg: var(--date-picker-bg);
    --webkit-calendar-text: var(--bs-body-color);
    --webkit-calendar-border: var(--calendar-border-radius);
    --webkit-calendar-shadow: rgba(
        var(--bs-primary-rgb),
        var(--calendar-shadow-intensity)
    );
}

/* CSS Environment Variables for Calendar (Experimental) */
input[type="date"] {
    /* Attempt to set environment variables that might be read by calendar */
    /* Note: These are experimental and likely won't work */
    --env-calendar-primary-color: var(--date-picker-primary);
    --env-calendar-background-color: var(--date-picker-bg);
    --env-calendar-text-color: var(--bs-body-color);
    --env-calendar-border-radius: var(--calendar-border-radius);
    --env-calendar-animation-duration: var(--calendar-animation-duration);
    --env-calendar-shadow-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* CSS Constructable Stylesheets Injection Attempt (Experimental) */
input[type="date"] {
    /* These custom properties might be read by constructable stylesheets */
    /* Note: This is experimental syntax and likely won't work */
    --constructable-calendar-styles: "calendar-popup { background: var(--date-picker-bg); border-radius: var(--calendar-border-radius); } calendar-day:hover { background: var(--date-picker-primary); border-radius: 50%; }";
}

/* LEVEL 4: Experimental CSS Specifications */
/* CSS Scope for Calendar Styling */
@scope (input[type="date"]) {
    :scope::-webkit-calendar-picker-indicator {
        /* Scoped calendar styling attempts */
        --scoped-calendar-primary: var(--date-picker-primary);
        --scoped-calendar-bg: var(--date-picker-bg);
    }
}

/* CSS Layers for Calendar Styling Priority */
@layer calendar-popup-overrides {
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
        /* Layer-based styling with highest priority */
        background: var(--date-picker-bg) !important;
        border: 3px solid var(--date-picker-primary) !important;
        border-radius: var(--calendar-border-radius) !important;
    }
}

/* CSS Nesting with Shadow DOM Targeting */
input[type="date"] {
    /* Nested shadow DOM targeting */
    &::-webkit-calendar-picker-indicator {
        &::-webkit-calendar-picker-container {
            background: var(--date-picker-bg) !important;

            &::-webkit-calendar-header {
                background: var(--date-picker-primary) !important;

                &::-webkit-calendar-year {
                    color: var(--bs-white) !important;
                    font-weight: 800 !important;
                }
            }

            &::-webkit-calendar-day {
                border-radius: var(--calendar-border-radius) !important;

                &:hover {
                    background: var(--date-picker-primary) !important;
                    border-radius: 50% !important;
                    transform: scale(1.2) !important;
                }

                &.selected {
                    background: var(--bs-success) !important;
                    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.3) !important;
                }
            }
        }
    }
}

/* CSS Container Queries for Calendar Responsiveness */
@container (min-width: 320px) {
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
        width: 320px !important;
        height: 380px !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell {
        padding: 16px !important;
        font-size: 14px !important;
    }
}

@container (min-width: 400px) {
    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container {
        width: 400px !important;
        height: 450px !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator::-webkit-calendar-picker-container::-webkit-calendar-day-cell {
        padding: 20px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   ENHANCED CLICKABLE AREA FOR DATE INPUTS
   ======================================== */

/* ========================================
   FLATPICKR DATE PICKER STYLING
   ======================================== */

/* Enhanced date input styling for Flatpickr */
input[type="date"],
.flatpickr-date-input {
    /* Ensure the entire input area is clickable */
    cursor: pointer !important;
    position: relative;

    /* Enhanced visual feedback for clickable area */
    transition: all 0.2s ease;

    /* Border radius styling for all date inputs */
    border-radius: 1px !important;

    /* Bootstrap form control styling */
    background-color: #fff;
    border: 1px solid #ced4da;
    padding: 0.375rem 2.5rem 0.375rem 0.75rem; /* Add right padding for icon */
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
}

/* RTL date input padding adjustment */
.rtl-layout .flatpickr-date-input,
[dir="rtl"] .flatpickr-date-input,
html[lang="ar"] .flatpickr-date-input,
body[lang="ar"] .flatpickr-date-input {
    padding: 0.375rem 0.75rem 0.375rem 2.5rem; /* Add left padding for icon in RTL */
}

/* Flatpickr input container */
.flatpickr-input-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Calendar icon styling */
.flatpickr-calendar-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    z-index: 10;
    pointer-events: auto;
}

.flatpickr-calendar-icon:hover {
    color: #495057;
}

/* RTL calendar icon positioning */
.flatpickr-calendar-icon-rtl {
    position: absolute;
    left: 0.75rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    z-index: 10;
    pointer-events: auto;
}

.flatpickr-calendar-icon-rtl:hover {
    color: #495057;
}

/* Placeholder text styling */
.flatpickr-date-input::placeholder {
    color: #6c757d;
    opacity: 0.7;
    font-style: italic;
}

.flatpickr-date-input:focus::placeholder {
    opacity: 0.5;
}

/* Enhanced focus state with icon */
.flatpickr-input-container
    .flatpickr-date-input:focus
    + .flatpickr-calendar-icon,
.flatpickr-input-container
    .flatpickr-date-input:focus
    + .flatpickr-calendar-icon-rtl {
    color: #80bdff;
}

/* Disabled state styling */
.flatpickr-date-input:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.flatpickr-date-input:disabled + .flatpickr-calendar-icon,
.flatpickr-date-input:disabled + .flatpickr-calendar-icon-rtl {
    color: #6c757d;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Flatpickr input focus state */
.flatpickr-date-input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Flatpickr calendar container styling */
.flatpickr-calendar.flatpickr-custom {
    background: #ffffff;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    z-index: 9999;
}

/* Flatpickr month navigation */
.flatpickr-calendar.flatpickr-custom .flatpickr-months {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    border-radius: 0.35rem 0.35rem 0 0;
    padding: 0.75rem 0;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-month {
    color: #5a5c69;
    font-weight: 600;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-current-month {
    font-size: 1rem;
    font-weight: 600;
    color: #5a5c69;
}

/* Flatpickr navigation arrows */
.flatpickr-calendar.flatpickr-custom .flatpickr-prev-month,
.flatpickr-calendar.flatpickr-custom .flatpickr-next-month {
    color: #858796;
    transition: color 0.15s ease-in-out;
    padding: 0.5rem;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-prev-month:hover,
.flatpickr-calendar.flatpickr-custom .flatpickr-next-month:hover {
    color: #5a5c69;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
}

/* Flatpickr weekdays */
.flatpickr-calendar.flatpickr-custom .flatpickr-weekdays {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-weekday {
    color: #858796;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.5rem 0;
}

/* Flatpickr days container */
.flatpickr-calendar.flatpickr-custom .flatpickr-days {
    background: #ffffff;
}

/* Flatpickr individual day cells */
.flatpickr-calendar.flatpickr-custom .flatpickr-day {
    color: #5a5c69;
    border: none;
    border-radius: 0.25rem;
    margin: 0.125rem;
    transition: all 0.15s ease-in-out;
    font-weight: 500;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-day:hover {
    background: #e3e6f0;
    color: #5a5c69;
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Today's date */
.flatpickr-calendar.flatpickr-custom .flatpickr-day.today {
    background: #4e73df;
    color: #ffffff;
    font-weight: 600;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-day.today:hover {
    background: #2e59d9;
    color: #ffffff;
}

/* Selected date */
.flatpickr-calendar.flatpickr-custom .flatpickr-day.selected {
    background: #1cc88a;
    color: #ffffff;
    font-weight: 600;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-day.selected:hover {
    background: #17a673;
    color: #ffffff;
}

/* Disabled/outside month dates */
.flatpickr-calendar.flatpickr-custom .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.flatpickr-custom .flatpickr-day.prevMonthDay,
.flatpickr-calendar.flatpickr-custom .flatpickr-day.nextMonthDay {
    color: #d1d3e2;
}

.flatpickr-calendar.flatpickr-custom .flatpickr-day.flatpickr-disabled:hover {
    background: transparent;
    color: #d1d3e2;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* ========================================
   FLATPICKR RTL SUPPORT
   ======================================== */

/* RTL Calendar Container */
.flatpickr-calendar.flatpickr-rtl {
    direction: rtl;
    text-align: right;
}

.flatpickr-calendar.flatpickr-rtl .flatpickr-months {
    direction: rtl;
}

.flatpickr-calendar.flatpickr-rtl .flatpickr-current-month {
    direction: rtl;
    text-align: center;
}

/* RTL Navigation Arrows - Enhanced with proper behavior */
.flatpickr-calendar.flatpickr-rtl .flatpickr-prev-month {
    right: 0;
    left: auto;
}

.flatpickr-calendar.flatpickr-rtl .flatpickr-next-month {
    left: 0;
    right: auto;
}

/* RTL Navigation Arrow Visual Indicators - Arabic Language Only */
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-prev-month.flatpickr-arabic-rtl::after {
    content: "▶"; /* Left arrow for decrease month in Arabic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: #858796;
    pointer-events: none;
}
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-next-month.flatpickr-arabic-rtl::after {
    content: "◀"; /* Right arrow for increase month in Arabic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: #858796;
    pointer-events: none;
}

/* Hide default arrow content in Arabic RTL mode */
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-prev-month.flatpickr-arabic-rtl
    svg,
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-next-month.flatpickr-arabic-rtl
    svg {
    display: none;
}

/* Arabic RTL Arrow hover states */
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-prev-month.flatpickr-arabic-rtl:hover::after,
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-next-month.flatpickr-arabic-rtl:hover::after {
    color: #5a5c69;
}

/* RTL Weekdays */
.flatpickr-calendar.flatpickr-rtl .flatpickr-weekdays {
    direction: rtl;
}

.flatpickr-calendar.flatpickr-rtl .flatpickr-weekday {
    direction: rtl;
    text-align: center;
}

/* RTL Days Grid */
.flatpickr-calendar.flatpickr-rtl .flatpickr-days {
    direction: rtl;
}

.flatpickr-calendar.flatpickr-rtl .flatpickr-day {
    direction: rtl;
    text-align: center;
}

/* RTL Date Input Styling */
.rtl-layout .flatpickr-date-input,
[dir="rtl"] .flatpickr-date-input,
html[lang="ar"] .flatpickr-date-input,
body[lang="ar"] .flatpickr-date-input {
    direction: rtl;
    text-align: right;
    font-family: "Segoe UI", "Tahoma", "Arial", sans-serif;
}

/* Arabic Year Navigation Positioning */
.flatpickr-calendar.flatpickr-rtl
    .flatpickr-current-month.flatpickr-arabic-year-nav {
    direction: rtl;
}

.flatpickr-calendar.flatpickr-rtl
    .flatpickr-current-month.flatpickr-arabic-year-nav
    .flatpickr-monthDropdown-months {
    order: 2; /* Month dropdown comes after year navigation */
}

.flatpickr-calendar.flatpickr-rtl
    .flatpickr-current-month.flatpickr-arabic-year-nav
    .cur-year {
    order: 1; /* Year input comes before month dropdown */
    margin-right: 1rem; /* Add spacing between year and month */
    margin-left: 0;
}

/* ========================================
   FLATPICKR MOBILE OPTIMIZATIONS
   ======================================== */

/* Mobile Calendar Styling */
@media (max-width: 768px) {
    .flatpickr-calendar.flatpickr-custom {
        font-size: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-day {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 1rem;
        margin: 0.1rem;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-weekday {
        font-size: 0.875rem;
        padding: 0.75rem 0;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-current-month {
        font-size: 1.125rem;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-prev-month,
    .flatpickr-calendar.flatpickr-custom .flatpickr-next-month {
        padding: 0.75rem;
    }

    /* Mobile date input */
    .flatpickr-date-input {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.5rem 3rem 0.5rem 0.75rem; /* Increased right padding for larger icon */
    }

    /* RTL mobile date input */
    .rtl-layout .flatpickr-date-input,
    [dir="rtl"] .flatpickr-date-input,
    html[lang="ar"] .flatpickr-date-input,
    body[lang="ar"] .flatpickr-date-input {
        padding: 0.5rem 0.75rem 0.5rem 3rem; /* Increased left padding for larger icon in RTL */
    }

    /* Mobile calendar icon */
    .flatpickr-calendar-icon {
        font-size: 1.25rem;
        right: 1rem;
    }

    .flatpickr-calendar-icon-rtl {
        font-size: 1.25rem;
        left: 1rem;
    }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .flatpickr-calendar.flatpickr-custom .flatpickr-day {
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
    }

    .flatpickr-date-input {
        min-height: 44px;
    }
}

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

/* Focus indicators */
.flatpickr-calendar.flatpickr-custom .flatpickr-day:focus {
    outline: 2px solid #4e73df;
    outline-offset: 2px;
    background: #e3e6f0;
}

.flatpickr-date-input:focus-visible {
    outline: 3px solid #4e73df;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25),
        0 0 0 5px rgba(78, 115, 223, 0.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .flatpickr-calendar.flatpickr-custom {
        border: 2px solid #000;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-day {
        border: 1px solid #000;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-day.today {
        background: #000;
        color: #fff;
        font-weight: bold;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-day.selected {
        background: #000;
        color: #fff;
        font-weight: bold;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .flatpickr-calendar.flatpickr-custom .flatpickr-day {
        transition: none;
    }

    .flatpickr-calendar.flatpickr-custom .flatpickr-day:hover {
        transform: none;
    }

    .flatpickr-date-input {
        transition: none;
    }
}

/* Enhanced hover state for entire input */
input[type="date"]:hover {
    /* Visual feedback that entire area is clickable */
    background-color: rgba(var(--bs-primary-rgb), 0.02) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
    box-shadow: 0 0 0 0.1rem rgba(var(--bs-primary-rgb), 0.1) !important;
    transform: translateY(-1px);
}

/* Enhanced focus state */
input[type="date"]:focus {
    /* Clear visual indication that input is focused and clickable */
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    outline: none !important;
}

/* Expand calendar icon clickable area */
input[type="date"]::-webkit-calendar-picker-indicator {
    /* Make calendar icon cover more area */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
}

/* Show visual calendar icon on the right side */
input[type="date"]::after {
    content: "📅" !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: var(--bs-secondary) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: all 0.2s ease !important;
}

/* Enhanced calendar icon on hover */
input[type="date"]:hover::after {
    color: var(--bs-primary) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Enhanced calendar icon on focus */
input[type="date"]:focus::after {
    color: var(--bs-primary) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* Firefox-specific enhancements */
@-moz-document url-prefix() {
    input[type="date"] {
        /* Firefox already makes entire input clickable, enhance visual feedback */
        cursor: pointer !important;
        position: relative !important;
    }

    input[type="date"]:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.02) !important;
        border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
        transform: translateY(-1px) !important;
    }

    input[type="date"]:focus {
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    }
}

/* Safari-specific enhancements */
@supports (-webkit-appearance: none) {
    input[type="date"] {
        /* Ensure Safari treats entire input as clickable */
        -webkit-appearance: none !important;
        appearance: none !important;
        cursor: pointer !important;
        position: relative !important;
        background: var(--bs-white) !important;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius) !important;
        padding: 0.375rem 2.5rem 0.375rem 0.75rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: var(--bs-body-color) !important;
    }

    /* Custom calendar icon for Safari */
    input[type="date"]::after {
        content: "📅" !important;
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: var(--bs-secondary) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
}

/* Edge-specific enhancements */
@supports (-ms-ime-align: auto) {
    input[type="date"] {
        /* Edge enhancements for clickable area */
        cursor: pointer !important;
        position: relative !important;
    }

    input[type="date"]::-ms-clear {
        /* Hide default clear button */
        display: none !important;
    }

    input[type="date"]::-ms-expand {
        /* Expand the clickable area */
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
    }
}

/* ========================================
   RTL SUPPORT FOR ENHANCED CLICKABLE AREA
   ======================================== */

/* RTL layout adjustments */
.rtl-layout input[type="date"],
[dir="rtl"] input[type="date"] {
    /* RTL-specific positioning */
    direction: rtl !important;
    text-align: right !important;
    padding: 0.375rem 0.75rem 0.375rem 2.5rem !important;
}

/* RTL calendar icon positioning */
.rtl-layout input[type="date"]::after,
[dir="rtl"] input[type="date"]::after {
    right: auto !important;
    left: 12px !important;
}

/* RTL calendar picker indicator */
.rtl-layout input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator {
    right: auto !important;
    left: 0 !important;
}

/* RTL Safari-specific adjustments */
@supports (-webkit-appearance: none) {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"] {
        padding: 0.375rem 0.75rem 0.375rem 2.5rem !important;
    }

    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after {
        right: auto !important;
        left: 12px !important;
    }
}

/* RTL Edge-specific adjustments */
@supports (-ms-ime-align: auto) {
    .rtl-layout input[type="date"]::-ms-expand,
    [dir="rtl"] input[type="date"]::-ms-expand {
        right: auto !important;
        left: 0 !important;
    }
}

/* ========================================
   MOBILE OPTIMIZATIONS FOR CLICKABLE AREA
   ======================================== */

/* Mobile touch optimizations */
@media (max-width: 768px) {
    input[type="date"] {
        /* Larger touch targets for mobile */
        min-height: 48px !important;
        padding: 0.5rem 3rem 0.5rem 1rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 8px !important;
    }

    /* Larger calendar icon for mobile */
    input[type="date"]::after {
        font-size: 20px !important;
        right: 16px !important;
    }

    /* Enhanced touch feedback */
    input[type="date"]:hover,
    input[type="date"]:focus,
    input[type="date"]:active {
        transform: none !important; /* Remove transform on mobile for better performance */
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    }

    /* Mobile RTL adjustments */
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"] {
        padding: 0.5rem 1rem 0.5rem 3rem !important;
    }

    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after {
        right: auto !important;
        left: 16px !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    input[type="date"] {
        /* Optimized for tablet touch */
        min-height: 44px !important;
        padding: 0.5rem 2.75rem 0.5rem 0.875rem !important;
    }

    input[type="date"]::after {
        font-size: 18px !important;
        right: 14px !important;
    }

    /* Tablet RTL adjustments */
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"] {
        padding: 0.5rem 0.875rem 0.5rem 2.75rem !important;
    }

    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after {
        right: auto !important;
        left: 14px !important;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    input[type="date"]::after {
        /* Crisp calendar icon on high DPI displays */
        font-size: 16px !important;
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

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

/* Enhanced focus indicators for accessibility */
input[type="date"]:focus-visible {
    /* High contrast focus indicator */
    outline: 3px solid var(--bs-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25),
        0 0 0 5px rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    input[type="date"] {
        border: 2px solid var(--bs-dark) !important;
    }

    input[type="date"]:hover {
        border: 2px solid var(--bs-primary) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    }

    input[type="date"]:focus {
        border: 3px solid var(--bs-primary) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    }

    input[type="date"]::after {
        color: var(--bs-dark) !important;
        font-weight: bold !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    input[type="date"],
    input[type="date"]::after {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    input[type="date"]:hover,
    input[type="date"]:focus {
        transform: none !important;
    }

    input[type="date"]:hover::after,
    input[type="date"]:focus::after {
        transform: translateY(-50%) !important;
    }
}

/* ========================================
   ARABIC LANGUAGE LOCALIZATION FOR DATE PICKER
   ======================================== */

/* Arabic language support for date picker widget */
.rtl-layout input[type="date"],
[dir="rtl"] input[type="date"],
html[lang="ar"] input[type="date"],
body[lang="ar"] input[type="date"] {
    /* Arabic language and RTL layout */
    direction: rtl !important;
    text-align: right !important;
    font-family: "Segoe UI", "Tahoma", "Arial", sans-serif !important;

    /* Enhanced border radius for Arabic layout */
    border-radius: 1px !important;

    /* Arabic-specific padding adjustments */
    padding: 0.375rem 0.75rem 0.375rem 2.5rem !important;
}

/* Arabic calendar widget localization attempts */
.rtl-layout input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
html[lang="ar"] input[type="date"]::-webkit-calendar-picker-indicator,
body[lang="ar"] input[type="date"]::-webkit-calendar-picker-indicator {
    /* Arabic calendar widget positioning */
    right: auto !important;
    left: 0 !important;

    /* Attempt to set Arabic locale for calendar */
    --webkit-locale: "ar" !important;
    --webkit-calendar-locale: "ar-SA" !important;
    --webkit-calendar-direction: rtl !important;
}

/* Firefox Arabic language support */
@-moz-document url-prefix() {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[lang="ar"] input[type="date"],
    body[lang="ar"] input[type="date"] {
        /* Firefox Arabic locale attempts */
        direction: rtl !important;
        text-align: right !important;
        font-family: "Segoe UI", "Tahoma", "Arial", sans-serif !important;
        border-radius: 1px !important;

        /* Firefox-specific Arabic locale */
        -moz-locale: "ar-SA" !important;
        --moz-calendar-locale: "ar" !important;
    }
}

/* Safari Arabic language support */
@supports (-webkit-appearance: none) {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[lang="ar"] input[type="date"],
    body[lang="ar"] input[type="date"] {
        /* Safari Arabic styling */
        -webkit-appearance: none !important;
        appearance: none !important;
        direction: rtl !important;
        text-align: right !important;
        font-family: "Segoe UI", "Tahoma", "Arial", sans-serif !important;
        border-radius: 1px !important;
        padding: 0.375rem 0.75rem 0.375rem 2.5rem !important;

        /* Safari Arabic locale attempts */
        -webkit-locale: "ar-SA" !important;
        --webkit-calendar-locale: "ar" !important;
    }

    /* Arabic calendar icon for Safari */
    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after,
    html[lang="ar"] input[type="date"]::after,
    body[lang="ar"] input[type="date"]::after {
        content: "📅" !important;
        position: absolute !important;
        top: 50% !important;
        left: 12px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: var(--bs-secondary) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
}

/* Edge Arabic language support */
@supports (-ms-ime-align: auto) {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[lang="ar"] input[type="date"],
    body[lang="ar"] input[type="date"] {
        /* Edge Arabic styling */
        direction: rtl !important;
        text-align: right !important;
        font-family: "Segoe UI", "Tahoma", "Arial", sans-serif !important;
        border-radius: 1px !important;

        /* Edge Arabic locale */
        -ms-locale: "ar-SA" !important;
        --ms-calendar-locale: "ar" !important;
    }

    .rtl-layout input[type="date"]::-ms-expand,
    [dir="rtl"] input[type="date"]::-ms-expand,
    html[lang="ar"] input[type="date"]::-ms-expand,
    body[lang="ar"] input[type="date"]::-ms-expand {
        /* Arabic expand button positioning */
        right: auto !important;
        left: 0 !important;
    }
}

/* Mobile Arabic optimizations */
@media (max-width: 768px) {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[lang="ar"] input[type="date"],
    body[lang="ar"] input[type="date"] {
        /* Mobile Arabic styling */
        min-height: 48px !important;
        padding: 0.5rem 1rem 0.5rem 3rem !important;
        font-size: 16px !important;
        border-radius: 1px !important;
        direction: rtl !important;
        text-align: right !important;
        font-family: "Segoe UI", "Tahoma", "Arial", sans-serif !important;
    }

    /* Mobile Arabic calendar icon */
    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after,
    html[lang="ar"] input[type="date"]::after,
    body[lang="ar"] input[type="date"]::after {
        font-size: 20px !important;
        left: 16px !important;
        right: auto !important;
    }
}

/* Tablet Arabic optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .rtl-layout input[type="date"],
    [dir="rtl"] input[type="date"],
    html[lang="ar"] input[type="date"],
    body[lang="ar"] input[type="date"] {
        /* Tablet Arabic styling */
        min-height: 44px !important;
        padding: 0.5rem 0.875rem 0.5rem 2.75rem !important;
        border-radius: 1px !important;
        direction: rtl !important;
        text-align: right !important;
    }

    /* Tablet Arabic calendar icon */
    .rtl-layout input[type="date"]::after,
    [dir="rtl"] input[type="date"]::after,
    html[lang="ar"] input[type="date"]::after,
    body[lang="ar"] input[type="date"]::after {
        font-size: 18px !important;
        left: 14px !important;
        right: auto !important;
    }
}