@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

html,body{
  margin:0; padding:0; height:100%;
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(circle at 20% 20%,#0a0a0f,#000);
  color:#e5e7eb; overflow:hidden;
}

/* ---------- Header ---------- */
header{
  backdrop-filter:blur(12px);
  background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; border-bottom:1px solid rgba(255,255,255,0.05);
}
header h1{
  font-weight:600; font-size:20px; letter-spacing:1px;
  color:#00b7ff; margin:0;
}
#serialInput{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:6px 12px; color:#e5e7eb;
}
#connectBtn{
  background:#00b7ff; border:none; border-radius:8px;
  padding:6px 16px; color:#000; font-weight:600; cursor:pointer;
  transition:all .2s;
}
#connectBtn:hover{filter:brightness(1.3);}

/* ---------- GAK-Bar ---------- */
.gakbar{
  display:flex; justify-content:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.gakbtn{
  border:none; border-radius:12px; padding:8px 18px;
  background:rgba(255,255,255,0.05); color:#aaa; cursor:pointer;
  font-weight:600; transition:.2s;
}
.gakbtn.active{color:#00b7ff; background:rgba(0,183,255,0.15);}

/* ---------- Main Panels ---------- */
main{padding:20px; overflow:auto; height:calc(100% - 140px);}
.metrics{
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px;
  text-align:center; margin-bottom:20px;
}
.metric{
  min-width:120px; padding:16px; border-radius:16px;
  background:rgba(255,255,255,0.05);
  box-shadow:0 0 15px rgba(0,183,255,0.05) inset;
}
.metric .value{font-size:22px; color:#00ff9c; font-weight:600;}
.metric .label{font-size:13px; color:#aaa;}

/* ---------- String Grid ---------- */
.strings{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}
.string-card{
  position:relative;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  padding:12px;
  transition:.2s;
}
.string-card[blocked="true"]{opacity:0.4;}
.string-id{font-weight:600; color:#00b7ff;}
.string-amp{font-size:20px; color:#00ff9c;}
.locked{position:absolute;top:6px;right:8px;color:#f44;}
.toggle{
  display:inline-block; margin-top:8px; cursor:pointer;
  background:#222; border-radius:20px; width:50px; height:26px;
  position:relative; transition:.3s;
}
.toggle::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#555; transition:.3s;
}
.string-card[data-set="true"] .toggle{background:#00b7ff;}
.string-card[data-set="true"] .toggle::after{background:#fff; left:27px;}
.string-card[data-pending="1"] { outline:2px dashed rgba(255,255,255,.25); }

/* Verriegelungs-Badge */
.lock-badge{
  position:absolute; top:6px; right:8px;
  font-size:11px; letter-spacing:.4px;
  padding:2px 6px; border-radius:6px;
  background:#321; color:#ff6b6b; border:1px solid #a33;
}
.string-card[blocked="true"]{ opacity:.55; }
.string-meta{ font-size:12px; color:#9aa; margin-top:6px; }

/* ===== Hero-Background (Mars/Space Vibe) ===== */
html, body { position: relative; }
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(0,183,255,.08), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(0,255,156,.06), transparent 55%),
    url("./Backsymb.png") center/cover no-repeat;
  filter:saturate(0.9) blur(0px);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(4,6,10,.85));
}

/* ===== Header / Branding ===== */
.shell{
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(5,8,14,0.45);
  backdrop-filter:blur(12px);
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-smb{ height:40px; object-fit:contain; filter:drop-shadow(0 4px 18px rgba(0,183,255,.12)); }

.header-controls{ display:flex; align-items:center; gap:16px; }
.header-controls .sn{ display:flex; gap:8px; }
.brand-q3{ height:26px; opacity:.9; }

/* ===== Inputs / Buttons (unchanged, nur etwas spacing) ===== */
#serialInput {
  width: 90px;
  min-width: 90px;
}
#connectBtn{ box-shadow:0 6px 18px rgba(0,183,255,.25); }

/* ===== GAK-Bar leicht gläsern ===== */
.gakbar{
  background:rgba(8,12,18,.35);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== Footer ===== */
footer{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.35));
  padding:10px; color:#8ea0b4;
}
.footer-smb{ height:20px; opacity:.8; }

/* ===== Cards / Locks (aus vorherigem Schritt) ===== */
.lock-badge {
  position: absolute; top: 6px; right: 8px;
  font-size: 11px; letter-spacing: .4px; padding: 2px 6px; border-radius: 6px;
  background: #321; color: #ff6b6b; border: 1px solid #a33;
}
.string-card[blocked="true"] { opacity: .55; }
.string-meta { font-size: 12px; color: #aaa; margin-top: 6px; }

.hud-logo{
  position:fixed; top:18px; right:18px; z-index:5; opacity:.12;
}
.hud-logo img{ height:56px; filter:grayscale(1) contrast(1.1); }


/* ---------- Footer ---------- */
footer{
  text-align:center; font-size:12px; color:#555;
  padding:8px; position:absolute; bottom:0; width:100%;
}

/* ============================================
   Q3 SM-BOX Interface – Pending Status Styles
   ============================================ */

.string-card[data-pending="1"] {
  outline: 2px dashed rgba(255, 255, 255, 0.25);
  position: relative;
  transition: outline-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(0, 183, 255, 0.3);
}

.string-card[data-pending="1"]::after {
  content: '⏳ pending...';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  color: #ccc;
  animation: blinkPending 1s infinite;
}

@keyframes blinkPending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === Cockpit & LED indicators === */
.cockpit {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 12px;
}
.ind {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #0e0e0e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ind .led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5a5a5a;
}
.led.on-green {
  background: #00d27a;
}
.led.on-red {
  background: #ff4d4f;
}
.led.off {
  background: #5a5a5a;
  opacity: 0.7;
}
.ind .label {
  font-size: 0.92rem;
  color: #ddd;
}
.ind .state {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* === Mini-Button für Historie === */
.actions {
  margin-top: 6px;
}
.btn-mini{
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  /* besserer Kontrast */
  color: #e9f2ff;
  background: #0f2744;                /* dunkelblau statt grau */
  box-shadow:
    inset 0 0 0 1px #2a6fb6,          /* klare Kontur */
    0 0 8px rgba(78,161,255,0.18);    /* leichter Glow */
  letter-spacing: .2px;
}
.btn-mini:hover{ background:#1a3d66; box-shadow: inset 0 0 0 1px #4ea1ff, 0 0 10px rgba(78,161,255,.3); }
.btn-mini:focus-visible{ outline:2px solid #4ea1ff; outline-offset:2px; }
.btn-mini::before{
  content:"⏱️";
  margin-right:6px;
  font-size: .95em;
  opacity:.95;
}

/* Textzeile unter der GAK-Bar */
.gak-status {
  margin: 8px 16px;
  font-size: 0.9rem;
}

.gak-status.online {
  color: #00ff9c;
}

.gak-status.offline {
  color: #ff5555;
}

/* GAK-Buttons mit Name + LED */
.gakbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.gakbtn .gak-name {
  flex: 1;
}

.gakbtn .gak-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #444;
  background: #444; /* neutral */
}

.gakbtn .gak-led.online {
  background: #00ff9c;
}

.gakbtn .gak-led.offline {
  background: #ff5555;
}

/* String, der aus der Toleranz fällt */
.string-card.string-out-of-range {
  border: 2px solid orange;
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.8);
}


.string-card.string-out-of-range .string-amp {
  color: #ff8844;
  font-weight: 700;
}

/* Wrapper der Toleranz-Leiste */
.tol-bar {
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal zentriert */
  justify-content: center;  /* vertikal wenn nötig */
  margin: 20px 0;
  text-align: center;

  /* NEU: Rahmen + Hintergrund */
  padding: 12px 20px;
  border-radius: 10px;
  background: #1e1e1e;          /* dunkles Grau, passt zu deinem Theme */
  border: 1px solid #333;       /* dezenter Rahmen */
  box-shadow: 0 0 8px rgba(0,0,0,0.3); /* leichter Tiefeneffekt */
}

/* Label über dem Slider */
.tol-bar label {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #ddd;                 /* leichte Aufhellung für bessere Lesbarkeit */
}

/* Slider selbst */
#tolRange {
  width: 250px;              /* Slider wird etwas breiter */
  max-width: 80vw;           /* responsive */
}

.master-toggle {
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-master {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #222;
  color: #eee;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.15s;
}

.btn-master:hover {
  filter: brightness(1.25);
}

.btn-master.on {
  border-color: #00c87a;
}

.btn-master.off {
  border-color: #ff5555;
}

.global-toggle-state {
  font-size: 0.9rem;
  color: #ccc;
  margin-left: 10px;
}

#closeBtn {
  background:#4c0000 !important;
  border:1px solid #aa3333 !important;
  color:#fff;
}
#closeBtn:hover {
  filter:brightness(1.25);
}