/* ui-core.css – GiContact UI-Basis (Dark/Light), Buttons, Inputs, Layout */

:root{
  /* GiContact – Grundfarben (Dark-Default; Werte gelten global) */
  --primary:#0e7490;             /* Petrol */
  --accent:#60a5fa;              /* Cornflower Blue (Akzent/Fokus) */
  --accent-soft:rgba(96,165,250,.16);
  --accent-strong:rgba(96,165,250,.75);

  /* bestehende Tokens beibehalten (aus deinem File) */
  --bg:#0f1115; --bg-card:#141a26; --bg-pane:#151a24;
  --fg:#e7eaf1; --muted:#a6accd; --border:#22293a;
  --input-bg:#0e1426; --input-border:var(--border);
  --radius:12px; --radiusLG:14px; --shadow:0 10px 24px rgba(0,0,0,.25);

  /* Fokus-Farbe an Akzent angepasst */
  --focus: 0 0 0 2px rgba(96,165,250,.45);

  /* Buttons/Status beibehalten – oder bei Bedarf später feintunen */
  --btn-bg:#10192c; --btn-border:#344461;
  --btn-bg-hover:#15223b; --btn-bd-hover:#3c4f72; --btn-text:var(--fg);
  --btnp-bg:#1a0d12; --btnp-border:#2a1020;
  --btnp-bg-hover:#231018; --btnp-bd-hover:#3c1930;
  --btn-surface:linear-gradient(135deg,#0ea5e9 0%,#6366f1 55%,#a855f7 100%);
  --btn-surface-hover:linear-gradient(135deg,#22d3ee 0%,#818cf8 55%,#c084fc 100%);
  --btn-shadow:rgba(5,9,24,.6);
  --btn-icon-chip:linear-gradient(145deg,rgba(15,116,144,.65),rgba(99,102,241,.65));
  --btn-icon-ring:rgba(255,255,255,.35);
  --btn-icon-symbol:#ffffff;
  --btn-icon:url("../img/portal-glyph.svg");
  --btn-radius:999px;
  --btn-min-height:44px;
  --btn-padding-y:10px;
  --btn-padding-x:22px;
  --btn-font-size:1em;
  --ok:#16a34a; --warn:#b76e00; --err:#ef4444;

  --font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --bg-gradient: radial-gradient(1100px 700px at 50% -180px,#192035 0%,#0f1115 70%);
}
    html{color-scheme:dark}
    html[data-theme="light"]{color-scheme:light}

 :root[data-button-shape="pill"]{
  --btn-radius:999px;
  --tab-radius:14px;
 }
 :root[data-button-shape="soft"]{
  --btn-radius:16px;
  --tab-radius:12px;
 }
 :root[data-button-shape="square"]{
  --btn-radius:10px;
  --tab-radius:10px;
 }

 :root[data-font-scale="compact"]{
  --font:13px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --btn-font-size:0.98em;
  --btn-min-height:40px;
  --btn-padding-y:8px;
  --btn-padding-x:18px;
 }
 :root[data-font-scale="standard"]{
  --font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --btn-font-size:1em;
  --btn-min-height:44px;
  --btn-padding-y:10px;
  --btn-padding-x:22px;
 }
 :root[data-font-scale="comfortable"]{
  --font:15px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --btn-font-size:1.05em;
  --btn-min-height:48px;
  --btn-padding-y:12px;
  --btn-padding-x:24px;
 }

 :root[data-accent="citrus"]{
  --primary:#f97316;
  --accent:#fb7185;
  --accent-soft:rgba(251,113,133,.18);
  --accent-strong:rgba(251,113,133,.82);
  --focus:0 0 0 2px rgba(249,115,22,.4);
  --btn-text:#ffe8c7;
  --btn-bg:#201308;
  --btn-border:#3b2412;
  --btn-bg-hover:#2a180a;
  --btn-bd-hover:#4a2e14;
  --btnp-bg:#2d1407;
  --btnp-border:#5d2f16;
  --btnp-bg-hover:#3a1b0a;
  --btnp-bd-hover:#6d3415;
  --btn-surface:linear-gradient(135deg,#f59e0b 0%,#f97316 45%,#fb7185 100%);
  --btn-surface-hover:linear-gradient(135deg,#fbbf24 0%,#fb923c 45%,#fda4af 100%);
  --btn-shadow:rgba(249,115,22,.28);
  --btn-icon-chip:linear-gradient(145deg,rgba(251,146,60,.25),rgba(251,113,133,.3));
  --btn-icon-ring:rgba(251,146,60,.38);
  --btn-icon-symbol:#fff7ed;
 }
 :root[data-theme="light"][data-accent="citrus"]{
  --primary:#f97316;
  --accent:#fb7185;
  --accent-soft:rgba(251,113,133,.18);
  --accent-strong:rgba(251,113,133,.82);
  --focus:0 0 0 2px rgba(249,115,22,.3);
  --btn-text:#2a1602;
  --btn-bg:#fff7ed;
  --btn-border:#f6d4a4;
  --btn-bg-hover:#ffedd5;
  --btn-bd-hover:#f7c68a;
  --btnp-bg:#ffe8c7;
  --btnp-border:#f6bf7d;
  --btnp-bg-hover:#ffd9a0;
  --btnp-bd-hover:#f59f63;
  --btn-surface:linear-gradient(135deg,#fdba74 0%,#fb923c 45%,#fb7185 100%);
  --btn-surface-hover:linear-gradient(135deg,#fed7aa 0%,#fbbf24 45%,#fdb3c0 100%);
  --btn-shadow:rgba(249,115,22,.16);
  --btn-icon-chip:linear-gradient(145deg,rgba(251,191,36,.35),rgba(251,113,133,.28));
  --btn-icon-ring:rgba(249,115,22,.28);
  --btn-icon-symbol:#2a1602;
 }

 :root[data-accent="evergreen"]{
  --primary:#0ea5a0;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.18);
  --accent-strong:rgba(34,197,94,.78);
  --focus:0 0 0 2px rgba(34,197,94,.38);
  --btn-text:#e7fff4;
  --btn-bg:#0b1f18;
  --btn-border:#1c4735;
  --btn-bg-hover:#123227;
  --btn-bd-hover:#256548;
  --btnp-bg:#0f2d22;
  --btnp-border:#2c7a5c;
  --btnp-bg-hover:#154135;
  --btnp-bd-hover:#2e8c67;
  --btn-surface:linear-gradient(135deg,#2dd4bf 0%,#22c55e 55%,#15803d 100%);
  --btn-surface-hover:linear-gradient(135deg,#34e2c7 0%,#2bd97c 55%,#16a34a 100%);
  --btn-shadow:rgba(16,185,129,.32);
  --btn-icon-chip:linear-gradient(145deg,rgba(34,197,94,.35),rgba(45,212,191,.35));
  --btn-icon-ring:rgba(34,197,94,.38);
  --btn-icon-symbol:#ecfdf3;
 }
 :root[data-theme="light"][data-accent="evergreen"]{
  --primary:#0f766e;
  --accent:#16a34a;
  --accent-soft:rgba(34,197,94,.18);
  --accent-strong:rgba(34,197,94,.78);
  --focus:0 0 0 2px rgba(16,185,129,.26);
  --btn-text:#0f241a;
  --btn-bg:#ecfdf3;
  --btn-border:#c5f6da;
  --btn-bg-hover:#dcfce7;
  --btn-bd-hover:#9ae6b4;
  --btnp-bg:#d1fae5;
  --btnp-border:#a5f3cf;
  --btnp-bg-hover:#baf7d8;
  --btnp-bd-hover:#7bdcb2;
  --btn-surface:linear-gradient(135deg,#a7f3d0 0%,#6ee7b7 55%,#34d399 100%);
  --btn-surface-hover:linear-gradient(135deg,#bbf7d0 0%,#86efac 55%,#4ade80 100%);
  --btn-shadow:rgba(16,185,129,.14);
  --btn-icon-chip:linear-gradient(145deg,rgba(74,222,128,.32),rgba(45,212,191,.3));
  --btn-icon-ring:rgba(16,185,129,.24);
  --btn-icon-symbol:#0f241a;
 }

:root[data-theme="light"]{
  /* GiContact – Palette C: Petrol Cornflower (Light neutral) */
  --bg:#ffffff; --bg-card:#ffffff; --bg-pane:#ffffff;
  --fg:#0f172a; --muted:#6b7280; --border:#e5e7eb;
  --accent-soft:rgba(96,165,250,.14);
  --accent-strong:rgba(96,165,250,.72);

  --input-bg:#ffffff; --input-border:#e5e7eb;
  --bg-gradient: linear-gradient(180deg,#f7fafc 0%, #ffffff 60%);

  /* Button-Styles im Light-Theme */
  --btn-text:#0f172a;
  --btn-bg:#f5f7fb;          /* zarte Fläche */
  --btn-border:#cfe3ff;      /* blau getönt */
  --btn-bg-hover:#e7f0ff;
  --btn-bd-hover:#b7d6ff;

  /* "Primary"-Buttons in Petrol-Tönung (hell) */
  --btnp-bg:#e8f6fb;
  --btnp-border:#bfe7f3;
  --btnp-bg-hover:#def2f8;
  --btnp-bd-hover:#a8d7e6;
  --btn-surface:linear-gradient(135deg,#38bdf8 0%,#818cf8 55%,#f472b6 100%);
  --btn-surface-hover:linear-gradient(135deg,#60a5fa 0%,#a5b4fc 55%,#f9a8d4 100%);
  --btn-shadow:rgba(15,23,42,.15);
  --btn-icon-chip:linear-gradient(145deg,rgba(56,189,248,.3),rgba(129,140,248,.35));
  --btn-icon-ring:rgba(59,130,246,.3);
  --btn-icon-symbol:#0f172a;
}
html[data-theme="light"]{color-scheme:light}


*{box-sizing:border-box}
body{margin:0;font:var(--font);color:var(--fg);background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg-gradient);background-attachment:fixed}

.brand-top{display:flex;justify-content:center;padding:18px 16px 6px}
.logo-top{height:36px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));opacity:.9}

.card{max-width:1100px;margin:10px auto 16px;padding:0 16px}
.card-body{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radiusLG);padding:18px 16px;box-shadow:var(--shadow)}
.section{max-width:1100px;margin:12px auto;padding:0 16px}

button,.btn{
  font:inherit;
  font-size:var(--btn-font-size,1em);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:var(--btn-min-height,44px);
  padding:var(--btn-padding-y,10px) var(--btn-padding-x,22px);
  border-radius:var(--btn-radius,999px);
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 12px 28px var(--btn-shadow);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .18s ease,color .18s ease;
  position:relative;
  isolation:isolate;
}
button:hover,.btn:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  box-shadow:0 16px 34px var(--btn-shadow);
  transform:translateY(-1px);
}
button:active,.btn:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 10px 20px var(--btn-shadow);
}
button:focus-visible,.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.12),var(--focus);
}
button:disabled,.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn,a.btn{
  justify-content:flex-start;
  text-decoration:none;
  color:var(--btn-text);
  text-align:left;
}
.btn:visited{color:var(--btn-text);}
/* Utility: compact button without reserved glyph spacing */
.btn-plain{
  padding-left:18px;
  padding-right:18px;
}
.btn-primary{
  --btn-bg:var(--btn-surface);
  --btn-bg-hover:var(--btn-surface-hover);
  --btn-border:transparent;
  --btn-bd-hover:transparent;
  --btn-text:var(--btnp-text,#0b1224);
  color:var(--btn-text);
  box-shadow:0 12px 28px var(--btn-shadow),0 0 0 1px rgba(255,255,255,.04);
}
:root[data-theme="light"] .btn-primary{
  --btn-text:var(--btnp-text,#0b1224);
  box-shadow:0 12px 28px var(--btn-shadow),0 0 0 1px rgba(15,23,42,.06);
}
:root[data-theme="dark"] .btn-primary{
  --btn-text:var(--btnp-text-dark,#f8fafc);
}
.btn.ghost,
a.btn.ghost{
  --btn-bg:rgba(15,23,42,.03);
  --btn-border:var(--accent-strong,var(--accent));
  --btn-bg-hover:var(--accent-soft,rgba(15,23,42,.06));
  --btn-bd-hover:var(--accent,var(--accent-strong,var(--btn-border)));
  --btn-text:var(--accent);
  color:var(--btn-text);
  box-shadow:none;
}
:root[data-theme="dark"] .btn.ghost,
:root[data-theme="dark"] a.btn.ghost{
  --btn-bg:rgba(255,255,255,.06);
}
.btn.ghost:hover,
.btn.ghost:active,
a.btn.ghost:hover,
a.btn.ghost:active{
  box-shadow:none;
  transform:translateY(0);
}
.btn.ghost:active,
a.btn.ghost:active{
  box-shadow:none;
}

.view-ctx{
  position:relative;
}
.view-ctx[hidden]{
  display:none;
}
.view-ctx-btn{
  padding-left:18px;
  padding-right:28px;
  min-height:38px;
}
.view-ctx-count{
  font-size:0.75rem;
  font-weight:600;
  background:rgba(255,255,255,.18);
  color:inherit;
  padding:0 0.4rem;
  border-radius:999px;
  margin-left:0.5rem;
}
.view-ctx-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  max-width:320px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radiusLG);
  box-shadow:0 18px 36px rgba(15,15,35,.4);
  padding:8px;
  z-index:1000;
  display:none;
}
.view-ctx.open .view-ctx-panel{
  display:block;
}
.view-ctx-panel::before{
  content:"";
  position:absolute;
  top:-8px;
  right:36px;
  width:14px;
  height:14px;
  background:var(--bg-card);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.view-ctx-item{
  width:100%;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius);
  text-align:left;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  color:var(--fg);
  transition:background .15s ease, border-color .15s ease;
}
.view-ctx-item + .view-ctx-item{
  margin-top:6px;
}
.view-ctx-item:hover,
.view-ctx-item:focus-visible{
  background:rgba(96,165,250,.08);
  border-color:var(--accent);
  outline:none;
}
.view-ctx-label{
  font-weight:600;
  font-size:0.92rem;
}
.view-ctx-desc{
  font-size:0.78rem;
  color:var(--muted);
}
.view-ctx-highlight{
  animation:viewCtxPulse 1.1s ease;
  box-shadow:0 0 0 3px rgba(96,165,250,.35);
  border-radius:var(--radiusLG);
}
@keyframes viewCtxPulse{
  from{ box-shadow:0 0 0 0 rgba(96,165,250,.45); }
  to{ box-shadow:0 0 0 12px rgba(96,165,250,0); }
}

.dropzone{background:#0f1528;border:1px dashed #2a3553;border-radius:var(--radius);padding:12px;transition:all .15s}
:root[data-theme="light"] .dropzone{background:#f8faff;border-color:#c7d2e9}
.dropzone.dragover{border-color:var(--accent);background:#121a33;box-shadow:0 0 0 2px rgba(0,208,228,.18) inset}
:root[data-theme="light"] .dropzone.dragover{background:#eef3ff}

.textarea{width:100%;min-height:180px;background:var(--input-bg);color:var(--fg);border:1px solid var(--input-border);
  border-radius:var(--radius);padding:10px 12px;resize:vertical}
.textarea:focus{box-shadow:var(--focus);border-color:#2a3553}
:root[data-theme="light"] .textarea:focus{border-color:#b7c6ef}

/* Layout-Designer: Feldauswahl */
.uil-field-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.55);
}
.uil-field-picker-backdrop.hidden{display:none;}
.uil-field-picker{
  width:min(520px,95vw);
  max-height:80vh;
  background:var(--bg-card,#111827);
  color:var(--fg,#f8fafc);
  border:1px solid rgba(148,163,184,.25);
  border-radius:18px;
  box-shadow:0 24px 50px rgba(15,23,42,.55);
  display:flex;
  flex-direction:column;
}
html[data-theme="light"] .uil-field-picker{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(15,23,42,.08);
  box-shadow:0 18px 34px rgba(15,23,42,.18);
}
.uil-field-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(148,163,184,.25);
  font-weight:600;
}
html[data-theme="light"] .uil-field-picker-header{
  border-color:rgba(15,23,42,.08);
}
.uil-field-picker-close{
  border:none;
  background:transparent;
  color:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
}
.uil-field-picker-body{
  padding:16px 18px 0 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.uil-field-picker-search{
  width:100%;
  border:1px solid var(--border,rgba(148,163,184,.35));
  border-radius:10px;
  padding:8px 12px;
  font:inherit;
  background:var(--input-bg,#0f1528);
  color:inherit;
}
html[data-theme="light"] .uil-field-picker-search{
  background:#ffffff;
}
.uil-field-picker-list{
  flex:1;
  overflow:auto;
  padding:4px 0 16px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.uil-field-picker-row{
  border:none;
  border-radius:10px;
  background:rgba(148,163,184,.12);
  color:inherit;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:inherit;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.uil-field-picker-row code{
  font-family:Consolas,Menlo,monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(15,23,42,.25);
  color:inherit;
}
html[data-theme="light"] .uil-field-picker-row{
  background:rgba(148,163,184,.18);
}
html[data-theme="light"] .uil-field-picker-row code{
  background:rgba(15,23,42,.08);
  color:#0f172a;
}
.uil-field-picker-row:hover,
.uil-field-picker-row[data-selected="1"]{
  background:rgba(96,165,250,.25);
}
.uil-field-picker-empty{
  color:var(--muted,#94a3b8);
  font-size:14px;
  padding:18px;
  text-align:center;
}
.uil-field-picker-footer{
  border-top:1px solid rgba(148,163,184,.25);
  padding:12px 18px 18px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
html[data-theme="light"] .uil-field-picker-footer{
  border-color:rgba(15,23,42,.08);
}
.uil-field-picker-hint{
  font-size:12px;
  color:var(--muted,#94a3b8);
}
.uil-field-picker-apply{
  border:none;
  border-radius:999px;
  padding:8px 18px;
  font-weight:600;
  background:linear-gradient(135deg,#38bdf8,#818cf8);
  color:#fff;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.uil-field-picker-apply:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.table-wrap{background:var(--bg-pane);border:1px solid var(--border);border-radius:var(--radius);margin:10px 0;overflow:hidden;box-shadow:var(--shadow)}
.contacts{width:100%;border-spacing:0;border-collapse:separate}
.contacts thead th{position:sticky;top:0;background:#12182a;color:var(--muted);font-weight:600;font-size:12px;padding:10px 12px;border-bottom:1px solid var(--border)}
:root[data-theme="light"] .contacts thead th{background:#f2f5fb;color:#46526b}
.contacts tbody td{padding:10px 12px;border-bottom:1px solid #1c2236;vertical-align:top}
:root[data-theme="light"] .contacts tbody td{border-bottom-color:#e7ecf7}
.select-col{width:42px}.select-cell{text-align:center}.value-cell{max-width:340px}
.cell-check{display:flex;gap:8px;align-items:flex-start}.cell-check input[type=checkbox]{transform:translateY(2px)}

select.map-select,.pv-input,.req-input{
  width:100%;min-height:40px;padding:8px 12px;background:var(--input-bg);color:var(--fg);
  border:1px solid var(--input-border);border-radius:10px;outline:none;transition:border-color .15s, box-shadow .15s
}
select.map-select:focus,.pv-input:focus,.req-input:focus{box-shadow:var(--focus)}
select.map-select.needs-map{border-color:rgba(217,87,87,.85);box-shadow:0 0 0 2px rgba(217,87,87,.25)}

.menu-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.menu-toolbar .action-steps{flex:0 0 auto;white-space:nowrap}
.menu-toolbar .toolbar-legal{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-toolbar .app-menu{margin-left:auto}


/* === GiContact Menü (Popover) & Overlay ================================ */
#menuOverlay{
  position:fixed; inset:0;
  background:transparent;                    /* kein weißer Film */
  opacity:0; visibility:hidden; pointer-events:none;
  z-index:990;
  transition:opacity .16s ease, visibility .16s linear;
}
/* aktiviert, wenn Menü offen */
#menuOverlay.show{
  opacity:1; visibility:visible; pointer-events:auto;
}

.app-menu{
  position:relative;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  gap:10px;
}            /* Anker für Popover */
.app-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.app-menu-quick{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.app-menu-quick.is-empty{
  display:none;
}
@media (max-width: 640px){
  .app-header__center .app-menu{
    width:100%;
  }
  .app-menu{
    max-width:100%;
    width:100%;
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px;
  }
  .app-menu-trigger{
    width:100%;
    min-width:0;
    gap:8px;
  }
  .app-menu-btn{
    min-width:0;
    width:100%;
    flex:1 1 auto;
  }
  .app-menu-quick{
    width:100%;
    max-width:100%;
    gap:6px;
  }
}
.nav-history{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.nav-history-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:var(--app-header-control-height,44px);
  border-radius:999px;
  border:1px solid var(--btn-bd-hover);
  background:var(--btn-bg);
  color:var(--btn-text);
  box-shadow:0 10px 22px var(--btn-shadow);
  padding:0 12px;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .2s ease;
}
.nav-history-btn:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  transform:translateY(-1px);
}
.nav-history-btn:active{
  transform:translateY(0) scale(.98);
}
.nav-history-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.nav-history-btn__glyph{
  font-size:1rem;
  line-height:1;
}
.nav-history-btn__label{
  font-weight:600;
  letter-spacing:.01em;
}
.nav-history-btn__count{
  min-width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid var(--btnp-bd-hover);
  background:var(--btnp-bg-hover);
  color:var(--btnp-text-hover);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  padding:0 6px;
}
.nav-history-modal{
  z-index:22050;
}
.nav-history-modal .modal-card{
  width:min(1040px,96vw);
  max-height:90vh;
}
.nav-history-modal__actions{
  justify-content:space-between;
}
.nav-history-list{
  max-height:min(62vh,560px);
  overflow:auto;
}
.nav-history-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.82rem;
}
.nav-history-table th,
.nav-history-table td{
  border-bottom:1px solid var(--border);
  padding:7px 8px;
  text-align:left;
  vertical-align:top;
}
.nav-history-table th{
  font-size:.74rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.01em;
  background:var(--bg-pane);
}
.nav-history-table tbody tr:hover{
  background:var(--btn-bg-hover);
}
.nav-history-open-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--btnp-text-hover);
  cursor:pointer;
  padding:0;
  font:inherit;
  line-height:1.25;
  text-align:left;
  width:100%;
}
.nav-history-open-btn:hover{
  text-decoration:underline;
}
.nav-history-path-cell{
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-history-time-cell{
  white-space:nowrap;
  color:var(--muted);
}
.nav-history-empty{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:10px;
  color:var(--muted);
  font-size:.8rem;
  background:var(--bg-pane);
}
.app-menu-quick-item{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--btn-bd-hover);
  background:var(--btn-bg);
  color:var(--btn-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 10px 22px var(--btn-shadow);
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .2s ease;
}
.app-menu-quick-item:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  transform:translateY(-1px);
}
.app-menu-quick-item:active{
  transform:translateY(0) scale(.96);
  box-shadow:0 8px 18px var(--btn-shadow);
}
.app-menu-quick-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.15),var(--focus);
}
.app-menu-quick-item.is-active{
  background:var(--btnp-bg-hover);
  border-color:var(--btnp-bd-hover);
}
.app-menu-quick-glyph{
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.05em;
}
.app-menu-quick-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.app-menu-quick-icon .app-menu-icon{
  width:24px;
  height:24px;
}
.app-menu-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:140px;
  white-space:nowrap;
}
.app-menu-btn__label{
  flex:1 1 auto;
}
.app-menu-info{
  flex:0 0 auto;
  width:var(--app-header-control-height,44px);
  height:var(--app-header-control-height,44px);
  padding:0;
  min-height:0;
  border-radius:999px;
  border:1px solid var(--btn-bd-hover);
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:700;
  letter-spacing:.05em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px var(--btn-shadow);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .18s ease,color .18s ease;
}
.app-menu-info .app-menu-info__glyph{
  font-size:.95rem;
  line-height:1;
}
.app-menu-info:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  transform:translateY(-1px);
}
.app-menu-info:active{
  transform:translateY(0) scale(.96);
  box-shadow:0 8px 18px var(--btn-shadow);
}
.app-menu-info:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.15),var(--focus);
}

/* Die Liste ist standardmäßig unsichtbar und nimmt keinen Layoutplatz ein */
.app-menu-list{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:280px;
  background:var(--bg-card); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radiusLG);
  box-shadow:var(--shadow);
  padding:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s linear;
}

/* Sichtbar, wenn #appMenu die Klasse .open hat (wird per JS gesetzt) */
#appMenu.open .app-menu-list{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}


/* MENÜ-EINTRAG ALS ZWEI-SPALTEN-GRID */
.app-menu-item{
  display:grid; align-items:center; gap:14px;   /* unsichtbare Spalten */
  grid-template-columns: var(--menu-lcol, 220px) 1fr;
  width:100%; padding:10px 12px; border:1px solid transparent; background:none; color:inherit;
  border-radius:12px; cursor:pointer; text-align:left;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .18s ease,transform .16s ease;
}
.app-menu-title{display:flex;align-items:center;gap:10px;min-width:0;}
.app-menu-label{display:inline-flex;align-items:center;}
.app-menu-icon{width:22px;height:22px;flex:0 0 22px;}
.app-menu-icon .menu-icon-bg{fill:var(--menu-icon-bg,#334155);}
.app-menu-icon .menu-icon-fg{fill:none;stroke:var(--menu-icon-fg,#fff);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.app-menu-icon .menu-icon-fg--fill{fill:var(--menu-icon-fg,#fff);stroke:none;}

/* linke Spalte = Label (erstes Kind), rechte Spalte = Controls/Meta */
.app-menu-item > :first-child{ grid-column:1; }
.app-menu-item .switch,
.app-menu-item .menu-meta{ grid-column:2; justify-self:start; }



.app-menu-item:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.app-menu-parent{
  cursor:pointer;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
  position:relative;
}
.app-menu-parent::after{
  content:"";
  justify-self:end;
  width:0;
  height:0;
  border-left:6px solid var(--muted);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(90deg);
  transform-origin:center;
  transition:transform .16s ease, border-left-color .16s ease;
}
.app-menu-parent.is-collapsed::after{
  transform:rotate(0deg);
}
.app-menu-parent:hover{
  background:transparent;
}
.app-menu-subitem{
  position:relative;
  padding-left:16px;
  grid-template-columns: calc(var(--menu-lcol, 220px) - 12px) 1fr;
}
.app-menu-subitem .app-menu-icon{width:20px;height:20px;flex:0 0 20px;}
.app-menu-subitem::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--btn-bd-hover);
  transform:translateY(-50%);
  opacity:.65;
}
.app-menu-subitem span{
  font-weight:600;
}
.app-menu-item--collapsed{
  display:none !important;
}
.app-menu-item--current{
  background:color-mix(in srgb, var(--btnp-bg-hover, #231018), var(--btn-bg, #10192c) 45%);
  border-color:var(--btnp-bd-hover, var(--btn-border));
  box-shadow:0 14px 30px var(--btn-shadow);
}
:root[data-theme="light"] .app-menu-item--current{
  background:color-mix(in srgb, var(--btnp-bg-hover, #def2f8), #ffffff 50%);
  border-color:color-mix(in srgb, var(--btnp-bd-hover, #bfe7f3), var(--border, #e5e7eb) 35%);
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}

/* Apotheke/AVone Theme */
.app-menu-list--avone{
  --avone-primary:#0ea5a0;
  --avone-secondary:#22c55e;
  --avone-soft:color-mix(in srgb, var(--bg-card, #0f172a), #14b8a6 10%);
  --avone-border:color-mix(in srgb, var(--border, #1f2937), #0ea5a0 24%);
  --avone-ink:color-mix(in srgb, var(--fg, #e7eaf1) 88%, #0f172a 12%);
  --avone-muted:color-mix(in srgb, var(--muted, #a6accd) 72%, #0ea5a0 28%);
  --avone-glow:rgba(14,165,144,.22);
  background:
    linear-gradient(165deg, rgba(14,165,144,.12), transparent 42%),
    var(--bg-card);
  border-color:color-mix(in srgb, var(--avone-border), var(--border, #1f2937));
  box-shadow:0 20px 40px rgba(6,95,70,.14);
}
:root[data-theme="light"] .app-menu-list--avone{
  --avone-soft:color-mix(in srgb, var(--bg-card, #ffffff), #14b8a6 14%);
  --avone-border:color-mix(in srgb, var(--border, #e5e7eb), #0ea5a0 22%);
  --avone-ink:#0f2a25;
  --avone-glow:rgba(16,185,129,.16);
  box-shadow:0 18px 38px rgba(7,89,69,.14);
}
:root[data-theme="dark"] .app-menu-list--avone{
  --avone-soft:color-mix(in srgb, var(--bg-card, #0f172a), #14b8a6 8%);
  --avone-border:color-mix(in srgb, var(--border, #1f2937), #22c55e 30%);
  --avone-ink:color-mix(in srgb, var(--fg, #e7eaf1) 94%, #e8fff6 6%);
  --avone-glow:rgba(16,185,129,.28);
}
.app-menu-list--avone #miAVone{
  background:linear-gradient(130deg, rgba(14,165,144,.22), rgba(16,185,129,.18)), var(--avone-soft);
  border-color:var(--avone-border);
  color:var(--avone-ink);
  box-shadow:0 14px 34px var(--avone-glow);
}
.app-menu-list--avone #miAVone span{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.25;
}
.app-menu-list--avone #miAVone span::after{
  content:"Apotheken Suite";
  font-size:12px;
  font-weight:600;
  color:var(--avone-muted);
  letter-spacing:.03em;
}
.app-menu-list--avone #miAVone::after{
  border-left-color:var(--avone-ink);
}
.app-menu-list--avone [data-submenu-parent="miAVone"]{
  position:relative;
  background:linear-gradient(120deg, rgba(14,165,144,.16), rgba(34,197,94,.12) 55%, rgba(14,165,144,.08));
  border:1px solid var(--avone-border);
  color:var(--avone-ink);
  border-radius:14px;
  padding:12px 14px 12px 20px;
  margin:6px 0;
  box-shadow:0 12px 26px rgba(15,23,42,.12);
  overflow:hidden;
}
.app-menu-list--avone [data-submenu-parent="miAVone"]::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #e0fff6, var(--avone-primary));
  box-shadow:0 0 0 8px color-mix(in srgb, var(--avone-soft), transparent 35%), 0 0 0 1px var(--avone-border);
  transform:translateY(-50%);
  opacity:.9;
}
.app-menu-list--avone [data-submenu-parent="miAVone"]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px var(--avone-glow);
  border-color:color-mix(in srgb, var(--avone-border), #22c55e 16%);
}
.app-menu-list--avone [data-submenu-parent="miAVone"].app-menu-item--current{
  background:linear-gradient(120deg, rgba(14,165,144,.26), rgba(34,197,94,.18) 60%, rgba(14,165,144,.16));
  border-color:color-mix(in srgb, #10b981 50%, var(--avone-border));
  box-shadow:0 16px 38px var(--avone-glow);
}
.app-menu-list--avone [data-submenu-parent="miAVone"] span{
  font-weight:700;
  letter-spacing:.01em;
}


/* === Toggle-Switches und Meta im Menü =================================== */
.app-menu-item .switch{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  margin-left:auto;   /* Schalter nach rechts */
}
.app-menu-item .switch input{
  position:absolute; inset:0; width:0; height:0; opacity:0; pointer-events:none;
}
.app-menu-item .switch .slider{
  position:relative; width:44px; height:24px; border-radius:999px;
  background:var(--btn-bg-hover); border:1px solid var(--btn-bd-hover);
  display:inline-block; vertical-align:middle; transition:background .15s,border-color .15s;
}
.app-menu-item .switch .slider::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .20s ease;
}
.app-menu-item .switch input:checked + .slider{
  background:var(--btnp-bg-hover); border-color:var(--btnp-bd-hover);
}
.app-menu-item .switch input:checked + .slider::before{
  transform:translateX(20px);
}
.app-menu-item .switch .switch-labels{
  display:inline-flex; gap:6px; font-size:12px; color:var(--muted);
}

/* Kleine Meta-Anzeige (z. B. Zeitstempel) rechts im Menüpunkt */
.menu-meta{
  margin-left:12px; font-size:12px; color:var(--muted); white-space:nowrap;
}
/* ======================================================================= */

/* Meta (Zeitstempel) und Switches */
.menu-meta{ margin-left:12px; font-size:12px; color:var(--muted); white-space:nowrap; }
.app-menu-item .switch{ position:relative; display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.app-menu-item .switch input{ position:absolute; inset:0; width:0; height:0; opacity:0; pointer-events:none; }
.app-menu-item .switch .slider{
  position:relative; width:44px; height:24px; border-radius:999px;
  background:var(--btn-bg-hover); border:1px solid var(--btn-bd-hover);
  display:inline-block; vertical-align:middle; transition:background .15s,border-color .15s;
}
.app-menu-item .switch .slider::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .20s ease;
}
.app-menu-item .switch input:checked + .slider{ background:var(--btnp-bg-hover); border-color:var(--btnp-bd-hover); }
.app-menu-item .switch input:checked + .slider::before{ transform:translateX(20px); }
.app-menu-item .switch .switch-labels{ display:inline-flex; gap:6px; font-size:12px; color:var(--muted); }


/* ====================================================================== */

.step-arrow{
  /* gleiche visuelle Höhe wie Buttons (≈ 40px) */
  height:40px; width:28px; opacity:.75;
  animation:arrow-nudge 1.4s ease-in-out infinite;
  display:inline-block; align-self:center; position:relative; top:0; vertical-align:middle;
}
/* symmetrisches Nudge um die Mitte (horizontal ausgewogen) */
@keyframes arrow-nudge{
  0%   { transform: translateX(-2px); }
  50%  { transform: translateX( 2px); }
  100% { transform: translateX(-2px); }
}

/* Kleine Icon-Grafiken in Buttons (z. B. "Prüfen") */
.btn-icn{
  width:16px; height:16px; margin-right:6px;
  vertical-align:text-bottom; display:inline-block; opacity:.9;
}

/* Menü im Portal bekommt keine Transform/Transitions von der Inline-Positionierung */
#giMenuPortal .app-menu-list {
  will-change: transform, opacity;
  transition: opacity .16s ease;
}


/* === Tabs (verbundene Register: Nav + Panel wirken wie ein Element) === */
/* === Tabs (verbundene Register: Nav + Panel wie ein Element, ohne Abstände) === */
/* === Tabs (verbundene Register: Nav + Panel wie ein Element, ohne Abstände) === */
/* === Tabs (verbundene Register: Nav + Panel wie ein Element, ohne Abstände) === */
/* === Tabs (verbundene Register: Nav + Panel wirken wie EIN Element) === */
.tabs{
  --tab-radius:12px;
  border:1px solid var(--border);           /* durchgehender Außenrahmen */
  border-radius:var(--radiusLG);            /* runde Außenecken (oben & unten) */
  background:var(--bg-pane);
  overflow:hidden;                           /* eliminiert 1px-Überstände */
  /* Kein zusätzlicher margin/padding hier - der Rahmen gehört zum Container */
}

/* Laschenleiste: keine eigene Linie mehr nach unten */
.tabs .tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0; padding:0;
  background:var(--bg-pane);                 /* gleiche Fläche wie Panel */
  position:relative; z-index:2;
  /* WICHTIG: keine border-bottom -> keine Trennlinie mehr zum Panel */
  overflow-x:auto;
}

/* Laschen NICHT wie Buttons stylen (Button-Styles neutralisieren) */
.tabs .tab-btn{
  appearance:none;
  position:relative; top:1px;
  padding:10px 14px;
  background:var(--btn-bg); color:var(--btn-text);
  border:1px solid transparent;              /* nur aktive Lasche zeigt Kanten */
  border-bottom:none;                         /* unten offen */
  font-weight:600; line-height:1;
  border-radius:0 !important;
  box-shadow:none !important; transform:none !important;
  cursor:pointer; outline:none;
  flex:0 0 auto;
  min-width:120px;
}
/* erste/letzte Lasche mit rundem oberen Rand */
.tabs .tab-btn:first-child{ border-top-left-radius:var(--tab-radius); }
.tabs .tab-btn:last-child { border-top-right-radius:var(--tab-radius); }

/* Keine sichtbaren Innenkanten zwischen Laschen */
.tabs .tab-btn + .tab-btn{ margin-left:0; }

/* Hover ohne zusätzliche Linie unten */
.tabs .tab-btn:hover{
  background:var(--btn-bg-hover);
}

/* Fokus-Ringe auf Laschen komplett deaktivieren – sonst „kleine Linie“ */
.tabs .tab-btn:focus,
.tabs .tab-btn:focus-visible{ outline:none; box-shadow:none; }

/* Aktive Lasche verschmilzt optisch mit dem Panel und zeigt nur Außenkanten */
.tabs .tab-btn.active{
  background:var(--bg-pane);
  border-color:var(--border);
  border-bottom:none;
  z-index:3;
}

/* Panel: KEIN eigener Rahmen – Außenrahmen liegt am .tabs-Container */
.tabs .tab-panels{
  border:none;                               /* keine Linie zwischen Tabs & Inhalt */
  padding:14px 12px;
  position:relative; z-index:1;
  background:var(--bg-pane);
}

/* Sichtbarkeit von Panels */
.tabs .tab-panel{ display:none; }
.tabs .tab-panel.active{ display:block; }

/* In Tabs: allgemeines .section-Layout neutralisieren */
.tabs .tab-panel .section{ max-width:none; margin:0; padding:0; }

/* Mapping – responsive Chunks & Hinweise */
.map-wrap .table-wrap{ margin:8px 0; }
.map-table thead th,
.map-table td{ white-space:nowrap; }
.map-table thead th{ font-size:12px; }
select.map-select{ width:100%; max-width:100%; }

/* Felder, die noch zugeordnet werden müssen */
select.map-select.needs-map{
  outline:2px solid var(--danger, #d95757);
  border-radius:8px;
}

/* Auswahl ist Pflichtpfad */
select.map-select.is-required,
.map-table thead th.is-required{
  box-shadow: 0 0 0 2px var(--accent, #1f8b4c) inset;
}

/* Hinweis oben, wenn Pflichtpfade fehlen */
.map-required-hint{
  margin:6px 0 2px;
  color: var(--warn, #b76e00);
  font-size: 12px;
}

/* Mapping – Hinweis-Icon in Kopfzellen */
.map-table thead th{ position: relative; }
.map-hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; font-size:11px; line-height:1;
  border-radius:50%; border:1px solid currentColor; margin-left:6px;
  cursor:help; opacity:.75; user-select:none;
}
.map-hint:hover{ opacity:1; }

/* Table-View Controls (column picker & sorting) */
.tv-col-list{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.tv-col-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.25rem 0.5rem;
  border-radius:0.65rem;
  border:1px solid transparent;
  cursor:grab;
  transition:border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.tv-col-row:hover{
  border-color:rgba(148,163,184,.55);
  background-color:rgba(148,163,184,.12);
}
.tv-col-row.dragging{
  opacity:.6;
  border-color:rgba(99,102,241,.6);
  background-color:rgba(99,102,241,.12);
}
.tv-col-handle{
  font-size:0.95rem;
  color:rgba(100,116,139,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
}
.tv-col-row input.tv-col{
  width:1rem;
  height:1rem;
}
.tv-sort-toggle{
  appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  cursor:pointer;
}
.tv-sort-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(99,102,241,.3);
  border-radius:0.35rem;
}
.tv-sort-label{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
}
.tv-sort-indicator{
  position:relative;
  width:0.9rem;
  height:1.1rem;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.15rem;
  opacity:.55;
  color:inherit;
}
.tv-sort-indicator::before,
.tv-sort-indicator::after{
  content:"";
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transition:border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.tv-sort-indicator::before{
  border-bottom:6px solid currentColor;
  opacity:.7;
}
.tv-sort-indicator::after{
  border-top:6px solid currentColor;
  opacity:.7;
}
.tv-sort-toggle.is-active .tv-sort-indicator{
  opacity:1;
}
.tv-sort-toggle.is-active:not(.is-desc) .tv-sort-indicator::before{
  border-bottom-color:var(--accent,#60a5fa);
  opacity:1;
  transform:translateY(-1px);
}
.tv-sort-toggle.is-active:not(.is-desc) .tv-sort-indicator::after{
  opacity:.35;
}
.tv-sort-toggle.is-active.is-desc .tv-sort-indicator::after{
  border-top-color:var(--accent,#60a5fa);
  opacity:1;
  transform:translateY(1px);
}
.tv-sort-toggle.is-active.is-desc .tv-sort-indicator::before{
  opacity:.35;
}


/* Menü-Anpassungen ------------------------------------------------------ */
.app-menu-edit-btn{
  flex:0 0 auto;
  width:var(--app-header-control-height,44px);
  height:var(--app-header-control-height,44px);
  padding:0;
  min-height:0;
  border-radius:999px;
  border:1px solid var(--btn-bd-hover);
  background:var(--btn-bg);
  color:var(--btn-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px var(--btn-shadow);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .18s ease,color .18s ease;
}
.app-menu-edit-btn svg{
  width:18px;
  height:18px;
}
.app-menu-edit-btn:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  transform:translateY(-1px);
}
.app-menu-edit-btn:active{
  transform:translateY(0) scale(.96);
  box-shadow:0 8px 18px var(--btn-shadow);
}
.app-menu-edit-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.15),var(--focus);
}
.app-menu-item--hidden{
  display:none !important;
}
.menu-editor-body{
  padding:4px 0 0;
}
.menu-editor-hint{
  margin-bottom:8px;
  font-size:.9rem;
  color:var(--muted);
}
.menu-editor-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.menu-editor-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-pane);
}
.menu-editor-move-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.menu-editor-move{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.menu-editor-move:not(:disabled):hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bd-hover);
  transform:translateY(-1px);
}
.menu-editor-move:disabled{
  opacity:.35;
  cursor:default;
}
.menu-editor-label{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.menu-editor-label input[type="checkbox"]{
  width:1rem;
  height:1rem;
}
.menu-editor-status{
  min-height:1.5em;
  font-size:.85rem;
  color:var(--muted);
}
.menu-editor-status.is-error{
  color:var(--danger, #b91c1c);
}

/* Menu editor refresh -------------------------------------------------- */
.menu-editor-body{padding:4px 0 0;}
.menu-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.menu-editor-hint{margin:0;font-size:.9rem;color:var(--muted);flex:1 1 auto;}
.menu-editor-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.menu-editor-add-btn{flex:0 0 auto;}
.menu-editor-sort-btn{flex:0 0 auto;}
.menu-editor-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.menu-editor-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-pane);transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease;}
.menu-editor-row.is-drag-over{border-color:var(--accent,#60a5fa);box-shadow:0 0 0 2px rgba(96,165,250,.35);}
.menu-editor-row.is-dragging{opacity:.75;}
.menu-editor-row--group{background:color-mix(in srgb, var(--bg-pane), var(--accent-soft) 25%);border-style:dashed;}
.menu-editor-row--child{margin-left:12px;padding-left:10px;border-left:3px solid var(--accent-soft);}
.menu-editor-drag{width:34px;height:34px;border-radius:8px;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:grab;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;}
.menu-editor-drag:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);}
.menu-editor-drag:active{cursor:grabbing;}
.menu-editor-title{flex:1 1 auto;font-weight:500;}
.menu-editor-meta{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.menu-editor-visibility{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted);}
.menu-editor-visibility input{margin:0;}
.menu-editor-pin{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);}
.menu-editor-pin input{margin:0;}
.menu-editor-root-btn{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--fg);font-size:.78rem;font-weight:600;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;}
.menu-editor-root-btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);transform:translateY(-1px);}
.menu-editor-group-delete{height:30px;padding:0 10px;border-radius:8px;border:1px solid color-mix(in srgb, var(--danger,#b91c1c), #ffffff 40%);background:color-mix(in srgb, var(--danger,#b91c1c), #ffffff 92%);color:var(--danger,#b91c1c);font-size:.78rem;font-weight:600;cursor:pointer;transition:filter .18s ease,border-color .18s ease,transform .18s ease;}
.menu-editor-group-delete:hover{filter:brightness(.98);border-color:var(--danger,#b91c1c);transform:translateY(-1px);}
.menu-editor-group-input{max-width:220px;width:100%;background:var(--input-bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:4px 8px;}
.menu-editor-group-badge{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-left:8px;}
.menu-editor-default{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:.85rem;color:var(--muted);}
.menu-editor-status{min-height:1.5em;font-size:.85rem;color:var(--muted);}
.menu-editor-status.is-error{color:var(--danger,#b91c1c);}

.tv-controls{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0 0 0.75rem 0;margin-left:auto;justify-content:flex-end}
.tv-btn{border-radius:999px;border:1px solid rgba(148,163,184,.6);background:rgba(248,250,252,0.9);color:#0f172a;font-weight:600;padding:0.45rem 1.1rem;box-shadow:0 6px 18px rgba(15,23,42,.08);cursor:pointer;transition:transform .1s ease,box-shadow .2s ease,background-color .2s ease}
html[data-theme='dark'] .tv-btn{background:rgba(15,18,30,.85);color:#e2e8f0;border-color:rgba(255,255,255,.12)}
.tv-btn:hover,.tv-btn:focus-visible{transform:translateY(-1px);box-shadow:0 10px 25px rgba(15,23,42,.15)}
.tv-btn--ghost{background:transparent;border-color:rgba(148,163,184,.4);color:#475569}
html[data-theme='dark'] .tv-btn--ghost{color:#cbd5f5;border-color:rgba(226,232,240,.2)}