:root {
  --primary-color: #7367F0;
  --sidebar-bg: #ffffff;
  --sidebar-text: #333333;
  --header-bg: #f8f9fa;
  --body-bg: #f5f5f5;
  --accent-color: var(--primary-color);
}

/* Dark mode */
[data-theme="dark"] {
  --sidebar-bg: #1e1e2f;
  --sidebar-text: #e0e0e0;
  --header-bg: #2b2b3c;
  --body-bg: #181820;
}

.floating-theme-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: var(--primary-color);
  color: #fff;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  z-index: 99999 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: none;
  transition: transform 0.3s ease, background 0.3s ease;
}
/* Floating Button */
.theme-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-color);
  color: #fff;
  padding: 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  z-index: 9999;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Customizer Sidebar */
/*.theme-customizer {
  position: fixed;
  top: 28%;
  right: -320px;
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 999;
  padding: 20px;
  overflow-y: auto;
}

  .theme-customizer.open {
    right: 0;
  }

  .theme-customizer h5 {
    margin: 0;
    color: var(--primary-color);
  }*/
.theme-customizer {
  position: fixed;
  top: 0;
  right: -400px; /* Start hidden off-screen */
  width: 400px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
  z-index: 1060; /* Above navbar/footer */
  overflow-y: auto;
  transition: right 0.4s ease;
  padding: 1rem 1.25rem;
  border-bottom-left-radius: 10px !important;
  border-top-left-radius: 10px !important;
}

  /* When active (opened) */
  .theme-customizer.open {
    right: 0;
  }

  /* Close button styling */
  .theme-customizer .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

/* Floating gear button */
/*.floating-theme-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 1065;*/ /* Above everything */
/*box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}*/


.customizer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.color-options {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.color-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

  .color-circle:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease-in-out;
  }

.layout-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

  .layout-btn:hover {
    background: var(--primary-color);
    color: #fff;
  }

/* General Elements to Reflect Theme */
body.dark-mode {
  background-color: #1e1e2d !important;
  color: #fff !important;
}

body.boxed-layout {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

header, .navbar {
  background-color: var(--header-bg);
}

.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
}

.btn-primary,
.badge-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

a, .active-link {
  color: var(--primary-color);
}

.customizer-section {
  margin-top: 20px;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  float: right;
  cursor: pointer;
}

.theme-option,
.layout-option {
  display: inline-block;
  margin: 5px;
  padding: 10px 15px;
  border: 1px solid #ddd;
  cursor: pointer;
  background: #f8f8f8;
  border-radius: 6px;
  transition: background 0.2s;
}

  .theme-option:hover,
  .layout-option:hover {
    background: var(--accent-color);
    color: #fff;
  }

.accent-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.accent-color {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ddd;
}

body[data-theme="light"] {
  background: #ffffff;
  color: #333;
}

body[data-theme="dark"] {
  background: #121212;
  color: #f1f1f1;
}

body[data-theme="blue"] {
  background: #e8f0ff;
  color: #0d2c6c;
}

/* LAYOUT STYLES */
/*body[data-layout="boxed"] {
  max-width: 1200px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}*/

body[data-layout="compact"] {
  font-size: 14px;
  line-height: 1.4;
}

body[data-layout="full"] {
  max-width: 100%;
}

#DataTables_Table_0 {
  width: 100% !important;
  table-layout: auto !important;
}

  #DataTables_Table_0 th,
  #DataTables_Table_0 td {
    white-space: nowrap; /* keep content from wrapping too early */
  }

/* App icons group (place in site.css for maintainability) */
.app-icons {
  gap: .5rem;
  margin-left: .25rem;
}

  .app-icons .app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--bs-body-color, #5a6268);
    border-radius: .375rem;
    transition: background .12s ease, color .12s ease;
  }

    .app-icons .app-icon:hover,
    .app-icons .app-icon:focus {
      background: rgba(0, 123, 255, 0.08);
      color: var(--bs-primary, #0d6efd);
      text-decoration: none;
      outline: none;
    }

/* Slightly smaller on narrow screens */
@media (max-width: 1024px) {
  .app-icons .app-icon {
    width: 32px;
    height: 32px;
  }
}

/* Horizontal menu layout fix: ensure full-width bar below navbar */
.horizontal-menu {
  display: block;
  width: 100%;
  clear: both;
  position: relative; /* keep in document flow */
  box-sizing: border-box;
  background: transparent; /* let theme control background */
  border-bottom: 1px solid rgba(0,0,0,0.04);
  z-index: 5;
}

  .horizontal-menu > .container-fluid,
  .horizontal-menu > .container-xxl,
  .horizontal-menu > .container {
    /* ensure container uses normal horizontal padding and centers content */
    padding-left: var(--bs-gutter-x, 1rem);
    padding-right: var(--bs-gutter-x, 1rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.1rem !important;
    border-radius: 0.375rem;
  }

  .horizontal-menu .nav {
    display: flex;
    justify-content: flex-start; /* keep links starting from left */
    gap: .6rem;
  }

  .horizontal-menu .nav-link {
    white-space: nowrap;
    /*  //padding: .5rem .75rem;*/
  }

/* If the navbar uses a fixed or sticky positioning, ensure the menu sits below it */
#layout-navbar + .horizontal-menu,
.layout-page > .horizontal-menu {
  margin-top: 0;
}

/* Horizontal menu dropdown visuals: remove border and use highlight on hover/show/active */
.horizontal-menu .dropdown-menu {
  border: none;
  box-shadow: none;
  background: #fff; /* keep white background for dropdown items */
  margin-top: .35rem;
  min-width: 12rem;
  padding: .35rem 0;
}

.horizontal-menu .dropdown-item {
  transition: background-color .12s ease, color .12s ease;
}

/* Highlight main nav-link when dropdown is open or hovered, and when active */
.horizontal-menu .nav-item.dropdown.show > .nav-link,
.horizontal-menu .nav-item.dropdown:hover > .nav-link,
.horizontal-menu .nav-link.active,
.horizontal-menu .nav-link:focus {
  background-color: rgba(115,103,240,0.08); /* subtle primary highlight */
  color: var(--primary-color) !important;
  border-radius: .375rem;
}

/* Remove default focus outline for nicer look but keep accessible focus ring */
.horizontal-menu .nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(115,103,240,0.12);
}

/* Dropdown items hover */
.horizontal-menu .dropdown-menu .dropdown-item:hover {
  background-color: rgba(115,103,240,0.04);
  color: var(--bs-body-color, #333);
}

/* Ensure no border on hover for links */
.horizontal-menu .nav-link:hover,
.horizontal-menu .nav-link:active {
  border: none;
}

.container-fluid {
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  height: 4rem !important;
}

.layout-page {
  padding-left: 0 !important;
  border-radius: 0 !important;
}

.layout-navbar.navbar-detached {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f1eeee;
}

.custom-height {
  height: 3rem !important;
}
/*.container-xxl.flex-grow-1.container-p-y {
  padding-top: 0 !important;
}*/
.table-wrapper {
/*  max-height: 240px;*/
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: auto;
}

/*
 * ONE HORIZONTAL SCROLLBAR PER LISTING, NOT TWO.
 *
 * The listing card has two boxes that can scroll sideways, nested:
 *
 *   .card-datatable.table-responsive   <- outer; its bar is drawn BELOW the pager
 *     .dt-container > .row             <- the one that overflows, see below
 *       .table-wrapper                 <- inner; its bar is drawn right under the table
 *
 * The INNER bar is the real one: the table is genuinely wider than the card on a grid with many
 * columns, and scrolling it is how the user reaches the last column.
 *
 * The OUTER bar scrolls NOTHING WORTH SEEING. What overflows there is not the table - the
 * .table-wrapper clips that - it is the `.row` wrapping the whole dt-container. Bootstrap gives
 * every .row negative left/right margins of half a gutter, so it is reliably ~12px wider than the
 * box it sits in. Measured on the Sub Benefit card: the row is 1310px inside a 1298px container.
 * Twelve pixels of empty gutter is enough to arm .table-responsive's overflow-x and draw a full
 * second scrollbar across the bottom of the card, under the pager, that scrolls past the edge of
 * the content and back.
 *
 * So the outer box is told not to scroll sideways. Nothing becomes unreachable: the columns are
 * still scrolled by .table-wrapper, and the header, search and pager rows all fit.
 *
 * WHY A COMPOUND SELECTOR. .card-datatable above already asks for overflow:hidden, but the bare
 * .table-responsive rule has the same specificity and comes later, so it wins the x-axis - and
 * Bootstrap's own .table-responsive would win it anyway. Two class names settle it against both,
 * without touching .table-responsive, which other markup is free to use on its own.
 *
 * .card-datatable appears only in _GridCard.cshtml, and every use of it wraps its table in a
 * .table-wrapper, so no listing loses a scrollbar it was relying on.
 */
.card-datatable.table-responsive {
  overflow-x: hidden;
}

/*.card-datatable {
  overflow: hidden;*/ /* stop outer scroll */
/*}*/

.card-datatable {
  overflow: hidden;
}

.table-responsive {
  overflow-x: auto;
}

.userListingCard {
  margin-top: 0.1rem !important;
  /*padding-bottom: 50%;*/
}


.userMargin {
  margin-right: 10px !important;
}

.userlistingcontentbetween {
  margin: 0rem !important;
}

.footer-section {
  flex-shrink: 0;
}
.btn-primary-radius {
  border-radius: 4px !important;
}

.layout-page .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background-color: #fff;
}

/* Fix the horizontal menu below the navbar */
.layout-page .container-fluid .menu-inner,
.layout-page .container-fluid > .horizontal-menu {
  position: fixed;
  top: 64px; /* Height of navbar, adjust as needed */
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: #fff;
}

/* Push the content down to prevent overlap */
/*.layout-page .content-wrapper {
  margin-top: 58px !important;*/ /* Sum of navbar + menu height */
/*}*/
.layout-page .content-wrapper {
  margin-top: 58px; /* Navbar (64) + Menu (~66) */
  margin-bottom: 60px; /* Footer height */
  /*overflow-y: auto;
  height: calc(100vh - 190px);*/ /* 100vh minus header+footer */
  /*padding-bottom: 80px;*/ /* ✅ NEW: Prevent footer overlap */
}

/* Optional: Ensure the fixed header area doesn’t scroll */

.itemcontainer {
  padding-top: 1rem !important;
}

.layout-page footer.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
}

.pagination-margin-left {
  margin: 2px 10px !important;
}

.pagination .page-link {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.pagination .active .page-link {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.header, footer {
  background-color: var(--primary-color);
  color: #fff;
}


.dropdown-submenu {
  position: relative;
}

  /* Submenu positioning */
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    display: none;
  }

  /* Show submenu on hover */
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }

  /* Arrow alignment */
  .dropdown-submenu > a {
    cursor: pointer;
  }

  /* Dot before submenu items */
  .dropdown-submenu .dropdown-menu .dropdown-item {
    position: relative;
    padding-left: 1.75rem;
  }

    .dropdown-submenu .dropdown-menu .dropdown-item::before {
      content: "•";
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      color: #6c757d; /* Bootstrap muted */
    }

.form-floating > label {
  pointer-events: none;
}

.password-eye {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  color: #6c757d;
}

.locked-dropdown {
  background-color: #eef2f7 !important;
  border: 1px dashed #6c757d !important;
}

/* for Otp Screen*/
.success-icon i {
  font-size: 48px;
  color: #28c76f; /* success green */
  animation: scaleIn 0.4s ease;
}

@keyframes scaleIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fade-transition {
  transition: all 0.4s ease;
}
 


.floating-icon-group {
  position: relative;
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #8592a3;
  z-index: 2;
}

.floating-icon-group .form-control {
  padding-left: 40px;
  height: 52px;
}

.floating-icon-group label {
  position: absolute;
  left: 40px;
  top: 14px;
  background: #fff;
  padding: 0 5px;
  color: #8592a3;
  font-size: 14px;
  transition: 0.2s ease;
  pointer-events: none;
}

/* FLOAT EFFECT */
.floating-icon-group .form-control:focus + label,
.floating-icon-group .form-control:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  color: var(--bs-primary);
}

/* FOCUS EFFECT */
.floating-icon-group .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(115,103,240,0.15);
}
.complexity-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  align-items: center;
  gap: 10px;
}

.count-box {
  position: relative;
}

  .count-box .input-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
  }

  .count-box input {
    padding-left: 28px;
    height: 36px;
  }

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
}
.floating-icon-group select {
  padding-left: 38px;
  height: 48px;
}

  .floating-icon-group select:focus + label,
  .floating-icon-group select:not([value=""]) + label {
    top: -8px;
    font-size: 12px;
    color: #7367f0;
  }
.password-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border-left: 4px solid #4a90e2;
}

.password-card-header {
  font-size: 13px;
  font-weight: 600;
  color: #4a90e2;
  margin-bottom: 8px; 
  align-items: center;
}

.password-rules {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

  .password-rules li {
    font-size: 13px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
  }

    .password-rules li.valid {
      color: #28c76f;
    }

    .password-rules li.invalid {
      color: #ea5455;
    }

/* 🔥 STRENGTH BAR */
.password-strength {
  height: 6px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

#strengthBar {
  height: 100%;
  width: 0%;
  transition: all 0.3s ease;
  border-radius: 10px;
}
/*Entity Tabs Start */
.tab-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-scroll {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  border-bottom: 1px solid #ddd;
}

  .tab-scroll::-webkit-scrollbar {
    display: none;
  }

.nav-pills .nav-link {
  border-radius: 20px;
  margin-right: 8px;
  padding: 6px 16px;
  background: #f5f5f5;
  color: #333;
  white-space: nowrap;
}

  .nav-pills .nav-link.completed {
    background: #198754;
    color: #fff;
  }

  .nav-pills .nav-link.disabled {
    pointer-events: none;
    opacity: 0.5;
  }

.scroll-btn {
  border: none;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
}
/*Entity Tabs End */

/* =====================================================================
   RESPONSIVE ENHANCEMENTS  (UI/UX only — no logic / markup changes)
   ---------------------------------------------------------------------
   Desktop (>= 992px) behaviour is intentionally left untouched.
   These rules make the custom navbar, horizontal menu, fixed layout
   offsets, data-table listings, forms and the theme customizer adapt
   gracefully on tablets and phones.
   ===================================================================== */

/* --- Theme customizer never wider than the viewport --------------- */
.theme-customizer {
  max-width: 100vw;
}

@media (max-width: 575.98px) {
  .theme-customizer {
    width: 100%;
    right: -100%; /* fully hidden; .open keeps right:0 (higher specificity) */
  }

  .floating-theme-btn,
  .theme-toggle-btn {
    bottom: 16px;
    right: 16px;
    padding: 12px;
    font-size: 18px;
  }
}

/* --- Tablet & phone: let the shell flow naturally ------------------ */
/* On small screens the fixed navbar / horizontal menu / footer with
   hard-coded pixel offsets cause content overlap. Returning them to the
   normal document flow removes all the fragile offset maths. */
@media (max-width: 991.98px) {
  .layout-page .navbar,
  .layout-navbar {
    position: static !important;
  }

  .layout-page .container-fluid {
    height: auto !important;
  }

  .layout-page .container-fluid .menu-inner,
  .layout-page .container-fluid > .horizontal-menu {
    position: static !important;
    top: auto !important;
  }

  .layout-page .content-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .layout-page footer.footer {
    position: static !important;
  }
}

/* --- Custom (#navbar-main) navbar --------------------------------- */
@media (max-width: 991.98px) {
  #navbar-main {
    height: auto !important;
    min-height: 56px;
  }

  #navbar-main .container-xxl {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .amazon-user-text {
    display: none !important; /* hide "Welcome / username" text to save space */
  }

  .amazon-logo {
    font-size: 16px;
    margin-right: 10px;
  }

  .amazon-right {
    gap: 10px;
    margin-left: 12px;
  }
}

@media (max-width: 575.98px) {
  /* Search bar gets its own full-width row so it stays usable */
  .amazon-search {
    order: 3;
    flex: 0 0 100%;
    max-width: 100% !important;
  }
}

/* --- Custom horizontal menu -> LEFT off-canvas drawer on mobile/tablet ---
   Sneat-style: a hamburger in the navbar slides a vertical menu in from the
   left over a dimmed backdrop. All injected chrome is hidden on desktop. */
.menu-mobile-toggle,
.menu-backdrop,
.menu-drawer-header {
  display: none;
}

@media (max-width: 991.98px) {
  /* Hamburger: compact icon button at the left of the navbar */
  .menu-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4b5563;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .menu-mobile-toggle:hover {
    background: #f3f4f6;
    color: #111827;
  }

  /* The menu becomes a fixed drawer that slides in from the LEFT */
  .layout-page .container-fluid > .horizontal-menu,
  .horizontal-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px;
    max-width: 80vw;
    height: 100vh;
    margin: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: #fff;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10050;
    display: block;
  }

  /* must out-rank the base ".layout-page .container-fluid > .horizontal-menu"
     selector above, otherwise the drawer never slides into view */
  .horizontal-menu.mobile-open,
  .layout-page .container-fluid > .horizontal-menu.mobile-open {
    transform: translateX(0) !important;
  }

  /* Drawer header (brand + close button, injected by responsive-menu.js) */
  .menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #e6e9ef;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    z-index: 1;
  }

  .menu-drawer-close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
  }

  .horizontal-menu .container-xxl.custom-height,
  .horizontal-menu .container-xxl {
    height: auto !important;
    display: block;
    padding-left: 0;
    padding-right: 0;
  }

  .horizontal-menu nav.nav {
    display: block;
    padding: 0;
  }

  .horizontal-menu ul.nav {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .horizontal-menu .nav-item {
    width: 100%;
    flex: 0 0 auto;
  }

  .horizontal-menu .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid #f1f3f7;
  }

  /* drop the desktop active-underline inside the drawer */
  .horizontal-menu .nav-link.active {
    border-bottom: 1px solid #f1f3f7;
  }

  /* keep icon + label left-aligned; fixed-width icon so labels line up */
  .horizontal-menu .nav-link .menu-icon,
  .horizontal-menu .dropdown-item .menu-icon {
    width: 1.25rem;
    min-width: 1.25rem;
    text-align: center;
    flex: 0 0 auto;
  }

  /* push the expand caret to the far right of the row */
  .horizontal-menu .nav-link.dropdown-toggle::after,
  .horizontal-menu .dropdown-item.dropdown-toggle::after {
    margin-left: auto;
  }

  /* Inline accordion sub-menus (toggled via .mobile-show by JS) */
  .horizontal-menu .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    transform: none !important;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    display: none;
    background: #fafbfc;
  }

  .horizontal-menu .dropdown-menu.mobile-show {
    display: block;
  }

  /* stop a stray touch :hover from auto-opening sub-menus on mobile */
  .horizontal-menu .dropdown-submenu:hover > .dropdown-menu {
    display: none;
  }

  .horizontal-menu .dropdown-submenu:hover > .dropdown-menu.mobile-show {
    display: block;
  }

  .horizontal-menu .dropdown-item {
    padding: 11px 16px 11px 32px;
    white-space: normal;
  }

  .horizontal-menu .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 48px;
  }

  /* Dimmed backdrop behind the open drawer */
  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10040;
  }

  .menu-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Lock background scrolling while the drawer is open */
  body.menu-drawer-open {
    overflow: hidden;
  }
}

/* --- Data-table listings ------------------------------------------ */
@media (max-width: 767.98px) {
  /* Replace the fixed-height inner scroll with natural page scroll;
     horizontal scrolling is still handled by .table-responsive. */
  .table-wrapper {
    max-height: none !important;
  }

  .userListingCard .dt-buttons {
    justify-content: flex-start;
  }

  .userListingCard .dt-length,
  .userListingCard .dt-search {
    width: 100%;
  }

  .userListingCard .dt-search {
    margin-top: 0.5rem;
  }

  .userListingCard .dt-search input {
    margin-left: 0.5rem !important;
  }

  .userMargin {
    margin-right: 0 !important;
  }
}

/* --- Forms & cards: comfortable spacing on phones ----------------- */
@media (max-width: 575.98px) {
  .card-label,
  .card-title {
    font-size: 1rem;
  }

  .complexity-row {
    grid-template-columns: 1fr; /* stack label & control */
  }
}


/*
   Outlined Status field (_StatusToggle with Outlined = true).

   Drawn to match the floating-label inputs it shares a row with: same height, same border and
   radius, with the caption sitting on the border line instead of above the control - so the
   Active / Inactive buttons land on the same baseline as the input boxes beside them.
*/
.status-field {
  position: relative;
  height: calc(3.5rem + 2px);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  align-items: center;
  padding: 0 .85rem;
}

.status-field-label {
  position: absolute;
  top: 0;
  left: .75rem;
  transform: translateY(-50%);
  background: var(--bs-body-bg);
  padding: 0 .35rem;
  font-size: .8rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.status-field .status-toggle .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
   Page alerts lifted out of the document flow.

   Shown in the flow, the success/error banner added its own height to the top of the page when it
   appeared and took it away again when it auto-hid, so the form and the grid slid down and back on
   every save. Floating them keeps the message just as visible and the layout completely still.
   The container ignores the pointer so it never covers a control that is underneath it; the alert
   itself still takes clicks, for its close button.
*/
.page-alerts-floating {
  position: fixed;
  /* Clear of the theme navbar, which is fixed on this layout. */
  top: 5rem;
  right: 1rem;
  z-index: 1080;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

  .page-alerts-floating .alert {
    pointer-events: auto;
    box-shadow: 0 .25rem .875rem rgba(20, 20, 43, .16);
    margin-bottom: .75rem;
  }

/* The row currently loaded in the form above, so it is obvious which record is being edited. */
.row-editing > td {
  background-color: rgba(105, 108, 255, .08);
  box-shadow: inset 2px 0 0 var(--bs-primary, #696cff);
}

/* Keeps the grid from collapsing and springing back while a reload is in flight. */
.table-wrapper {
  transition: min-height .15s ease-out;
}

/* Form footer: keeps the buttons and their hint on one baseline. */
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: .5rem;
}

.form-actions-hint {
  font-size: .8125rem;
}

  .form-actions-hint kbd {
    padding: .1rem .35rem;
    font-size: .75rem;
  }

/*
   Export button + menu on a listing card.

   The menu is placed by these rules rather than by Popper: the toggle carries
   data-bs-display="static", because inside .table-responsive - a scrolling container - Popper
   measured the button against the wrong offset parent and threw the menu to the bottom of the page.

   A static menu is positioned against its nearest POSITIONED ancestor, so the button group must be
   one. .btn-group is position: relative in Bootstrap, but the DataTables Buttons stylesheet resets
   it to "initial" under a .dt-buttons wrapper; the markup drops that wrapper and this states the
   requirement outright, so neither can be undone by accident.

   The offsets themselves are spelled out because Bootstrap applies its own (.dropdown-menu
   top: 100%, .dropdown-menu-end right: 0) only through the [data-bs-popper] attribute, which a
   static menu never gets.
*/
.export-btn-group {
  position: relative;
}

.export-dropdown-menu {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: .25rem;
  min-width: 10rem;
}

  .export-dropdown-menu .dropdown-item {
    padding-top: .45rem;
    padding-bottom: .45rem;
  }

/* ==========================================================================
   APP WIDTH — one shared maximum for the search bar, the menu and the content
   ==========================================================================

   THE PROBLEM. Three separate places each wrap their row in .container-xxl,
   which Bootstrap caps at 1320px from 1400px upwards:

     _NavbarPartial.cshtml:209   #navbar-main    (logo, search, icons, profile)
     _HorizontalMenu.cshtml:115  .horizontal-menu (Product / Masters / Logs)
     _ContentNavbarLayout:20     page content     (forms and grids)

   On a 1920px screen that leaves roughly 300px of unused white on each side of
   every one of them. Nothing is misaligned — it is uniformly too narrow, so
   the app reads as a narrow strip floating in an empty page.

   THE FIX. Raise the cap in all three, together, to one shared value. Keeping
   a single number is the point: widen the content alone and the page content
   visibly overhangs the search bar and menu above it, which looks far worse
   than the original. If this value is ever changed, change it for all three.

   WHY A CAP AT ALL, AND WHY 1700px. Full-bleed (container-fluid) would stretch
   a data row the entire width of an ultrawide monitor, where the eye loses its
   place tracking from the code column to the status column. 1700px is wide
   enough that the master grids gain roughly 380px of usable width and a
   4-column form row still has generous columns, while a table row stays
   scannable. Below 1700px viewports — 1366, 1440, 1536, 1600, which is most
   screens — this is effectively edge to edge with the standard gutter.

   SCOPE. Each selector names its own region rather than overriding
   .container-xxl globally, so no other use of that class is affected. The only
   pre-existing rules on these selectors are inside a max-width:991.98px media
   query for small screens, which this does not touch.
   -------------------------------------------------------------------------- */

#navbar-main > .container-xxl,
.horizontal-menu > .container-xxl,
.content-wrapper > .container-xxl {
  max-width: 1700px;
}

/* The boxed layout is an explicit opt-in and keeps its own narrower frame. */
body.boxed-layout #navbar-main > .container-xxl,
body.boxed-layout .horizontal-menu > .container-xxl,
body.boxed-layout .content-wrapper > .container-xxl {
  max-width: 1200px;
}

/* ==========================================================================
   MASTER INSIGHT RAIL — the summary column beside the master screens
   ==========================================================================
   Paired with Pages/Shared/_MasterInsightRail.cshtml and
   wwwroot/js/appjs/master-insight-rail.js. Scoped entirely to .master-shell,
   which only the master pages render, so no other screen is affected.
   -------------------------------------------------------------------------- */

:root {
  --rail-active: #22a06b;
  --rail-inactive: #e05252;
  --rail-track: #e6e8ec;
}

.master-shell {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* min-width:0 is load-bearing: without it a flex item refuses to shrink below its
   content's intrinsic width, and a wide data grid would push the rail off screen
   instead of scrolling inside its own column. */
.master-shell-main {
  flex: 1 1 auto;
  min-width: 0;
}

.master-rail {
  flex: 0 0 330px;
  width: 330px;
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rail-card {
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: .625rem;
  padding: 1rem 1.125rem 1.125rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.rail-title {
  margin: 0 0 .875rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a93a2;
}

/* ---- donut ---- */
.rail-donut {
  width: 132px;
  height: 132px;
  margin: .25rem auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--rail-track) 0 100%);
  transition: background .35s ease;
}

.rail-donut-hole {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.rail-donut-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: #2f3541;
}

.rail-donut-caption {
  font-size: .6875rem;
  color: #8a93a2;
}

/* ---- legend ---- */
.rail-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rail-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem 0;
  font-size: .8125rem;
  color: #4a5160;
}

.rail-legend-label { flex: 1 1 auto; }
.rail-legend b { font-weight: 600; color: #2f3541; }

.rail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
}

.rail-dot-active { background: var(--rail-active); }
.rail-dot-inactive { background: var(--rail-inactive); }

/* ---- quick filter ---- */
.rail-filters {
  display: flex;
  gap: .375rem;
}

.rail-filter {
  flex: 1 1 0;
  padding: .375rem .25rem;
  font-size: .75rem;
  font-weight: 500;
  color: #5a6172;
  background: #f5f6f8;
  border: 1px solid transparent;
  border-radius: .375rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.rail-filter:hover { background: #eceef2; }

.rail-filter.is-active {
  background: #fff;
  color: var(--bs-primary, #4a90e2);
  border-color: currentColor;
  font-weight: 600;
}

.rail-hint {
  margin: .625rem 0 0;
  font-size: .75rem;
  color: #8a93a2;
}

/* ---- shortcuts ---- */
.rail-keys {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rail-keys li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3125rem 0;
  font-size: .78125rem;
  color: #5a6172;
}

.rail-keys kbd,
.rail-keys .rail-key-text {
  flex: 0 0 auto;
  background: #f3f4f6;
  border: 1px solid #e3e5e9;
  border-radius: .25rem;
  padding: .0625rem .3125rem;
  font-size: .6875rem;
  color: #4a5160;
  white-space: nowrap;
}

.rail-keys span:last-child { color: #8a93a2; }

/* ---- stack below the grid once the rail would squeeze the table ---- */
@media (max-width: 1399.98px) {
  .master-shell { flex-direction: column; }

  .master-rail {
    flex: 1 1 auto;
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .master-rail .rail-card { flex: 1 1 260px; }
}