/* =============================================================================
   Event Panels - Luminous Collapsible Section System
   A cohesive, refined panel system for LeagueEventDetails

   This CSS enhances the existing stack-card + collapsible-section pattern
   with a unified "Luminous Panel" visual language.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */
:root {
    /* Panel surfaces */
    --panel-bg: var(--theme-surface-1, #ffffff);
    --panel-bg-elevated: var(--theme-surface-2, #f8fafc);
    --panel-border: var(--theme-border-color, rgba(15, 23, 42, 0.08));
    --panel-border-active: var(--theme-primary, #2563eb);

    /* Panel glow effects */
    --panel-glow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --panel-glow-hover: 0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
    --panel-glow-expanded: 0 12px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* Toggle button */
    --toggle-bg: var(--theme-surface-2, #f1f5f9);
    --toggle-bg-hover: var(--theme-primary, #2563eb);
    --toggle-text: var(--theme-text-secondary, #64748b);
    --toggle-text-hover: #ffffff;

    /* Typography scale */
    --panel-eyebrow-size: 0.6875rem;
    --panel-title-size: 1.125rem;
    --panel-summary-size: 0.875rem;

    /* Transitions */
    --panel-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --panel-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
    --panel-bg: var(--theme-surface-2, #1e293b);
    --panel-bg-elevated: var(--theme-surface-3, #334155);
    --panel-border: rgba(148, 163, 184, 0.12);
    --panel-border-active: var(--theme-primary, #60a5fa);

    --panel-glow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --panel-glow-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(148, 163, 184, 0.08);
    --panel-glow-expanded: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(96, 165, 250, 0.15);

    --toggle-bg: rgba(148, 163, 184, 0.1);
    --toggle-bg-hover: var(--theme-primary, #3b82f6);
    --toggle-text: var(--theme-text-secondary, #94a3b8);
    --toggle-text-hover: #ffffff;
}

/* =============================================================================
   ENHANCED EXISTING PATTERNS
   These styles upgrade the existing stack-card + collapsible-section markup
   ============================================================================= */

/* Upgrade stack-card within event-stack to use Luminous Panel styling */
.event-stack .stack-card {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: var(--panel-glow);
    transition:
        box-shadow var(--panel-transition),
        border-color var(--panel-transition),
        transform var(--panel-transition-fast);
    overflow: hidden;
}

.event-stack .stack-card:hover {
    box-shadow: var(--panel-glow-hover);
}

/* Subtle left accent bar */
.event-stack .stack-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        var(--panel-border-active) 0%,
        color-mix(in srgb, var(--panel-border-active) 40%, transparent) 100%
    );
    opacity: 0;
    transition: opacity var(--panel-transition);
}

/* Show accent bar on expanded collapsible sections */
.event-stack .stack-card.collapsible-section:not(.is-collapsed)::before {
    opacity: 1;
}

/* Enhanced eyebrow styling */
.event-stack .stack-card__eyebrow {
    display: inline-block;
    font-size: var(--panel-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--panel-border-active);
    margin-bottom: 0.25rem;
    opacity: 0.85;
}

/* Enhanced title styling */
.event-stack .stack-card__title {
    margin: 0;
    font-size: var(--panel-title-size);
    font-weight: 800;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.3;
    transition: color var(--panel-transition-fast);
}

[data-bs-theme="dark"] .event-stack .stack-card__title {
    color: var(--theme-text-primary, #f1f5f9);
}

/* Enhanced summary styling */
.event-stack .stack-card__summary {
    margin-top: 0.35rem;
    font-size: var(--panel-summary-size);
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    transition: opacity var(--panel-transition);
}

[data-bs-theme="dark"] .event-stack .stack-card__summary {
    color: var(--theme-text-secondary, #94a3b8);
}

/* Hide summary when expanded */
.event-stack .stack-card.collapsible-section:not(.is-collapsed) .stack-card__summary {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

/* Enhanced collapsible toggle button */
.event-stack .collapsible-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--toggle-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--toggle-text);
    cursor: pointer;
    transition:
        background-color var(--panel-transition-fast),
        color var(--panel-transition-fast),
        border-color var(--panel-transition-fast),
        transform var(--panel-transition-fast);
    white-space: nowrap;
}

.event-stack .collapsible-toggle:hover {
    background: var(--toggle-bg-hover);
    color: var(--toggle-text-hover);
    transform: translateY(-1px);
}

.event-stack .collapsible-toggle:focus-visible {
    outline: 2px solid var(--panel-border-active);
    outline-offset: 2px;
}

/* Toggle icon animation */
.event-stack .collapsible-toggle .toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--panel-transition);
    margin-top: -2px;
}

.event-stack .collapsible-section.is-collapsed .collapsible-toggle .toggle-icon {
    transform: rotate(-135deg);
    margin-top: 2px;
}

/* Content reveal animation */
.event-stack .collapsible-content {
    overflow: hidden;
    transition:
        max-height var(--panel-transition),
        opacity var(--panel-transition),
        transform var(--panel-transition);
}

.event-stack .collapsible-section.is-collapsed .collapsible-content {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
}

.event-stack .collapsible-section:not(.is-collapsed) .collapsible-content {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Base Panel Structure
   ----------------------------------------------------------------------------- */
.event-panel {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 0.75rem;
    box-shadow: var(--panel-glow);
    transition:
        box-shadow var(--panel-transition),
        border-color var(--panel-transition),
        transform var(--panel-transition-fast);
    overflow: hidden;
}

.event-panel:hover {
    box-shadow: var(--panel-glow-hover);
}

.event-panel.is-expanded {
    box-shadow: var(--panel-glow-expanded);
    border-color: var(--panel-border-active);
}

/* Subtle left accent bar on expanded */
.event-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        var(--panel-border-active) 0%,
        color-mix(in srgb, var(--panel-border-active) 50%, transparent) 100%
    );
    opacity: 0;
    transition: opacity var(--panel-transition);
}

.event-panel.is-expanded::before {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Panel Header (Always Visible)
   ----------------------------------------------------------------------------- */
.event-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--panel-transition-fast);
}

.event-panel__header:hover {
    background-color: color-mix(in srgb, var(--panel-bg-elevated) 50%, transparent);
}

.event-panel__header:focus-visible {
    outline: 2px solid var(--panel-border-active);
    outline-offset: -2px;
    border-radius: 16px 16px 0 0;
}

/* Header meta section */
.event-panel__meta {
    flex: 1;
    min-width: 0;
}

/* Eyebrow label */
.event-panel__eyebrow {
    display: inline-block;
    font-size: var(--panel-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--panel-border-active);
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

/* Title */
.event-panel__title {
    margin: 0;
    font-size: var(--panel-title-size);
    font-weight: 800;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.3;
    transition: color var(--panel-transition-fast);
}

[data-bs-theme="dark"] .event-panel__title {
    color: var(--theme-text-primary, #f1f5f9);
}

.event-panel__header:hover .event-panel__title {
    color: var(--panel-border-active);
}

/* Summary text (preview in collapsed state) */
.event-panel__summary {
    margin-top: 0.35rem;
    font-size: var(--panel-summary-size);
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    transition: opacity var(--panel-transition);
}

[data-bs-theme="dark"] .event-panel__summary {
    color: var(--theme-text-secondary, #94a3b8);
}

/* Hide summary when expanded */
.event-panel.is-expanded .event-panel__summary {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Toggle Button
   ----------------------------------------------------------------------------- */
.event-panel__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--toggle-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--toggle-text);
    cursor: pointer;
    transition:
        background-color var(--panel-transition-fast),
        color var(--panel-transition-fast),
        border-color var(--panel-transition-fast),
        transform var(--panel-transition-fast);
    white-space: nowrap;
}

.event-panel__toggle:hover {
    background: var(--toggle-bg-hover);
    color: var(--toggle-text-hover);
    transform: translateY(-1px);
}

.event-panel__toggle:focus-visible {
    outline: 2px solid var(--panel-border-active);
    outline-offset: 2px;
}

/* Toggle icon */
.event-panel__toggle-icon {
    display: inline-flex;
    transition: transform var(--panel-transition);
}

.event-panel.is-expanded .event-panel__toggle-icon {
    transform: rotate(180deg);
}

/* Toggle label text swap */
.event-panel__toggle-text--expand,
.event-panel__toggle-text--collapse {
    display: none;
}

.event-panel:not(.is-expanded) .event-panel__toggle-text--expand {
    display: inline;
}

.event-panel.is-expanded .event-panel__toggle-text--collapse {
    display: inline;
}

/* -----------------------------------------------------------------------------
   Panel Content (Collapsible)
   ----------------------------------------------------------------------------- */
.event-panel__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--panel-transition);
}

.event-panel.is-expanded .event-panel__content {
    grid-template-rows: 1fr;
}

.event-panel__content-inner {
    overflow: hidden;
}

.event-panel__body {
    padding: 0 1.25rem 1.25rem;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity var(--panel-transition),
        transform var(--panel-transition);
}

.event-panel.is-expanded .event-panel__body {
    opacity: 1;
    transform: translateY(0);
}

/* Divider between header and content */
.event-panel__divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--panel-border) 15%,
        var(--panel-border) 85%,
        transparent 100%
    );
    margin: 0 1.25rem;
    opacity: 0;
    transition: opacity var(--panel-transition);
}

.event-panel.is-expanded .event-panel__divider {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Panel Icon Variants
   ----------------------------------------------------------------------------- */
.event-panel__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--panel-border-active) 15%, transparent) 0%,
        color-mix(in srgb, var(--panel-border-active) 8%, transparent) 100%
    );
    color: var(--panel-border-active);
    font-size: 1.125rem;
    margin-right: 0.75rem;
}

[data-bs-theme="dark"] .event-panel__icon {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--panel-border-active) 25%, transparent) 0%,
        color-mix(in srgb, var(--panel-border-active) 12%, transparent) 100%
    );
}

/* Header with icon layout */
.event-panel__header--with-icon {
    display: flex;
    align-items: flex-start;
}

.event-panel__header--with-icon .event-panel__meta {
    display: flex;
    align-items: flex-start;
}

/* -----------------------------------------------------------------------------
   Special Panel Variants
   ----------------------------------------------------------------------------- */

/* Featured/Highlighted Panel */
.event-panel--featured {
    background: linear-gradient(
        135deg,
        var(--panel-bg) 0%,
        color-mix(in srgb, var(--panel-border-active) 5%, var(--panel-bg)) 100%
    );
    border-color: color-mix(in srgb, var(--panel-border-active) 30%, transparent);
}

.event-panel--featured::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(
        circle at top right,
        color-mix(in srgb, var(--panel-border-active) 8%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Course Info Panel (unique gradient style) */
.event-panel--course {
    --panel-border-active: var(--league-primary, #0ea5e9);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--league-primary, #0ea5e9) 12%, var(--panel-bg)) 0%,
        color-mix(in srgb, var(--league-gradient, #06b6d4) 8%, var(--panel-bg)) 100%
    );
    border: none;
}

.event-panel--course .event-panel__header {
    padding: 1.25rem 1.5rem;
}

.event-panel--course .event-panel__title {
    color: var(--league-primary, #0ea5e9);
    font-size: 1.0625rem;
}

[data-bs-theme="dark"] .event-panel--course .event-panel__title {
    color: color-mix(in srgb, var(--league-primary, #38bdf8) 90%, #ffffff);
}

.event-panel--course .event-panel__toggle {
    background: color-mix(in srgb, var(--league-primary, #0ea5e9) 15%, transparent);
    color: var(--league-primary, #0ea5e9);
    border: 1px solid color-mix(in srgb, var(--league-primary, #0ea5e9) 30%, transparent);
}

.event-panel--course .event-panel__toggle:hover {
    background: var(--league-primary, #0ea5e9);
    color: var(--league-primary-text, #ffffff);
}

/* Prize/Ace Pot Panel */
.event-panel--prize {
    --panel-border-active: #f59e0b;
}

.event-panel--prize .event-panel__icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: #f59e0b;
}

/* Schedule Panel */
.event-panel--schedule {
    --panel-border-active: #8b5cf6;
}

.event-panel--schedule .event-panel__icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #8b5cf6;
}

/* Weather Panel */
.event-panel--weather {
    --panel-border-active: #06b6d4;
}

.event-panel--weather .event-panel__icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06b6d4;
}

/* Story/Narrator Panel */
.event-panel--story {
    --panel-border-active: #ec4899;
}

.event-panel--story .event-panel__icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.08) 100%);
    color: #ec4899;
}

/* -----------------------------------------------------------------------------
   Badge Indicators
   ----------------------------------------------------------------------------- */
.event-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    background: color-mix(in srgb, var(--panel-border-active) 15%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--panel-border-active);
    margin-left: 0.5rem;
    vertical-align: middle;
}

[data-bs-theme="dark"] .event-panel__badge {
    background: color-mix(in srgb, var(--panel-border-active) 25%, transparent);
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --panel-eyebrow-size: 0.625rem;
        --panel-title-size: 1rem;
        --panel-summary-size: 0.8125rem;
    }

    .event-panel {
        border-radius: 12px;
        margin-bottom: 0.5rem;
    }

    .event-panel::before {
        width: 2px;
    }

    .event-panel__header {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .event-panel__toggle {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.35rem;
    }

    .event-panel__body {
        padding: 0 1rem 1rem;
    }

    .event-panel__divider {
        margin: 0 1rem;
    }

    .event-panel__icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 8px;
        margin-right: 0.625rem;
    }

    .event-panel--course .event-panel__header {
        padding: 1rem 1.125rem;
    }

    .event-panel--course .event-panel__title {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .event-panel__header {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .event-panel__toggle {
        padding: 0.35rem 0.625rem;
    }

    /* Stack toggle below on very small screens if needed */
    .event-panel__header--stack-mobile {
        flex-wrap: wrap;
    }

    .event-panel__header--stack-mobile .event-panel__toggle {
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }
}

/* -----------------------------------------------------------------------------
   Animation Keyframes
   ----------------------------------------------------------------------------- */
@keyframes panel-pulse {
    0%, 100% {
        box-shadow: var(--panel-glow-expanded);
    }
    50% {
        box-shadow: var(--panel-glow-expanded), 0 0 0 4px color-mix(in srgb, var(--panel-border-active) 20%, transparent);
    }
}

.event-panel--highlight-once.is-expanded {
    animation: panel-pulse 0.6s ease-out;
}

/* -----------------------------------------------------------------------------
   Accessibility
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .event-panel,
    .event-panel__toggle,
    .event-panel__toggle-icon,
    .event-panel__content,
    .event-panel__body {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .event-panel {
        border-width: 2px;
    }

    .event-panel__toggle {
        border-width: 2px;
    }
}

/* =============================================================================
   STACK-CARD VARIANTS (for existing markup compatibility)
   These apply to the stack-card pattern used in LeagueEventDetails
   ============================================================================= */

/* Course Info variant - Vibrant teal (matches other section vibrancy) */
.event-stack .stack-card--course {
    --panel-border-active: #14b8a6;
}

.event-stack .stack-card--course::before {
    background: linear-gradient(
        180deg,
        #14b8a6 0%,
        #0d9488 100%
    );
}

.event-stack .stack-card--course .stack-card__eyebrow {
    color: #14b8a6;
}

.event-stack .stack-card--course .stack-card__title {
    color: var(--theme-text-primary, #0f172a);
}

[data-bs-theme="dark"] .event-stack .stack-card--course .stack-card__eyebrow {
    color: #2dd4bf;
}

[data-bs-theme="dark"] .event-stack .stack-card--course .stack-card__title {
    color: var(--theme-text-primary, #f1f5f9);
}

.event-stack .stack-card--course .collapsible-toggle {
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, 0.25);
}

[data-bs-theme="dark"] .event-stack .stack-card--course .collapsible-toggle {
    background: rgba(45, 212, 191, 0.2);
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.35);
}

.event-stack .stack-card--course .collapsible-toggle:hover {
    background: #14b8a6;
    color: #ffffff;
    border-color: #14b8a6;
}

[data-bs-theme="dark"] .event-stack .stack-card--course .collapsible-toggle:hover {
    background: #2dd4bf;
    color: #0f172a;
    border-color: #2dd4bf;
}

/* Stack-card icon styling */
.event-stack .stack-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--panel-border-active) 15%, transparent) 0%,
        color-mix(in srgb, var(--panel-border-active) 8%, transparent) 100%
    );
    color: var(--panel-border-active);
    font-size: 1.125rem;
    margin-right: 0.75rem;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--panel-border-active) 25%, transparent) 0%,
        color-mix(in srgb, var(--panel-border-active) 12%, transparent) 100%
    );
}

.event-stack .stack-card__icon--course {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(20, 184, 166, 0.08) 100%);
    color: #14b8a6;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--course {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.25) 0%, rgba(45, 212, 191, 0.1) 100%);
    color: #2dd4bf;
}

/* Stack-card header with icon layout */
.event-stack .stack-card__header--with-icon {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

/* Stack-card badge */
.event-stack .stack-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: color-mix(in srgb, var(--panel-border-active) 12%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--panel-border-active);
    margin-right: 0.35rem;
}

.event-stack .stack-card--course .stack-card__badge {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}

[data-bs-theme="dark"] .event-stack .stack-card__badge {
    background: color-mix(in srgb, var(--panel-border-active) 20%, transparent);
}

[data-bs-theme="dark"] .event-stack .stack-card--course .stack-card__badge {
    background: rgba(45, 212, 191, 0.25);
    color: #2dd4bf;
}

/* -----------------------------------------------------------------------------
   Course Info Holes Styling
   ----------------------------------------------------------------------------- */
.course-info-holes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.course-info-hole {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: color-mix(in srgb, var(--panel-bg-elevated) 60%, transparent);
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    transition: border-color var(--panel-transition-fast), background-color var(--panel-transition-fast);
}

.course-info-hole:hover {
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.05);
}

[data-bs-theme="dark"] .course-info-hole {
    background: color-mix(in srgb, var(--panel-bg-elevated) 40%, transparent);
    border-color: var(--panel-border);
}

[data-bs-theme="dark"] .course-info-hole:hover {
    background: rgba(45, 212, 191, 0.08);
}

.course-info-hole__number {
    flex-shrink: 0;
}

.course-info-hole__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
}

.course-info-hole__content {
    flex: 1;
    min-width: 0;
}

.course-info-hole__meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

[data-bs-theme="dark"] .course-info-hole__meta {
    color: var(--theme-text-secondary, #94a3b8);
}

.course-info-hole__par {
    font-weight: 600;
}

.course-info-hole__distance {
    opacity: 0.8;
}

.course-info-hole__notes {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.5;
}

[data-bs-theme="dark"] .course-info-hole__notes {
    color: var(--theme-text-primary, #e2e8f0);
}

/* Mobile adjustments for course info */
@media (max-width: 767px) {
    .course-info-holes {
        gap: 0.5rem;
    }

    .course-info-hole {
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 8px;
    }

    .course-info-hole__badge {
        width: 2rem;
        height: 2rem;
        font-size: 0.8125rem;
    }

    .course-info-hole__notes {
        font-size: 0.875rem;
    }

    .event-stack .stack-card__icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 8px;
        margin-right: 0.625rem;
    }
}

/* =============================================================================
   PANEL TYPE VARIANTS FOR STACK-CARDS
   Color-coded accent bars, eyebrows, and icons for different section types
   ============================================================================= */

/* About League panel (default blue) */
.event-stack .stack-card[data-section="about-league"] {
    --panel-border-active: #3b82f6;
}

.event-stack .stack-card[data-section="about-league"] .stack-card__eyebrow {
    color: #3b82f6;
}

.event-stack .stack-card__icon--about {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.08) 100%);
    color: #3b82f6;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--about {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0.1) 100%);
    color: #60a5fa;
}

/* Story/Narrator panel - Pink */
.event-stack .stack-card[data-section="story-narrator"] {
    --panel-border-active: #ec4899;
}

.event-stack .stack-card[data-section="story-narrator"] .stack-card__eyebrow {
    color: #ec4899;
}

.event-stack .stack-card__icon--story {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.08) 100%);
    color: #ec4899;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--story {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.25) 0%, rgba(244, 114, 182, 0.1) 100%);
    color: #f472b6;
}

/* Weather panel - Cyan */
.event-stack .stack-card[data-section="event-weather"] {
    --panel-border-active: #06b6d4;
}

.event-stack .stack-card[data-section="event-weather"] .stack-card__eyebrow {
    color: #06b6d4;
}

.event-stack .stack-card__icon--weather {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06b6d4;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--weather {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.1) 100%);
    color: #22d3ee;
}

/* Ace pot panel - Orange/Amber */
.event-stack .stack-card[data-section="ace-pot"] {
    --panel-border-active: #f59e0b;
}

.event-stack .stack-card[data-section="ace-pot"] .stack-card__eyebrow {
    color: #f59e0b;
}

.event-stack .stack-card__icon--ace {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: #f59e0b;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--ace {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #fbbf24;
}

/* Payout panel - Green */
.event-stack .stack-card[data-section="payouts"] {
    --panel-border-active: #22c55e;
}

.event-stack .stack-card[data-section="payouts"] .stack-card__eyebrow {
    color: #22c55e;
}

.event-stack .stack-card__icon--payouts {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%);
    color: #22c55e;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--payouts {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(74, 222, 128, 0.1) 100%);
    color: #4ade80;
}

/* Schedule panel - Purple */
.event-stack .stack-card[data-section="schedule"] {
    --panel-border-active: #8b5cf6;
}

.event-stack .stack-card[data-section="schedule"] .stack-card__eyebrow {
    color: #8b5cf6;
}

.event-stack .stack-card__icon--schedule {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #8b5cf6;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--schedule {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(167, 139, 250, 0.1) 100%);
    color: #a78bfa;
}

/* Organization/Directors panel - Emerald */
.event-stack .stack-card[data-section="org-directors"] {
    --panel-border-active: #10b981;
}

.event-stack .stack-card[data-section="org-directors"] .stack-card__eyebrow {
    color: #10b981;
}

.event-stack .stack-card__icon--org {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10b981;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--org {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.25) 0%, rgba(52, 211, 153, 0.1) 100%);
    color: #34d399;
}

/* Course Fund panel - Lime */
.event-stack .stack-card[data-section="course-fund"] {
    --panel-border-active: #84cc16;
}

.event-stack .stack-card[data-section="course-fund"] .stack-card__eyebrow {
    color: #84cc16;
}

.event-stack .stack-card__icon--fund {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.2) 0%, rgba(132, 204, 22, 0.08) 100%);
    color: #84cc16;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--fund {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.25) 0%, rgba(163, 230, 53, 0.1) 100%);
    color: #a3e635;
}

/* Prize panel - Rose/Red */
.event-stack .stack-card[data-section="prizes"] {
    --panel-border-active: #f43f5e;
}

.event-stack .stack-card[data-section="prizes"] .stack-card__eyebrow {
    color: #f43f5e;
}

.event-stack .stack-card__icon--prizes {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(244, 63, 94, 0.08) 100%);
    color: #f43f5e;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--prizes {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.25) 0%, rgba(251, 113, 133, 0.1) 100%);
    color: #fb7185;
}

/* Doubles Format panel - Indigo */
.event-stack .stack-card[data-section="doubles-format"] {
    --panel-border-active: #6366f1;
}

.event-stack .stack-card[data-section="doubles-format"] .stack-card__eyebrow {
    color: #6366f1;
}

.event-stack .stack-card__icon--doubles {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #6366f1;
}

[data-bs-theme="dark"] .event-stack .stack-card__icon--doubles {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0.1) 100%);
    color: #818cf8;
}

/* =============================================================================
   COURSE HERO CARD
   Premium course showcase with image, stats, and CTA
   ============================================================================= */

.course-hero-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 1.25rem;
}

.course-hero-link:hover,
.course-hero-link:focus {
    text-decoration: none;
    color: inherit;
}

.course-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--panel-bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.course-hero-link:hover .course-hero {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
    transform: translateY(-2px);
}

[data-bs-theme="dark"] .course-hero-link:hover .course-hero {
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 8px 24px rgba(45, 212, 191, 0.2);
}

.course-hero__image-wrap {
    position: relative;
    width: 120px;
    min-height: 100px;
    flex-shrink: 0;
    overflow: hidden;
}

.course-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-hero-link:hover .course-hero__image {
    transform: scale(1.08);
}

.course-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 100%
    );
    pointer-events: none;
}

[data-bs-theme="dark"] .course-hero__image-overlay {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.course-hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}

.course-hero__details {
    flex: 1;
}

.course-hero__name {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.3;
    transition: color 0.15s ease;
}

[data-bs-theme="dark"] .course-hero__name {
    color: var(--theme-text-primary, #f1f5f9);
}

.course-hero-link:hover .course-hero__name {
    color: #14b8a6;
}

[data-bs-theme="dark"] .course-hero-link:hover .course-hero__name {
    color: #2dd4bf;
}

.course-hero__layout {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.9;
}

[data-bs-theme="dark"] .course-hero__layout {
    color: var(--theme-text-secondary, #94a3b8);
}

.course-hero__stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.course-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.course-hero__stat-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #14b8a6;
    line-height: 1.2;
}

[data-bs-theme="dark"] .course-hero__stat-value {
    color: #2dd4bf;
}

.course-hero__stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.8;
}

[data-bs-theme="dark"] .course-hero__stat-label {
    color: var(--theme-text-secondary, #94a3b8);
}

.course-hero__stat-divider {
    width: 1px;
    height: 28px;
    background: var(--panel-border);
}

.course-hero__cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--panel-border);
    margin-top: auto;
}

.course-hero__cta-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #14b8a6;
    transition: color 0.15s ease;
}

[data-bs-theme="dark"] .course-hero__cta-text {
    color: #2dd4bf;
}

.course-hero__cta-icon {
    font-size: 0.625rem;
    color: #14b8a6;
    transition: transform 0.2s ease, color 0.15s ease;
}

[data-bs-theme="dark"] .course-hero__cta-icon {
    color: #2dd4bf;
}

.course-hero-link:hover .course-hero__cta-icon {
    transform: translateX(4px);
}

/* =============================================================================
   LAYOUT NOTES / CADDY BOOK
   ============================================================================= */

.layout-notes {
    background: linear-gradient(
        135deg,
        rgba(20, 184, 166, 0.08) 0%,
        rgba(13, 148, 136, 0.04) 100%
    );
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .layout-notes {
    background: linear-gradient(
        135deg,
        rgba(45, 212, 191, 0.12) 0%,
        rgba(20, 184, 166, 0.06) 100%
    );
    border-color: rgba(45, 212, 191, 0.25);
}

.layout-notes__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.layout-notes__icon {
    font-size: 0.875rem;
    color: #14b8a6;
}

[data-bs-theme="dark"] .layout-notes__icon {
    color: #2dd4bf;
}

.layout-notes__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #14b8a6;
}

[data-bs-theme="dark"] .layout-notes__title {
    color: #2dd4bf;
}

.layout-notes__content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--theme-text-primary, #1e293b);
}

[data-bs-theme="dark"] .layout-notes__content {
    color: var(--theme-text-primary, #e2e8f0);
}

.layout-notes__content p {
    margin: 0 0 0.75rem;
}

.layout-notes__content p:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   COURSE HOLES SECTION
   ============================================================================= */

.course-holes-section {
    margin-top: 0.5rem;
}

.course-holes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--panel-border);
}

.course-holes-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #64748b);
}

[data-bs-theme="dark"] .course-holes-title {
    color: var(--theme-text-secondary, #94a3b8);
}

.course-holes-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.12);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}

[data-bs-theme="dark"] .course-holes-count {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.2);
}

/* Enhanced hole card - subtle for holes without notes */
.course-info-hole:not(.course-info-hole--has-notes) {
    background: transparent;
    border-color: transparent;
    padding: 0.625rem 0.75rem;
}

.course-info-hole:not(.course-info-hole--has-notes):hover {
    background: color-mix(in srgb, var(--panel-bg-elevated) 40%, transparent);
    border-color: var(--panel-border);
}

/* Prominent styling for holes with OB rules */
.course-info-hole--has-notes {
    background: color-mix(in srgb, var(--panel-bg-elevated) 70%, transparent);
    border: 1px solid var(--panel-border);
    border-left: 3px solid #14b8a6;
}

[data-bs-theme="dark"] .course-info-hole--has-notes {
    border-left-color: #2dd4bf;
}

.course-info-hole--has-notes:hover {
    border-color: rgba(20, 184, 166, 0.5);
    border-left-color: #14b8a6;
    background: rgba(20, 184, 166, 0.08);
}

[data-bs-theme="dark"] .course-info-hole--has-notes:hover {
    border-color: rgba(45, 212, 191, 0.5);
    border-left-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.1);
}

/* Tee/Target pin badges */
.course-info-hole__pins {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.course-info-hole__pin {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.course-info-hole__pin i {
    font-size: 0.5rem;
}

.course-info-hole__pin--tee {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

[data-bs-theme="dark"] .course-info-hole__pin--tee {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.course-info-hole__pin--target {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

[data-bs-theme="dark"] .course-info-hole__pin--target {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* =============================================================================
   RESPONSIVE: Course Hero & Holes
   ============================================================================= */

@media (max-width: 767px) {
    .course-hero {
        flex-direction: column;
    }

    .course-hero__image-wrap {
        width: 100%;
        height: 120px;
        min-height: unset;
    }

    .course-hero__image-overlay {
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 100%
        );
    }

    [data-bs-theme="dark"] .course-hero__image-overlay {
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.4) 100%
        );
    }

    .course-hero__content {
        padding: 0.875rem 1rem;
    }

    .course-hero__name {
        font-size: 1rem;
    }

    .course-hero__stats {
        justify-content: center;
    }

    .course-hero__cta {
        justify-content: center;
    }

    .layout-notes {
        padding: 0.875rem;
    }

    .layout-notes__content {
        font-size: 0.875rem;
    }

    .course-holes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .course-info-hole__meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .course-info-hole__pins {
        margin-left: 0;
        margin-top: 0.25rem;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .course-hero__image-wrap {
        height: 100px;
    }

    .course-hero__stat-value {
        font-size: 1rem;
    }

    .course-hero__stat-divider {
        height: 24px;
    }
}


/* =============================================================================
   PDGA CADDY BOOK STYLES
   Styles for rendering PDGA-sourced course rules HTML content
   ============================================================================= */

.pdga-caddy-book {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
}

/* Reset embedded HTML document structure - hide the actual html/head/body wrapper */
.pdga-caddy-book html,
.pdga-caddy-book head,
.pdga-caddy-book body {
    all: unset;
    display: block;
}

/* Hide any style/meta tags that might be in the head */
.pdga-caddy-book head * {
    display: none !important;
}

/* Main container styling */
.pdga-caddy-book .course-rules,
.pdga-caddy-book body {
    background: transparent;
    padding: 0;
    font-family: var(--font-family-base, system-ui, -apple-system, sans-serif);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9375rem;
    line-height: 1.6;
}

[data-bs-theme="dark"] .pdga-caddy-book .course-rules,
[data-bs-theme="dark"] .pdga-caddy-book body {
    color: var(--theme-text-primary, #e2e8f0);
}

/* Header Section */
.pdga-caddy-book header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #2563eb) 8%, transparent) 0%,
        color-mix(in srgb, var(--theme-primary, #2563eb) 4%, transparent) 100%
    );
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #2563eb) 15%, transparent);
}

[data-bs-theme="dark"] .pdga-caddy-book header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #3b82f6) 12%, transparent) 0%,
        color-mix(in srgb, var(--theme-primary, #3b82f6) 6%, transparent) 100%
    );
    border-color: color-mix(in srgb, var(--theme-primary, #3b82f6) 20%, transparent);
}

.pdga-caddy-book header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.01em;
}

[data-bs-theme="dark"] .pdga-caddy-book header h1 {
    color: var(--theme-text-primary, #f1f5f9);
}

.pdga-caddy-book header p {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

[data-bs-theme="dark"] .pdga-caddy-book header p {
    color: var(--theme-text-secondary, #94a3b8);
}

/* Section Headers (General Notes, etc.) */
.pdga-caddy-book h2,
.pdga-caddy-book h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 1.5rem 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.08));
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdga-caddy-book h2::before,
.pdga-caddy-book h3::before {
    content: '';
    width: 4px;
    height: 1em;
    background: var(--theme-primary, #2563eb);
    border-radius: 2px;
}

[data-bs-theme="dark"] .pdga-caddy-book h2,
[data-bs-theme="dark"] .pdga-caddy-book h3 {
    color: var(--theme-text-primary, #e2e8f0);
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

/* Notes paragraphs */
.pdga-caddy-book p.notes,
.pdga-caddy-book .notes {
    background: var(--theme-surface-2, #f8fafc);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1.25rem 0;
    font-size: 0.9375rem;
    color: var(--theme-text-secondary, #475569);
    border-left: 3px solid var(--theme-warning, #f59e0b);
}

[data-bs-theme="dark"] .pdga-caddy-book p.notes,
[data-bs-theme="dark"] .pdga-caddy-book .notes {
    background: rgba(148, 163, 184, 0.08);
    color: var(--theme-text-secondary, #cbd5e1);
}

/* Hole Table Styling */
.pdga-caddy-book table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
    background: var(--panel-bg, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.08));
}

[data-bs-theme="dark"] .pdga-caddy-book table {
    background: var(--panel-bg, #1e293b);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Table Header */
.pdga-caddy-book thead {
    background: linear-gradient(180deg,
        var(--theme-surface-2, #f1f5f9) 0%,
        var(--theme-surface-1, #f8fafc) 100%
    );
}

[data-bs-theme="dark"] .pdga-caddy-book thead {
    background: linear-gradient(180deg,
        rgba(148, 163, 184, 0.12) 0%,
        rgba(148, 163, 184, 0.06) 100%
    );
}

.pdga-caddy-book th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-text-secondary, #64748b);
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.08));
    white-space: nowrap;
}

[data-bs-theme="dark"] .pdga-caddy-book th {
    color: var(--theme-text-secondary, #94a3b8);
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

/* Table Cells */
.pdga-caddy-book td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.05));
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #334155);
    vertical-align: top;
}

[data-bs-theme="dark"] .pdga-caddy-book td {
    color: var(--theme-text-primary, #e2e8f0);
    border-bottom-color: rgba(148, 163, 184, 0.08);
}

.pdga-caddy-book tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover effect */
.pdga-caddy-book tbody tr {
    transition: background-color 0.15s ease;
}

.pdga-caddy-book tbody tr:hover {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 4%, transparent);
}

[data-bs-theme="dark"] .pdga-caddy-book tbody tr:hover {
    background: rgba(148, 163, 184, 0.06);
}

/* Alternating row colors */
.pdga-caddy-book tbody tr:nth-child(even) {
    background: var(--theme-surface-1, rgba(248, 250, 252, 0.5));
}

[data-bs-theme="dark"] .pdga-caddy-book tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.03);
}

.pdga-caddy-book tbody tr:nth-child(even):hover {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 5%, var(--theme-surface-1, #f8fafc));
}

[data-bs-theme="dark"] .pdga-caddy-book tbody tr:nth-child(even):hover {
    background: rgba(148, 163, 184, 0.08);
}

/* Column-specific styling */
.pdga-caddy-book td.hole,
.pdga-caddy-book td:first-child {
    font-weight: 700;
    font-size: 1rem;
    color: var(--theme-primary, #2563eb);
    width: 50px;
    text-align: center;
}

[data-bs-theme="dark"] .pdga-caddy-book td.hole,
[data-bs-theme="dark"] .pdga-caddy-book td:first-child {
    color: var(--theme-primary, #60a5fa);
}

.pdga-caddy-book td.tee,
.pdga-caddy-book td.target {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface-2, #f1f5f9);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

[data-bs-theme="dark"] .pdga-caddy-book td.tee,
[data-bs-theme="dark"] .pdga-caddy-book td.target {
    background: rgba(148, 163, 184, 0.1);
    color: var(--theme-text-secondary, #94a3b8);
}

.pdga-caddy-book td.par {
    font-weight: 600;
    text-align: center;
    color: var(--theme-text-primary, #334155);
}

.pdga-caddy-book td.length {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.875rem;
    text-align: right;
    color: var(--theme-text-secondary, #64748b);
}

[data-bs-theme="dark"] .pdga-caddy-book td.length {
    color: var(--theme-text-secondary, #94a3b8);
}

.pdga-caddy-book td.notes {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #475569);
    max-width: 300px;
}

[data-bs-theme="dark"] .pdga-caddy-book td.notes {
    color: var(--theme-text-secondary, #cbd5e1);
}

/* Rows with notes - highlight them */
.pdga-caddy-book tbody tr:has(td.notes:not(:empty)) {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 5%, transparent);
}

.pdga-caddy-book tbody tr:has(td.notes:not(:empty)):hover {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 10%, transparent);
}

[data-bs-theme="dark"] .pdga-caddy-book tbody tr:has(td.notes:not(:empty)) {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 8%, transparent);
}

[data-bs-theme="dark"] .pdga-caddy-book tbody tr:has(td.notes:not(:empty)):hover {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 12%, transparent);
}

/* Mobile Responsive Table */
@media (max-width: 767px) {
    .pdga-caddy-book header {
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }

    .pdga-caddy-book header h1 {
        font-size: 1.125rem;
    }

    .pdga-caddy-book table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0.75rem -0.5rem;
        width: calc(100% + 1rem);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .pdga-caddy-book th,
    .pdga-caddy-book td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    .pdga-caddy-book th {
        font-size: 0.625rem;
    }

    .pdga-caddy-book td.notes {
        min-width: 180px;
        max-width: 250px;
    }

    .pdga-caddy-book p.notes,
    .pdga-caddy-book .notes:not(td) {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

/* Stacked card layout for very small screens */
@media (max-width: 480px) {
    .pdga-caddy-book table,
    .pdga-caddy-book thead,
    .pdga-caddy-book tbody,
    .pdga-caddy-book th,
    .pdga-caddy-book td,
    .pdga-caddy-book tr {
        display: block;
    }

    .pdga-caddy-book thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .pdga-caddy-book tbody tr {
        background: var(--theme-surface-1, #ffffff);
        border: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.08));
        border-radius: 10px;
        margin: 0.5rem 0;
        padding: 0.75rem;
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem;
        align-items: center;
    }

    [data-bs-theme="dark"] .pdga-caddy-book tbody tr {
        background: var(--theme-surface-2, #1e293b);
        border-color: rgba(148, 163, 184, 0.12);
    }

    .pdga-caddy-book tbody tr:nth-child(even) {
        background: var(--theme-surface-1, #ffffff);
    }

    [data-bs-theme="dark"] .pdga-caddy-book tbody tr:nth-child(even) {
        background: var(--theme-surface-2, #1e293b);
    }

    .pdga-caddy-book td {
        border: none;
        padding: 0.25rem 0;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .pdga-caddy-book td::before {
        content: attr(data-label);
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--theme-text-muted, #94a3b8);
        min-width: 50px;
    }

    .pdga-caddy-book td.hole,
    .pdga-caddy-book td:first-child {
        grid-column: 1;
        grid-row: 1 / 3;
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-primary, #2563eb);
        color: white;
        border-radius: 8px;
        font-size: 1.125rem;
        font-weight: 700;
        padding: 0.5rem 0.75rem;
        min-width: 44px;
    }

    [data-bs-theme="dark"] .pdga-caddy-book td.hole,
    [data-bs-theme="dark"] .pdga-caddy-book td:first-child {
        background: var(--theme-primary, #3b82f6);
    }

    .pdga-caddy-book td.hole::before,
    .pdga-caddy-book td:first-child::before {
        display: none;
    }

    .pdga-caddy-book td.par {
        grid-column: 2;
        grid-row: 1;
    }

    .pdga-caddy-book td.length {
        grid-column: 3;
        grid-row: 1;
        text-align: left;
    }

    .pdga-caddy-book td.tee,
    .pdga-caddy-book td.target {
        grid-column: 2;
        background: transparent;
        padding: 0;
    }

    .pdga-caddy-book td.notes {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: 100%;
        min-width: 0;
        background: color-mix(in srgb, var(--theme-warning, #f59e0b) 8%, transparent);
        border-radius: 6px;
        padding: 0.625rem 0.75rem;
        margin-top: 0.25rem;
    }

    .pdga-caddy-book td.notes:empty {
        display: none;
    }

    .pdga-caddy-book td.notes::before {
        display: none;
    }

    [data-bs-theme="dark"] .pdga-caddy-book td.notes {
        background: color-mix(in srgb, var(--theme-warning, #f59e0b) 12%, transparent);
    }
}