/* 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) */

  /* 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:#0d1324; --btn-border:var(--border);
  --btn-bg-hover:#121a33; --btn-bd-hover:#2a3553; --btn-text:var(--fg);
  --btnp-bg:#1a0d12; --btnp-border:#2a1020;
  --btnp-bg-hover:#231018; --btnp-bd-hover:#3c1930;
  --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-theme="light"]{
  /* GiContact – Palette C: Petrol Cornflower (Light neutral) */
  --bg:#ffffff; --bg-card:#ffffff; --bg-pane:#ffffff;
  --fg:#0f172a; --muted:#6b7280; --border:#e5e7eb;

  --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:#f7f9ff;          /* zarte Fläche */
  --btn-border:#cfe3ff;      /* blau getönt */
  --btn-bg-hover:#eef6ff;
  --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;
}
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{
  padding:10px 14px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);
  border-radius:10px;cursor:pointer;transition:transform .06s,background .15s,border-color .15s,box-shadow .15s;
}
button:hover,.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--btnp-bg);border-color:var(--btnp-border)}
.btn-primary:hover{background:var(--btnp-bg-hover);border-color:var(--btnp-bd-hover)}

.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}

.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; }            /* Anker für Popover */
.app-menu-btn{
  display:inline-flex; align-items:center; gap:8px;
}

/* 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:none; background:none; color:inherit;
  border-radius:10px; cursor:pointer; text-align:left;
}

/* 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); }


/* === 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;
  /* Sicherstellen, dass das ausgelagerte Menü bedienbar ist */
  pointer-events: auto;
  z-index: 10020;
}


/* === 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; 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 */
}

/* 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;
}
/* 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; }