/* =========
   BTH Theme (Global)
   ========= */

/* Base */
:root {
  --bg: #0e0e0f;
  --bg-card: #18191c;
  --bg-hover: #202226;
  --fg: #e5e7eb;
  --muted: #9ca3af;

  --accent-green: #22c55e;
  --accent-green-hover: #16a34a;
  --accent-red: #ef4444;
  --accent-red-hover: #dc2626;
  --accent-blue: #3b82f6; /* links only */
  --border: #2a2d31;
  --radius: 10px;
  --transition: 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height: 1.4; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
input, button, select, textarea { font: inherit; color: inherit; border: none; outline: none; }

/* Cards / layout helpers */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.help { font-size: .9rem; color: var(--muted); }

/* ===== GLOBAL FORM SYSTEM ===== */

/* Classic inputs (still supported) */
input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #111214;
  color: var(--fg);
  transition: border var(--transition), background var(--transition);
}
input:focus { border-color: var(--accent-green); background: #151618; }

/* New input row: grid-based field with icon slot (prevents drift) */
.input-wrap{
  display: grid;
  grid-template-columns: 1fr 40px;     /* room for icon */
  align-items: center;
  gap: 6px;
  background: #111214;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 8px 0 14px;               /* comfy left pad so first char never hugs edge */
  min-height: 52px;
  transition: border var(--transition), background var(--transition);
  overflow: hidden;                     /* icon stays inside bounds */
}
.input-wrap:focus-within { border-color: var(--accent-green); background: #131417; }
.input-wrap input{
  background: transparent;
  border: 0;
  padding: 0;                           /* container provides padding */
  height: 52px;
  line-height: 52px;
  font-size: 16px;                      /* avoid mobile zoom */
  color: var(--fg);
  width: 100%;
}
.icon-placeholder{ width: 24px; height: 24px; display: block; }
.pw-toggle{
  width: 24px; height: 24px;
  cursor: pointer; opacity: .9; user-select: none; display: block;
  justify-self: center;
}
.pw-toggle:hover{ opacity: 1; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--accent-green);
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
}
.btn:hover { background: var(--accent-green-hover); }
.btn:active { transform: scale(.97); }
.btn.red { background: var(--accent-red); }
.btn.red:hover { background: var(--accent-red-hover); }

/* Remove blue flash & add accessible focus */
button, .btn, input[type=submit] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

/* Messages / tables */
.msg { font-size: .9rem; color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
tr:hover { background: var(--bg-hover); }

/* Autofill fixes (Firefox + Chromium) */
input:-moz-autofill {
  box-shadow: 0 0 0 1000px #111214 inset !important;
  color: var(--fg) !important;
  caret-color: var(--fg) !important;
}
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #111214 inset !important;
  -webkit-text-fill-color: var(--fg) !important;
  caret-color: var(--fg) !important;
}

/* Responsive */
@media (max-width: 420px){
  .input-wrap{ min-height: 48px; }
  .input-wrap input{ height: 48px; line-height: 48px; }
}