/* Seitenspezifische Styles für display.html */

/* ---- Seitenstil ---- */
.syncbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:max(10px,env(safe-area-inset-top)) 16px 10px}.headrow{margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;}.headrow h1{font-size:1.25rem;margin:0}.back-btn{border:1px solid var(--smartcart-black);background:#fff;color:var(--smartcart-black);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:7px;font:inherit;font-weight:600;cursor:pointer}.panel{border:1px solid #aaa;border-radius:7px;padding:16px}.panel+.panel{margin-top:16px}.panel h2{font-size:1rem;margin:0 0 8px}.option{display:flex;align-items:flex-start;gap:12px;padding:8px 0}.option+.option{border-top:1px solid #ddd;margin-top:8px;padding-top:16px}.option input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--smartcart-black);flex:none}.option label{font-weight:600;line-height:1.35}.hint{font-size:.86rem;color:#888888;line-height:1.4;margin-top:4px}.sub{margin-left:32px}.sub.hidden{display:none}.note{margin-top:16px;font-size:.86rem;color:#888888;line-height:1.4}.status-choice{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #999;border-radius:7px;overflow:hidden;background:#fff;margin-top:10px}#emptyEyePositionChoice{grid-template-columns:repeat(2,1fr)}.status-choice button{border:0;border-right:1px solid #aaa;background:#fff;color:var(--smartcart-black);padding:10px 7px;font:inherit;font-size:.9rem;cursor:pointer}.status-choice button:last-child{border-right:0}.status-choice button.active{background:var(--smartcart-black);color:#fff}.status-choice button.active{border-color:var(--smartcart-black)}.info-choice-button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:78px}.info-choice-label{display:block}.info-choice-sample{height:22px;display:flex;align-items:center;justify-content:center}.info-sample{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Courier New',Courier,monospace;line-height:1;box-shadow:var(--sc-shadow)}.info-sample .info-letter{display:block;transform:translateY(1px)}.info-sample-present{background:#3A83F7;color:#fff}.info-sample-subtle{background:#e8e8e8;color:#8f8f8f}.info-sample-off{box-shadow:none;background:transparent;color:#aaa;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:18px}.status-choice-button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:78px}.status-choice-label{display:block}.status-choice-sample{height:40px;display:flex;align-items:center;justify-content:center}.search-field-sample{width:82px;height:30px;border:1px solid #aaa;border-radius:7px;background:var(--sc-field-bg);display:flex;align-items:center;padding:0 8px;box-sizing:border-box}.search-field-sample::after{content:"";display:block;width:42px;height:5px;border-radius:3px;background:#bbb}.search-icon-sample{width:35px;height:35px;border-radius:50%;background:#888888;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sc-shadow)}.search-icon-sample svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.search-off-sample{width:35px;height:35px}.status-gear-sample{box-shadow:var(--sc-shadow);background:#2e9b42;color:#fff;width:40px;height:40px;padding:8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.status-gear-sample svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.status-phone-sample,.eye-position-phone{position:relative;width:24px;height:39px;border:1.6px solid #888888;border-radius:4px;display:block;box-sizing:border-box}.status-choice button.active .status-phone-sample{border-color:#ddd}.status-choice button.active .eye-position-phone{border-color:#ddd}.status-phone-sample::after{content:"";position:absolute;left:3px;right:3px;bottom:4px;height:4px;border-radius:2px;background:#2e9b42}.eye-position-phone::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#888888}.status-choice button.active .eye-position-phone::after{background:#ddd}.eye-position-phone.eye-bottom::after{left:50%;bottom:4px;transform:translateX(-50%)}.eye-position-phone.eye-top::after{right:3px;top:4px}.status-off-sample{width:21px;height:21px;display:block}.switch-row{display:flex;align-items:flex-start;gap:14px;margin-top:8px}.switch-row .hint{flex:1;min-width:0}.smart-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 72px;width:72px;height:34px}.smart-switch input{position:absolute;opacity:0;pointer-events:none}.smart-switch-track{width:72px;height:34px;border:1px solid #999;border-radius:17px;background:#eee;position:relative;display:block;transition:background .15s,border-color .15s}.smart-switch-track::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .15s}.smart-switch-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 9px;font-size:.78rem;font-weight:600;color:#666;pointer-events:none}.smart-switch-text::after{content:"aus"}.smart-switch input:checked+.smart-switch-track{background:#2e9b42;border-color:#2e9b42}.smart-switch input:checked+.smart-switch-track::before{transform:translateX(38px)}.smart-switch input:checked~.smart-switch-text{justify-content:flex-start;color:#fff}.smart-switch input:checked~.smart-switch-text::after{content:"ein"}.smart-switch input:focus-visible+.smart-switch-track{outline:2px solid #555;outline-offset:2px}.option.sub{padding-left:18px}.option.sub .smart-switch{flex-basis:72px}.list-display-divider{height:1px;background:#ddd;margin:6px 0 14px}.status-legend{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:10px;font-size:.82rem;color:#666}.status-legend-row{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;width:100%}.status-legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.status-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}.status-legend-dot.ok{background:#2e9b42}.status-legend-dot.syncing{background:#d47b00}.status-legend-dot.offline{background:#888888}.status-legend-dot.manual{background:#262626}.status-legend-dot.error{background:#c22}
.color-panel{border:2px solid #cfcfcf}
.color-setting{display:grid;grid-template-columns:72px minmax(0,1fr) 52px;align-items:center;gap:14px;padding:10px 0}
.color-setting+.color-setting{border-top:1px solid #ddd}
.color-setting input[type="checkbox"]{width:20px;height:20px;margin:0;accent-color:var(--smartcart-black)}
.color-setting label{font-weight:600;line-height:1.35}
.color-setting input[type="color"]{
  width:42px;height:22px;
  padding:0;
  border:1px solid #aaa;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.color-setting input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.color-setting input[type="color"]::-webkit-color-swatch{border:0;border-radius:0}
.color-setting input[type="color"]::-moz-color-swatch{border:0;border-radius:0}
.completed-display-choice{grid-template-columns:repeat(2,1fr)!important}
.add-color-choice{grid-template-columns:repeat(2,1fr)!important}
.add-color-sample{width:35px;height:35px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:24px;line-height:35px;box-shadow:var(--sc-shadow);box-sizing:border-box}
.add-color-sample-dark{background:#464646}
.add-color-sample-blue{background:#3A83F7}

.add-color-choice .add-color-sample{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}


/* v562: Schalter ohne Wirkung ausgrauen (nicht ausblenden) */
.option.is-disabled .smart-switch,.option.is-disabled .option-content>.sc-field-label,.option.is-disabled .option-content>.sc-field-comment{opacity:.45}
.option.is-disabled .smart-switch{cursor:not-allowed}
.smart-switch input:disabled+.smart-switch-track{background:#ddd;border-color:#bbb}
.smart-switch input:disabled:checked+.smart-switch-track{background:#9cc9a4;border-color:#9cc9a4}
html[data-theme="dark"] .smart-switch input:disabled+.smart-switch-track{background:#333;border-color:#4a4a4a}
html[data-theme="dark"] .smart-switch input:disabled:checked+.smart-switch-track{background:#2f5a37;border-color:#2f5a37}

/* v564: ausgegraute Auswahlgruppe */
.status-choice.is-disabled,.hint.is-disabled{opacity:.45}
.status-choice.is-disabled button{cursor:not-allowed}

/* v566: einzelne Teile einer Option ausgrauen */
.smart-switch.is-disabled,.sc-field-label.is-disabled,.sc-field-comment.is-disabled{opacity:.45}
.smart-switch.is-disabled{cursor:not-allowed}

/* v601: Datum – Auswahl Liste/Kalender */
#headerDateViewChoice{margin-top:14px}
#headerDateViewChoice+.hint{margin-top:6px}
#headerDateStyleChoice{margin-top:14px}
#headerDateStyleChoice+.hint{margin-top:6px}
/* v617: Info-Symbol-Muster immer exakt wie in der Liste – unabhängig davon, ob das Feld aktiv ist oder welches Farbschema gilt
   (die Auswahlknöpfe setzen eine Textfüllfarbe, die das „i“ sonst umfärbt) */
#infoChoice .info-sample-present,#infoChoice .info-sample-present *{color:#fff!important;-webkit-text-fill-color:#fff!important}
#infoChoice .info-sample-present{background:#3A83F7!important}
#infoChoice .info-sample-subtle,#infoChoice .info-sample-subtle *{color:#8f8f8f!important;-webkit-text-fill-color:#8f8f8f!important}
#infoChoice .info-sample-subtle{background:#e8e8e8!important}