/* Pulse Feed Grid */
.pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Mobile Scroll Snap Override */
@media (max-width: 768px) {
    .pulse-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
    }

    .pulse-card-wrapper {
        min-width: 85vw;
        scroll-snap-align: center;
    }
}

/* Flip Card Container */
.pulse-card-wrapper {
    perspective: 1000px;
    height: 400px;
    /* Altura fixa */
}

.pulse-card {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Flip Interaction */
.pulse-card-wrapper:hover .pulse-card,
.pulse-card.flipped {
    transform: rotateY(180deg);
}

/* Faces */
.pulse-card-front,
.pulse-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.pulse-card-front {
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

.pulse-card-back {
    background-color: #2c3e50;
    color: white;
    transform: rotateY(180deg);
}

.badge-status {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Accordion Styles */
.card-header .btn-link {
    text-decoration: none;
}

.card-header .btn-link:hover {
    background-color: #f8f9fa;
}

.card-header .btn-link i {
    transition: transform 0.3s;
}

.card-header .btn-link:not(.collapsed) i {
    transform: rotate(180deg);
}

/* --- ACTIONS GRID (Ported from Users) --- */
.actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
    /* Adjusted margin to not push outside container */
    align-items: end;
}

@media (min-width: 768px) {
    .actions-grid {
        grid-template-columns: auto 1fr;
        column-gap: 1.5rem;
    }
}

.filter-box {
    background-color: var(--color-bg-light);
    width: 100%;
    box-sizing: border-box;
}

/* Sticky Navigation for Events */
.section-nav-centered {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 75px;
    /* Height of fixed main header + padding */
    z-index: 99;
    background-color: var(--color-gray);
    /* Matches body bg */
    padding: 10px 0;
    margin-top: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* --- EVENTS LIST (Ported from Users) --- */
.events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    /* Date | Details | Status | Actions */
    align-items: center;
    padding: 1rem 1.5rem;
    /* Increased padding slightly */
    border: 1px solid var(--color-gray-light);
    transition: background-color 0.2s ease-in-out;
    gap: 1rem;
    min-height: 5px;
    background-color: #fff;
    /* Ensure white bg */
    border-radius: 6px;
    /* consistent with cards */
    margin-bottom: 10px;
    /* spacing between items */
}

.event-item:hover {
    background-color: var(--color-gray);
    border-color: var(--color-primary-light);
    /* subtle highlight */
}

/* Table Header Styling */
.small-table thead th {
    border-bottom: 2px solid var(--color-gray-dark, #343a40) !important;
    color: var(--color-gray-dark, #343a40) !important;
}

/* Table Row Styling */
.small-table tr td {
    border-bottom: 1px solid var(--color-gray-medium, #ced4da) !important;
}

/* Date Badge */
.event-date-badge {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    /* Rounded square or keep circle? User didn't specify, but 'bold day' implies standard calendar look often. Let's stick to user request implies font changes. Keeping circle or rounded square? "A data fosse..." usually calendar icon style. Let's make it a rounded square for modern look or keep circle. I'll keep circle as per previous css but refine fonts. */
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    line-height: 1;
}

.event-date-badge .day {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    margin-bottom: -2px;
}

.event-date-badge .month {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
}

/* Cell Layout */
.cell-content {
    display: flex;
    align-items: center;
    gap: 15px;
    /* More gap for separation */
}

/* Updated Text Wrapper for Row Layout */
.cell-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Row for Title + City/Subtitle */
.cell-title-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    /* responsive safety */
}

/* Title Styling */
.cell-title {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.cell-title.text-warning {
    color: var(--color-warning) !important;
}

/* Subtitle (City) - Smaller font */
.cell-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Stage Text Styling */
.stage-text {
    font-size: 0.85rem;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.stage-text-open {
    color: var(--color-success);
}

.stage-text-upcoming {
    color: var(--color-primary);
}

.stage-text-closed {
    color: var(--color-danger);
}

.stage-text-finished {
    color: #6c757d;
}

.stage-text-cancelled {
    color: #dc3545;
    text-decoration: line-through;
}

.stage-text-paused {
    color: var(--color-warning);
}

/* Action Buttons Container */
.action-buttons-group {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;

    /* New Container Styles */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    /* Fully rounded pill */
    padding: 4px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Action Buttons Specifics */
.btn-action-icon {
    border: none;
    background: transparent;
    color: #999;
    transition: color 0.2s, transform 0.2s;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
}

.btn-action-icon:hover,
.btn-action-icon:focus {
    text-decoration: none !important;
    color: var(--color-primary);
    transform: scale(1.1);
}

.btn-action-icon.delete:hover {
    color: var(--color-danger);
}

.btn-action-icon.edit {
    color: #f39c12;
    /* Darker Yellow/Orange */
}

.btn-action-icon.edit:hover {
    color: #e67e22;
    /* Even darker on hover */
}

.btn-action-icon.toggle.active {
    color: var(--color-primary);
}

.btn-action-icon.toggle.inactive {
    color: #ccc;
}

/* Button styles moved to components.css (.btn-action-square) - Overriding/Integrating here */

/* --- Custom Modals (Moved from Inline) --- */
.modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
}

.event-content-overlap {
    margin-top: -150px;
    position: relative;
    z-index: 20;
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 8px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Custom Grid: 1/3 + 2/3 */
.admin-grid-2-col-asym {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

@media (max-width: 900px) {
    .admin-grid-2-col-asym {
        grid-template-columns: 1fr;
    }
}

/* Container Disabled State */
.container-disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* =========================================
   Event History Styles (Frontend)
   ========================================= */

/* Section Title & Subtitle */
#events {
    padding: 80px 0;
    background-color: var(--color-bg-light);
}





/* History Tabs Navigation */
#history-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px;
    border-bottom: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto 3rem auto !important;
    max-width: 900px;
}

#history-tabs .nav-item {
    margin-bottom: 0 !important;
}

#history-tabs .nav-link {
    border-radius: 50px !important;
    padding: 10px 24px !important;
    background-color: #e9ecef;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    /* Remove underline */
}

#history-tabs .nav-link.active,
#history-tabs .nav-link:hover {
    background-color: var(--color-primary, #0a4d53);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Event Card Grid Layout */
.event-card-grid {
    background: #fff;
    border: 1px solid var(--color-gray-dark, #343a40);
    /* User Request: Darker Border */
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 10px;
}

.event-card-grid:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Custom Button Colors & Spacing */
.btn-custom-gray {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

.btn-custom-gray:hover {
    background-color: #5a6268;
    color: #fff;
    transform: translateY(-1px);
}

.btn-custom-dark {
    background-color: #343a40;
    color: #fff;
    border: none;
}

.btn-custom-dark:hover {
    background-color: #23272b;
    color: #fff;
    transform: translateY(-1px);
}

.btn-custom-orange {
    background-color: #fd7e14;
    color: #fff;
    border: none;
}

.btn-custom-orange:hover {
    background-color: #e36b0a;
    color: #fff;
    transform: translateY(-1px);
}

.btn-custom-teal {
    background-color: #20c997;
    color: #fff;
    border: none;
}

.btn-custom-teal:hover {
    background-color: #1aa179;
    color: #fff;
    transform: translateY(-1px);
}

.btn-custom-primary {
    background-color: var(--color-primary, #0a4d53);
    color: #fff;
    border: none;
}

.btn-custom-primary:hover {
    background-color: var(--color-dark-primary, #083b40);
    color: #fff;
    transform: translateY(-1px);
}

.btn-doc-action {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.gap-2 {
    gap: 8px;
}

/* Small space between buttons */

/* Date Badge (Green Circle) */
.date-badge {
    background-color: #28a745;
    /* var(--color-success) fallback */
    color: #fff !important;
    width: 70px;
    /* Slightly smaller to fit layout */
    height: 70px;
    border-radius: 50%;
    /* Circle */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    margin-right: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

.date-badge .day {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: -2px;
}

.date-badge .month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* Icons in buttons */
.btn i {
    margin-right: 6px;
    color: #fff !important;
    /* User Request: All button icons white */
}

/* Cell Content Layout */
.cell-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Date Badge (Green Circle) - Reusing existing but refining for cell-content */
.event-date-badge {
    background-color: #28a745;
    color: #fff !important;
    /* Force White Text */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    line-height: 1;
}

.event-date-badge .day {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: -2px;
    color: #fff !important;
    /* Force White */
}

.event-date-badge .month {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff !important;
    /* Force White */
}

.cell-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.cell-title {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-primary, #0a4d53) !important;
    /* User Request: Primary Color */
    text-decoration: none !important;
    margin-bottom: 2px;
    display: block;
    cursor: default;
    /* Remove pointer if not a link */
}

.cell-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Subtitle Icon - Inherit color */
.cell-subtitle i {
    color: inherit !important;
}

/* Flyer Image Tag Style */
.event-flyer-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Maintain proportion */
    border-radius: 4px;
    max-height: 160px;
    /* Constrain height to row */
}

/* CSS GRID LAYOUT for Desktop */
@media (min-width: 768px) {
    .event-grid-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        /* User Request: Content-based width for 1st & 3rd cols */
        grid-template-areas: "flyer info actions";
        min-height: 160px;
        /* Adjusted height */
    }

    .event-flyer-area {
        grid-area: flyer;
        height: 100%;
        padding: 2px;
        /* Reduced padding further */
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 110px;
        /* Reduced min-width for 9:16 aspect ratio support */
    }

    .event-info-area {
        grid-area: info;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Vertically center content block */
        padding: 0 25px;
        /* Increased padding slightly */
        /* Horizontal padding */
        gap: 12px;
        /* Gap between Line 1 (Info) and Line 2 (Buttons) */
    }

    .event-actions-area {
        grid-area: actions;
        height: 100%;
        border-left: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* User Request: Vertically centered */
    }

    .border-right-desktop {
        border-right: 1px solid #f0f0f0;
    }
}

/* Stacked Layout for Mobile */
@media (max-width: 767.98px) {
    .event-grid-container {
        display: flex;
        flex-direction: column;
    }

    .event-flyer-area {
        height: 200px;
        width: 100%;
        background-position: center top !important;
    }

    .event-info-area {
        border-bottom: 1px solid #dee2e6;
    }

    .event-actions-area {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .event-actions-area .btn {
        flex: 1;
        margin-bottom: 0 !important;
    }

    /* Hide specific elements on mobile if needed */
    .border-bottom-mobile {
        border-bottom: 1px solid #dee2e6;
    }
}

/* --- Events Frontend CSS --- */

/* =========================================
   Single Event Page Styles
   ========================================= */

/* Banner Overlay e Blur */
.event-single-banner {
    position: relative;
    height: auto;
    min-height: 360px;
    /* Altura do Banner */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.event-single-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Transparencia Escura */
    backdrop-filter: blur(8px);
    /* Desfoque */
    z-index: 1;
}

.event-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    /* Compensar Navbar se for transparente */
}

/* Flyer Overlap */
.flyer-overlap {
    /* Margin moved to container */
    z-index: 10;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #fff;
    width: 100%;
    max-width: 300px;
    /* Constrain width */
    padding: 8px;
}

.flyer-img-full {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Cards */
.event-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.event-card-header {
    padding: 15px 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-card-body {
    padding: 20px;
}

.card-icon-lg {
    font-size: 2.5rem;
    opacity: 0.1;
    position: absolute;
    right: 15px;
    bottom: 15px;
}



/* Document List in Card */
.doc-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.doc-list-item:last-child {
    border-bottom: none;
}


/* =========================================
   2. Header & Banner Refinements (PortoRun)
   ========================================= */

/* Banner: Left Align Content */
.event-banner-content {
    align-items: flex-start;
    /* Align left */
    text-align: left;
}

/* Date Badge: Circle "DD MMM" */
.date-badge-circle {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    backdrop-filter: blur(5px);
    margin-right: 15px;
    flex-shrink: 0;
    /* Added spacing */
}

.date-badge-circle .day {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.date-badge-circle .month {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

/* CTA: Right Side (Absolute in Desktop) */
.cta-banner-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.btn-event-hero {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid var(--color-accent) !important;
    padding: 15px 35px;
    border-radius: 5px;
    /* Square/slightly rounded like Hero */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    display: inline-block;
}

.btn-event-hero:hover {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--color-accent) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
    box-shadow: none;
}

/* Helper to enforce dark theme text (White) */
.text-theme-dark {
    color: var(--color-text-dark) !important;
}



/* =========================================
   3. Navigation (Internal Anchors)
   ========================================= */
.event-nav-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 70px;
    /* Adjust based on main header height */
    z-index: 100;
}

.event-nav-link {
    display: inline-block;
    padding: 15px 20px;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}

.event-nav-link:hover,
.event-nav-link.active {
    color: var(--color-primary);
    /* Use CSS var */
    text-decoration: none;
    border-bottom: 3px solid var(--color-primary);
}

/* =========================================
   4. Content Grid (Cards)
   ========================================= */
.event-grid-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .event-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .event-grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Top Section Grid (Flyer + Content) */
.event-top-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .event-top-grid {
        grid-template-columns: 1fr;
    }

    .event-top-grid>div:first-child {
        margin: 0 auto;
        /* Center flyer on mobile */
    }
}

/* Compact Card Style */
.card-compact {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: #fff;
    transition: transform 0.2s;
}

.card-compact:hover {
    transform: translateY(-3px);
}

.card-compact .card-header {
    background: transparent;
    border-bottom: 1px solid #f5f5f5;
    padding: 15px;
    font-weight: 700;
    font-size: 1rem;
    color: #333;
}

.card-compact .card-body {
    padding: 15px;
}

/* =========================================
   5. Footer Contact Module
   ========================================= */
/* Estilos removidos em favor do módulo Contact nativo */

/* =========================================
   Event History Styles (Tabs Override)
   ========================================= */
#history-tabs .nav-link:hover::after,
#history-tabs .nav-link.active::after {
    display: none !important;
    /* Remove accent bar */
}

#history-tabs .nav-link {
    border-bottom: none !important;
}