#title {
    margin-top: 25px;
}

/* Scope the section spacing to this page's own blocks: the sheet loads into the
   shared layout, so a bare `section` rule would bleed onto any fragment added
   here later. */
.defense-section,
#defensesControls,
.filter-toggle {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Day separator: grey box with the URV accent used by the filter pills. */
.defense-day-header {
    background-color: #ececec;
    color: var(--urv);
    font-size: 1.7rem;
    font-weight: 600;
    padding: 0.9rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1rem;
}

.participant {
    background-color: #f0fcf2;
}

.filter-toggle {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.4rem;
    padding: 0.6rem 0.9rem;
}

.filter-toggle .form-check {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
}

.filter-toggle .form-check-input,
.filter-toggle .form-check-label {
    cursor: pointer;
}

.filter-toggle .badge {
    margin-right: 0.4rem;
}

/* Search box + ensenyament pill bar above the list. Search grows, the layout
   toggle is pinned to the right edge of the row. */
#defensesControls .defense-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#defensesControls .defense-search {
    flex: 1 1 auto;
    max-width: 420px;
}

#defensesControls .defense-layout-toggle {
    margin-left: auto;
    flex: 0 0 auto;
}

/* The pressed layout button reads as selected (filled URV accent), matching
   the active state of the ensenyament filter pills above. */
#defensesControls .defense-layout-toggle .btn.active {
    background-color: var(--urv);
    border-color: var(--urv);
    color: #fff;
}

/* Two-column card grid on wide screens; hidden cards drop out of the grid
   flow, so the remaining ones reflow without gaps. */
.defense-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .defense-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* User-forced single-column layout via the top-right toggle. Wins over the
   responsive two-column rule at every width. */
.defense-cards.single-col {
    grid-template-columns: minmax(0, 1fr);
}

/* In the (default) two-column grid the card body keeps its single stacked
   column: the two info wrappers are plain blocks, so lloc/autor/director and
   tribunal/ensenyament read top to bottom exactly as before — no extra rules
   needed, the `.card-text` rows keep their own spacing. */

/* In the single-column grid each card is full width, so split the body into
   two side-by-side internal columns: lloc/autor/director on the left,
   tribunal/ensenyament on the right. `min-width:0` lets long values wrap
   instead of widening a column. The thin divider mirrors the when-cell border.
   Below the md breakpoint the body would be too narrow, so it stays stacked. */
@media (min-width: 768px) {
    .defense-cards.single-col .defense-info {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .defense-cards.single-col .defense-info-col {
        flex: 1 1 0;
        min-width: 0;
    }

    .defense-cards.single-col .defense-info-right {
        border-left: 1px solid rgba(0, 0, 0, 0.125);
        padding-left: 1.5rem;
    }

    /* Drop each column's trailing row margin so the two columns bottom-align
       cleanly instead of leaving a dangling gap under the shorter one. */
    .defense-cards.single-col .defense-info-col > .card-text:last-child {
        margin-bottom: 0;
    }
}

.defense-card {
    /* Spacing comes from the grid gap. */
    margin-bottom: 0;
    /* The inner row reaches the card edges; clip it so the card's rounded
       corners stay visible. */
    overflow: hidden;
}

/* Left cell: date and hour. Fixed width so every card's cell lines up.
   Semi-transparent background so the participant/coordinador card tint
   shows through. */
.defense-when {
    background-color: rgba(0, 0, 0, 0.04);
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 0.5rem;
    width: 8.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Let the content column shrink below its min-content width: a long
   non-wrapping child (e.g. an ensenyament chip) must not push the whole
   column to wrap under the when-cell. */
.defense-main {
    min-width: 0;
}

/* Long programme names wrap inside the grey chip instead of widening it. */
.defense-card .badge-ensenyament {
    white-space: normal;
    text-align: left;
}

.defense-when-weekday {
    color: #6c757d;
    font-size: 0.9rem;
}

.defense-when-date {
    font-weight: 600;
}

.defense-when-hora {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* On small screens the cell stacks above the card content as a strip. */
@media (max-width: 767.98px) {
    .defense-when {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        flex-direction: row;
        justify-content: flex-start;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        width: 100%;
    }

    .defense-when-hora {
        font-size: 1.15rem;
    }
}

/* The header sits inside the right column, flush against the when-cell:
   its own rounding would poke out of the card. */
.defense-card .card-header {
    border-radius: 0;
}

.defense-alumnes {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Class-based hiding for the filters (cards and day sections), replacing
   inline display=none. */
.is-filtered-out {
    display: none !important;
}