/* ==========================================================================
   admin-theme.css
   Shared chrome for every page that uses _Layout.cshtml: the top navbar,
   the page background and scrollbars.

   Loaded from _Layout.cshtml AFTER index.css, so page-specific stylesheets
   (which are linked inside the view body) still load later and win.

   Scope note: _Layout is NOT used by the print/login/parking views
   (PrintFaktor, PrintShoppingList, Login, ParkingFish, NightStatus,
   CheckMinibar all use _LayoutEmpty or Layout = null), so nothing here
   reaches printed output.

   Markup is untouched. The nav links carry inline `background-color`
   (darkblue / rgb(187,3,3) / rgb(150,0,5)) straight from _Layout.cshtml;
   those inline colours are deliberately left alone and only the geometry,
   typography and states are restyled around them.
   ========================================================================== */

:root {
  --ad-bar: #232936;
  --ad-bar-2: #1d222c;
  --ad-bar-border: rgba(255, 255, 255, 0.09);
  --ad-ink: #e8ecf3;
  --ad-ink-soft: #b9c2d0;
  --ad-surface: #242a35;
  --ad-accent: #3b82f6;
  --ad-page: #1b1e24;
  --ad-page-2: #23272f;
}

/* ==========================================================================
   1. Page background
   ========================================================================== */

body {
  background-color: var(--ad-page);
  background-image: radial-gradient(
    120% 80% at 50% 0%,
    var(--ad-page-2) 0%,
    var(--ad-page) 60%
  );
  background-attachment: fixed;
}

/* ==========================================================================
   2. Navbar
   `.bg-light` is a Bootstrap utility and carries !important, so the bar
   background is the one place that has to answer with !important too.
   ========================================================================== */

.menu {
  display: block;
}

.menu .navbar {
  background-color: var(--ad-bar) !important;
  background-image: linear-gradient(180deg, var(--ad-bar) 0%, var(--ad-bar-2) 100%);
  border-bottom: 1px solid var(--ad-bar-border);
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.9);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.menu .navbar .container-fluid {
  gap: 0.35rem;
  padding-inline: 1rem;
}

/* Brand / greeting */
.menu .navbar .navbar-brand {
  color: var(--ad-ink);
  font-size: 0.98rem;
  font-weight: 700;
  opacity: 0.95;
}

.menu .navbar .navbar-brand:hover {
  color: var(--ad-ink);
}

/* --- plain links (مدیریت کالا, گزارش گیری, سایر) ---------------------- */

.menu .navbar .navbar-nav .nav-link {
  color: var(--ad-ink-soft);
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0.15rem 0.15rem;
  padding: 0.5rem 0.85rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu .navbar .navbar-nav .nav-link:hover,
.menu .navbar .navbar-nav .nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.07);
}

.menu .navbar .navbar-nav .nav-link.active {
  color: #fff;
}

/* --- the coloured action pills ---------------------------------------
   These keep their inline background-color; only shape/weight/state are
   restyled, which is why no !important is needed here. */

.menu .navbar .navbar-nav .nav-link.btn,
.menu .navbar .btnLogout {
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.menu .navbar .navbar-nav .nav-link.btn:hover,
.menu .navbar .btnLogout:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

/* The current page gets a readable ring rather than a colour change, so the
   inline background stays authoritative. */
.menu .navbar .navbar-nav .nav-link.btn.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 6px 14px -8px rgba(0, 0, 0, 0.9);
}

/* --- dropdowns -------------------------------------------------------- */

.menu .navbar .dropdown-menu {
  background-color: var(--ad-surface);
  border: 1px solid var(--ad-bar-border);
  border-radius: 10px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  padding: 0.4rem;
  margin-top: 0.4rem;
}

.menu .navbar .dropdown-menu .dropdown-item {
  color: var(--ad-ink-soft);
  border-radius: 6px;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
}

.menu .navbar .dropdown-menu .dropdown-item:hover,
.menu .navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.menu .navbar .dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--ad-bar-border);
  opacity: 1;
  margin: 0.35rem 0.25rem;
}

/* --- collapsed / mobile ----------------------------------------------- */

.menu .navbar .navbar-toggler {
  border: 1px solid var(--ad-bar-border);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
}

.menu .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* `.navbar-light` ships a dark toggler glyph, which is invisible on the
   dark bar — flip it rather than swapping in another data-URI. */
.menu .navbar .navbar-toggler .navbar-toggler-icon {
  filter: invert(1) brightness(1.6);
}

.menu .navbar .flex-grow-1 .btn {
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media only screen and (max-width: 1199px) {
  .menu .navbar .navbar-collapse {
    padding-top: 0.5rem;
  }

  .menu .navbar .navbar-nav .nav-link.btn,
  .menu .navbar .btnLogout {
    display: block;
    text-align: center;
  }
}

/* ==========================================================================
   3. Scrollbars
   ========================================================================== */

* {
  scrollbar-color: #4b5566 transparent;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-thumb {
  background: #4b5566;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #667286;
  background-clip: content-box;
}