/* -------------------------
   Palette & global variables
   -------------------------
   Primary (nav bar)   : --color-primary
   Accent (CTA/hover)  : --color-accent
   Surface / menu BG   : --color-surface
   Muted / neutral     : --color-muted
   Text on dark bg     : --color-on-dark
   Shadow / focus tint : --color-shadow
*/
:root{
  --color-primary: #0B3D91;   /* deep professional blue for navbar (replaces #174EA6) */
  --color-accent:  #34A853;   /* green accent (kept from your original) */
  --color-surface: #1A73E8;   /* mega menu bg (kept similar to original) */
  --color-muted:   #D9E6FF;   /* light neutral for subtle backgrounds/text */
  --color-on-dark: #FFFFFF;    /* text on dark backgrounds */
  --color-shadow:  rgba(11,61,145,0.15); /* shadow tint for components */
  --border-radius: 0.25rem;
  --menu-max-width: 1300px;
  --transition-fast: 0.2s ease;
}

/* Utility: accessible focus */
:focus {
  outline: 3px solid rgba(52,168,83,0.18);
  outline-offset: 2px;
  transition: outline var(--transition-fast);
}

/* -------------------------
   Mega menu general styles
   ------------------------- */
.dropdown-menu.mega-menu {
  left: 40px !important;
  right: auto !important;
  width: 100vw;
  max-width: var(--menu-max-width);
  border-radius: 0;
  border-top: 4px solid var(--color-accent);  /* green accent */
  background-color: var(--color-surface);    /* menu surface blue */
  color: var(--color-on-dark);
  box-shadow: 0 0.5rem 1rem var(--color-shadow);
  padding: 1rem 2rem;
  transition: opacity 0.3s ease, transform 0.22s ease;
  z-index: 1050;
}

/* Mega menu container to control content width */
.mega-menu > .container {
  max-width: var(--menu-max-width);
  padding: 0;
}

/* Mega menu items */
.mega-menu .dropdown-item {
  color: var(--color-on-dark);
  font-weight: 500;
  padding: .5rem 1.25rem;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  background: transparent;
  text-decoration: none;
  line-height: 1.2;
  min-height: 40px; /* improves tap targets */
  white-space: nowrap;
}
.mega-menu .dropdown-item:hover,
.mega-menu .dropdown-item:focus {
  background-color: var(--color-accent);
  color: var(--color-on-dark);
  box-shadow: 0 0 12px rgba(52,168,83,0.35);
  text-decoration: none;
  outline: none;
}

/* ensure icons contrast and spacing */
.mega-menu .bi {
  margin-right: 8px;
  font-size: 1.1rem;
  opacity: 0.95;
}

/* small text contrast improvement */
.mega-menu small,
.mega-menu .muted {
  color: rgba(255,255,255,0.9);
  opacity: 0.9;
}

/* Responsive adjustment */
@media (max-width: 991.98px) {
  .mega-menu {
    max-width: 100% !important;
    width: 100% !important;
    padding: 1rem !important;
    border-radius: 0.5rem;
    left: 0 !important;
  }
  .mega-menu .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem;
  }
  .mega-menu .dropdown-item {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* -------------------------
   Navbar base and hover
   ------------------------- */
.navbar {
  background-color: var(--color-primary) !important;
  box-shadow: 0 2px 6px var(--color-shadow);
}

/* brand and nav items */
.navbar-brand,
.navbar-nav .nav-link {
  color: var(--color-on-dark) !important;
  font-weight: 600;
  transition: color var(--transition-fast);
}

/* hover/active nav link */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-accent) !important;
  background-color: transparent !important;
  text-decoration: none;
}

/* toggler styling (light variant) */
.navbar-light .navbar-toggler {
  border-color: rgba(255,255,255,0.5);
}
.navbar-light .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* Display mega menu on hover for desktop - improved transitions */
@media (min-width: 992px) {
  .navbar-nav .dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* small improvements for contrast and disabled states */
.dropdown-item.disabled,
.dropdown-item[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Optional: CTA button style to use accent color inside menu */
.mega-menu .btn-cta {
  background: var(--color-accent);
  color: var(--color-on-dark);
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 0.35rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(52,168,83,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mega-menu .btn-cta:hover,
.mega-menu .btn-cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(52,168,83,0.18);
}

/* Accessibility: increase hit area and readable font-size */
.navbar-nav .nav-link,
.mega-menu .dropdown-item {
  font-size: 1.05rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/*User profile and logout button*/
/* avatar circle */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d6efd; /* bootstrap primary */
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.navbar .profile-dropdown .dropdown-menu {
  min-width: 200px;
}

  /* Avatar circle */
    .user-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #0d6efd;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
    }
    .navbar .profile-dropdown .dropdown-menu {
      min-width: 200px;
    }
    .navbar-brand img {
  height: 50px;
  width: auto; /* proportion maintain रहे */
}
/* Tag styling: clear, attractive, accessible */
  .tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0}
  .tag-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.35rem .6rem;border-radius:9999px;
    background:#eef4ff;border:1px solid #dbe5ff;color:#0b1b3f;
    font-weight:500;letter-spacing:.1px
  }
  .tag-badge .dot{width:6px;height:6px;border-radius:50%;background:#0d6efd}
  .tag-badge:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(13,110,253,.15)}
  .tag-label{font-size:.85rem;color:#495057;margin-right:.25rem}
/* Container */
/* Centered inline numeric pager (thin, underlined links like screenshot) */
.pager-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.8rem;               /* space between prev, pages, next */
  margin-top:1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:18px;          /* matches screenshot scale */
}

/* remove heavy button visuals, show plain links */
.pager-wrap a {
  display:inline-block;
  min-width:24px;
  height:auto;
  padding:0;
  border:none;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.6px;
  color:#0d6efd;
  font-weight:500;
  line-height:1;
  transition: color .12s ease, text-decoration-thickness .12s ease, transform .08s ease;
  box-shadow:none;
}

/* Slight lift on hover like native link */
.pager-wrap a:hover,
.pager-wrap a:focus {
  transform: translateY(-2px);
  outline: none;
}

/* Current page: make it slightly bolder and remove pointer (not a pill) */
.pager-wrap a.current,
.pager-wrap a[aria-current="page"] {
  color:#0d6efd;
  text-decoration:underline;
  text-decoration-thickness:2px;
  font-weight:700;
  pointer-events:none;
}

/* Make Prev/Next less visually prominent (if you keep them) */
.pager-prev, .pager-next {
  font-size:20px;
  padding:0 4px;
  text-decoration:none;
}

/* Disabled state (prev/next) */
.pager-btn.disabled,
.pager-btn[aria-disabled="true"] {
  opacity:0.45;
  pointer-events:none;
}

/* Small screens: slightly smaller numbers */
@media (max-width:420px) {
  .pager-wrap { font-size:16px; gap:0.5rem; }
  .pager-wrap a { text-underline-offset:3px; text-decoration-thickness:1.4px; }
}

@media (max-width: 575px) {
  .navbar-brand img {
    height: 40px; /* छोटे screens पर छोटा logo */
  }
}