@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #f8f9fa;
  --bg-card: #ffffff;
  --bg-hover: #f9fafb;
  --bg-input: #ffffff;
  --bg-table-head: #f9fafb;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --text: #1a1a1a;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-bg: #eff6ff;
  --green: #059669;
  --green-bg: #ecfdf5;
  --yellow: #d97706;
  --yellow-bg: #fef3c7;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-card: #141826;
  --bg-hover: #1b2030;
  --bg-input: #10131c;
  --bg-table-head: #10131c;
  --border: #262b3a;
  --border-light: #1e2331;
  --text: #eaedf3;
  --text-secondary: #a6afbf;
  --text-muted: #6f7a8e;
  --accent: #4f8bff;
  --accent-hover: #6a9dff;
  --accent-bg: rgba(79,139,255,0.14);
  --green: #34d399;
  --green-bg: rgba(52,211,153,0.14);
  --yellow: #fbbf24;
  --yellow-bg: rgba(251,191,36,0.14);
  --red: #f87171;
  --red-bg: rgba(248,113,113,0.14);
  --shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-lg: 0 18px 48px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

/* --- Login Page --- */

.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.login-card h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

.login-card .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 32px;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon svg { width: 22px; height: 22px; }

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.logo-text span { color: var(--accent); }

.form-group { margin-bottom: 20px; }

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
  background: var(--bg-input);
  color: var(--text);
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  text-align: center;
}

.btn:hover { background: var(--accent-hover); }
a.btn { text-decoration: none; }   /* a link styled as a button reads as a button, not underlined text */

.btn-sm { padding: 8px 16px; font-size: 13px; width: auto; }

.btn-outline {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-outline:hover { background: var(--bg-hover); }

.btn-danger {
  background: var(--red);
  animation: pulse-danger 2.8s ease-in-out infinite;
}
.btn-danger:hover {
  background: #b91c1c;
  animation: none;
}

@keyframes pulse-danger {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.btn-green { background: var(--green); }
.btn-green:hover { background: #047857; }

.error-msg {
  background: var(--red-bg);
  color: var(--red);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
}

.success-msg {
  background: var(--green-bg);
  color: var(--green);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
}

/* --- Dashboard Layout --- */

.dashboard { min-height: 100vh; }

.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar .logo-mark { margin-bottom: 0; min-width: 140px; }
.topbar .logo-icon { width: 32px; height: 32px; border-radius: 8px; }
.topbar .logo-icon svg { width: 18px; height: 18px; }
.topbar .logo-text { font-size: 20px; }

.topbar .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s;
  color: var(--text);
}

.theme-toggle:hover { background: var(--bg-hover); }

.role-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

.role-badge.admin { background: var(--yellow-bg); color: var(--yellow); }
.role-badge.investor { background: var(--green-bg); color: var(--green); }
.role-badge.dsd { background: var(--accent-bg); color: var(--accent); }

.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-logout:hover { background: var(--bg-hover); }

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
}

.page-header {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header div h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.page-header div p { color: var(--text-secondary); font-size: 15px; }

.page-actions { display: flex; gap: 12px; }

/* --- Stat Cards --- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-card .stat-value { font-size: 28px; font-weight: 700; }
.stat-card .stat-value.revenue { color: var(--green); }

.stat-card .stat-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.stat-card .stat-sub.positive { color: var(--green); }
.stat-card .stat-sub.negative { color: var(--red); }

/* --- Charts --- */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.chart-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.chart-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

/* --- Performers --- */

.performers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.performer-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.performer-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.performer-list { list-style: none; }

.performer-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.performer-list li:last-child { border-bottom: none; }

.performer-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-right: 10px;
  flex-shrink: 0;
}

.performer-name { flex: 1; }

.performer-revenue {
  font-weight: 600;
  color: var(--green);
}

.bottom .performer-rank { background: var(--red-bg); color: var(--red); }

/* --- Table --- */

.table-card {
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
/* .card (Settings: card payments, QuickBooks, Move a referral; DSD Help) was only styled in dark mode — bare text in light */
.card { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border-light); }

.table-toolbar {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.table-toolbar h2 { font-size: 18px; font-weight: 600; }

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  width: 220px;
  background: var(--bg-input);
  color: var(--text);
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.search-input::placeholder { color: var(--text-muted); }

.filter-select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  min-width: 140px;
}

.filter-select:focus { outline: none; border-color: var(--accent); }

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

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th:hover { color: var(--accent); }
th.sorted { color: var(--accent); }
th.sorted::after { content: ' \u25B2'; font-size: 10px; }
th.sorted.desc::after { content: ' \u25BC'; }

td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

tr:hover td { background: var(--bg-hover); }

.revenue-cell { font-weight: 600; color: var(--green); }

/* --- Pagination --- */

.table-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
}

.pagination { display: flex; align-items: center; gap: 8px; }

.page-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}

.page-btn:hover { background: var(--bg-hover); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.page-info { font-size: 13px; color: var(--text-secondary); }

/* --- DSD Card --- */

.store-detail-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  max-width: 600px;
}

.store-detail-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; }

.detail-row {
  display: flex;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
  width: 140px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.detail-value { font-size: 15px; }

.detail-value.revenue { font-weight: 700; color: var(--green); font-size: 18px; }

/* --- Modal --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }

.modal .close-btn {
  float: right;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
}

.modal .close-btn:hover { color: var(--text); }

/* --- Owner Dashboard Extras --- */

.owner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.comparison-bar { margin-top: 16px; }

.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.bar-fill.above { background: var(--green); }
.bar-fill.below { background: var(--yellow); }

/* --- Animated counter --- */

.stat-value { transition: opacity 0.2s; }

/* --- Dashboard tab nav (both dashboards) --- */

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  /* Layout: the topbar carries 7 controls — let it wrap into tidy rows
     instead of pushing buttons off the right edge of the screen. */
  .topbar {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: 10px 12px;
    row-gap: 8px;
    gap: 8px;
  }
  .topbar .logo-mark { min-width: 0; }
  .topbar .logo-mark img { height: 36px !important; }
  .topbar .user-info { flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 1; }
  .topbar .user-info .btn-logout { padding: 6px 9px; font-size: 12px; }
  .topbar .user-info a { padding: 6px 10px !important; font-size: 12px !important; margin-right: 0 !important; }
  .topbar .theme-toggle, .topbar #push-bell-btn { padding: 5px 8px; font-size: 14px; }
  .topbar .logo-text { font-size: 17px; }
  .topbar .role-badge { display: none; }
  .main-content { padding: 16px; }

  /* Grids */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .charts-grid { grid-template-columns: 1fr; }
  .performers-grid { grid-template-columns: 1fr; }
  .owner-grid { grid-template-columns: 1fr; }

  /* Toolbar */
  .table-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-controls { flex-direction: column; }
  .search-input { width: 100%; }
  .filter-select { width: 100%; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .table-footer { flex-direction: column; gap: 12px; }

  /* Admin tabs — scroll horizontally */
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0;
    gap: 0;
    flex-wrap: nowrap;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 14px 14px;
    font-size: 13px;
  }

  /* Tables — horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px; }

  /* Modal — full screen on mobile */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
  }

  /* Login */
  .login-card { margin: 16px; padding: 28px 20px; }

  /* Buttons */
  .btn-logout { padding: 6px 10px; font-size: 12px; }
  .theme-toggle { padding: 5px 8px; font-size: 16px; }

  /* Page actions */
  .page-actions { flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { flex: 1; min-width: 120px; text-align: center; }
}

.loading {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* --- Toast Notifications --- */

.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 400px;
}

.toast.success { background: var(--green); color: #fff; }
.toast.error { background: var(--red); color: #fff; }
.toast.info { background: var(--accent); color: #fff; }

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* --- Skeleton Loaders --- */

.skeleton {
  background: var(--border-light);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer 1.5s infinite;
}

[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-row {
  display: flex;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
}

.skeleton-cell {
  height: 16px;
  border-radius: 4px;
  background: var(--border-light);
  position: relative;
  overflow: hidden;
}

.skeleton-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer 1.5s infinite;
}

.skeleton-stat {
  height: 32px;
  width: 120px;
  border-radius: 6px;
  background: var(--border-light);
  position: relative;
  overflow: hidden;
}

.skeleton-stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer 1.5s infinite;
}

/* --- Status Badges --- */

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.active { background: var(--green-bg); color: var(--green); }
.status-badge.pending { background: var(--yellow-bg); color: var(--yellow); }
.status-badge.inactive { background: var(--red-bg); color: var(--red); }

/* --- Bulk Actions Bar --- */

.bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 90;
  display: none;
  font-size: 14px;
}

.bulk-bar.active { display: flex; }

.bulk-bar .bulk-count { font-weight: 600; color: var(--accent); }

.bulk-bar .bulk-actions { display: flex; gap: 8px; }

/* --- Activity Feed --- */

.activity-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: 32px;
}

.activity-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.activity-list { list-style: none; }

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-dot.created { background: var(--green); }
.activity-dot.updated { background: var(--accent); }
.activity-dot.deleted { background: var(--red); }
.activity-dot.status_changed { background: var(--yellow); }

.activity-text { flex: 1; }
.activity-text strong { font-weight: 600; }

.activity-time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Notes --- */

.notes-section { margin-top: 20px; border-top: 1px solid var(--border-light); padding-top: 20px; }

.notes-section h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.note-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.note-item:last-child { border-bottom: none; }

.note-text { color: var(--text); margin-bottom: 4px; }
.note-time { color: var(--text-muted); font-size: 11px; }

.note-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.note-input-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text);
}

.note-input-row input:focus { outline: none; border-color: var(--accent); }

/* --- Session Warning --- */

.session-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--yellow);
  color: #1a1a1a;
  padding: 10px 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  z-index: 300;
  display: none;
  cursor: pointer;
}

.session-warning.active { display: block; }

/* --- Checkbox in table --- */

th.check-col, td.check-col {
  width: 40px;
  padding: 12px 16px;
  cursor: default;
}

th.check-col { cursor: default; }

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

input[type="radio"] { cursor: pointer; accent-color: var(--accent); }

/* --- Range sliders: themed, consistent across browsers --- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); }

/* --- Print Styles --- */

/* Card view for opted-in tables on phones (add class="cardify" to a <table>) */
@media (max-width: 640px) {
  .table-wrap table.cardify { min-width: 0 !important; }
  table.cardify thead { display: none; }
  table.cardify, table.cardify tbody, table.cardify tr, table.cardify td { display: block; width: 100%; }
  table.cardify tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 6px 12px;
    background: var(--bg-card);
  }
  table.cardify td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    white-space: normal;  /* global td nowrap pushed a long store name past the card's edge */
    padding: 7px 0;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  table.cardify tr td:last-child { border-bottom: none !important; }
  table.cardify td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
  }
  table.cardify td.check-col { display: none; }
  /* empty/loading rows (one colspan cell, no label) sat pushed right of an empty label slot */
  table.cardify td[colspan] { display: block; text-align: center; }
  table.cardify td[colspan]::before { content: none; }
}

@media print {
  .topbar, .page-actions, .table-toolbar, .table-footer,
  .bulk-bar, .toast-container, .session-warning, .theme-toggle,
  .btn-logout, .role-badge, .charts-grid, .modal-overlay,
  .performers-grid, .activity-card, th.check-col, td.check-col,
  .comparison-bar, .filter-select, .search-input { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  .dashboard, .main-content { padding: 0 !important; }

  .stat-card { border: 1px solid #ddd !important; box-shadow: none !important; }
  .stat-card .stat-value { color: #000 !important; }
  .stat-card .stat-value.revenue { color: #059669 !important; }

  .table-card { box-shadow: none !important; border: 1px solid #ddd !important; }

  table { font-size: 11px !important; }
  td, th { padding: 6px 10px !important; }

  .page-header { margin-bottom: 16px !important; }
  .page-header div h1::after { content: ' — ADDY DSDort'; font-size: 14px; font-weight: 400; color: #666; }
}

/* --- Admin Tabs --- */
.admin-tab {
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all 0.2s;
}
.admin-tab:hover { color: var(--accent); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Additional role badges */
.role-badge.dsd { background: var(--accent-bg); color: var(--accent); }
.role-badge.rep { background: rgba(124,58,237,0.1); color: #7c3aed; }
.role-badge.dsd { background: var(--accent-bg); color: var(--accent); }

/* ── Status dots ─────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.status-dot.active {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: pulse-green 2.4s ease-in-out infinite;
}
.status-dot.pending {
  background: #f59e0b;
}
.status-dot.inactive {
  background: #ef4444;
}

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── COMING SOON BADGE ──────────────────────────────────────────────────────── */
.status-badge.coming-soon {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}
[data-theme="dark"] .status-badge.coming-soon {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  border-color: rgba(124,58,237,0.3);
}

/* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */

/* Tab content fade */
.tab-pane { animation: tabFadeIn 0.22s ease; }
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal entrance */
.modal { animation: modalSlideUp 0.25s cubic-bezier(0.34,1.26,0.64,1); }
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Button press */
.btn:active { transform: scale(0.97); transition: transform 0.08s ease; }
.btn-nav-login:active, .btn-nav-signup:active { transform: scale(0.97); }

/* Table row stagger fade-in */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.table-row-anim { animation: rowFadeIn 0.2s ease both; }

/* Stat count-up pulse */
@keyframes statPop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1; }
}
.stat-pop { animation: statPop 0.45s cubic-bezier(0.34,1.26,0.64,1) both; }

/* Coming soon card overlay */
.coming-soon-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.82) 0%, rgba(79,70,229,0.82) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.coming-soon-badge-pill {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff;
}

/* Notify Me button */
.btn-notify {
  width: 100%; padding: 9px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: opacity 0.2s, transform 0.12s;
}
.btn-notify:hover { opacity: 0.88; }
.btn-notify:active { transform: scale(0.97); }
.btn-notify.notified {
  background: #f3e8ff; color: #7c3aed;
  border: 1px solid #ddd6fe; cursor: default;
}

/* Image fallback card */
.product-img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-hover) 100%);
}
.product-img-placeholder span { font-size: 36px; opacity: 0.5; }
.product-img-placeholder p {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-align: center; max-width: 80%; line-height: 1.3;
}

/* ── ADDY LOGO ────────────────────────────────────────────────────────────── */
.addy-logo-float { display: inline-block; }

/* ── PALLET ORDERING ─────────────────────────────────────────────────────── */
.pallet-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pallet-card.starter { background: linear-gradient(135deg, #1A2A50, #121F3E); border-color: rgba(148, 163, 184, 0.35); }
.pallet-card {
  background: linear-gradient(135deg, #16294E, #0D1B38);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 14px; padding: 16px 18px; color: #fff;
  position: relative;
}
.pallet-card.full { background: linear-gradient(135deg, #1D2E63, #0D1B38); border-color: rgba(96, 165, 250, 0.45); }
.pallet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 112px; }
.pallet-emoji { font-size: 26px; flex-shrink: 0; }
.pallet-icon { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.pallet-icon svg { width: 100%; height: 100%; }
.modal-pallet-icon { display: inline-flex; width: 30px; height: 30px; vertical-align: -7px; margin-right: 8px; }
.modal-pallet-icon svg { width: 100%; height: 100%; }
.pallet-title { font-weight: 800; font-size: 16px; letter-spacing: 0.01em; line-height: 1.2; }
.pallet-sub { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.pallet-badge {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(90deg, #2563EB, #60A5FA);
  padding: 4px 11px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap;
}
.pallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-pallet {
  padding: 9px 6px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1.25;
}
.btn-pallet.primary { background: linear-gradient(90deg, #2563EB, #3b82f6); border: none; }
.btn-pallet:disabled { opacity: 0.55; cursor: default; }
.pallet-note { font-size: 12px; color: var(--text-muted); margin: 8px 2px 18px; }

/* Builder modal */
.pb-progress-wrap { margin-bottom: 14px; }
.pb-progress { height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.pb-progress > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2563EB, #60A5FA); transition: width 0.18s ease; }
.pb-count { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 6px; text-align: right; }
.pb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.pb-name { font-weight: 600; font-size: 14px; }
.pb-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pb-stepper { display: flex; align-items: center; gap: 10px; }
.pb-stepper button {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text); font-size: 17px; font-weight: 700; cursor: pointer;
}
.pb-stepper span { min-width: 22px; text-align: center; font-weight: 700; }

/* Cart pallet status */
.cart-pallet-banner {
  font-size: 12px; padding: 9px 12px; border-radius: 9px; margin-bottom: 10px;
  background: var(--bg-secondary); color: var(--text); border: 1px dashed var(--border);
}
.cart-pallet-banner.on {
  background: linear-gradient(90deg, #16294E, #1D2E63); color: #fff; border: none;
}
.cart-pallet-banner .nudge { display: block; font-size: 11px; opacity: 0.75; margin-top: 2px; }

@media (max-width: 768px) {
  .pallet-bar { grid-template-columns: 1fr; }
}

/* ── MICRO-INTERACTIONS (site-wide) ──────────────────────────────────────── */
button, .btn, .admin-tab { transition: transform 0.08s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease; }
button:active:not(:disabled), .btn:active { transform: scale(0.965); }
.stat-card, .product-card, .chart-card, .table-card, .pallet-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover, .product-card:hover, .pallet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Log past sales stock line: the real select is invisible on top of the face, so the face shows its focus */
.po-line-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── MOTION PASS: simple, clean entrances + feedback ─────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pallet-card, .stat-card { animation: fadeUp 0.4s ease both; }
.pallet-card:nth-child(2), .stat-card:nth-child(2) { animation-delay: 0.06s; }
.pallet-card:nth-child(3), .stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.18s; }

/* Primary buttons lift on hover */
.btn:hover:not(:disabled), .checkout-btn:hover:not(:disabled), .btn-pallet.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

/* Slow shine sweep across the margin badges */
.pallet-badge { overflow: hidden; }
.pallet-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
  transform: translateX(-110%);
  animation: badgeShine 4.2s ease-in-out infinite;
}
@keyframes badgeShine {
  0%, 72% { transform: translateX(-110%); }
  88%, 100% { transform: translateX(110%); }
}

/* Theme toggle does a little spin */
@keyframes themeSpin { from { transform: rotate(0) scale(0.8); } to { transform: rotate(360deg) scale(1); } }
.theme-spin { animation: themeSpin 0.45s ease; }

/* Cart bumps when something lands in it */
@keyframes cartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cart-bump { animation: cartBump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Tab underline slides in instead of popping */
.admin-tab { position: relative; }
.admin-tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform 0.22s ease;
}
.admin-tab.active { border-bottom-color: transparent; }
.admin-tab.active::after { transform: scaleX(1); }

/* Add-to-cart success flash */
.add-btn.added { background: var(--green) !important; }


/* ── PROGRAM DOCUMENTS ────────────────────────────────────────────────────── */
.doc-upload-card {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px; border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 18px;
  background: var(--bg-hover);
}
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.doc-card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14); }
.doc-thumb { cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; }
.doc-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.doc-meta { display: flex; flex-direction: column; gap: 10px; padding: 12px 13px 13px; }
.doc-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wrap so every action stays on the card — no button ever clips off the edge. */
.doc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-act {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.doc-act svg { width: 14px; height: 14px; flex-shrink: 0; }
.doc-act:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-muted); }
.doc-act:disabled { opacity: 0.4; cursor: not-allowed; }
.doc-act:disabled:hover { background: var(--bg-card); color: var(--text-secondary); border-color: var(--border); }
.doc-act.is-public { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: color-mix(in srgb, var(--green) 8%, transparent); }
.doc-act.is-public:hover { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: var(--green); }
.doc-act.doc-act-icon { padding: 6px; }
.doc-act.danger:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--border)); background: color-mix(in srgb, var(--red) 8%, transparent); }

.doc-lightbox {
  position: fixed; inset: 0; z-index: 10010; display: none;  /* above the store-photo modal (9999) and the preview banner */
  flex-direction: column; background: rgba(8, 15, 30, 0.94); backdrop-filter: blur(3px);
}
.doc-lightbox.active { display: flex; }
.doc-lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; color: #fff; font-weight: 600; font-size: 15px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.doc-lb-btn {
  background: rgba(255, 255, 255, 0.14); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.doc-lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.doc-lb-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 16px 20px; }
.doc-lb-img-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }

/* The ADDY logo gives a tiny happy tilt on hover. */
#logo-container img { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
#logo-container a:hover img { transform: rotate(-2.5deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { #logo-container a:hover img { transform: none; } }

/* Pallet progress toward the next margin tier (shop cart). */
.pal-progress {
  position: relative; height: 20px; border-radius: 999px; overflow: hidden;
  background: var(--bg-hover); border: 1px solid var(--border); margin: 8px 0 10px;
}
.pal-progress-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #059669);
  opacity: 0.35; /* muted so the centered label meets AA contrast in both themes */
  transition: width 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.pal-progress-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text); text-shadow: 0 1px 2px var(--bg-card);
}

/* The empty cart's resting monarch takes a slow bob. */
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cart-empty-art { display: flex; animation: cartBob 3.2s ease-in-out infinite; }
@keyframes cartBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .cart-empty-art { animation: none; } }

/* ── Touch targets ───────────────────────────────────────────────────────────
   This app is worked one-handed, standing up, often in a hurry — and a good
   number of its controls were well under the ~44px that a thumb can reliably
   hit. The theme toggle measured 18×12 on a 390px screen; Sign Out, Profile,
   Feedback and the Shop link were all 26-29px tall, stacked in a wrapping row
   where the neighbour is the wrong button to press.

   Scoped to touch pointers, so the dense desktop admin layout is unchanged. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-sm, .btn-logout, .theme-toggle, #push-bell-btn,
  .btn-pallet, .doc-act, .checkout-btn, .btn-notify, .page-btn {
    min-height: 42px;
  }

  .topbar .user-info .btn-logout,
  .topbar .user-info a,
  .topbar .theme-toggle,
  .topbar #push-bell-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .topbar .theme-toggle, .topbar #push-bell-btn { min-width: 42px; }

  .modal .close-btn { min-width: 44px; min-height: 44px; }
  /* Still under 36px on a 390px phone: the tab bar and the inline-styled
     🛒 Buy / 🛒 Order / missing-details / low-stock buttons (24-33px). */
  .admin-tab { min-height: 36px; }
  td a[href^="/shop.html?store_id="], a[onclick^="reorderLowStock"], button[onclick^="editMyStore"],
  button[onclick^="inventoryToggleLow"] { min-height: 36px; display: inline-flex; align-items: center; }

  /* Row checkboxes select stores for a BULK DELETE — worth being able to hit. */
  .check-col input[type="checkbox"],
  table input[type="checkbox"] { width: 22px; height: 22px; }

  /* 16px is the threshold below which iOS Safari zooms the whole page in when
     a field is focused, leaving the rep pinching back out after every search. */
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="date"], input[type="search"],
  select, textarea, .search-input, .filter-select {
    font-size: 16px;
    min-height: 42px;
  }
  textarea { min-height: 72px; }
}

/* ── Phones: nothing may widen the page. Off-screen toasts/decorations and popovers
   parked to the right used to stretch the layout viewport on the DSD dashboard. ── */
@media (max-width: 768px) {
  /* clip, not hidden: hidden turns body into a scroll box that never scrolls, which breaks every position:sticky (Settings section picker) */
  html, body { overflow-x: hidden; overflow-x: clip; }
  .toast-container { left: 12px; right: 12px; width: auto; max-width: none; }
  .toast-container .toast { min-width: 0; width: 100%; }
  .bfly { display: none; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}
@media (max-width: 768px) {
  /* the "upload a store photo" banner: its button row wraps instead of hanging off the edge */
  #photo-reminder-banner { flex-wrap: wrap; }
  #photo-reminder-banner > div { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
}


/* ═══════════ UI polish (UX Snacks pass): nothing moves, everything reads better ═══════════ */
/* 1 · Clear empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 20px;gap:6px}
.empty-state .es-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:var(--accent-bg);color:var(--accent);box-shadow:0 8px 24px -12px var(--accent);margin-bottom:6px}
.empty-state .es-title{font-size:15px;font-weight:700;color:var(--text)}
.empty-state .es-hint{font-size:13px;color:var(--text-secondary);max-width:38ch;line-height:1.5}
.empty-state .es-action{margin-top:8px}
td .empty-state{padding:28px 12px}
.cart-empty{padding:26px 8px!important}
.cart-empty::before{content:"🛒";display:block;font-size:26px;margin-bottom:6px;opacity:.7}

/* 2 · Personalized greeting (sits above the page header; nothing below it moves relative to itself) */
.greet{display:flex;align-items:center;gap:12px;margin:0 0 14px;min-height:40px}
.greet .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--accent),#7c3aed);box-shadow:0 6px 16px -8px var(--accent);flex:none}
.greet .g-line{font-size:15px;font-weight:600;color:var(--text);line-height:1.2}
.greet .g-sub{font-size:12px;color:var(--text-muted)}

/* 4 · Interactive data cards */
.stat-card{position:relative;overflow:hidden;border-radius:14px;transition:transform .15s,box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(closest-side,var(--accent-bg),transparent);pointer-events:none}
.stat-ring{display:flex;align-items:center;gap:12px;margin-top:6px}
.stat-ring .ring{--p:0;width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--border) 0);display:grid;place-items:center;flex:none}
.stat-ring .ring::after{content:attr(data-label);width:32px;height:32px;border-radius:50%;background:var(--bg-card);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--text)}
.stat-ring .legend{font-size:12px;color:var(--text-secondary);line-height:1.5}
.stat-ring .legend b{color:var(--text)}

/* 7 · Progress at a glance: order status track */
.otl{display:flex;align-items:flex-start;margin-bottom:20px;position:relative}
.otl .step{flex:1;text-align:center;position:relative}
.otl .step .bar{position:absolute;top:14px;left:-50%;width:100%;height:4px;border-radius:2px;background:var(--border)}
.otl .step.done .bar{background:linear-gradient(90deg,var(--accent),#7c3aed)}
.otl .step .node{position:relative;z-index:1;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--bg-card);border:2px solid var(--border);color:var(--text-muted)}
.otl .step.done .node{background:var(--accent);border-color:var(--accent);color:#fff}
.otl .step.current .node{box-shadow:0 0 0 6px var(--accent-bg),0 8px 20px -8px var(--accent);animation:otl-pulse 2.2s ease-in-out infinite}
.otl .step .lbl{font-size:11px;color:var(--text-muted);font-weight:500}
.otl .step.done .lbl{color:var(--text)}
.otl .step.current .lbl{font-weight:700;color:var(--accent)}
@keyframes otl-pulse{0%,100%{box-shadow:0 0 0 4px var(--accent-bg)}50%{box-shadow:0 0 0 9px var(--accent-bg)}}
@media (prefers-reduced-motion:reduce){.otl .step.current .node{animation:none}}

/* 6 · Dark mode depth on surfaces and primary actions */
[data-theme="dark"] .stat-card,[data-theme="dark"] .table-card,[data-theme="dark"] .chart-card,[data-theme="dark"] .card{background:linear-gradient(180deg,#171b2a,#131725)}
[data-theme="dark"] .btn.btn-primary,[data-theme="dark"] .checkout-btn,[data-theme="dark"] .add-btn{box-shadow:0 10px 24px -12px var(--accent)}
[data-theme="dark"] .topbar{background:rgba(11,13,18,.85);backdrop-filter:blur(12px)}

/* 8 · Helpful empty space on the way in: login breathes, targets are thumb-sized */
.login-card{border-radius:20px;padding:44px 40px}
.login-card h1{letter-spacing:-.01em}
.login-card .subtitle{margin-bottom:26px}
.login-card .form-group input,.login-card .form-group select{font-size:16px;min-height:48px;border-radius:12px}
.login-card .btn{min-height:48px;border-radius:12px;font-size:15px}
@media (max-width:720px){
  .login-wrapper{padding:16px;align-items:flex-start;padding-top:56px}
  .login-card{padding:32px 22px;border-radius:18px}
  .greet{margin-bottom:10px}
  .greet .g-sub{display:none}
  .empty-state{padding:26px 12px}
}

.login-card form + div{flex-wrap:wrap;gap:8px 16px}
@media (max-width:480px){.login-card form + div{flex-direction:column;align-items:flex-start!important}}

/* ── phone clean-up: dashboard tabs wrap instead of scrolling off-screen; compact table rows ── */
@media (max-width: 768px) {
  .admin-tabs { flex-wrap: wrap !important; overflow: visible !important; }
  .admin-tab { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; }
  .table-wrap td, .table-wrap th { padding: 8px 10px; }
  .order-actions { flex-wrap: nowrap !important; }
  .topbar .btn, .topbar button { padding-left: 10px; padding-right: 10px; }
}

/* ── Territory: home state + states serviced ── */
.territory .tl-opt{font-weight:400;color:var(--text-muted);font-size:12px}
.territory .tl-select,.territory .tl-input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:inherit;font-size:14px;box-sizing:border-box;min-height:44px}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:22px}
.tl-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 10px;border-radius:999px;background:var(--accent-bg,rgba(37,99,235,.12));color:var(--accent);font-size:12px;font-weight:600}
.tl-chip button{border:0;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 4px;min-width:24px;min-height:24px;border-radius:50%}
.tl-chip button:hover{background:rgba(0,0,0,.08)}
.tl-empty{font-size:12px;color:var(--text-muted)}
.tl-section{border-top:1px solid var(--border);margin-top:18px;padding-top:16px}
.tl-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.tl-help{font-size:12px;color:var(--text-muted);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-line{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:normal}
.tl-sugg{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--bg-secondary,rgba(0,0,0,.03));font-size:12px;color:var(--text)}
.tl-sugg > div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tl-sbtn{border:1px solid var(--border);background:var(--bg-input);color:var(--text);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;min-height:30px}
.tl-sbtn.primary{border-color:var(--accent);color:var(--accent)}
.tl-sbtn small{font-weight:400;color:var(--text-muted);margin-left:4px}
.tl-sbtn:hover{border-color:var(--accent)}
#ad-suggest-out .tl-empty{display:block;margin:0 0 12px}

/* ── Page header actions: buttons keep their natural width on desktop (the global .btn is 100% wide) ── */
.page-header > div:first-child{flex:1 1 auto;min-width:0}
.page-header > .btn,.page-header .page-actions .btn{width:auto;flex:0 0 auto;white-space:nowrap}
.page-header .page-actions{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:768px){.page-header .page-actions{width:100%}.page-header .page-actions .btn{flex:1 1 auto;white-space:normal}}
/* ── Store photos ── */
.sp-block{margin:0 0 16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary)}
.sp-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}
.sp-ok{font-size:11px;font-weight:600;color:var(--green);margin-left:6px}
.sp-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-thumb{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);cursor:zoom-in;display:flex;flex-direction:column}
.sp-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-secondary)}
.sp-thumb img.sp-loading{animation:spPulse 1.2s ease-in-out infinite}
.sp-thumb img.sp-broken{aspect-ratio:4/3;font-size:12px;color:var(--text-muted);display:grid;place-items:center}
@keyframes spPulse{0%,100%{opacity:.55}50%{opacity:1}}
.sp-thumb figcaption{padding:6px 8px;font-size:12px;font-weight:600;color:var(--text);display:flex;flex-direction:column;gap:1px}
.sp-thumb figcaption small,.sp-thumb figcaption span{font-weight:400;color:var(--text-muted);font-size:11px}
.sp-thumb figcaption b{font-size:12px}
.sp-missing{cursor:default;align-items:center;justify-content:center;padding:14px 8px;text-align:center;border-style:dashed;color:var(--text-muted)}
.sp-missing span{font-size:22px}
.sp-due{font-size:12px;color:#b45309;margin-top:8px}
.spg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-height:62vh;overflow:auto;padding:2px}
@media (max-width:480px){.spg-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.sp-thumb img.sp-loading{animation:none}}

/* ── Phone tidy-up (admin Stores + any page header): even buttons, aligned stat cards, no blank card rows ── */
@media (max-width:768px){
  .page-header .page-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .page-header .page-actions .btn{width:100%;min-width:0;min-height:44px;padding:9px 8px;font-size:13px;line-height:1.2;white-space:normal;text-align:center;justify-content:center;flex:none;margin:0}
  .page-header .page-actions > div{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  /* an odd button count leaves one hanging on the left — let it span the row */
  .page-header .page-actions > .btn:last-child:nth-child(odd),
  .page-header .page-actions > .btn:nth-last-child(2):nth-child(odd):has(+ div){grid-column:1/-1}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px}
  .stat-card .stat-label{font-size:11px;letter-spacing:.4px;min-height:2.6em;display:flex;align-items:flex-end}
  .stat-card .stat-value{font-size:26px}
  .stat-card .stat-ring{gap:10px}
  .stat-card .stat-ring .legend{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.35;white-space:nowrap}
  .stat-card .stat-ring .legend span+span::before{content:none}
  .admin-tabs{gap:0;margin-bottom:14px}
  .admin-tab{padding:8px 9px;font-size:13px}
}
@media (max-width:640px){
  table.cardify td.cell-empty{display:none}
  /* borders sit on top of each visible row, so hidden trailing cells leave no stray line */
  table.cardify td{border-bottom:none!important;border-top:1px solid var(--border)!important}
  table.cardify tr td:first-child,table.cardify tr td.check-col + td{border-top:none!important}
  table.cardify td[data-label="Store"]{font-size:15px;font-weight:700}
  table.cardify td[data-label="Store"]::before{align-self:center}
}
.stat-ring .legend span+span::before{content:' · ';color:var(--text-muted)}

/* ── DSD dashboard on phones: even store-card actions, one deliveries board, calmer header ── */
@media (max-width:640px){
  #my-stores-list .table-card > div[onclick^="editMyStore"]{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:14px!important;align-items:stretch}
  #my-stores-list .table-card > div[onclick^="editMyStore"] > div:first-child{grid-column:1/-1;min-width:0!important;order:-2}
  #my-stores-list .table-card > div[onclick^="editMyStore"] > .status-badge{grid-column:1/-1;justify-self:start;order:-1;margin:-2px 0 2px}
  #my-stores-list .table-card > div[onclick^="editMyStore"] > div:has(> a[href^="tel"]),#my-stores-list .table-card > div[onclick^="editMyStore"] > div:has(> a[target="_blank"]){display:contents!important}
  #my-stores-list .table-card > div[onclick^="editMyStore"] > button,#my-stores-list .table-card > div[onclick^="editMyStore"] > a,#my-stores-list .table-card > div[onclick^="editMyStore"] > div > a{width:100%;box-sizing:border-box;justify-content:center;min-height:42px;padding:8px 6px!important;font-size:13px!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #stat-tier{font-size:20px!important;line-height:1.2}
  #photo-reminder-banner{padding:10px 14px!important;font-size:13px!important;gap:8px!important}
  #photo-reminder-banner .btn,#photo-reminder-banner button{min-height:36px;padding:6px 12px!important;font-size:13px!important}
}
@media (max-width:768px){
  body[data-mytab]:not([data-mytab="main"]):not([data-mytab="stores"]) #deliveries-board{display:none!important}
}
/* The one-line "N to deliver" bar opens Store orders, which has the full list — so not on that tab. */
body[data-mytab="storeorders"] #deliveries-board{display:none!important}

/* Inventory (DSD + admin): summary tiles, section heads, stock-level bars, item tiles, store health.
   A bar reads full at 3× the item's low mark; green above the mark, amber at or under it, red at zero. */
.inv-kpis{margin-bottom:24px}
.inv-kpis .stat-value{font-variant-numeric:tabular-nums}
.inv-kpis .stat-card.good .stat-value{color:var(--green)}
.inv-kpis .stat-card.warn .stat-value{color:var(--yellow)}
.inv-kpis .stat-card.bad .stat-value{color:var(--red)}
.inv-kpis .kpi-ico{position:absolute;right:16px;top:14px;font-size:22px;line-height:1;z-index:1}
.inv-kpis .stat-card .stat-label{padding-right:30px}
.inv-kpis .stat-ring .ring{--c:var(--green);background:conic-gradient(var(--c) calc(var(--p)*1%),var(--border) 0)}
.inv-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.inv-sec h2{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.inv-sec p{color:var(--text-secondary);font-size:13.5px;margin:2px 0 0}
.inv-sec .btn{width:auto;flex:none}
.inv-kpis .stat-ring .legend{min-width:0}
.inv-bar{height:7px;border-radius:99px;background:var(--border);overflow:hidden;width:100%;max-width:200px;flex:1 1 90px}
.inv-bar i{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .5s ease}
.inv-bar.low i{background:var(--yellow)}
.inv-bar.out i{background:var(--red)}
.inv-tile{width:44px;height:44px;border-radius:12px;flex:none;display:block;object-fit:cover;background:#0e1e48;
  border:1px solid var(--border-light);box-shadow:0 4px 12px -7px rgba(14,30,72,.55)}
.wh-row{border-left:3px solid transparent}
.wh-row.low{border-left-color:var(--yellow)}
.wh-row.out{border-left-color:var(--red)}
.inv-chip{display:inline-block;border-radius:6px;font-size:10.5px;font-weight:800;padding:2px 7px;vertical-align:middle;letter-spacing:.03em;white-space:nowrap}
.inv-chip.low{background:color-mix(in srgb,var(--yellow) 18%,transparent);color:var(--yellow)}
.inv-chip.out{background:var(--red);color:#fff}
.inv-store{border-left:4px solid var(--green)}
.inv-store.low{border-left-color:var(--yellow)}
.inv-store.out{border-left-color:var(--red)}
.inv-store .table-toolbar{flex-direction:row!important;align-items:center!important}
.inv-ring{--p:0;--c:var(--green);width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--border) 0)}
.inv-ring::after{content:attr(data-label);width:30px;height:30px;border-radius:50%;background:var(--bg-card);display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--text)}
.inv-qty{display:flex;align-items:center;gap:10px;min-width:130px}
.inv-qty b{min-width:26px;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .inv-kpis .kpi-ico{font-size:17px;right:10px;top:10px}
  .inv-store .table-toolbar{flex-wrap:wrap}
  .inv-tile{width:40px;height:40px;border-radius:10px}
  .inv-sec .btn{width:100%}
}

/* Addy orders: every order says what it is — stock FROM ADDY for the warehouse, or an order placed FOR a store */
.ord-filter{display:flex;gap:6px;flex-wrap:wrap}
.ord-chip{border:1px solid var(--border);background:var(--bg-card);color:var(--text);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;min-height:34px;font-family:inherit}
.ord-chip b{font-variant-numeric:tabular-nums;margin-left:2px;opacity:.75}
.ord-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ord-kind{display:inline-block;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ord-kind.addy{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.ord-kind.store{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.ord-kind-sub{display:block;font-size:11px;color:var(--text-muted);margin-top:3px;white-space:nowrap}
tr.ord-row.addy td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.ord-row.store td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.ord-thumbs{display:flex;align-items:center;gap:0;white-space:nowrap}
.ord-thumbs img{width:30px;height:30px;border-radius:8px;object-fit:cover;background:#0e1e48;border:2px solid var(--bg-card);margin-left:-8px;box-shadow:0 2px 6px -3px rgba(0,0,0,.4)}
.ord-thumbs img:first-child{margin-left:0}
.ord-thumbs span{margin-left:8px;color:var(--text-secondary)}
@media (max-width:600px){ .ord-chip{min-height:36px} }

/* Admin → Inventory: one card per DSD warehouse */
.wh-dsd-head{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;flex-wrap:wrap}
.wh-dsd-head h3{margin:0;font-size:16px;font-weight:700}
.wh-dsd-head p{margin:2px 0 0;font-size:12px;color:var(--text-muted);overflow-wrap:anywhere}
.wh-dsd-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary)}
.wh-dsd-stats b{color:var(--text);font-variant-numeric:tabular-nums}
.wh-chev{font-size:14px;color:var(--text-muted);width:14px;text-align:center}
.wh-coming{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-radius:6px;font-size:10.5px;font-weight:700;padding:2px 7px;white-space:nowrap}
.wh-empty-chip{border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--text-secondary);background:var(--bg-card)}

/* ── Dashboard tab bar (both dashboards): one clean card of pills. Line icons take the text colour; the chosen
   tab is a solid pill, hover only tints — nothing else ever looks selected. Overrides the older underline tabs. ── */
.admin-tabs{gap:4px;padding:6px;border:1px solid var(--border-light);border-radius:14px;background:var(--bg-card);box-shadow:var(--shadow);margin-bottom:22px;flex-wrap:wrap}
.admin-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:none!important;border-radius:10px;margin:0;
  font-size:13.5px;font-weight:600;line-height:1.2;color:var(--text-secondary);background:transparent;white-space:nowrap}
.admin-tab::after{display:none}
.admin-tab:hover{background:var(--bg-secondary);color:var(--text)}
.admin-tab.active,.admin-tab.active:hover{background:var(--accent);color:#fff;box-shadow:0 6px 16px -9px var(--accent)}
.admin-tab .tab-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.admin-tab.active .tab-ico{opacity:1}
.admin-tab > span[id$="-badge"]{margin-left:0!important}
@media (max-width:768px){
  .admin-tabs{padding:5px;gap:3px;margin-bottom:14px}
  .admin-tab{padding:8px 10px;font-size:13px;min-height:36px;gap:6px}
  .admin-tab .tab-ico{width:15px;height:15px}
}

/* Fluid tab bar (Nav): one row that fills the card at every width and role. The chosen tab grows and the others
   make room; a solid pill slides under it (app.js fluidTabs). Every tab keeps its name at every width — the bar
   only ever holds the few places a person goes daily, the rest sit under "More". Phones keep the wrapping bar. */
.main-content{max-width:1600px}
@media (min-width:769px){
  .admin-tabs.fluid{position:relative;flex-wrap:nowrap;overflow:hidden;gap:2px;isolation:isolate}
  .admin-tabs.fluid .admin-tab{flex:1 1 auto;justify-content:center;gap:0;padding:10px 14px;font-size:14.5px;min-width:0;
    transition:flex-grow .42s cubic-bezier(.22,.8,.24,1),padding .42s cubic-bezier(.22,.8,.24,1),color .25s,background .2s}
  .admin-tabs.fluid .admin-tab.active{flex-grow:1.5;padding-left:20px;padding-right:20px;font-weight:700}
  .admin-tabs.fluid .admin-tab.active,.admin-tabs.fluid .admin-tab.active:hover{background:transparent;box-shadow:none}
  .admin-tabs.fluid .admin-tab .tab-ico{width:18px;height:18px}
  .admin-tabs.fluid .tab-label{display:inline-block;white-space:nowrap;margin-left:8px}
  .admin-tabs.fluid .tab-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:10px;background:var(--accent);
    box-shadow:0 8px 20px -10px var(--accent);pointer-events:none;will-change:transform,width;backface-visibility:hidden}
  /* the hidden clone the pill measures its landing on: no transitions, no time */
  .admin-tabs.fluid.snap .admin-tab,.admin-tabs.fluid.snap .tab-label{transition:none!important}
  .admin-tabs.fluid .admin-tab .tab-ico{transform-origin:50% 60%}
  .admin-tabs.fluid .admin-tab > span[id$="-badge"]{margin-left:6px!important}
}
/* The More button and its menu. The button is an ordinary tab (the pill slides to it when a menu tab is chosen);
   the menu is a card under it with every other tab as a full-width row: icon, name, badge. */
.tab-more-btn .tab-caret{width:14px;height:14px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .2s}
.tab-more-btn.open .tab-caret{transform:rotate(180deg)}
.tab-more-badge{margin-left:6px;background:var(--red);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;line-height:1.5}
.tab-menu{position:fixed;z-index:1200;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--border-light);border-radius:14px;
  background:var(--bg-card);box-shadow:0 18px 48px -18px rgba(15,23,42,.45),var(--shadow);animation:tabMenuIn .16s ease-out}
.tab-menu[hidden]{display:none}
.tab-menu .admin-tab{display:flex;width:100%;justify-content:flex-start;gap:10px;padding:10px 12px;font-size:14px;border-radius:10px;text-align:left}
.tab-menu .admin-tab .tab-ico{width:18px;height:18px}
.tab-menu .admin-tab .tab-label{flex:1}
.tab-menu .admin-tab > span[id$="-badge"]{margin-left:auto!important}
@keyframes tabMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:768px){
  .admin-tab .tab-label{margin-left:0}
  .tab-more-btn .tab-caret{width:13px;height:13px;margin-left:3px}
}
@media (prefers-reduced-motion:reduce){
  .admin-tabs.fluid .admin-tab,.admin-tabs.fluid .tab-label,.tab-more-btn .tab-caret{transition:none}
  .tab-menu{animation:none}
}

/* Commission totals (admin toolbar + total rows) */
.comm-totals{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary)}
.comm-totals b{color:var(--text);font-variant-numeric:tabular-nums}
.comm-totals .comm-total b{color:var(--green);font-size:15px}
.comm-totals b.owed{color:var(--yellow)}
.comm-totals .comm-by{flex-basis:100%;display:flex;gap:12px;flex-wrap:wrap;font-size:12px}
tr.comm-foot td{font-weight:800;border-top:2px solid var(--border);background:var(--bg-secondary)}
tr.comm-foot td:nth-child(2){color:var(--green);font-variant-numeric:tabular-nums}

/* ── Companies (ADDY, Hella Good Energy): badges, the Companies card, per-company checkout ── */
.seller-chip{display:inline-block;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:middle;
  background:color-mix(in srgb,var(--sc,#2563eb) 14%,transparent);color:var(--sc,#2563eb);max-width:180px;overflow:hidden;text-overflow:ellipsis}
.ord-kind.seller{background:color-mix(in srgb,var(--sc,#e4572e) 14%,transparent);color:var(--sc,#e4572e)}
.product-by{font-size:12px;color:var(--text-muted);margin:-2px 0 4px;letter-spacing:.01em}
.product-by b{font-weight:600;color:var(--text-secondary,var(--text-muted))}
.cart-item-by{font-size:11px;color:var(--text-muted)}
.co-card{border:1px solid var(--border);border-left:4px solid var(--sc,#2563eb);border-radius:10px;padding:14px;margin-top:12px}
.co-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.co-logo{height:30px;width:auto;max-width:90px;object-fit:contain;border-radius:6px}
.co-dot{width:14px;height:14px;border-radius:50%;background:var(--sc,#2563eb);flex-shrink:0}
.co-name{font-weight:700;font-size:15px}
.co-sub{font-size:12px;color:var(--text-muted)}
.co-badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.co-badge.warn{background:#fef3c7;color:#92400e}
.co-badge.ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.co-warn{font-size:12.5px;background:#fffbeb;color:#92400e;border:1px solid #fde68a;border-radius:8px;padding:8px 10px;margin-bottom:8px;line-height:1.5}
.co-warn a{color:inherit;font-weight:700}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 12px}
.co-field{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text-muted);min-width:0}
.co-field.wide{grid-column:1/-1}
.co-field b{color:#b45309}
.co-field input{padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;min-width:0;width:100%;box-sizing:border-box}
.co-field input[readonly]{opacity:.7}
.co-toggles{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.co-toggles label{display:inline-flex;gap:6px;align-items:center}
.co-pay{font-size:12.5px;color:var(--text-muted);margin-top:10px;line-height:1.7;overflow-wrap:anywhere}
.co-msg{font-size:12px;color:var(--text-muted)}
.co-group{border:1px solid var(--border);border-left:4px solid var(--sc,#2563eb);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.co-group-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:6px}
.co-group .order-summary-row{font-size:13px}
.co-group-note{font-size:12px;color:#92400e;background:#fffbeb;border-radius:7px;padding:6px 8px;margin-top:6px;line-height:1.45}
.pay-steps{display:flex;flex-direction:column;gap:10px}
.pay-step{border:1px solid var(--border);border-radius:10px;padding:12px 14px;border-left:4px solid var(--sc,#2563eb)}
.pay-step.done{opacity:.75}
.pay-step-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700}
.pay-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--sc,#2563eb);color:#fff;font-size:12px;margin-right:8px;flex-shrink:0}
.pay-step-sub{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.5}
.pay-step-card{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input)}
.pay-step .btn{margin-top:10px;width:100%}

/* My Orders: the row's buttons wrap in their cell instead of running past the table's edge (Pay + Cancel +
   Reorder + Invoice on an unpaid order). */
.ord-actions{display:flex;flex-wrap:wrap;gap:4px;min-width:170px;max-width:300px}
.ord-actions .btn{white-space:nowrap}

/* ── DSD Home launcher: the things a DSD does, as big labelled buttons — no hunting through tabs. One row on a
   desktop however many there are (five with Log order, four for the roles that can't log one). ── */
.home-launch{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin:0 0 22px}
.home-launch a,.home-launch button{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--border-light);border-radius:14px;background:var(--bg-card);
  box-shadow:var(--shadow);color:var(--text);font:inherit;font-weight:700;font-size:15px;text-align:left;text-decoration:none;cursor:pointer;min-height:64px;
  transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease}
.home-launch a:hover,.home-launch button:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 10px 24px -14px var(--accent)}
.home-launch .hl-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--bg-secondary)}
.home-launch .hl-go{background:var(--accent);color:#fff;border-color:var(--accent)}
.home-launch .hl-go .hl-ico{background:rgba(255,255,255,.18)}
.home-launch small{display:block;font-weight:500;font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.home-launch .hl-go small{color:rgba(255,255,255,.85)}
.home-launch .hl-log .hl-ico{background:var(--accent-bg)}
/* Two across: with an odd number of doors the last one, Help, takes the bottom row, so Log order sits right above it
   and nothing is left on a row of its own. */
@media (max-width:1024px){.home-launch{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-launch>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:768px){.home-launch{gap:10px;margin-bottom:16px}.home-launch a,.home-launch button{padding:13px 14px;min-height:58px;font-size:14.5px}.home-launch .hl-ico{width:38px;height:38px;font-size:19px}}

/* Log order from Home: the store line on top of the order form ("📍 You're at <Store> · Change") and its picker. */
.fo-pick{clear:both;margin:10px 0 12px}   /* below the floated ×, so it runs the full width of the form */
.fo-at{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-hover)}
.fo-at.is-auto{background:var(--accent-bg);border-color:transparent}
.fo-at-ico{flex:none;font-size:18px;line-height:1}
.fo-at-txt{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--text)}
.fo-at-txt b{font-weight:800}
.fo-at-txt small{display:block;margin-top:1px;font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-at-change{flex:none;border:0;background:none;padding:8px 4px;color:var(--accent);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.fo-at-wait{flex:none;font-size:12px;color:var(--text-muted)}
.fo-pick-panel{margin-top:8px}
.fo-pick-note{margin:0 2px 8px;font-size:12.5px;color:var(--text-secondary)}
.fo-pick-list{margin-top:8px;max-height:min(40vh,300px);overflow-y:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.fo-pick-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.fo-pick-row:last-child{border-bottom:0}
.fo-pick-row:hover,.fo-pick-row:focus-visible{background:var(--bg-hover);outline:none}
.fo-pick-row.is-on{background:var(--accent-bg)}
.fo-pick-name{flex:1;min-width:0;font-size:14px;font-weight:700}
.fo-pick-name small{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-pick-mi{flex:none;font-size:12.5px;font-weight:700;color:var(--accent)}
.fo-pick-on{flex:none;font-weight:800;color:var(--accent)}
.fo-pick-empty{padding:12px;font-size:13px;color:var(--text-muted)}
@keyframes foPulse{50%{opacity:.35}}
.fo-spin{animation:foPulse 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fo-spin{animation:none}}

/* Home stat tiles are buttons: a small "Open ›" says so, the whole tile lifts on hover, and the margin tile
   lights up the panel it scrolls to. */
.stat-card.stat-link{position:relative;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease}
.stat-card.stat-link:hover,.stat-card.stat-link:focus-visible{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 10px 24px -14px var(--accent);outline:none}
.stat-card.stat-link .stat-go{position:absolute;right:14px;bottom:12px;font-size:12px;font-weight:600;color:var(--accent);opacity:.85}
#margin-progress.flash>*{animation:statFlash 1.4s ease-out}
@keyframes statFlash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:768px){.stat-card.stat-link .stat-go{right:12px;bottom:10px;font-size:11px}}


/* ── Icon click animations (Nav): each tab's own icon moves in its own small way. Parts are named in
   app.js TAB_ICON_PATHS; .fx is on the <svg> for ~1.4 s after a click. Every rule is transform/opacity. ── */
.tab-ico{overflow:visible}
.tab-ico *{transform-box:view-box}
.tab-ico .fx-only{opacity:0}
.tab-ico.fx.ico-store .p-walker{animation:icoWalk 1.1s cubic-bezier(.4,.1,.4,1) forwards}
.tab-ico.fx.ico-store .p-w2{animation-delay:.22s}
.tab-ico.fx.ico-store .p-awning{animation:icoAwning .9s ease-out .35s}
@keyframes icoWalk{0%{opacity:0;transform:translateX(0)}12%{opacity:1}25%{transform:translateX(3px) translateY(-.6px)}50%{transform:translateX(6px) translateY(0)}75%{transform:translateX(9px) translateY(-.6px)}90%{opacity:1}100%{opacity:0;transform:translateX(11px) translateY(0)}}
@keyframes icoAwning{0%,100%{transform:translateY(0)}30%{transform:translateY(-1px)}60%{transform:translateY(.5px)}}
.tab-ico.fx.ico-clock .p-hand{transform-origin:12px 12px;animation:icoSpin .8s cubic-bezier(.45,0,.2,1)}
@keyframes icoSpin{to{transform:rotate(360deg)}}
.tab-ico.fx.ico-user .p-e1{animation:icoPop 1.3s ease-in-out .05s}
.tab-ico.fx.ico-user .p-e2{animation:icoPop 1.3s ease-in-out .15s}
.tab-ico.fx.ico-user .p-e3{animation:icoPop 1.3s ease-in-out .25s}
.tab-ico.fx.ico-user .p-e4{animation:icoPop 1.3s ease-in-out .35s}
.tab-ico.fx.ico-users .p-e1,.tab-ico.fx.ico-team .p-e1{animation:icoPop 1.3s ease-in-out .05s}
.tab-ico.fx.ico-users .p-e2,.tab-ico.fx.ico-team .p-e2{animation:icoPop 1.3s ease-in-out .18s}
.tab-ico.fx.ico-users .p-e3,.tab-ico.fx.ico-team .p-e3{animation:icoPop 1.3s ease-in-out .31s}
@keyframes icoPop{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.08)}18%{transform:scale(1)}62%{opacity:1;transform:scale(1)}74%{opacity:0;transform:scale(.4)}100%{opacity:0}}
.tab-ico.fx.ico-receipt .p-lines,.tab-ico.fx.ico-doc .p-lines{animation:icoScroll 1s cubic-bezier(.4,0,.2,1)}
.tab-ico.ico-receipt .p-lines{clip-path:inset(3.5px 4px 3px 4px)}
.tab-ico.ico-doc .p-lines{clip-path:inset(9px 4px 3px 4px)}
@keyframes icoScroll{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.tab-ico.fx.ico-box .p-box{transform-origin:12px 14px;animation:icoJump .7s cubic-bezier(.34,1.56,.64,1)}
.tab-ico.fx.ico-box .p-pack,.tab-ico.fx.ico-cart .p-pack{animation:icoDrop .75s cubic-bezier(.5,0,.6,1) forwards}
.tab-ico.fx .p-k2{animation-delay:.14s!important}
.tab-ico.fx .p-k3{animation-delay:.26s!important}
@keyframes icoJump{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-3px) scale(1.12)}70%{transform:translateY(.8px) scale(.97)}100%{transform:translateY(0) scale(1)}}
@keyframes icoDrop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}80%{opacity:1;transform:translateY(15px)}100%{opacity:0;transform:translateY(17px)}}
.tab-ico.fx.ico-cart .p-cart{transform-origin:12px 18px;animation:icoRoll .8s ease-in-out}
@keyframes icoRoll{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(2px) rotate(-5deg)}65%{transform:translateX(-1.5px) rotate(3deg)}}
.tab-ico.fx.ico-tag .p-tag{transform-origin:7.5px 7.5px;animation:icoSwing 1s cubic-bezier(.34,1.3,.64,1)}
@keyframes icoSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}55%{transform:rotate(11deg)}80%{transform:rotate(-4deg)}}
.tab-ico.fx.ico-trend .p-line,.tab-ico.fx.ico-chart .p-line,.tab-ico.fx.ico-pulse .p-line,.tab-ico.fx.ico-route .p-path{stroke-dasharray:60;animation:icoDraw .9s cubic-bezier(.3,.6,.3,1)}
@keyframes icoDraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.tab-ico.fx.ico-trend .p-arrow{transform-origin:18px 10px;animation:icoPing .5s .55s cubic-bezier(.34,1.56,.64,1)}
.tab-ico.fx.ico-route .p-end{transform-origin:18px 5px;animation:icoPing .45s .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes icoPing{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.tab-ico.fx.ico-dollar .p-coin{transform-origin:12px 12px;animation:icoFlip .9s cubic-bezier(.4,0,.2,1)}
@keyframes icoFlip{0%{transform:scaleX(1)}25%{transform:scaleX(0.05)}50%{transform:scaleX(-1)}75%{transform:scaleX(0.05)}100%{transform:scaleX(1)}}
.tab-ico.fx.ico-mail .p-flap{transform-origin:12px 6.5px;animation:icoFlap .9s ease-in-out}
.tab-ico.fx.ico-mail .p-letter{animation:icoLetter .9s ease-in-out}
@keyframes icoFlap{0%,100%{transform:scaleY(1)}35%,65%{transform:scaleY(-.6) translateY(-1px)}}
@keyframes icoLetter{0%,100%{opacity:0;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}70%{opacity:1;transform:translateY(-6px)}}
.tab-ico.fx.ico-orbit .p-ring{transform-origin:12px 12px;animation:icoSpin 1s cubic-bezier(.4,0,.2,1)}
.tab-ico.fx.ico-sliders .p-top{animation:icoSlideL 1s cubic-bezier(.34,1.3,.64,1)}
.tab-ico.fx.ico-sliders .p-bot{animation:icoSlideR 1s cubic-bezier(.34,1.3,.64,1)}
@keyframes icoSlideL{0%,100%{transform:translateX(0)}45%{transform:translateX(-8px)}}
@keyframes icoSlideR{0%,100%{transform:translateX(0)}45%{transform:translateX(8px)}}
.tab-ico.fx.ico-home .p-roof{transform-origin:12px 8px;animation:icoAwning .8s ease-out}
.tab-ico.fx.ico-home .p-door{animation:icoLight 1s ease-in-out}
@keyframes icoLight{0%,100%{fill:transparent}35%,65%{fill:currentColor;fill-opacity:.55}}
.tab-ico.fx.ico-help .p-q{transform-origin:12px 13px;animation:icoBob .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes icoBob{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-2.5px) scale(1.12)}60%{transform:translateY(.6px) scale(.95)}}
.tab-ico.fx.ico-flag .p-cloth{transform-origin:5px 8px;animation:icoWave .9s ease-in-out}
@keyframes icoWave{0%,100%{transform:skewY(0)}25%{transform:skewY(-9deg)}50%{transform:skewY(7deg)}75%{transform:skewY(-3deg)}}
.tab-ico.fx.ico-truck .p-truck{animation:icoDrive 1s cubic-bezier(.4,0,.2,1)}
.tab-ico.fx.ico-truck .p-s1{transform-origin:7px 18px;animation:icoSpin .8s linear}
.tab-ico.fx.ico-truck .p-s2{transform-origin:17.5px 18px;animation:icoSpin .8s linear}
.tab-ico.fx.ico-truck .p-puff{animation:icoPuff .9s ease-out .1s}
@keyframes icoDrive{0%{transform:translateX(0)}40%{transform:translateX(3px)}75%{transform:translateX(-1.5px)}100%{transform:translateX(0)}}
@keyframes icoPuff{0%{opacity:0;transform:scale(.4) translateX(0)}30%{opacity:.7;transform:scale(1) translateX(-1px)}100%{opacity:0;transform:scale(1.8) translateX(-4px)}}
.tab-ico.fx.ico-more .p-d1{animation:icoDotBounce .7s ease-in-out}
.tab-ico.fx.ico-more .p-d2{animation:icoDotBounce .7s ease-in-out .1s}
.tab-ico.fx.ico-more .p-d3{animation:icoDotBounce .7s ease-in-out .2s}
@keyframes icoDotBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-3.5px)}}
@media (prefers-reduced-motion:reduce){.tab-ico.fx *{animation:none!important}}

/* ── Bare fields ────────────────────────────────────────────────────────────────────────────────────────────────
   A text box, notes box or dropdown with no class of its own used to fall back to the browser's default look — a
   thin grey frame and a typewriter font in textareas (Nav, 2026-09-29: "straight out of the early 2000s"). They get
   the app's field look here. :where() keeps this at zero specificity, so .form-group fields and inline styles
   (the borderless $ inputs) keep theirs. */
:where(input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="range"]),
       textarea:not([class]), select:not([class])) {
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
:where(textarea:not([class])) { resize: vertical; min-height: 64px; }
:where(input:not([class]):focus, textarea:not([class]):focus, select:not([class]):focus) {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
/* A borderless input inside its own box (the "$ 165.00" amount fields): the box shows focus, not a second ring inside it. */
:where(div:has(> input.bare-input:focus)) { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
:where(input:not([class]), textarea:not([class]))::placeholder { color: var(--text-muted); opacity: 1; }

/* Admin DSD scoreboard: a number and its small note stay together (and right-aligned in phone cards). */
.sb-cell { display: inline-block; }
@media (max-width: 700px) { .sb-cell { text-align: right; } }

/* ── Admin → Users: compact rows, one primary action + a ⋯ More menu (app.js userActionsHtml / toggleUserMenu) ── */
.users-table th,.users-table td{padding:12px 14px;vertical-align:middle}
.users-table th:first-child,.users-table td:first-child{padding-left:24px}
.users-table th:last-child,.users-table td:last-child{padding-right:20px}
.users-table th.ut-th-actions{text-align:right;cursor:default}
.users-table th.ut-th-actions:hover{color:var(--text-secondary)}
.ut-name-main{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.ut-sub{color:var(--text-muted);font-weight:400}
.ut-name .tl-line{margin-top:1px}
.ut-email{color:var(--text-secondary);font-size:13.5px;max-width:260px}
.ut-email span{display:block;overflow:hidden;text-overflow:ellipsis}
.ut-role .role-badge{display:inline-block;font-size:11.5px;padding:3px 10px;line-height:1.4}
.ut-under{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px}
.ut-phone{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--text)}
.ut-none{color:var(--text-muted)}
.ut-status .status-badge{font-size:11.5px;line-height:1.4}
.ut-tier{white-space:normal;min-width:150px}
.ut-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:250px}
.ut-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap}
.ut-chip.tier,.ut-chip.house{background:var(--accent-bg);color:var(--accent)}
.ut-chip.invoice{background:var(--yellow-bg);color:var(--yellow)}
.ut-chip.rate5{background:var(--green-bg);color:var(--green)}
.ut-chip.rate2{background:rgba(100,116,139,.12);color:var(--text-secondary)}
.ut-actions{text-align:right;cursor:default}
.users-table tr.ut-nested td{background:var(--bg-hover)}
.users-table tr.ut-nested td:first-child{box-shadow:inset 3px 0 0 var(--accent-bg)}
.ut-team-toggle td{padding:8px 20px 8px 28px!important;font-size:12.5px;font-weight:600;color:var(--text-secondary);background:var(--bg-table-head)}
.ut-team-toggle:hover td{color:var(--accent)}
.ut-arrow{display:inline-block;width:12px}

.ua{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;vertical-align:middle}
.ua .ua-primary{padding:6px 12px;min-height:32px;font-size:13px;border-radius:8px;white-space:nowrap;animation:none}
.ua-more{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);font:600 13px/1 inherit;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.ua-more svg{width:16px;height:16px;fill:currentColor}
.ua-more:hover{background:var(--bg-hover)}
.ua-more.open{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ua-more:focus-visible,.ua .ua-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ua-menu{position:fixed;z-index:1300;width:248px;max-width:calc(100vw - 16px);padding:6px;overflow:auto;overscroll-behavior:contain;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px -18px rgba(15,23,42,.45),var(--shadow);
  text-align:left;white-space:normal;animation:uaIn .14s ease-out}
.ua-menu.up{animation-name:uaInUp}
.ua-menu[hidden]{display:none}
.ua-group + .ua-group{border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
.ua-label{padding:6px 10px 3px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.ua-danger .ua-label{color:var(--red)}
.ua-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:500 14px/1.25 inherit;text-align:left;cursor:pointer}
.ua-item:hover,.ua-item:focus{background:var(--bg-hover);outline:none}
.ua-item:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.ua-item .ua-ico{flex:none;width:18px;text-align:center;font-size:14px;color:var(--text-secondary)}
.ua-item.danger,.ua-item.danger .ua-ico{color:var(--red)}
.ua-item.danger:hover,.ua-item.danger:focus{background:var(--red-bg)}
.ua-item:disabled{opacity:.5;cursor:default}
@keyframes uaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes uaInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ua-menu{animation:none}}
@media (hover:none) and (pointer:coarse){.ua-item{min-height:44px}.ua-more,.ua .ua-primary{min-height:42px}}

/* Phones and small tablets: every user is a card — name, email, phone, chips, then the same two controls */
@media (max-width:760px){
  #tab-users .table-card{background:none;border:0;box-shadow:none;overflow:visible}
  #tab-users .table-toolbar{padding:0 2px 10px;border:0}
  #tab-users .table-wrap{overflow:visible}
  .table-wrap table.users-table{min-width:0!important}
  .users-table thead{display:none}
  .users-table,.users-table tbody{display:block;width:100%}
  .users-table tr.ut-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:14px 14px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
  .users-table tr.ut-row td{display:block;padding:0!important;border:0;background:none!important;box-shadow:none!important;white-space:normal;min-width:0}
  .users-table tr.ut-row:hover td{background:none}
  .users-table td.ut-name{order:1;flex:1 1 100%;font-size:15.5px}
  .users-table td.ut-email{order:2;flex:1 1 100%;max-width:none;font-size:13.5px;margin-top:-4px}
  .users-table td.ut-email span{overflow-wrap:anywhere;white-space:normal}
  .users-table td.ut-phone{order:3;flex:1 1 100%;font-size:13.5px;color:var(--text-secondary);margin-top:-4px}
  .users-table td.ut-phone:has(.ut-none){display:none}
  .users-table td.ut-role{order:4;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
  .users-table td.ut-role .ut-under{display:inline;margin:0}
  .users-table td.ut-status{order:5;margin-top:4px}
  .users-table td.ut-tier{order:6;min-width:0;margin-top:4px}
  .users-table td.ut-tier .ut-none{display:none}
  .users-table .ut-chips{display:inline-flex;max-width:none}
  .users-table td.ut-actions{order:7;flex:1 1 100%;margin-top:8px;padding-top:10px!important;border-top:1px solid var(--border-light)!important;text-align:left}
  .users-table .ua{display:flex;width:100%}
  .users-table .ua .ua-primary{flex:1;min-height:40px;width:auto}
  .users-table .ua > .ua-more:first-child{flex:1}
  .users-table .ua-more{min-height:40px;padding:0 14px}
  .users-table tr.ut-nested{margin-left:14px;border-left:3px solid var(--accent)}
  .users-table tr.ut-team-toggle{display:block;margin:-4px 0 10px}
  .users-table tr.ut-team-toggle td{display:block;padding:10px 14px!important;border:1px dashed var(--border);border-radius:10px;background:var(--bg-card)}
}

/* ── Admin → Settings: titled section cards, sticky section nav on desktop, section picker on phones (app.js initSettingsLayout) ── */
#tab-settings .page-header{margin-bottom:22px}
.set-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:28px;align-items:start}
.set-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;box-shadow:var(--shadow)}
.set-nav a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none;border-left:3px solid transparent;transition:background .15s,color .15s}
.set-nav a:hover{background:var(--bg-hover);color:var(--text)}
.set-nav a.on{background:var(--accent-bg);color:var(--accent);font-weight:600;border-left-color:var(--accent)}
.set-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.set-picker{display:none}
.set-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.set-sec{background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;box-shadow:var(--shadow);scroll-margin-top:16px}
.set-sec.set-flash{animation:setFlash 1.1s ease-out}
@keyframes setFlash{0%{box-shadow:0 0 0 3px var(--accent-bg),var(--shadow)}100%{box-shadow:var(--shadow)}}
.set-sec-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 16px;padding:18px 22px 16px;border-bottom:1px solid var(--border)}
.set-sec-h h2{font-size:17px;font-weight:700;margin:0 0 3px;color:var(--text)}
.set-sec-h p{font-size:13.5px;color:var(--text-secondary);margin:0;line-height:1.45}
.set-state{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-light)}
.set-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-muted)}
.set-state[data-state="idle"]::before{background:var(--accent)}
.set-state[data-state="dirty"]{background:var(--yellow-bg);color:var(--yellow);border-color:transparent}
.set-state[data-state="dirty"]::before{background:var(--yellow)}
.set-state[data-state="saved"]{background:var(--green-bg);color:var(--green);border-color:transparent}
.set-state[data-state="saved"]::before{background:var(--green)}
.set-sec-b{padding:18px 22px 20px}
.set-sub-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px}

/* label + help on the left, the control on the right; stacks on narrow screens */
.set-field{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:6px 24px;padding:14px 0;border-top:1px solid var(--border-light)}
.set-sec-b > .set-field:first-child,.set-sub-h + .set-field,.set-list + .set-field{border-top:0}
.set-list + .set-field{margin-top:6px}
.set-field-l label,.set-field-l .set-label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.set-field-l p{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.45}
.set-field-c{min-width:0}
.set-input{width:100%;max-width:440px;min-height:40px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:inherit;font-size:14px;box-sizing:border-box}
.set-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.set-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-inline .set-input{flex:2 1 220px;max-width:none;width:auto}
.set-inline .set-input-sm{flex:1 1 150px}
.set-inline .btn{flex:none;min-height:40px}
.set-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text);cursor:pointer;line-height:1.4}
.set-check input{width:auto;margin-top:3px;accent-color:var(--accent)}
.set-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:14px;border-top:1px solid var(--border-light)}
.set-foot .btn{min-width:110px}
.set-msg{font-size:13px;color:var(--text-muted)}
.set-msg:empty{display:none}
.set-tags{display:flex;flex-wrap:wrap;gap:8px}
.set-tags span{font-size:12.5px;background:var(--bg-hover);border:1px solid var(--border-light);border-radius:999px;padding:5px 12px;color:var(--text-secondary)}
.set-list{margin:0 0 4px}
.set-list > div:last-child{border-bottom:0!important}
.set-backups{display:block}
.set-backups > .btn{margin:0 8px 6px 0}
.set-backups #backups-restore-btn{margin-left:0!important}
#feedback-list > div:last-child{border-bottom:0!important}
#feedback-list > div:first-child{padding-top:0!important}

/* the cards the loaders render sit flat inside their section; QuickBooks keeps one panel per company */
#companies-card > .card,#stripe-status-card > .card{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
#companies-card > .card > div:first-child,#stripe-status-card > .card > div:first-child{font-size:15px}
#companies-card .co-card:first-of-type{margin-top:14px}
#companies-card .co-card.dirty .co-msg{color:var(--yellow);font-weight:600}
#quickbooks-card .card{box-shadow:none!important;border:1px solid var(--border)!important;border-radius:10px!important;margin:0 0 12px!important;background:var(--bg-card)!important}
#monarch-card-slot .table-card{max-width:none!important;margin:0!important;box-shadow:none;border:1px solid var(--border);border-radius:10px}
#monarch-card-slot .table-toolbar{padding:14px 18px}
#monarch-card-slot .table-toolbar h2{font-size:15px}
#monarch-card-slot #monarch-admin-body{padding:0 18px 16px!important}
#monarch-card-slot #monarch-diagnose-result{margin:0 18px!important}
#admin-docs-gallery .doc-upload-card{margin-top:0}

@media (max-width:1023px){
  .set-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .set-nav{display:none}
  .set-picker{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;margin:0 -16px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border-light)}
  .set-picker span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
  .set-picker select{flex:1;min-width:0;min-height:42px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text);font:600 15px inherit}
  .set-sec{scroll-margin-top:76px}
}
@media (max-width:640px){
  .set-sec-h{flex-direction:column;padding:16px 16px 14px}
  .set-sec-b{padding:14px 16px 16px}
  .set-field{grid-template-columns:minmax(0,1fr);gap:8px}
  .set-input{max-width:none}
  .set-foot .btn{flex:1}
  #companies-card .co-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.set-sec.set-flash{animation:none}}
#db-size-content{max-width:460px}
@media (min-width:641px){.set-foot{padding-left:264px}}
/* Users table between phone and wide desktop: the email moves under the name so the row still fits on one line */
.ut-name-email{display:none;font-size:12.5px;color:var(--text-secondary);font-weight:400;margin-top:1px;overflow:hidden;text-overflow:ellipsis;max-width:240px}
@media (min-width:761px) and (max-width:1279px){
  .users-table th:nth-child(2),.users-table td.ut-email{display:none}
  .ut-name-email{display:block}
  .users-table th,.users-table td{padding-left:10px;padding-right:10px}
  .users-table th:first-child,.users-table td:first-child{padding-left:18px}
  .users-table th:last-child,.users-table td:last-child{padding-right:16px}
  .ut-tier{min-width:130px}
  .ut-chips{max-width:210px}
}
#monarch-card-slot pre{background:var(--bg-hover)!important;color:var(--text);border:1px solid var(--border-light)}