/* CrediGonK 2.5 — shared product finish for administration and client views. */
:root {
  --cgk-navy: #082d59;
  --cgk-blue: #0874e8;
  --cgk-blue-deep: #055dc1;
  --cgk-sky: #edf6ff;
  --cgk-line: #d9e6f3;
  --cgk-text: #122d50;
  --cgk-muted: #607a99;
  --cgk-card: #ffffff;
  --cgk-shadow: 0 14px 34px rgba(21, 61, 103, .08);
}

body { background: #f3f7fb; color: var(--cgk-text); }
.premium-topbar, .account-topbar { border-bottom-color: var(--cgk-line); box-shadow: 0 1px 0 rgba(8,45,89,.02); }
.premium-topbar a, .account-topbar a { transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.premium-topbar a:hover, .account-topbar a:hover { color: var(--cgk-blue); transform: translateY(-1px); }

.premium-admin-main, .account-content { max-width: 1480px; }
.admin-title-copy h1, .basic-page-title h1 { letter-spacing: -.045em; color: var(--cgk-navy); }
.admin-title-copy p, .basic-page-title p { color: var(--cgk-muted); max-width: 62ch; }
.section-eyebrow, .selection-kicker {
  display: inline-flex; align-items: center; gap: 7px; color: var(--cgk-blue-deep);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
}
.section-eyebrow::before, .selection-kicker::before { content: ''; width: 18px; height: 2px; border-radius: 99px; background: currentColor; }

.admin-utility-bar, .admin-filter-bar, .portal-data-card, .setup-empty, .collection-methods,
.account-balance-card, .account-preview-card, .account-reports-card, .account-payment-panel {
  border-color: var(--cgk-line); box-shadow: var(--cgk-shadow);
}
.admin-utility-bar { background: linear-gradient(105deg,#fff 0%,#f7fbff 100%); }
.admin-filter-bar { background: var(--cgk-card); }
.admin-filter-bar h3, .basic-section-heading h2 { color: var(--cgk-navy); letter-spacing: -.025em; }
.basic-section-heading { gap: 18px; }

.basic-card, .portal-data-card, .collection-methods { border-radius: 20px; }
.portal-data-card { background: var(--cgk-card); overflow: hidden; }
.basic-table thead tr, .basic-table th { background: #f5f8fc; color: #4d6889; }
.basic-table th { font-size: .76rem; letter-spacing: .055em; text-transform: uppercase; }
.basic-table tbody tr { transition: background .18s ease; }
.basic-table tbody tr:hover { background: #f7fbff; }
.basic-table td { border-color: #e6eef7; }
.basic-status { font-weight: 750; border-radius: 999px; padding: 7px 10px; }
.basic-button, button, .button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.basic-button:hover:not(:disabled), button:hover:not(:disabled), .button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(7,99,205,.16); }

/* Admin selection state: gives a clear next step rather than an empty form. */
.loan-selection-empty { max-width: none; padding: 32px; text-align: left; background: linear-gradient(135deg,#fff 0%,#f5faff 100%); }
.loan-selection-empty h2 { margin: 10px 0 8px; color: var(--cgk-navy); font-size: clamp(1.45rem,2vw,2rem); letter-spacing: -.04em; }
.loan-selection-empty > p { max-width: 62ch; color: var(--cgk-muted); margin-bottom: 22px; }
.loan-selection-picker { display: grid; grid-template-columns: minmax(130px, .23fr) minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 22px; font-weight: 700; color: #496789; }
.loan-selection-picker > span { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }
.loan-selection-picker select { min-height: 52px; width: 100%; border: 1px solid #bcd4ec; border-radius: 12px; background: white; color: var(--cgk-text); padding: 0 16px; font: inherit; }
.loan-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(255px,1fr)); gap: 12px; }
.loan-choice-card { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; column-gap: 12px; align-items: center; min-height: 86px; padding: 14px; text-align: left; color: var(--cgk-text); border: 1px solid #d6e4f2; border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: none; }
.loan-choice-card:hover { border-color: #80b8ef; background: #fff; box-shadow: 0 10px 22px rgba(8,88,170,.10); }
.loan-choice-avatar { display: grid; place-items: center; width: 42px; height: 42px; color: #0869cf; font-weight: 850; border-radius: 13px; background: #e7f2ff; }
.loan-choice-card strong, .loan-choice-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loan-choice-card strong { font-size: .9rem; }
.loan-choice-card small { color: var(--cgk-muted); font-size: .75rem; margin-top: 4px; }
.loan-choice-card b { font-size: .95rem; color: var(--cgk-navy); }
.loan-choice-card i { grid-column: 2 / -1; margin-top: 2px; color: var(--cgk-blue-deep); font-size: .78rem; font-style: normal; font-weight: 750; }

/* Client: turn the account into a calm, guided payment experience. */
.account-shell { background: #f3f7fb; }
.account-sidebar { background: #fff; border-right-color: var(--cgk-line); }
.account-nav a { border-radius: 12px; }
.account-nav a:hover { color: var(--cgk-blue); background: #f0f7ff; }
.account-nav a.is-active { background: #e6f1ff; box-shadow: inset 3px 0 0 var(--cgk-blue); }
.account-page-heading h1 { color: var(--cgk-navy); letter-spacing: -.045em; }
.account-page-heading p { color: var(--cgk-muted); }
.account-payment-hero { position: relative; overflow: hidden; border-radius: 22px; box-shadow: 0 18px 35px rgba(7,48,93,.18); }
.account-payment-hero::after { content: ''; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(122,194,255,.18); border-radius: 50%; right: -112px; top: -122px; pointer-events: none; }
.account-payment-hero > * { position: relative; z-index: 1; }
.account-balance-card, .account-preview-card, .account-reports-card { background: #fff; border-radius: 18px; }
.account-review-notice { border-radius: 16px; border-left-width: 4px; }
.account-review-notice.is-warning, .account-review-notice[data-state="correction"] { background: #fff4f3; border-color: #e54747; color: #8f2222; }
.account-review-notice.is-warning::before, .account-review-notice[data-state="correction"]::before { content: '⚠'; margin-right: 10px; font-size: 1.1rem; }
.account-payment-methods { border-top-color: var(--cgk-line); }
.account-empty-state { padding: 36px 22px; border: 1px dashed #bdd5ed; border-radius: 16px; background: #fbfdff; }

/* Mobile keeps the logical order: heading, action, details. */
@media (max-width: 920px) {
  .loan-selection-picker { grid-template-columns: 1fr; gap: 7px; }
  .premium-admin-main, .account-content { max-width: 100%; }
  .admin-utility-bar { align-items: flex-start; }
}
@media (max-width: 620px) {
  .loan-selection-empty { padding: 23px 18px; border-radius: 16px; }
  .loan-choice-grid { grid-template-columns: 1fr; }
  .loan-choice-card { grid-template-columns: 40px minmax(0,1fr); }
  .loan-choice-card b { grid-column: 2; margin-top: 5px; }
  .loan-choice-card i { grid-column: 2; }
  .basic-card, .portal-data-card, .collection-methods { border-radius: 16px; }
  .basic-section-heading { align-items: flex-start; }
  .account-payment-hero { border-radius: 18px; }
}