
/* Configurable navigation keeps the existing TURNUS list layout. */
.feature-lucide-icon { flex:0 0 68px; width:68px; height:68px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--navigation-color) 12%,#f5f7f6); color:var(--navigation-color); }
.feature-lucide-icon svg { width:35px; height:35px; stroke-width:2.2; }
/* Halve the visible icon-to-title gap without reflowing text or moving icons. */
.feature-item { --feature-title-offset:-36px; }
.feature-item > .feature-copy,.feature-item > .feature-title { transform:translateX(var(--feature-title-offset)); }
.configuration-content { max-width:1000px; margin:0 auto; padding:24px 20px 110px; }
.configuration-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.configuration-heading h2,.configuration-form h2 { font-size:20px; margin:0; }
.configuration-row { display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid #d5dedb; }
.configuration-row>svg { width:28px; height:28px; flex:none; color:#008c78; }
.configuration-item-info { flex:1; min-width:0; display:grid; gap:4px; overflow-wrap:anywhere; }
.configuration-item-info small { color:#626b68; }
.configuration-actions { display:flex; align-items:center; gap:4px; }
.configuration-actions input { width:20px; height:20px; margin:0 10px; accent-color:#008c78; }
.config-icon-button { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; padding:8px; border:0; border-radius:6px; background:#edf4f1; color:#087c6a; cursor:pointer; }
.config-icon-button svg { width:22px; height:22px; }
.config-icon-button:hover { background:#d8eee6; }
.config-icon-button:disabled { opacity:.35; cursor:default; }
.config-icon-button:focus-visible,.config-command:focus-visible { outline:3px solid #3b8ac2; outline-offset:2px; }
.config-command { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:12px 16px; min-height:44px; border:0; border-radius:6px; color:white; background:#008c78; font-weight:700; cursor:pointer; }
.config-command.secondary { color:#155d51; background:#e6efeb; }
.config-command svg { width:22px; height:22px; flex:none; }
.configuration-form { display:grid; gap:20px; }
.configuration-field { display:grid; gap:8px; min-width:0; }
.configuration-field input,.configuration-field select { width:100%; min-width:0; border:1px solid #b9c6c1; border-radius:6px; min-height:44px; padding:10px; background:white; color:#263b33; font:inherit; }
.configuration-field[hidden] { display:none; }
.configuration-status { color:#a03024; overflow-wrap:anywhere; }
.configuration-status:empty { display:none; }
.configuration-status[data-tone="success"] { color:#147a4a; }
.configuration-form-actions { display:flex; justify-content:flex-end; gap:12px; }
.configuration-dialog { width:min(620px,calc(100% - 32px)); max-height:85dvh; padding:24px; border:0; border-radius:8px; box-shadow:0 10px 50px #0004; color:#22352d; }
.configuration-dialog::backdrop { background:#0007; }
.configuration-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; padding-top:20px; max-height:50dvh; overflow:auto; }
.configuration-icon-grid button { width:100%; height:46px; }
.configuration-icon-grid [aria-pressed="true"] { outline:2px solid #008c78; }
.configuration-page .page-header { grid-template-columns:48px 1fr 48px; }
.configuration-page .page-header h1 { font-size:22px; overflow-wrap:anywhere; }
.configuration-page .page-back-button span { display:none; }
.service-bottom-nav>button[hidden] { display:none; }
.service-bottom-nav svg,.config-nav-button svg { width:28px; height:28px; }
@media(max-width:600px) {
 .configuration-content { padding:20px 14px 110px; }
 .configuration-row { flex-wrap:wrap; gap:10px; }
 .configuration-actions { width:100%; justify-content:flex-end; }
 .configuration-heading { flex-wrap:wrap; }
 .configuration-dialog { padding:20px; }
 .configuration-page .page-header h1 { font-size:18px; }
}
@media(max-width:520px) {
 .feature-item { --feature-title-offset:-13px; }
}
@media(max-width:480px) {
 .feature-item { --feature-title-offset:-18px; }
 .feature-lucide-icon { width:58px; height:58px; flex-basis:58px; }
 .feature-lucide-icon svg { width:30px; height:30px; }
}
