/* Ruimere formulieren: minder druk, beter leesbaar en prettig op laptop én mobiel. */
dialog {
width: min(560px, calc(100% - 32px));
border: 1px solid #e0e4e8;
border-radius: 20px;
background: #f8f9fb;
}

dialog form { padding: 42px 44px 40px; }
dialog form h2 { margin: 0 0 30px; font-size: 25px; letter-spacing: -.65px; }
dialog form label { margin: 18px 0; font-size: 13px; }
dialog form input,
dialog form select { margin-top: 8px; padding: 12px 13px; border: 1px solid #d8dee5; border-radius: 10px; background: #fff; }
.form-grid { gap: 16px; }
.dialog-close { position: static; flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--muted); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.dialog-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.dialog-close:hover { background: #eaf2fb; border-color: #c9deef; color: #2469ae; }
.dialog-close:active { transform: scale(.96); }
.dialog-title-row { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; text-align: left; }
.dialog-title-row h2 { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.full { margin-top: 18px; padding: 13px 16px; }

/* Medewerkers: compact, met logisch gekoppelde velden naast elkaar. */
#employeeDialog { width: min(500px, calc(100% - 32px)); background: #f5f6f8; }
#employeeDialog form { display: block !important; padding: 24px 26px 26px !important; }
#employeeDialog form h2 { margin-bottom: 16px; font-size: 22px; }
#employeeDialog label { display: block; margin: 10px 0 !important; color: #3f4a53; }
#employeeDialog input,
#employeeDialog select { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; box-shadow: inset 0 1px 1px #192b3b05; }
#employeeDialog .form-grid { display: grid; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
#employeeDialog .primary { width: 100%; margin-top: 16px; padding: 11px 16px; }
#employeeDialog .eyebrow { color: #7f8b95; }
#employeeDialog input[type="hidden"] { display: none; }
#employeeDialog .employee-form-actions { display: flex; gap: 10px; margin-top: 12px; }
#employeeDialog .employee-form-actions .primary { order: 1; flex: 1; width: auto; margin: 0; }
#employeeDialog .employee-form-actions .danger-button { order: 2; }
#employeeDialog .employee-save-status { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: #e7f5ec; color: #26734b; font-size: 12px; font-weight: 700; }
#employeeDialog .employee-save-status.error { background: #fff0f0; color: #a54545; }
#employeeDialog .employee-form-actions .primary.saved { background: #2f855a; box-shadow: 0 2px 5px #2f855a2b; }
#employeeDialog .danger-button { border: 1px solid #e2c8c8; border-radius: 9px; background: #fff; color: #a54545; padding: 10px 14px; font-weight: 650; cursor: pointer; }
#employeeDialog .danger-button:hover { background: #fff3f3; }
.person-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.person-card:hover { border-color: #bfd1e2; box-shadow: 0 8px 28px #2469ae12; }
.person-card:focus-visible { outline: 3px solid #2469ae33; outline-offset: 2px; }
.availability-editor { border:0; padding:0; margin:14px 0 0; }
.availability-editor legend { font-size:12px; font-weight:700; color:#455257; margin-bottom:6px; }
.availability-row { display:grid; grid-template-columns:1fr 92px 12px 92px; gap:7px; align-items:center; min-height:34px; }
#employeeDialog .availability-row label { display:flex; align-items:center; gap:7px; margin:2px 0 !important; font-size:11px; }
#employeeDialog .availability-row input[type="checkbox"] { width:16px; min-height:16px; margin:0; }
#employeeDialog .availability-row input[type="time"] { min-height:30px; margin:2px 0; padding:4px 6px; font-size:11px; }

/* Taken volgen exact hetzelfde compacte dialoogpatroon. */
#taskDialog { width: min(500px, calc(100% - 32px)); background: #f5f6f8; }
#taskDialog form { display: block !important; padding: 28px 30px 30px !important; }
#taskDialog form h2 { margin-bottom: 22px; font-size: 22px; }
#taskDialog label { display: block; margin: 14px 0 !important; color: #3f4a53; }
#taskDialog input,
#taskDialog select { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
#taskDialog .form-grid { display: grid; grid-template-columns: 1fr !important; gap: 0 !important; }
#taskDialog .primary { width: 100%; margin-top: 16px; padding: 11px 16px; }
#taskDialog input[type="hidden"] { display:none; }
#taskDialog .employee-form-actions { display:flex; gap:10px; margin-top:16px; }
#taskDialog .employee-form-actions .primary { order:1; flex:1; width:auto; margin:0; }
#taskDialog .employee-form-actions .danger-button { order:2; }
#taskDialog .danger-button { border:1px solid #e2c8c8; border-radius:9px; background:#fff; color:#a54545; padding:10px 14px; font-weight:650; cursor:pointer; }

/* Persoonlijke instellingen volgen dezelfde compacte StalKompas-opmaak. */
#profileDialog { width: min(500px, calc(100% - 32px)); background: #f5f7fa; }
#profileDialog form { padding: 26px 28px 28px !important; }
#profileDialog form h2 { margin-bottom: 18px; font-size: 22px; }
#profileDialog label { margin: 0 !important; color: #3f4a53; }
#profileDialog input { min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
#profileDialog .profile-name-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
#profileDialog .profile-name-grid label,
#profileDialog .profile-field { display: flex !important; flex-direction: column; align-items: stretch; }
#profileDialog .profile-field { margin: 14px 0 0 !important; }
#profileDialog .employee-form-actions { display: flex; gap: 10px; margin-top: 18px; }
#profileDialog .employee-form-actions .primary { flex: 1; margin: 0; }
#profileDialog .employee-form-actions .primary.saved { background: #2f855a; box-shadow: 0 2px 5px #2f855a2b; }
.profile-role { margin: 16px 0 0; padding: 10px 12px; border-radius: 9px; background: #eaf2fb; color: #35658f; font-size: 12px; }
.profile-save-status { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: #e7f5ec; color: #26734b; font-size: 12px; font-weight: 700; }
.profile-save-status.error { background: #fff0f0; color: #a54545; }
[data-theme="dark"] #profileDialog { background: #17212b; }
[data-theme="dark"] #profileDialog input { background: #202c38; border-color: #3b4a58; color: var(--ink); }
[data-theme="dark"] #profileDialog label { color: #c4ced7; }
[data-theme="dark"] .profile-role { background: #1d3853; color: #9ac8f2; }
[data-theme="dark"] .profile-save-status { background: #173d2b; color: #a6e7bf; }
[data-theme="dark"] .profile-save-status.error { background: #4a2424; color: #ffc2c2; }

/* Accountmenu in de bovenbalk: direct, klein en zonder extra scherm. */
.user-menu { position: relative; }
.user-menu-popover { position: absolute; z-index: 10; top: calc(100% + 10px); right: 0; width: 244px; padding: 8px; border: 1px solid #dfe5eb; border-radius: 13px; background: #fff; box-shadow: 0 14px 36px #172b4d1c; }
.user-menu-summary { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid #e8edf2; }
.user-menu-summary .avatar { width: 32px; height: 32px; }
.user-menu-summary strong, .user-menu-summary small { display: block; }
.user-menu-summary strong { font-size: 12px; color: var(--ink); }
.user-menu-summary small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 3px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: #374650; font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.user-menu-item:hover { background: #edf4fb; color: #2469ae; }
.user-menu-item > span { width: 16px; text-align: center; font-size: 15px; }
.user-menu-logout { color: #8f4c4c; }
.user-menu-logout:hover { background: #fff3f3; color: #a54545; }
[data-theme="dark"] .user-menu-popover { border-color: #344553; background: #1b2733; box-shadow: 0 14px 36px #0006; }
[data-theme="dark"] .user-menu-summary { border-color: #344553; }
[data-theme="dark"] .user-menu-summary strong, [data-theme="dark"] .user-menu-item { color: #e6edf3; }
[data-theme="dark"] .user-menu-item:hover { background: #243d56; color: #9bcbf1; }

/* Zelfstandige beheerderspagina voor accounts. */
.accounts-panel { max-width: 760px; padding: 26px; }
.accounts-panel .account-settings { margin: 0; padding: 0; border: 0; }
.accounts-panel .account-settings > div:first-child { margin-bottom: 18px; }
.accounts-panel .account-settings small { display: block; margin-top: 3px; color: var(--muted); }
.accounts-panel .account-list { display: grid; gap: 8px; margin: 16px 0; }
.accounts-panel .account-list > div,
.accounts-panel .account-list > button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; color: inherit; font: inherit; text-align: left; }
.accounts-panel .account-list > button { cursor: pointer; }
.accounts-panel .account-list > button { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; }
.accounts-panel .account-list > button em { justify-self: end; }
.accounts-panel .account-list > button:hover { border-color: #b9d2ea; background: #f3f8fd; }
.accounts-panel .account-list > button b { color: var(--muted); font-size: 18px; font-weight: 400; }
.accounts-panel .account-list strong { display: block; font-size: 13px; }
.accounts-panel .account-list small { font-size: 11px; }
.accounts-panel .account-list em { font-style: normal; color: var(--accent); font-size: 11px; font-weight: 700; }
.accounts-panel #accountFormFields { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.accounts-panel #accountFormFields:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.accounts-panel #accountFormFields > label,
.accounts-panel #accountFormFields .form-grid label { display: flex !important; flex-direction: column; align-items: stretch; margin: 0 !important; color: #3f4a53; }
.accounts-panel #accountFormFields input,
.accounts-panel #accountFormFields select { min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
.accounts-panel #accountFormFields .form-grid { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.accounts-panel .account-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.accounts-panel .account-save-status { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 9px; background: #e7f5ec; color: #26734b; font-size: 12px; font-weight: 700; }
.accounts-panel .account-save-status.error { background: #fff0f0; color: #a54545; }
.accounts-panel #accountFormFields .primary { width: auto; margin: 0; padding: 11px 16px; }
.accounts-panel #cancelAccountFormButton { margin: 0; padding: 10px 14px; border: 1px solid #e2c8c8; border-radius: 9px; background: #fff; color: #a54545; font-weight: 650; }
.accounts-panel #cancelAccountFormButton:hover { background: #fff3f3; }
[data-theme="dark"] .accounts-panel .account-list > div,
[data-theme="dark"] .accounts-panel .account-list > button,
[data-theme="dark"] .accounts-panel #accountFormFields { background: #202c38; }

#accountEditDialog { width: min(500px, calc(100% - 32px)); background: #f5f7fa; }
#accountEditDialog form { padding: 26px 28px 28px !important; }
#accountEditDialog form h2 { margin-bottom: 18px; font-size: 22px; }
#accountEditDialog label { display: flex; flex-direction: column; margin: 14px 0 0 !important; color: #3f4a53; }
#accountEditDialog input, #accountEditDialog select { min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
#accountEditDialog .employee-form-actions { display: flex; gap: 10px; margin-top: 18px; }
#accountEditDialog .primary { order: 1; flex: 1; margin: 0; }
#accountEditDialog .danger-button { order: 2; border: 1px solid #e2c8c8; border-radius: 9px; background: #fff; color: #a54545; padding: 10px 14px; font-weight: 650; cursor: pointer; }
#accountEditDialog .danger-button:hover { background: #fff3f3; }
.account-edit-status { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: #e7f5ec; color: #26734b; font-size: 12px; font-weight: 700; }
.account-edit-status.error { background: #fff0f0; color: #a54545; }
[data-theme="dark"] #accountEditDialog { background: #17212b; }
[data-theme="dark"] #accountEditDialog input, [data-theme="dark"] #accountEditDialog select { background: #202c38; border-color: #3b4a58; color: var(--ink); }
[data-theme="dark"] #accountEditDialog label { color: #c4ced7; }

/* Medewerkers als directory: snel scannen links, context en bewerken rechts. */
.person-grid { display: block; }
.directory-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr) 28px; gap: 18px; align-items: start; }
.directory-list, .employee-detail { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.directory-list { overflow: hidden; }
.directory-letter { margin: 0; padding: 12px 18px 7px; color: #7c8993; font-size: 11px; letter-spacing: .9px; }
.employee-directory-row { display: grid; grid-template-columns: 32px minmax(150px, 1fr) minmax(150px, auto) 14px; align-items: center; gap: 11px; width: 100%; padding: 13px 18px; border: 0; border-top: 1px solid #edf0f2; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.employee-directory-row:hover, .employee-directory-row.selected { background: #f2f7fc; }
.employee-directory-row.selected { box-shadow: inset 3px 0 #2469ae; }
.employee-directory-row .avatar { width: 32px; height: 32px; font-size: 10px; }
.employee-directory-row strong, .employee-directory-row small { display: block; }
.employee-directory-row strong { font-size: 13px; }
.employee-directory-row small, .directory-row-meta { color: var(--muted); font-size: 11px; }
.directory-row-meta { text-align: right; }
.employee-detail { position: sticky; top: 92px; padding: 21px; }
.employee-detail-head { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.employee-detail-head .avatar { width: 42px; height: 42px; font-size: 12px; }
.employee-detail h2 { margin: 0; font-size: 18px; letter-spacing: -.35px; }
.employee-detail-head p:not(.eyebrow) { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.employee-detail dl { display: grid; gap: 14px; margin: 19px 0; }
.employee-detail dl div { display: grid; gap: 2px; }
.employee-detail dt { color: var(--muted); font-size: 11px; }
.employee-detail dd { margin: 0; color: #35444f; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.directory-alphabet { position: sticky; top: 92px; display: grid; justify-items: center; gap: 1px; }
.directory-alphabet button { width: 25px; height: 21px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #57718a; font-size: 10px; font-weight: 750; cursor: pointer; }
.directory-alphabet button:hover { background: #e8f1fb; color: #2469ae; }
.directory-alphabet button:disabled { color: #c9d0d6; cursor: default; }
[data-theme="dark"] .directory-list, [data-theme="dark"] .employee-detail { background: #1b2733; }
[data-theme="dark"] .employee-directory-row { border-color: #344553; color: #e9eff4; }
[data-theme="dark"] .employee-directory-row:hover, [data-theme="dark"] .employee-directory-row.selected { background: #21384e; }
[data-theme="dark"] .employee-detail-head { border-color: #344553; }
[data-theme="dark"] .employee-detail dd { color: #e6edf3; }
[data-theme="dark"] #accountEditDialog .danger-button { background: #202c38; border-color: #754343; color: #f0aaaa; }
[data-theme="dark"] .accounts-panel #accountFormFields input,
[data-theme="dark"] .accounts-panel #accountFormFields select { background: #17212b; border-color: #3b4a58; color: var(--ink); }
[data-theme="dark"] .accounts-panel #cancelAccountFormButton { background: #202c38; border-color: #754343; color: #f0aaaa; }
[data-theme="dark"] .accounts-panel .account-save-status { background: #173d2b; color: #a6e7bf; }
[data-theme="dark"] .accounts-panel .account-save-status.error { background: #4a2424; color: #ffc2c2; }

/* Overzichtelijke, niet-technische rolbeschrijving voor beheer. */
.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.permission-card { min-height: 255px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.permission-card-head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.permission-card h2 { margin: 0; font-size: 17px; letter-spacing: -.25px; }
.permission-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.permission-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; font-weight: 800; }
.permission-icon.admin { background: #e8f1fb; color: #2469ae; }
.permission-icon.planner { background: #eef2f6; color: #536677; }
.permission-icon.employee { background: #e7f5ec; color: #2f855a; }
.permission-card ul { display: grid; gap: 11px; margin: 18px 0 0; padding: 0; list-style: none; color: #53616d; font-size: 12px; line-height: 1.45; }
.permission-card li { position: relative; padding-left: 16px; }
.permission-card li::before { content: '✓'; position: absolute; left: 0; color: #2f855a; font-weight: 800; }
.permission-note { margin-top: 18px; padding: 18px 20px; }
.permission-note p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.role-placeholder { padding: 22px; }
.role-placeholder p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.role-list:has(.directory-layout) { display: block; }
.role-list > div:not(.directory-layout) { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.role-list-mark { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e8f1fb; color: #2469ae; font-size: 11px; font-weight: 800; }
.role-list strong { font-size: 12px; }
.role-list small { color: var(--muted); font-size: 10px; }
[data-theme="dark"] .permission-card { background: #1b2733; }
[data-theme="dark"] .permission-card-head { border-color: #344553; }
[data-theme="dark"] .permission-card h2 { color: #edf3f8; }
[data-theme="dark"] .permission-card ul { color: #bbc7d1; }
[data-theme="dark"] .role-list > div:not(.directory-layout) { background: #202c38; }
[data-theme="dark"] #employeeDialog .employee-save-status { background: #173d2b; color: #a6e7bf; }
[data-theme="dark"] #employeeDialog .employee-save-status.error { background: #4a2424; color: #ffc2c2; }

/* Bevestigingen gebruiken dezelfde rustige StalKompas-dialoog in plaats van browsermeldingen. */
.confirmation-dialog { width: min(420px, calc(100% - 32px)); margin: auto; background: #f5f7fa; }
.confirmation-dialog form { padding: 26px 28px 28px !important; }
.confirmation-dialog form h2 { margin-bottom: 14px; font-size: 21px; }
.confirmation-copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.confirmation-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.confirmation-actions .soft-button { padding: 10px 14px; }
.confirmation-actions .primary { margin: 0; padding: 10px 15px; }

/* Functietitels gebruiken dezelfde compacte, rustige formulierdialoog als medewerkers en accounts. */
#roleDialog { width: min(510px, calc(100% - 32px)); margin: auto; background: #f5f7fa; }
#roleDialog form { padding: 28px !important; }
#roleDialog form h2 { margin-bottom: 24px; }
#roleDialog label { display: block; margin: 14px 0 !important; color: #3f4a53; }
#roleDialog input { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
#roleDialog .employee-form-actions { display: flex; gap: 10px; margin-top: 20px; }
#roleDialog .employee-form-actions .primary { flex: 1; margin: 0; }
#roleDialog .danger-button { border: 1px solid #e2c8c8; border-radius: 9px; background: #fff; color: #a54545; padding: 10px 14px; font-weight: 650; cursor: pointer; }
[data-theme="dark"] #roleDialog { background: #1b2733; }
[data-theme="dark"] #roleDialog input { background: #17212b; color: #edf3f8; border-color: #3b4a58; }
[data-theme="dark"] #roleDialog .danger-button { background: #202c38; border-color: #754343; color: #f0aaaa; }

/* Klanten gebruiken dezelfde Core-directory en formuliermaat als Medewerkers. */
.customer-grid { display: block; }
.customer-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dce9e7; color: #286359; font-size: 10px; font-weight: 800; }
.customer-avatar.large { width: 42px; height: 42px; font-size: 12px; }
.customer-name-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
#customerDialog { width: min(510px, calc(100% - 32px)); margin: auto; background: #f5f7fa; }
#customerDialog form { padding: 28px !important; }
#customerDialog label { display: block; margin: 14px 0 !important; color: #3f4a53; }
#customerDialog input { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dde3; border-radius: 10px; background: #fff; }
#customerDialog .employee-form-actions { display: flex; gap: 10px; margin-top: 20px; }
#customerDialog .primary { flex: 1; margin: 0; }
#customerDialog .danger-button { border: 1px solid #e2c8c8; border-radius: 9px; background: #fff; color: #a54545; padding: 10px 14px; font-weight: 650; cursor: pointer; }
[data-theme="dark"] #customerDialog { background: #1b2733; }
[data-theme="dark"] #customerDialog input { background: #17212b; color: #edf3f8; border-color: #3b4a58; }

/* Klantportaal: regels blijven eenvoudig leesbaar en staan los van de lessenplanning. */
.portal-settings { max-width: 790px; padding: 0; overflow: hidden; }
.customer-portal-form { padding: 0; }
.portal-intro { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 26px 28px; background: #f6f9fc; border-bottom: 1px solid var(--line); }
.portal-intro h2, .portal-rules h2 { margin: 0 0 4px; font-size: 17px; }
.portal-intro p:not(.eyebrow) { margin: 0; max-width: 460px; color: var(--muted); font-size: 12px; }
.portal-switch { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 12px; color: #40505b; }
.portal-switch input { position: absolute; opacity: 0; }
.portal-switch span { width: 38px; height: 22px; padding: 2px; border-radius: 12px; background: #cfd8e0; transition: .2s; }
.portal-switch span::after { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: .2s; }
.portal-switch input:checked + span { background: #2469ae; }.portal-switch input:checked + span::after { transform: translateX(16px); }
.portal-rules { display: grid; gap: 0; padding: 22px 28px 8px; }.portal-rules h2 { margin-bottom: 8px; }
.portal-rule { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #edf0f2; }.portal-rule input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #2469ae; }.portal-rule strong,.portal-rule small { display: block; }.portal-rule strong { font-size: 13px; }.portal-rule small { margin-top: 2px; color: var(--muted); font-size: 11px; }.portal-hours { display: flex; align-items: center; gap: 8px; padding: 18px 0 7px; font-size: 12px; font-weight: 650; }.portal-hours input { width: 70px; margin: 0; padding: 7px 9px; }.portal-note { margin: 12px 28px 18px; padding: 11px 13px; border-radius: 9px; background: #eef4fb; color: #50708c; font-size: 11px; }.customer-portal-form > .primary { margin: 0 28px 26px; }.portal-save-status { margin: -15px 28px 22px; color: #26734b; font-size: 12px; font-weight: 700; }
.portal-domain { display: grid; gap: 6px; margin: 0 0 23px; max-width: 410px; color: #42515d; font-size: 12px; font-weight: 650; }.portal-domain input { margin: 0; }.portal-domain small { color: var(--muted); font-size: 11px; font-weight: 500; }.portal-domain strong { color: #2469ae; font-weight: 750; }

/* Rechten: één rustige keuzebalk met duidelijke vinkjes per onderdeel. */
.permissions-editor { max-width: 1000px; overflow: hidden; }.permissions-editor form { padding: 0; }.permission-role-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; border-bottom: 1px solid var(--line); background: #f7f9fb; }.permission-role-bar strong,.permission-role-bar small { display: block; }.permission-role-bar strong { font-size: 14px; }.permission-role-bar small { margin-top: 2px; color: var(--muted); font-size: 11px; }.permission-role-bar select { width: min(260px, 100%); margin: 0; }.permission-check-groups { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }.permission-check-groups section { padding: 22px 24px; border-right: 1px solid var(--line); }.permission-check-groups section:last-child { border: 0; }.permission-check-groups h2 { margin: 0 0 12px; font-size: 14px; }.permission-check { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 0; border-top: 1px solid #edf0f2; color: #44545e; font-size: 12px; font-weight: 600; }.permission-check input { width: 17px; height: 17px; margin: 0; accent-color: #2469ae; }.permission-actions { display: flex; align-items: center; gap: 13px; padding: 18px 26px; border-top: 1px solid var(--line); }.permission-actions .primary { margin: 0; }.permission-actions p { margin: 0; color: #26734b; font-size: 12px; font-weight: 700; }
@media(max-width:760px){.permission-role-bar{align-items:flex-start;flex-direction:column}.permission-check-groups{grid-template-columns:1fr}.permission-check-groups section{border-right:0;border-bottom:1px solid var(--line)}}

/* Planning: snelle keuzes links, periode-navigatie er direct rechts naast. */
.week-head #planningTodayButton { order: 1; }.week-head #currentWeekButton { order: 2; }.week-head #planningPreviousButton { order: 3; }.week-head strong { order: 4; }.week-head #planningNextButton { order: 5; }.week-head .calendar-picker { order: 6; }.week-head .planning-legend { order: 7; }
@media (max-width:560px) { .portal-intro { align-items: flex-start; flex-direction: column; gap: 16px; }.portal-rules { padding-left: 21px; padding-right: 21px; } }
@media (max-width:560px) { .customer-name-grid { grid-template-columns: 1fr; } }

/* Organisatienaam: label en invoerveld krijgen dezelfde rustige tussenruimte als de rest van StalKompas. */
#organizationDialog > form > label { display: block; }
#organizationDialog > form > label input { width: 100%; margin-top: 7px; }
#organizationDialog .organization-hours { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; max-width: 300px; }
#organizationDialog .organization-hours select { margin-top: 7px; }
#organizationDialog .organization-hours-note { margin-top: 10px; }

/* Planning: een dag is direct te openen; gelijktijdige taken blijven zichtbaar naast elkaar. */
.planning-day-head { appearance: none; width: 100%; border: 0; cursor: pointer; font: inherit; }
.planning-day-head:hover { background: #f3f7fb; }
.overlap-count { display: block; margin-top: 3px; color: #315d85; font-size: 9px; font-weight: 750; }
.planning-legend { display: grid; gap: 5px; }
.planning-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.planning-legend .legend-type::before { background: var(--legend-color, #4388c7) !important; }
.legend-label { color: #71808a; font-weight: 750; }
.planning-legend .legend-label::before { display: none; }
.legend-edit { appearance: none; padding: 0; border: 0; background: transparent; color: #2469ae; font: inherit; font-weight: 750; cursor: pointer; }
.legend-edit:hover { text-decoration: underline; }
.planning-legend-dialog form { width: min(100%, 530px); }
.legend-editor-fields { display: grid; gap: 12px; margin: 20px 0 24px; }
.legend-editor-row { display: grid; grid-template-columns: 54px minmax(150px,1fr) auto 32px; align-items: center; gap: 10px; margin: 0; }
.legend-editor-row input { margin: 0; }
.legend-remove { width: 32px; height: 32px; border: 1px solid #e7b9b5; border-radius: 8px; background: #fff; color: #b8453d; font-size: 19px; cursor: pointer; }
.legend-remove:disabled { opacity: .35; cursor: not-allowed; }
.legend-current-color { width: 38px; height: 38px; padding: 3px; border: 1px solid #d7dfe5; border-radius: 8px; background: var(--swatch); background-clip: content-box; cursor: pointer; }
.legend-current-color:hover { border-color: #2469ae; }
.legend-color-palette-dialog form { width: min(100%, 430px); }
.legend-color-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 11px; margin: 20px 0 6px; }
.legend-palette-color { width: 32px; height: 32px; padding: 0; border: 2px solid #fff; border-radius: 9px; background: var(--swatch); box-shadow: 0 0 0 1px #d7dfe5; cursor: pointer; }
.legend-palette-color:hover { transform: scale(1.1); box-shadow: 0 0 0 2px #2469ae; }

/* Eén vast pop-upstramien in heel StalKompas: kruisje, context en daarna de titel. */
dialog form > .dialog-close { margin: 0 0 9px; }
dialog form > .eyebrow { display: none; }
dialog form > h2 { margin: 0 0 22px !important; font-size: 22px !important; }
#employeeDialog form > h2 { margin-bottom: 14px !important; }
#addPlanningLegendType { margin: 4px 0 16px; }
.planning-legend-dialog .employee-form-actions { margin-top: 0; }

/* De planningbalk blijft één rustige, leesbare rij in dagweergave. */
.week-head { justify-content: flex-start; gap: 12px; }
.week-head strong { white-space: nowrap; }
.week-head .planning-legend { margin-left: 0; max-width: 480px; }

@media (max-width: 560px) {
dialog form,
#employeeDialog form,
#taskDialog form,
.confirmation-dialog form { padding: 28px 24px !important; }
.form-grid { grid-template-columns: 1fr; gap: 0; }
#employeeDialog .form-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
#profileDialog .profile-name-grid { grid-template-columns: 1fr; gap: 14px; }
.accounts-panel #accountFormFields:not([hidden]),
.accounts-panel #accountFormFields .form-grid { grid-template-columns: 1fr; }
.accounts-panel .account-form-actions { grid-column: 1; }
.permission-grid { grid-template-columns: 1fr; }
.directory-layout { grid-template-columns: 1fr; }
.employee-detail { position: static; }
.directory-alphabet { position: fixed; z-index: 4; right: 10px; top: 96px; max-height: calc(100vh - 110px); }
.employee-directory-row { grid-template-columns: 32px minmax(0, 1fr) 14px; }
.directory-row-meta { display: none; }
.role-list:has(.directory-layout) { display: block; }
dialog form h2 { margin-bottom: 24px; font-size: 22px; }
.dialog-title-row { gap: 9px; }
}
.availability-warning{margin:10px 0 4px;padding:10px 12px;border-radius:9px;background:#fff3e3;color:#9a5b16;font-size:12px;font-weight:650}.recurrence-options{padding:2px 0}.weekday-picker{display:flex;gap:6px;flex-wrap:wrap}.weekday-picker label{margin:0}.weekday-picker input{position:absolute;opacity:0;width:1px}.weekday-picker label{padding:7px 9px;border:1px solid var(--line);border-radius:8px;cursor:pointer}.weekday-picker label:has(input:checked){background:var(--accent-soft);border-color:#9fc7bc;color:var(--accent)}.optional{font-weight:400;color:var(--muted)}
.availability-alert{display:block;margin-top:5px;color:#a45d13;font-size:9px;font-weight:750}.lesson.availability-conflict{box-shadow:inset 0 0 0 1px #e7b56e}.occurrence-check{margin-top:7px;padding:4px 7px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font-size:9px;font-weight:700;cursor:pointer}

/* Rustige meldingen: alleen acties die aandacht vragen. */
.notification-menu{position:relative}.notification-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-height:min(520px,calc(100vh - 90px));overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 18px 45px #15221a22;z-index:20}.notification-panel[hidden]{display:none}.notification-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:17px 17px 12px;border-bottom:1px solid var(--line)}.notification-panel-head strong,.notification-panel-head small,.notification-item strong,.notification-item small,.notification-empty strong,.notification-empty small{display:block}.notification-panel-head strong{font-size:14px}.notification-panel-head small,.notification-item small,.notification-empty small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}.notification-read-all{padding:0;border:0;background:none;color:#2469ae;font:inherit;font-size:11px;font-weight:750;cursor:pointer;white-space:nowrap}.notification-list{display:grid}.notification-item{display:grid;grid-template-columns:30px minmax(0,1fr) 8px;align-items:start;gap:10px;width:100%;padding:13px 16px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-align:left}.notification-item:last-child{border-bottom:0}.notification-item:hover{background:#f4f8fc}.notification-item.is-read{opacity:.65}.notification-item strong{font-size:12px}.notification-item>i{width:6px;height:6px;margin-top:6px;border-radius:999px;background:#2b77b7}.notification-kind{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#e8f2fc;color:#2167ae;font-size:13px;font-weight:800}.notification-kind.priority{background:#fdebe8;color:#bd4e40}.notification-kind.conflict{background:#fff1dc;color:#a45d13}.notification-empty{padding:34px 22px;text-align:center}.notification-empty>span{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 9px;border-radius:50%;background:#e7f4ed;color:#328c65;font-size:18px}.notification-empty strong{font-size:13px}.notification-button:not(.has-unread)>i{display:none}@media(max-width:560px){.notification-panel{position:fixed;top:66px;right:12px;left:12px;width:auto;max-height:calc(100vh - 82px)}}

.global-search-dialog{width:min(580px,calc(100% - 32px))}.global-search-dialog form{padding:28px}.global-search-dialog h2{margin:0 0 16px}.global-search-input{display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #b9cbd9;border-radius:10px;background:#fff;color:#68808f}.global-search-input:focus-within{border-color:#2673bc;box-shadow:0 0 0 2px #dbeafb}.global-search-input span{font-size:19px;line-height:1}.global-search-input input{flex:1;min-width:0;width:auto;margin:0;border:0;box-shadow:none;padding:12px 0;font-size:14px}.global-search-input input:focus{outline:0}.global-search-input button{display:grid;place-items:center;width:25px;height:25px;padding:0;border:0;border-radius:50%;background:transparent;color:#2d70b5;font-size:20px;font-weight:500;line-height:1;cursor:pointer}.global-search-input button:hover{background:#e8f2fc}.global-search-input button[hidden]{display:none}.global-search-input input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.global-search-hint{margin:9px 0 15px;color:var(--muted);font-size:11px}.global-search-results{max-height:min(52vh,430px);overflow:auto}.global-search-empty{margin:0;padding:32px 10px;color:var(--muted);font-size:12px;text-align:center}.search-result-group+ .search-result-group{margin-top:14px}.search-result-group h3{margin:0 0 5px;padding:0 8px;color:#7e8e98;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.search-result-group button{display:grid;grid-template-columns:31px minmax(0,1fr) 12px;align-items:center;gap:10px;width:100%;padding:10px 9px;border:0;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.search-result-group button:hover{background:#edf5fc}.search-result-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8f2fc;color:#276eae;font-size:13px}.search-result-group strong,.search-result-group small{display:block}.search-result-group strong{font-size:12px}.search-result-group small{margin-top:2px;color:var(--muted);font-size:11px}.search-result-arrow{color:#73838c;font-size:17px}

/* Paardenkaart volgt hetzelfde rustige invoerpatroon als de overige StalKompas-dialogen. */
#horseDialog { width:min(500px,calc(100% - 32px)); background:#f5f7fa; }
#horseDialog form { display:block !important; padding:28px 30px 30px !important; }
#horseDialog form > h2 { margin:0 0 20px !important; }
#horseDialog label { display:flex; flex-direction:column; align-items:stretch; margin:13px 0 !important; color:#3f4a53; }
#horseDialog input,#horseDialog select { display:block; width:100%; min-height:42px; margin-top:6px; padding:10px 12px; border:1px solid #d8dde3; border-radius:10px; background:#fff; color:var(--ink); }
#horseDialog input[type="hidden"] { display:none; }
#horseDialog .form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#horseDialog .form-grid label { min-width:0; }
#horseDialog .employee-form-actions { display:flex; gap:10px; margin-top:18px; }
#horseDialog .employee-form-actions .primary { flex:1; margin:0; }
#horseDialog .employee-form-actions .danger-button { margin:0; }

/* De paardenzoeker gebruikt dezelfde blauwe focuskleur en donkere invulling als algemeen zoeken. */
.search-field { border-color:#b9cbd9; color:#68808f; }
.search-field:focus-within { border-color:#2673bc; box-shadow:0 0 0 2px #dbeafb; }
.search-field input { background:transparent; color:var(--ink); }
.search-field input::placeholder { color:var(--muted); opacity:1; }
.search-field input:focus { outline:0; }

/* Een melding blijft compact, ook wanneer de pagina breder is dan het bericht. */
.toast { width:max-content; max-width:min(calc(100vw - 32px),460px); white-space:normal; text-align:center; }

:root[data-theme="dark"] #horseDialog { background:#17212b; border-color:#344353; color:#edf3f8; }
:root[data-theme="dark"] #horseDialog label { color:#c4ced7; }
:root[data-theme="dark"] #horseDialog input,:root[data-theme="dark"] #horseDialog select { background:#223242; border-color:#40566a; color:#f2f7fb; color-scheme:dark; }
:root[data-theme="dark"] .search-field { background:#223242; border-color:#6db5f4; color:#eef5fb; }
:root[data-theme="dark"] .search-field input { background:transparent; color:#f2f7fb; }
:root[data-theme="dark"] .search-field input::placeholder { color:#98aab9; }

@media(max-width:560px){#horseDialog .form-grid{grid-template-columns:1fr;gap:0}}

/* Rechten: per onderdeel één rij met bekijken en beheren. */
.permission-check-groups { display: block; }
.permission-section { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.permission-section:last-child { border-bottom: 0; }
.permission-section h2 { margin: 0 0 12px; font-size: 14px; }
.permission-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.permission-table-head, .permission-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px; align-items: center; }
.permission-table-head { min-height: 36px; padding: 0 14px; background: #f7f9fb; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.permission-row { min-height: 54px; padding: 0 14px; border-top: 1px solid var(--line); color: var(--text); }
.permission-row strong { font-size: 13px; }
.permission-toggle { display: inline-flex; justify-self: start; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.permission-toggle input { width: 17px; height: 17px; margin: 0; accent-color: #2469ae; }
.permission-toggle.is-unavailable { color: var(--muted); cursor: default; }
[data-theme="dark"] .permission-table-head { background: #18232e; }
@media(max-width:650px) { .permission-table-head, .permission-row { grid-template-columns: minmax(0, 1fr) 92px 92px; } .permission-section { padding: 18px; } }


/* Directoryvullers gebruiken de volledige beschikbare breedte. */
#horseGrid, #locationGrid { display: block; }
#horseGrid .directory-layout, #locationGrid .directory-layout { margin-top: 0; }


/* Paarden- en locatie-iconen volgen de uitlijning van de medewerkersdirectory. */
.employee-directory-row .entity-avatar { width: 32px; height: 32px; font-size: 14px; }
.employee-detail-head .entity-avatar { width: 42px; height: 42px; font-size: 18px; }
/* Paardformulier: compacte keuzes en dezelfde actievolgorde als medewerkers. */
#horseDialog input[type="checkbox"]{appearance:auto!important;width:17px!important;height:17px!important;min-height:17px!important;margin:0!important;padding:0!important;accent-color:#2874ba}
#horseDialog .form-grid label:has(input[type="checkbox"]){display:flex;align-items:center;gap:8px;min-height:34px;margin:0}
#horseDialog .employee-form-actions{display:flex;gap:10px;align-items:center}
#horseDialog #saveHorseButton{order:1;flex:1}
#horseDialog #deleteHorseButton{order:2;flex:0 0 auto;background:transparent;color:#e88da8;border-color:#844557}

/* Nieuwe locatie volgt de vaste dialooguitlijning. */
#locationDialog{width:min(460px,calc(100% - 32px))}
#locationDialog form{display:grid;gap:16px;padding:28px}
#locationDialog form>label{display:grid;gap:7px;margin:0}
#locationDialog form input,#locationDialog form select{width:100%;margin:0}
#locationDialog .employee-form-actions{margin-top:2px;justify-content:flex-start}
#locationDialog .employee-form-actions .primary{width:auto;min-width:150px}
#horseDialog .form-grid label:has(input[type="checkbox"]){display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;margin:13px 0!important}
#horseDialog .form-grid label:has(input[type="date"]){display:flex!important;flex-direction:column!important;align-items:stretch!important}
#horseDialog #deleteHorseButton{min-height:38px;padding:0 16px;border:1px solid #9c4d63!important;border-radius:9px!important;background:transparent!important;color:#f09bb3!important;font-weight:700!important}

:root[data-theme="dark"] .dialog-close{background:#172431;border-color:#35495b;color:#aebdca}
:root[data-theme="dark"] .dialog-close:hover{background:#1d3850;border-color:#41617c;color:#9ed5fb}

/* V34 — één uniforme StalKompas-vensterstijl */
.stalkompas-dialog{
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  color:var(--ink)!important;
  box-shadow:0 24px 80px rgba(25,43,58,.24)!important;
}
.stalkompas-dialog::backdrop{background:rgba(19,32,43,.34)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.stalkompas-dialog-form{position:relative!important}
.stalkompas-dialog-form>.dialog-close{
  display:grid!important;
  place-items:center!important;
  position:static!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  margin:0 0 9px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:var(--paper)!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.stalkompas-dialog-form>.dialog-close svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.stalkompas-dialog-form>.dialog-close:hover{background:#eaf2fb!important;border-color:#c9deef!important;color:#2469ae!important}
.stalkompas-dialog-form>.dialog-close:active{transform:scale(.96)!important}
.stalkompas-dialog-form>.dialog-context-label{margin:0 0 3px!important;color:var(--muted)!important}
.stalkompas-dialog-form>.dialog-main-title{margin:0 0 20px!important;color:var(--ink)!important}
.stalkompas-dialog-actions{align-items:center!important;gap:10px!important;margin-top:16px!important}
.stalkompas-dialog-actions>.primary{min-height:40px!important}
.stalkompas-dialog-actions>.danger-button{min-height:40px!important;border:1px solid #e3b4b0!important;border-radius:9px!important;background:var(--paper)!important;color:#b44f47!important;font-weight:650!important}
.stalkompas-dialog-actions>.danger-button:hover{background:#fff4f3!important;border-color:#d9908a!important}
:root[data-theme="dark"] .stalkompas-dialog{background:#172431!important;border-color:#35495b!important}
:root[data-theme="dark"] .stalkompas-dialog-form>.dialog-close{background:#172431!important;border-color:#35495b!important;color:#aebdca!important}
:root[data-theme="dark"] .stalkompas-dialog-form>.dialog-close:hover{background:#1d3850!important;border-color:#41617c!important;color:#9ed5fb!important}
:root[data-theme="dark"] .stalkompas-dialog-actions>.danger-button{background:#172431!important;border-color:#704b4b!important;color:#f2a39c!important}
@media(max-width:600px){
  .stalkompas-dialog{width:calc(100% - 16px)!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;border-radius:16px!important}
  .stalkompas-dialog-form{padding:22px 18px 24px!important}
  .stalkompas-dialog-form>.dialog-close{width:36px!important;height:36px!important;margin-bottom:10px!important}
  .stalkompas-dialog-form>.dialog-main-title{font-size:22px!important;line-height:1.15!important;margin-bottom:19px!important}
  .stalkompas-dialog-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
}