/* ============================================================
   TreckerTreck · Unified Design Tokens v2
   ============================================================
   Refined from existing system. Goals:
   - Keep orange brand identity (slightly softer, more deliberate)
   - Admin: cooler, more neutral "pro tool" feel (less warm gray)
   - Enforce visible button borders (solves "buttons look like labels")
   - Compact density variants for data tables
   - Light + Dark themes, both production-ready
   ----------------------------------------------------------- */

.tt-app {
  --tt-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tt-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tt-font-display: 'Inter', system-ui, sans-serif;

  /* Brand */
  --tt-brand: #ff7a3d;
  --tt-brand-hover: #ff6523;
  --tt-brand-active: #e55a1c;
  --tt-brand-weak: rgba(255, 122, 61, 0.12);
  --tt-brand-weak-hover: rgba(255, 122, 61, 0.18);
  --tt-brand-fg: #ffffff;
  --tt-brand-grad: linear-gradient(135deg, #ff8a3d 0%, #ff4c1e 100%);

  /* Neutrals — dark grey */
  --tt-bg: #121212;
  --tt-bg-elev-1: #1a1a1a;
  --tt-bg-elev-2: #222222;
  --tt-bg-elev-3: #2a2a2a;
  --tt-bg-topbar: rgba(18,18,18,0.86);
  --tt-bg-sidebar: #1a1a1a;
  --tt-bg-hover: rgba(255,255,255,0.04);
  --tt-bg-selected: rgba(255,122,61,0.12);
  --tt-bg-stripe: rgba(255,255,255,0.02);

  --tt-fg: #f0f0f0;
  --tt-fg-muted: #a0a0a0;
  --tt-fg-subtle: #7a7a7a;
  --tt-fg-inverse: #121212;

  --tt-border: rgba(255,255,255,0.08);
  --tt-border-strong: rgba(255,255,255,0.14);
  --tt-border-focus: #ff7a3d;

  /* Status */
  --tt-success: #2ea043;
  --tt-success-weak: rgba(46,160,67,0.14);
  --tt-warning: #e0a000;
  --tt-warning-weak: rgba(224,160,0,0.14);
  --tt-danger: #e5484d;
  --tt-danger-weak: rgba(229,72,77,0.14);
  --tt-info: #3b82f6;
  --tt-info-weak: rgba(59,130,246,0.14);

  /* Tractor-pulling special */
  --tt-gold: #ffd60a;
  --tt-gold-weak: rgba(255,214,10,0.15);
  --tt-gold-rank: #f5b400;
  --tt-silver-rank: #c0c4cb;
  --tt-bronze-rank: #cd7f32;

  /* Radius — softer, friendlier */
  --tt-r-sm: 6px;
  --tt-r-md: 8px;
  --tt-r-lg: 12px;
  --tt-r-xl: 16px;
  --tt-r-pill: 999px;

  /* Shadows */
  --tt-shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --tt-shadow-md: 0 2px 4px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.15);
  --tt-shadow-lg: 0 10px 40px rgba(0,0,0,.28);

  /* Space (4-based) */
  --tt-space-1: 4px; --tt-space-2: 8px; --tt-space-3: 12px; --tt-space-4: 16px;
  --tt-space-5: 24px; --tt-space-6: 32px; --tt-space-7: 48px; --tt-space-8: 64px;

  background: var(--tt-bg);
  color: var(--tt-fg);
  font-family: var(--tt-font);
  font-size: 14px;
  line-height: 1.5;
}

.tt-app[data-tt-theme="light"] {
  --tt-brand: #d4551e;
  --tt-brand-hover: #c04a18;
  --tt-brand-active: #a83f14;
  --tt-brand-weak: rgba(212,85,30,0.09);
  --tt-brand-weak-hover: rgba(212,85,30,0.14);
  --tt-brand-grad: linear-gradient(135deg, #ff7a3d 0%, #d4551e 100%);

  --tt-bg: #fafafa;
  --tt-bg-elev-1: #ffffff;
  --tt-bg-elev-2: #f3f3f3;
  --tt-bg-elev-3: #ebebeb;
  --tt-bg-topbar: rgba(255,255,255,0.9);
  --tt-bg-sidebar: #fafafa;
  --tt-bg-hover: rgba(0,0,0,0.04);
  --tt-bg-selected: rgba(212,85,30,0.08);
  --tt-bg-stripe: rgba(0,0,0,0.02);

  --tt-fg: #222222;
  --tt-fg-muted: #555555;
  --tt-fg-subtle: #767676;
  --tt-fg-inverse: #ffffff;

  --tt-border: rgba(0,0,0,0.10);
  --tt-border-strong: rgba(0,0,0,0.16);
}

/* ========== TYPOGRAPHY ========== */
.tt-app .tt-h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.tt-app .tt-h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.005em; margin: 0; }
.tt-app .tt-h3 { font-size: 15px; font-weight: 600; margin: 0; }
.tt-app .tt-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--tt-fg-muted); }
.tt-app .tt-muted { color: var(--tt-fg-muted); }
.tt-app .tt-num, .tt-app .tt-mono { font-family: var(--tt-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.tt-app .tt-col { display: flex; flex-direction: column; }
.tt-app .tt-row { display: flex; }
.tt-app .tt-gap-2 > * + * { margin-top: 8px; }
.tt-app .tt-gap-3 > * + * { margin-top: 12px; }
.tt-app .tt-gap-4 > * + * { margin-top: 16px; }
.tt-app .tt-gap-3 { display:flex; flex-direction: column; gap: 12px; }
.tt-app .tt-gap-4 { display:flex; flex-direction: column; gap: 16px; }

/* ========== BUTTONS — strong borders, always readable ========== */
.tt-app .tt-btn {
  --_bg: var(--tt-bg-elev-2);
  --_border: var(--tt-border-strong);
  --_fg: var(--tt-fg);
  --_h: 32px;
  height: var(--_h); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--_bg); color: var(--_fg);
  border: 1px solid var(--_border); border-radius: var(--tt-r-md);
  font: 500 13px/1 var(--tt-font); letter-spacing: -0.005em;
  cursor: pointer; user-select: none; white-space: nowrap;
  box-shadow: var(--tt-shadow-sm);
  transition: background .12s ease, border-color .12s ease, transform .08s;
}
.tt-app .tt-btn:hover { background: var(--tt-bg-elev-3); }
.tt-app .tt-btn:active { transform: translateY(0.5px); }
.tt-app .tt-btn:focus-visible { outline: none; box-shadow: var(--tt-shadow-sm), 0 0 0 3px var(--tt-brand-weak); border-color: var(--tt-brand); }

.tt-app .tt-btn--primary { --_bg: var(--tt-brand-grad); --_border: transparent; --_fg: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.15) inset; }
.tt-app .tt-btn--primary:hover { filter: brightness(1.06); background: var(--tt-brand-grad); }
.tt-app .tt-btn--ghost    { --_bg: transparent; --_border: transparent; --_fg: var(--tt-fg-muted); box-shadow: none; }
.tt-app .tt-btn--ghost:hover { background: var(--tt-bg-hover); color: var(--tt-fg); }
.tt-app .tt-btn--danger   { --_bg: var(--tt-danger); --_border: transparent; --_fg: #fff; }
.tt-app .tt-btn--sm { --_h: 26px; padding: 0 8px; font-size: 12px; }
.tt-app .tt-btn--lg { --_h: 42px; padding: 0 18px; font-size: 14px; border-radius: var(--tt-r-lg); }
.tt-app .tt-btn--icon { width: var(--_h); padding: 0; }

/* ========== BADGES ========== */
.tt-app .tt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px; border-radius: var(--tt-r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--tt-bg-elev-3); color: var(--tt-fg-muted); border: 1px solid var(--tt-border);
}
.tt-app .tt-badge--brand   { background: var(--tt-brand-weak);   color: var(--tt-brand);   border-color: transparent; }
.tt-app .tt-badge--success { background: var(--tt-success-weak); color: var(--tt-success); border-color: transparent; }
.tt-app .tt-badge--warning { background: var(--tt-warning-weak); color: var(--tt-warning); border-color: transparent; }
.tt-app .tt-badge--danger  { background: var(--tt-danger-weak);  color: var(--tt-danger);  border-color: transparent; }
.tt-app .tt-badge--gold    { background: var(--tt-gold-weak);    color: var(--tt-gold-rank); border-color: transparent; }

.tt-app .tt-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tt-danger); box-shadow: 0 0 0 0 rgba(229,72,77,.5); animation: ttPulse 1.5s infinite; }
@keyframes ttPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 70% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }

/* ========== CARDS ========== */
.tt-app .tt-card {
  background: var(--tt-bg-elev-1);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  box-shadow: var(--tt-shadow-sm);
}
.tt-app .tt-card__head {
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  border-bottom: 1px solid var(--tt-border);
}
.tt-app .tt-card__title { font-size: 14px; font-weight: 600; }
.tt-app .tt-card__body { padding: 16px; }
.tt-app .tt-card__foot { padding: 12px 16px; border-top: 1px solid var(--tt-border); display: flex; align-items: center; gap: 8px; }

/* ========== INPUTS ========== */
.tt-app .tt-input, .tt-app .tt-select, .tt-app .tt-textarea {
  height: 36px; padding: 0 12px; width: 100%;
  box-sizing: border-box; max-width: 100%;
  background: var(--tt-bg-elev-1); color: var(--tt-fg);
  border: 1px solid var(--tt-border-strong); border-radius: var(--tt-r-md);
  font: 400 13px/1.3 var(--tt-font);
  transition: border-color .12s, box-shadow .12s;
}
.tt-app .tt-textarea { height: auto; padding: 10px 12px; }
.tt-app * { box-sizing: border-box; }
.tt-app .tt-input:focus, .tt-app .tt-select:focus, .tt-app .tt-textarea:focus {
  outline: none; border-color: var(--tt-brand); box-shadow: 0 0 0 3px var(--tt-brand-weak);
}
.tt-app .tt-label { font-size: 12px; font-weight: 500; color: var(--tt-fg-muted); margin-bottom: 4px; display: block; }
.tt-app .tt-hint { font-size: 11px; color: var(--tt-fg-subtle); margin-top: 4px; }

/* ========== TABLES — compact default, comfort variant ========== */
.tt-app .tt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tt-app .tt-table thead th {
  position: sticky; top: 0; background: var(--tt-bg-elev-2);
  text-align: left; font-weight: 500; font-size: 12px;
  color: var(--tt-fg-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--tt-border); height: 36px;
}
.tt-app .tt-table tbody tr { border-bottom: 1px solid var(--tt-border); }
.tt-app .tt-table tbody td { padding: 6px 12px; height: 34px; }
.tt-app .tt-table tbody tr:hover { background: var(--tt-bg-hover); }
.tt-app .tt-table tbody tr.is-selected { background: var(--tt-bg-selected); }
.tt-app .tt-table tbody tr:nth-child(even) td { background: var(--tt-bg-stripe); }
.tt-app .tt-table tbody tr:nth-child(even):hover td { background: var(--tt-bg-hover); }
.tt-app .tt-table--comfort tbody td { padding: 12px; height: 48px; }
.tt-app .tt-table--comfort thead th { height: 40px; }

/* ========== SIDEBAR / TOPBAR / SUBNAV ========== */
.tt-app .tt-sidebar {
  width: 240px; background: var(--tt-bg-sidebar); color: var(--tt-fg);
  border-right: 1px solid var(--tt-border);
  display: flex; flex-direction: column; padding: 12px 0;
  flex-shrink: 0;
}
.tt-app .tt-sidebar__brand {
  padding: 4px 16px 18px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.tt-app .tt-sidebar__group { margin-top: 12px; }
.tt-app .tt-sidebar__grouplabel {
  padding: 4px 16px 6px; font-size: 11px; font-weight: 600; color: var(--tt-fg-subtle);
}
.tt-app .tt-sidebar__item {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px;
  font-size: 13px; color: var(--tt-fg-muted); text-decoration: none;
  border-left: 2px solid transparent; cursor: pointer;
}
.tt-app .tt-sidebar__item:hover { color: var(--tt-fg); background: var(--tt-bg-hover); }
.tt-app .tt-sidebar__item.is-active { color: var(--tt-fg); background: var(--tt-bg-selected); border-left-color: var(--tt-brand); font-weight: 600; }

.tt-app .tt-topbar {
  height: 48px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--tt-bg-topbar); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tt-border); flex-shrink: 0;
}
.tt-app .tt-bread { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tt-fg-muted); }
.tt-app .tt-bread__sep { color: var(--tt-fg-subtle); }
.tt-app .tt-bread__cur { color: var(--tt-fg); font-weight: 500; }

.tt-app .tt-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--tt-border); padding: 0 20px; margin-top: 8px; }
.tt-app .tt-subnav__item { padding: 8px 10px; font-size: 13px; color: var(--tt-fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; text-decoration: none; }
.tt-app .tt-subnav__item:hover { color: var(--tt-fg); }
.tt-app .tt-subnav__item.is-active { color: var(--tt-brand); border-bottom-color: var(--tt-brand); font-weight: 500; }

.tt-app .tt-page-header { padding: 14px 20px 0; background: var(--tt-bg-elev-1); border-bottom: 1px solid var(--tt-border); }

/* ========== KBD + stat cards ========== */
.tt-app .tt-kbd { display: inline-block; padding: 1px 5px; background: var(--tt-bg-elev-3); border: 1px solid var(--tt-border); border-bottom-width: 2px; border-radius: 3px; font: 500 11px/1.4 var(--tt-font-mono); color: var(--tt-fg-muted); }
.tt-app .tt-stat { padding: 14px 16px; background: var(--tt-bg-elev-1); border: 1px solid var(--tt-border); border-radius: var(--tt-r-lg); }
.tt-app .tt-stat__label { font-size: 12px; color: var(--tt-fg-muted); font-weight: 500; }
.tt-app .tt-stat__value { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; margin-top: 2px; }
.tt-app .tt-stat__delta { font-size: 12px; color: var(--tt-success); margin-top: 4px; }

/* ========== SCROLLBAR ========== */
.tt-app .tt-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tt-app .tt-scroll::-webkit-scrollbar-thumb { background: var(--tt-border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
.tt-app .tt-scroll::-webkit-scrollbar-thumb:hover { background: var(--tt-fg-subtle); background-clip: padding-box; border: 2px solid transparent; }

/* ========== public hero / sections ========== */
.tt-app .tt-hero-grid-bg {
  background-image:
    linear-gradient(var(--tt-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--tt-border) 1px, transparent 1px);
  background-size: 44px 44px;
}