/* Slate / navy industrial palette (per user spec):
   #06141B  body
   #11212D  card / sidebar
   #253745  borders / primary surface
   #4A5C6A  hover / secondary text
   #9BA8AB  body text / accents
   #CCD0CF  primary text / icons
*/

:root {
  /* deep dark base - palette is used as accents only */
  --bg: #05080b;
  --bg-card: #0a1014;
  --bg-input: #06090c;
  --bg-sidebar: #07090c;
  --border: #1a2630;
  --border-hover: #253745;
  --text: #CCD0CF;
  --muted: #9BA8AB;
  --dim: #4A5C6A;
  --accent: #4A5C6A;
}

html, body { background: var(--bg); color: var(--text); }

/* override Tailwind's zinc-based dark tints we used everywhere */
.bg-zinc-950 { background-color: var(--bg) !important; }
.bg-zinc-900 { background-color: var(--bg-card) !important; }
.bg-zinc-800 { background-color: var(--bg-card) !important; }
.text-zinc-100, .text-zinc-200, .text-zinc-300 { color: var(--text) !important; }
.text-zinc-400 { color: var(--muted) !important; }
.text-zinc-500 { color: var(--dim) !important; }
.border-zinc-800, .border-zinc-700 { border-color: var(--border) !important; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

.input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  width: 100%;
  font-size: 0.875rem;
  transition: 120ms;
}
.input:focus {
  outline: 2px solid var(--muted);
  outline-offset: 0;
  border-color: transparent;
}
.input::placeholder { color: var(--dim); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: 120ms;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--text);
}
.btn-primary { background: #253745; border-color: #4A5C6A; }
.btn-primary:hover { background: #4A5C6A; border-color: #9BA8AB; }
.btn-secondary { background: #0d1419; border-color: #1a2630; }
.btn-secondary:hover { background: #1a2630; border-color: #253745; }
.btn-danger { background: #2a1418; border-color: #5a262d; color: #d4a5a5; }
.btn-danger:hover { background: #3a1820; border-color: #7a2f38; }
.btn-success { background: #14241a; border-color: #25462f; color: #a5d4b8; }
.btn-success:hover { background: #182d22; border-color: #2f5e3e; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  color: var(--text);
  transition: 120ms;
}
.btn-icon:hover { background: var(--bg-card); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  color: var(--muted);
  border-left: 2px solid transparent;
}
.nav-link:hover { background: var(--bg-card); color: var(--text); }
.nav-link.active {
  background: var(--bg-card);
  color: var(--text);
  border-left-color: var(--muted);
}
.nav-ic { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.8; }
.nav-section {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 1rem 0.75rem 0.25rem;
}

/* Tables that scroll horizontally on mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; font-size: 0.875rem; min-width: 640px; }
.table thead { background: var(--bg); color: var(--muted); border-bottom: 1px solid var(--border); }
.table th, .table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; }
.table tbody tr { border-top: 1px solid var(--border); }
.table tbody tr:hover { background: rgba(37, 55, 69, 0.4); }

@media (max-width: 640px) {
  .table { font-size: 0.8rem; min-width: 540px; }
  .input { font-size: 0.9rem; padding: 0.55rem 0.7rem; }
  .btn { padding: 0.45rem 0.75rem; font-size: 0.85rem; }
}

/* Forms */
.form-grid { display: grid; gap: 0.75rem; }
.label-xs { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* Mobile top bar */
.bg-zinc-900\/95 { background-color: rgba(7, 9, 12, 0.95) !important; }

/* Dispute chat bubbles */
.chat-msg { padding: 0.625rem 0.875rem; border-radius: 0.375rem; max-width: 80%; line-height: 1.35; }
.chat-msg .meta { font-size: 0.65rem; color: var(--muted); margin-bottom: 0.25rem; letter-spacing: 0.03em; }
.chat-buyer { background: var(--bg-card); border: 1px solid var(--border); align-self: flex-start; }
.chat-staff { background: #1d2a36; border: 1px solid #2c3e4f; align-self: flex-end; color: var(--text); }
.chat-stream { display: flex; flex-direction: column; gap: 0.5rem; max-height: 480px; overflow-y: auto; padding: 0.25rem; }