:root {
  --z4-bg: #f5f7fb;
  --z4-surface: rgba(255, 255, 255, 0.96);
  --z4-text: #0f172a;
  --z4-muted: #64748b;
  --z4-primary: #0d6efd;
  --z4-primary-soft: rgba(13, 110, 253, 0.1);
  --z4-border: rgba(148, 163, 184, 0.24);
  --z4-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

body {
  background: radial-gradient(circle at top right, #dbe9ff 0, rgba(219, 233, 255, 0) 40%), linear-gradient(180deg, #eef4ff 0%, var(--z4-bg) 100%);
  color: var(--z4-text);
}

.guest-body {
  min-height: 100vh;
}

.navbar {
  z-index: 1030;
}

.navbar .dropdown-menu {
  z-index: 1031;
}

.sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  overflow-y: auto;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
  padding: 10px 15px;
  font-size: .9rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  background-color: #f8f9fa;
}

.sidebar .nav-link.active {
  color: #0d6efd;
  background-color: #e7f1ff;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.notification-dropdown {
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
}

.card,
.table-responsive.card {
  border-radius: 20px;
  background: var(--z4-surface);
  backdrop-filter: blur(8px);
  box-shadow: var(--z4-shadow);
}

.pitch {
  background: linear-gradient(180deg, #2ea44f 0%, #237d3b 100%);
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 16px;
  height: 520px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.pitch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.player-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(37, 99, 235, .96);
  color: #fff;
  border-radius: 12px;
  padding: 4px 10px;
  cursor: move;
  font-size: .75rem;
  touch-action: none;
  border: 0;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .28);
}

.player-node.selected {
  outline: 3px solid rgba(255, 255, 255, .9);
}

.card-stat {
  min-height: 110px;
}

.formation-sidebar {
  min-width: 320px;
  max-width: 380px;
}

.auth-card {
  max-width: 640px;
  margin: 0 auto;
}

.auth-card-modern {
  max-width: 880px;
}

.auth-side {
  background: linear-gradient(160deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #fff;
}

.table > :not(caption) > * > * {
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.form-control,
.form-select,
.btn {
  border-radius: 14px;
}

@media (max-width: 767.98px) {
  #sidebarMenu {
    position: fixed;
    top: 56px;
    left: 0;
    width: 280px;
    height: calc(100vh - 56px);
    z-index: 1050;
    background-color: #f8f9fa;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  #sidebarMenu:not(.show) {
    display: none;
  }

  #sidebarMenu.show {
    display: block !important;
  }

  main {
    width: 100%;
  }

  .formation-sidebar {
    min-width: 100%;
    max-width: 100%;
  }

  .pitch {
    height: 420px;
  }
}

@media (min-width: 768px) {
  main.col-md-9.ms-sm-auto.col-lg-10 {
    margin-left: 25%;
  }
}

@media (min-width: 992px) {
  main.col-md-9.ms-sm-auto.col-lg-10 {
    margin-left: 16.66666667%;
  }
}