/* 1025DEX Community v0.31.35 · css/ds-controls.css · ausgelagert aus index.html */
/* --- 4 · Bedienelemente --------------------------------------------------- */

/* Grundverhalten: Knoepfe sinken nicht mehr um zwei Pixel nach unten,
   sondern werden beim Druck minimal kleiner. Das ist der Unterschied
   zwischen "Spielzeug" und "Geraet". */
button,
.btn,.chip,.wl-btn,.hbtn,.acts button,.swap-tab,.sl-neben button{
  transition:transform var(--t-fast) var(--ease-out),
             background-color var(--t-fast) ease,
             border-color var(--t-fast) ease,
             color var(--t-fast) ease,
             box-shadow var(--t-fast) ease,
             opacity var(--t-fast) ease;
}
button:active{filter:none;transform:none}
.btn:active,.chip:active,.hbtn:active,.acts button:active,
.wl-btn:active,.swap-tab:active,.cell:active,.setrow:active,
.genhead:active,.person:active,.topbtn:active,.slotx:active,
.cmlink:active,.shopholt:active,.tb-stats button:active{
  transform:scale(.972);
  box-shadow:var(--sh-1);
}

/* Hauptknopf */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;
  margin-top:10px;padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel-2);
  color:var(--ink);
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  box-shadow:none;
}
html[data-theme="dark"] .btn{background:var(--panel-2)}
.btn:disabled{opacity:.42}

/* Gefuellte Varianten: Farbe traegt die Bedeutung, kein Rahmen noetig */
.btn.o,.btn.sl-go,.btn.alarmbtn{background:var(--owned);border-color:transparent;color:#fff;box-shadow:0 5px 16px rgba(31,157,82,.24)}
.btn.w{background:var(--wish);border-color:transparent;color:#fff;box-shadow:0 5px 16px rgba(124,77,219,.24)}
.btn.t,.btn.sl-find{background:var(--lens);border-color:transparent;color:#fff;box-shadow:0 5px 16px rgba(10,114,232,.24)}
.btn.wl-send,.btn.pa-yes{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:var(--sh-accent);min-height:50px;border-radius:var(--r-md);font-size:16px}
.btn.d{background:transparent;border-color:var(--line);color:var(--accent);box-shadow:none}
.btn.tauschbtn{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
.btn.tauschbtn small{color:var(--ink-soft)}

/* Der einzige Knopf der Uebersicht, der wegfuehrt - er darf fuehren */
.shopbtn{
  display:flex;align-items:center;gap:12px;
  margin:0 0 12px;padding:14px 16px;
  border:0;border-radius:var(--r-xl);
  background:var(--accent);
  color:#fff;
  box-shadow:var(--sh-accent);
  text-align:left;
}
.shopbtn b{font-size:16px;font-weight:640;letter-spacing:-.01em}
.shopbtn small{font-size:13px;font-weight:450;color:rgba(255,255,255,.84);margin-top:1px}
.shopbtn .sb-pfeil{opacity:.7}

/* Kleine Aktionsreihe unter einem Suchtreffer */
.acts{gap:7px;margin-top:8px}
.acts button{
  min-height:38px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;
  padding:8px 6px;
}
.acts .bo{background:var(--owned-soft);border-color:transparent;color:var(--owned)}
.acts .bw{background:var(--wish-soft);border-color:transparent;color:var(--wish)}
.acts .bt{background:var(--lens-soft);border-color:transparent;color:var(--lens)}
html[data-theme="dark"] .acts .bo{color:#5fe08d}
html[data-theme="dark"] .acts .bw{color:#c1a9ff}
html[data-theme="dark"] .acts .bt{color:#86bdff}

/* Chips: eine Hoehe, eine Form, ein aktiver Zustand */
.chip,.shopholt{
  min-height:34px;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  background:var(--panel);
  color:var(--ink);
  font-size:13px;font-weight:550;letter-spacing:-.006em;
  box-shadow:none;
}
.chip.on{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:none}
.chip.gone{opacity:.4}
.shopholt.meins{background:var(--owned);border-color:transparent;color:#fff}
.shopholt.fremd{background:var(--panel-2);color:var(--ink-soft)}

/* Segmentierte Umschalter - Liste/Galerie, Sprache, Reiter */
.layout-switch,.pm-seg,.sl-purpose,.swap-tabs{
  display:flex;gap:2px;padding:2px;
  border:0;border-radius:var(--r-md);
  background:var(--panel-3);
}
html[data-theme="dark"] .layout-switch,
html[data-theme="dark"] .pm-seg,
html[data-theme="dark"] .swap-tabs{background:var(--panel-2)}
.layout-switch button,.pm-seg button,.swap-tab{
  flex:1 1 0;min-height:32px;
  border:0;border-radius:calc(var(--r-md) - 3px);
  background:transparent;color:var(--ink-soft);
  font-size:13px;font-weight:560;letter-spacing:-.006em;
  padding:6px 10px;
}
.layout-switch button.on,.pm-seg button.on,.swap-tab.on{
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(16,16,22,.1),0 0 0 .5px rgba(16,16,22,.04);
}
html[data-theme="dark"] .layout-switch button.on,
html[data-theme="dark"] .pm-seg button.on,
html[data-theme="dark"] .swap-tab.on{background:var(--panel-3);box-shadow:none;color:var(--ink)}
.swap-tab.on .tb-dot{background:var(--accent);box-shadow:0 0 0 2px var(--panel)}

/* Eingabefelder */
.search,.sl-in,.shopsort,textarea.note,
.mform input,.mform select,.mform textarea{
  width:100%;
  min-height:46px;
  border:1px solid var(--line)!important;
  border-radius:var(--r-md);
  background:var(--panel-2);
  color:var(--ink);
  padding:12px 14px;
  font-size:16px;font-weight:450;letter-spacing:-.008em;
  box-shadow:none!important;
  transition:border-color var(--t-fast) ease,background var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
html[data-theme="dark"] .search,
html[data-theme="dark"] .sl-in,
html[data-theme="dark"] textarea.note{background:var(--panel-2)}
.search::placeholder,textarea.note::placeholder{color:var(--ink-faint);font-size:16px;font-weight:450}
.search:focus,.sl-in:focus,textarea.note:focus,.shopsort:focus{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 55%,transparent)!important;
  box-shadow:0 0 0 4px var(--accent-soft)!important;
  background:var(--panel);
}
textarea.note{min-height:76px;line-height:1.5;resize:vertical}

/* Abzeichen: getoente Flaeche statt Rahmen */
.tag,.psig,.wl-chip,.tb-status,.sl-camera-badge{
  display:inline-flex;align-items:center;
  border:0;
  border-radius:var(--r-xs);
  padding:3px 8px;
  font-size:11px;font-weight:600;letter-spacing:.01em;
  text-transform:none;
  background:var(--panel-3);
  color:var(--ink-soft);
  text-shadow:none;
}
html[data-theme="dark"] .tag,html[data-theme="dark"] .psig{background:var(--panel-3)}
.tag.ir{background:rgba(224,164,32,.18);color:#8a6100}
.tag.sir{background:rgba(226,86,178,.16);color:#a62a7c}
.tag.hyp{background:rgba(124,77,219,.16);color:#6335c4}
.tag.ur{background:rgba(10,114,232,.14);color:#0a5fbf}
.tag.rr{background:rgba(224,126,32,.16);color:#9a5300}
.tag.promo{background:var(--panel-3);color:var(--ink-soft)}
.tag.have{background:var(--owned);color:#fff}
.tag.lang-on{background:var(--accent);color:#fff}
.tag.rarname{background:transparent;color:var(--ink-faint);font-weight:500;padding-left:0}
html[data-theme="dark"] .tag.ir{color:#f0c463}
html[data-theme="dark"] .tag.sir{color:#f3a0d7}
html[data-theme="dark"] .tag.hyp{color:#bfa2ff}
html[data-theme="dark"] .tag.ur{color:#8cc0ff}
html[data-theme="dark"] .tag.rr{color:#f2b071}
.psig{vertical-align:1px;margin-left:6px}
.psig.s-guenstig{background:var(--owned-soft);color:var(--owned)}
.psig.s-normal{background:var(--panel-3);color:var(--ink-soft)}
.psig.s-teuer{background:var(--accent-soft);color:var(--accent)}
.psig.s-fall{background:var(--owned);color:#fff}
.psig.s-tief{background:var(--warn-soft);color:var(--warn)}
.psig.s-dop{background:var(--lens);color:#fff}

/* Hinweisstreifen */
.banner,.wl-hint,.tb-open,.sl-flag{
  border:0;border-radius:var(--r-md);
  padding:11px 13px;
  font-size:13.5px;font-weight:500;line-height:1.45;
  background:var(--warn-soft);color:var(--ink);
}
.wl-hint{background:var(--panel-2);color:var(--ink-soft)}
.wl-hint.good{background:var(--owned-soft);color:var(--owned)}
.sl-flag.ok{background:var(--owned-soft)}
.sl-flag.warn{background:var(--warn-soft)}
.sl-flag.bad{background:var(--accent-soft)}
.tb-open{background:var(--panel-2);color:var(--ink-soft);border:0}

/* Gastband */
html[data-gast] .gastband{
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);box-shadow:var(--sh-1);padding:13px 15px;
}
.gastband .gb-an{
  border:0;border-radius:var(--r-full);
  background:var(--accent);color:#fff;
  padding:9px 16px;font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-accent);
}
.gastband .gb-txt{font-weight:450;font-size:13.5px}
.gastband .gb-txt b{font-weight:620;font-size:14.5px;color:var(--ink);margin-bottom:1px}