/* ============================================================
   WholePeps — Dashboard Page Styles
   ============================================================ */

.dashboard-wrapper { padding-top: calc(var(--nav-height) + var(--space-8)); padding-bottom: var(--space-20); }
.dashboard-wrapper.is-auth-hidden,
.account-auth-shell.is-auth-hidden { display: none; }

.account-auth-shell {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-20);
}
.account-auth-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.8fr);
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--clr-border);
}
.account-auth-copy h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: var(--space-3) 0 var(--space-4);
}
.account-auth-copy p { max-width: 34rem; }
.account-auth-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.account-auth-point {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: #ffffff;
  font-size: var(--text-sm);
  color: var(--clr-text-2);
}
.account-auth-panel {
  padding: var(--space-5);
  border: 1px solid var(--clr-border);
  background: #ffffff;
}
.account-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.account-auth-tab {
  padding: 0.8rem 1rem;
  border: 1px solid var(--clr-border);
  background: #ffffff;
  color: var(--clr-text-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.account-auth-tab.active {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}
.account-auth-form {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}
.account-auth-form.active { display: flex; }
.dashboard-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8); align-items: start; }

/* ── Sidebar ── */
.dashboard-sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4); }
.user-profile-card { padding: var(--space-5); border: 1px solid var(--clr-border-2); display: flex; flex-direction: column; gap: var(--space-3); }
.user-avatar {
  width: 60px; height: 60px;
  background: var(--grad-primary);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); font-weight: 800; color: #fff;
  letter-spacing: 0.05em;
}
.user-info h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: 2px; }
.user-badges { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.dash-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--clr-text-2);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  width: 100%;
}
.dash-nav-item:hover { background: #f1f1f1; color: #111111; }
.dash-nav-item.active { background: #111111; color: #ffffff; }
.dash-nav-item svg { flex-shrink: 0; }
.dash-nav-badge { margin-left: auto; background: var(--clr-primary); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); }
.dash-sidebar-footer { margin-top: auto; }
.rewards-card { padding: var(--space-4); background: rgba(255,255,255,0.02); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); }
.rewards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.rewards-points { margin-bottom: var(--space-2); }
.rewards-bar-bg { height: 6px; background: rgba(255,255,255,0.06); border-radius: var(--radius-full); overflow: hidden; }
.rewards-bar-fill { height: 100%; background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent)); border-radius: var(--radius-full); }

/* ── Main Content ── */
.dashboard-main { min-width: 0; }
.dash-section { display: none; }
.dash-section.active { display: flex; flex-direction: column; gap: var(--space-6); animation: fade-in 0.3s ease; }
.dash-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.dash-section-header h1 { font-size: var(--text-2xl); font-weight: 800; }
.dash-section-header p { margin-top: 2px; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat-card { padding: var(--space-5); border: 1px solid var(--clr-border); display: flex; flex-direction: column; gap: var(--space-3); }
.stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.stat-icon.blue { background: rgba(10,79,255,0.12); color: var(--clr-primary); }
.stat-icon.green { background: rgba(0,229,160,0.1); color: var(--clr-success); }
.stat-icon.purple { background: rgba(123,47,255,0.12); color: #b088ff; }
.stat-icon.cyan { background: rgba(0,212,255,0.1); color: var(--clr-accent); }
.stat-value { font-size: var(--text-2xl); font-weight: 800; }
.stat-label { font-size: var(--text-xs); color: var(--clr-text-2); }

/* Dash Cards */
.dash-card { padding: var(--space-5); border: 1px solid var(--clr-border); }
.dash-card h3 { font-size: var(--text-base); font-weight: 700; }
.dash-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.dash-card-header h3 { margin: 0; }
.dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Mini product list */
.mini-product-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mini-product { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--clr-border); font-size: var(--text-sm); }
.mini-product:last-child { border-bottom: none; }
.mini-product-price { display: flex; align-items: center; font-weight: 600; }

/* Orders Table */
.orders-table-wrapper { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.orders-table th { padding: var(--space-2) var(--space-3); text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-2); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--clr-border); }
.orders-table td { padding: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; }
.orders-table tr:hover td { background: rgba(255,255,255,0.02); }

.admin-order-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.admin-order-stack {
  gap: 0.25rem;
}

.admin-order-primary {
  gap: 0.2rem;
}

.admin-order-number {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--clr-text);
}

.admin-order-customer,
.admin-order-contact-main {
  font-weight: 600;
  color: var(--clr-text);
  word-break: break-word;
}

.admin-order-meta {
  font-size: var(--text-xs);
  color: var(--clr-text-2);
  line-height: 1.45;
  word-break: break-word;
}

.admin-order-address {
  max-width: 220px;
}

.admin-order-money strong {
  font-size: var(--text-base);
}

.admin-order-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 320px;
}

.admin-users-table .order-item-tag {
  background: #ffffff;
  border-color: rgba(17,17,17,0.1);
  line-height: 1.4;
}

/* Order Status Badges */
.order-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.order-status.processing { background: rgba(255,184,48,0.12); color: var(--clr-warning); border: 1px solid rgba(255,184,48,0.2); }
.order-status.shipped { background: rgba(0,212,255,0.1); color: var(--clr-accent); border: 1px solid rgba(0,212,255,0.2); }
.order-status.delivered { background: rgba(0,229,160,0.1); color: var(--clr-success); border: 1px solid rgba(0,229,160,0.2); }
.order-status.cancelled { background: rgba(255,77,109,0.1); color: var(--clr-danger); border: 1px solid rgba(255,77,109,0.2); }

/* Order Cards */
.orders-list { display: flex; flex-direction: column; gap: var(--space-4); }
.order-card { padding: var(--space-5); border: 1px solid var(--clr-border); display: flex; flex-direction: column; gap: var(--space-4); }
.order-card-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.order-items-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.order-item-tag { padding: 3px var(--space-3); background: rgba(255,255,255,0.04); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--clr-text-2); }
.order-card-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Tracking Bar */
.tracking-bar { display: flex; align-items: center; padding: var(--space-4) 0; }
.track-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); white-space: nowrap; }
.track-step span { font-size: 0.65rem; color: var(--clr-text-3); }
.track-dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); border: 2px solid var(--clr-border); }
.track-step.done .track-dot { background: var(--clr-success); border-color: var(--clr-success); }
.track-step.active .track-dot { background: var(--clr-primary); border-color: var(--clr-primary); box-shadow: 0 0 8px var(--clr-primary); }
.track-step.done span, .track-step.active span { color: var(--clr-text-2); }
.track-line { flex: 1; height: 2px; background: rgba(255,255,255,0.06); }
.track-line.done { background: var(--clr-success); }
.track-line.active { background: linear-gradient(90deg, var(--clr-success), rgba(255,255,255,0.06)); }

/* Section Filters */
.section-filters { display: flex; gap: var(--space-2); }
.filter-pill {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  color: var(--clr-text-2);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-pill:hover { background: #f1f1f1; border-color: #d8d8d8; color: #111111; }
.filter-pill.active { background: #111111; border-color: #111111; color: #ffffff; }

/* Saved Grid */
.saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.saved-card { padding: var(--space-5); border: 1px solid var(--clr-border); }
.saved-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.saved-card h4 { font-size: var(--text-base); font-weight: 700; margin-bottom: 4px; }

/* COA Library */
.coa-list { display: flex; flex-direction: column; gap: var(--space-3); }
.coa-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--clr-border); }
.coa-icon { color: var(--clr-accent); flex-shrink: 0; }
.coa-info { flex: 1; }
.coa-name { font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px; }
.coa-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.settings-grid .dash-card { padding: var(--space-6); }
.settings-grid h3 { margin-bottom: 0; }
.settings-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.input-group { display: flex; flex-direction: column; gap: var(--space-1); }
.input-label { font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-2); }
.notif-list { display: flex; flex-direction: column; gap: var(--space-1); }
.notif-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; gap: var(--space-4); }
.notif-row:last-child { border-bottom: none; }
.notif-row span { font-size: var(--text-sm); font-weight: 500; }
.notif-row input { width: 40px; height: 22px; accent-color: var(--clr-primary); cursor: pointer; }

.profile-detail-list,
.profile-status-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-detail-row,
.profile-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--clr-border);
}

.profile-detail-row:last-child,
.profile-status-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.profile-detail-row span,
.profile-status-row span {
  color: var(--clr-text-2);
  font-size: var(--text-sm);
}

.profile-detail-row strong,
.profile-status-row strong {
  text-align: right;
  font-size: var(--text-sm);
}

.quick-actions-grid,
.saved-suggestions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.empty-state-card {
  padding: var(--space-6);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}

.empty-state-card h3 {
  margin-bottom: var(--space-2);
}

.saved-items-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

.saved-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.saved-item-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  background: #ffffff;
  color: var(--clr-text);
}

.saved-item-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--clr-text-2);
  font-size: 1rem;
  line-height: 1;
}

.saved-item-chip button:hover {
  color: var(--clr-danger);
}

.is-admin-only {
  display: none;
}

.is-admin-visible {
  display: block;
}

button.is-admin-visible {
  display: flex;
}

.admin-users-table td select {
  min-width: 120px;
}

.admin-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.admin-user-delete-btn {
  border-color: rgba(180, 35, 24, 0.18);
  color: #b42318;
}

.admin-user-delete-btn:hover:not(:disabled) {
  background: rgba(180, 35, 24, 0.08);
  color: #8f1d14;
}

.admin-user-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-users-table-wrapper {
  overflow-x: auto;
}

.admin-notification-header {
  margin-bottom: var(--space-4);
}

.admin-notification-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-notification-textarea {
  min-height: 140px;
  resize: vertical;
}

.admin-notification-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Cart */
.cart-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--clr-border); }
.cart-item h4 { font-size: var(--text-sm); font-weight: 600; }
.cart-item-info { display: flex; flex-direction: column; gap: 2px; }
.cart-item-price { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.cart-totals { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.cart-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--clr-text-2); }
.cart-total { font-weight: 700; font-size: var(--text-base); color: var(--clr-text); padding-top: var(--space-3); border-top: 1px solid var(--clr-border); margin-top: var(--space-2); }

/* Responsive */
@media (max-width: 1100px) {
  .account-auth-card { grid-template-columns: 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid [style*="grid-column:1/-1"] { grid-column: auto; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .saved-grid { grid-template-columns: 1fr; }
  .dash-two-col { grid-template-columns: 1fr; }
  .profile-inline-form { grid-template-columns: 1fr; }
  .admin-notification-actions { align-items: stretch; }
}