/* Membership specific styling - clean white surface and simple layout */
:root {
  --membership-card-radius: 12px;
}

/* Ensure membership pages feel clean and minimal */
.membership-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--membership-card-radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.auth-card, .signup-card {
  background: var(--surface);
  border-radius: var(--membership-card-radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
}

.auth-card .card-header, .signup-card .card-header {
  text-align: center;
  margin-bottom: 1rem;
}

.logo-img { border-radius: 50%; }

.section-title { color: var(--text-primary); font-weight: 600; }
.section-subtitle { color: var(--text-muted); }

.form-control, .modern-input {
  background: var(--surface-variant);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
}

.btn-block { display:block; width:100%; }

/* Card footer quick links */
.quick-links a { color: var(--text-secondary); text-decoration: none; margin-right: 1rem; }

/* Small utilities for better spacing */
.mb-sm { margin-bottom: 0.5rem; }

/* Theme aware overrides for minimal look */
[data-theme="dark"] .auth-card, [data-theme="dark"] .signup-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 6px 24px rgba(2,6,23,0.6);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .auth-card, .signup-card { padding: 1rem; margin: 1rem; }
}

/* Improve dashboard responsiveness */
@media (max-width: 992px) {
  .dashboard-sidebar { width: 100%; position: relative; margin-bottom: 1rem; }
  .dashboard-main { margin-left: 0; }
  .stat-card { margin-bottom: 1rem; }
}

/* Additional consolidated membership styles (extracted from templates) */

/* Signup specific */
.signup-container { background-color: var(--background); min-height: 100vh; padding: 2rem 0; }
.signup-card { background-color: var(--surface); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.08); }
.step-circle { width:50px; height:50px; border-radius:50%; background:var(--surface-variant); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; }
.step.active .step-circle { background:var(--primary-500); border-color:var(--primary-500); color:#fff; }
.form-section { display:none; }
.form-section.active { display:block; }

/* Login specific */
.login-container { min-height:100vh; background:var(--background); }
.logo-circle { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.tab-nav { display:flex; background: rgba(255,255,255,0.5); border-radius:16px; padding:4px; }
.tab-btn { flex:1; padding:12px 20px; border-radius:12px; }
.modern-input { background:var(--surface); border:2px solid var(--border); border-radius:8px; padding:12px 16px; }

/* Tabs & form visibility (ensure forms show) */
.tab-content { display: none; opacity: 0; transform: translateY(20px); transition: all 0.25s ease; }
.tab-content.active { display: block; opacity: 1; transform: translateY(0); }

.form-section { display: none; }
.form-section.active { display: block; }

/* Dashboard base tweaks */
.dashboard-container { display:flex; min-height:100vh; background:var(--background); }
.dashboard-sidebar { width:280px; background:var(--surface); border-right:1px solid var(--border); }
.dashboard-main { margin-left:280px; flex:1; }

/* Stats and dashboard cards */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.dashboard-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }

/* Notifications and list items */
.notification-item { background:var(--surface-variant); border-radius:8px; padding:0.75rem; border:1px solid var(--border); }

/* Profile card */
.profile-card { display:flex; gap:1rem; align-items:center; }
.avatar-circle { width:56px; height:56px; border-radius:50%; background:var(--surface-variant); display:flex; align-items:center; justify-content:center; }

/* Small helpers moved from templates */
.btn-gradient { background:var(--primary-600); color:#fff; border:none; }
.gradient-text { background:linear-gradient(135deg,var(--primary-600),var(--primary-700)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color: transparent; }

/* Off-canvas sidebar for mobile */
#dashboardSidebar {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Default: on small screens the sidebar should be hidden off-canvas */
@media (max-width: 767.98px) {
  #dashboardSidebar {
    width: 250px;
    transform: translateX(-110%);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1100;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  }
  #dashboardSidebar.sidebar-open {
    transform: translateX(0);
  }
  /* Overlay when sidebar is open */
  #sidebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
  }
  body.no-scroll {
    overflow: hidden;
  }
  /* Ensure main content is scrollable under overlay if sidebar closed */
  .main-content {
    padding-top: 1rem;
  }
}