/* ═══════════════════════════════════════════════════════════════════════════
   BOOKCHOR BMS — DESIGN SYSTEM v2
   Based on Claude.ai design language — clean, minimal, warm neutrals
   Phase 5 migration target. Not yet active — loaded in parallel with bms.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   DESIGN TOKENS — single source of truth
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Colors — Light mode */
  --v2-bg-page:          #FAFAF7;
  --v2-bg-surface:       #FFFFFF;
  --v2-bg-surface-hover: #F5F5F1;
  --v2-bg-subtle:        #F1F0EB;
  --v2-bg-sidebar:       #F5F4EF;

  --v2-text-primary:   #1C1B1A;
  --v2-text-secondary: #6B6B66;
  --v2-text-tertiary:  #9B9B94;
  --v2-text-inverse:   #FFFFFF;

  --v2-border:        #E5E4DE;
  --v2-border-strong: #D4D2CA;

  --v2-accent:         #CC785C;
  --v2-accent-hover:   #B6664D;
  --v2-accent-subtle:  #FAEEE9;
  --v2-accent-text:    #7A3E29;

  --v2-success:         #15803D;
  --v2-success-subtle:  #DCFCE7;
  --v2-warning:         #A16207;
  --v2-warning-subtle:  #FEF3C7;
  --v2-danger:          #B91C1C;
  --v2-danger-subtle:   #FEE2E2;
  --v2-info:            #1D4ED8;
  --v2-info-subtle:     #DBEAFE;

  /* Typography */
  --v2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v2-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Spacing (4px base) */
  --v2-sp-1: 4px;  --v2-sp-2: 8px;  --v2-sp-3: 12px; --v2-sp-4: 16px;
  --v2-sp-5: 20px; --v2-sp-6: 24px; --v2-sp-8: 32px; --v2-sp-10: 40px;
  --v2-sp-12: 48px;

  /* Radii */
  --v2-radius-sm: 4px;
  --v2-radius:    6px;
  --v2-radius-lg: 8px;
  --v2-radius-xl: 12px;

  /* Shadows */
  --v2-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --v2-shadow:    0 4px 12px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --v2-shadow-lg: 0 16px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);

  /* Layout */
  --v2-sidebar-width: 240px;
  --v2-topbar-height: 56px;

  /* Motion */
  --v2-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --v2-bg-page:          #1A1A19;
  --v2-bg-surface:       #262625;
  --v2-bg-surface-hover: #2E2E2C;
  --v2-bg-subtle:        #232322;
  --v2-bg-sidebar:       #1F1F1E;

  --v2-text-primary:   #EDEDE8;
  --v2-text-secondary: #A3A39C;
  --v2-text-tertiary:  #6B6B66;

  --v2-border:        #3A3A38;
  --v2-border-strong: #4D4D4A;

  --v2-accent:         #E89478;
  --v2-accent-hover:   #F0A289;
  --v2-accent-subtle:  #3D2419;
  --v2-accent-text:    #F5C2AE;

  --v2-success:         #4ADE80;
  --v2-success-subtle:  #14371F;
  --v2-warning:         #FBBF24;
  --v2-warning-subtle:  #3E2E0B;
  --v2-danger:          #F87171;
  --v2-danger-subtle:   #3E1514;
  --v2-info:            #60A5FA;
  --v2-info-subtle:     #1A2E52;

  --v2-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --v2-shadow:    0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --v2-shadow-lg: 0 16px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
}

/* ─────────────────────────────────────────────────────────────────
   NAMESPACED COMPONENTS
   All v2 classes use `.v2-*` prefix so they cannot collide with
   existing `bms.css`. During migration, a page is either fully v2
   or fully v1 — never mixed.
   ───────────────────────────────────────────────────────────────── */

/* Typography utility classes */
.v2-text-primary   { color: var(--v2-text-primary); }
.v2-text-secondary { color: var(--v2-text-secondary); }
.v2-text-tertiary  { color: var(--v2-text-tertiary); }
.v2-text-mono      { font-family: var(--v2-font-mono); }

/* Layout */
.v2-app {
  display: grid;
  grid-template-columns: var(--v2-sidebar-width) 1fr;
  grid-template-rows: var(--v2-topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  font-family: var(--v2-font-sans);
  color: var(--v2-text-primary);
  background: var(--v2-bg-page);
}

/* Sidebar */
.v2-sidebar {
  grid-area: sidebar;
  background: var(--v2-bg-sidebar);
  border-right: 1px solid var(--v2-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.v2-sidebar-brand {
  padding: var(--v2-sp-4);
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  border-bottom: 1px solid var(--v2-border);
}

.v2-sidebar-brand-logo {
  width: 32px; height: 32px;
  border-radius: var(--v2-radius);
  background: var(--v2-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.v2-sidebar-brand-text { font-weight: 600; font-size: 14px; }
.v2-sidebar-brand-sub  { font-size: 11px; color: var(--v2-text-tertiary); margin-top: 1px; }

.v2-sidebar-nav { flex: 1; padding: var(--v2-sp-3) var(--v2-sp-2); overflow-y: auto; }

.v2-sidebar-section { margin-bottom: var(--v2-sp-5); }

.v2-sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v2-text-tertiary);
  padding: var(--v2-sp-2) var(--v2-sp-3);
  margin-bottom: var(--v2-sp-1);
}

.v2-nav-item {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-2) var(--v2-sp-3);
  border-radius: var(--v2-radius);
  color: var(--v2-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms var(--v2-ease), color 100ms var(--v2-ease);
}

.v2-nav-item:hover { background: var(--v2-bg-surface-hover); color: var(--v2-text-primary); }

.v2-nav-item.v2-active { background: var(--v2-accent-subtle); color: var(--v2-accent-text); }

.v2-nav-item-icon { width: 16px; height: 16px; flex-shrink: 0; }

.v2-nav-item-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--v2-accent);
  color: white;
}

.v2-sidebar-footer {
  padding: var(--v2-sp-3);
  border-top: 1px solid var(--v2-border);
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
}

.v2-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--v2-bg-subtle);
  color: var(--v2-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.v2-user-info { flex: 1; min-width: 0; }
.v2-user-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-user-role { font-size: 11px; color: var(--v2-text-tertiary); }

/* Topbar */
.v2-topbar {
  grid-area: topbar;
  background: var(--v2-bg-page);
  border-bottom: 1px solid var(--v2-border);
  display: flex;
  align-items: center;
  padding: 0 var(--v2-sp-6);
  gap: var(--v2-sp-4);
  position: sticky;
  top: 0;
  z-index: 10;
}

.v2-topbar-title { font-size: 16px; font-weight: 600; }
.v2-topbar-breadcrumb { font-size: 13px; color: var(--v2-text-secondary); flex: 1; }
.v2-topbar-actions { display: flex; align-items: center; gap: var(--v2-sp-2); }

/* Main */
.v2-main { grid-area: main; padding: var(--v2-sp-6); overflow-y: auto; }
.v2-page { max-width: 1400px; margin: 0 auto; }

/* Stats */
.v2-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v2-sp-3);
  margin-bottom: var(--v2-sp-5);
}

.v2-stat-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-sp-4);
}

.v2-stat-label {
  font-size: 12px;
  color: var(--v2-text-secondary);
  font-weight: 500;
  margin-bottom: var(--v2-sp-2);
  display: flex;
  align-items: center;
  gap: var(--v2-sp-2);
}

.v2-stat-label-icon { width: 14px; height: 14px; color: var(--v2-text-tertiary); }
.v2-stat-value { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.v2-stat-sub { font-size: 12px; color: var(--v2-text-tertiary); margin-top: var(--v2-sp-1); }
.v2-stat-trend-up { color: var(--v2-success); }
.v2-stat-trend-down { color: var(--v2-danger); }

/* Filter row */
.v2-filter-row {
  display: flex;
  gap: var(--v2-sp-2);
  margin-bottom: var(--v2-sp-4);
  flex-wrap: wrap;
  align-items: center;
}

.v2-search-input { flex: 1; min-width: 200px; max-width: 400px; position: relative; }

.v2-search-input input {
  width: 100%; height: 36px;
  padding: 0 var(--v2-sp-3) 0 var(--v2-sp-8);
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  font-size: 13px;
  color: var(--v2-text-primary);
  outline: none;
  transition: border-color 100ms var(--v2-ease);
}

.v2-search-input input:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-subtle);
}

.v2-search-input-icon {
  position: absolute;
  left: var(--v2-sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--v2-text-tertiary);
  pointer-events: none;
}

select.v2-filter {
  height: 36px;
  padding: 0 var(--v2-sp-6) 0 var(--v2-sp-3);
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B6B66'%3E%3Cpath d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  color: var(--v2-text-primary);
}

/* Buttons */
.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  height: 36px;
  padding: 0 var(--v2-sp-3);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 100ms var(--v2-ease);
  white-space: nowrap;
  font-family: inherit;
}

.v2-btn:hover { background: var(--v2-bg-surface-hover); border-color: var(--v2-border-strong); }
.v2-btn:active { transform: translateY(1px); }

.v2-btn:disabled, .v2-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.v2-btn-primary {
  background: var(--v2-accent);
  color: white;
  border-color: var(--v2-accent);
}

.v2-btn-primary:hover { background: var(--v2-accent-hover); border-color: var(--v2-accent-hover); }

.v2-btn-ghost { background: transparent; border-color: transparent; }
.v2-btn-ghost:hover { background: var(--v2-bg-surface-hover); border-color: transparent; }

.v2-btn-icon { width: 36px; padding: 0; justify-content: center; }
.v2-btn-sm { height: 28px; padding: 0 var(--v2-sp-2); font-size: 12px; }
.v2-btn-lg { height: 40px; padding: 0 var(--v2-sp-4); font-size: 14px; }

.v2-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.v2-btn-danger { color: var(--v2-danger); border-color: var(--v2-danger-subtle); }
.v2-btn-danger:hover { background: var(--v2-danger-subtle); }

/* Badges */
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-1);
  height: 22px;
  padding: 0 var(--v2-sp-2);
  border-radius: var(--v2-radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: var(--v2-bg-subtle);
  color: var(--v2-text-secondary);
}

.v2-badge-success { background: var(--v2-success-subtle); color: var(--v2-success); }
.v2-badge-warning { background: var(--v2-warning-subtle); color: var(--v2-warning); }
.v2-badge-danger  { background: var(--v2-danger-subtle);  color: var(--v2-danger); }
.v2-badge-info    { background: var(--v2-info-subtle);    color: var(--v2-info); }
.v2-badge-accent  { background: var(--v2-accent-subtle);  color: var(--v2-accent-text); }

.v2-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Cards and tables */
.v2-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
}

.v2-table-wrap { overflow-x: auto; }

.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.v2-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--v2-text-secondary);
  font-size: 12px;
  padding: var(--v2-sp-3) var(--v2-sp-4);
  background: var(--v2-bg-subtle);
  border-bottom: 1px solid var(--v2-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.v2-table tbody td {
  padding: var(--v2-sp-3) var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-border);
  vertical-align: middle;
  color: var(--v2-text-primary);
}

.v2-table tbody tr:last-child td { border-bottom: none; }
.v2-table tbody tr { transition: background 80ms var(--v2-ease); cursor: pointer; }
.v2-table tbody tr:hover { background: var(--v2-bg-subtle); }

.v2-td-primary { font-weight: 500; }
.v2-td-secondary { color: var(--v2-text-secondary); font-size: 12px; }
.v2-td-mono { font-family: var(--v2-font-mono); font-size: 12px; color: var(--v2-text-secondary); }
.v2-td-num { text-align: right; font-variant-numeric: tabular-nums; }

.v2-td-client-name {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
}

.v2-client-avatar {
  width: 32px; height: 32px;
  border-radius: var(--v2-radius);
  background: var(--v2-accent-subtle);
  color: var(--v2-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* Pagination */
.v2-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v2-sp-3) var(--v2-sp-4);
  border-top: 1px solid var(--v2-border);
  background: var(--v2-bg-subtle);
  font-size: 12px;
  color: var(--v2-text-secondary);
}

.v2-pagination-controls { display: flex; gap: var(--v2-sp-1); }

/* Icon base */
.v2-icon {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.v2-icon-sm { width: 14px; height: 14px; }
.v2-icon-lg { width: 20px; height: 20px; }

/* Theme toggle */
.v2-theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--v2-bg-subtle);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 2px;
  height: 32px;
}

.v2-theme-toggle button {
  background: none;
  border: none;
  padding: 0 var(--v2-sp-3);
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-secondary);
  cursor: pointer;
  border-radius: var(--v2-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.v2-theme-toggle button.v2-active {
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  box-shadow: var(--v2-shadow-sm);
}

/* Modal (v2) */
.v2-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--v2-sp-4);
}

.v2-modal {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-lg);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.v2-modal-head {
  padding: var(--v2-sp-4) var(--v2-sp-5);
  border-bottom: 1px solid var(--v2-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v2-modal-title { font-size: 16px; font-weight: 600; }
.v2-modal-body { padding: var(--v2-sp-5); overflow-y: auto; flex: 1; }
.v2-modal-foot {
  padding: var(--v2-sp-3) var(--v2-sp-5);
  border-top: 1px solid var(--v2-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--v2-sp-2);
  background: var(--v2-bg-subtle);
}

/* Form elements */
.v2-form-group { margin-bottom: var(--v2-sp-4); }

.v2-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-text-secondary);
  margin-bottom: var(--v2-sp-2);
}

.v2-input, .v2-textarea, .v2-select {
  width: 100%;
  height: 36px;
  padding: 0 var(--v2-sp-3);
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  font-size: 13px;
  color: var(--v2-text-primary);
  outline: none;
  transition: border-color 100ms var(--v2-ease);
  font-family: inherit;
}

.v2-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--v2-sp-2) var(--v2-sp-3);
  resize: vertical;
  line-height: 1.5;
}

.v2-input:focus, .v2-textarea:focus, .v2-select:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-subtle);
}

/* Toast */
.v2-toast-stack {
  position: fixed;
  bottom: var(--v2-sp-4);
  right: var(--v2-sp-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-2);
  pointer-events: none;
}

.v2-toast {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  box-shadow: var(--v2-shadow);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--v2-sp-2);
  min-width: 240px;
  max-width: 400px;
  pointer-events: auto;
}

.v2-toast-success { border-left: 3px solid var(--v2-success); }
.v2-toast-error   { border-left: 3px solid var(--v2-danger); }
.v2-toast-warning { border-left: 3px solid var(--v2-warning); }
.v2-toast-info    { border-left: 3px solid var(--v2-info); }

/* Loading skeleton */
.v2-skeleton {
  background: linear-gradient(90deg,
    var(--v2-bg-subtle) 0%,
    var(--v2-bg-surface-hover) 50%,
    var(--v2-bg-subtle) 100%);
  background-size: 200% 100%;
  animation: v2-skeleton-shimmer 1.5s infinite;
  border-radius: var(--v2-radius-sm);
}

@keyframes v2-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.v2-skeleton-text { height: 12px; margin-bottom: 6px; }
.v2-skeleton-text:last-child { width: 60%; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .v2-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --v2-sidebar-width: 0px; }
  .v2-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .v2-sidebar { display: none; }
  .v2-main { padding: var(--v2-sp-3); }
  .v2-topbar { padding: 0 var(--v2-sp-3); }
  .v2-stats-row { grid-template-columns: 1fr 1fr; gap: var(--v2-sp-2); }
  .v2-stat-card { padding: var(--v2-sp-3); }
  .v2-stat-value { font-size: 20px; }
  .v2-filter-row { flex-direction: column; align-items: stretch; }
  .v2-search-input { max-width: none; }
  .v2-table { font-size: 12px; }
  .v2-table thead th, .v2-table tbody td { padding: var(--v2-sp-2) var(--v2-sp-3); }
  .v2-td-mono, .v2-td-secondary { display: none; }
  .v2-modal-backdrop { padding: 0; }
  .v2-modal { max-width: none; max-height: 100vh; border-radius: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────────── */
.v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOOKCHOR BMS — DESIGN SYSTEM v2 — PHASE 5E ADDITIONS
   Components needed for Clients page migration.
   Appended to bms-v2.css. Uses existing v2 tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   Tabs
   ───────────────────────────────────────────────────────────────── */
.v2-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: var(--v2-sp-4);
  overflow-x: auto;
  flex-wrap: nowrap;
}

.v2-tab {
  padding: var(--v2-sp-2) var(--v2-sp-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 100ms var(--v2-ease), border-color 100ms var(--v2-ease);
  user-select: none;
}

.v2-tab:hover { color: var(--v2-text-primary); }

.v2-tab.v2-active {
  color: var(--v2-accent);
  border-bottom-color: var(--v2-accent);
}

/* ─────────────────────────────────────────────────────────────────
   Client detail header
   ───────────────────────────────────────────────────────────────── */
.v2-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--v2-sp-3);
  margin-bottom: var(--v2-sp-4);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-border);
}

.v2-detail-header-left {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
}

.v2-client-code-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--v2-radius-lg);
  background: var(--v2-accent-subtle);
  color: var(--v2-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  flex-shrink: 0;
  font-family: var(--v2-font-mono);
}

.v2-detail-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.v2-detail-meta {
  display: flex;
  gap: var(--v2-sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--v2-sp-1);
}

.v2-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--v2-text-secondary);
}

.v2-detail-meta-item svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.v2-detail-actions {
  display: flex;
  gap: var(--v2-sp-2);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────
   KPI tiles (client header stats)
   ───────────────────────────────────────────────────────────────── */
.v2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--v2-sp-2);
}

.v2-kpi {
  background: var(--v2-bg-subtle);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  text-align: center;
}

.v2-kpi-label {
  font-size: 11px;
  color: var(--v2-text-tertiary);
  margin-bottom: var(--v2-sp-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.v2-kpi-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.v2-kpi-value.v2-danger { color: var(--v2-danger); }
.v2-kpi-value.v2-success { color: var(--v2-success); }
.v2-kpi-value.v2-warning { color: var(--v2-warning); }

/* ─────────────────────────────────────────────────────────────────
   Contact / address cards
   ───────────────────────────────────────────────────────────────── */
.v2-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--v2-sp-3);
}

.v2-mini-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  transition: border-color 100ms var(--v2-ease);
}

.v2-mini-card:hover {
  border-color: var(--v2-border-strong);
}

.v2-mini-card.v2-primary-card {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 1px var(--v2-accent-subtle);
}

.v2-mini-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--v2-sp-2);
  margin-bottom: var(--v2-sp-2);
}

.v2-mini-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-primary);
  line-height: 1.3;
}

.v2-mini-card-meta {
  font-size: 12px;
  color: var(--v2-text-secondary);
  margin-bottom: 2px;
}

.v2-mini-card-detail {
  font-size: 12px;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.v2-mini-card-detail svg {
  width: 12px;
  height: 12px;
  color: var(--v2-text-tertiary);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Communication entries (timeline-style)
   ───────────────────────────────────────────────────────────────── */
.v2-comm-list {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-3);
}

.v2-comm-entry {
  display: flex;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-3);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  background: var(--v2-bg-surface);
}

.v2-comm-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius);
  background: var(--v2-accent-subtle);
  color: var(--v2-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v2-comm-body {
  flex: 1;
  min-width: 0;
}

.v2-comm-head {
  display: flex;
  gap: var(--v2-sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--v2-sp-1);
  font-size: 11px;
  color: var(--v2-text-tertiary);
}

.v2-comm-subject {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-primary);
}

.v2-comm-body-text {
  font-size: 12px;
  color: var(--v2-text-secondary);
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────────
   Pipeline stages (leads)
   ───────────────────────────────────────────────────────────────── */
.v2-pipeline {
  display: flex;
  gap: var(--v2-sp-2);
  overflow-x: auto;
  padding-bottom: var(--v2-sp-2);
}

.v2-pipeline-stage {
  min-width: 110px;
  flex-shrink: 0;
  background: var(--v2-bg-subtle);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  text-align: center;
  cursor: pointer;
  transition: background 100ms var(--v2-ease);
}

.v2-pipeline-stage:hover {
  background: var(--v2-bg-surface-hover);
}

.v2-pipeline-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.v2-pipeline-label {
  font-size: 11px;
  color: var(--v2-text-tertiary);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   Form utilities (for modals)
   ───────────────────────────────────────────────────────────────── */
.v2-form-section {
  margin-bottom: var(--v2-sp-5);
}

.v2-form-section:last-child {
  margin-bottom: 0;
}

.v2-form-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v2-text-tertiary);
  margin-bottom: var(--v2-sp-3);
  padding-bottom: var(--v2-sp-2);
  border-bottom: 1px solid var(--v2-border);
}

.v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v2-sp-3);
}

.v2-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--v2-sp-3);
}

.v2-form-grid-full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .v2-form-grid, .v2-form-grid-3 { grid-template-columns: 1fr; }
}

.v2-form-err {
  display: none;
  background: var(--v2-danger-subtle);
  color: var(--v2-danger);
  border-radius: var(--v2-radius);
  padding: var(--v2-sp-2) var(--v2-sp-3);
  font-size: 12px;
  margin-bottom: var(--v2-sp-3);
}

.v2-form-err.v2-visible { display: block; }

.v2-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-2);
  font-size: 13px;
  color: var(--v2-text-primary);
  cursor: pointer;
  user-select: none;
}

.v2-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--v2-accent);
}

/* ─────────────────────────────────────────────────────────────────
   Empty states
   ───────────────────────────────────────────────────────────────── */
.v2-empty {
  padding: var(--v2-sp-8) var(--v2-sp-4);
  text-align: center;
  color: var(--v2-text-tertiary);
  font-size: 13px;
}

.v2-empty-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--v2-sp-2);
  color: var(--v2-text-tertiary);
  opacity: 0.5;
}

.v2-empty-title {
  color: var(--v2-text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}

.v2-empty-sub {
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────
   Section headers inside cards
   ───────────────────────────────────────────────────────────────── */
.v2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v2-sp-3);
  gap: var(--v2-sp-2);
}

.v2-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-section-count {
  font-size: 12px;
  color: var(--v2-text-tertiary);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────
   Profile / details grid (key-value pairs)
   ───────────────────────────────────────────────────────────────── */
.v2-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v2-sp-3) var(--v2-sp-5);
}

@media (max-width: 600px) {
  .v2-kv-grid { grid-template-columns: 1fr; }
}

.v2-kv-label {
  font-size: 11px;
  color: var(--v2-text-tertiary);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.v2-kv-value {
  font-size: 13px;
  color: var(--v2-text-primary);
  font-weight: 500;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────────
   Page header (for client detail, etc. — above topbar spacing)
   ───────────────────────────────────────────────────────────────── */
.v2-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
  margin-bottom: var(--v2-sp-4);
}

.v2-page-title-block .v2-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--v2-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.v2-page-title-block .v2-page-sub {
  font-size: 12px;
  color: var(--v2-text-tertiary);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   Client type badge color variants
   Use .v2-badge-type-{TYPE} on a .v2-badge
   ───────────────────────────────────────────────────────────────── */
.v2-badge-type-school              { background: #DCFCE7; color: #15803D; }
.v2-badge-type-college             { background: #DBEAFE; color: #1D4ED8; }
.v2-badge-type-defence_library     { background: #EDE9FE; color: #6D28D9; }
.v2-badge-type-govt_library        { background: #FEF3C7; color: #A16207; }
.v2-badge-type-trade_reseller      { background: #CCFBF1; color: #0F766E; }
.v2-badge-type-corporate_gifting   { background: #FCE7F3; color: #BE185D; }
.v2-badge-type-instagram_reseller  { background: #FED7AA; color: #C2410C; }
.v2-badge-type-govt_scheme         { background: #E0E7FF; color: #4338CA; }
.v2-badge-type-bulk_buyer          { background: #F3E8FF; color: #7E22CE; }
.v2-badge-type-individual          { background: var(--v2-bg-subtle); color: var(--v2-text-secondary); }

[data-theme="dark"] .v2-badge-type-school              { background: #14371F; color: #4ADE80; }
[data-theme="dark"] .v2-badge-type-college             { background: #1A2E52; color: #60A5FA; }
[data-theme="dark"] .v2-badge-type-defence_library     { background: #2A1E52; color: #A78BFA; }
[data-theme="dark"] .v2-badge-type-govt_library        { background: #3E2E0B; color: #FBBF24; }
[data-theme="dark"] .v2-badge-type-trade_reseller      { background: #0D2F2C; color: #5EEAD4; }
[data-theme="dark"] .v2-badge-type-corporate_gifting   { background: #3D1530; color: #F472B6; }
[data-theme="dark"] .v2-badge-type-instagram_reseller  { background: #3D2108; color: #FB923C; }
[data-theme="dark"] .v2-badge-type-govt_scheme         { background: #242956; color: #818CF8; }
[data-theme="dark"] .v2-badge-type-bulk_buyer          { background: #2D1B42; color: #C084FC; }


/* ═══════════════════════════════════════════════════════════════════════════
   BOOKCHOR BMS — DESIGN SYSTEM v2 — PHASE 5E.2a TOKEN REMAP
   
   Makes v1 CSS (bms.css) respond to the theme toggle by remapping v1 tokens
   to v2 tokens when data-theme is set on <html>.
   
   Without this: v1 classes (.mo-box, .ff, .sidebar, .btn, etc.) stay hard-dark
                 regardless of theme, creating a broken mixed experience.
   With this:    setting data-theme="light|dark" recolors the entire app.
   
   Default (no data-theme, or data-theme="auto" resolving to dark): v1 stays
   untouched — the original dark-navy look.
   
   Strategy: only override v1 tokens when data-theme is EXPLICITLY set, to
   avoid any surprise for users who haven't toggled.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   LIGHT MODE — v1 tokens get warm-light treatment
   Maps v1 dark-navy colors to v2 warm-light palette.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Backgrounds */
  --bg:      #FAFAF7;  /* v2 bg-page */
  --bg2:     #FFFFFF;  /* v2 bg-surface */
  --bg3:     #F5F5F1;  /* v2 bg-surface-hover */
  --bg4:     #F1F0EB;  /* v2 bg-subtle */

  /* Borders */
  --border:  #E5E4DE;           /* v2 border */
  --border2: #D4D2CA;           /* v2 border-strong */

  /* Text */
  --text:    #1C1B1A;  /* v2 text-primary */
  --text2:   #6B6B66;  /* v2 text-secondary */
  --text3:   #9B9B94;  /* v2 text-tertiary */

  /* Accents — v2 terracotta instead of v1 blue */
  --accent:  #CC785C;
  --accent2: #B6664D;

  /* Status colors — slightly adjusted for legibility on light bg */
  --success: #15803D;
  --warning: #A16207;
  --danger:  #B91C1C;
  --info:    #1D4ED8;
}

/* ─────────────────────────────────────────────────────────────────
   DARK MODE — v1 tokens get warm-dark treatment (not the original navy)
   Brings v1 into alignment with v2 warm palette.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  /* Backgrounds — warm dark, not navy */
  --bg:      #1A1A19;  /* v2 bg-page */
  --bg2:     #262625;  /* v2 bg-surface */
  --bg3:     #2E2E2C;  /* v2 bg-surface-hover */
  --bg4:     #232322;  /* v2 bg-subtle */

  /* Borders */
  --border:  #3A3A38;
  --border2: #4D4D4A;

  /* Text */
  --text:    #EDEDE8;
  --text2:   #A3A39C;
  --text3:   #6B6B66;

  /* Accents — v2 warm terracotta, lighter for dark bg */
  --accent:  #E89478;
  --accent2: #F0A289;

  /* Status colors — brighter for dark bg */
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #F87171;
  --info:    #60A5FA;
}

/* ─────────────────────────────────────────────────────────────────
   AUTO MODE — follows OS preference
   Since theme.js sets data-theme to the resolved light|dark value when
   setting="auto", no explicit auto handling is needed here — the above
   selectors will match. This block is documentation only.
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   SUBTLE FIXES for v1 components that use opacity-based colors
   These are hardcoded rgba() values in v1 that won't adapt via tokens.
   Only override when a theme is set (leaves default untouched).
   ───────────────────────────────────────────────────────────────── */

/* v1 .sb-item.active uses rgba(79,142,247,.08) — hardcoded blue tint.
   Map to v2 accent-subtle. */
html[data-theme="light"] .sb-item.active {
  background: #FAEEE9;  /* v2 accent-subtle */
  border-left-color: var(--accent);
}
html[data-theme="dark"] .sb-item.active {
  background: #3D2419;  /* v2 accent-subtle dark */
  border-left-color: var(--accent);
}

/* v1 .btn-d (danger) uses rgba(239,68,68,.1) */
html[data-theme="light"] .btn-d {
  background: #FEE2E2;
  color: var(--danger);
  border-color: rgba(185,28,28,.2);
}
html[data-theme="dark"] .btn-d {
  background: #3E1514;
  color: var(--danger);
  border-color: rgba(248,113,113,.3);
}

/* v1 .btn-s (success) uses rgba(34,197,94,.1) */
html[data-theme="light"] .btn-s {
  background: #DCFCE7;
  color: var(--success);
  border-color: rgba(21,128,61,.2);
}
html[data-theme="dark"] .btn-s {
  background: #14371F;
  color: var(--success);
  border-color: rgba(74,222,128,.3);
}

/* v1 avatar gradient — use solid accent for both themes */
html[data-theme="light"] .sb-av,
html[data-theme="dark"] .sb-av {
  background: var(--accent);
  color: white;
}

/* v1 badge — ensure subtle bg in light mode */
html[data-theme="light"] .badge {
  background: var(--bg4);
  color: var(--text2);
}

/* v1 .chip class */
html[data-theme="light"] .chip {
  background: var(--bg4);
  color: var(--text2);
}

/* v1 .mo backdrop — darker overlay for light mode (more contrast needed) */
html[data-theme="light"] .mo {
  background: rgba(0,0,0,.35);
}

/* v1 modal box shadow works fine in dark, lighten for light mode */
html[data-theme="light"] .mo-box {
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
}

/* v1 scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border2);
}