/* One settings navigation, shared by the desktop rail and the mobile index. */
.settings-sidebar { display: none; }
html.settings-mode .app-tabs { padding: var(--space-300) var(--space-200) !important; }
html.settings-mode .app-tabs::before { display: none; }
html.settings-mode .app-tabs > :not(.settings-sidebar) { display: none !important; }
html.settings-mode .app-tabs > .settings-sidebar { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.settings-mode .settings-sidebar .settings-exit {
    justify-content: flex-start; text-align: left !important; color: var(--lz-rail-fg-strong) !important;
    min-height: 40px; margin-bottom: var(--space-400); font-size: var(--text-base);
}
html.settings-mode #app-settings-nav { display: flex; flex-direction: column; gap: var(--space-400); width: 100%; max-width: none; }
.settings-nav-label { margin: 0 0 var(--space-100); padding: var(--space-100) var(--space-300); font: 600 var(--text-xs)/var(--lh-base) var(--bbr-font-sans); color: var(--lz-rail-muted); }
.settings-nav-group { display: flex; flex-direction: column; gap: var(--space-050); }
.settings-nav-group[hidden], .app-settings-nav-item[hidden], .settings-search-empty[hidden] { display: none !important; }
html.settings-mode .app-settings-nav-item.btn {
    display: flex; align-items: center; gap: var(--space-200); width: 100%; min-height: 32px;
    padding: var(--space-150) var(--space-300) !important; border: 0 !important;
    border-radius: var(--radius-md); box-shadow: none !important; background: transparent !important;
    color: var(--lz-rail-fg) !important; font: 500 var(--text-sm)/20px var(--bbr-font-sans);
    text-align: left; white-space: normal;
}
.settings-mode .app-settings-nav-item > span { display: none !important; }
.settings-mode .app-settings-nav-item > #app-settings-config-badge { position: static !important; margin-left: auto; }
html.settings-mode .app-settings-nav-item.btn:hover { background: var(--lz-rail-hover) !important; color: var(--lz-rail-fg-strong) !important; }
html.settings-mode .app-settings-nav-item.btn.active { background: var(--lz-rail-hover) !important; color: var(--lz-rail-fg-strong) !important; box-shadow: inset 3px 0 0 var(--bbr-accent) !important; font-weight: 600; }
.settings-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 32px; padding: var(--space-150) var(--space-300); border: 1px solid var(--lz-rail-bd); border-radius: var(--radius-md); background: var(--lz-rail-hover); color: var(--lz-rail-fg-strong); font: var(--text-sm)/20px var(--bbr-font-sans); }
.settings-search::placeholder { color: var(--lz-rail-muted); }
.settings-search-empty { color: var(--lz-rail-fg); font-size: var(--text-sm); padding: var(--space-300); }
.settings-search:focus-visible, .app-settings-nav-item:focus-visible { outline: 2px solid var(--bbr-accent); outline-offset: 2px; }
#app-settings-layout, #app-settings-layout.has-selection { display: block; min-height: 0; max-width: none; margin: 0; }
#app-settings-pane-wrap { display: block; width: 100%; max-width: none; }
.settings-mode #content-app-settings > .dashboard, .settings-mode #content-config > .dashboard { max-width: 880px !important; padding-block: var(--space-600) var(--space-1600) !important; }
.settings-mode #settings-overview-header, .settings-mode #settings-page-back, .settings-mobile-back { display: none; }
.settings-mode #settings-index { display: none; }
.settings-mode .app-settings-pane { animation: none; min-width: 0; }
.settings-mode .app-settings-pane > .btn-plain:first-child { display: none; }
.settings-mode .app-settings-pane .page-header { margin-bottom: var(--space-600); }
.settings-mode .app-settings-pane .page-title:focus { outline: none !important; box-shadow: none !important; }
.settings-mode #settings-services-list table { min-width: 720px; }
.settings-mode .app-settings-pane :is(h2:not(.page-title),h3), .settings-mode #content-config summary { font-size: var(--text-base) !important; font-weight: 600 !important; line-height: var(--lh-base); color: var(--bbr-fg-primary) !important; letter-spacing: normal !important; text-transform: none !important; }
.settings-mode .settings-card { box-sizing: border-box; width: 100%; padding: var(--space-500); margin-bottom: var(--space-500); background: var(--bbr-bg-surface); border: 1px solid var(--bbr-bd-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.settings-mode .app-settings-pane :is(.settings-card,.dashboard-card) { max-width: none !important; }
.settings-mode .app-settings-pane :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea) { box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 36px; font: var(--text-sm)/var(--lh-base) var(--bbr-font-sans); background: var(--bbr-bg-surface); color: var(--bbr-fg-primary); border-color: var(--bbr-bd-strong); }
.settings-mode .app-settings-pane :is(p,label,.section-desc) { font-size: var(--text-sm) !important; line-height: var(--lh-base); }
.settings-mode .app-settings-pane p, .settings-mode .app-settings-pane label { color: var(--bbr-fg-secondary) !important; }
.settings-mode .app-settings-pane label { letter-spacing: normal !important; text-transform: none !important; font-weight: 500 !important; }
.settings-mode .app-settings-pane .page-header .section-desc { font-size: var(--text-base) !important; }
.settings-mode #content-config .cfg-acc { background: var(--bbr-bg-surface); border-color: var(--bbr-bd-default); margin-bottom: var(--space-500); box-shadow: var(--shadow-sm); }
.settings-mode #content-config .cfg-acc-body { padding: 0 var(--space-500) var(--space-500); }
.settings-mode #content-config :is(.cfg-field,.cfg-hint,p) { color: var(--bbr-fg-secondary) !important; font-size: var(--text-sm); line-height: var(--lh-base); }
.settings-mode #content-config :is(input,select,textarea) { box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 36px; font: var(--text-sm)/var(--lh-base) var(--bbr-font-sans); color: var(--bbr-fg-primary); background: var(--bbr-bg-surface); border-color: var(--bbr-bd-strong); }
.settings-mode #content-twofa > .tool-embed-shell { width: 100%; max-width: 880px; margin-inline: auto; }
.settings-mode #content-twofa .tool-embed-bar { display: none; }
.settings-mode .app-settings-pane :is(.gps-grid,.bsite-grid) { gap: var(--space-500); }
.settings-service-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-300); align-items: end; }
@media (max-width: 980px) {
    .settings-mode #content-app-settings > .dashboard, .settings-mode #content-config > .dashboard { padding-block: 0 var(--space-1200) !important; }
    .settings-mode #settings-page-back, .settings-mode .settings-mobile-back { display: inline-flex; margin-bottom: var(--space-400); }
    .settings-mode #settings-overview-header { display: none; }
    .settings-mode.settings-index-open #settings-overview-header { display: flex; }
    .settings-mode.settings-index-open #settings-page-back, .settings-mode.settings-index-open #app-settings-pane-wrap { display: none; }
    .settings-mode.settings-index-open #settings-index { display: block; }
    .settings-mode #settings-index .settings-nav-label { color: var(--bbr-fg-muted); }
    .settings-mode #settings-index .settings-search { background: var(--bbr-bg-surface); color: var(--bbr-fg-primary); border-color: var(--bbr-bd-strong); min-height: 44px; }
    .settings-mode #settings-index .settings-search::placeholder { color: var(--bbr-fg-muted); }
    html.settings-mode #settings-index .app-settings-nav-item.btn { color: var(--bbr-fg-primary) !important; min-height: 44px; font-size: var(--text-base); padding: var(--space-300) !important; }
    html.settings-mode #settings-index .app-settings-nav-item.btn::after { content: '›'; margin-left: auto; }
    html.settings-mode #settings-index .app-settings-nav-item.btn:hover { background: var(--bbr-bg-sunken) !important; }
    .settings-mode #settings-index .settings-search-empty { color: var(--bbr-fg-muted); }
    .settings-mode .app-settings-pane :is(.gps-grid,.bsite-grid) { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 981px) {
    html.lz-regia.settings-mode #app-screen[style] { grid-template-columns: var(--sidebar-w) minmax(0,1fr); grid-template-areas: "topnav topnav" "subbar subbar" "sidebar main"; }
    html.lz-regia.settings-mode .app-tabs { display: flex !important; }
    html.lz-regia.settings-mode.lz-sidekick-open #app-screen[style] { grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--lz-sidekick-width); grid-template-areas: "topnav topnav topnav" "subbar subbar subbar" "sidebar main sidekick"; }
    html.settings-mode.lz-sidekick-open .booking-setup-grid,
    html.settings-mode.lz-sidekick-open .app-settings-pane :is(.gps-grid,.bsite-grid) { grid-template-columns: minmax(0,1fr); }
    html.settings-mode.lz-sidekick-expanded .booking-setup-aside { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
    .settings-mode .settings-card { padding: var(--space-400); }
    .settings-mode .app-settings-pane :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea) { font-size: 16px !important; min-height: 44px; }
    .settings-mode .app-settings-pane :is(p,label,.section-desc) { font-size: var(--text-base) !important; }
    .settings-mode #content-config :is(input,select,textarea) { font-size: 16px; min-height: 44px; }
    .settings-mode .app-settings-pane :is(.ota-tiles,.ota-form-grid) { grid-template-columns: minmax(0,1fr); }
    .settings-mode .app-settings-pane .ota-others-row { flex-wrap: wrap; }
    .settings-mode .app-settings-pane :is(.ota-table,.ota-map-table) { display: block; max-width: 100%; overflow-x: auto; }
    .settings-mode #settings-services-list { max-width: 100%; overflow-x: auto; }
    .settings-mode .settings-service-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .settings-mode .settings-service-form > :first-child { grid-column: 1 / -1; }
}