/* static/css/pbm.css
   FUTURISTIC-AI SUITE · Sherlock: Ultra-PDF-Search
   Optionen-Modal (Builder) – eigenständiges Stylesheet
   Author: lele · 2025-05-29 · Rev 1
   ─────────────────────────────────────────────────────────── */

/* ─── Fallback-Tokens ───────────────────────────────────────── */
:root{
  --res-primary:#14b8ff; --res-primary-hov:#12a6e6;
  --res-success:#2dd4bf; --res-text:#e4e7eb; --res-muted:#8a919d;
  --res-radius:.85rem;   --res-blur:28px;
  --res-shadow-lg:0 24px 64px rgba(20,184,255,.14);
}

/* ─── Modal-Container ───────────────────────────────────────── */
#builderModal .modal-content{
  background:hsla(210 16% 12%/.55);
  border:1px solid #1f242d;
  border-radius:var(--res-radius);
  backdrop-filter:blur(calc(var(--res-blur)+6px)) saturate(180%);
  box-shadow:var(--res-shadow-lg);
}

#builderModal .modal-header,
#builderModal .modal-footer{
  background:hsla(210 14% 16%/.72);
  border-color:#2a303c;
  backdrop-filter:blur(calc(var(--res-blur)+3px)) saturate(170%);
}

#builderModal .modal-title{
  font:700 1.2rem/1.3 "Chakra Petch","Oxanium",system-ui,sans-serif;
  color:var(--res-text);
}

/* ─── Tabs ──────────────────────────────────────────────────── */
#builderModal .nav-tabs{border-bottom:1px solid #2a303c;}
#builderModal .nav-tabs .nav-link{
  color:var(--res-muted);
  font:600 1rem/1.4 "Oxanium","Chakra Petch",sans-serif;
  border:0;border-radius:.75rem .75rem 0 0;
  padding:.7rem 1.35rem;
  transition:color .25s,background .25s;
}
#builderModal .nav-tabs .nav-link:hover{color:var(--res-primary);}
#builderModal .nav-tabs .nav-link.active{
  color:#0b0e11;background:var(--res-primary);
}

/* ─── Pane & Body Scroll ───────────────────────────────────── */
#builderModal .tab-pane{padding:1.4rem 1.2rem;color:var(--res-text);}
#builderModal .modal-body{max-height:60vh;overflow-y:auto;}

/* ─── Ausgewählte-Liste ─────────────────────────────────────── */
#builderModal #selList{
  max-height:25vh;overflow-y:auto;
  background:hsla(210 14% 16%/.55);
  border:1px solid #262c38;border-radius:var(--res-radius);
  backdrop-filter:blur(calc(var(--res-blur)+4px)) saturate(160%);
}
#builderModal .list-group-item{
  display:flex;justify-content:space-between;align-items:center;
  background:hsla(210 16% 12%/.35);
  color:var(--res-text);
  border-color:#2d3340;
  font:600 .95rem/1.45 monospace;
  transition:background .25s,color .25s;
}
#builderModal .list-group-item:not(:last-child){border-bottom:1px solid #2d3340;}
#builderModal .list-group-item:hover{
  background:hsla(210 16% 18%/.55);color:var(--res-primary);
}

/* ─── Inputs ────────────────────────────────────────────────── */
#builderModal .form-control{
  background:hsla(210 14% 18%/.6);
  border:1px solid #2e3642;
  color:var(--res-text);
  border-radius:.6rem;
  padding:.75rem 1rem;
  backdrop-filter:blur(calc(var(--res-blur)+2px)) saturate(160%);
  transition:border-color .25s,box-shadow .25s;
}
#builderModal .form-control:focus{
  border-color:var(--res-primary);
  box-shadow:0 0 0 .28rem hsla(196 100% 57%/.25);outline:0;
}
#builderModal .form-check-input{accent-color:var(--res-primary);}

/* ─── Buttons ──────────────────────────────────────────────── */
#builderModal .btn-primary,
#builderModal .btn-download{
  background:var(--res-primary);
  color:#0b0e11;border:none;
  font-weight:700;border-radius:.75rem;
  transition:background .25s,transform .25s;
}
#builderModal .btn-primary:hover,
#builderModal .btn-download:hover{
  background:var(--res-primary-hov);transform:translateY(-3px);
}

/* ─── Zähler ░──────────────────────────────────────────────── */
#builderModal .sel-count{font-variant-numeric:tabular-nums;}

/* ─── Reduced-Motion - Safety ░────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #builderModal *,#builderModal*::before,#builderModal*::after{
    transition-duration:.01ms!important;
  }
}