/* FestlNoe icon system — quiet, hand-drawn line icons with proper alignment. */
.festl-icon {
    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    color: currentColor;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.08em;
    justify-content: center;
    line-height: 1;
    margin-inline: 0.02em 0.28em;
    padding: 0;
    position: relative;
    transform: translateY(0.02em);
    vertical-align: -0.16em;
    width: 1.08em;
}

.festl-icon > svg {
    fill: none;
    height: 100%;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
    width: 100%;
}

.festl-icon > svg .festl-icon-accent {
    stroke: var(--secondary, #ec4899);
}

.festl-icon > i {
    font-size: 0.96em;
    line-height: 1;
}

/* Official social glyphs keep their recognizable brand colors. */
.festl-icon--instagram { color: #e4405f; }
.festl-icon--facebook { color: #1877f2; }
.festl-icon--whatsapp { color: #25d366; }
.festl-icon--x { color: #111827; }

/* On filled controls the glyph follows the readable control color. */
a.btn .festl-icon,
button .festl-icon,
.nav-links a .festl-icon,
.share-btn .festl-icon,
.social-quick-link .festl-icon,
.login-button .festl-icon {
    color: currentColor;
}

.festl-icon--flag {
    height: 1em;
    width: 1.25em;
}

.festl-icon__flag-at {
    background: linear-gradient(to bottom, #ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66% 100%);
    border: 1px solid rgb(15 23 42 / 0.18);
    border-radius: 0.08em;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.14);
    height: 0.64em;
    width: 1em;
}

.festl-icon[data-festl-standalone="true"] {
    margin-inline: 0;
}

/* Cancellation is a state, not a generic warning: use one high-contrast color. */
.cancelled-badge .festl-icon,
.cancelled-image-badge .festl-icon,
.status-cancelled .festl-icon,
.cancelled-info h4 .festl-icon,
.cancelled-info-box h3 .festl-icon {
    color: currentColor;
    height: 1.15em;
    margin-inline: 0 0.38em;
    vertical-align: -0.2em;
    width: 1.15em;
}

.cancelled-badge .festl-icon > svg,
.cancelled-image-badge .festl-icon > svg,
.status-cancelled .festl-icon > svg,
.cancelled-info h4 .festl-icon > svg,
.cancelled-info-box h3 .festl-icon > svg {
    stroke: currentColor;
    stroke-width: 2;
}

/* Route cards keep a strong transport pictogram on their light hover tile. */
.navigation-options .nav-option:nth-child(1) { --route-icon-color: #4f46e5; }
.navigation-options .nav-option:nth-child(2) { --route-icon-color: #0891b2; }
.navigation-options .nav-option:nth-child(3) { --route-icon-color: #15803d; }

.navigation-options .nav-icon {
    background: #ffffff;
    color: var(--route-icon-color, #4f46e5);
    outline: 1px solid color-mix(in srgb, var(--route-icon-color, #4f46e5) 18%, transparent);
    transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.navigation-options .nav-icon .festl-icon {
    color: inherit;
    height: 1.02em;
    margin: 0;
    transform: none;
    width: 1.02em;
}

.navigation-options .nav-option:hover .nav-icon,
.navigation-options .nav-option:focus-visible .nav-icon {
    background: #ffffff;
    box-shadow: 0 7px 18px rgb(15 23 42 / 0.18);
    color: var(--route-icon-color, #3730a3);
    outline-color: rgb(255 255 255 / 0.72);
    transform: scale(1.04);
}

body.dark-mode .navigation-options .nav-icon,
body.dark-mode .navigation-options .nav-option:hover .nav-icon,
body.dark-mode .navigation-options .nav-option:focus-visible .nav-icon {
    background: #f8fafc;
    color: var(--route-icon-color, #4f46e5);
}

/* Impressum contact cards: semantic accent tiles and readable real data. */
.impressum-content .contact-item:nth-child(1) { --contact-accent: #8b5cf6; --contact-soft: rgb(139 92 246 / 0.14); }
.impressum-content .contact-item:nth-child(2) { --contact-accent: #ec4899; --contact-soft: rgb(236 72 153 / 0.14); }
.impressum-content .contact-item:nth-child(3) { --contact-accent: #0891b2; --contact-soft: rgb(8 145 178 / 0.14); }
.impressum-content .contact-item:nth-child(4) { --contact-accent: #2563eb; --contact-soft: rgb(37 99 235 / 0.14); }

.impressum-content .contact-item {
    border-color: color-mix(in srgb, var(--contact-accent, #8b5cf6) 22%, #d7deea);
}

.impressum-content .contact-item:hover {
    border-color: var(--contact-accent, #8b5cf6);
}

.impressum-content .contact-item-icon {
    align-items: center;
    background: var(--contact-soft, rgb(139 92 246 / 0.14));
    border: 1px solid color-mix(in srgb, var(--contact-accent, #8b5cf6) 26%, transparent);
    border-radius: 0.9rem;
    color: var(--contact-accent, #8b5cf6);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 2.75rem;
}

.impressum-content .contact-item-icon .festl-icon {
    color: inherit;
    height: 1.35rem;
    margin: 0;
    transform: none;
    width: 1.35rem;
}

.impressum-content .contact-item h4 {
    color: #1f2937;
}

.impressum-content .contact-item p {
    color: #64748b;
    line-height: 1.8;
}

.impressum-content .placeholder,
body.dark-mode .impressum-content .placeholder {
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--contact-accent, #6366f1);
    display: inline;
    font-style: normal;
    font-weight: 700;
    min-width: 0;
    padding: 0;
}

body.dark-mode .impressum-content .contact-item {
    background: #202b3d;
    border-color: color-mix(in srgb, var(--contact-accent, #8b5cf6) 40%, #475569);
}

body.dark-mode .impressum-content .contact-item h4 {
    color: #f8fafc;
}

body.dark-mode .impressum-content .contact-item p {
    color: #cbd5e1;
}

body.dark-mode .impressum-content .contact-item-icon {
    background: color-mix(in srgb, var(--contact-accent, #8b5cf6) 18%, #111827);
    color: color-mix(in srgb, var(--contact-accent, #8b5cf6) 72%, #ffffff);
}

body.dark-mode .impressum-content .impressum-section h2,
body.dark-mode .impressum-content .impressum-section h3 {
    color: #e2e8f0;
}

body.dark-mode .impressum-content .impressum-section h2 {
    border-bottom-color: #475569;
}

body.dark-mode .impressum-content .impressum-section > p {
    color: #cbd5e1;
}

/* Align the Austrian flag with the text instead of the generic icon baseline. */
.footer-copyright .festl-icon--flag {
    height: 1em;
    margin-inline: 0.34em 0;
    transform: none;
    vertical-align: 0.055em;
    width: 1.25em;
}

/* Large placeholders use the same line language instead of oversized tiles. */
.error-icon > .festl-icon,
.empty-icon > .festl-icon,
.no-results-icon > .festl-icon,
.event-image-placeholder > .festl-icon,
.admin-event-image-placeholder > .festl-icon,
.gallery-card-empty > .festl-icon,
.upload-icon > .festl-icon,
.dropzone-icon > .festl-icon,
.login-icon > .festl-icon,
.no-image-icon > .festl-icon {
    color: var(--primary, #6366f1);
    height: 0.95em;
    width: 0.95em;
}

/* The event placeholder is a compact festival tent, not an abstract triangle. */
.event-image-placeholder > .festl-icon[data-festl-icon="tent"],
.admin-event-image-placeholder > .festl-icon[data-festl-icon="tent"],
.preview-image-placeholder > .festl-icon[data-festl-icon="tent"],
.empty-icon > .festl-icon[data-festl-icon="tent"] {
    color: var(--primary, #6366f1);
    filter: drop-shadow(0 4px 7px rgb(79 70 229 / 0.18));
    height: 1.12em;
    width: 1.12em;
}

.festl-icon[data-festl-icon="tent"] > svg {
    stroke-width: 1.8;
}

.festl-icon[data-festl-icon="tent"] .festl-icon-tent-canopy {
    fill: color-mix(in srgb, currentColor 16%, transparent);
}

.festl-icon[data-festl-icon="tent"] .festl-icon-tent-panel {
    fill: color-mix(in srgb, var(--secondary, #ec4899) 24%, transparent);
    stroke: var(--secondary, #ec4899);
}

.festl-icon[data-festl-icon="tent"] .festl-icon-tent-flag {
    stroke: #f59e0b;
}

/* Existing wrappers already define their own size and color. */
.sun-icon > .festl-icon,
.moon-icon > .festl-icon,
.meta-icon > .festl-icon,
.admin-meta-icon > .festl-icon,
.label-icon > .festl-icon,
.section-icon > .festl-icon,
.social-icon > .festl-icon,
.status-icon > .festl-icon,
.search-icon > .festl-icon {
    color: inherit;
    height: 1em;
    margin: 0;
    width: 1em;
}

body.dark-mode .festl-icon--x { color: #f8fafc; }

/* Submit and admin event editing share the same social-link fields. Keep their
   two-column rhythm compact and give every leading icon an identical slot. */
.form-grid.social-fields-grid {
    align-items: start;
    column-gap: 2rem;
    margin-bottom: 0;
    row-gap: 1.5rem;
}

.social-fields-grid .form-group {
    margin-bottom: 0;
}

.social-fields-grid .form-group label {
    margin-bottom: 0.625rem;
}

.social-fields-grid .social-input-group {
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.75rem 1rem;
}

.social-fields-grid .social-icon {
    align-items: center;
    color: var(--gray-700);
    display: inline-flex;
    flex: 0 0 1.5rem;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    width: 1.5rem;
}

.social-fields-grid .social-icon > .festl-icon {
    color: inherit;
    height: 1.25rem;
    margin: 0;
    transform: none;
    width: 1.25rem;
}

.social-fields-grid .social-icon > .festl-icon--instagram { color: #e4405f; }
.social-fields-grid .social-icon > .festl-icon--facebook { color: #1877f2; }
.social-fields-grid .social-icon > .festl-icon--x { color: var(--gray-900); }

.social-fields-grid .social-input-group input {
    line-height: 1.5;
    min-width: 0;
    padding: 0.25rem 0;
}

.social-fields-grid .help-text {
    line-height: 1.4;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .form-grid.social-fields-grid {
        row-gap: 1rem;
    }
}

/* Admin controls need stronger contrast than passive metadata. */
.admin-actions .btn .festl-icon,
.tab-btn .festl-icon,
.edit-link-btn .festl-icon,
.danger-zone .btn-danger .festl-icon {
    flex: 0 0 auto;
    height: 1.08rem;
    margin: 0;
    transform: none;
    width: 1.08rem;
}

.admin-actions .btn .festl-icon > svg,
.tab-btn .festl-icon > svg,
.edit-link-btn .festl-icon > svg,
.danger-zone .btn-danger .festl-icon > svg {
    stroke-width: 2.15;
}

/* A two-tone accent can disappear on a filled control. Both strokes follow the
   button's tested foreground color there. */
.admin-actions .btn:not(.btn-outline) .festl-icon-accent,
.tab-btn.active .festl-icon-accent,
.danger-zone .btn-danger .festl-icon-accent {
    stroke: currentColor;
}

.admin-actions .btn-success {
    background: #047857;
    border-color: #047857;
    color: #ffffff;
}

.admin-actions .btn-warning {
    background: #fbbf24;
    border-color: #f59e0b;
    color: #422006;
}

.admin-actions .btn-danger {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
}

.admin-actions .btn-outline {
    background: #ffffff;
    border-color: #94a3b8;
    color: #334155;
}

body.dark-mode .admin-actions .btn-outline,
body.dark-mode .edit-link-btn,
body.dark-mode .tab-btn:not(.active) {
    background: #263449;
    border-color: #94a3b8;
    color: #f8fafc;
}

body.dark-mode .admin-actions .btn-outline:hover,
body.dark-mode .edit-link-btn:hover,
body.dark-mode .tab-btn:not(.active):hover {
    background: #334155;
    border-color: #c7d2fe;
    color: #ffffff;
}

.danger-zone .btn-danger,
body.dark-mode .danger-zone .btn-danger {
    background: #dc2626;
    border-color: #b91c1c;
    box-shadow: 0 5px 14px rgb(185 28 28 / 0.24);
    color: #ffffff;
}

.danger-zone .btn-danger:hover,
body.dark-mode .danger-zone .btn-danger:hover {
    background: #b91c1c;
    border-color: #991b1b;
}

.danger-zone .btn-danger .festl-icon {
    height: 1.16rem;
    width: 1.16rem;
}

.danger-zone .btn-danger .festl-icon > svg {
    stroke-width: 2.3;
}

/* The remaining admin outline controls (search reset and quick actions) use
   the same readable treatment as the card actions. */
.admin-page .btn .festl-icon {
    height: 1.08rem;
    margin: 0;
    transform: none;
    width: 1.08rem;
}

.admin-page .btn .festl-icon > svg {
    stroke-width: 2.15;
}

.admin-page .btn:not(.btn-outline) .festl-icon-accent {
    stroke: currentColor;
}

body.dark-mode.admin-page .btn-outline {
    background: #263449;
    border-color: #94a3b8;
    color: #f8fafc;
}

body.dark-mode.admin-page .btn-outline:hover {
    background: #334155;
    border-color: #c7d2fe;
    color: #ffffff;
}

/* Card actions must never squeeze "Bearbeiten" into a tiny sliver. A card uses
   two columns when space allows and wraps cleanly on narrower layouts. */
.admin-page .admin-actions {
    align-items: stretch;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}

.admin-page .admin-actions > form {
    display: flex !important;
    margin: 0;
    min-width: 0;
    width: 100%;
}

.admin-page .admin-actions .btn {
    align-items: center;
    display: inline-flex;
    font-size: 0.875rem;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    min-width: 0;
    overflow: hidden;
    padding: 0.65rem 0.85rem;
    white-space: normal;
    width: 100%;
}

.admin-page .change-card .admin-actions {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Expired status on the admin edit page: the former translucent gray pill used
   dark text in dark mode, leaving only the pink calendar accent visible. */
.status-badge.status-expired {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

body.dark-mode .status-badge.status-expired {
    background: #263449;
    border-color: #94a3b8;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
    color: #f8fafc;
}

.status-badge.status-expired .festl-icon {
    color: currentColor;
    height: 1.08rem;
    margin: 0;
    transform: none;
    width: 1.08rem;
}

.status-badge.status-expired .festl-icon > svg {
    stroke-width: 2.15;
}

body.dark-mode .status-badge.status-expired .festl-icon-accent {
    stroke: #f9a8d4;
}

/* Desktop event table: keep the cancellation status on one clean line and avoid
   turning the whole table into a wheel-scroll container. */
#eventsTable .status-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.38rem;
    justify-content: center;
    line-height: 1;
    padding: 0.42rem 0.66rem;
    white-space: nowrap;
}

#eventsTable .status-badge .festl-icon,
#eventsTable .status-cancelled .festl-icon {
    flex: 0 0 auto;
    height: 1rem;
    margin: 0;
    transform: none;
    width: 1rem;
}

#eventsTable .status-cancelled {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #b45309;
}

#eventsTable .status-aktiv {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

body.dark-mode #eventsTable .status-cancelled {
    background: rgb(245 158 11 / 0.12);
    border-color: rgb(251 191 36 / 0.34);
    color: #fbbf24;
}

body.dark-mode #eventsTable .status-aktiv {
    background: rgb(16 185 129 / 0.12);
    border-color: rgb(52 211 153 / 0.3);
    color: #6ee7b7;
}

@media (min-width: 1024px) {
    #table-view .table-container {
        overflow: visible;
    }

    #eventsTable {
        table-layout: fixed;
        width: 100%;
    }

    #eventsTable th,
    #eventsTable td {
        min-width: 0;
        overflow-wrap: break-word;
        padding-inline: 0.55rem;
    }

    #eventsTable th:nth-child(1) { width: 13%; }
    #eventsTable th:nth-child(2) { width: 13%; }
    #eventsTable th:nth-child(3) { width: 10%; }
    #eventsTable th:nth-child(4) { width: 10%; }
    #eventsTable th:nth-child(5) { width: 8%; }
    #eventsTable th:nth-child(6) { width: 14%; }
    #eventsTable th:nth-child(7) { width: 9%; }
    #eventsTable th:nth-child(8) { width: 11%; }
    #eventsTable th:nth-child(9) { width: 12%; }

    #eventsTable th:nth-child(5),
    #eventsTable td:nth-child(5),
    #eventsTable th:nth-child(7),
    #eventsTable td:nth-child(7),
    #eventsTable th:nth-child(8),
    #eventsTable td:nth-child(8),
    #eventsTable th:nth-child(9),
    #eventsTable td:nth-child(9) {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    #eventsTable td:last-child .btn {
        justify-content: center;
        max-width: 100%;
        padding-inline: 0.55rem !important;
        white-space: nowrap;
        width: 100%;
    }
}

/* Mobile navigation: the old text-hiding selector also matched the nested SVG
   icon wrapper. Keep only the labels hidden and make every icon explicit. */
@media (max-width: 767px) {
    .nav-links a > span:first-child {
        align-items: center;
        display: inline-flex !important;
        justify-content: center;
    }

    .nav-links a > span:first-child > .festl-icon {
        color: currentColor;
        display: inline-flex !important;
        height: 1.25rem;
        margin: 0;
        opacity: 1;
        visibility: visible;
        width: 1.25rem;
    }

    .nav-links a > span:first-child > .festl-icon > svg {
        display: block;
        height: 100%;
        width: 100%;
    }
}

/* Only the opened option list is redesigned. Closed select controls continue to
   use the styles defined by their individual pages. */
@supports (appearance: base-select) and selector(::picker(select)) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* Filter selects already provide their own background arrow. */
    select.filter-select::picker-icon {
        display: none;
    }

    select:not([multiple]):not([size])::picker(select) {
        backdrop-filter: blur(12px);
        background: rgb(255 255 255 / 0.98);
        border: 1px solid #dbe2ea;
        border-radius: 0.78rem;
        box-shadow: 0 14px 34px rgb(15 23 42 / 0.16), 0 2px 8px rgb(15 23 42 / 0.08);
        color-scheme: light;
        margin-block: 0.5rem;
        max-height: min(24rem, 58vh);
        min-width: 9.5rem;
        opacity: 0;
        overflow: auto;
        padding: 0.34rem;
        scale: 0.965;
        scrollbar-color: #94a3b8 transparent;
        scrollbar-width: thin;
        transform-origin: center top;
        translate: 0 -0.45rem;
        transition:
            opacity 170ms ease,
            scale 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
            translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
            display 220ms allow-discrete,
            overlay 220ms allow-discrete;
    }

    select:not([multiple]):not([size]):open::picker(select) {
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }

    select:not([multiple]):not([size]) option {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0.5rem;
        color: #1f2937;
        cursor: pointer;
        display: flex;
        font-weight: 600;
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0.62rem 0.72rem;
        position: relative;
        transition: background-color 120ms ease, color 120ms ease;
    }

    select:not([multiple]):not([size]) option + option {
        margin-top: 0.08rem;
    }

    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus-visible {
        background: #f1f5f9;
        color: #0f172a;
        outline: none;
    }

    select:not([multiple]):not([size]) option:checked {
        background: #eef2ff;
        box-shadow: inset 3px 0 #6366f1;
        color: #3730a3;
        font-weight: 700;
    }

    select:not([multiple]):not([size]) option::checkmark {
        color: currentColor;
        font-size: 0.9em;
        font-weight: 900;
        margin-inline-start: auto;
        order: 2;
    }

    select:not([multiple]):not([size]) option:disabled {
        cursor: not-allowed;
        opacity: 0.48;
    }

    body.dark-mode select:not([multiple]):not([size])::picker(select) {
        background: rgb(17 24 39 / 0.98);
        border-color: #374151;
        box-shadow: 0 16px 38px rgb(0 0 0 / 0.4), 0 2px 9px rgb(0 0 0 / 0.25);
        color-scheme: dark;
        scrollbar-color: #64748b transparent;
    }

    body.dark-mode select:not([multiple]):not([size]) option {
        background: transparent;
        color: #e5e7eb;
    }

    body.dark-mode select:not([multiple]):not([size]) option:hover,
    body.dark-mode select:not([multiple]):not([size]) option:focus-visible {
        background: #273449;
        box-shadow: none;
        color: #f8fafc;
    }

    body.dark-mode select:not([multiple]):not([size]) option:checked {
        background: #30384a;
        box-shadow: inset 3px 0 #818cf8;
        color: #f8fafc;
    }

    @starting-style {
        select:not([multiple]):not([size]):open::picker(select) {
            opacity: 0;
            scale: 0.965;
            translate: 0 -0.45rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        select:not([multiple]):not([size])::picker(select) {
            scale: 1;
            transition: none;
            translate: 0 0;
        }
    }
}

@media (forced-colors: active) {
    select:not([multiple]):not([size]) {
        appearance: auto;
        background-image: none;
        border: 1px solid ButtonText;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    a:hover .festl-icon,
    button:hover .festl-icon,
    label:hover .festl-icon {
        transform: translateY(-0.04em);
        transition: transform 140ms ease;
    }
}

@media (max-width: 768px) {
    .pagination-btn {
        min-width: 44px;
        height: 44px;
    }

    .per-page-selector select {
        min-height: 44px;
    }

    .clear-search {
        width: 44px;
        height: 44px;
    }
}