/* Scout Calendar Styles */
.scout-calendar-container { 
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between header and table */
}

/* Base Glassmorphism classes applied to sub-containers */
.scout-calendar-filters, .scout-calendar-table-wrapper {
    background: linear-gradient(160deg, #122118 0%, #1A2E22 100%) !important; 
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 10px 14px 35px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    padding: 20px; 
    color: #fff; 
}

.scout-calendar-filters { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    align-items: center; 
    border-radius: 10px 10px 0 0;
    border-bottom: none; /* Avoid double border in the middle if they touch, though they have a 15px gap */
}

.scout-calendar-table-wrapper {
    border-radius: 0 0 10px 10px;
    border-top: none;
    overflow-x: auto; 
    padding-top: 0px;
}

.scout-calendar-filters .filter-group { 
    display: flex; 
    flex-direction: row; 
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .scout-calendar-filters .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

.scout-calendar-filters .filter-group.right { margin-left: auto; }
.scout-calendar-filters label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); margin-bottom: 0; }
.scout-calendar-filters button { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 8px 15px; border-radius: 5px; outline: none; transition: 0.3s; }
.scout-calendar-filters button:hover { border-color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.5); }

/* Custom Multi Select Dropdown */
.custom-multi-select {
    position: relative;
    width: 250px;
    font-size: 13px;
}
.custom-multi-select .select-box {
    background: rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.2); 
    color: #fff; 
    padding: 8px 15px; 
    border-radius: 5px; 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}
.custom-multi-select .select-box:hover {
    border-color: rgba(255,255,255,0.5); 
    background: rgba(0,0,0,0.5);
}
.custom-multi-select .dropdown-icon { font-size: 10px; margin-left: 10px; transition: transform 0.3s; }
.custom-multi-select.active .dropdown-icon { transform: rotate(180deg); }
.custom-multi-select .options-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1A2E22;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    margin-top: 5px;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    padding: 10px;
}
.custom-multi-select.active .options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.custom-multi-select .option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    text-transform: none;
    margin: 0;
    letter-spacing: normal;
}
.custom-multi-select .option-label input[type="checkbox"] {
    accent-color: #4CAF50;
    cursor: pointer;
}

.btn-toggle-info { cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.btn-toggle-info i { transition: transform 0.3s ease; display: inline-block; font-style: normal; }
.scout-calendar-table-wrapper::-webkit-scrollbar { height: 8px; background: transparent; }
.scout-calendar-table-wrapper::-webkit-scrollbar-thumb { background: rgba(141, 183, 151, 0.5); border-radius: 4px; }
.scout-calendar-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.scout-calendar-table th, .scout-calendar-table td { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); vertical-align: middle; }
.scout-calendar-table th { font-weight: 600; color: rgba(255,255,255,0.8); text-transform: uppercase; font-size: 13px; border-bottom: 2px solid rgba(255,255,255,0.2); text-align: center; }
.scout-calendar-table th.col-evento, .scout-calendar-table td.col-evento { text-align: left; }
.scout-calendar-table th.col-link, .scout-calendar-table td.col-link,
.scout-calendar-table th.col-map, .scout-calendar-table td.col-map,
.scout-calendar-table th.col-nivel, .scout-calendar-table td.col-nivel,
.scout-calendar-table th.col-insc, .scout-calendar-table td.col-insc { text-align: center; }
.scout-calendar-table tbody .row-event { transition: background 0.3s ease; }
.scout-calendar-table tbody .row-event:hover { background: rgba(255, 255, 255, 0.05); }
.cell-year { font-size: 24px; font-weight: bold; color: rgba(255,255,255,0.9); border-right: 1px solid rgba(255,255,255,0.1); vertical-align: top; padding-top: 20px; padding-right: 20px; text-align: center; }
.row-month .cell-month { background: rgba(141, 183, 151, 0.5); font-weight: bold; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; text-align: center; }
.cell-data { font-weight: bold; color: rgba(255,255,255,0.9); font-size: 14px; text-align: center; }
.cell-data.hide-my { font-size: 18px; color: #fff; }
.evt-address-wrapper { white-space: normal !important; min-width: 150px; }
.evt-address { font-size: 13px; margin-bottom: 5px; line-height: 1.4; word-break: break-word; }
.evt-map-link { color: #4CAF50; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; margin-top: 5px; }
.cell-evento .evt-title { font-weight: bold; font-size: 16px; margin-bottom: 5px; }
.cell-evento .evt-desc { font-size: 13px; color: rgba(255,255,255,0.8); }
.evt-img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; }
.evt-btn { display: inline-block; padding: 6px 12px; background: rgba(141, 183, 151, 0.5); color: #fff; text-decoration: none; border-radius: 5px; font-size: 13px; transition: 0.3s; text-align: center; }
.evt-btn:hover { background: #d4471e; }
.col-insc .insc-empty { color: #ffffff40; }

/* Smooth animation for extra columns */
.col-extra { 
    opacity: 0; 
    width: 0;
    max-width: 0; 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
    border-left: 0 !important;
    border-right: 0 !important;
    font-size: 0;
    transition: all 0.5s ease; 
    visibility: hidden;
}
.col-extra > * {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease;
    overflow: hidden;
}
.col-extra > *:not(.evt-address-wrapper) {
    white-space: nowrap;
}
.scout-calendar-table.show-extras .col-extra { 
    opacity: 1; 
    width: auto;
    max-width: 300px; 
    padding-left: 15px !important; 
    padding-right: 15px !important; 
    font-size: 13px;
    visibility: visible;
}
.scout-calendar-table.show-extras .col-extra > * {
    opacity: 1;
    transform: scale(1);
}
.row-event.hidden-row { display: none; }

/* Sticky Header Implementations */
@media (min-width: 768px) {
    .scout-calendar-table-wrapper {
        overflow-x: visible; /* Enables native vertical window sticky on desktop */
    }
}

.scout-calendar-filters {
    position: sticky;
    top: var(--scout-sticky-offset, 0px);
    z-index: 100;
}

.scout-calendar-table thead th {
    position: sticky;
    top: calc(var(--scout-sticky-offset, 0px) + var(--scout-filters-height, 0px));
    z-index: 90;
    background: #1A2E22;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.2);
    border-bottom: none; /* replaced with box-shadow for sticky boundary */
}

/* On mobile, because of overflow-x: auto, the wrapper becomes a scroll container.
   To allow sticky vertical headers, the wrapper must also act as the vertical scrollport. */
@media (max-width: 767px) {
    .scout-calendar-table-wrapper {
        max-height: calc(100vh - var(--scout-sticky-offset, 50px) - var(--scout-filters-height, 80px) - 20px);
        overflow-y: auto;
    }
    .scout-calendar-table thead th {
        top: 0;
    }
    .row-month .cell-month, .row-month .cell-year {
        top: var(--scout-thead-height, 40px) !important;
    }
}

.row-month .cell-month {
    position: sticky;
    top: calc(var(--scout-sticky-offset, 0px) + var(--scout-filters-height, 0px) + var(--scout-thead-height, 0px));
    z-index: 80;
    background: #375040; /* Solid color to prevent scrolling events from showing through */
}

.row-month .cell-year {
    position: sticky;
    top: calc(var(--scout-sticky-offset, 0px) + var(--scout-filters-height, 0px) + var(--scout-thead-height, 0px));
    z-index: 85;
    background: #1A2E22;
}