/* ==========================================================================
   BR Finance — User module UI system
   Scoped to body.user-theme — edit tokens here for site-wide user UI consistency.
   ========================================================================== */

.user-theme {
  --brf-user-primary: #007979;
  --brf-user-primary-dark: #005f5f;
  --brf-user-secondary: #24b1b1;

  --admin-primary: var(--brf-user-primary);
  --admin-primary-dark: var(--brf-user-primary-dark);
  --admin-secondary: var(--brf-user-secondary);
  --admin-ring: 0 0 0 4px rgba(0, 121, 121, 0.12);

  /* Typography scale */
  --ui-page-title-size: 1.35rem;
  --ui-page-lead-size: 0.88rem;
  --ui-panel-title-size: 0.95rem;
  --ui-section-heading-size: 0.78rem;
  --ui-modal-title-size: 1.05rem;
  --ui-label-size: 0.72rem;
  --ui-value-size: 0.9rem;
  --ui-meta-size: 0.76rem;
  --ui-hint-size: 0.8rem;
  --ui-table-head-size: 0.72rem;
  --ui-table-empty-size: 0.88rem;
  --ui-form-label-size: 0.88rem;
  --ui-form-input-size: 0.92rem;
  --ui-form-hint-size: 0.8rem;
  --ui-btn-size: 0.88rem;
  --ui-badge-id-size: 0.62rem;
  --ui-status-badge-size: 0.68rem;
  --ui-line-tight: 1.25;
  --ui-line-normal: 1.35;
  --ui-table-cell-y: 0.7rem;
  --ui-table-cell-x: 0.45rem;

  /* Keep dashboard metric cards aligned with UI scale */
  --metric-label-size: var(--ui-label-size);
  --metric-value-size: var(--ui-value-size);
  --metric-hint-size: var(--ui-meta-size);

  /* Bootstrap — remap default blue primary/info to brand green/teal */
  --bs-primary: var(--brf-user-primary);
  --bs-primary-rgb: 0, 121, 121;
  --bs-link-color: var(--brf-user-primary);
  --bs-link-hover-color: var(--brf-user-primary-dark);
  --bs-link-color-rgb: 0, 121, 121;
  --bs-focus-ring-color: rgba(0, 121, 121, 0.25);
  --bs-info: var(--brf-user-secondary);
  --bs-info-rgb: 36, 177, 177;
  --bs-info-text-emphasis: #005f5f;
  --bs-info-bg-subtle: #e6f5f5;
  --bs-info-border-subtle: #a8d8d8;
}

@media (min-width: 768px) {
  .user-theme {
    --ui-page-title-size: 1.5rem;
    --ui-page-lead-size: 0.92rem;
    --ui-panel-title-size: 1rem;
    --ui-value-size: 0.92rem;
    --ui-badge-id-size: 0.66rem;
    --ui-table-cell-y: 0.85rem;
    --ui-table-cell-x: 0.65rem;
  }
}

html:not([data-theme="dark"]) .user-theme {
  --admin-sidebar-soft: #e6f5f5;
  --admin-sidebar-icon-bg: #d4f0f0;
  --admin-sidebar-icon: var(--brf-user-primary);
}

html:not([data-theme="dark"]) .user-theme .page-icon,
html:not([data-theme="dark"]) .user-theme .section-title i {
  background: #d9f2f2;
  color: var(--brf-user-primary);
}

html:not([data-theme="dark"]) .user-theme .profile-avatar {
  background: #d9f2f2;
  color: var(--brf-user-primary);
}

html[data-theme="dark"] .user-theme {
  --admin-primary: var(--brf-user-secondary);
  --admin-primary-dark: var(--brf-user-primary);
  --admin-ring: 0 0 0 4px rgba(36, 177, 177, 0.18);
}
/* ---- Page headings ---- */
.user-theme .ui-page-title,
.user-theme .page-heading h1 {
  margin-bottom: 0.25rem;
  font-size: var(--ui-page-title-size);
  font-weight: 800;
  line-height: var(--ui-line-tight);
  letter-spacing: 0;
}

.user-theme .ui-page-lead,
.user-theme .page-heading .text-muted {
  margin-bottom: 0;
  font-size: var(--ui-page-lead-size);
  line-height: var(--ui-line-normal);
  color: var(--admin-muted);
}

.user-theme .ui-section-heading,
.user-theme .dashboard-metrics-heading {
  font-size: var(--ui-section-heading-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
}

.user-theme .ui-panel-title,
.user-theme .section-title,
.user-theme .panel-header h2 {
  margin-bottom: 0;
  font-size: var(--ui-panel-title-size);
  font-weight: 700;
  line-height: var(--ui-line-tight);
}

.user-theme .ui-modal-title,
.user-theme .modal-title {
  font-size: var(--ui-modal-title-size);
  font-weight: 700;
  line-height: var(--ui-line-tight);
}

/* ---- Labels, values, meta (tables, modals, metrics) ---- */
.user-theme .ui-label,
.user-theme .make-payment-info-label,
.user-theme .payments-amount-label,
.user-theme .history-amount-label,
.user-theme .history-meta-label,
.user-theme .metric-card .metric-label {
  font-size: var(--ui-label-size);
  font-weight: 700;
  line-height: var(--ui-line-tight);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--admin-muted);
}

.user-theme .ui-value,
.user-theme .make-payment-info-value,
.user-theme .payments-amount-value,
.user-theme .history-amount-value,
.user-theme .dues-amount,
.user-theme .dues-day,
.user-theme .history-installment-date,
.user-theme .metric-card .metric-value {
  font-size: var(--ui-value-size);
  font-weight: 700;
  line-height: var(--ui-line-normal);
}

.user-theme .ui-meta,
.user-theme .payments-date,
.user-theme .dues-date,
.user-theme .history-installment-day,
.user-theme .history-meta-value,
.user-theme .metric-hint,
.user-theme .metric-card .metric-meta {
  font-size: var(--ui-meta-size);
  line-height: var(--ui-line-normal);
  color: var(--admin-muted);
}

.user-theme .ui-hint,
.user-theme .make-payment-upload-hint,
.user-theme .form-text {
  font-size: var(--ui-hint-size);
  line-height: var(--ui-line-normal);
  color: var(--admin-muted);
}

.user-theme .ui-empty,
.user-theme .table td.ui-empty,
.user-theme .table td.text-muted.text-center {
  font-size: var(--ui-table-empty-size);
}

/* ---- Forms ---- */
.user-theme .form-label {
  margin-bottom: 0.35rem;
  font-size: var(--ui-form-label-size);
  font-weight: 600;
  color: var(--admin-text);
}

.user-theme .form-control,
.user-theme .form-select {
  font-size: var(--ui-form-input-size);
}

.user-theme .btn {
  font-size: var(--ui-btn-size);
}

/* ---- Badges ---- */
.user-theme .badge.badge-payment-id {
  font-size: var(--ui-badge-id-size);
  padding: 0.16rem 0.38rem;
  line-height: 1.25;
}

.user-theme .payments-status-stack .badge,
.user-theme .dues-status-stack .badge,
.user-theme .history-status-stack .badge,
.user-theme .metric-card .badge:not(.badge-payment-id) {
  font-size: var(--ui-status-badge-size);
  line-height: 1.3;
}

/* ---- Compact data tables ---- */
.user-theme .table-dues th,
.user-theme .table-dues td,
.user-theme .table-payments th,
.user-theme .table-payments td,
.user-theme .table-history th,
.user-theme .table-history td {
  padding: var(--ui-table-cell-y) var(--ui-table-cell-x);
  vertical-align: top;
}

.user-theme .table-dues th,
.user-theme .table-payments th,
.user-theme .table-history th {
  font-size: var(--ui-table-head-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-muted);
}

/* ---- Modals ---- */
.user-theme .make-payment-modal-dialog .modal-body,
.user-theme .schedule-modal-dialog .modal-body {
  font-size: var(--ui-form-input-size);
}

.user-theme .schedule-modal-dialog #scheduleSummary,
.user-theme .schedule-modal-dialog #groupScheduleSummary {
  font-size: var(--ui-meta-size);
}

.user-theme .make-payment-upload-actions .btn,
.user-theme .make-payment-modal-dialog .modal-footer .btn {
  font-size: var(--ui-btn-size);
}

.user-theme .schedule-modal-dialog .schedule-item strong {
  font-size: var(--ui-value-size);
}

.user-theme .schedule-modal-dialog .schedule-item .small {
  font-size: var(--ui-meta-size) !important;
}

/* ---- Auth pages ---- */
.user-theme.auth-body .ui-page-title,
.user-theme.auth-body .auth-card h1 {
  font-size: var(--ui-page-title-size);
  font-weight: 800;
}

.user-theme .auth-brand img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* ---- Sidebar brand ---- */
.user-theme .brand-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.user-theme .profile-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(36, 177, 177, 0.16);
  color: var(--brf-user-primary);
  font-size: 1.1rem;
}

/* ---- Mobile navbar logo (sidebar hidden until menu opens) ---- */
.user-theme .admin-navbar .container-fluid {
  align-items: center;
  gap: 0.5rem;
}

.user-theme .navbar-mobile-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  max-width: calc(100% - 7.5rem);
  text-decoration: none;
}

.user-theme .navbar-mobile-brand img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .user-theme .navbar-mobile-brand img {
    height: 36px;
  }
}

@media (min-width: 992px) {
  .user-theme .navbar-mobile-brand {
    display: none !important;
  }
}

/* ---- Schedule modal (user module — independent of admin-app.css) ---- */
@media (min-width: 768px) {
  .user-theme .schedule-modal-dialog .schedule-list {
    max-height: 420px;
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .user-theme .schedule-modal-dialog {
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
  }

  .user-theme .schedule-modal-dialog .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .user-theme .schedule-modal-dialog .modal-header {
    flex: 0 0 auto;
  }

  .user-theme .schedule-modal-dialog .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .user-theme .schedule-modal-dialog #scheduleSummary,
  .user-theme .schedule-modal-dialog #groupScheduleSummary {
    flex: 0 0 auto;
  }

  .user-theme .schedule-modal-dialog .schedule-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.user-theme .schedule-list {
  overflow-y: auto;
}

.user-theme .schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
}

.user-theme .schedule-paid {
  background: #16a34a;
  color: #fff;
}

.user-theme .schedule-pending {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.user-theme .schedule-future-daily {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.user-theme .schedule-future-weekly {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.user-theme .schedule-future-monthly {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #d8b4fe;
}

.user-theme .schedule-advance-tag {
  font-weight: 700;
}

.user-theme .schedule-item.is-actionable {
  opacity: 1;
}

.user-theme .schedule-item-action .btn {
  white-space: nowrap;
}

.user-theme .schedule-item.is-disabled {
  pointer-events: none;
  opacity: 0.85;
}

.user-theme .dues-advance-daily,
.user-theme .badge.dues-advance-daily {
  background: #dbeafe;
  color: #1e40af;
}

.user-theme .dues-advance-weekly,
.user-theme .badge.dues-advance-weekly {
  background: #dcfce7;
  color: #166534;
}

.user-theme .dues-advance-monthly,
.user-theme .badge.dues-advance-monthly {
  background: #f3e8ff;
  color: #6b21a8;
}

.user-theme .dues-row-advance td {
  background: rgba(255, 255, 255, 0.6);
}

.user-theme .dues-row-advance.schedule-future-daily td {
  background: rgba(219, 234, 254, 0.35);
}

.user-theme .dues-row-advance.schedule-future-weekly td {
  background: rgba(220, 252, 231, 0.45);
}

.user-theme .dues-row-advance.schedule-future-monthly td {
  background: rgba(243, 232, 255, 0.45);
}

@media (max-width: 575.98px) {
  .user-theme .schedule-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Brand greens — replace remaining Bootstrap blues on user screens ---- */
.user-theme .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brf-user-primary);
  --bs-btn-border-color: var(--brf-user-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brf-user-primary-dark);
  --bs-btn-hover-border-color: var(--brf-user-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brf-user-primary-dark);
  --bs-btn-active-border-color: var(--brf-user-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brf-user-primary);
  --bs-btn-disabled-border-color: var(--brf-user-primary);
  color: #fff;
  background-color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
}

.user-theme .btn-primary:hover,
.user-theme .btn-primary:focus,
.user-theme .btn-primary:active {
  color: #fff;
  background-color: var(--brf-user-primary-dark);
  border-color: var(--brf-user-primary-dark);
}

.user-theme .btn-primary:disabled,
.user-theme .btn-primary.disabled,
.user-theme fieldset:disabled .btn-primary {
  color: #fff;
  background-color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
  opacity: 0.55;
}

.user-theme .btn-outline-primary {
  color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
}

.user-theme .btn-outline-primary:hover,
.user-theme .btn-outline-primary:focus,
.user-theme .btn-outline-primary:active,
.user-theme .btn-outline-primary.active {
  color: #fff;
  background-color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
}

.user-theme .btn-outline-primary:disabled,
.user-theme .btn-outline-primary.disabled {
  color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
  opacity: 0.65;
}

.user-theme a.image-lightbox-link,
.user-theme .make-payment-qr-link .image-lightbox-link {
  color: var(--brf-user-primary);
}

.user-theme a.image-lightbox-link:hover,
.user-theme a.image-lightbox-link:focus-visible {
  color: var(--brf-user-primary-dark);
}

.user-theme .image-lightbox-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 121, 121, 0.25);
}

.user-theme .form-control:focus,
.user-theme .form-select:focus {
  border-color: var(--brf-user-secondary);
  box-shadow: 0 0 0 0.25rem rgba(0, 121, 121, 0.15);
}

.user-theme .alert-info {
  color: #005f5f;
  background-color: #e6f5f5;
  border-color: #a8d8d8;
}

.user-theme .text-bg-info {
  color: #fff !important;
  background-color: var(--brf-user-secondary) !important;
}

.user-theme .badge.text-bg-info {
  background-color: var(--brf-user-secondary) !important;
}

.user-theme .nav-icon {
  color: var(--brf-user-primary);
}

.user-theme .app-lightbox-footer .btn-primary {
  background-color: var(--brf-user-primary);
  border-color: var(--brf-user-primary);
}

.user-theme .app-lightbox-footer .btn-primary:hover,
.user-theme .app-lightbox-footer .btn-primary:focus {
  background-color: var(--brf-user-primary-dark);
  border-color: var(--brf-user-primary-dark);
}

.user-theme .was-validated .form-control:valid:focus,
.user-theme .was-validated .form-select:valid:focus,
.user-theme .form-control.is-valid:focus {
  border-color: var(--brf-user-secondary);
  box-shadow: 0 0 0 0.25rem rgba(0, 121, 121, 0.15);
}

.user-theme .spinner-border.text-primary {
  color: var(--brf-user-primary) !important;
}

.user-theme .sidebar-toggle:hover,
.user-theme .sidebar-toggle:focus {
  border-color: #a8d8d8;
  background: #f0fafa;
}

.user-theme .icon-button:hover,
.user-theme .icon-button:focus,
.user-theme .profile-button:hover,
.user-theme .profile-button:focus {
  border-color: #a8d8d8;
}

.user-theme .search-input:focus,
.user-theme .table-search:focus {
  border-color: var(--brf-user-secondary);
  box-shadow: var(--admin-ring);
}

.user-theme .app-dialog-icon-primary {
  background: #e6f5f5;
  color: var(--brf-user-primary);
}

html:not([data-theme="dark"]) body.user-theme {
  background: linear-gradient(180deg, #f4fafa 0%, var(--admin-bg) 42%, #eef6f6 100%);
}