/* ==========================================
   ISLA TAILWIND LAYOUT MASTER STYLESHEET
   ========================================== */

/* 1. Flowbite Datepicker Overrides */
.datepicker-dropdown {
    background-color: var(--color-base-100) !important;
    border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    z-index: 10000 !important;
}
.datepicker-picker {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
}
.datepicker-picker .datepicker-grid .datepicker-cell.selected,
.datepicker-picker .datepicker-grid .datepicker-cell.selected:hover,
.datepicker-cell.selected,
.datepicker-cell.selected:hover,
.datepicker-cell.selected:focus {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
.datepicker-cell:hover {
    background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent) !important;
    color: var(--color-base-content) !important;
    border-radius: 8px !important;
}
.datepicker-cell.today:not(.selected) {
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    border-radius: 8px !important;
}
.datepicker-controls .btn {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-base-content) !important;
    border-radius: 8px !important;
}
.datepicker-controls .btn:hover {
    background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent) !important;
}
.datepicker-header .datepicker-title {
    color: var(--color-base-content) !important;
    font-weight: 600 !important;
}
.datepicker-grid .datepicker-cell {
    font-weight: 500 !important;
    color: var(--color-base-content) !important;
}
.datepicker-view .datepicker-cell {
    color: var(--color-base-content) !important;
}
.datepicker-cell.out-of-range {
    color: color-mix(in oklch, var(--color-base-content) 30%, transparent) !important;
}

/* 2. Custom Scrollbar for Horizontal Table Wrappers */
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    border-radius: 10px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--color-base-content) 25%, transparent);
}

/* 3. Global HTML Input Elements & Swal Overrides */
select,
.select,
select.select {
    cursor: pointer !important;
}
.swal2-actions {
    justify-content: center !important;
    gap: 0.5rem !important;
}

/* 4. Menu XS List Links Typography */
.menu-xs li a {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* 5. Premium Mesh Background & Dotted Grid Layouts */
body.op-mesh-bg {
    background-color: #f5f7fa !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(244, 63, 94, 0.14) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.14) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.09) 0px, transparent 50%) !important;
}
[data-theme="isla_dark"] body.op-mesh-bg {
    background-color: #0b0f19 !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(244, 63, 94, 0.22) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.22) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.14) 0px, transparent 50%) !important;
}

body.dotted-grid-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(color-mix(in oklch, var(--color-base-content) 4%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}

/* 6. Premium Glassmorphism Card Style */
.glass-card-premium {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
[data-theme="isla_dark"] .glass-card-premium {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 7. Lenis Scroll Compatibility Rules */
html.lenis, html.lenis body {
    height: auto;
}
.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis-stopped {
    overflow: hidden;
}
.lenis-scrolling iframe {
    pointer-events: none;
}

/* 8. Global Window-based Smooth Scrollbars (used by op_top_tailwind) */
html.lenis-window-scroll {
    scroll-behavior: smooth;
}
html.lenis-window-scroll ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.lenis-window-scroll ::-webkit-scrollbar-track {
    background: transparent;
}
html.lenis-window-scroll ::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.lenis-window-scroll ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--color-base-content) 25%, transparent);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.lenis-window-scroll * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--color-base-content) 15%, transparent) transparent;
}

/* 9. Container-bound Smooth Scrollbars (used by app_tailwind main-content-wrapper) */
#main-content-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#main-content-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
#main-content-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#main-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--color-base-content) 25%, transparent);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* 10. DataTables DaisyUI Pagination Overrides (app_tailwind specific) */
.dataTables_wrapper {
    width: 100% !important;
}
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    gap: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--color-base-content) !important;
    cursor: pointer;
    transition: all 0.2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent) !important;
    color: var(--color-base-content) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

/* 11. Force Uniform Table Headers (th) Styling */
table.dataTable thead th,
table.table thead th,
.table thead th,
th {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 11px !important;
}
table.dataTable thead th.text-center,
table.table thead th.text-center,
th.text-center {
    text-align: center !important;
}
table.dataTable thead th.text-right,
table.table thead th.text-right,
th.text-right {
    text-align: right !important;
}
table.dataTable thead th.text-left,
table.table thead th.text-left,
th.text-left {
    text-align: left !important;
}

/* 12. Modal Backdrop Blur Overrides (Only active when open attribute is present) */
dialog.modal[open] {
    backdrop-filter: blur(4px) !important;
}