/* Calendar/List toggle and month chooser (moved from header.css)
   Scoped to .controls-row / .controls-inner so it aligns with the calendar container
*/

.controls-row {
    width: 100%;
    padding: 0.35rem 0; /* top/bottom spacing; horizontal handled by .controls-inner */
    background: transparent;
}

.controls-row .controls-inner {
    max-width: 1400px; /* match .container */
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border-radius: 0; /* square corners */
    background: transparent; /* no separate bar */
    color: #2c3e50; /* darker text for contrast */
}  

.controls-inner .view-toggle {
    display: flex;
    gap: 0.4rem;
    background: transparent;
    border-radius: 6px;
    padding: 0.2rem;
    border: 1px solid #e6e6e6;
}

.controls-inner .view-toggle a {
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    color: #4b5563; /* neutral dark text */
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
    font-weight: 600;
    font-size: 0.95rem;
}

.controls-inner .view-toggle a.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.controls-inner .view-toggle a:hover:not(.active) {
    color: #111827;
} 

.controls-inner .navigation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto; /* push month chooser to the right */
}

.controls-inner .nav-button {
    background: #ffffff;
    border: 1px solid #d1d5db;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #4b5563;
    font-weight: 600;
    transition: all 0.12s;
}

.controls-inner .nav-button:hover {
    background: #f8f8f8;
    border-color: #9ca3af;
}

.controls-inner .current-month {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50; /* darker */
    min-width: 180px;
    text-align: center;
} 

@media (max-width: 1024px) {
    .controls-inner { padding: 0 1rem; }
    .controls-inner .view-toggle { display: none !important; }
    .controls-inner .navigation { gap: 0.5rem; }
    .controls-inner .current-month { min-width: 140px; }
}

/* Back link row (align with container like controls) */
.back-row {
    width: 100%;
    padding: 0.35rem 0; /* spacing above/below */
    background: transparent;
}

.back-row .back-inner {
    max-width: 1400px; /* match .container */
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    border-radius: 0; /* square */
    background: transparent; /* no separate bar */
}

.back-inner .back-link {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
}

.back-inner .back-link:hover {
    color: #111827;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .back-inner { padding: 0 1rem; }
}