@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&display=swap");

:root {
  --game-bg: #090d16;
  --game-surface: #101827;
  --game-surface-alt: #152036;
  --game-border: #2a3a55;
  --game-text: #edf6ff;
  --game-muted: #9aabc2;
  --game-cyan: #3de8ff;
  --game-lime: #b9ff4a;
  --game-yellow: #ffc940;
  --game-red: #ff5277;
  --game-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

body {
  min-height: 100vh;
  padding-top: 76px;
  color: var(--game-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  background-color: var(--game-bg);
  background-image: linear-gradient(rgba(61, 232, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 232, 255, 0.035) 1px, transparent 1px), radial-gradient(circle at 50% -15%, #1f3151 0%, transparent 43%);
  background-size:
    28px 28px,
    28px 28px,
    auto;
}

a {
  color: var(--game-cyan);
  text-decoration: none;
}

a:hover {
  color: var(--game-lime);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.form-label,
.card-title,
.modal-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.container {
  max-width: 1440px;
}

.navbar {
  min-height: 62px;
  border-bottom: 1px solid rgba(61, 232, 255, 0.32);
  background: rgba(9, 13, 22, 0.93) !important;
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
}

.navbar-brand {
  color: var(--game-lime) !important;
  font-size: 1.55rem;
  text-transform: uppercase;
}

.navbar-logo {
  width: 42px;
  height: 42px;
  margin-right: 0.65rem;
  border: 1px solid #430653;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 12px rgba(67, 6, 83, 0.72);
}

.nav-link,
.navbar-toggler {
  color: var(--game-text) !important;
}

.navbar-toggler {
  border-color: var(--game-border);
}

.navbar-toggler-icon {
  filter: invert(1);
}

.offcanvas,
.offcanvas-lg {
  color: var(--game-text);
  background: var(--game-surface);
}

.offcanvas-header {
  border-bottom: 1px solid var(--game-border);
}

.offcanvas-title {
  color: var(--game-lime);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-close {
  filter: invert(1);
}

.dropdown-menu {
  border: 1px solid var(--game-border);
  border-radius: 4px;
  color: var(--game-text);
  background: var(--game-surface);
  box-shadow: var(--game-shadow);
}

.dropdown-item {
  color: var(--game-text);
  font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--game-bg);
  background: var(--game-lime);
}

.dropdown-divider {
  border-color: var(--game-border);
}

.card,
.modal-content,
.list-group-item,
.input-group-text {
  border-color: var(--game-border);
  color: var(--game-text);
  background-color: var(--game-surface);
}

.card {
  border-radius: 4px;
  box-shadow: var(--game-shadow);
}

.card-header,
.card-footer {
  border-color: var(--game-border);
  background-color: var(--game-surface-alt);
}

.card-title {
  color: var(--game-text);
  text-transform: uppercase;
}

.card-subtitle,
.card-text,
.text-muted,
small {
  color: var(--game-muted) !important;
}

.list-group-item {
  border-color: rgba(42, 58, 85, 0.72);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--game-text);
  background-color: var(--game-surface-alt);
}

.form-control,
.form-select {
  border: 1px solid var(--game-border);
  border-radius: 3px;
  color: var(--game-text);
  background-color: #0b1220;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--game-cyan);
  color: var(--game-text);
  background-color: #0b1220;
  box-shadow: 0 0 0 0.2rem rgba(61, 232, 255, 0.15);
}

.form-control::placeholder,
.auth-page input::placeholder {
  color: #b7c9df;
  opacity: 1;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233de8ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.8rem center;
  background-size: 16px 12px;
}

input[type="date"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.form-check-input {
  border-color: var(--game-border);
  background-color: #0b1220;
}

.form-check-input:checked {
  border-color: var(--game-cyan);
  background-color: var(--game-cyan);
}

.btn {
  border-radius: 3px;
  text-transform: uppercase;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  border-color: var(--game-cyan);
  color: #071018;
  background-color: var(--game-cyan);
  box-shadow: 0 0 18px rgba(61, 232, 255, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--game-lime);
  color: #101600;
  background-color: var(--game-lime);
}

.btn-secondary,
.btn-light {
  border-color: var(--game-border);
  color: var(--game-text);
  background-color: var(--game-surface-alt);
}

.btn-outline-dark {
  border-color: var(--game-border);
  color: var(--game-text);
}

.btn-outline-dark:hover {
  border-color: var(--game-cyan);
  color: #071018;
  background-color: var(--game-cyan);
}

.btn-circle {
  border: 1px solid var(--game-border);
  color: var(--game-cyan);
  background-color: #0b1220;
}

.btn-circle:hover {
  border-color: var(--game-cyan);
  color: #071018;
  background-color: var(--game-cyan);
}

.btn-check:checked + .btn-outline-secondary {
  border-color: var(--game-cyan);
  color: #071018;
  background-color: var(--game-cyan);
}

.alert-light {
  border-color: var(--game-border);
  color: var(--game-text);
  background-color: var(--game-surface-alt);
}

.table {
  --bs-table-color: var(--game-text);
  --bs-table-bg: var(--game-surface);
  --bs-table-border-color: var(--game-border);
}

.modal-header,
.modal-footer {
  border-color: var(--game-border);
}

.modal-backdrop {
  --bs-backdrop-bg: #03050a;
}

.progress {
  background-color: #071018;
}

.progress-bar {
  color: #071018;
  background-color: var(--game-cyan);
}

.pagination {
  --bs-pagination-color: var(--game-cyan);
  --bs-pagination-bg: var(--game-surface);
  --bs-pagination-border-color: var(--game-border);
  --bs-pagination-hover-color: #071018;
  --bs-pagination-hover-bg: var(--game-lime);
  --bs-pagination-hover-border-color: var(--game-lime);
  --bs-pagination-active-color: #071018;
  --bs-pagination-active-bg: var(--game-cyan);
  --bs-pagination-active-border-color: var(--game-cyan);
}

.text-primary {
  color: var(--game-cyan) !important;
}

.text-success {
  color: var(--game-lime) !important;
}

.text-warning {
  color: var(--game-yellow) !important;
}

.text-danger {
  color: var(--game-red) !important;
}

.ui-datepicker,
.ui-widget-content {
  border-color: var(--game-border) !important;
  color: var(--game-text) !important;
  background: var(--game-surface) !important;
}

.ui-datepicker-header,
.ui-state-hover,
.ui-widget-content .ui-state-hover {
  border-color: var(--game-cyan) !important;
  color: #071018 !important;
  background: var(--game-cyan) !important;
}

.swal2-popup {
  border: 1px solid var(--game-border) !important;
  color: var(--game-text) !important;
  background: var(--game-surface) !important;
}

.swal2-title,
.swal2-html-container {
  color: var(--game-text) !important;
}

.auth-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100% - 2rem, 460px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 0 2.5rem;
}

.auth-brand {
  text-align: center;
}

.auth-brand img {
  width: min(172px, 48vw);
  height: min(172px, 48vw);
  margin-bottom: 0.35rem;
  border: 2px solid #430653;
  border-radius: 50%;
  object-fit: contain;
  background: var(--game-surface-alt);
  box-shadow: 0 0 22px rgba(67, 6, 83, 0.72);
}

.auth-page h3 {
  margin-bottom: 1rem;
  color: var(--game-lime);
  font-size: 2rem;
}

.auth-page > p {
  margin-bottom: 1.2rem;
  color: var(--game-muted);
  text-align: center;
}

.auth-page form {
  margin-bottom: 1.2rem;
  padding: 1.5rem;
  border: 1px solid var(--game-border);
  border-radius: 4px;
  background: var(--game-surface);
  box-shadow: var(--game-shadow);
}

.auth-page label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--game-text);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-page input {
  width: 100%;
  min-height: 42px;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--game-border);
  border-radius: 3px;
  box-sizing: border-box;
  outline: 0;
  color: var(--game-text);
  background: #0b1220;
}

.auth-page input:focus {
  border-color: var(--game-cyan);
  box-shadow: 0 0 0 0.2rem rgba(61, 232, 255, 0.15);
}

.auth-page .auth-submit {
  width: 100%;
  min-height: 52px;
  font-size: 1.25rem;
}

.auth-page button:not(#google-custon-btn) {
  min-height: 42px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--game-cyan);
  border-radius: 3px;
  color: #071018;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--game-cyan);
}

.auth-page .password-input-wrap {
  position: relative;
  width: 100%;
}

.auth-page .password-input-wrap input {
  padding-right: 2.8rem;
}

.auth-page .toggle-password {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--game-cyan);
}

.auth-page #google-custon-btn {
  width: 100%;
  min-height: 44px;
  margin: -0.35rem 0 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.auth-page #googleSignInBtn {
  display: flex;
  justify-content: center;
}

.auth-page .auth-links {
  color: var(--game-muted);
  text-align: center;
}

@media (max-width: 991px) {
  .mobile-navigation {
    width: min(86vw, 360px);
    z-index: 10002 !important;
  }

  .offcanvas-backdrop {
    z-index: 10001 !important;
  }

  .mobile-navigation .navbar-nav {
    gap: 0.25rem;
  }

  .mobile-navigation .nav-link {
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid rgba(42, 58, 85, 0.6);
  }

  .mobile-navigation .dropdown-menu {
    margin-top: 0.25rem;
  }
}

@media (max-width: 575px) {
  body {
    padding-top: 70px;
  }

  .container {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }
}