/* ============================================================
   Components — page furniture, forms, buttons, tables, pills,
   chips, cards, detail views. Token references only.
   ============================================================ */

/* ---------- Page furniture ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 28px; }
.head-actions { display: flex; gap: 10px; align-items: center; }

.muted { color: hsl(var(--text-400)); font-size: 13px; }
.req { color: hsl(var(--danger-100)); }
.empty { padding: 24px 0; text-align: center; color: hsl(var(--text-400)); }

.flash { padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.flash-success { background: hsl(var(--success-900)); color: hsl(var(--success-100)); border: 1px solid hsl(var(--success-100) / 0.35); }
.flash-error { background: hsl(var(--danger-900)); color: hsl(var(--danger-000)); border: 1px solid hsl(var(--danger-100) / 0.35); }

.card {
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 18px; }
.card h2:not(:first-child) { margin-top: 28px; }
.narrow { max-width: 440px; margin: 40px auto; }
.login-card { margin-top: 9vh; padding: 32px; }
.login-card h1 { margin: 0 0 4px; font-size: 26px; }

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 14px; font-weight: 500; font-size: 13px; color: hsl(var(--text-200)); }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 12px;
  border: 1px solid hsl(var(--border) / 0.2); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; font-size: 14px;
  background: hsl(var(--bg-100)); color: hsl(var(--text-100));
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: hsl(var(--accent-100));
  box-shadow: 0 0 0 3px hsl(var(--accent-100) / 0.33);
}
input[type="file"] { margin-top: 6px; font-weight: 400; color: hsl(var(--text-200)); }
textarea { resize: vertical; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid hsl(var(--border) / 0.2);
  background: hsl(var(--bg-000)); color: hsl(var(--text-100));
  font: inherit; font-weight: 500; font-size: 13.5px;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: hsl(var(--border) / 0.08); text-decoration: none; }
.btn-primary { background: hsl(var(--accent-100)); border-color: hsl(var(--accent-100)); color: #fff; }
.btn-primary:hover { background: hsl(var(--accent-000)); border-color: hsl(var(--accent-000)); }
html[data-mode="dark"] .btn-primary { color: hsl(226 50% 12%); }
.btn-danger { background: transparent; border-color: hsl(var(--danger-100) / 0.4); color: hsl(var(--danger-100)); }
.btn-danger:hover { background: hsl(var(--danger-900) / 0.5); }
.btn-success { background: hsl(var(--success-100)); border-color: hsl(var(--success-100)); color: #fff; }
html[data-mode="dark"] .btn-success { color: hsl(127 100% 8%); }
.btn-success:hover { filter: brightness(1.08); }
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: 8px; }
.linklike { background: none; border: none; color: hsl(var(--text-400)); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.linklike:hover { color: hsl(var(--text-100)); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { display: flex; gap: 12px; margin: 20px 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border) / 0.1); vertical-align: top; }
th { font-size: 12px; font-weight: 500; color: hsl(var(--text-400)); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: hsl(var(--border) / 0.04); }
.row-inactive td { opacity: 0.5; }
.wrap { white-space: pre-wrap; word-break: break-word; max-width: 320px; }
.actions-cell form { display: inline-block; margin-right: 10px; }
td a { text-decoration: underline; text-decoration-color: hsl(var(--border) / 0.3); text-underline-offset: 3px; }
td a:hover { text-decoration-color: hsl(var(--text-100)); }

/* ---------- Status pills ---------- */
.status {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; vertical-align: middle; white-space: nowrap;
}
.status-new { background: hsl(var(--info-900)); color: hsl(var(--info-100)); }
.status-needs_info { background: hsl(var(--warning-900)); color: hsl(var(--warning-100)); }
.status-in_progress { background: hsl(var(--purple-900)); color: hsl(var(--purple-100)); }
.status-quoted { background: hsl(var(--success-900)); color: hsl(var(--success-100)); }
.status-sent { background: hsl(var(--success-100)); color: #fff; }
html[data-mode="dark"] .status-sent { color: hsl(127 100% 8%); }
.status-cancelled { background: hsl(var(--border) / 0.12); color: hsl(var(--text-400)); }

/* ---------- Chips ---------- */
.chip {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border) / 0.2);
  background: hsl(var(--bg-000)); font-size: 13px; color: hsl(var(--text-200));
  transition: background 0.15s;
}
.chip:hover { text-decoration: none; background: hsl(var(--border) / 0.08); }
.chip-active { background: hsl(var(--text-100)); border-color: hsl(var(--text-100)); color: hsl(var(--bg-100)); }
.chip-active:hover { background: hsl(var(--text-100)); }
.chip .count { opacity: 0.7; font-size: 12px; }
.chip-stock { background: hsl(var(--info-900)); border-color: transparent; color: hsl(var(--info-100)); }
.chip-special { background: hsl(var(--warning-900)); border-color: transparent; color: hsl(var(--warning-100)); }
.status-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.search-form { display: flex; gap: 8px; }
.search-form input { margin-top: 0; width: 240px; }

/* ---------- Role tags ---------- */
.role-tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px;
  font-weight: 500; vertical-align: middle;
}
.role-sales { background: hsl(var(--info-900)); color: hsl(var(--info-100)); }
.role-inside { background: hsl(var(--success-900)); color: hsl(var(--success-100)); }
.role-admin { background: hsl(var(--border) / 0.12); color: hsl(var(--text-200)); }

/* ---------- Attention list ---------- */
.attention { border-left: 3px solid hsl(var(--accent-100)); }
.attention h2::before {
  content: "●"; color: hsl(var(--accent-100)); font-size: 10px;
  vertical-align: 2px; margin-right: 8px;
}
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { padding: 9px 0; border-bottom: 1px solid hsl(var(--border) / 0.1); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.attention-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- Request detail ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.kv div { display: flex; gap: 12px; padding: 4px 0; }
.kv dt { width: 150px; flex-shrink: 0; color: hsl(var(--text-400)); font-size: 13px; }
.kv dd { margin: 0; }
.background-text {
  white-space: pre-wrap; word-break: break-word;
  background: hsl(var(--bg-100)); border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--radius-sm); padding: 14px; font: inherit; font-size: 14px;
  max-height: 420px; overflow-y: auto;
}

.thread { list-style: none; margin: 0 0 20px; padding: 0; }
.msg {
  border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 10px; background: hsl(var(--bg-000));
}
.msg-role-inside { background: hsl(var(--bg-100)); }
.msg-role-sales { background: hsl(var(--bg-000)); }
.msg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-form-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.big-check { font-weight: 500; margin: 12px 0; }

.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li { padding: 6px 0; }
.attach-list a { text-decoration: underline; text-decoration-color: hsl(var(--border) / 0.3); text-underline-offset: 3px; }

.quote-card { border-left: 3px solid hsl(var(--success-100)); }
.sent-note { font-weight: 500; }
.sent-form { border-top: 1px solid hsl(var(--border) / 0.1); margin-top: 12px; padding-top: 4px; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { padding: 8px 0 8px 14px; border-left: 2px solid hsl(var(--border) / 0.15); margin-left: 4px; }
.tl-action { font-weight: 600; text-transform: capitalize; margin-right: 6px; }
.tl-sent, .tl-quote_uploaded { color: hsl(var(--success-100)); }
.tl-status { color: hsl(var(--warning-100)); }

/* ---------- 2FA / misc ---------- */
.backup-codes {
  list-style: none; margin: 16px 0; padding: 16px;
  background: hsl(var(--bg-100)); border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  columns: 2;
}
.backup-codes li { padding: 4px 0; }
.backup-codes code { font-size: 15px; }
.setup-steps li { margin-bottom: 8px; }
details summary { cursor: pointer; }

/* QR codes and other data-URI images need a light backing to stay scannable */
img[src^="data:image"] { background: #fff; padding: 8px; border-radius: var(--radius-sm); }

.line-item {
  border: 1px solid hsl(var(--border) / 0.1); border-radius: var(--radius-sm);
  margin-bottom: 14px; padding: 12px 16px; background: hsl(var(--bg-000));
}
.line-item legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: hsl(var(--text-200)); }
.line-item .remove-line { color: hsl(var(--danger-100)); margin-left: 8px; }

/* ---------- Spacing utilities (replacing CSP-blocked inline styles) ---------- */
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-24 { margin-top: 24px; }
.center { text-align: center; }