:root {
  /* Harmonised with styles.css */
  --bg: #0e111a;
  --panel: #151a26;
  --panel-2: #0e1424;
  --text: #e9edf5;
  --muted: #a8b3c7;
  --accent: #7aa2ff;
  --danger: #ff5f74;
  --ok: #16a34a;
  --warn: #ffd34d;
  --border: #263045;
  --focus: #3340a0;

  --toolbar-height: 0px; /* set by JS */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* FULL-WIDTH PAGE WRAP (no more 1000px cap) */
.wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px;
}

h1 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ===== Toolbar ===== */
.toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  background: #0b0f18; /* header tone like other pages */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.search {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 14px;
}

/* ===== Buttons ===== */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: #0f1830;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  min-height: 38px;
  transition: transform 120ms ease, border-color 150ms ease, background 150ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  background: #0d1427;
  border-color: var(--focus);
}
.btn:active { transform: translateY(0); }
.btn.primary {
  background: #15265f;
  border-color: #3a56c4;
  color: #e9edf5;
}
.btn.danger  {
  background: #3a1620;
  border-color: #7a2a3a;
  color: #ffbac3;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Link-style helpers your HTML uses */
.btn-link { text-decoration: none; display: inline-block; width: auto; flex: 0 0 auto; }
.btn-compact { padding: 6px 10px; font-size: 13px; }

/* Yellow CTA for “Back to Tickets” */
.btn-yellow {
  background: var(--warn);
  color: #0b0b16;
  border: 1px solid #ffe28a;
}
.btn-yellow:hover {
  background: #ffde70;
  border-color: #ffeaa3;
}

/* ===== Status line (optional; JS updates) ===== */
.status {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding: 2px 4px;
}

/* ===== Table ===== */
.table-wrap {
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible; /* let the PAGE scroll; header sticks to viewport */
  position: relative;
  z-index: 1;
}

table { width: 100%; border-collapse: collapse; }

thead {
  position: sticky;
  top: var(--toolbar-height);
  z-index: 4;
  background: #0d1324;  /* solid header strip */
  box-shadow: 0 1px 0 var(--border);
}
thead th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 12px;
}

tbody td {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: middle;
}
tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Inputs inside cells */
.input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
}
.input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(51,64,160,.2) inset;
}
.email.invalid {
  border-color: #ff8da0;
  box-shadow: 0 0 0 2px rgba(255,120,140,.18) inset;
}

.hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hint.error { color: #ff9aab; }
.empty { text-align: center; color: var(--muted); padding: 24px; }

/* Row actions (Delete button area) */
.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Pill state (Saved / Unsaved) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: #0e1424;
}
.pill.unsaved {
  color: #ffe7a1;
  border-color: #ffda69;
  background: rgba(255,212,102,.09);
}
.pill.saved  {
  color: #bff3dd;
  border-color: #7ce6bd;
  background: rgba(58,210,159,.10);
}

/* Footer row */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.kbd {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 3px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  background: #0f0f24;
}

/* --- Row overlap + scroll friendliness --- */
#usersTable tr {
  display: table-row !important;
  height: auto;
  min-height: 40px;
  scroll-margin-top: calc(var(--toolbar-height) + 8px);
}
#usersTable td, #usersTable th {
  display: table-cell !important;
  line-height: 1.4;
  vertical-align: top;
}

/* Links inside table (white like other pages) */
#usersTable a, #usersTable a:visited { color: #fff; text-decoration: none; }
#usersTable a:hover { color: #00e0c6; text-decoration: underline; }