/* Inline controls must not inherit the spacing of stacked form labels. */
[data-cancellation-field][hidden], .cancellation-reason[hidden] { display:none!important; }
.cancellation-reason { display:block; font-size:12px; line-height:1.4; color:#64748b; overflow-wrap:anywhere; margin:8px 0 0; }
.theme-dark .cancellation-reason { color:#a3b2c8; }
.settings-grid { display:flex; flex-wrap:wrap; align-items:flex-start; }
.settings-grid > .settings-card { flex:1 1 320px; min-width:0; align-content:start; }
.settings-grid > .settings-card:has([data-service-color-settings]) { flex-basis:100%; }
.settings-card .theme-preview { flex-wrap:wrap; }
.service-color-sync { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.service-color-sync > span { font-size:12px; color:#64748b; }
.theme-dark .service-color-sync > span { color:#94a3b8; }
.service-color-sync .button { font-size:13px; }
.service-color-toggle,
.theme-switch,
.notice-tools > label,
.feature-form label,
.calendar-filters label,
.service-rule-form > label {
    margin:0;
}

.service-color-setting-row {
    grid-template-columns:minmax(160px,1fr) minmax(0,2fr) auto;
    grid-template-areas:"service pattern actions";
    align-items:center;
}
.service-color-toggle { grid-area:service; min-width:0; line-height:1.4; }
.service-color-toggle input { display:block; flex:0 0 18px; margin:0; padding:0; }
.service-color-toggle > span { min-width:0; overflow-wrap:anywhere; }
.service-color-pattern { grid-area:pattern; min-width:0; line-height:1.4; overflow-wrap:anywhere; }
.service-color-actions { grid-area:actions; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.service-color-actions input[type=color] { display:block; flex:0 0 54px; margin:0; }
.service-color-actions .service-rule-delete { margin:0; line-height:1.4; }

.settings-card-head h2:only-child,
.section-head > div > h2:only-child,
.client-card-top h3 { margin:0; }
.settings-row strong { line-height:1.4; }
.avatar-actions > .button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; font-size:14px; line-height:1.4; margin:0; }
.feature-form label:has(> input[type=checkbox]):not(.permission-tile) { display:flex; align-items:center; gap:10px; line-height:1.4; }
.feature-form label:not(.permission-tile) > input[type=checkbox] { flex:0 0 18px; width:18px; height:18px; margin:0; padding:0; }

@media(max-width:760px) {
    .service-color-setting-row {
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"service actions" "pattern pattern";
    }
    .service-color-actions { max-width:160px; }
}