/* Page-specific styles for Configuration Variables Mapper */
/* These are intended to layer on top of ../styles.css (site base styles). */

.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}

.left-controls, .right-controls { display:flex; gap:0.5rem; align-items:center; }

.page-title {
  font-family: 'Anton', sans-serif;
  font-size: 2.4rem;
  color: #00ffd1;
  margin: 0 auto;
  text-align:center;
  letter-spacing: 0.5px;
  text-shadow: 0 6px 30px rgba(0,255,209,0.06);
}

.ui-btn {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: transform .12s ease, box-shadow .12s ease;
  background: rgba(255,255,255,0.06);
  color: #e6fff9;
}
.ui-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.ui-btn.primary { background: linear-gradient(90deg,#00ffcc,#00ccff); color:#001; }
.ui-btn.success { background: linear-gradient(90deg,#7bff9e,#00ffd1); color:#001; }
.ui-btn.danger { background: linear-gradient(90deg,#ff6b6b,#ff3b3b); color:#fff; }
.ui-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: #bfeee8; }

.uploader { margin-top:1rem; }
.input-row { display:flex; gap:1rem; align-items:center; margin-bottom:0.8rem; }
.file-label {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.6rem 0.8rem; border-radius:10px;
  background: rgba(0,0,0,0.45); cursor:pointer;
  border:1px dashed rgba(255,255,255,0.04);
}
.file-label input { display:none; }
textarea#jsonInput {
  width:100%; min-height:180px; resize:vertical; padding:1rem; border-radius:10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.03);
  color: #e6fff9; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:0.95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.run-row { display:flex; gap:1rem; align-items:center; margin-top:0.8rem; }
.status.muted { color: #9fd; font-size:0.95rem; }

.hidden { display:none !important; }

.duplicates { margin-top:1.2rem; background: rgba(255,40,40,0.03); border-left:4px solid rgba(255,40,40,0.18); padding:0.8rem; border-radius:8px; }
.dup-summary .dup-alert{ color:#ffb3b3; font-weight:700; }
.dup-groups { margin-top:0.6rem; display:flex; flex-direction:column; gap:0.8rem; max-height:260px; overflow:auto; padding-right:8px; }

.dup-group { background: rgba(255,255,255,0.02); padding:0.6rem; border-radius:8px; border:1px solid rgba(255,255,255,0.02); }
.dup-group-heading { font-weight:700; margin-bottom:0.4rem; color:#ffdede; }
.dup-row { display:flex; gap:0.8rem; align-items:flex-start; padding:0.4rem; border-radius:6px; }
.dup-row input[type="checkbox"] { transform:scale(1.2); margin-top:6px; }
.dup-item { flex:1; }
.dup-meta { font-size:0.85rem; color:#cfe; margin-bottom:0.3rem; }
.dup-json { margin:0; font-size:0.85rem; background: rgba(0,0,0,0.25); padding:0.5rem; border-radius:6px; overflow:auto; max-height:160px; }

.variables { margin-top:1.2rem; padding:0.8rem; background: rgba(0,0,0,0.25); border-radius:8px; }
.vars-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.6rem; }
.vars-header h2 { margin:0; color:#dff; font-size:1.1rem; }
#searchBox { padding:0.4rem 0.6rem; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background: rgba(0,0,0,0.35); color:#fff; }

.vars-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem; max-height:420px; overflow:auto; padding-right:8px; }
.var-item { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:0.6rem; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }
.var-toggle { width:100%; text-align:left; background:transparent; border:none; font-weight:700; padding:0.2rem 0; color:#cfe; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.var-body { margin-top:0.6rem; }
.var-json { margin:0; background: rgba(0,0,0,0.35); padding:0.6rem; border-radius:6px; font-size:0.9rem; overflow:auto; max-height:220px; }

.vars-actions { margin-top:0.8rem; display:flex; justify-content:flex-end; }

/* Loading overlay with laser-like bar */
.loading-overlay {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5));
}
.loader-wrap { width:70%; max-width:900px; padding:2rem; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; box-shadow: 0 12px 60px rgba(0,0,0,0.7); text-align:center; }
.loader-text { margin-top:1rem; color:#dff; font-weight:700; letter-spacing:0.6px; }

.laser-bar {
  height:14px; width:100%; border-radius:50px; overflow:hidden; position:relative; background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 40px rgba(0,255,220,0.02);
}
.laser-bar::before {
  content:"";
  position:absolute; top:-30%; left:-30%; height:160%; width:60%;
  background: linear-gradient(90deg, rgba(0,255,210,0) 0%, rgba(0,255,210,0.9) 50%, rgba(0,255,210,0) 100%);
  transform: skewX(-12deg);
  animation: laserSweep .5s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0,255,210,0.45));
}

/* make the laser sweep run only a couple times when shown (will hide after 0.5s) */
@keyframes laserSweep {
  0% { left:-60%; }
  100% { left:120%; }
}

/* Responsive tweaks */
@media (max-width:720px){
  .page-title { font-size:1.6rem; }
  .loader-wrap { width:92%; padding:1.2rem; }
}