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

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --vjn-navy: #0a1f44;
  --vjn-navy-dark: #061530;
  --vjn-navy-light: #123166;
  --vjn-gold: #d4af37;
  --vjn-gold-light: #f0cf6b;
  --vjn-green: #157347;
  --vjn-green-dark: #0f5132;
  --vjn-green-light: #1e9c61;
  --vjn-blue: #0d47a1;
  --vjn-blue-light: #1565c0;
  --vjn-danger: #dc3545;
  --vjn-warning: #f0ad0e;

  --vjn-bg: #f3f5f9;
  --vjn-surface: #ffffff;
  --vjn-text: #1c2530;
  --vjn-text-muted: #6b7686;
  --vjn-border: rgba(15, 23, 42, .08);

  --vjn-sidebar-bg: linear-gradient(180deg, var(--vjn-navy), var(--vjn-navy-dark));
  --vjn-sidebar-active: linear-gradient(90deg, var(--vjn-green), var(--vjn-green-light));

  --vjn-radius-sm: .5rem;
  --vjn-radius: .875rem;
  --vjn-radius-lg: 1.25rem;

  --vjn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --vjn-shadow: 0 6px 20px -4px rgba(10, 31, 68, .12), 0 2px 6px -2px rgba(10, 31, 68, .08);
  --vjn-shadow-lg: 0 20px 45px -12px rgba(10, 31, 68, .28);

  --vjn-transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

[data-bs-theme="dark"] {
  --vjn-bg: #0b1120;
  --vjn-surface: #131b2c;
  --vjn-text: #e8ecf3;
  --vjn-text-muted: #8f9bb3;
  --vjn-border: rgba(255, 255, 255, .08);
  --vjn-shadow: 0 6px 20px -4px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .3);
}

/* ============================================================
   Base
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .25) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .35); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); }

body {
  background-color: var(--vjn-bg);
  color: var(--vjn-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }
a { text-decoration: none; }
code { color: var(--vjn-navy-light); background: rgba(10, 31, 68, .06); padding: .1rem .4rem; border-radius: .35rem; font-size: .85em; }
[data-bs-theme="dark"] code { color: var(--vjn-gold-light); background: rgba(212, 175, 55, .12); }

/* ============================================================
   Navbar
   ============================================================ */
.vjn-navbar {
  background: linear-gradient(100deg, var(--vjn-navy), var(--vjn-navy-light) 60%, var(--vjn-green-dark));
  color: #fff;
  box-shadow: 0 2px 16px rgba(10, 31, 68, .25);
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--vjn-gold);
}
.vjn-navbar .navbar-brand { color: #fff; letter-spacing: -.01em; }
.vjn-navbar .navbar-brand i { color: var(--vjn-gold-light); }
.vjn-navbar .btn-outline-light { border-color: rgba(255, 255, 255, .35); transition: var(--vjn-transition); }
.vjn-navbar .btn-outline-light:hover { background-color: rgba(255, 255, 255, .12); border-color: #fff; transform: translateY(-1px); }
.vjn-navbar .btn-light { border-radius: 999px; font-weight: 600; transition: var(--vjn-transition); }
.vjn-navbar .btn-light:hover { transform: translateY(-1px); box-shadow: var(--vjn-shadow-sm); }

.dropdown-menu {
  border: none;
  border-radius: var(--vjn-radius);
  box-shadow: var(--vjn-shadow-lg);
  padding: .5rem;
  max-width: 92vw;
  animation: vjnPop .15s ease-out;
}
.dropdown-item { border-radius: var(--vjn-radius-sm); padding: .5rem .75rem; transition: var(--vjn-transition); }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(21, 115, 71, .08); }
.dropdown-item-text { padding: .5rem .75rem; }
[data-bs-theme="dark"] .dropdown-menu { background-color: var(--vjn-surface); }
[data-bs-theme="dark"] .dropdown-item { color: var(--vjn-text); }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: rgba(255, 255, 255, .06); }

@keyframes vjnPop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Sidebar
   ============================================================ */
.vjn-sidebar {
  width: 260px;
  min-height: calc(100vh - 62px);
  background: var(--vjn-sidebar-bg);
  flex-shrink: 0;
  transition: margin-left .25s ease;
  position: relative;
}
.vjn-sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(212, 175, 55, .08), transparent 55%);
}
.vjn-nav { padding: 1rem .75rem; position: relative; z-index: 1; }
.vjn-nav .nav-link {
  color: rgba(255, 255, 255, .72);
  border-radius: var(--vjn-radius-sm);
  padding: .6rem .85rem;
  margin-bottom: 3px;
  font-size: .92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: var(--vjn-transition);
  border-left: 3px solid transparent;
}
.vjn-nav .nav-link i { width: 1.5rem; display: inline-block; font-size: 1rem; }
.vjn-nav .nav-link:hover { background-color: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); }
.vjn-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(21, 115, 71, .9), rgba(21, 115, 71, .5));
  color: #fff;
  border-left-color: var(--vjn-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.vjn-nav .nav-link.disabled { color: rgba(255, 255, 255, .3); }
.nav-section-label {
  display: block;
  color: rgba(255, 255, 255, .38);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .9rem .85rem .35rem;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 21, 48, .55);
  z-index: 1025;
  backdrop-filter: blur(1px);
}

@media (max-width: 991.98px) {
  .vjn-sidebar { position: fixed; z-index: 1030; margin-left: -260px; top: 62px; box-shadow: var(--vjn-shadow-lg); }
  .vjn-sidebar.show { margin-left: 0; }
  .sidebar-backdrop.show { display: block; }
}

.vjn-main { min-width: 0; animation: vjnFadeUp .35s ease-out; }

@keyframes vjnFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn { border-radius: var(--vjn-radius-sm); font-weight: 600; transition: var(--vjn-transition); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(21, 115, 71, .25); }
.btn-vjn-primary {
  background: linear-gradient(135deg, var(--vjn-green), var(--vjn-green-dark));
  border-color: var(--vjn-green-dark);
  color: #fff;
  box-shadow: 0 2px 8px rgba(21, 115, 71, .3);
}
.btn-vjn-primary:hover {
  background: linear-gradient(135deg, var(--vjn-green-light), var(--vjn-green));
  border-color: var(--vjn-green);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(21, 115, 71, .35);
}
.btn-vjn-primary:active { transform: translateY(0); }
.btn-outline-secondary, .btn-outline-danger, .btn-outline-primary {
  transition: var(--vjn-transition);
}
.btn-outline-secondary:hover, .btn-outline-danger:hover, .btn-outline-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--vjn-shadow-sm);
}
.btn-sm { border-radius: .55rem; }

/* ============================================================
   Cards / KPIs
   ============================================================ */
.card {
  border-radius: var(--vjn-radius);
  border: 1px solid var(--vjn-border);
  background-color: var(--vjn-surface);
  box-shadow: var(--vjn-shadow-sm);
  transition: var(--vjn-transition);
}
.card-body { padding: 1.25rem; }
.card-title { font-weight: 700; }

.kpi-card {
  border: none;
  border-radius: var(--vjn-radius);
  color: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: var(--vjn-shadow);
}
.kpi-card::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--vjn-shadow-lg); }
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.kpi-card.bg-vjn-green { background: linear-gradient(135deg, var(--vjn-green), var(--vjn-green-dark)); }
.kpi-card.bg-vjn-blue { background: linear-gradient(135deg, var(--vjn-blue-light), var(--vjn-navy)); }

[data-bs-theme="dark"] .card { background-color: var(--vjn-surface); border-color: var(--vjn-border); }

/* ============================================================
   Tables
   ============================================================ */
.table-responsive { border-radius: var(--vjn-radius); }
.table { color: var(--vjn-text); margin-bottom: 0; }
.table thead th {
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vjn-text-muted);
  background-color: rgba(10, 31, 68, .03);
  border-bottom: 1px solid var(--vjn-border);
  white-space: nowrap;
}
.table td { vertical-align: middle; border-color: var(--vjn-border); }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: rgba(21, 115, 71, .06); }
[data-bs-theme="dark"] .table thead th { background-color: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .04); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: .5rem;
  border: 1px solid var(--vjn-border);
  padding: .3rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--vjn-green) !important;
  border-color: var(--vjn-green) !important;
  color: #fff !important;
  border-radius: .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: .5rem; }

/* ============================================================
   Forms
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--vjn-radius-sm);
  border-color: var(--vjn-border);
  padding: .55rem .85rem;
  transition: var(--vjn-transition);
  background-color: var(--vjn-surface);
  color: var(--vjn-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vjn-green);
  box-shadow: 0 0 0 .2rem rgba(21, 115, 71, .15);
}
.form-label { font-weight: 600; font-size: .88rem; color: var(--vjn-text); margin-bottom: .35rem; }
.form-control-sm, .form-select-sm { border-radius: .5rem; }
.input-group-text { background-color: rgba(10, 31, 68, .04); border-color: var(--vjn-border); }

/* ============================================================
   Badges — soft pill style
   ============================================================ */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; border-radius: 999px; }
.badge.bg-success { background-color: rgba(21, 115, 71, .12) !important; color: var(--vjn-green-dark) !important; }
.badge.bg-danger  { background-color: rgba(220, 53, 69, .12) !important; color: #b02a37 !important; }
.badge.bg-warning { background-color: rgba(240, 173, 14, .16) !important; color: #8a5d00 !important; }
.badge.bg-secondary { background-color: rgba(107, 118, 134, .14) !important; color: var(--vjn-text-muted) !important; }
.badge.bg-dark { background-color: rgba(10, 31, 68, .12) !important; color: var(--vjn-navy) !important; }
.badge.bg-primary { background-color: rgba(13, 71, 161, .12) !important; color: var(--vjn-blue) !important; }
[data-bs-theme="dark"] .badge.bg-success { color: #4ade80 !important; }
[data-bs-theme="dark"] .badge.bg-danger { color: #f87171 !important; }
[data-bs-theme="dark"] .badge.bg-warning { color: #fbbf24 !important; }
[data-bs-theme="dark"] .badge.bg-secondary { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-dark { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-primary { color: #93c5fd !important; }

/* ============================================================
   Modals
   ============================================================ */
.modal-content { border-radius: var(--vjn-radius-lg); border: none; box-shadow: var(--vjn-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--vjn-border); }
.modal-footer { border-top: 1px solid var(--vjn-border); }
.modal-backdrop.show { opacity: .55; }

/* ============================================================
   Alerts
   ============================================================ */
.alert { border: none; border-radius: var(--vjn-radius); box-shadow: var(--vjn-shadow-sm); }

/* ============================================================
   Nav tabs
   ============================================================ */
.nav-tabs { border-bottom-color: var(--vjn-border); }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--vjn-text-muted); font-weight: 600; transition: var(--vjn-transition); }
.nav-tabs .nav-link:hover { border-bottom-color: rgba(21, 115, 71, .35); }
.nav-tabs .nav-link.active { color: var(--vjn-green); background: transparent; border-bottom-color: var(--vjn-green); }

/* ============================================================
   Auth pages
   ============================================================ */
.vjn-auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(6, 21, 48, .88), rgba(10, 31, 68, .82) 55%, rgba(15, 81, 50, .82)),
    url('../img/bg-hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 767.98px) {
  .vjn-auth-body { background-attachment: scroll; }
}
.vjn-auth-card {
  border-radius: var(--vjn-radius-lg);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  animation: vjnFadeUp .5s ease-out;
}
[data-bs-theme="dark"] .vjn-auth-card { background: rgba(19, 27, 44, .95); }

/* ============================================================
   Dashboard hero banner
   ============================================================ */
.vjn-hero-banner {
  position: relative;
  border-radius: var(--vjn-radius-lg);
  overflow: hidden;
  color: #fff;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  background-image: url('../img/bg-hero.jpg');
  background-size: cover;
  background-position: center 30%;
  box-shadow: var(--vjn-shadow-lg);
}
.vjn-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 21, 48, .92), rgba(10, 31, 68, .78) 55%, rgba(15, 81, 50, .55));
}
.vjn-hero-banner > * { position: relative; z-index: 1; }
.vjn-hero-banner h4 { color: #fff; }
.vjn-hero-banner .text-muted { color: rgba(255, 255, 255, .75) !important; }

/* ============================================================
   Membership card
   ============================================================ */
.member-card {
  width: 340px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--vjn-navy), var(--vjn-green-dark));
  padding: 16px;
  box-shadow: var(--vjn-shadow-lg);
}

/* ============================================================
   Misc responsive polish
   ============================================================ */
@media (max-width: 575.98px) {
  .card-body { padding: 1rem; }
  .kpi-card .kpi-value { font-size: 1.4rem; }
  h4.fw-bold { font-size: 1.25rem; }
  .vjn-hero-banner { padding: 1.25rem 1.35rem; }
}