/* components.css */

/* TABS */
.tabs { display:flex; gap:6px; margin-bottom:20px; background:var(--bg-card); padding:6px; border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; }
.tab { flex:1; padding:8px 16px; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:500; color:var(--text-muted); background:var(--bg-input); cursor:pointer; transition:var(--transition); min-width:100px; text-align:center; }
.tab:hover { background:var(--border-color); color:var(--text-main); }
.tab.active { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; }
body.dark-mode .tab { background:#1a1f24; border:1px solid #00e5ff30; color:var(--text-muted);}
body.dark-mode .tab.active { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 0 8px rgba(0,255,255,0.7); }

/* CARDS */
.card { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-md); }
.output { margin-top:16px; padding:12px; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--bg-card); }

/* FORMS */
.form-group { margin-bottom:12px; }
.form-group label { font-size:13px; font-weight:500; display:block; margin-bottom:4px; color:var(--text-main); }

.form-group > label:first-child { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }

/* Inputs */
.form-input, .form-select { width:auto; min-width:100px; max-width:220px; padding:8px 12px; font-size:14px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text-main); transition:var(--transition);}
.form-input:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,170,255,0.3); }

/* Layout Helpers */
.input-row, .input-section-inline { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.input-row .form-group, .input-section-inline .form-group { flex:1 1 auto; min-width:120px; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; font-size:14px; font-weight:500; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); width:auto;}
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; }
.btn-primary:hover { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); }
.btn-secondary { background:var(--bg-input); color:var(--text-main);}
.btn-secondary:hover { background:var(--border-color);}
body.dark-mode .btn-secondary{ background:#21262d; border:1px solid #00e5ff50; box-shadow:0 0 4px rgba(0,229,255,0.2); }

/* --- TOGGLE SWITCHES (Electric Blue) --- */
.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.switch input {
  display: none; /* hide raw checkbox */
}

.switch .slider {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  background: var(--border-color); /* nice neutral light mode OFF */
  border-radius: 24px;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}
.switch .slider { top: 7px; }

.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ON state (Electric Blue glow) */
.switch input:checked + .slider {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 0 6px var(--primary), 0 0 12px rgba(0,170,255,0.8);
}
.switch input:checked + .slider::before {
  transform: translateX(22px);
  background: #fff;
}

/* Label styling */
.switch .switch-label {
  color: var(--text-main);
  transition: color 0.3s;
}
.switch input:checked ~ .switch-label {
  color: var(--primary); /* glow text too */
}

/* Dark mode tweaks */
body.dark-mode .switch .slider {
  background: #333; /* visible track in dark mode OFF */
}
body.dark-mode .switch input:checked + .slider {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 0 12px var(--primary),
              0 0 24px rgba(0,255,255,0.7);
}
body.dark-mode .switch input:checked + .slider::before {
  background: #000; /* knob contrasts neon track */
}
body.dark-mode .switch input:checked ~ .switch-label {
  color: var(--secondary); /* cyan label ON */
}

/* Grid wrapper for groups of switches */
.switch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width:480px){
  .switch { 
    flex:1 1 100%; 
    max-width:100%; 
  }
}

/* PRESETS */
.preset-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:0.5rem;}
.preset-btn{flex:1 1 120px;padding:6px 10px;font-size:13px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-input);cursor:pointer;color:var(--text-main);text-align:center;}
.preset-btn:hover{background:var(--primary);color:#fff;}
body.dark-mode .preset-btn{background:#1c2128;border:1px solid #00e5ff40;color:var(--text-main);}
body.dark-mode .preset-btn:hover{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;}

/* TRIP BADGE */
.trip-badge{display:inline-block;margin-top:12px;padding:6px 12px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius-sm);box-shadow:var(--shadow-md);}
.no-stops{color:var(--success);}
.with-stops{color:var(--warning);}