:root {
  --vjn-navy: #0a2f5c;
  --vjn-blue: #1565c0;
  --vjn-gold: #f2b01e;
  --vjn-bg: #f3f6fb;
  --sidebar-w: 260px;
  --bs-primary: #1565c0;
  --bs-primary-rgb: 21, 101, 192;
  --bs-link-color: #1565c0;
}
body { background: var(--vjn-bg); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: #1c2733; }
.btn-primary { --bs-btn-bg: var(--vjn-blue); --bs-btn-border-color: var(--vjn-blue); --bs-btn-hover-bg: var(--vjn-navy); --bs-btn-hover-border-color: var(--vjn-navy); --bs-btn-active-bg: var(--vjn-navy); }
.btn-gold { background: var(--vjn-gold); border-color: var(--vjn-gold); color: #1c2733; font-weight: 600; }
.btn-gold:hover { background: #dc9c0f; border-color: #dc9c0f; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--vjn-navy), #06203f); color: #cfdcf0; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .2s; }
.sidebar .brand { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand img { width: 44px; height: 44px; border-radius: 8px; background: #fff; object-fit: contain; padding: 2px; }
.sidebar .brand strong { display: block; line-height: 1.1; font-size: 1.1rem; letter-spacing: .5px; }
.sidebar .brand small { color: var(--vjn-gold); font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; }
.side-nav { padding: .75rem .75rem; overflow-y: auto; flex: 1; }
.side-section { text-transform: uppercase; font-size: .68rem; letter-spacing: 1px; color: #7f97b8; padding: 1rem .75rem .35rem; }
.side-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; color: #cfdcf0; text-decoration: none; border-radius: 8px; font-size: .93rem; }
.side-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-link.active { background: var(--vjn-gold); color: #1c2733; font-weight: 600; }
.side-foot { padding: .75rem 1.25rem; font-size: .75rem; color: #7f97b8; border-top: 1px solid rgba(255,255,255,.08); }
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #e3e9f2; padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1030; }
.global-search { position: relative; width: min(440px, 50%); }
.global-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #7b8aa0; }
.global-search input { padding-left: 2.2rem; background: var(--vjn-bg); border-color: transparent; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--vjn-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.content { padding: 1.5rem; max-width: 1500px; width: 100%; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--vjn-navy); margin-bottom: 1rem; }
.breadcrumb { font-size: .85rem; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; }
  .main { margin-left: 0; }
  .content { padding: 1rem; }
}

/* Cards, tables */
.card { border: 1px solid #e3e9f2; border-radius: 12px; box-shadow: 0 1px 2px rgba(10,47,92,.04); }
.card-header { background: #fff; font-weight: 600; border-bottom: 1px solid #e9eef6; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: #5b6b82; background: #f8fafd; border-bottom: 1px solid #e3e9f2; white-space: nowrap; }
.stat-card { background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; height: 100%; text-decoration: none; color: inherit; }
.stat-card > i { font-size: 1.7rem; width: 3rem; height: 3rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(21,101,192,.1); color: var(--vjn-blue); }
.stat-card:hover { border-color: var(--vjn-blue); box-shadow: 0 2px 10px rgba(10,47,92,.1); }
.stat-success > i { background: rgba(46,125,50,.12); color: #2e7d32; }
.stat-warning > i { background: rgba(242,176,30,.2); color: #b57d00; }
.stat-danger > i { background: rgba(198,40,40,.12); color: #c62828; }
.stat-info > i { background: rgba(2,136,209,.12); color: #0277bd; }
.stat-secondary > i, .stat-dark > i { background: rgba(84,110,122,.14); color: #455a64; }
.chart-box { position: relative; height: 240px; }
code { white-space: nowrap; }
.stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--vjn-navy); }
.stat-label { font-size: .8rem; color: #5b6b82; margin-top: .2rem; }
.player-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e3e9f2; }
.player-photo-lg { width: 150px; height: 150px; border-radius: 16px; object-fit: cover; background: #e3e9f2; }
.player-ph { display: inline-flex; align-items: center; justify-content: center; color: #7b8aa0; font-weight: 700; }
.badge-status { font-weight: 600; letter-spacing: .2px; }

/* Guest */
.guest-body { background: radial-gradient(circle at 20% 10%, #1d5aa6 0, var(--vjn-navy) 55%, #051a33 100%); min-height: 100vh; }
.guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.guest-card { background: #fff; border-radius: 16px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.guest-logo { width: 110px; }

@media print {
  .sidebar, .topbar, .sidebar-backdrop, .toast-container, .breadcrumb, .btn, .dropdown, form.card, .pagination, .stepper { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; max-width: none; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border-color: #ccc !important; }
}
.detail-grid dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: #6b7a90; font-weight: 600; }
.detail-grid dd { margin-bottom: .8rem; }
.required::after { content: " *"; color: #c62828; }