/* CSS Variables for sticky elements */
:root {
    --sticky-filters-height: 3.5rem;
    --sticky-badges-height: 2.3rem;
    --sticky-date-header-height: 2.8rem;
}


/* Event/Activity description truncation - line-clamp set dynamically via Alpine.js */
.event-description-truncated,
.activity-description-truncated {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Remove all Bootstrap shadow/glow utility effects on event detail page */
.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

/* Retro Icon Badge - Circular Gauge */
.retro-icon-badge {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    box-shadow: none;
}

[data-bs-theme="dark"] .retro-icon-badge {
    box-shadow: none;
}

.slot-availability-toggle {
    margin-top: 0;
}

.slot-availability-toggle:checked {
    background-color: var(--bs-success) !important;
    border-color: var(--border-color) !important;
    box-shadow: none;
}

[data-bs-theme="dark"] .slot-availability-toggle:checked {
    box-shadow: none;
}

.slot-availability-toggle:not(:checked) {
    background-color: var(--bs-danger) !important;
    border-color: var(--border-color) !important;
    box-shadow: none;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] .slot-availability-toggle:not(:checked) {
    box-shadow: none;
}

.slot-availability-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.exclusion-filter-toggle:checked {
    background-color: var(--bs-success) !important;
    border-color: var(--border-color) !important;
}

.exclusion-filter-toggle:not(:checked) {
    background-color: var(--bs-danger) !important;
    border-color: var(--border-color) !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* First card in each slot (activity or empty state) should have square top borders to connect with slot header */
.slot-section .activity-card:first-of-type,
.slot-section .card:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

/* Activity cards */
.activity-card {
    transition: all 0.2s;
    border-width: 2px;
    margin-top: -2px; /* Overlap borders to avoid double border */
}

.activity-card:hover {
    background-color: var(--bg-card-hover);
    /* transform: translateY(-2px); */ /* NEVER RE-ENABLE */
    box-shadow: none;
    position: relative;
    z-index: 1; /* Ensure hover card appears above others */
}

[data-bs-theme="dark"] .activity-card:hover {
    box-shadow: none;
}

.status-joined {
    background-color: var(--status-joined-bg);
    border-color: var(--bs-success);
}

.status-full {
    opacity: 0.8;
    filter: grayscale(0.5);
}

.activity-unavailable {
    opacity: 0.8;
    filter: grayscale(0.5);
}

/* Badges and buttons inside activity cards should not show pointer cursor */
.activity-card .badge,
.activity-card .btn {
    cursor: default;
}

/* Sticky Filters & Search bar */
.sticky-filters-bar {
    position: sticky;
    top: 0;
    height: var(--sticky-filters-height);
    z-index: 100;
    /* background-color: var(--bg-body); */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Sticky Badges bar - positioned below the filters bar */
.sticky-badges-bar {
    position: sticky;
    top: var(--sticky-filters-height); /* Below the sticky filters bar */
    /* Remove fixed height - let content determine height naturally */
    /* height: var(--sticky-badges-height); */
    height: var(--sticky-badges-height) !important;
    z-index: 99;
    /* background-color: var(--bg-body); */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Fixes jittering of badge height */
.sticky-badges-bar .badge {
    padding-top: round(0.35rem, 1px);
    padding-bottom: round(0.35rem, 1px);
}

/* Sticky date header wrapper - default position (no badges bar) */
.sticky-date-header-wrapper {
    position: sticky;
    top: var(--sticky-filters-height); /* Just below the sticky filters bar */
    z-index: 90;
}

/* Background rectangle that extends 1px above sticky date header */
.sticky-date-header-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 10px;
    z-index: -1;
}

/* When badges bar is present, push date header wrapper down */
#activities:has(.sticky-badges-bar) .sticky-date-header-wrapper {
    top: calc(var(--sticky-filters-height) + var(--sticky-badges-height)); /* Below filters bar + badges bar */
}

/* Sticky date headers - styling only, positioning moved to wrapper */
.date-header.sticky-date-header {
    height: var(--sticky-date-header-height);
    /* background-color: var(--bg-body); */
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
}

/* Retro Slot Header - Console Panel */
.slot-header {
    background-color: var(--bg-slot-header);
    border: 2px solid var(--border-color);
    /* border-bottom: none; /* Remove bottom border to connect with first card */
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    color: var(--text-primary);
    /* box-sizing: border-box; */
}

/* Add bottom border back if it's the last element (no cards follow) */
.sticky-slot-header-wrapper:last-child .slot-header {
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px;
}

[data-bs-theme="dark"] .slot-header {
    box-shadow: none;
}

[data-bs-theme="light"] .slot-header {
    color: black;
}

/* Sticky slot header wrapper - default position (no badges bar) */
.sticky-slot-header-wrapper {
    position: sticky;
    top: calc(var(--sticky-filters-height) + var(--sticky-date-header-height)); /* Below filters bar + date header */
    z-index: 80;
}

/* Background rectangle that extends 1px above sticky slot header */
.sticky-slot-header-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 10px;
    background-color: var(--bg-body);
    z-index: -1;
}

/* When badges bar is present, push slot header down */
#activities:has(.sticky-badges-bar) .sticky-slot-header-wrapper {
    /* Below filters bar + badges bar + date header
       Sometimes it's a pixel off, that's why I subtract half a pixel. Has to do with text rendering? Who knows */
    top: calc(var(--sticky-filters-height) + var(--sticky-badges-height) + var(--sticky-date-header-height));
}

/* Schedule tab: Date header rows should not change background on hover */
.table-hover .schedule-date-row:hover,
.table-hover .schedule-date-row:hover > td {
    --bs-table-hover-bg: transparent;
    background-color: transparent !important;
}