/*
 * Screen 2j -- Instellingen.
 *
 * Chapter-specific, so it lives in its own file rather than in base.css (see
 * the note there). Same rule as everywhere else: no literal colour, size or
 * radius, only tokens.
 */

.settings__intro {
    color: var(--text-muted);
}

/*
 * Two columns, as the handoff draws it: the long reason table on the left, the
 * three short panels stacked on the right. One column on a laptop.
 */
.settings {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-5);
    align-items: start;
}

.settings__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

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

.settings__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.settings__note,
.settings__muted {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.settings__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings__inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.settings__inline-form .field__control {
    flex: 1;
    width: auto;
    min-width: 0;
}

.settings__short,
.settings__inline-form .settings__date {
    flex: 0 0 auto;
    width: 10rem;
}

/* ---- The two draggable lists ------------------------------------------- */

.settings__handle {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-2);
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
}

.is-dragging {
    background: var(--surface-sunken);
}

.settings__rename summary {
    cursor: pointer;
}

.settings__rename[open] summary {
    margin-bottom: var(--space-2);
}

.settings__row-actions {
    white-space: nowrap;
}

.settings__row-actions form {
    display: inline;
}

/* A button that reads as a link: row actions, not calls to action. */
.settings__link-button {
    min-height: var(--tap-min);
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: var(--weight-bold);
    cursor: pointer;
}

/*
 * A ja/nee switch. The word is always spelled out; the fill is the shortcut,
 * never the only way to read it -- same rule as the pills.
 */
.toggle {
    min-width: 3.5rem;
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    background: var(--state-empty-surface);
    color: var(--state-empty-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
}

.toggle--on {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
}

/* ---- Werkdagen ---------------------------------------------------------- */

/* The day chips themselves are shared with 2h: see .day-chips in app.css. */

/* ---- Feestdagen --------------------------------------------------------- */

.settings__year {
    font-size: var(--text-base);
}

.settings__holidays {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings__holidays li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    border-bottom: var(--border-width) solid var(--border);
}

.settings__holidays li:last-child {
    border-bottom: 0;
}