/**
 * Vuexy light / dark / system + menü köprüsü
 * Model: Turuncu Motorcycle-Tour-UI (vuexy-turuncu-bridge)
 * DOM: football-service-ui (body.football-vuexy, .app-content.content)
 */

:root {
  --vx-primary: #7367f0;
  --vx-primary-deep: #5e50ee;
  --vx-primary-soft: rgba(115, 103, 240, 0.12);
  --vx-primary-glow: rgba(115, 103, 240, 0.35);
  --vx-body-bg: #f8f8f8;
  --vx-card-bg: #fff;
  --vx-border: #ebe9f1;
  --vx-text: #6e6b7b;
  --vx-heading: #5e5873;
  --vx-muted: #b9b9c3;
  --vx-sidebar-width: 260px;
  --vx-sidebar-collapsed-width: 80px;
  --vx-radius: 0.428rem;
  --vx-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  --vx-navbar-height: 4.85rem;
}

body.football-vuexy {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  background: var(--vx-body-bg) !important;
  color: var(--vx-text);
}

body.football-vuexy.ui-appearance-dark,
body.football-vuexy.dark-layout {
  color-scheme: dark;
  --vx-body-bg: #161d31;
  --vx-card-bg: #283046;
  --vx-border: rgba(255, 255, 255, 0.08);
  --vx-text: #d0d2d6;
  --vx-heading: #f8f8f8;
  --vx-muted: #b4b7bd;
  --vx-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35);
  background: var(--vx-body-bg) !important;
  color: var(--vx-text);
}

@media (prefers-color-scheme: dark) {
  body.football-vuexy.ui-appearance-system {
    color-scheme: dark;
    --vx-body-bg: #161d31;
    --vx-card-bg: #283046;
    --vx-border: rgba(255, 255, 255, 0.08);
    --vx-text: #d0d2d6;
    --vx-heading: #f8f8f8;
    --vx-muted: #b4b7bd;
    --vx-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35);
    background: var(--vx-body-bg) !important;
    color: var(--vx-text);
  }
}

/* ——— Primary ——— */
body.football-vuexy .btn-primary,
body.football-vuexy .page-link,
body.football-vuexy .scroll-top.btn-primary {
  background-color: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  color: #fff !important;
  border-radius: var(--vx-radius);
}

body.football-vuexy .btn-primary:hover,
body.football-vuexy .btn-primary:focus {
  background-color: var(--vx-primary-deep) !important;
  border-color: var(--vx-primary-deep) !important;
}

body.football-vuexy .dropdown-item:hover,
body.football-vuexy .dropdown-item:focus,
body.football-vuexy .text-primary,
body.football-vuexy .brand-text {
  color: var(--vx-primary) !important;
}

body.football-vuexy .main-menu .navbar-header .nav-toggle .toggle-icon,
body.football-vuexy .main-menu .navbar-header .nav-toggle .collapse-toggle-icon {
  color: var(--vx-primary) !important;
}

/* ——— Main menu (Vuexy has-sub) ——— */
body.football-vuexy .main-menu .brand-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vx-heading);
}

body.football-vuexy .main-menu .navigation-main > li.nav-item > a,
body.football-vuexy .main-menu .navigation-main > li.nav-item > .d-flex {
  border-radius: var(--vx-radius);
}

body.football-vuexy .main-menu .navigation-main > li.nav-item.active > a {
  background: linear-gradient(
    118deg,
    var(--vx-primary),
    color-mix(in srgb, var(--vx-primary) 85%, transparent)
  ) !important;
  box-shadow: 0 0 10px 1px var(--vx-primary-glow);
  color: #fff !important;
}

body.football-vuexy .main-menu .navigation-main > li.nav-item.active > a i {
  color: #fff !important;
}

body.football-vuexy .main-menu .menu-content > li.active > a {
  background: var(--vx-primary-soft) !important;
  color: var(--vx-primary-deep) !important;
  font-weight: 600;
  box-shadow: none !important;
  border-radius: var(--vx-radius);
}

body.football-vuexy .main-menu .menu-content > li.active > a i,
body.football-vuexy .main-menu .menu-content > li.active > a .menu-item {
  color: var(--vx-primary-deep) !important;
}

body.football-vuexy .main-menu.menu-light .navigation > li .active {
  background: transparent !important;
  box-shadow: none !important;
}

body.football-vuexy .main-menu.menu-light .navigation .menu-content > li.active > a {
  background: var(--vx-primary-soft) !important;
  color: var(--vx-primary-deep) !important;
}

body.football-vuexy .main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a,
body.football-vuexy .main-menu.menu-light .navigation > li.sidebar-group-active > a {
  color: var(--vx-primary-deep) !important;
  background: var(--vx-primary-soft) !important;
  box-shadow: none !important;
  border-radius: var(--vx-radius);
}

body.football-vuexy .main-menu.menu-light .navigation > li.active > a {
  background: linear-gradient(
    118deg,
    var(--vx-primary),
    color-mix(in srgb, var(--vx-primary) 85%, transparent)
  ) !important;
  box-shadow: 0 0 10px 1px var(--vx-primary-glow) !important;
  color: #fff !important;
}

body.football-vuexy.dark-layout .main-menu .menu-content > li.active > a,
body.football-vuexy.ui-appearance-dark .main-menu .menu-content > li.active > a {
  background: var(--vx-primary-soft) !important;
  color: var(--vx-primary) !important;
}

body.football-vuexy.dark-layout .main-menu .menu-content > li.active > a i,
body.football-vuexy.dark-layout .main-menu .menu-content > li.active > a .menu-item,
body.football-vuexy.ui-appearance-dark .main-menu .menu-content > li.active > a i,
body.football-vuexy.ui-appearance-dark .main-menu .menu-content > li.active > a .menu-item {
  color: var(--vx-primary) !important;
}

body.football-vuexy.dark-layout .main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a,
body.football-vuexy.dark-layout .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
  color: var(--vx-primary) !important;
  background: var(--vx-primary-soft) !important;
}

/* ——— Content area ——— */
body.football-vuexy .app-content.content,
body.football-vuexy .content.app-content {
  margin-left: var(--vx-sidebar-width) !important;
  background: var(--vx-body-bg) !important;
  min-height: 100vh;
}

body.football-vuexy.menu-collapsed .app-content.content,
body.football-vuexy.menu-collapsed .content.app-content {
  margin-left: var(--vx-sidebar-collapsed-width) !important;
}

body.football-vuexy.menu-collapsed .main-menu {
  width: var(--vx-sidebar-collapsed-width) !important;
}

@media (max-width: 1199px) {
  body.football-vuexy .app-content.content,
  body.football-vuexy .content.app-content {
    margin-left: 0 !important;
  }

  body.football-vuexy.vertical-layout.vertical-menu-modern .main-menu,
  body.football-vuexy.vertical-layout.vertical-overlay-menu .main-menu {
    width: min(var(--vx-sidebar-width), 85vw) !important;
    max-width: 85vw;
    transition: transform 0.25s ease;
    z-index: 1041 !important;
    position: fixed !important;
    top: 0;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  body.football-vuexy.vertical-layout.vertical-menu-modern:not(.menu-open) .main-menu,
  body.football-vuexy.vertical-layout.vertical-overlay-menu:not(.menu-open) .main-menu {
    transform: translate3d(-110%, 0, 0) !important;
  }

  body.football-vuexy.menu-open.vertical-layout.vertical-menu-modern .main-menu,
  body.football-vuexy.menu-open.vertical-layout.vertical-overlay-menu .main-menu {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ——— Cards / forms ——— */
body.football-vuexy .card {
  background-color: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-border) !important;
  box-shadow: var(--vx-shadow) !important;
  border-radius: var(--vx-radius);
  color: var(--vx-text);
}

body.football-vuexy .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--vx-border) !important;
  color: var(--vx-heading);
}

body.football-vuexy .card .card-header h5,
body.football-vuexy .card .card-title,
body.football-vuexy .form-label,
body.football-vuexy .content-header-title {
  color: var(--vx-heading) !important;
}

body.football-vuexy .dropdown-item {
  color: var(--vx-text) !important;
}

body.football-vuexy .dropdown-menu {
  background-color: var(--vx-card-bg);
  border-color: var(--vx-border);
}

body.football-vuexy.ui-appearance-dark .header-navbar,
body.football-vuexy.dark-layout .header-navbar {
  background: var(--vx-card-bg) !important;
}

/* Auth / login blank page also follows appearance */
body.football-vuexy.blank-page.ui-appearance-dark,
body.football-vuexy.blank-page.dark-layout {
  background: var(--vx-body-bg) !important;
}

body.football-vuexy.blank-page.ui-appearance-dark .card,
body.football-vuexy.blank-page.dark-layout .card {
  background: var(--vx-card-bg) !important;
  color: var(--vx-text);
}

body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper.auth-v2 .auth-inner,
body.football-vuexy.blank-page.dark-layout .auth-wrapper.auth-v2 .auth-inner,
body.football-vuexy.blank-page.ui-appearance-dark .auth-bg,
body.football-vuexy.blank-page.dark-layout .auth-bg {
  background: var(--vx-card-bg) !important;
  color: var(--vx-text);
}

body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .form-control,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .form-control,
body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .input-group-text,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .input-group-text {
  background-color: #161d31 !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-text) !important;
}

body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .form-label,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .form-label,
body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .card-text,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .card-text,
body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper p,
body.football-vuexy.blank-page.dark-layout .auth-wrapper p {
  color: var(--vx-text) !important;
}

body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .border,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .border {
  border-color: var(--vx-border) !important;
}

body.football-vuexy.blank-page.ui-appearance-dark .auth-wrapper .btn-outline-secondary,
body.football-vuexy.blank-page.dark-layout .auth-wrapper .btn-outline-secondary {
  color: var(--vx-text) !important;
  border-color: var(--vx-border) !important;
}

/* Appearance picker in dropdown */
.dropdown-menu .ui-appearance-picker {
  min-width: 220px;
  max-width: 280px;
}

/* Navbar quick toggle */
.nav-item .ui-appearance-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--vx-heading);
}

.nav-item .ui-appearance-quick:hover {
  background: var(--vx-primary-soft);
  color: var(--vx-primary);
}