/* =========================
   PAGE CONTAINER
========================= */

.page-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding: 0 8px;        /* breathing room on edges */
    box-sizing: border-box;
    overflow-x: clip;
}

/* =========================
   MAIN GRID — fully adaptive
========================= */

.layout {
    width: 100%;
    max-width: 1400px;     /* wider cap so it breathes on large screens */
    margin: 0 auto;
    box-sizing: border-box;
    min-width: 0;

    display: grid;

    /*
      Left sidebar : clamp(180px, 18vw, 240px)
        — never smaller than 180px, never bigger than 240px, scales with viewport
      Center        : 1fr — takes all remaining space
      Right sidebar : clamp(220px, 22vw, 290px)
        — similarly fluid
    */
    grid-template-columns:
        clamp(180px, 18vw, 240px)
        minmax(0, 1fr)
        clamp(220px, 22vw, 290px);

    gap: clamp(6px, 1vw, 14px);  /* gap also scales down on smaller viewports */

    align-items: start;
}

/* =========================
   LEFT SIDEBAR
========================= */

.left-sidebar {
    /* Inherit grid column width — do NOT set a fixed width */
    min-width: 0;          /* allow shrink inside grid cell */
    overflow-x: hidden;
}

/* =========================
   CENTER CONTENT
========================= */

.content {
    min-width: 0;          /* critical — prevents grid blowout */
    background: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-self: start;
    overflow-x: hidden;
}

/* =========================
   RIGHT SIDEBAR
========================= */

.right-sidebar {
    min-width: 0;          /* allow shrink inside grid cell */
    overflow-x: hidden;
}

/* =========================
   CALENDAR — fluid inside right sidebar
========================= */

.calendar-widget {
    width: 100% !important; /* override hardcoded 94% so it fills column */
    box-sizing: border-box;
}

/* Make sidebar-standings scrollable if truly narrow */
.table-card {
    overflow-x: auto;
}

/* =========================
   HIDE RIGHT SIDEBAR on very small desktop (< 900px)
   so center content stays usable
========================= */

@media (max-width: 899px) {
    .layout {
        grid-template-columns: clamp(160px, 20vw, 220px) 1fr;
    }
    .right-sidebar {
        display: none;
    }
}

/* =========================
   HIDE BOTH SIDEBARS on tablet/mobile (< 700px)
========================= */

@media (max-width: 699px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .left-sidebar,
    .right-sidebar {
        display: none;
    }
}

/* =========================
   FULL-WIDTH CONTENT
   Used by pages that suppress both sidebars (e.g. footer legal pages)
========================= */
.static-page-layout {
    grid-column: 1 / -1;  /* span all columns so content is truly full-width */
}