/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-row {
  display:       flex;
  gap:           12px;
  margin-bottom: 10px;
  flex-wrap:     wrap;
}

.form-label {
  display:       block;
  font-size:     12px;
  font-weight:   600;
  color:         var(--c-text);
  margin-bottom: 4px;
}

.form-control {
  display:       block;
  width:         100%;
  padding:       6px 9px;
  font-size:     13px;
  font-family:   var(--font);
  color:         var(--c-text);
  background:    var(--c-bg);
  border:        var(--border);
  border-radius: var(--radius);
  outline:       none;
  line-height:   1.4;
}
.form-control:focus {
  border-color:  var(--c-accent);
  box-shadow:    0 0 0 2px rgba(255,107,53,0.12);
}

.form-group {
  margin-bottom:   12px;
}

.form-group label {
  display:         block;
  font-weight:     600;
  font-size:       12px;
  color:           var(--c-text);
  margin-bottom:   4px;
}

.form-group .hint {
  font-size:       11px;
  color:           var(--c-text-faint);
  margin-top:      3px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  display:         block;
  width:           100%;
  padding:         6px 9px;
  font-size:       13px;
  font-family:     var(--font);
  color:           var(--c-text);
  background:      var(--c-bg);
  border:          var(--border);
  border-radius:   var(--radius);
  outline:         none;
  transition:      border-color 0.15s;
  line-height:     1.4;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color:    var(--c-accent);
  box-shadow:      0 0 0 2px rgba(255, 107, 53, 0.12);
}

input::placeholder,
textarea::placeholder { color: var(--c-text-faint); }

textarea {
  resize:          vertical;
  min-height:      80px;
}

select { cursor: pointer; }

/* Input with monospace (e.g., TOTP code) */
input.mono {
  font-family:     var(--font-mono);
  letter-spacing:  0.15em;
  font-size:       15px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         6px 14px;
  font-size:       13px;
  font-family:     var(--font);
  font-weight:     500;
  border:          1px solid transparent;
  border-radius:   var(--radius);
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.1s, border-color 0.1s, color 0.1s;
  white-space:     nowrap;
  user-select:     none;
}

.btn:focus-visible {
  outline:         2px solid var(--c-accent);
  outline-offset:  2px;
}

.btn:disabled, .btn[disabled] {
  opacity:         0.55;
  cursor:          not-allowed;
}

.btn-primary {
  background:      var(--c-accent);
  border-color:    var(--c-accent);
  color:           #fff;
}
.btn-primary:hover:not(:disabled) {
  background:      var(--c-accent-2);
  border-color:    var(--c-accent-2);
  text-decoration: none;
  color:           #fff;
}

.btn-secondary {
  background:      var(--c-bg-secondary);
  border-color:    var(--c-border);
  color:           var(--c-text);
}
.btn-secondary:hover:not(:disabled) {
  background:      var(--c-bg-tertiary);
  text-decoration: none;
  color:           var(--c-text);
}

.btn-danger {
  background:      var(--c-danger-bg);
  border-color:    var(--c-danger);
  color:           var(--c-danger);
}
.btn-danger:hover:not(:disabled) {
  background:      var(--c-danger);
  color:           #fff;
  text-decoration: none;
}

.btn-ghost {
  background:      transparent;
  border-color:    transparent;
  color:           var(--c-accent);
  padding-left:    4px;
  padding-right:   4px;
}
.btn-ghost:hover:not(:disabled) {
  text-decoration: underline;
  background:      transparent;
}

.btn-sm {
  padding:         3px 9px;
  font-size:       12px;
}

.btn-block { display: flex; width: 100%; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x:      auto;
}

table.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
}

table.data-table th {
  text-align:      left;
  font-weight:     600;
  font-size:       11px;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  color:           var(--c-text-muted);
  padding:         6px 10px;
  background:      var(--c-bg-secondary);
  border-bottom:   var(--border);
  white-space:     nowrap;
}

table.data-table td {
  padding:         6px 10px;
  border-bottom:   1px solid var(--c-border-light);
  vertical-align:  middle;
}

table.data-table tr:last-child td { border-bottom: none; }

table.data-table tbody tr:hover td { background: #fafafa; }

/* ── Alerts / notices ─────────────────────────────────────────────────────── */
.alert {
  padding:         9px 12px;
  border-radius:   var(--radius);
  font-size:       12px;
  border:          1px solid transparent;
  margin-bottom:   12px;
  line-height:     1.5;
}

.alert-danger  { background: var(--c-danger-bg);  border-color: #f5c2c0; color: var(--c-danger); }
.alert-success { background: var(--c-success-bg); border-color: #b2dfb2; color: var(--c-success); }
.alert-warn    { background: var(--c-warn-bg);    border-color: #fde68a; color: var(--c-warn); }
.alert-info    { background: var(--c-info-bg);    border-color: #bfdbfe; color: var(--c-info); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display:         inline-block;
  padding:         1px 7px;
  font-size:       11px;
  font-weight:     600;
  border-radius:   10px;
  white-space:     nowrap;
}

.badge-accent  { background: #fff3ee; color: var(--c-accent); border: 1px solid #ffd4c2; }
.badge-success { background: var(--c-success-bg); color: var(--c-success); border: 1px solid #b2dfb2; }
.badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger);  border: 1px solid #f5c2c0; }
.badge-neutral { background: var(--c-bg-tertiary); color: var(--c-text-muted); border: 1px solid var(--c-border); }
.badge-info    { background: var(--c-info-bg);    color: var(--c-info);    border: 1px solid #b3c9e8; }
.badge-warn    { background: var(--c-warn-bg);    color: var(--c-warn);    border: 1px solid #e0c87a; }

/* ── Mono cell (truncated token display) ─────────────────────────────────── */
.mono-cell {
  font-family: var(--font-mono);
  font-size:   11px;
  background:  var(--c-bg-tertiary);
  padding:     1px 5px;
  border-radius: 3px;
  border:      var(--border);
  cursor:      pointer;
}
.text-faint { color: var(--c-text-faint); }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display:         flex;
  gap:             0;
  border-bottom:   var(--border);
  margin-bottom:   14px;
}

.tab {
  padding:         7px 14px;
  font-size:       13px;
  cursor:          pointer;
  border-bottom:   2px solid transparent;
  color:           var(--c-text-muted);
  margin-bottom:   -1px;
  transition:      color 0.1s, border-color 0.1s;
  text-decoration: none;
}

.tab:hover { color: var(--c-text); text-decoration: none; }
.tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 600; }

/* ── QR Code wrapper ─────────────────────────────────────────────────────── */
.qr-wrap {
  display:         inline-block;
  padding:         10px;
  border:          var(--border);
  background:      #fff;
  border-radius:   var(--radius);
}

.qr-wrap img, .qr-wrap canvas { display: block; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  padding:         28px;
  text-align:      center;
  color:           var(--c-text-faint);
  font-size:       13px;
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.spinner {
  display:         inline-block;
  width:           14px;
  height:          14px;
  border:          2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius:   50%;
  animation:       spin 0.7s linear infinite;
  vertical-align:  middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Separator ────────────────────────────────────────────────────────────── */
.divider {
  display:         flex;
  align-items:     center;
  gap:             8px;
  color:           var(--c-text-faint);
  font-size:       11px;
  margin:          12px 0;
}
.divider::before, .divider::after {
  content:         '';
  flex:            1;
  border-top:      var(--border);
}

/* ── Status dot ──────────────────────────────────────────────────────────── */
.dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  margin-right:  5px;
  vertical-align: middle;
}
.dot-green  { background: var(--c-success); }
.dot-red    { background: var(--c-danger); }
.dot-orange { background: var(--c-accent); }
.dot-gray   { background: var(--c-text-faint); }

/* ── Stage pill ──────────────────────────────────────────────────────────── */
.stage {
  display:       inline-block;
  padding:       1px 8px;
  font-size:     11px;
  font-weight:   600;
  border-radius: 10px;
  font-family:   var(--font-mono);
  white-space:   nowrap;
}
.stage-waiting    { background: var(--c-bg-tertiary); color: var(--c-text-faint); }
.stage-email      { background: var(--c-info-bg);     color: var(--c-info); }
.stage-password   { background: #fff3ee; color: var(--c-accent); border: 1px solid #ffd4c2; }
.stage-totp       { background: var(--c-warn-bg);     color: var(--c-warn); }
.stage-done       { background: var(--c-success-bg);  color: var(--c-success); }
.stage-push       { background: var(--c-warn-bg);     color: var(--c-warn); }
.stage-selection  { background: var(--c-info-bg);     color: var(--c-info); }

/* ── Switch (replaces vanilla toggle) ───────────────────────────────────── */
.toggle-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
}

.switch {
  position:      relative;
  display:       inline-flex;
  align-items:   center;
  width:         40px;
  height:        22px;
  flex-shrink:   0;
}

.switch input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
  margin:   0;
}

.switch-track {
  position:      absolute;
  inset:         0;
  border-radius: 11px;
  background:    #c8c8c8;
  border:        1px solid #b0b0b0;
  transition:    background 0.18s, border-color 0.18s;
  cursor:        pointer;
}

[data-theme="dark"] .switch-track {
  background:  #444;
  border-color:#555;
}

.switch-thumb {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    #fff;
  box-shadow:    0 1px 3px rgba(0,0,0,.25);
  transition:    transform 0.18s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.switch input:checked ~ .switch-track {
  background:   var(--c-accent);
  border-color: var(--c-accent);
}

.switch input:checked ~ .switch-thumb {
  transform: translateX(18px);
}

.switch input:focus-visible ~ .switch-track {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* legacy .toggle alias — keep settings page working */
.toggle { display: inline-flex; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: relative; display: inline-block;
  width: 40px; height: 22px; border-radius: 11px;
  background: #c8c8c8; border: 1px solid #b0b0b0;
  cursor: pointer; transition: background 0.18s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 0.18s cubic-bezier(.4,0,.2,1);
}
.toggle input:checked + .toggle-slider { background: var(--c-accent); border-color: var(--c-accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
[data-theme="dark"] .toggle-slider { background: #444; border-color: #555; }

/* ── Copy field ───────────────────────────────────────────────────────────── */
.copy-field {
  display:         flex;
  gap:             6px;
  align-items:     center;
}
.copy-field input {
  flex:            1;
  font-family:     var(--font-mono);
  font-size:       12px;
}