/* =========================================================================
   Communication Settings admin page (Components/Admin/CommunicationSettingsPage.razor)
   -------------------------------------------------------------------------
   Generic form/alert rules were removed from this file - including the generic .btn,
   .form-control, .form-group, .form-label, .alert and .form-check rules,
   which were global (this stylesheet is not scoped) and shadowed Bootstrap
   app-wide.

   What is left below has no design-system equivalent:
     - the responsive column layout of the "new setting" form;
     - two table cell hints.
   ========================================================================= */

/* -------------------------------------------------------------------------
   "Nieuwe instelling toevoegen" form - mobile first single column.
   Each field already supplies its own label/control stack, so only the
   column layout lives here.
   ------------------------------------------------------------------------- */
.comm-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The gap already separates the rows; a field's own bottom margin would
   double it. */
.comm-settings-form > div {
    margin-bottom: 0;
}

/* Long event type names must wrap rather than stretch the table.
   Scoped through `table` so it outranks generic table cell rules. */
table .event-type-cell {
    max-width: 200px;
    word-break: break-word;
}

table .actions-cell {
    text-align: center;
}

/* Tablet and up: the two selects sit side by side, the switch and the submit
   button share the second row. */
@media (min-width: 768px) {
    .comm-settings-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
        align-items: start;
    }

    .comm-settings-form > div:nth-of-type(3) {
        grid-column: 1 / -1;
    }

    .comm-settings-form__submit {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .comm-settings-form {
        grid-template-columns: repeat(3, 1fr);
    }

    .comm-settings-form > div:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .comm-settings-form__submit {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
    }
}