/* ==========================================================================
   SPR THEME – Variant B (HUD / crisper separation) – FIXED + FORMATTED
   - Mini-Header bleibt im Stripe-Block (kein eigener Balken)
   - Bilderzeile übernimmt exakt die gleiche Stripe-Farbe wie Datensatzzeile
   - Separator nur Linie (kein grauer Balken)
   - Banner: Bild + Overlay + Noise + sauberer Übergang
   - Scroll: nur Index-Seite bekommt eigenen Scroll-Container (nicht global)
   - Dropdown: dunkel + del rot
   - Notes: kein Doppelrahmen-Effekt mehr
   ========================================================================== */

/* ==========================================================================
   Variables
   ========================================================================== */

:root{
  --spr-bg: #0b0c0e;

  --spr-text: rgba(248,249,250,.92);
  --spr-muted: rgba(248,249,250,.55);
  --spr-dim: rgba(248,249,250,.45);

  --spr-border: rgba(175,175,175,.10);
  --spr-border-strong: rgba(185,185,185,.18);

  --spr-blue: rgba(13,110,253,.60);
  --spr-blue-hover: rgba(13,110,253,.78);

  --spr-red: rgba(220,53,69,.50);
  --spr-red-hover: rgba(220,53,69,.70);

  --spr-green: rgba(34,197,94,.16);
  --spr-green-border: rgba(74,222,128,.55);

  --spr-shadow: 0 18px 48px rgba(0,0,0,.72);
}

/* ==========================================================================
   Global base
   ========================================================================== */

body{
  margin: 0;
  background: var(--spr-bg);
  color: var(--spr-text);
  font-size: 0.9rem;
}

/* Global background */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("/static/img/nav_bg_hud.webp") center/cover no-repeat;
  opacity: .14;
  filter: blur(1.8px) contrast(.95) saturate(0);
  transform: scale(1.05);
  z-index: -2;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%,
    rgba(0,0,0,.12),
    rgba(0,0,0,.88)
  );
  z-index: -1;
}

/* Layout helpers */
.main-wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{ flex: 1 0 auto; }

.content-container{
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 1400px){
  .content-container{
    max-width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.spr-surface{
  background: rgba(10,12,16,.55);
  border: 1px solid rgba(185,185,185,.10);
  border-radius: 12px;
  box-shadow: var(--spr-shadow);
  padding: 14px;
}

/* ==========================================================================
   Navbar (Banner)
   ========================================================================== */

.navbar-banner{
  position: sticky !important;
  top: 0;
  z-index: 1030;
  overflow: hidden;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* “Kante” unter dem Banner */
.navbar-banner::after{
  content:"";
  display:block;
  height: 1px;
  background: rgba(185,185,185,.12);
}

/* braucht relative + hidden für ::before/::after */
.navbar-banner-inner{
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
}

/* ==========================================================================
   Navbar Banner – Background Image + Overlay + Noise (sauber & sichtbar)
   ========================================================================== */

/* Banner Background Image */
.navbar-banner-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background: url("/static/img/banner.webp") 62% 50% / cover no-repeat;

  /* Sichtbarkeit */
  opacity: .62;
  filter: blur(.8px) saturate(.95) contrast(1.10) brightness(1.08);
  transform: scale(1.02);
}

/* Banner Overlay (dunkelt ab, aber lässt Bild noch durch) */
.navbar-banner-inner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background: linear-gradient(180deg,
    rgba(5,6,8,.48),
    rgba(5,6,8,.62)
  );

  border-bottom: 1px solid rgba(185,185,185,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Noise Layer */
.navbar-banner-inner .banner-noise{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  opacity: .04;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 6px
    );
  mix-blend-mode: soft-light;
}


/* Navbar content above layers */
.navbar-banner-inner > .navbar-content{
  position: relative;
  z-index: 3;
}

.navbar.navbar-dark.bg-secondary{
  padding-top: .35rem;
  padding-bottom: .30rem;
  background-color: transparent !important;
}

.navbar-brand{
  font-size: 1.45rem;
  color: rgba(248,249,250,0.88);
  letter-spacing: .25px;
}

.navbar-version{
  font-size: .7rem;
  color: rgba(248,249,250,0.50);
  margin-top: -0.2rem;
}

.navbar-right{
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.navbar-search-row{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.navbar-sep{
  color: rgba(248,249,250,0.30);
  padding: 0 .25rem;
  user-select: none;
  white-space: nowrap;
}

/* Inputs: opaker für bessere Lesbarkeit */
.navbar-input{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(185,185,185,.16) !important;
  color: rgba(248,249,250,.92) !important;
}

.navbar-input::placeholder{
  color: rgba(248,249,250,.20) !important;
}

.navbar-input:focus{
  outline: none;
  border-color: rgba(88,166,255,.55);
  box-shadow:
    0 0 0 .22rem rgba(13,110,253,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.navbar-freq { width: 11.0rem; }
.navbar-tol  { width: fit-content; min-width: 2.0rem; }
.navbar-q    { width: 11.0rem; }
.navbar-x    { width: 11.0rem; }
.navbar-unit { width: 7rem; }
.navbar-xtol { width: fit-content; min-width: 1.8rem; }
.navbar-struktur { width: 6.5rem; }
.navbar-mod { width: 6.2rem; }

.navbar-count{
  font-size: .78rem;
  color: rgba(70,220,140,0.80);
  white-space: nowrap;
  margin: 0 1rem;
  flex: 1;
  text-align: center;
}

/* ==========================================================================
   Navbar Actions: + Button + Dropdown (muted, kantiger)
   ========================================================================== */

.spr-nav-plus,
.spr-nav-menu{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 1.875rem;
  min-width: 1.875rem;
  padding: 0 .45rem;

  border-radius: var(--spr-btn-radius); /* nutzt deine 5px */
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.90);

  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .14s ease, border-color .14s ease, transform .08s ease, color .14s ease;
}

.spr-nav-plus{
  font-weight: 950;
  font-size: 1.1rem;
  line-height: 1.875rem;
  padding: 0 .50rem; /* minimal “dicker” */
}

.spr-nav-plus:hover,
.spr-nav-menu:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.96);
}

.spr-nav-plus:active,
.spr-nav-menu:active{
  transform: translateY(1px);
}

.spr-nav-plus:focus-visible,
.spr-nav-menu:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 .22rem var(--spr-btn-focus),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Button reset (weil <button>) */
.spr-nav-menu{
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}



/* Reset button */
.btn-reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.875rem;
  min-width: 1.875rem;
  padding: 0 .45rem;
  border-radius: var(--spr-btn-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: #ff5a5a;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .14s ease, border-color .14s ease, transform .08s ease, color .14s ease;
  font-weight: 950;
  font-size: 1.1rem;
  line-height: 1.875rem;
  vertical-align: middle;
}

.btn-reset:hover{
  background: rgba(255,77,77,0.12);
  border-color: rgba(255,128,128,0.40);
  color: #ff8a8a;
}

.btn-reset:active{
  transform: translateY(1px);
}

.btn-reset:active{ transform: translateY(1px); }
.btn-reset-hidden{
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* ==========================================================================
   Buttons (MONO HUD – muted/grey, weniger “poppig”)
   ========================================================================== */

:root{
  --spr-btn-radius: 5px;

  --spr-btn-bg: rgba(255,255,255,.045);
  --spr-btn-bg-hover: rgba(255,255,255,.070);
  --spr-btn-bg-active: rgba(255,255,255,.090);

  --spr-btn-border: rgba(255,255,255,.11);
  --spr-btn-border-hover: rgba(255,255,255,.18);

  --spr-btn-text: rgba(248,249,250,.86);
  --spr-btn-text-strong: rgba(255,255,255,.96);

  --spr-btn-shadow: 0 10px 20px rgba(0,0,0,.30);
  --spr-btn-shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  /* “Primary” sehr zurückhaltend (slate/steel) */
  --spr-btn-accent-bg: rgba(148,163,184,.14);
  --spr-btn-accent-bg-hover: rgba(148,163,184,.18);
  --spr-btn-accent-border: rgba(148,163,184,.34);
  --spr-btn-accent-border-hover: rgba(148,163,184,.48);

  /* Info minimal unterscheidbar, aber nicht bunt */
  --spr-btn-info-bg: rgba(94,234,212,.20);        /* Erhöht von .10 */
  --spr-btn-info-bg-hover: rgba(94,234,212,.28);
  --spr-btn-info-border: rgba(94,234,212,.35);    /* Erhöht von .20 */
  --spr-btn-info-border-hover: rgba(94,234,212,.48);

  /* Focus Ring: neutral-grau statt knallblau */
  --spr-btn-focus: rgba(148,163,184,.26);
}

.btn-add,
.btn-cancel,
.btn-action,
.btn-action-menu,
.spr-login-btn,
.btn-reset{
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .08s ease,
    color .14s ease;
}

@media (prefers-reduced-motion: reduce){
  .btn-add,
  .btn-cancel,
  .btn-action,
  .btn-action-menu,
  .spr-login-btn,
  .btn-reset{ transition: none; }
}

.btn-add:active,
.btn-cancel:active,
.btn-action:active,
.btn-action-menu:active,
.spr-login-btn:active,
.btn-reset:active{
  transform: translateY(1px);
  background: var(--spr-btn-bg-active);
}

.btn-add:focus-visible,
.btn-cancel:focus-visible,
.btn-action:focus-visible,
.btn-action-menu:focus-visible,
.spr-login-btn:focus-visible,
.btn-reset:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 .22rem var(--spr-btn-focus),
    var(--spr-btn-shadow-inset);
}

/* Pagination info (lighter than full white but more visible than .text-muted) */
.spr-paging-info{
  color: rgba(120,160,130,0.75);
  font-weight: 700;
  font-size: .78rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* small variants for app buttons to match compact pagination */
.btn-add.btn-sm, .btn-cancel.btn-sm{
  padding: .16rem .6rem;
  font-size: .78rem;
  line-height: 1.1;
}

/* Compact paging adjustments */
.spr-paging-compact{
  position: relative;
}
.spr-paging-compact .btn-action{ padding: .18rem .5rem; font-size: .80rem; }
.spr-paging-compact .spr-paging-info{ color: rgba(120,160,130,0.75); font-weight:700; }

/* Page indicator button (dezent und dunkler) */
.spr-page-indicator{
  background: rgba(0,0,0,.12) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(248,249,250,.55) !important;
  font-weight: 500;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Primary (add/save) – muted slate statt “Neon-Blau”
   -------------------------------------------------------------------------- */
.btn-add{
  padding: .26rem .88rem;
  font-size: .85rem;
  line-height: 1.25;
  border-radius: var(--spr-btn-radius);
  font-weight: 850;

  color: var(--spr-btn-text-strong);
  background: var(--spr-btn-accent-bg);
  border: 1px solid var(--spr-btn-accent-border);

  box-shadow: var(--spr-btn-shadow), var(--spr-btn-shadow-inset);
}

.btn-add:hover{
  background: var(--spr-btn-accent-bg-hover);
  border-color: var(--spr-btn-accent-border-hover);
}

/* --------------------------------------------------------------------------
   Neutral (cancel/close/export/import/logout)
   -------------------------------------------------------------------------- */
.btn-cancel{
  padding: .26rem .88rem;
  font-size: .85rem;
  line-height: 1.25;
  border-radius: var(--spr-btn-radius);
  font-weight: 800;

  color: var(--spr-btn-text);
  background: var(--spr-btn-bg);
  border: 1px solid var(--spr-btn-border);

  box-shadow: var(--spr-btn-shadow), var(--spr-btn-shadow-inset);
}

.btn-cancel:hover{
  background: var(--spr-btn-bg-hover);
  border-color: var(--spr-btn-border-hover);
  color: var(--spr-btn-text-strong);
}

/* --------------------------------------------------------------------------
   Table action buttons (kompakt, flach)
   -------------------------------------------------------------------------- */
.btn-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 1.55rem;
  padding: 0 .55rem;
  font-size: .72rem;
  line-height: 1;
  font-weight: 850;
  border-radius: 5px;
  white-space: nowrap;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(248,249,250,.86);

  box-shadow: var(--spr-btn-shadow-inset);
}

.btn-action:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
}

/* Info button (leicht abgesetzt, aber sehr dezent) */
.btn-action-info{
  min-width: 2.10rem;
  padding: 0 .55rem;

  background: var(--spr-btn-info-bg);
  border-color: var(--spr-btn-info-border);
  color: rgba(236,254,255,.88);
}
.btn-action-info:hover{
  background: var(--spr-btn-info-bg-hover);
  border-color: var(--spr-btn-info-border-hover);
  color: rgba(236,254,255,.96);
}

/* Menu (⋯) – neutral */
.btn-action-menu{
  min-width: 2.10rem;
  padding: 0 .55rem;

  background: rgba(255,255,255,.10);  /* Erhöht von .04 */
  border: 1px solid rgba(255,255,255,.22);  /* Erhöht von .12 */
  color: rgba(248,249,250,.88);

  box-shadow: var(--spr-btn-shadow-inset);
}
.btn-action-menu:hover{
  background: rgba(255,255,255,.15);  /* Erhöht von .07 */
  border-color: rgba(255,255,255,.32);  /* Erhöht von .18 */
  color: rgba(255,255,255,.98);
}

/* Alerts (optional: etwas ruhiger) */
.spr-alert{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
}



/* ==========================================================================
   Forms
   ========================================================================== */

.spr-title{
  font-size: 1.15rem;
  color: rgba(248,249,250,0.32);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 4px 14px rgba(0,0,0,0.78);
}

.spr-title.spr-title-strong{
  color: rgba(248,249,250,0.48);
  text-shadow: 0 6px 18px rgba(0,0,0,0.92);
}

.spr-brand-title{
  font-size: 1.30rem;
  letter-spacing: 0.15em;
  line-height: 1.05;
  font-weight: 600;
  text-shadow: 0 4px 14px rgba(0,0,0,0.78);
}

.form-label {
  font-size: .70rem;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: rgba(248,249,250,.62) !important;
  margin-bottom: .25rem;
  font-weight: 600;
}

.field-help {
  font-size: .70rem;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: rgba(248,249,250,.62) !important;
  margin-top: .15rem;
  font-weight: 500;
  opacity: 0.6;
}

.form-control-dark,
.form-select-dark{
  background: rgba(0,0,0,.55) !important;
  color: rgba(248,249,250,.92) !important;
  border-radius: 8px;
  border: 1px solid rgba(185,185,185,.16) !important;
}

.form-control-dark:focus,
.form-select-dark:focus{
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  border-color: rgba(88,166,255,.55) !important;
  box-shadow:
    0 0 0 .22rem rgba(13,110,253,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: none !important;
}

.form-control-dark::placeholder,
.form-select-dark::placeholder{
  color: rgba(248,249,250,.30) !important;
}

/* Remove number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
}

/* Required field indicators */
.required {
  color: #dc3545;
  font-weight: bold;
}

/* Required field hint */
.required-hint {
  color: #b86b6b;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge-pill{
  display: inline-block;
  padding: .14rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(185,185,185,.12);
  background: rgba(0,0,0,.28);
  color: var(--spr-text);
  font-size: .75rem;
  line-height: 1.1;
}

.badge-band-vhf{ background: rgba(20,83,45,0.62); color:#e5ffe5; }
.badge-band-uhf{ background: rgba(29,78,216,0.62); color:#e5edff; }
.badge-band-shf{ background: rgba(126,34,206,0.62); color:#f3e8ff; }
.badge-mod{ background: rgba(55,65,81,0.62); color:#e5e7eb; }

/* ==========================================================================
   Table – CLEAR separation per record (FIXED)
   ========================================================================== */

.table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
  border-radius: 12px;
}


.table-signals{
  background: transparent !important;
}

.table-signals td,
.table-signals th{
  color: var(--spr-text);
  border-color: rgba(185,185,185,.10) !important;
}

.table-signals thead th,
.table-signals tbody td{
  padding: .35rem .5rem;
  vertical-align: top;
  text-align: left;
  border: 0;
}

/* Stripe block: Header + Data + Images = exakt gleich */
.signal-row-even td,
.signal-mini-header-row.signal-row-even td,
.signal-images-row-even td{
  background: rgba(0,0,0,.22) !important;
}

.signal-row-odd td,
.signal-mini-header-row.signal-row-odd td,
.signal-images-row-odd td{
  background: rgba(0,0,0,.34) !important;
}

/* Mini header stays inside stripe */
.signal-mini-header-row,
.signal-mini-header-row td,
.signal-mini-header-row th{
  font-size: .70rem;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: rgba(248,249,250,.62) !important;

  background: inherit !important;
  padding-top: .10rem !important;
  padding-bottom: .10rem !important;
  vertical-align: middle !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.40);

  border-top: 1px solid rgba(185,185,185,.16) !important;
  border-bottom: 1px solid rgba(185,185,185,.12) !important;
}

.signal-mini-header-row {
  margin: 0;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}

.signal-mini-header-row td:first-child{ position: relative; }

.signal-mini-header-row td:first-child::before{
  content:"";
  position:absolute;
  left:-8px;
  top:-1px;
  bottom:-1px;
  width:3px;
  border-radius:3px;
  background: rgba(13,110,253,.55);
  box-shadow: 0 0 18px rgba(13,110,253,.22);
}

/* Data/Image row spacing */
.table-signals tbody tr.signal-row td{ border-bottom-width: 0; }

.table-signals tbody tr.signal-images-row td{
  border-top-width: 0;
  border-bottom-width: 0;
  padding-top: .15rem;
  padding-bottom: .45rem;
}

/* Bilder-Cell erbt Stripe-Farbe */
.signal-images-cell{
  background: inherit !important;
  padding-top: 0.6rem;
}

/* Separator: nur Linie */
.signal-images-separator{
  background: transparent !important;
  height: 0 !important;
  border-top: 1px solid rgba(185,185,185,.12) !important;
  border-bottom: 0 !important;
  margin: .35rem 0 .6rem;
}

.signal-images{
  margin-left: .5rem;
  margin-top: .2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-start;
  align-items: flex-end;
}

.spectrum-thumb{
  max-width: 120px;
  max-height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.img-thumbnail{
  background: transparent !important;
  border: 1px solid rgba(185,185,185,0.16) !important;
  border-radius: 10px !important;
  padding: .2rem !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.45) !important;
}

/* Spacer */
.table-signals tbody tr.signal-spacer-row td{
  padding: .75rem 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(185,185,185,.14) !important;
}

/* ==========================================================================
   Table – Action column (more space for data)
   ========================================================================== */

.spr-col-actions{
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-left: .25rem !important;
  padding-right: .25rem !important;
  white-space: nowrap;
}

.spr-actions-spacer{
  display:inline-block;
  width: 1px;
  height: 1.55rem;
  opacity: 0;
}

/* ==========================================================================
   Modal + Lightbox
   ========================================================================== */

.spr-notes-modal{ max-width: 1200px; }

@media (min-width: 1600px){
  .spr-notes-modal{ max-width: 1400px; }
}

.spr-notes-title{
  font-size: .95rem;
  font-weight: 900;
  margin: 0;
  color: var(--spr-text);
}

/* Lightbox */
.spr-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,0.86);
  z-index: 5000;
}

.spr-lightbox.is-open{ display: flex; }

.spr-lightbox-content{
  position: relative;
  max-width: 94vw;
  max-height: 92vh;
}

.spr-lightbox-img{
  display: block;
  max-width: 94vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  background: rgba(255,255,255,0.04);
}

.spr-lightbox-caption{
  margin-top: .55rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(248,249,250,0.65);
}

.spr-lightbox-close{
  position: absolute;
  top: -.9rem;
  right: -.9rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: rgba(248,249,250,0.9);
  font-weight: 900;
  cursor: pointer;
}

.spr-lightbox-close:hover{
  background: rgba(0,0,0,0.75);
  border-color: rgba(255,255,255,0.28);
}

.spr-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.40);
  color: rgba(248,249,250,0.92);
  font-size: 1.6rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.spr-lightbox-nav:hover{
  background: rgba(0,0,0,0.65);
  border-color: rgba(255,255,255,0.26);
}

.spr-lightbox-prev{ left: -3.2rem; }
.spr-lightbox-next{ right: -3.2rem; }

@media (max-width: 700px){
  .spr-lightbox-prev{ left: .3rem; }
  .spr-lightbox-next{ right: .3rem; }
}

/* ==========================================================================
   Login (compatible)
   ========================================================================== */

.spr-bg{
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
}

.spr-card-boost{ position: relative; overflow: hidden; }

.spr-card-boost::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: url("/static/img/login.webp") center/cover no-repeat;
  opacity: .36;
  filter: contrast(0.95) brightness(.70) saturate(0.05);
  transform: none;
  z-index:0;
}

.spr-card-boost::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: radial-gradient(circle at 50% 35%,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.48)
  );
  z-index:0;
}

.spr-card-boost > *{ position: relative; z-index: 1; }

.spr-login-card{
  background: rgba(10,12,16,.75) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}

.spr-login-input{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(185,185,185,.16) !important;
  color: rgba(248,249,250,.92) !important;
  border-radius: 8px !important;
  text-align: center;
}

.spr-login-input:focus{
  outline: none !important;
  border-color: rgba(88,166,255,.55) !important;
  box-shadow:
    0 0 0 .22rem rgba(13,110,253,.22) !important;
}

.spr-login-btn{
  padding: .42rem 1.1rem;
  font-size: .9rem;
  font-weight: 850;
  color: rgba(248,249,250,.9);
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px;
  box-shadow: var(--spr-btn-shadow-inset);
}

.spr-login-btn:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95);
}

/* ==========================================================================
   Index-only (dein aktueller Stand: kein eigener Scroll-Container)
   ========================================================================== */

.spr-table-scroll{
  height: auto;
  overflow: visible;
  padding-top: 0;
  scrollbar-gutter: auto;
}

.page-index main{
  padding-top: .35rem !important;
  padding-bottom: .75rem !important;
}

/* ==========================================================================
   Dropdown Actions (⋯) – dunkel + del rot
   ========================================================================== */

.btn-action-menu{
  background: rgba(0,0,0,.40);
  color: rgba(248,249,250,.88);
  border: 1px solid rgba(185,185,185,.16);
  padding: 0 .42rem;
  min-width: 2.1rem;
  text-decoration: none;
}
.btn-action-menu:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(185,185,185,.22);
  color: #fff;
}

/* Dropdown menu “HUD / glass” */
.spr-dropdown{
  background: rgba(10,12,16,.92);
  border: 1px solid rgba(185,185,185,.16);
  border-radius: 12px;
  padding: .25rem;                 /* weniger */
  box-shadow: 0 22px 60px rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  min-width: 9.0rem;               /* schmaler */
  width: max-content;              /* nur so breit wie nötig */
}


.spr-dd-item{
  border-radius: 8px;
  color: rgba(248,249,250,.95);
  padding: .42rem .55rem;
  font-weight: 900;
  text-transform: lowercase;

  background: transparent;
  border: 1px solid transparent;

  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}

.spr-dd-item:active{
  transform: translateY(1px);
}


.spr-dd-item:hover,
.spr-dd-item:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(185,185,185,.14);
  color: #fff;
}

.spr-dd-divider{
  border-top: 1px solid rgba(185,185,185,.14);
  margin: .35rem .25rem;
}

/* del rot */
.spr-dd-danger{
  color: rgba(255,120,120,.95) !important;
}
.spr-dd-danger:hover,
.spr-dd-danger:focus{
  background: rgba(220,53,69,.20) !important;
  border-color: rgba(220,53,69,.26) !important;
  color: #fff !important;
}



/* ==========================================================================
   Notes (Usage + Notes) – FIX: kein Doppelrahmen
   ========================================================================== */

.spr-notes-usage-wrap,
.spr-notes-notes-wrap{
  background: rgba(0,0,0,0.3);
  border: 1px solid #222;
  border-radius: 12px;
  padding: .65rem .75rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.spr-notes-usage-label,
.spr-notes-notes-label{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248,249,250,.55);
  margin-bottom: .35rem;
  font-weight: 800;
}

.spr-notes-usage{
  color: rgba(248,249,250,.90);
  font-weight: 700;
  white-space: pre-wrap;
  word-break: break-word;
}

/* WICHTIG:
   Du hast im HTML für Notes: <div class="spr-notes-body spr-notes-box" ...>
   Damit das NICHT doppelt gerahmt aussieht, machen wir spr-notes-box "neutral".
   (Du kannst die Klasse später ganz entfernen, aber musst du nicht.)
*/
.spr-notes-box{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Notes Text */
.spr-notes-body{
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(248,249,250,0.88);
  min-height: 40vh;
  margin: 0;
}

/* Optional / legacy (kannst du später löschen, stört nicht) */
.spr-notes-meta{
  padding: .55rem .65rem;
  border-radius: 10px;
  border: 1px solid rgba(185,185,185,.12);
  background: rgba(0,0,0,.25);
}

.spr-notes-meta-label{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248,249,250,.50);
  margin-bottom: .2rem;
  font-weight: 800;
}

.spr-notes-meta-value{
  font-size: .95rem;
  font-weight: 700;
  color: rgba(248,249,250,.92);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   Tooltip + Ellipsis (HUD) – EINMALIG, ohne Duplikate
   ========================================================================== */

.table-signals{
  table-layout: fixed;
  width: 100%;
}

/* Ellipsis */
.spr-tip{
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* Tooltip nur wenn Inhalt da ist */
.spr-tip[data-tip]:not([data-tip=""]):hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  max-width: 680px;
  white-space: normal;
  padding: .45rem .55rem;
  border-radius: 10px;
  background: rgba(10,12,16,.96);
  border: 1px solid rgba(185,185,185,.18);
  color: rgba(248,249,250,.92);
  box-shadow: 0 18px 48px rgba(0,0,0,.75);
  z-index: 9999;
}

.spr-tip[data-tip]:not([data-tip=""]):hover::before{
  content:"";
  position:absolute;
  left: 14px;
  top: calc(100% + 2px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(10,12,16,.96);
  border-left: 1px solid rgba(185,185,185,.18);
  border-top: 1px solid rgba(185,185,185,.18);
  z-index: 10000;
}



/* ---------- Column sizing (passt zu deinen Beispielen) ---------- */
/* 1 Frequenz: soll "5925.000 – 6425.000" gerade so schaffen */
.table-signals td:nth-child(1),
.table-signals .signal-mini-header-row td:nth-child(1){
  width: 190px;
}

/* 3 Name: soll Beispiel-Text so gut wie möglich drin haben */
.table-signals td:nth-child(3),
.table-signals .signal-mini-header-row td:nth-child(3){
  width: 420px;
}

/* 8 Struktur: z.B. "TDMA; Frame 60; Frame 576" */
.table-signals td:nth-child(8),
.table-signals .signal-mini-header-row td:nth-child(8){
  width: 220px;
}

/* (optional) Modulation, wenn du da auch gern ruhigere Breite willst */
.table-signals td:nth-child(4),
.table-signals .signal-mini-header-row td:nth-child(4){
  width: 150px;
}

/* Dropdown immer über Inhalt */
.dropdown-menu.spr-dropdown{
  z-index: 9999;
}

/* del rot (dein Wunsch) */
.spr-dropdown .spr-dd-danger{
  color: rgba(255,120,120,.95) !important;
}
.spr-dropdown .spr-dd-danger:hover,
.spr-dropdown .spr-dd-danger:focus{
  background: rgba(220,53,69,.20) !important;
  color: #fff !important;
}

/* ========================================================================
   Spectrum View
   ======================================================================== */

.spectrum-card{
  position: relative;
  overflow: hidden;
}

.spectrum-chart{
  position: relative;
  min-height: 340px;
  border: 1px solid var(--spr-border);
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.00) 24%,
    rgba(255,255,255,0.03) 100%
  );
}

.spectrum-svg{ width: 100%; height: 100%; display: block; }

.spectrum-tick{
  fill: rgba(248,249,250,.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  text-anchor: middle;
}

.spectrum-tooltip{
  position: absolute;
  pointer-events: none;
  padding: 4px 8px;
  color: rgba(248,249,250,0.98);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 
    0 0 8px rgba(0,0,0,0.95),
    0 0 4px rgba(0,0,0,0.95),
    1px 1px 2px rgba(0,0,0,0.95);
  max-width: 320px;
  white-space: nowrap;
}

.spectrum-empty,
.spectrum-error{
  margin-top: 10px;
}

.spectrum-counter{ min-width: 180px; }

.spectrum-scale{
  margin-top: 6px;
}

.spectrum-axis-label{
  fill: rgba(248,249,250,.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  text-anchor: middle;
}

.spectrum-toggle .form-check-input{
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

.spectrum-toggle .form-check-input:checked{
  background-color: rgba(112,181,255,0.65);
  border-color: rgba(112,181,255,0.80);
}

.spectrum-card .text-muted{
  color: rgba(248,249,250,0.90) !important;
}

.spectrum-hint{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: rgba(248,249,250,0.96);
  text-transform: uppercase;
  letter-spacing: .55px;
  font-size: .70rem;
  font-weight: 600;
}

.spectrum-hint-block{
  display: block;
  margin-top: .4rem;
}

.spectrum-topmark{
  text-align: center;
  margin: 1.25rem 0 2rem;
}

.spectrum-select{
  min-width: 6.5rem;
  min-height: 150px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--spr-border);
  color: rgba(248,249,250,0.92);
}

.spectrum-select:disabled{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(185,185,185,.08);
  color: rgba(248,249,250,0.35);
  opacity: 1;
}

.spectrum-select option{
  background: rgba(20,22,26,0.98);
  color: rgba(248,249,250,0.92);
}

.spectrum-freq-input{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(185,185,185,.16) !important;
  color: rgba(248,249,250,.92) !important;
  min-width: 200px;
}

.spectrum-freq-input::placeholder{
  color: rgba(248,249,250,.20) !important;
}

.spectrum-freq-input:focus{
  outline: none;
  border-color: rgba(88,166,255,.55) !important;
  box-shadow:
    0 0 0 .22rem rgba(13,110,253,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.spectrum-tol-select{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(185,185,185,.16) !important;
  color: rgba(248,249,250,.92) !important;
  width: fit-content;
  min-width: 5rem;
}

.spectrum-tol-select:focus{
  outline: none;
  border-color: rgba(88,166,255,.55) !important;
  box-shadow: 0 0 0 .22rem rgba(13,110,253,.22);
}