@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --fin-bg: #f3f7fb;
  --fin-card: #ffffff;
  --fin-line: #e3ebf5;
  --fin-text: #182536;
  --fin-muted: #5c6f83;
  --fin-brand: #0f6b3a;
  --fin-brand-2: #165a86;
  --fin-dark: #0b1320;
  --fin-shadow: 0 14px 36px rgba(10, 28, 44, .08);
}

body {
  background:
    radial-gradient(1200px 700px at -10% -20%, rgba(22,90,134,.09), transparent),
    radial-gradient(1000px 600px at 120% -10%, rgba(15,107,58,.08), transparent),
    var(--fin-bg) !important;
  color: var(--fin-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #13253a !important;
  background: transparent !important;
}

p, .text-muted, .meta, small {
  color: #4c6074 !important;
}

h1, h2, h3, .display-1, .display-2, .display-3, .display-4 {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -.01em;
}

.navbar,
.site-header,
.custom-navbar,
.navbar-custom,
.nav-tutor {
  background: linear-gradient(145deg, #10243b, #0b1320) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(2, 10, 22, .32);
}

.navbar .nav-link,
.site-header .nav-link {
  border-radius: 10px;
  color: #deebfa !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  padding: .48rem .72rem !important;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.fintech-admin nav.navbar .navbar-collapse {
  justify-content: center;
}

body.fintech-admin nav.navbar .navbar-nav.me-auto {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

body.fintech-admin nav.navbar .navbar-nav:not(.me-auto) {
  margin-left: 0 !important;
}

.navbar .nav-link:hover,
.site-header .nav-link:hover,
.navbar .nav-link.active,
.site-header .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.10);
}

.container-fluid, .container {
  position: relative;
}

.card,
.panel-card,
.stats-card,
.payment-card,
.classic-card,
.module-card,
.tutor-card,
.stat-card {
  border: 1px solid var(--fin-line) !important;
  border-radius: 16px !important;
  background: var(--fin-card) !important;
  box-shadow: var(--fin-shadow) !important;
}

.card-header,
.classic-card-header {
  border-bottom: 1px solid var(--fin-line) !important;
  background: linear-gradient(145deg, #f8fbff, #edf3f9) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-dark,
.btn-brand,
.btn-modern,
.btn-elegant {
  border: 0 !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
}

.btn-primary,
.btn-success,
.btn-brand,
.btn-modern,
.btn-elegant {
  background: linear-gradient(145deg, var(--fin-brand), #0f5a32) !important;
  color: #fff !important;
}

.btn-info,
.btn-warning,
.btn-dark {
  background: linear-gradient(145deg, var(--fin-brand-2), #12496b) !important;
  color: #fff !important;
}

.badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

table.table thead th {
  background: #f3f8fe !important;
  color: #2b3d52 !important;
  border-bottom: 1px solid var(--fin-line) !important;
}

table.table tbody tr:hover {
  background: #f8fbff !important;
}

.fintech-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  margin: 12px 14px 0;
  border: 1px solid var(--fin-line);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(15, 37, 56, .08);
}

.fintech-shell-topbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fintech-shell-topbar .title {
  font-size: 14px;
  font-weight: 800;
  color: #223345;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fintech-shell-topbar .meta {
  font-size: 12px;
  color: var(--fin-muted);
}

.fintech-admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  z-index: 1300;
  background: linear-gradient(180deg, #0f2538, #0b1320);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 14px 12px;
  overflow-y: auto;
}

.fintech-admin-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(4, 12, 24, .45);
}

.fintech-admin-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px;
}

.fintech-admin-sidebar .brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
}

.fintech-admin-sidebar .brand b {
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
}

.fintech-admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 11px;
  border-radius: 11px;
  color: #d4e5f7;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.fintech-admin-sidebar a:hover,
.fintech-admin-sidebar a.active {
  color: #fff;
  background: rgba(255,255,255,.10);
}

body.fintech-admin main,
body.fintech-admin .container-fluid,
body.fintech-admin .container {
  margin-left: 0;
}

body.fintech-admin nav.navbar,
body.fintech-user nav.navbar,
body.fintech-public nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1100;
}

body.fintech-admin .navbar .navbar-brand img {
  margin-right: 0 !important;
}

body.fintech-admin .navbar .navbar-nav .nav-item {
  margin-right: 2px;
}

body.fintech-admin .navbar .navbar-nav .nav-link i {
  font-size: .92rem;
}

body.fintech-admin .stats-card .card-title,
body.fintech-admin .stat-card .card-title,
body.fintech-user .stats-card .card-title,
body.fintech-user .stat-card .card-title {
  color: #f7fbff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

body.fintech-admin .stats-card h3,
body.fintech-admin .stat-card h3,
body.fintech-user .stats-card h3,
body.fintech-user .stat-card h3 {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
}

body.fintech-admin .page-header h1,
body.fintech-admin .page-header p {
  text-align: center !important;
}

body.fintech-admin .page-header .row {
  justify-content: center;
}

body.fintech-admin .page-header .text-md-end {
  text-align: center !important;
}

body.fintech-admin .fintech-shell-topbar,
body.fintech-user .fintech-shell-topbar {
  margin-bottom: 16px;
}

body.fintech-public .hero,
body.fintech-public .main-content,
body.fintech-public .content-wrapper {
  border-radius: 18px;
}

body.fintech-admin .table,
body.fintech-user .table {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.modern-table .table {
  min-width: 920px;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.fintech-admin .container,
body.fintech-admin .container-fluid,
body.fintech-user .container,
body.fintech-user .container-fluid,
body.fintech-public .container,
body.fintech-public .container-fluid {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.fintech-admin .container-fluid,
body.fintech-user .container-fluid,
body.fintech-public .container-fluid {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.fintech-admin .container,
body.fintech-user .container,
body.fintech-public .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body footer:not(.bfc-global-footer) {
  display: none !important;
}

.bfc-global-footer {
  margin-top: 36px;
  background: linear-gradient(135deg, #304c3d, #2a4234);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 30px 0;
}

.bfc-global-footer .logo-circle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bfc-global-footer h5,
.bfc-global-footer p,
.bfc-global-footer a {
  color: #dce9f7 !important;
  text-decoration: none;
}

.bfc-global-footer a:hover {
  color: #fff !important;
}

.bfc-global-footer .social-icons a {
  margin-left: 10px;
}

/* Unified colorful cards with consistent text color and hover motion */
body.fintech-admin .stats-card,
body.fintech-admin .stat-card,
body.fintech-admin .metric-card,
body.fintech-admin .kpi-card,
body.fintech-admin .summary-card,
body.fintech-user .stats-card,
body.fintech-user .stat-card {
  color: #f7fbff !important;
  border: none !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

body.fintech-admin .stats-card .card-body,
body.fintech-admin .stat-card .card-body,
body.fintech-admin .metric-card .card-body,
body.fintech-admin .kpi-card .card-body,
body.fintech-admin .summary-card .card-body,
body.fintech-user .stats-card .card-body,
body.fintech-user .stat-card .card-body {
  background: transparent !important;
}

body.fintech-admin .stats-card .card-title,
body.fintech-admin .stats-card h3,
body.fintech-admin .stats-card i,
body.fintech-admin .stat-card .card-title,
body.fintech-admin .stat-card h3,
body.fintech-admin .stat-card i,
body.fintech-admin .metric-card .card-title,
body.fintech-admin .metric-card h3,
body.fintech-admin .metric-card i,
body.fintech-admin .kpi-card .card-title,
body.fintech-admin .kpi-card h3,
body.fintech-admin .kpi-card i,
body.fintech-admin .summary-card .card-title,
body.fintech-admin .summary-card h3,
body.fintech-admin .summary-card i,
body.fintech-user .stats-card .card-title,
body.fintech-user .stats-card h3,
body.fintech-user .stats-card i,
body.fintech-user .stat-card .card-title,
body.fintech-user .stat-card h3,
body.fintech-user .stat-card i {
  color: #f7fbff !important;
}

/* Fancy white metric titles for admin-linked KPI cards */
body.fintech-admin .stats-card .card-title,
body.fintech-admin .stats-card h6,
body.fintech-admin .stat-card .card-title,
body.fintech-admin .stat-card h6,
body.fintech-admin .metric-card .card-title,
body.fintech-admin .kpi-card .card-title,
body.fintech-admin .summary-card .card-title,
body.fintech-admin .metric-title,
body.fintech-admin .kpi-title,
body.fintech-admin .summary-title,
body.fintech-admin .stat-label {
  color: #ffffff !important;
  font-family: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

body.fintech-admin .stats-card p,
body.fintech-admin .stats-card small,
body.fintech-admin .stat-card p,
body.fintech-admin .stat-card small,
body.fintech-admin .metric-card p,
body.fintech-admin .metric-card small,
body.fintech-admin .kpi-card p,
body.fintech-admin .kpi-card small,
body.fintech-admin .summary-card p,
body.fintech-admin .summary-card small {
  color: #e8f1fb !important;
  font-size: .78rem !important;
}

body.fintech-admin .stats-card:hover,
body.fintech-admin .stat-card:hover,
body.fintech-admin .metric-card:hover,
body.fintech-admin .kpi-card:hover,
body.fintech-admin .summary-card:hover,
body.fintech-user .stats-card:hover,
body.fintech-user .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(13, 26, 45, .28) !important;
  filter: saturate(1.06);
}

body.fintech-admin .row > div:nth-child(1) .stats-card,
body.fintech-admin .row > div:nth-child(1) .stat-card,
body.fintech-user .row > div:nth-child(1) .stats-card,
body.fintech-user .row > div:nth-child(1) .stat-card {
  background: linear-gradient(135deg, #0f6b3a, #0d5b32) !important;
}

body.fintech-admin .row > div:nth-child(2) .stats-card,
body.fintech-admin .row > div:nth-child(2) .stat-card,
body.fintech-user .row > div:nth-child(2) .stats-card,
body.fintech-user .row > div:nth-child(2) .stat-card {
  background: linear-gradient(135deg, #165a86, #12486b) !important;
}

body.fintech-admin .row > div:nth-child(3) .stats-card,
body.fintech-admin .row > div:nth-child(3) .stat-card,
body.fintech-user .row > div:nth-child(3) .stats-card,
body.fintech-user .row > div:nth-child(3) .stat-card {
  background: linear-gradient(135deg, #7d3f98, #65307a) !important;
}

body.fintech-admin .row > div:nth-child(4) .stats-card,
body.fintech-admin .row > div:nth-child(4) .stat-card,
body.fintech-user .row > div:nth-child(4) .stats-card,
body.fintech-user .row > div:nth-child(4) .stat-card {
  background: linear-gradient(135deg, #a45b14, #86480f) !important;
}

body.fintech-admin .row > div:nth-child(5) .stats-card,
body.fintech-admin .row > div:nth-child(5) .stat-card,
body.fintech-user .row > div:nth-child(5) .stats-card,
body.fintech-user .row > div:nth-child(5) .stat-card {
  background: linear-gradient(135deg, #223449, #172637) !important;
}

body.fintech-admin .row > div:nth-child(6) .stats-card,
body.fintech-admin .row > div:nth-child(6) .stat-card,
body.fintech-user .row > div:nth-child(6) .stats-card,
body.fintech-user .row > div:nth-child(6) .stat-card {
  background: linear-gradient(135deg, #1e6f62, #17584e) !important;
}

body.fintech-admin .stats-card.bg-warning,
body.fintech-admin .stat-card.bg-warning {
  background: linear-gradient(135deg, #a45b14, #86480f) !important;
  color: #f7fbff !important;
}

body.fintech-admin .stats-card.bg-warning .card-title,
body.fintech-admin .stats-card.bg-warning h3,
body.fintech-admin .stat-card.bg-warning .card-title,
body.fintech-admin .stat-card.bg-warning h3 {
  color: #f7fbff !important;
}

/* Admin metric cards: no background colors, black text, hover only */
body.fintech-admin .stats-card,
body.fintech-admin .stat-card,
body.fintech-admin .metric-card,
body.fintech-admin .kpi-card,
body.fintech-admin .summary-card {
  background: #ffffff !important;
  color: #101820 !important;
  border: 1px solid #dbe5f1 !important;
  box-shadow: 0 8px 22px rgba(16, 36, 60, .08) !important;
}

body.fintech-admin .stats-card .card-title,
body.fintech-admin .stats-card h1,
body.fintech-admin .stats-card h2,
body.fintech-admin .stats-card h3,
body.fintech-admin .stats-card h4,
body.fintech-admin .stats-card h5,
body.fintech-admin .stats-card h6,
body.fintech-admin .stats-card p,
body.fintech-admin .stats-card span,
body.fintech-admin .stats-card small,
body.fintech-admin .stats-card i,
body.fintech-admin .stat-card .card-title,
body.fintech-admin .stat-card h1,
body.fintech-admin .stat-card h2,
body.fintech-admin .stat-card h3,
body.fintech-admin .stat-card h4,
body.fintech-admin .stat-card h5,
body.fintech-admin .stat-card h6,
body.fintech-admin .stat-card p,
body.fintech-admin .stat-card span,
body.fintech-admin .stat-card small,
body.fintech-admin .stat-card i,
body.fintech-admin .metric-card .card-title,
body.fintech-admin .kpi-card .card-title,
body.fintech-admin .summary-card .card-title,
body.fintech-admin .metric-title,
body.fintech-admin .kpi-title,
body.fintech-admin .summary-title,
body.fintech-admin .stat-label {
  color: #101820 !important;
  text-shadow: none !important;
}

body.fintech-admin .stats-card:hover,
body.fintech-admin .stat-card:hover,
body.fintech-admin .metric-card:hover,
body.fintech-admin .kpi-card:hover,
body.fintech-admin .summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 36, 60, .15) !important;
}

/* Module management list cards styling */
body.fintech-admin .module-card {
  background: linear-gradient(145deg, #173a56, #0f2940) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 24px rgba(10, 22, 36, .25) !important;
}

body.fintech-admin .module-card .card-header {
  background: linear-gradient(145deg, #1d4f74, #153a58) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

body.fintech-admin .module-card .card-title,
body.fintech-admin .module-card h6,
body.fintech-admin .module-card p,
body.fintech-admin .module-card span,
body.fintech-admin .module-card small,
body.fintech-admin .module-card i {
  color: #f4f9ff !important;
}

/* Admin pages (except dashboard): neutral metric cards */
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card,
body.fintech-admin:not(.fintech-admin-dashboard) .metric-card,
body.fintech-admin:not(.fintech-admin-dashboard) .kpi-card,
body.fintech-admin:not(.fintech-admin-dashboard) .summary-card {
  background: #ffffff !important;
  border: 1px solid #d9e5f3 !important;
  box-shadow: 0 8px 20px rgba(18, 40, 66, .08) !important;
}

body.fintech-admin:not(.fintech-admin-dashboard) .stats-card .card-title,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h1,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h2,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h3,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h4,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h5,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card h6,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card p,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card small,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card span,
body.fintech-admin:not(.fintech-admin-dashboard) .stats-card i,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card .card-title,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h1,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h2,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h3,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h4,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h5,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card h6,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card p,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card small,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card span,
body.fintech-admin:not(.fintech-admin-dashboard) .stat-card i {
  color: #101820 !important;
  text-shadow: none !important;
}

/* Parent/Tutor dashboards: transparent cards */
body.fintech-parent-dashboard .card,
body.fintech-parent-dashboard .classic-card,
body.fintech-parent-dashboard .stat-card,
body.fintech-parent-dashboard .package-card,
body.fintech-tutor-dashboard .card,
body.fintech-tutor-dashboard .classic-card,
body.fintech-tutor-dashboard .stat-card,
body.fintech-tutor-dashboard .package-card {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 24px rgba(16, 36, 60, .12) !important;
}


@media (max-width: 991px) {
  .fintech-admin-sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body.fintech-admin.sidebar-open .fintech-admin-sidebar {
    transform: translateX(0);
  }
  body.fintech-admin.sidebar-open .fintech-admin-backdrop {
    display: block;
  }
  body.fintech-admin main,
  body.fintech-admin .container-fluid,
  body.fintech-admin .container {
    margin-left: 0;
  }
  .fintech-shell-topbar {
    margin: 10px 8px 0;
  }
  .bfc-global-footer {
    padding: 24px 0;
  }
  .bfc-global-footer .social-icons a {
    margin-left: 8px;
    margin-right: 8px;
  }
  h1, .h1 { font-size: 1.65rem !important; }
  h2, .h2 { font-size: 1.4rem !important; }
  h3, .h3 { font-size: 1.2rem !important; }
  .card, .panel-card, .classic-card, .stat-card {
    border-radius: 12px !important;
  }
  .card-body, .classic-card-body {
    padding: 14px !important;
  }
}