/* ============================================
   MEMBER DASHBOARD — RTN Point System
   ============================================ */

/* ---------- Dashboard Layout ---------- */
.dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

/* ---------- Sidebar ---------- */
.dashboard-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-lg));
}

.dash-user-info {
  text-align: center;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-lg);
}

.dash-avatar {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--color-accent), #ff8c00);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--color-white); font-weight: 700;
  margin: 0 auto var(--spacing-md);
}

.dash-user-name {
  font-size: var(--font-size-base); font-weight: 700;
  color: var(--color-primary); margin-bottom: 2px;
}

.dash-user-email {
  font-size: var(--font-size-xs); color: var(--color-gray-400);
}

.dash-menu { display: flex; flex-direction: column; gap: 4px; }

.dash-menu a {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-gray-600); transition: all var(--transition-fast);
}

.dash-menu a:hover { background: var(--color-gray-100); color: var(--color-primary); }
.dash-menu a.active { background: var(--color-accent-light); color: var(--color-primary); font-weight: 600; }
.dash-menu-icon { font-size: 18px; width: 24px; text-align: center; }

/* ---------- Point Hero Card ---------- */
.point-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.point-hero::before {
  content: '';
  position: absolute; top: -40%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,185,50,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.point-hero-label {
  font-size: var(--font-size-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  opacity: 0.6; margin-bottom: var(--spacing-sm);
}

.point-hero-balance {
  font-size: 3rem; font-weight: 900;
  line-height: 1; margin-bottom: var(--spacing-xs);
  color: var(--color-accent);
}

.point-hero-balance small {
  font-size: var(--font-size-lg); font-weight: 600;
  opacity: 0.7; margin-left: 4px;
}

.point-hero-value {
  font-size: var(--font-size-sm); opacity: 0.6;
  margin-bottom: var(--spacing-lg);
}

.point-hero-stats {
  display: flex; gap: var(--spacing-xl);
  position: relative; z-index: 1;
}

.point-stat {
  display: flex; flex-direction: column; gap: 2px;
}

.point-stat-label {
  font-size: var(--font-size-xs); opacity: 0.5;
}

.point-stat-value {
  font-size: var(--font-size-lg); font-weight: 700;
}

/* ---------- Info Cards ---------- */
.point-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.point-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.point-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.point-info-icon {
  width: 48px; height: 48px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto var(--spacing-sm);
}

.point-info-card h4 {
  font-size: var(--font-size-sm); font-weight: 700;
  color: var(--color-primary); margin-bottom: 4px;
}

.point-info-card p {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500); line-height: 1.5;
}

/* ---------- Rules Table ---------- */
.point-rules {
  margin-top: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.point-rules-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm); font-weight: 700;
  display: flex; align-items: center; gap: var(--spacing-sm);
}

.point-rules-table {
  width: 100%; border-collapse: collapse;
}

.point-rules-table th {
  background: var(--color-gray-50);
  padding: 12px 16px; font-size: var(--font-size-xs);
  font-weight: 600; color: var(--color-gray-600);
  text-align: left; border-bottom: 1px solid var(--color-gray-200);
}

.point-rules-table td {
  padding: 14px 16px; font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
}

.point-rules-table tr:last-child td { border-bottom: none; }

.point-rules-table .tier-badge {
  display: inline-flex; padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: 600;
}

.tier-1 { background: #dbeafe; color: #1d4ed8; }
.tier-2 { background: #fef3c7; color: #b45309; }
.tier-3 { background: #dcfce7; color: #15803d; }

/* ---------- History ---------- */
.point-history {
  margin-top: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.point-history-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex; justify-content: space-between; align-items: center;
}

.point-history-header h3 {
  font-size: var(--font-size-base); font-weight: 700;
  color: var(--color-primary);
}

.point-history-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition-fast);
}

.point-history-item:hover { background: var(--color-gray-50); }
.point-history-item:last-child { border-bottom: none; }

.point-history-info { display: flex; flex-direction: column; gap: 2px; }
.point-history-desc { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-700); }
.point-history-date { font-size: var(--font-size-xs); color: var(--color-gray-400); }

.point-history-amount {
  font-size: var(--font-size-sm); font-weight: 700;
}

.point-history-amount.earn { color: var(--color-success); }
.point-history-amount.used { color: var(--color-danger); }

/* ---------- Checkout Point Section ---------- */
.checkout-points {
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  color: var(--color-white);
  margin-bottom: var(--spacing-lg);
}

.checkout-points-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--spacing-md);
}

.checkout-points-header h4 {
  font-size: var(--font-size-sm); font-weight: 700;
  display: flex; align-items: center; gap: var(--spacing-sm);
}

.checkout-points-balance {
  font-size: var(--font-size-sm); opacity: 0.7;
}

.checkout-points-balance strong {
  color: var(--color-accent); opacity: 1; font-size: var(--font-size-base);
}

.checkout-points-input {
  display: flex; gap: var(--spacing-sm); align-items: center;
}

.checkout-points-input input {
  flex: 1; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  font-size: var(--font-size-sm); font-weight: 600;
}

.checkout-points-input input::placeholder { color: rgba(255,255,255,0.4); }
.checkout-points-input input:focus { outline: none; border-color: var(--color-accent); }

.checkout-points-apply {
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-primary);
  border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 700;
  cursor: pointer; transition: all var(--transition-fast);
  white-space: nowrap;
}

.checkout-points-apply:hover { background: var(--color-accent-hover); }

.checkout-points-info {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  opacity: 0.5;
}

.checkout-points-discount {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Tab System ---------- */
.dash-tab { display: none; }
.dash-tab.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Profile Card ---------- */
.profile-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.profile-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-200);
}

.profile-card-header h3 {
  font-size: var(--font-size-base); font-weight: 700;
  color: var(--color-primary);
}

.btn-edit-profile {
  padding: 6px 16px; border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md); background: var(--color-white);
  font-size: var(--font-size-xs); font-weight: 600;
  color: var(--color-gray-600); cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-edit-profile:hover {
  background: var(--color-gray-100); color: var(--color-primary);
}

.profile-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.profile-field label {
  display: block; font-size: var(--font-size-xs);
  font-weight: 600; color: var(--color-gray-400);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}

.profile-field span {
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-gray-700);
}

.profile-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.profile-actions {
  display: flex; gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* ---------- Order History ---------- */
.orders-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--spacing-lg);
}

.orders-header h3 {
  font-size: var(--font-size-lg); font-weight: 700;
  color: var(--color-primary);
}

.orders-count {
  font-size: var(--font-size-sm); color: var(--color-gray-400);
  font-weight: 500;
}

.orders-empty {
  text-align: center; padding: 60px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--color-gray-400);
}

.order-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  transition: box-shadow var(--transition-fast);
}

.order-card:hover { box-shadow: var(--shadow-md); }

.order-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.order-number {
  font-size: var(--font-size-sm); font-weight: 700;
  color: var(--color-primary);  margin-right: var(--spacing-sm);
}

.order-date {
  font-size: var(--font-size-xs); color: var(--color-gray-400);
}

.order-status {
  display: inline-flex; padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: 600;
}

.order-card-body { padding: var(--spacing-md) var(--spacing-lg); }

.order-product {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 6px 0;
  font-size: var(--font-size-sm);
}

.order-product-emoji { font-size: 20px; width: 28px; text-align: center; }
.order-product-name { flex: 1; font-weight: 500; color: var(--color-gray-700); }
.order-product-qty { color: var(--color-gray-400); font-size: var(--font-size-xs); }
.order-product-price { font-weight: 600; color: var(--color-primary); min-width: 80px; text-align: right; }

.order-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.order-payment { font-size: var(--font-size-xs); color: var(--color-gray-400); }
.order-total { font-size: var(--font-size-sm); color: var(--color-primary); }

.order-points-earned {
  padding: 8px 20px; font-size: var(--font-size-xs);
  color: #15803d; background: #dcfce7;
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .dashboard-layout { grid-template-columns: 1fr; }

  .dashboard-sidebar {
    position: static;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }

  .dash-user-info {
    grid-column: 1 / -1;
    padding-bottom: var(--spacing-md);
  }

  .dash-menu {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap;
  }

  .dash-menu a { flex: 1; min-width: 100px; justify-content: center; font-size: var(--font-size-xs); }

  .point-info-grid { grid-template-columns: 1fr; }
  .point-hero-balance { font-size: 2.25rem; }
  .point-hero-stats { flex-direction: column; gap: var(--spacing-sm); }
  .profile-grid, .profile-edit-grid { grid-template-columns: 1fr; }
  .order-card-header { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
}