:root {
  --ts-primary: #37436a;
  --ts-primary-dark: #27324d;
  --ts-sidebar-w: 240px;
  --ts-topbar-h: 56px;
  --ts-bg-sidebar: #0f172a;
  --ts-fg-sidebar: #e2e8f0;
  --ts-fg-sidebar-muted: #94a3b8;
}

body { background: #f6f7fb; }

.ts-brand-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--ts-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: -0.02em;
}

.ts-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--ts-sidebar-w);
  background: var(--ts-bg-sidebar);
  color: var(--ts-fg-sidebar);
  overflow-y: auto;
  z-index: 100;
}

.ts-sidebar .ts-brand { color: var(--ts-fg-sidebar); }
.ts-sidebar .ts-brand .small,
.ts-sidebar .ts-brand .text-secondary { color: var(--ts-fg-sidebar-muted) !important; }
.ts-sidebar .ts-nav-section { color: var(--ts-fg-sidebar-muted) !important; }

.ts-nav-item {
  color: var(--ts-fg-sidebar);
  text-decoration: none;
}
.ts-nav-item:hover,
.ts-nav-item.active {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.ts-nav-item.text-secondary { color: var(--ts-fg-sidebar-muted) !important; }
.ts-nav-item .badge { font-weight: 500; }

.ts-main { margin-left: var(--ts-sidebar-w); }

.ts-topbar { min-height: var(--ts-topbar-h); }

@media (max-width: 768px) {
  .ts-sidebar { transform: translateX(-100%); transition: transform .18s; }
  .ts-sidebar.open { transform: translateX(0); }
  .ts-main { margin-left: 0; }
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--ts-primary);
  border-color: var(--ts-primary);
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--ts-primary-dark);
  border-color: var(--ts-primary-dark);
}