@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
   font-family: 'Inter', sans-serif;
}
.card { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.table-responsive { overflow-x: auto; }

/* From the VB MasterPage inline <style> — bold nav links to match the
   original portal look. */
.navbar-nav .nav-link {
   font-size: 1.0rem;
   font-weight: bold;
}
.navbar-nav .dropdown-menu .dropdown-item {
   font-size: 1.0rem;
   font-weight: bold;
}

/* Profile select dropdown width */
select[name="profile_id"] {
   min-width: 500px;
}

/* Flash banner floats just below the sticky topbar. */
.flash-banner {
   position: fixed;
   top: 66px;
   left: 50%;
   transform: translateX(-50%);
   width: min(90%, 800px);
   z-index: 1050;
}

/* Topbar + left sidebar layout */
.topbar {
   height: 56px;
   z-index: 1030;
}
.sidebar {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 240px;
   overflow-y: auto;
   z-index: 1029;
   transition: transform 0.2s ease;
}
.main-with-sidebar {
   padding-left: 240px;
   transition: padding-left 0.2s ease;
}
body.innerpage main.main-with-sidebar {
   margin-top: 0;
}
@media (min-width: 1200px) {
   .topbar {
      margin-left: 240px;
   }
}
.sidebar-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,0.4);
   z-index: 1028;
   display: none;
}
.sidebar .d-grid > .btn {
   padding: 6px;
}

/* Figma sidebar spec ------------------------------------------------- */
.sidebar .sidebar-nav {
   gap: 5px;
}
.sidebar .sidebar-nav > li {
   width: 100%;
}
.sidebar .sidebar-nav .nav-link {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 40px;
   padding: 0 12px;
   border-radius: 8px;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: #4B5768;
   line-height: 1;
}
.sidebar .sidebar-nav .nav-link i,
.sidebar .sidebar-nav .nav-link .bi {
   font-size: 16px;
   width: 16px;
   height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: inherit;
}
.sidebar .sidebar-nav .nav-link:hover,
.sidebar .sidebar-nav .nav-link:focus {
   background: #DCF3F9;
   color: #313944;
}
.sidebar .sidebar-nav .nav-link.active {
   background: #1D248A;
   color: #fff;
}
.sidebar .sidebar-nav .nav-link.active i,
.sidebar .sidebar-nav .nav-link.active .bi {
   color: #fff;
}

/* Collapsible group toggle: right chevron closed, down when open */
.sidebar .sidebar-collapse-toggle .sidebar-chevron {
   margin-left: auto;
   font-size: 12px;
   transition: transform 0.15s ease;
   transform: rotate(-90deg);
}
.sidebar .sidebar-collapse-toggle[aria-expanded="true"] .sidebar-chevron {
   transform: rotate(0deg);
}

/* Expanded group container: soft cyan-tinted panel */
.sidebar .sidebar-nav-group:has(.collapse.show) {
   background: #F6FCFD;
   border-radius: 8px;
   padding-bottom: 10px;
}
.sidebar .sidebar-nav-group:has(.collapse.show) > .sidebar-collapse-toggle {
   background: #1D248A;
   color: #fff;
}
.sidebar .sidebar-nav-group:has(.collapse.show) > .sidebar-collapse-toggle i,
.sidebar .sidebar-nav-group:has(.collapse.show) > .sidebar-collapse-toggle .bi {
   color: #fff;
}

/* Sub-items */
.sidebar .sidebar-sub {
   list-style: none;
   padding: 5px 0 0 5px;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 5px;
}
.sidebar .sidebar-sub .sidebar-sub-link {
   display: flex;
   align-items: center;
   gap: 16px;
   height: 23px;
   padding: 0 12px;
   border-radius: 8px;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 400;
   color: #4B5768;
   text-decoration: none;
   line-height: 1;
}
.sidebar .sidebar-sub .sidebar-sub-link::before {
   content: "";
   display: inline-block;
   width: 4px;
   height: 4px;
   background: #4EC3E0;
   border-radius: 2px;
   flex-shrink: 0;
}
.sidebar .sidebar-sub .sidebar-sub-link:hover,
.sidebar .sidebar-sub .sidebar-sub-link:focus {
   background: #DCF3F9;
   color: #313944;
}
.sidebar .sidebar-sub .sidebar-sub-link.active {
   background: #1D248A;
   color: #fff;
}
.sidebar .sidebar-sub .sidebar-sub-link.active::before {
   background: #fff;
}

/* Mobile: sidebar becomes an overlay from the left */
@media (max-width: 1199.98px) {
   .sidebar {
      transform: translateX(-100%);
      z-index: 1045;
   }
   .main-with-sidebar {
      padding-left: 0;
   }
   body.sidebar-open .sidebar {
      transform: translateX(0);
   }
   body.sidebar-open .sidebar-backdrop {
      display: block;
      z-index: 1044;
   }
}
.flash-banner .alert {
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* "New" pill next to result download button. Kept independent of
   Bootstrap's .badge because styles/style.css overrides that class. */
.new-badge {
   display: inline-block;
   padding: 0.25rem 0.5rem;
   background: #198754;
   color: #ffffff !important;
   font-size: 0.75rem;
   font-weight: 700 !important;
   line-height: 1;
   border-radius: 0.375rem;
   vertical-align: middle;
}

/* Status badge base styling. Background color is set inline from the
   kit_order_status.color / lab_order_status.color value. */
.status-badge {
   display: inline-block;
   padding: 0.35rem 0.65rem;
   font-size: 0.875rem;
   font-weight: 700 !important;
   line-height: 1;
   border-radius: 0.25rem;
   color: #ffffff !important;
   white-space: nowrap;
}
.btn {
   white-space: nowrap;
}
h6.color-pink {
   font-size: 14px;
}

/* Extend gradient to bottom of page on order pages */
body.full-gradient {
   background: rgba(242, 245, 248, 1) linear-gradient(178.88deg, rgba(78, 195, 224, .16) 40%, hsla(0, 0%, 100%, .16)) !important;
   background-attachment: fixed !important;
}

/* Set text-decoration-none color */
.text-decoration-none {
   color: #00a4bd;
}

/* Customize Bootstrap primary button color */
.btn-primary {
   background-color: rgb(29, 66, 138) !important;
   border-color: rgb(29, 66, 138) !important;
}
.btn-primary:hover {
   background-color: rgb(20, 47, 99) !important;
   border-color: rgb(20, 47, 99) !important;
}

/* --- Brand logo flourishes ------------------------------------------- */

/* Footer brand mark — card look.
   Width-driven so every brand (usb/rtl/np) renders at the same width;
   heights differ per aspect ratio and that's fine. */
.brand-logo {
   box-sizing: content-box;
   background: #fff;
   border: 1px solid rgba(0,0,0,0.08);
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
   width: 130px;
   height: auto;
   padding: 3px 6px;
}
/* Sidebar lockup: no card, plain logo + PORTAL label. */
.brand-lockup .brand-logo {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 0;
   width: 160px;
   flex-shrink: 0;
}

/* Login page hero logo styled as a card: white background, rounded,
   subtle neutral shadow, thin border. Fade-in on load + one sheen pass. */
.login-logo {
   position: relative;
   display: inline-block;
   overflow: hidden;
   line-height: 0;
   padding: 12px 18px;
   background: #fff;
   border: 1px solid rgba(0,0,0,0.08);
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
   animation: logo-fade-in 900ms ease-out both;
}
.login-logo img {
   width: 400px;
   max-width: 100%;
   height: auto;
}
.login-logo::after {
   content: "";
   position: absolute;
   top: 0;
   left: -60%;
   width: 40%;
   height: 100%;
   background: linear-gradient(
      100deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0)    100%
   );
   transform: skewX(-20deg);
   pointer-events: none;
   animation: logo-sheen 1.5s ease-out 0.8s 1 both;
}

@keyframes logo-fade-in {
   from { opacity: 0; transform: translateY(-14px) scale(0.92); }
   to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes logo-sheen {
   0%   { left: -60%; }
   100% { left: 120%; }
}

@media (prefers-reduced-motion: reduce) {
   .login-logo { animation: none; }
   .login-logo::after { display: none; }
}

/* DataTables paging row: keep prev/next, info text, and length control */
/* vertically aligned by zeroing the margins Bootstrap adds inside each. */
.dataTables_paginate .pagination { margin-bottom: 0; }
.dataTables_info { padding-top: 0; }
.dataTables_length label { margin-bottom: 0; }

.text-usb-blue { color: #25408f; }