.app-content:has(.custom-fields-page) { min-width: 0; }
.custom-fields-page { min-width: 0; container-type: inline-size; }
.custom-fields-page .page-header-content { gap: 1rem; flex-wrap: wrap; }
.custom-fields-page .page-header-content > div { min-width: 0; }
.custom-fields-page .page-header-title { flex: 1 1 24rem; }
.custom-fields-page .page-header-title p:last-child { margin-bottom: 0; }
.custom-fields-page .page-header-actions { flex-wrap: wrap; }
.custom-fields-page .page-header-actions .btn { margin: 0; }
.custom-fields-page h1 { overflow-wrap: anywhere; }
.custom-fields-table { overflow-x: auto; max-width: 100%; }
.custom-fields-table .table { table-layout: fixed; }
.custom-fields-table thead th:nth-child(1) { width: 29%; }
.custom-fields-table thead th:nth-child(2) { width: 33%; }
.custom-fields-table thead th:nth-child(3) { width: 21%; }
.custom-fields-table thead th:nth-child(4) { width: 17%; }
.custom-fields-table tbody th,
.custom-fields-table tbody td { padding: 1rem; vertical-align: top; overflow-wrap: anywhere; }
.custom-fields-table tbody th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); }
.custom-field-name > span { display: block; }
.custom-field-name .custom-field-type { display: inline-block; margin-top: 0.5rem; border: 1px solid var(--border); background: var(--light); color: var(--secondary); font-size: 0.75rem; }
.custom-field-access { margin: 0; font-size: 0.875rem; }
.custom-field-access > div + div { margin-top: 0.65rem; }
.custom-field-access dt { color: var(--secondary); font-size: 0.75rem; }
.custom-field-access dd { margin: 0; }
.custom-field-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.custom-field-actions .btn { margin: 0; }
.custom-fields-mobile-label { display: none; }
.custom-fields-form-help { margin: 0 0 1.25rem; }
.custom-fields-section { min-width: 0; flex: 0 1 calc(50% - 0.5rem); width: 100%; }
.custom-fields-section .view-section-header-content { gap: 0.75rem; flex-wrap: wrap; }
.custom-fields-display { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.custom-fields-display .view-field { min-width: 0; }
.custom-fields-display .view-field-label,
.guided-field[id^="custom-field-"] label { overflow-wrap: anywhere; }
.guided-field[id^="custom-field-"] textarea { resize: vertical; }
.guided-field[id^="custom-field-"] [aria-invalid="true"] { border-color: var(--danger); }
.custom-field-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.custom-field-dialog { box-sizing: border-box; margin: auto; width: min(32rem,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 0; border: 1px solid var(--border); color: var(--dark); box-shadow: var(--shadow-lg); }
.custom-field-dialog::backdrop { background: rgba(0,0,0,0.6); }
.custom-field-dialog .modal-header { gap: 1rem; }
.custom-field-dialog .modal-close { min-width: 2.75rem; min-height: 2.75rem; flex-shrink: 0; }
.custom-field-dialog .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
.custom-field-dialog .btn { margin: 0; }
.custom-field-dialog :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
[id^="custom-field-"] { scroll-margin-top: 5rem; }
@container (max-width: 42rem) {
    .custom-fields-table .table,
    .custom-fields-table tbody,
    .custom-fields-table tbody tr,
    .custom-fields-table tbody th,
    .custom-fields-table tbody td { display: block; width: 100%; }
    .custom-fields-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .custom-fields-table tbody tr { padding: 1rem; border-bottom: 1px solid var(--border); }
    .custom-fields-table tbody tr:last-child { border-bottom: 0; }
    .custom-fields-table tbody th,
    .custom-fields-table tbody td { padding: 0; border: 0; }
    .custom-fields-table tbody td { margin-top: 1rem; }
    .custom-field-access > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 0.75rem; }
    .custom-fields-mobile-label { display: inline; color: var(--secondary); font-size: 0.875rem; }
    .custom-field-actions .btn { flex: 1; }
}
@media(max-width:768px) { .custom-fields-page .page-header-title { flex-basis: auto; } }
@media(max-width:600px) {
    .custom-fields-display { grid-template-columns: minmax(0,1fr); }
    .custom-field-dialog .modal-header,
    .custom-field-dialog .modal-body,
    .custom-field-dialog .modal-footer { padding: 1rem; }
    .custom-field-dialog .modal-footer { flex-direction: column; }
    .custom-field-dialog .modal-footer .btn { width: 100%; min-height: 2.75rem; }
}