/* Namespace: packe deine UI in <div class="xmlv">…</div> */

/* ===================== */
/* Variablen + Basis     */
/* ===================== */
.xmlv{
  --bg: #0b0d10;
  --panel: #12161b;
  --panel-2: #171c22;
  --text: #e9eef4;
  --muted: #a7b1bd;
  --primary: #3aa0ff;
  --primary-2: #2b7fd0;
  --ok: #2bb673;
  --warn: #f0b429;
  --err: #e55353;
  --chip-bg: #1e2430;
  --border: #222a36;
  --shadow: 0 8px 18px rgba(0,0,0,.35);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";

  /* NEU: globaler Seitenrand für Full-bleed-Container */
  --gutter: clamp(12px, 2vw, 24px);

  color: var(--text);
  background: var(--bg);
  font: 15px/1.45 var(--sans);
}
@media (prefers-color-scheme: light){
  .xmlv{
    --bg:#f6f8fb; --panel:#ffffff; --panel-2:#f2f4f8; --text:#0b1220; --muted:#4b5563;
    --chip-bg:#eef2f7; --border:#e5e7eb; --shadow: 0 8px 18px rgba(0,0,0,.08);
  }
}

.xmlv *{ box-sizing:border-box }
.xmlv h1{ font-size: clamp(20px, 2.4vw, 28px); margin:0; letter-spacing:.2px }

/* ===================== */
/* Header                */
/* ===================== */
.xmlv .site-header{
  position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.1) blur(6px);
  background: linear-gradient(180deg, rgba(12,16,22,.86), rgba(12,16,22,.6));
  border-bottom: 1px solid var(--border);
  /* Full-bleed Header-Leiste */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (prefers-color-scheme: light){
  .xmlv .site-header{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  }
}
.xmlv .header-inner{
  margin: 0 auto;
  padding: 12px var(--gutter);
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}

/* ===================== */
/* Full-bleed Container  */
/* ===================== */
.xmlv .container{
  /* Wichtig: Bricht aus äußeren max-width-Wrappern aus */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* vertikale Abstände + eigener Innenabstand */
  margin-top: 18px; margin-bottom: 18px;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* ===================== */
/* Grid + Cards          */
/* ===================== */
.xmlv .grid{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  /* Füllt die Breite und bricht sinnvoll um */
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  align-items: stretch; /* gleiche Höhe in Zeile */
}

.xmlv .card{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  width: 100%; height: 100%; min-height: 380px;
}
.xmlv .card--full{ grid-column: 1 / -1; }

.xmlv .card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.xmlv .card h2{ font-size:16px; margin:0; letter-spacing:.2px }

.xmlv .card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-top:1px solid var(--border);
  gap:8px; flex-wrap:wrap;
}
.xmlv .foot-left{ display:flex; gap:8px; align-items:center }
.xmlv .foot-right{ opacity:.85 }
.xmlv .small{ font-size:12px; color:var(--muted) }

/* ===================== */
/* Controls              */
/* ===================== */
.xmlv .toolbar{ display:flex; gap:8px; flex-wrap:wrap }
.xmlv .btn{
  appearance:none; border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; background:var(--panel-2); color:var(--text); cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.xmlv .btn:hover{ transform: translateY(-1px); }
.xmlv .btn:active{ transform: translateY(0); }
.xmlv .btn.primary{ background: var(--primary); border-color: transparent; color:#fff; }
.xmlv .btn.primary:hover{ background: var(--primary-2); }
.xmlv .btn.ghost{ background: transparent; }
.xmlv .btn.danger{ background: var(--err); color:#fff; border-color: transparent; }

/* ===================== */
/* Content areas         */
/* ===================== */
.xmlv textarea{
  width:100%; flex:1 1 auto; min-height: 180px; min-width: 0;
  background:var(--panel-2); border: none;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  resize: vertical; color:var(--text); padding:10px 12px;
  font-family: var(--mono); font-size: 13px; line-height:1.4;
}
.xmlv textarea:focus{ outline:2px solid var(--primary); outline-offset:-2px }

.xmlv .output{
  margin:0; flex:1 1 auto; min-height: 180px; min-width: 0;
  background:var(--panel-2);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:10px 12px; overflow:auto;
  font-family: var(--mono); font-size: 13px; white-space:pre-wrap; word-break:break-word;
}

/* ===================== */
/* Status Chips          */
/* ===================== */
.xmlv .chip{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:var(--chip-bg); color:var(--muted); border:1px solid var(--border);
}
.xmlv .chip.ok{ color:#0f5132; background:#d1f7e7; border-color:#9be5ca }
.xmlv .chip.warn{ color:#664d03; background:#fff3cd; border-color:#ffe69c }
.xmlv .chip.err{ color:#842029; background:#f8d7da; border-color:#f5c2c7 }

/* ===================== */
/* Spinner + Toast       */
/* ===================== */
.xmlv .spinner{
  position: fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.25);
}
.xmlv .spinner.hidden{ display:none }
.xmlv .ring{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation: spin 0.8s linear infinite;
}
.xmlv .spin-text{ margin-top:12px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6) }
@keyframes spin{ to { transform: rotate(360deg); } }

.xmlv .toast{
  position: fixed; left:50%; bottom:20px; transform: translateX(-50%);
  min-width:220px; padding:10px 14px; border-radius:10px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); box-shadow: var(--shadow);
}

/* ===================== */
/* Responsive Tweaks     */
/* ===================== */
@media (max-width: 420px){
  .xmlv .grid{ grid-template-columns: 1fr; }
}

/* Container und Header innerhalb der Validator-UI sollen NICHT begrenzt werden */
.xmlv .container,
.xmlv .header-inner{
  max-width: none !important;   /* bricht die Fremdvorgabe auf */
  width: 100%;                   /* füllt die verfügbare Breite */
  margin-left: 0;                /* zentrierende auto-Margins neutralisieren */
  margin-right: 0;
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

/* Kopf bleibt einzeilig: Titel links, Chip rechts */
.xmlv .card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  gap: 10px;
}
.xmlv .card-head h2{ margin:0; font-size:16px; letter-spacing:.2px; flex:1 1 auto; min-width:0; }
.xmlv .card-head .chip{ flex:0 0 auto; }

/* NEU: zweite Reihe mit Buttons */
.xmlv .card-actions{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
}
.xmlv .card-actions .toolbar{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;        /* niemals umbrechen */
  align-items:center;
  min-width:0;             /* erlaubt echtes Schrumpfen */
}

/* Buttons: nicht umbrechen, bei Platzmangel kleiner werden */
.xmlv .card-actions .btn{
  white-space:nowrap;      /* nie umbrechen */
  flex:0 1 auto;           /* schrumpfbar */
  min-width:0;
  /* Adaptives Sizing: schrumpft Polster & Schrift bei knapper Breite */
  padding: clamp(4px, 1.2vw, 8px) clamp(6px, 1.8vw, 12px);
  font-size: clamp(12px, 1.4vw, 14px);
}

/* Optional: noch präziser mit Container-Queries, wenn verfügbar */
@supports (width: 100cqw) {
  .xmlv .card-actions .btn{
    font-size: clamp(11px, 1.2cqw, 14px);
    padding: clamp(3px, 0.8cqw, 8px) clamp(6px, 1.2cqw, 12px);
  }
}