:root {
  --ts-primary: #2c5cdc;
  --ts-sidebar-bg: #1f2937;
  --ts-sidebar-fg: #d1d5db;
  --ts-sidebar-active: #2c5cdc;
  --ts-card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

body { background: #f4f6fa; color: #1f2937; }

/* ======= App shell ======= */
.ts-app { display: flex; min-height: 100vh; }

.ts-sidebar {
  width: 240px;
  background: var(--ts-sidebar-bg);
  color: var(--ts-sidebar-fg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.ts-brand {
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ts-logo {
  background: var(--ts-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}
.ts-logo-lg { padding: 14px 18px; font-size: 18px; }
.ts-brand-text strong { color: #fff; display: block; }
.ts-brand-text small { color: #9ca3af; }

.ts-nav { padding: 12px 8px; flex: 1; }
.ts-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  color: var(--ts-sidebar-fg);
  border-radius: 6px;
  margin-bottom: 2px;
  font-size: 14px;
  text-decoration: none;
}
.ts-nav-link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.ts-nav-link.active { background: var(--ts-sidebar-active); color: #fff; }

.ts-sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.ts-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #fff; }
.ts-user-name { font-size: 14px; font-weight: 500; }

.ts-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ts-topbar {
  background: #fff;
  padding: 18px 28px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
}
.ts-page-title { font-size: 1.25rem; margin: 0; font-weight: 600; flex: 1; }
.ts-topbar-actions { display: flex; gap: 8px; }

.ts-content { padding: 28px; flex: 1; }

/* ======= Cards / tables ======= */
.ts-card { border: 1px solid #e5e7eb; box-shadow: var(--ts-card-shadow); border-radius: 8px; }
.ts-card .card-header { background: #fff; border-bottom: 1px solid #e5e7eb; }

.ts-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.ts-table td { vertical-align: middle; }

.ts-link { color: var(--ts-primary); font-weight: 500; }
.ts-link:hover { color: #1e40af; text-decoration: none; }

.ts-source-link { margin-left: 0; color: #6b7280; font-size: 12px; display: inline-block; margin-top: 2px; }
.ts-rating { color: #f59e0b; font-weight: 600; }

/* Thumbnails */
.ts-marketplace-thumb {
  display: block;
  width: 100%;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  padding: 16px;
}
.ts-marketplace-thumb img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.ts-thumb-cell { width: 80px; padding: 8px; }
.ts-thumb-cell img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.ts-thumb-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 24px;
}

.ts-dl dt { color: #6b7280; font-weight: 500; font-size: 13px; }
.ts-dl dd { margin-bottom: .35rem; font-size: 14px; }

/* ======= Status stat cards ======= */
.ts-stat {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: #1f2937;
  transition: all .15s ease;
}
.ts-stat:hover { transform: translateY(-1px); box-shadow: var(--ts-card-shadow); text-decoration: none; color: #1f2937; }
.ts-stat small { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ts-stat strong { display: block; font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.ts-stat-total strong { color: #1f2937; }
.ts-stat-new strong { color: #6b7280; }
.ts-stat-searching strong { color: #0ea5e9; }
.ts-stat-quoted strong { color: var(--ts-primary); }
.ts-stat-noresult strong { color: #d97706; }
.ts-stat-reviewed strong { color: #16a34a; }

/* ======= Auth screen ======= */
.ts-auth { background: linear-gradient(135deg, #1f2937 0%, #2c5cdc 100%); min-height: 100vh; }
.ts-auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.ts-auth-card { background: #fff; padding: 32px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); width: 100%; max-width: 400px; }
.ts-auth-brand { text-align: center; margin-bottom: 24px; }
.ts-auth-brand h2 { margin: 12px 0 4px; }

/* ======= Forms ======= */
.ts-form .form-group { margin-bottom: 1rem; }

/* ======= Misc ======= */
.badge-secondary { background: #6b7280; }
.badge-info { background: #0ea5e9; }
.badge-primary { background: var(--ts-primary); }
.badge-warning { background: #f59e0b; color: #fff; }
.badge-success { background: #16a34a; }
.badge-dark { background: #1f2937; }

/* ======= Best deal hero cards ======= */
.ts-best-card { border-width: 2px; border-style: solid; border-radius: 10px; height: 100%; }
.ts-bignum { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }

/* ======= Margin bar ======= */
.ts-margin-bar { border-radius: 10px; padding: 16px 20px; }
.ts-margin-bar small { text-transform: uppercase; letter-spacing: .04em; opacity: .8; font-size: 11px; }

/* ======= Timeline ======= */
.ts-timeline { list-style: none; padding: 14px 18px; margin: 0; position: relative; }
.ts-timeline::before { content: ""; position: absolute; left: 22px; top: 14px; bottom: 14px; width: 2px; background: #e5e7eb; }
.ts-timeline li { position: relative; padding-left: 24px; padding-bottom: 12px; }
.ts-timeline-dot { position: absolute; left: -2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ts-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ts-primary); }
.ts-timeline-body strong { font-size: 13px; }
.ts-payload { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }

/* ======= Comm row (WA / email buttons) ======= */
.ts-comm-row { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-xs { padding: 2px 8px; font-size: 11px; line-height: 1.5; border-radius: 4px; }

/* ======= Filter form & dashboard table ======= */
.ts-filters .form-control { background: #fff; }
.ts-thumb-sm { width: 48px; height: 48px; font-size: 18px; }

.ts-orders-table tr:hover { background: #fafbfc; }
.ts-shortlisted { background: rgba(245, 158, 11, .07) !important; }

/* ======= Empty state ======= */
.ts-empty { padding: 24px; }

@media (max-width: 768px) {
  .ts-sidebar { display: none; }
  .ts-content { padding: 16px; }
  .ts-topbar { padding: 12px 16px; }
}