/* ═══ Society Management PWA — Page Styles ═══ */

/* ═══ LOGIN PAGE ═══ */
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: var(--sp-4);
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(108,92,231,0.15) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,206,201,0.1) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  pointer-events: none;
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-2xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
}
.login-logo {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); margin-bottom: var(--sp-8);
}
.login-logo-icon {
  width: 48px; height: 48px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  box-shadow: var(--shadow-glow-primary);
}
.login-logo-text {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.login-subtitle {
  text-align: center; font-size: var(--fs-base);
  color: var(--text-tertiary); margin-bottom: var(--sp-8);
}
.login-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.login-form .form-input { height: 48px; font-size: var(--fs-md); }
.login-form .btn { height: 48px; font-size: var(--fs-md); width: 100%; }
.login-error {
  background: var(--danger-bg); color: var(--danger);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  font-size: var(--fs-sm); display: none;
}
.login-error.show { display: block; }

/* ═══ DASHBOARD ═══ */
.page-header {
  margin-bottom: var(--sp-6);
}
.page-header h1 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--text-primary); margin-bottom: var(--sp-1);
}
.page-header p {
  font-size: var(--fs-base); color: var(--text-tertiary);
}

/* Dashboard Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; align-items: flex-start; gap: var(--sp-4);
  transition: all var(--duration-normal) var(--ease-out);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.stat-icon.income { background: var(--success-bg); }
.stat-icon.expense { background: var(--danger-bg); }
.stat-icon.balance { background: rgba(108,92,231,0.12); }
.stat-icon.residents { background: var(--info-bg); }
.stat-info { flex: 1; }
.stat-label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-semibold); }
.stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-top: var(--sp-1); }
.stat-change { font-size: var(--fs-xs); margin-top: var(--sp-1); display: flex; align-items: center; gap: 4px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* Billing Banner */
.billing-banner {
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border-primary);
}
.billing-banner.paid { background: var(--success-bg); border-color: rgba(0,184,148,0.2); }
.billing-banner.due { background: var(--info-bg); border-color: rgba(116,185,255,0.2); }
.billing-banner.overdue { background: var(--danger-bg); border-color: rgba(255,107,107,0.2); animation: pulse-glow 2s ease-in-out infinite; }
.billing-icon { font-size: 28px; flex-shrink: 0; }
.billing-content { flex: 1; }
.billing-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.billing-desc { font-size: var(--fs-sm); opacity: 0.8; margin-top: 2px; }
.billing-banner.paid .billing-title { color: var(--success); }
.billing-banner.due .billing-title { color: var(--info); }
.billing-banner.overdue .billing-title { color: var(--danger); }

/* Dashboard Sections */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.section-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.section-link { font-size: var(--fs-sm); color: var(--brand-primary); cursor: pointer; font-weight: var(--fw-medium); }
.section-link:hover { text-decoration: underline; }

/* Chart Container */
.chart-container {
  position: relative; height: 240px;
  display: flex; align-items: center; justify-content: center;
}

/* Recent List */
.recent-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.recent-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}
.recent-item:hover { background: var(--bg-hover); }
.recent-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff;
  flex-shrink: 0;
}
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.recent-detail { font-size: var(--fs-xs); color: var(--text-tertiary); }
.recent-amount { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.recent-amount.income { color: var(--success); }
.recent-amount.expense { color: var(--danger); }

/* Notice Card */
.notice-card {
  padding: var(--sp-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-elevated);
  margin-bottom: var(--sp-3);
}
.notice-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--sp-1); }
.notice-body { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.notice-meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ═══ PAYMENTS / EXPENSES PAGE ═══ */
.page-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.filter-row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.filter-row .form-select { width: auto; min-width: 140px; }
.action-buttons { display: flex; gap: var(--sp-2); }

/* ═══ RESIDENTS PAGE ═══ */
.resident-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.resident-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: all var(--duration-normal) var(--ease-out);
}
.resident-card:hover { box-shadow: var(--shadow-md); }
.resident-card-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.resident-card-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--gradient-primary); display: flex;
  align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff;
}
.resident-card-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); }
.resident-card-flat { font-size: var(--fs-sm); color: var(--text-tertiary); }
.resident-card-details { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.resident-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ═══ SETTINGS PAGE ═══ */
.settings-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.settings-section-title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: var(--text-primary); margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-primary);
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-secondary);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: var(--fs-base); color: var(--text-primary); }
.settings-desc { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: var(--sp-1); }

/* Toggle Switch */
.toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0; background: var(--bg-tertiary);
  border-radius: var(--radius-full); transition: background var(--duration-fast);
}
.toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: #fff; transition: transform var(--duration-fast) var(--ease-spring);
}
.toggle input:checked + .toggle-track { background: var(--brand-primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .page-actions { flex-direction: column; align-items: stretch; }
  .filter-row { width: 100%; }
  .filter-row .form-select { flex: 1; min-width: auto; }
  .action-buttons { justify-content: flex-end; }
  .login-card { padding: var(--sp-6); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .resident-grid { grid-template-columns: 1fr; }
}