/* ═══════════════════════════════════════════
   TrainControl — Forms & Modals
   ═══════════════════════════════════════════ */

/* ── Modal overlay ── */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeIn 0.15s ease;
  overflow: hidden;
}
.modal {
  width: 100%; max-width: 500px; max-height: min(85vh,85dvh);
  background: var(--bg2); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  overflow: hidden; display: flex; flex-direction: column;
  animation: slideUp 0.28s var(--spring);
}
.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0; position: sticky; top: 0; z-index: 10;
  background: var(--bg2);
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-ft {
  display: flex; gap: 7px; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0; background: var(--bg2);
}

/* ── Form elements ── */
.fg { margin-bottom: 14px; }
.fl { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; }
.fi {
  width: 100%; padding: 9px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm); color: var(--text);
  font: 14px 'DM Sans', sans-serif;
  transition: border-color 0.18s var(--ease); outline: none;
}
.fi:focus { border-color: var(--blue); }
.fi::placeholder { color: var(--text3); }
.fh { font-size: 10px; color: var(--text3); margin-top: 3px; }

[data-theme="light"] .fi { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); color: #1a1a1a; }
[data-theme="light"] .fi:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(68,89,143,0.12); }
[data-theme="light"] .fi::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] select { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); color: #1a1a1a; }

/* ── Toggle ── */
.ftgl { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.tgl-t {
  width: 42px; height: 25px; border-radius: 13px;
  background: rgba(255,255,255,0.1); cursor: pointer;
  position: relative; transition: background 0.2s var(--ease);
}
.tgl-t.on { background: var(--green); }
.tgl-th {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.28s var(--spring);
}
.tgl-t.on .tgl-th { transform: translateX(17px); }
[data-theme="light"] .tgl-t { background: rgba(0,0,0,0.12); }

/* ── Tabs ── */
.tabs { display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,0.04); border-radius: var(--r-pill); margin-bottom: 14px; }
.tab {
  flex: 1; padding: 7px 10px; border: none; cursor: pointer;
  font: 600 12px/1 'DM Sans', sans-serif;
  border-radius: var(--r-pill); background: transparent; color: var(--text2);
  transition: all 0.18s var(--ease);
}
.tab.on { background: var(--blue); color: #fff; }

/* ── CV table ── */
.cvt { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.cvt th { font-size: 10px; font-weight: 600; color: var(--text3); text-align: left; padding: 4px 8px; }
.cvt td { padding: 7px 8px; background: rgba(255,255,255,0.02); font-size: 12px; }
.cvt tr td:first-child { border-radius: 7px 0 0 7px; }
.cvt tr td:last-child { border-radius: 0 7px 7px 0; }
.cvi {
  width: 64px; padding: 4px 7px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px; color: var(--text);
  font: 13px 'JetBrains Mono', monospace; outline: none;
}
.cvi:focus { border-color: var(--orange); }

[data-theme="light"] .cvi { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); color: #1a1a1a; }
[data-theme="light"] .cvi:focus { border-color: var(--orange); }

/* ── Icon picker grid ── */
.ip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ip-btn {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 20px; border: none; cursor: pointer;
  border-radius: var(--r-sm); background: rgba(255,255,255,0.04);
  transition: all 0.15s var(--ease);
}
.ip-btn:hover { background: rgba(255,255,255,0.08); }
.ip-btn.sel { background: var(--blue); box-shadow: 0 3px 10px rgba(68,89,143,0.3); }

/* ── Image upload ── */
.img-up {
  width: 100%; height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: var(--r-md); cursor: pointer;
  color: var(--text3); font-size: 12px;
  transition: all 0.18s var(--ease);
}
.img-up:hover { border-color: var(--blue); color: var(--text2); }