/* Import Google Fonts & Icons first */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');
@import url('https://unicons.iconscout.com/release/v4.0.8/css/line.css');

@import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* PowerGrid dist/tailwind.css hardcodes light colors — restore dark variants */
.dark .page-link {
    --tw-bg-opacity: 1;
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
    border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
    color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark .page-item.active .page-link {
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .page-item.disabled .page-link {
    border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
    color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark .pg-btn-white {
    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
    border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
    color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark .pg-btn-white:hover {
    background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
    box-shadow: none;
}

.dark table thead {
    color: #a1a1aa;
}


@layer base {
    /* Global tiny scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-zinc-300 dark:bg-zinc-700 rounded-full;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-zinc-400 dark:bg-zinc-600;
    }
}

/* =========================================================
   PowerGrid table surface (global)
   ========================================================= */
#power-grid-table-base {
    display: block;
    width: 100%;
    position: relative;
}

/* PowerGrid's theme wraps the table in an .overflow-auto scroller */
#power-grid-table-base > .overflow-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Sticky fixed columns (PowerGrid responsive fixedColumns) */
#power-grid-table-base table th[fixed],
#power-grid-table-base table td[fixed] {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #ffffff;
}

/* Trailing fixed column (Actions) pins to the right edge */
#power-grid-table-base table th[fixed]:last-child,
#power-grid-table-base table td[fixed]:last-child {
    left: auto;
    right: 0;
}

#power-grid-table-base table tr:hover th[fixed],
#power-grid-table-base table tr:hover td[fixed] {
    background-color: #fafafa;
}

.dark #power-grid-table-base table th[fixed],
.dark #power-grid-table-base table td[fixed] {
    background-color: #09090b;
}

.dark #power-grid-table-base table tr:hover th[fixed],
.dark #power-grid-table-base table tr:hover td[fixed] {
    background-color: #18181b;
}

/* Scroll affordance: right-edge shadow when columns overflow */
#power-grid-table-base > .overflow-auto::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to left, rgb(0 0 0 / 0.06), transparent);
    opacity: 0;
    transition: opacity 150ms ease;
}

.dark #power-grid-table-base > .overflow-auto::after {
    background: linear-gradient(to left, rgb(255 255 255 / 0.08), transparent);
}

#power-grid-table-base > .overflow-auto[data-overflow="true"]::after {
    opacity: 1;
}