/* ====================================
   Member Portal Theme System
   Default: light mode. Toggle to dark with body.dark-mode
   ==================================== */

/* Light mode defaults (member portal) */
body.members-portal {
  --mp-bg: #f5f6fa;
  --mp-bg-card: #ffffff;
  --mp-bg-card-hover: #f9fafb;
  --mp-text: #111827;
  --mp-text-secondary: #374151;
  --mp-text-muted: #6b7280;
  --mp-border: #e5e7eb;
  --mp-accent: #11771a;
  --mp-accent-light: #dcfce7;
  --mp-accent-hover: #0d5f14;
  --mp-shadow: rgba(0, 0, 0, 0.08);
  --mp-breadcrumb-bg: whitesmoke;
  --mp-input-bg: #ffffff;
  --mp-footer-bg: #343b40;
  --mp-footer-text: #ffffff;
}

/* Dark mode overrides */
body.members-portal.dark-mode {
  --mp-bg: #1a1b1e;
  --mp-bg-card: #2a2c30;
  --mp-bg-card-hover: #343638;
  --mp-text: #ffffff;
  --mp-text-secondary: #d7d7d8;
  --mp-text-muted: #9ca3af;
  --mp-border: #3a3c40;
  --mp-accent: #7bdc9f;
  --mp-accent-light: rgba(123, 220, 159, 0.15);
  --mp-accent-hover: #b6ffd4;
  --mp-shadow: rgba(0, 0, 0, 0.3);
  --mp-breadcrumb-bg: #232528;
  --mp-input-bg: #232528;
  --mp-footer-bg: #232528;
  --mp-footer-text: #d7d7d8;
}

/* ====================================
   Page Background
   ==================================== */

body.members-portal {
  background-color: var(--mp-bg);
  color: var(--mp-text-secondary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ====================================
   Header / Nav Overrides
   ==================================== */

body.members-portal.dark-mode #header,
body.members-portal.dark-mode #header.header-transparent {
  background: rgba(26, 27, 30, 0.97) !important;
}

body.members-portal.dark-mode #navbar ul li a {
  color: #d7d7d8;
}

body.members-portal.dark-mode #navbar ul li a:hover,
body.members-portal.dark-mode #navbar ul li a.active {
  color: #7bdc9f;
}

body.members-portal.dark-mode #navbar .dropdown ul {
  background: #2a2c30;
  border-color: #3a3c40;
}

body.members-portal.dark-mode #navbar .dropdown ul li a {
  color: #d7d7d8;
}

body.members-portal.dark-mode #navbar .dropdown ul li a:hover {
  background: #343638;
  color: #7bdc9f;
}

/* ====================================
   Breadcrumbs
   ==================================== */

body.members-portal .breadcrumbs {
  background-color: var(--mp-breadcrumb-bg);
  transition: background-color 0.3s ease;
}

body.members-portal.dark-mode .breadcrumbs {
  border-bottom: 1px solid var(--mp-border);
}

body.members-portal .breadcrumbs h2 {
  color: var(--mp-text);
}

body.members-portal .breadcrumbs ol li,
body.members-portal .breadcrumbs ol li a {
  color: var(--mp-text-muted);
}

body.members-portal .breadcrumbs ol li a:hover {
  color: var(--mp-accent);
}

/* ====================================
   Account Actions Nav
   ==================================== */

body.members-portal .account-actions a {
  color: var(--mp-accent);
}

body.members-portal .account-actions a + a {
  border-left-color: var(--mp-border);
}

body.members-portal .account-actions .triangle {
  color: var(--mp-accent);
}

body.members-portal .account-actions a:hover .triangle {
  color: var(--mp-accent-hover);
}

/* ====================================
   Content Blocks & Cards
   ==================================== */

body.members-portal .content-block {
  background-color: var(--mp-bg-card);
  border: 1px solid var(--mp-border);
  color: var(--mp-text-secondary);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Dashboard cards */
body.members-portal .dash-card {
  background: var(--mp-bg-card) !important;
  border-color: var(--mp-border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.members-portal .dash-card h4 {
  color: var(--mp-text) !important;
}

body.members-portal .dash-card table td {
  color: var(--mp-text-secondary) !important;
}

body.members-portal .dash-card table td:first-child {
  color: var(--mp-text-muted) !important;
}

/* Dashboard action cards */
body.members-portal .dash-action-card {
  background: var(--mp-bg-card) !important;
  border-color: var(--mp-border) !important;
  color: var(--mp-text-secondary) !important;
  transition: all 0.2s ease;
}

body.members-portal .dash-action-card:hover {
  border-color: var(--mp-accent) !important;
  box-shadow: 0 2px 12px rgba(17, 119, 26, 0.12);
  color: var(--mp-accent) !important;
}

body.members-portal .dash-action-card i {
  color: var(--mp-accent) !important;
}

/* Dashboard status labels */
body.members-portal .dash-stat {
  color: var(--mp-text-muted) !important;
}

body.members-portal .dash-stat strong {
  color: var(--mp-text) !important;
}

/* ====================================
   Family Table
   ==================================== */

body.members-portal .family-table th {
  color: var(--mp-text-muted);
  border-bottom-color: var(--mp-border);
}

body.members-portal .family-table td {
  border-bottom-color: var(--mp-border);
  color: var(--mp-text-secondary);
}

body.members-portal .family-info {
  background: var(--mp-accent-light);
  border-color: var(--mp-accent);
  color: var(--mp-text-secondary);
}

body.members-portal.dark-mode .family-info {
  color: #7bdc9f;
}

body.members-portal .family-empty {
  color: var(--mp-text-secondary);
}

body.members-portal .family-empty i {
  color: var(--mp-text-muted) !important;
}

body.members-portal .family-empty h3 {
  color: var(--mp-text);
}

/* Dashboard family table */
body.members-portal .dash-family-table th {
  color: var(--mp-text-muted) !important;
}

body.members-portal .dash-family-table td {
  border-bottom-color: var(--mp-border) !important;
  color: var(--mp-text-secondary) !important;
}

/* ====================================
   Status Badges (keep colors in both modes)
   ==================================== */

body.members-portal.dark-mode .dash-status-active {
  background: rgba(22, 101, 52, 0.25);
  color: #4ade80;
}

body.members-portal.dark-mode .dash-status-expiring {
  background: rgba(146, 64, 14, 0.25);
  color: #fbbf24;
}

body.members-portal.dark-mode .dash-status-expired {
  background: rgba(153, 27, 27, 0.25);
  color: #f87171;
}

body.members-portal.dark-mode .status-active {
  background: rgba(22, 101, 52, 0.25);
  color: #4ade80;
}

body.members-portal.dark-mode .status-expiring {
  background: rgba(146, 64, 14, 0.25);
  color: #fbbf24;
}

body.members-portal.dark-mode .status-expired {
  background: rgba(153, 27, 27, 0.25);
  color: #f87171;
}

body.members-portal.dark-mode .slot-badge {
  background: rgba(55, 48, 163, 0.25);
  color: #818cf8;
}

body.members-portal.dark-mode .slot-free {
  background: rgba(22, 101, 52, 0.25);
  color: #4ade80;
}

/* ====================================
   Forms (member edit, family edit, etc.)
   ==================================== */

body.members-portal .member-form-grid .form-field label {
  color: var(--mp-text-secondary) !important;
}

body.members-portal .member-form-grid .form-field input,
body.members-portal .member-form-grid .form-field select {
  background-color: var(--mp-input-bg);
  border: 1px solid var(--mp-border);
  color: var(--mp-text);
  padding: 10px 12px;
  border-radius: 6px;
  transition: border-color 0.2s ease, background-color 0.3s ease;
}

body.members-portal .member-form-grid .form-field input:focus,
body.members-portal .member-form-grid .form-field select:focus {
  border-color: var(--mp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 119, 26, 0.12);
}

body.members-portal .member-form-section h4 {
  color: var(--mp-accent) !important;
}

body.members-portal .inline-note {
  color: var(--mp-text-muted) !important;
}

/* Generic form inputs on member pages */
body.members-portal .form input,
body.members-portal .form select,
body.members-portal .form textarea {
  background-color: var(--mp-input-bg);
  color: var(--mp-text);
  border-color: var(--mp-border);
}

body.members-portal .form input:focus,
body.members-portal .form select:focus,
body.members-portal .form textarea:focus {
  border-color: var(--mp-accent);
}

/* ====================================
   Profile Button (green action button)
   ==================================== */

body.members-portal .profile-btn,
body.members-portal a.profile-btn {
  background: var(--mp-accent);
  color: #ffffff !important;
  transition: all 0.2s ease;
}

body.members-portal .profile-btn:hover,
body.members-portal a.profile-btn:hover {
  background: var(--mp-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--mp-shadow);
}

body.members-portal.dark-mode .profile-btn,
body.members-portal.dark-mode a.profile-btn {
  color: #1a1b1e !important;
}

/* ====================================
   Messages
   ==================================== */

body.members-portal .msg.success {
  background-color: var(--mp-accent-light);
  border: 1px solid var(--mp-accent);
  color: var(--mp-accent);
}

body.members-portal.dark-mode .msg.success {
  background-color: rgba(123, 220, 159, 0.1);
  border-color: rgba(123, 220, 159, 0.3);
  color: #4ade80;
}

body.members-portal.dark-mode .msg.error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* ====================================
   Payment History Table
   ==================================== */

body.members-portal .payment-table th {
  color: var(--mp-text-muted);
  border-bottom-color: var(--mp-border);
}

body.members-portal .payment-table td {
  border-bottom-color: var(--mp-border);
  color: var(--mp-text-secondary);
}

body.members-portal.dark-mode .payment-amount {
  color: #4ade80 !important;
}

body.members-portal .payment-empty {
  color: var(--mp-text-muted);
}

body.members-portal .payment-empty h3 {
  color: var(--mp-text);
}

/* ====================================
   Newsletter CTA (preserve original look in both themes)
   ==================================== */

body.members-portal .newsletter-cta {
  background: linear-gradient(145deg, #1c2028, #222833);
  color: #f5f7fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.members-portal .newsletter-cta h4 {
  color: #ffffff !important;
}

body.members-portal .newsletter-cta .newsletter-eyebrow {
  color: #7cc6ff !important;
}

body.members-portal .newsletter-cta .newsletter-subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ====================================
   Footer
   ==================================== */

body.members-portal.dark-mode #footer {
  background: var(--mp-footer-bg);
  color: var(--mp-footer-text);
}

body.members-portal.dark-mode #footer a {
  color: #9ca3af;
}

body.members-portal.dark-mode #footer a:hover {
  color: #7bdc9f;
}

body.members-portal.dark-mode #footer .social-links a {
  background: #1a1b1e;
  color: #d7d7d8;
}

body.members-portal.dark-mode #footer .social-links a:hover {
  background: #7bdc9f;
  color: #1a1b1e;
}

body.members-portal.dark-mode .footer-top {
  background: rgba(0, 0, 0, 0.15);
}

/* ====================================
   Text Overrides for Dark Mode
   ==================================== */

body.members-portal.dark-mode p,
body.members-portal.dark-mode span,
body.members-portal.dark-mode label,
body.members-portal.dark-mode small,
body.members-portal.dark-mode li,
body.members-portal.dark-mode td,
body.members-portal.dark-mode th {
  color: inherit;
}

body.members-portal h1,
body.members-portal h2,
body.members-portal h3,
body.members-portal h4,
body.members-portal h5 {
  color: var(--mp-text);
}

body.members-portal.dark-mode .inner-page p {
  color: var(--mp-text-secondary);
}

/* ====================================
   Buttons (family pages, etc.)
   ==================================== */

body.members-portal.dark-mode .btn-start-family,
body.members-portal.dark-mode .btn-add-family {
  background: #7bdc9f;
  color: #1a1b1e;
}

body.members-portal.dark-mode .btn-start-family:hover,
body.members-portal.dark-mode .btn-add-family:hover {
  background: #b6ffd4;
  color: #1a1b1e;
}

body.members-portal.dark-mode .btn-remove {
  color: #f87171;
}

/* ====================================
   Form Submit Buttons
   ==================================== */

body.members-portal input[type="submit"] {
  background: var(--mp-accent);
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.members-portal input[type="submit"]:hover {
  background: var(--mp-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--mp-shadow);
}

body.members-portal.dark-mode input[type="submit"] {
  background: #7bdc9f;
  color: #1a1b1e;
}

body.members-portal.dark-mode input[type="submit"]:hover {
  background: #b6ffd4;
}

/* ====================================
   Links
   ==================================== */

body.members-portal.dark-mode a {
  color: #7bdc9f;
}

body.members-portal.dark-mode a:hover {
  color: #b6ffd4;
}

/* Keep nav links styled separately */
body.members-portal.dark-mode .back-to-top {
  background: rgba(123, 220, 159, 0.7);
  color: #1a1b1e;
}

/* ====================================
   Scrollbar (dark mode)
   ==================================== */

body.members-portal.dark-mode::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.members-portal.dark-mode::-webkit-scrollbar-track {
  background: #232528;
}

body.members-portal.dark-mode::-webkit-scrollbar-thumb {
  background: #3a3c40;
  border-radius: 4px;
}

body.members-portal.dark-mode::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ====================================
   Theme Toggle Button
   ==================================== */

.member-theme-toggle {
  position: fixed;
  bottom: 80px;
  left: 20px;
  z-index: 9999;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mp-border);
  background: var(--mp-bg-card);
  color: var(--mp-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px var(--mp-shadow);
  transition: all 0.3s ease;
}

.member-theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px var(--mp-shadow);
  color: var(--mp-accent);
  border-color: var(--mp-accent);
}

.member-theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.member-theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* ====================================
   Disabled Inputs
   ==================================== */

body.members-portal input:disabled,
body.members-portal select:disabled {
  background-color: var(--mp-bg-card-hover) !important;
  color: var(--mp-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ====================================
   Select Dropdown Arrow
   ==================================== */

body.members-portal select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

body.members-portal.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ====================================
   Date Input Dark Mode
   ==================================== */

body.members-portal.dark-mode input[type="date"] {
  color-scheme: dark;
}

/* ====================================
   Login / Register Pages (dark mode)
   ==================================== */

body.members-portal.dark-mode .login,
body.members-portal.dark-mode .register {
  background-color: var(--mp-bg-card);
  box-shadow: 0 0 20px var(--mp-shadow);
}

body.members-portal.dark-mode .login h1,
body.members-portal.dark-mode .register h1 {
  color: var(--mp-text);
  border-bottom-color: var(--mp-border);
}

body.members-portal.dark-mode .login .links a,
body.members-portal.dark-mode .register .links a {
  color: var(--mp-text-muted);
}

body.members-portal.dark-mode .login .links a.active,
body.members-portal.dark-mode .register .links a.active {
  color: #7bdc9f;
  border-bottom-color: #7bdc9f;
}

body.members-portal.dark-mode .login form input[type="password"],
body.members-portal.dark-mode .login form input[type="text"],
body.members-portal.dark-mode .login form input[type="email"],
body.members-portal.dark-mode .register form input[type="password"],
body.members-portal.dark-mode .register form input[type="text"],
body.members-portal.dark-mode .register form input[type="email"] {
  background-color: var(--mp-input-bg);
  border-color: var(--mp-border);
  color: var(--mp-text);
}

body.members-portal.dark-mode .login form input[type="submit"],
body.members-portal.dark-mode .register form input[type="submit"] {
  background-color: #7bdc9f;
  color: #1a1b1e;
}

body.members-portal.dark-mode .login form input[type="submit"]:hover,
body.members-portal.dark-mode .register form input[type="submit"]:hover {
  background-color: #b6ffd4;
}

body.members-portal.dark-mode .login form label,
body.members-portal.dark-mode .register form label {
  background-color: #7bdc9f;
  color: #1a1b1e;
}

/* ====================================
   Nav Cards - Active State
   ==================================== */

.dash-action-card.active {
  border-color: var(--mp-accent, #11771a);
  color: var(--mp-accent, #11771a);
  background: var(--mp-accent-light, #f0fdf4);
}

body.members-portal.dark-mode .dash-action-card.active {
  background: rgba(123, 220, 159, 0.1);
}

/* ====================================
   Nav Cards - Responsive Layout
   ==================================== */

.dash-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.dash-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mp-bg-card, #fff);
  border: 1px solid var(--mp-border, #e5e7eb);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--mp-text-secondary, #374151);
  transition: all 0.15s ease;
}

.dash-action-card:hover {
  border-color: var(--mp-accent, #11771a);
  box-shadow: 0 2px 8px rgba(17, 119, 26, 0.1);
  color: var(--mp-accent, #11771a);
}

.dash-action-card i {
  font-size: 20px;
  color: var(--mp-accent, #11771a);
}

.dash-action-label {
  font-weight: 600;
  font-size: 14px;
}

/* ====================================
   Secondary Button (portal-wide)
   ==================================== */

body.members-portal .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--mp-border, #d1d5db);
  background: var(--mp-bg-card, #fff);
  color: var(--mp-text-secondary, #374151);
  transition: all 0.2s ease;
}

body.members-portal .btn-secondary:hover {
  border-color: var(--mp-accent, #11771a);
  color: var(--mp-accent, #11771a);
}

/* ====================================
   .btn-edit Dark Mode Fix
   ==================================== */

body.members-portal.dark-mode .btn-edit {
  background: #1a6b2d;
  color: #fff;
}

body.members-portal.dark-mode .btn-edit:hover {
  background: #22843a;
  color: #fff;
}

/* ====================================
   Profile Page (.content .block) Dark Mode
   ==================================== */

body.members-portal.dark-mode .content .block {
  background-color: var(--mp-bg-card);
  color: var(--mp-text);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

body.members-portal.dark-mode .content h2 {
  color: var(--mp-text);
  border-bottom-color: var(--mp-border);
}

body.members-portal.dark-mode .content .block table td:first-child {
  color: var(--mp-text-secondary);
}

body.members-portal.dark-mode .content .block table td {
  color: var(--mp-text);
}

body.members-portal.dark-mode .content .block input,
body.members-portal.dark-mode .content .block select,
body.members-portal.dark-mode .content .block textarea {
  background-color: var(--mp-input-bg);
  color: var(--mp-text);
  border-color: var(--mp-border);
}