/*--  Overrides  --*/

/* == Components == */

/* Button styles are handled exclusively by DaisyUI theme in daisyui.css */
/* All button styling comes from the custom theme defined in daisyui.css */



.turbo-progress-bar {
    top: 4;
    left: 4;
    right: 4;
    height: 6px;
    @apply bg-primary rounded-lg;
}

/* Card styles are handled exclusively by DaisyUI theme in daisyui.css */
/* All card styling (background, borders, layout) is defined in daisyui.css */
/* This allows complete theme customization by changing only the DaisyUI theme */

.fieldset {
    .fieldset-legend {
        @apply text-base-content text-sm font-bold;
    }

    .input {
        input {
            padding-left: 0 !important;
            outline: none !important;
        }
    }
}

.table {
    thead {
        @apply bg-base-200 text-sm text-base-content;

        th {
            @apply font-medium;
        }
    }

    /* Customize zebra striping color - use DaisyUI theme colors */
    &.table-zebra {
        tbody tr:nth-child(even) {
            background-color: var(--color-base-200);
        }

        tbody tr:nth-child(odd) {
            background-color: var(--color-base-100);
        }
    }
}

/* Responsive Table: Single table structure that adapts via CSS */
/* Mobile: Ensure table cells display as blocks with card-like appearance */
@media (max-width: 767px) {
    /* Card background is white on mobile when it contains responsive table */
    .card:has(.responsive-table-wrapper) {
        background-color: rgb(var(--b1)) !important;
    }
    
    /* Wrapper div is white (card-like) */
    .responsive-table-wrapper {
        background-color: rgb(var(--b1)) !important;
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Table has no background - transparent so page background shows between rows */
    .responsive-table {
        background-color: transparent !important;
        border-spacing: 0 !important;
        margin: 0 !important;
    }
    
    .responsive-table-tbody {
        background-color: transparent !important;
        display: block !important;
    }
    
    /* Each row is a white card on mobile */
    .responsive-table-row {
        display: block !important;
        margin-bottom: 0.75rem !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
        width: 100% !important;
    }
    
    .responsive-table-row:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Cells are transparent so row background shows */
    .responsive-table-row td {
        display: block !important;
        padding: 0.75rem 1rem !important;
        border: none !important;
        text-align: left !important;
        width: 100% !important;
        background-color: transparent !important;
    }
    
    .responsive-table-row td:first-child {
        padding-top: 1rem !important;
    }
    
    .responsive-table-row td:last-child {
        padding-bottom: 1rem !important;
    }
    
    /* Make all labels bigger in mobile view */
    .responsive-table-row td span:first-child {
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* First cell label (primary title like "Lezione") - biggest */
    .responsive-table-row td:first-child span:first-child {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Fix action buttons alignment - ensure icons and labels are properly aligned */
    .responsive-table-row td .inline-flex {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    /* Button container alignment */
    .responsive-table-row td .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.375rem !important;
        vertical-align: middle !important;
    }
    
    /* Icon alignment */
    .responsive-table-row td .btn .iconify {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Label text alignment */
    .responsive-table-row td .btn span:not(.iconify) {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Prevent booking count from breaking on mobile */
    .responsive-table-row td > div {
        white-space: normal !important;
    }
    
    .responsive-table-row td .whitespace-nowrap {
        white-space: nowrap !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    .responsive-table-row td .whitespace-nowrap,
    .responsive-table-row td .whitespace-nowrap > *,
    .responsive-table-row td .whitespace-nowrap span {
        white-space: nowrap !important;
        display: inline !important;
    }
    
    /* Ensure tooltip spans don't break */
    .responsive-table-row td .whitespace-nowrap .tooltip {
        white-space: nowrap !important;
        display: inline !important;
    }
}

/* Desktop: Ensure table cells display normally and hover works */
@media (min-width: 768px) {
    .responsive-table {
        border-spacing: 0 !important;
    }
    
    .responsive-table-tbody {
        display: table-row-group !important;
        background-color: transparent !important;
    }
    
    /* Reset mobile styles on desktop */
    .responsive-table-row {
        display: table-row !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    
    /* Set odd row color - light gray (base-200 with 40% opacity) */
    .responsive-table-tbody tr.responsive-table-row:nth-child(odd) {
        background-color: oklch(94.1% 0.007 234.400 / 0.4) !important;
    }
    
    /* Set even row color - white (base-100) */
    .responsive-table-tbody tr.responsive-table-row:nth-child(even) {
        background-color: oklch(97.0% 0.003 260.900) !important;
    }
    
    .responsive-table-row td {
        display: table-cell !important;
        background-color: transparent !important;
    }
    
    /* Hover effect - darker gray (base-300), must override odd/even */
    .responsive-table-tbody tr.responsive-table-row:hover {
        background-color: oklch(92% 0.013 255.508) !important;
    }
}

.menu {
    .menu-title {
        @apply text-base-content font-medium;
    }
}

/* == Tooltip Customization == */
.tooltip {
    --tooltip-text-color: var(--tooltip-content, var(--color-primary-content));
}

.tooltip::before {
    background-color: var(--tooltip-color) !important;
    color: var(--tooltip-text-color) !important;
}

.tooltip::after {
    border-top-color: var(--tooltip-color) !important;
    border-bottom-color: var(--tooltip-color) !important;
    border-left-color: var(--tooltip-color) !important;
    border-right-color: var(--tooltip-color) !important;
}

.timeline:not(.timeline-vertical)>li>hr {
    height: 2px;
}

.timeline.timeline-vertical>li>hr {
    width: 2px;
}

/* == Forms == */
.cally {
    ::part(button) {
        @apply font-sans;
    }
}

/* == Forms == */

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}


.fieldset {
    .fieldset-legend {
        @apply text-base-content text-sm font-bold;
    }
}


.checkbox,
.radio,
.range,
.toggle {
    &:disabled {
        @apply opacity-35;
    }
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
}

/* Staggered button entrance animation */
@keyframes buttonFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Safe area support for devices with notches */
.h-safe-area-inset-bottom {
    height: env(safe-area-inset-bottom, 0px);
}

/* Sidebar Toggle Button Icons */
.sidebar-toggle-btn {

    /* Default state: show menu icon, hide close icon */
    .sidebar-menu-icon {
        @apply block;
    }

    .sidebar-close-icon {
        @apply hidden;
    }
}

/* Mobile viewport with sidebar open (not collapsed) */
@media (max-width: 1023px) {
    .sidebar-menu:not(.collapsed) {
        .sidebar-toggle-btn {
            .sidebar-menu-icon {
                @apply hidden;
            }

            .sidebar-close-icon {
                @apply block;
            }
        }
    }
}

/* Desktop viewport: always show menu icon */
@media (min-width: 1024px) {
    .sidebar-toggle-btn {
        .sidebar-menu-icon {
            @apply block;
        }

        .sidebar-close-icon {
            @apply hidden;
        }
    }
}

.password-input-container {
    @apply w-full;
    min-width: 0;
}

.password-digit-input {
    min-width: 0;
    flex-shrink: 1;
}

@media (max-width: 767px) {
    .password-input-container {
        gap: 0.5rem;
    }

    .password-digit-input {
        aspect-ratio: 1;
        min-width: 0;
        min-height: 0;
        flex: 1 1 0%;
        max-width: 100%;
    }
}

.pagination-container {
    @apply flex items-center justify-end space-x-4 px-6 pb-6;
}

@media (max-width: 767px) {
    .pagination-container {
        flex-direction: column;
        align-items: stretch;
        @apply space-y-4 space-x-0 px-4 pb-4;
    }

    .pagination-container > span {
        @apply text-sm text-center;
        order: 2;
        margin-top: 0.5rem;
    }

    .pagination-container .join {
        @apply justify-center;
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
    }

    .pagination-container .join .btn {
        @apply min-w-0;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.875rem;
        line-height: 2rem;
        height: 2rem;
    }
}