/* Calendar / Agenda terminal page, built on top of the shared world-terminal shell. */

/* Explicit display rules below (grid/flex) would otherwise beat the UA [hidden] stylesheet. */
.calendar-terminal [hidden] {
    display: none !important;
}

.calendar-terminal .around-world-layout.calendar-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
}

.calendar-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(120, 255, 235, 0.18);
    background: rgba(6, 22, 24, 0.6);
}

.cal-nav-btn {
    min-width: 2rem;
    height: 2rem;
    border: 1px solid rgba(120, 255, 235, 0.4);
    border-radius: 0;
    background: rgba(2, 13, 16, 0.9);
    color: #a5ffe8;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
    border-color: #ff6976;
    background: rgba(226, 0, 26, 0.22);
    color: #ffd9dd;
}

.cal-nav-today {
    padding: 0 0.6rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cal-nav-summarize {
    width: auto;
    padding: 0 0.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cal-nav-summarize.is-active {
    border-color: #63e59a;
    background: rgba(99, 229, 154, 0.18);
    color: #63e59a;
}

.cal-month-label {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
    color: #d3fff4;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.cal-picker-btn {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font-family: var(--mono);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.cal-picker-btn:hover,
.cal-picker-btn:focus-visible,
.cal-picker-btn[aria-expanded="true"] {
    border-color: rgba(120, 255, 235, 0.4);
    color: #63e59a;
}

.cal-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: max-content;
    max-height: 220px;
    padding: 6px;
    overflow-y: auto;
    transform: translateX(-50%);
    border: 1px solid rgba(120, 255, 235, 0.4);
    background: rgba(3, 14, 16, 0.98);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

#calendar-year-picker {
    grid-template-columns: repeat(3, 1fr);
}

.cal-picker-option {
    border: 1px solid rgba(120, 255, 235, 0.16);
    background: rgba(10, 45, 45, 0.5);
    color: #b8fce8;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
}

.cal-picker-option:hover,
.cal-picker-option:focus-visible {
    border-color: #63e59a;
    color: #63e59a;
}

.cal-picker-option.is-selected {
    border-color: #f0bf62;
    background: rgba(240, 191, 98, 0.16);
    color: #f0bf62;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.5rem 0.6rem 0;
    color: rgba(165, 255, 232, 0.5);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(2.6rem, 1fr);
    gap: 3px;
    flex: 1;
    min-height: 0;
    padding: 0.5rem 0.6rem;
}

.calendar-cell {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(120, 255, 235, 0.14);
    background: rgba(4, 18, 20, 0.55);
    color: rgba(184, 252, 232, 0.75);
    font-family: var(--mono);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.calendar-cell:hover:not(.is-outside),
.calendar-cell:focus-visible {
    border-color: rgba(165, 255, 232, 0.5);
    background: rgba(14, 46, 48, 0.7);
}

.calendar-cell.is-outside {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.calendar-cell-day {
    position: relative;
    z-index: 2;
    font-size: 0.72rem;
}

.calendar-cell.has-thumb .calendar-cell-day {
    padding: 0 3px;
    background: rgba(2, 10, 12, 0.72);
    color: #d3fff4;
}

.calendar-cell-thumb {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8) brightness(0.75);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.calendar-cell.has-thumb:hover .calendar-cell-thumb,
.calendar-cell.has-thumb:focus-visible .calendar-cell-thumb {
    filter: saturate(1) brightness(0.95);
    transform: scale(1.06);
}

.calendar-cell.has-thumb.has-future .calendar-cell-thumb {
    filter: saturate(1) brightness(0.85);
}

.calendar-cell.is-today {
    border-color: #f0bf62;
    box-shadow: inset 0 0 0 1px rgba(240, 191, 98, 0.5);
}

.calendar-cell.is-today .calendar-cell-day {
    color: #f0bf62;
    font-weight: 700;
}

.calendar-cell.is-selected {
    border-color: #ff6976;
    background: rgba(226, 0, 26, 0.16);
}

.calendar-cell.has-events.has-past .calendar-cell-day {
    color: rgba(165, 255, 232, 0.42);
}

.calendar-cell.has-events.has-future .calendar-cell-day {
    color: #63e59a;
}

.calendar-cell-dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 2;
    min-width: 0.9rem;
    height: 0.9rem;
    padding: 0 3px;
    border-radius: 50%;
    background: #168c72;
    color: #d3fff4;
    font-size: 0.55rem;
    line-height: 0.9rem;
    text-align: center;
}

.calendar-cell-dot-plain {
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0;
    padding: 0;
}

.calendar-cell.has-past .calendar-cell-dot {
    background: rgba(165, 255, 232, 0.28);
    color: rgba(4, 18, 20, 0.9);
}

.calendar-cell.has-future .calendar-cell-dot {
    background: #ff6976;
    box-shadow: 0 0 8px rgba(255, 105, 118, 0.6);
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(120, 255, 235, 0.17);
    color: rgba(165, 255, 232, 0.58);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cal-legend-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.6rem;
    border-radius: 50%;
}

.cal-legend-dot:first-child {
    margin-left: 0;
}

.cal-legend-past { background: rgba(165, 255, 232, 0.3); }
.cal-legend-today { background: #f0bf62; }
.cal-legend-future { background: #ff6976; }

.calendar-summary {
    flex: 1;
    min-height: 0;
    padding: 0.4rem 0.75rem 1rem;
    overflow-y: auto;
    scrollbar-color: #45d8bd rgba(5, 23, 26, 0.9);
    scrollbar-width: thin;
}

.calendar-summary::-webkit-scrollbar { width: 9px; }
.calendar-summary::-webkit-scrollbar-track { border-left: 1px solid rgba(120, 255, 235, 0.2); background: rgba(5, 23, 26, 0.9); }
.calendar-summary::-webkit-scrollbar-thumb { border: 2px solid rgba(5, 23, 26, 0.9); background: linear-gradient(180deg, #76f5d9, #168c72); }
.calendar-summary::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff8994, #e2001a); }

.calendar-summary-month {
    margin-bottom: 1.1rem;
}

.calendar-summary-month-title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(120, 255, 235, 0.22);
    color: #f0bf62;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-events-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.calendar-events-panel-title {
    margin: 0;
    padding: 0.9rem 0.85rem 0.35rem;
    color: #d3fff4;
    font-size: 1rem;
    font-weight: 500;
}

.calendar-events-count {
    margin: -0.15rem 0.85rem 0.7rem;
    color: #ff8994;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#calendar-events-list {
    flex: 1;
    min-height: 0;
    padding: 0 0.85rem 1rem;
    overflow-y: auto;
    scrollbar-color: #45d8bd rgba(5, 23, 26, 0.9);
    scrollbar-width: thin;
}

#calendar-events-list::-webkit-scrollbar { width: 9px; }
#calendar-events-list::-webkit-scrollbar-track { border-left: 1px solid rgba(120, 255, 235, 0.2); background: rgba(5, 23, 26, 0.9); }
#calendar-events-list::-webkit-scrollbar-thumb { border: 2px solid rgba(5, 23, 26, 0.9); background: linear-gradient(180deg, #76f5d9, #168c72); }
#calendar-events-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff8994, #e2001a); }

.calendar-event-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(120, 255, 235, 0.14);
    color: #b8fce8;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.calendar-event-row:hover,
.calendar-event-row:focus-visible {
    background: rgba(120, 255, 235, 0.06);
    color: #ff9ca5;
}

.calendar-event-date {
    flex: 0 0 auto;
    min-width: 5.6rem;
    color: rgba(165, 255, 232, 0.6);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
}

.calendar-event-thumb {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    object-fit: cover;
    border: 1px solid rgba(120, 255, 235, 0.28);
    filter: saturate(0.85) brightness(0.9);
}

.calendar-event-row:hover .calendar-event-thumb,
.calendar-event-row:focus-visible .calendar-event-thumb {
    filter: saturate(1) brightness(1);
}

.calendar-event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.calendar-event-title {
    overflow: hidden;
    color: inherit;
    font-size: 0.83rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-meta {
    color: rgba(165, 255, 232, 0.5);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
}

.calendar-event-flag {
    flex: 0 0 auto;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(120, 255, 235, 0.3);
    color: rgba(165, 255, 232, 0.6);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-event-row.is-future .calendar-event-flag {
    border-color: rgba(255, 105, 118, 0.5);
    color: #ff8994;
}

.calendar-event-row.is-past {
    opacity: 0.72;
}

.calendar-back-btn {
    margin: 0.6rem 0 0.9rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(120, 255, 235, 0.36);
    background: rgba(10, 45, 45, 0.65);
    color: #b8fce8;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.calendar-back-btn:hover,
.calendar-back-btn:focus-visible {
    border-color: #ff6976;
    color: #ff9ca5;
}

@media (max-width: 979px) {
    .calendar-terminal .around-world-layout.calendar-layout {
        grid-template-columns: 1fr;
    }
    .calendar-grid {
        grid-auto-rows: minmax(2.2rem, 1fr);
    }
    .calendar-events-panel {
        min-height: 320px;
    }
}

@media (max-width: 620px) {
    .calendar-toolbar {
        flex-wrap: wrap;
    }
    .cal-month-label {
        order: -1;
        flex: 1 0 100%;
        padding-bottom: 0.3rem;
    }
    .calendar-event-date {
        min-width: 4.2rem;
    }
    .calendar-event-thumb {
        width: 2.2rem;
        height: 2.2rem;
    }
}