.top-header {
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 10;
}

/* Sidebar Setup */
.side-navbar {
  /* Set the initial width */
  width: 60px;
  /* Make the sidebar float above other content */
  position: fixed;
  /* Anchor it to the left side */
  left: 0;
  /* Ensure it is above the main content */
  z-index: 100;
  /* Add a transition for smooth expansion */
  transition: width 0.1s ease-in-out;
  /* Set maximum height to fill the screen */
  height: 100vh;
  box-shadow: var(--bs-border-width) 0 6px 1px #2b509a;
}


/* Hover Effect */
.side-navbar:hover {
  /* Expand the width */
  width: 250px;
  transition-delay: 0.5s;
}

.side-navbar .full-logo {
  width: 31px;
  display: flex;
  overflow-x: hidden;
  transition-delay: 0s;
  transition-duration: 0s;
}

.side-navbar:hover .full-logo {
  width: 137px;
  transition-property: width;
  transition-duration: 0.1s;
  /* The duration of the actual width change (0px to 156px) */
  /* CRITICAL: Add the 0.5s delay here! */
  transition-delay: 0.5s;
}

.main-content {
  flex: 0 0 auto;
  width: calc(100% - 60px);
  margin-left: 60px;
  position: fixed;
}

@media (max-width: 767.98px) {
  .main-content {
    width: 100%;
    margin-left: 0px;
    position: unset;
  }

  .top-header {
    position: unset;
  }

  .side-navbar {
    width: 100% !important;
    position: unset;
    height: fit-content;
    z-index: unset;
    transition: unset;
    box-shadow: none;
  }

  .side-navbar .nav-tooltip {
    width: 100%;
  }

  .side-navbar .tooltip-text {
    width: 160px !important;
  }

  .side-navbar .small-logo {
    display: none !important;
    /* Show the small logo by default */
  }

  .side-navbar .full-logo {
    display: none !important;
    /* Hide the full logo by default */
  }
}

/* Base styles for the hamburger button (visible only below 768px) */
.navbar-toggler {
  /* Position the button at the top/left for a clean look */
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  /* Ensure it's above other content */
}

/* Desktop styles (768px and up) */
@media (min-width: 768px) {

  /* Hide the hamburger button on desktop */
  .navbar-toggler {
    display: none;
  }

  /* Ensure the sidebar is fixed and full height on desktop */
  .side-navbar {
    position: fixed;
    width: 60px;
    /* or whatever your collapsed width is */
    height: 100vh;
  }
}

.nav-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 14px !important;
  list-style: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-decoration: none;
  color: white;
  white-space: nowrap;
  border-left: 4px solid transparent;
  padding-left: 1rem;
  justify-content: start;
}

.nav-tooltip:not(.header-active):hover {
  background-color: var(--bg-secondary-bg);
}

.header-active {
  border-left: 4px solid #3b6fff !important;
  background: rgba(35, 96, 154, 0.7);
  color: #f8dd6c;
}

.nav-tooltip i {
  font-size: 22px !important;
}

.nav-tooltip .material-icons {
  font-size: 24px;
}

.side-navbar .tooltip-text {
  /* Initial hidden state */
  margin-left: 0.5rem;
  /* Add a transition for opacity (the fade effect) */
  /* CRITICAL: Add the delay here. The transition to visible/opacity: 1
     will wait 0.3s before starting. */
  width: 0px;
  padding-bottom: 2px;

  transition-delay: 0s;
}

/* Hover state (Appearance after delay) */
.side-navbar:hover .tooltip-text {
  /* These changes will be delayed by the transition-delay property above */
  width: 160px;

  transition-property: width;
  transition-duration: 0.1s;
  /* The duration of the actual width change (0px to 156px) */

  /* CRITICAL: Add the 0.5s delay here! */
  transition-delay: 0.5s;
}

.button-ghost {
  color: #f7f6f3;
  border: none;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 6px;
  background-color: transparent;
  border-radius: 4px;
}

.button-ghost:disabled {
  color: #77a1b5;
  cursor: not-allowed;
}

.button-ghost:hover {
  background: #2b509a;
  color: #f7f6f3;
}

.button-ghost:disabled:hover {
  color: #77a1b5;
  cursor: not-allowed;
  background: transparent;
}

.button-ghost i {
  text-decoration: underline;
}

.button-ghost.icon i {
  text-decoration: none !important;
}

.button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0c808;
  color: #0f2a43;
  font-weight: bold;
  border-radius: 4px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 0px;
}

.button-primary:hover {
  background: #23609a;
  color: #f7f6f3;
}

.button-primary:disabled {
  color: hsl(54, 16%, 35%);
  cursor: not-allowed;
  background: #f0c808;
}

.button-primary:disabled:hover {
  color: hsl(54, 16%, 35%);
  cursor: not-allowed;
  background: #f0c808;
}

.button-danger {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-body-color);
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-danger);
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 4px;
}

.button-danger:hover {
  background: var(--bs-danger);
  color: #f7f6f3;
}

.button-danger:disabled {
  color: var(--bs-secondary-color);
  cursor: not-allowed;
  background: var(--bs-danger-bg-subtle);
  opacity: 0.5;
}

.button-danger:disabled:hover {
  color: var(--bs-secondary-color);
  cursor: not-allowed;
  background: var(--bs-danger-bg-subtle);
}

.button-small {
  font-size: smaller;
  padding: 0.25rem !important;
}

.button-larger {
  font-size: larger;
  padding: 0.75rem !important;
}

.button-large {
  font-size: large;
  padding: 1rem !important;
}

.button-secondary {
  display: flex;
  padding: 0.5rem;
  background: #163755;
  justify-content: center;
  align-items: center;
  border: 1px solid #2b509a;
  border-radius: 4px;
  width: fit-content;
  height: fit-content;
  text-align: center;
}

.button-secondary:disabled {
  color: #77a1b5;
  cursor: not-allowed;
}

.button-secondary:hover {
  background: #2b509a;
  color: #f7f6f3;
}

.button-secondary:disabled:hover {
  color: #77a1b5;
  background: #163755;
  cursor: not-allowed !important;
}

.text-toggle {
  border-radius: 4px;
  overflow: hidden;
}

.text-toggle-element {
  display: flex;
  text-align: center;
  align-items: center;
  color: #77a1b5;
  background-color: #163755;
  border-radius: 0;
}

.text-toggle-element:hover {
  cursor: pointer;
  background-color: #2b509a;
}

.text-toggle-element.active {
  background-color: #031633;
  color: #f7f6f3;
}

.text-toggle .text-toggle-element:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.text-toggle .text-toggle-element:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#threat_actor_profiles tr.threat-profile-row-clickable {
  cursor: pointer;
}

#threat_actor_profiles a.threat-profile-row-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2rem;
  color: inherit;
  text-decoration: none;
}

#threat_actor_profiles a.threat-profile-row-link .threat-profile-table-cell-inner,
#threat_actor_profiles a.threat-profile-row-link.threat-profile-table-cell-inner {
  min-height: 2rem;
  width: 100%;
}

#threat_actor_profiles a.threat-profile-row-link .ellipses-overflow,
#threat_actor_profiles a.threat-profile-row-link.ellipses-overflow {
  display: block;
  line-height: 2rem;
}

#threat_actor_profiles .threat-profile-card,
#threat_actor_profiles .threat-profile-card-body-link,
#threat_actor_profiles .threat-profile-card-chart-row {
  min-height: 0;
}

#threat_actor_profiles .threat-profile-card-activity,
#threat_actor_profiles .indicator-activity-chart-mini {
  overflow: visible;
  min-height: 48px;
}

#threat_actor_profiles .threat-profile-card-activity {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#threat_actor_profiles .indicator-activity-chart-mini {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

#threat_actor_profiles .threat-profile-card-activity svg,
#threat_actor_profiles .indicator-activity-chart-mini svg {
  max-width: 100%;
  height: 100%;
}

#threat_actor_detailed #indicator-activity-chart {
  height: 360px;
  max-height: 360px;
  overflow: visible;
}

#threat_actor_detailed #indicator-activity-chart .indicator-activity-chart-container {
  height: 100%;
}

#threat_actor_detailed #indicator-activity-chart svg {
  max-width: 100%;
  height: 100%;
}

#threat_actor_profiles .threat-profile-card-wrapper {
  cursor: pointer;
}

#threat_actor_profiles a.threat-profile-card-header-link,
#threat_actor_profiles a.threat-profile-card-body-link,
#threat_actor_profiles a.threat-profile-card-header-link:hover,
#threat_actor_profiles a.threat-profile-card-body-link:hover {
  color: inherit;
}

.threat-badge {
  border: var(--bs-border-width) var(--bs-border-style) transparent;
  border-radius: 0;
  background-color: transparent;
  color: #fff;
  display: inline-flex;
}

.threat-badge-malware {
  border-color: #de1b58;
}

.threat-badge-malware > i {
  color: #de1b58;
}

.threat-badge-malicious {
  border-color: #ff8a24;
}

.threat-badge-malicious > i {
  color: #ff8a24;
}

.threat-badge-suspicious {
  border-color: #f0c808;
}

.threat-badge-suspicious > i {
  color: #f0c808;
}

.threat-badge-info {
  border-color: var(--bs-border-color);
}

#threat_actor_profiles .threat-profile-card-indicators {
  position: relative;
  z-index: 1;
}

#threat_actor_profiles .threat-profile-table-cell-linked:has(a) {
  padding: 0px;
}

#threat_actor_profiles .threat-profile-table-cell-linked a {
  padding: 1em;
}

#threat_actor_profiles .threat-profile-table-cell-inner {
  min-height: 60px;
  display: flex;
}

#threat_actor_profiles .threat-profile-table-cell-inner.ellipses-overflow {
  display: block;
  line-height: 2rem;
}

.port-box {
  padding: 0.25rem;
  font-size: small;
  background: #3b6fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  text-align: center;
}

.text-large {
  font-size: larger;
}


/* Container to manage the relative positioning of the tabs and arrows */
.tab-scroll-wrapper {
  position: relative;
  /* Adjust width as needed, but it must be narrower than the content inside tabs-container for overflow to occur */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* The actual scrollable tabs container */
.tabs-container {
  /* You can change this to 'scroll' if you want the scrollbar always visible */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* Keeps tabs on a single line */
  padding: 0 5px;
  /* Hides the default scrollbar for a cleaner look */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  /* Remove scrollbar for Chrome/Safari/Opera */
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

/* --- CHANGES TO SCROLL ARROW STYLING --- */
.scroll-arrow {
  position: sticky;
  flex-shrink: 0;
  /* Prevents the arrows from shrinking when space is tight */

  height: 100%;
  width: 30px;
  z-index: 10;
  border: none;
  cursor: pointer;
  background: #0b1f32;
  font-size: 1.5em;
  border-top: 1px solid #2b509a;
  color: #f7f6f3;
  transition: opacity 0.3s;
}

.scroll-arrow:disabled {
  opacity: 0.7;
  color: #77a1b5;
  cursor: not-allowed;
}

.scroll-arrow:hover:not(:disabled) {
  background-color: rgba(59, 111, 255, 0.7);
}

.scroll-arrow.hidden {
  display: none;
}

/* --- Positioning the arrows (Using `left: 0` and `right: 0` for sticky positioning) --- */
.left-arrow {
  left: 0;
  /* Sticks to the left edge of the parent */
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.2);
  border-right: 1px solid #2b509a;
}

.right-arrow {
  right: 0;
  /* Sticks to the right edge of the parent */
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.2);
  margin-left: auto !important;
  border-left: 1px solid #2b509a;
}

.underline-btn {
  cursor: pointer;
  border: none;
  font-family: 'autovia-bold';
  font-size: 1rem;
  background: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: 4px;
  position: relative;
  margin-bottom: 0.25rem;
}

.underline-btn:not(.underline-btn-active):not([disabled]):hover {
  background-color: rgba(59, 111, 255, 0.5);
}

.underline-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.8;
  /* optional visual cue */
}

.underline-btn span.loading {
  background-color: transparent !important;
}

.underline-btn span:not(:empty) {
  margin-left: 3px;
  background-color: rgba(3, 16, 51, 1);
  padding: 2px 6px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
}

.underline-btn-active::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.25rem;
  height: 4px;
  background-color: #3b6fff;
}

.live-scan-screenshot {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.live-scan-page-tab {
  position: relative;
  bottom: -1px;
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: 34rem;
  min-height: 34px;
  padding: 0.4rem 0.7rem 0.45rem;
  background-color: var(--bg-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
}

.live-scan-page-tab > img {
  border-radius: 3px;
}

.live-scan-screenshot > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.live-scan-screenshot-actions {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  max-width: calc(100% - 1.5rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.live-scan-screenshot:hover .live-scan-screenshot-actions,
.live-scan-screenshot:focus-within .live-scan-screenshot-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none) {
  .live-scan-screenshot-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.verdict {
  font-family: 'autovia-bold';
}

.skeleton {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #77a1b5;
  margin-right: 16px;
  position: relative;
  overflow: hidden;
}

.skeleton-lines {
  flex: 1;
}

.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: #77a1b5;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-line.short {
  width: 70%;
}

.skeleton-line.shorter {
  width: 50%;
}

.skeleton-avatar::after,
.skeleton-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 4.0s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(600px);
  }
}

/* Fixed color for delimiters (should match the background or be very light) */
.hl-delimiter {
  color: #FFFFFF;
  /* Set to white or transparent if the background is white */
}

/* Phase classes based on your API return values: key, operator, operand, value */
.hl-key {
  color: #8C6CE2;
  /* Purple/Blue */
  font-weight: bold;
}

.hl-operator {
  color: #FF0000;
  /* Red */
}

.hl-value,
.hl-operand {
  color: #008000;
  /* Green */
}

.hl-default {
  color: #333333;
  /* Standard dark text */
}

.w-sm-100 {}


@media (max-width: 767.98px) {
  .w-sm-100 {
    width: 100% !important;
  }
}

.breadcrumbs {
  font-weight: 500;
  font-size: 14px;
}

.pb-2px {
  padding-bottom: 2px;
}

.query-error {
  /* Apply the standard wavy underline */
  text-decoration: underline wavy red 1px;
  /* Important for contenteditable: 
     Ensure user can still click/edit through this span */
  pointer-events: none; 
}

.mb-2px {
  margin-bottom: 2px;
}

/* Container for the Grid */
.heatmap-grid {
  display: grid;
  /* 7 columns for 7 days (Mon-Sun or Sun-Sat) */
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  border-radius: 4px;
}

/* Individual Cell Styling */
.heatmap-cell {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s;
  user-select: none;
  border: 1px solid rgb(35, 96, 154);
  /* Prevent highlighting on double-click */
}

.heatmap-cell:hover {
  box-shadow: 0 0 0 2px #007bff inset;
}

.heatmap-cell.empty {
  border: none;
  pointer-events: none;
  cursor: default;
}

/* Heatmap Color Levels - Linear gradient based on primary blue (#3B6FFF / hsl(224, 100%, 62%)) */
/* Progression: Lightness increases linearly from 15% to 85% (steps of ~14%) */
/*              Saturation increases from 30% to 100% (steps of ~14%) */

.heatmap-cell.level-0 {
  background-color: hsl(209, 63%, 16%);
  color: white;
}

.heatmap-cell.level-1 {
  background-color: hsl(224, 85%, 42%);
  color: white;
}

.heatmap-cell.level-2 {
  background-color: hsl(224, 95%, 56%);
  color: white;
}

.heatmap-cell.level-3 {
  background-color: hsl(224, 100%, 70%);
  color: hsl(224, 100%, 15%);
}

.heatmap-cell.level-4 {
  background-color: hsl(224, 100%, 85%);
  color: hsl(224, 100%, 15%);
}

.heatmap-cell.level-5 {
  background-color: hsl(225, 100%, 91%);
  color: hsl(224, 100%, 15%);
}

/* Styling for the selected date */
.heatmap-cell.active {
  border: 3px solid #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Calendar Header Styling */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* Day Names (Optional: Add above heatmap-grid for full calendar look) */
.day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 300px;
  text-align: center;
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
}

/* Day-of-week headers for heatmap calendar */
.heatmap-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 5px;
}

.heatmap-day-header {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-align: center;
  user-select: none;
  font-weight: bold;
}

/* ── Pivot History ──────────────────────────────────────────────── */
.ph-chip i.fa-copy {
  margin-left: 6px;
}

/* type badge base */
.ph-badge {
  height: 22px;
  width: 22px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ph-badge-sm { height: 20px !important; width: 20px !important; font-size: 9px !important; }
.ph-badge-xs { height: 16px !important; width: 16px !important; font-size: 8px !important; }

/* type colours */
.ph-badge-d { border: 1px solid; color: #e2e8f0; background-color: #1e293b; border-color: #94a3b8; }
.ph-badge-i { border: 1px solid; color: #fde68a; background-color: #1e293b; border-color: #f59e0b; }
.ph-badge-h { border: 1px solid; color: #fed7aa; background-color: #1e293b; border-color: #f97316; }
.ph-badge-s { border: 1px solid; color: #bae6fd; background-color: #1e293b; border-color: #38bdf8; }
.ph-badge-a { border: 1px solid; color: #d1fae5; background-color: #1e293b; border-color: #6ee7b7; }
.ph-badge-l { border: 1px solid; color: #ede9fe; background-color: #1e293b; border-color: #a78bfa; }

/* tree structure */
.ph-tree-row { position: relative; min-height: 32px; transition: opacity 0.15s ease; }
.ph-tree-vline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.09);
  pointer-events: none;
}
.ph-tree-elbow {
  position: absolute; width: 10px; height: 50%; top: 0;
  border-left: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  border-bottom-left-radius: 3px;
}
.ph-tree-elbow-ext {
  position: absolute; width: 1px;
  background: rgba(255,255,255,0.14);
}

/* chip base + states */
.ph-chip-base { background: #0d2440; border: 1px solid rgba(255,255,255,0.2); padding: 4px 8px; cursor: pointer; }
/* provenance row base */
.ph-chip {
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ph-chip:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.ph-chip.ph-chip-current { border: 2px dashed #f0c808 !important; background: rgba(240,200,8,0.06) !important; }
.ph-chip.ph-chip-current:hover { background: rgba(240,200,8,0.14) !important; border-color: rgba(240,200,8,0.55) !important; }
.ph-chip.ph-chip-multi { border-color: rgba(252,211,77,0.35) !important; background: rgba(252,211,77,0.04) !important; }

/* provenance rows */
.ph-row-base { background: #0d2440; border: 1px solid rgba(255,255,255,0.2); }
.ph-row {
  transition: background 0.1s ease, border-color 0.1s ease;
}
.ph-row:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.ph-row.ph-row-current { background: rgba(240,200,8,0.06) !important; border: 2px dashed #f0c808 !important; }
.ph-row.ph-row-current:hover { background: rgba(240,200,8,0.1) !important; border-color: rgba(240,200,8,0.55) !important; }
.ph-row-related-current { background: rgba(240,200,8,0.08); border: 1px solid rgba(240,200,8,0.35); }
.ph-row.ph-row-related-current:hover { border-color: rgba(240,200,8,0.55) !important; }

/* path chips */
.ph-path-chip-base { background: #0d2440; border: 1px solid rgba(255,255,255,0.2); padding: 3px 6px; cursor: pointer; }
.ph-path-chip {
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ph-path-chip:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.ph-path-chip.ph-path-chip-current { background: rgba(240,200,8,0.12) !important; border: 1px solid rgba(240,200,8,0.4) !important; }
.ph-path-chip.ph-path-chip-current:hover {
  background: rgba(240,200,8,0.2) !important;
  border-color: rgba(240,200,8,0.6) !important;
}

/* dup badge */
.ph-dup-badge {
  background: #031033;
  color: #f7f6f3;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}

/* depth number & timestamp in provenance rows */
.ph-depth-num {
  width: 28px; text-align: right; flex-shrink: 0;
  font-family: ui-monospace, monospace; font-size: 11px;
  color: rgba(255,255,255,0.3);
}
.ph-row-time { white-space: nowrap; flex-shrink: 0; font-size: 11px; color: rgba(255,255,255,0.35); }

/* legend swatch for current node */
.ph-legend-current { height: 22px; width: 22px; border: 2px dashed #f0c808; background: rgba(240,200,8,0.06); }

/* ── Detail / advanced / lookalikes top action bar ───────────────── */
.topbar {
  align-items: center;
  min-height: 52px;
  padding: 6px 4px;
  /* Scroll horizontally as a single toolbar instead of wrapping onto
     multiple lines whenever the items don't fit the available width. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.topbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.topbar > .col-auto,
.topbar > a.col-auto {
  flex: 0 0 auto;
}

/* Action items (Add to project, Lookalike Search, Live Scan, …) are the
   items carrying a `b-r` separator in markup. Restyle them to match the
   app's `.button-secondary` — a filled button so they read as buttons,
   without the nested-outline look. */
.topbar > .col-auto.b-r,
.topbar > a.col-auto.b-r {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0.2rem;
  padding: 0.4rem 0.8rem !important;
  background: #163755;
  border: 1px solid #2b509a !important;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Enabled buttons: pointer + filled hover (matches .button-secondary) */
.topbar > .col-auto.b-r:not(.inactive),
.topbar > a.col-auto.b-r:not(.inactive) {
  cursor: pointer;
}

.topbar > .col-auto.b-r:not(.inactive):hover,
.topbar > a.col-auto.b-r:not(.inactive):hover {
  background: #2b509a;
  color: #f7f6f3;
}

.topbar .material-icons {
  font-size: 19px;
  transition: color 0.12s ease;
}

.topbar .col-auto.b-r .fas {
  font-size: 19px;
  line-height: 1;
  transition: color 0.12s ease;
}

/* Keep the label text tidy */
.topbar [name="description"] {
  white-space: nowrap;
}

/* Bulk-search indicator count badge — balanced padding + accent color */
.bulk-superscript-icon {
  background-color: #f0c808;
  color: #0f2a43;
  padding: 1px 6px;
  font-size: x-small;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 10px;
}

/* Right-aligned cluster: session pill + bookmark.
   Kept as a single flex item so the two never split across a wrap. */
.topbar {
  flex-wrap: nowrap;
}

.topbar #session-picker-mount {
  padding-right: 0.75rem;
}

.topbar .bookmark-div {
  padding-left: 0.25rem;
  padding-right: 0.5rem;
}

/* Mobile: let the cluster flow inline after the buttons (rather than being
   pushed to a far-right edge by the auto margin) and shrink the pill. */
@media (max-width: 767.98px) {
  .topbar {
    margin-left: 0.2rem !important;
  }
  .session-pill {
    max-width: 150px;
  }
}

.bookmark {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.12s ease;
}

.bookmark:hover {
  color: #f0c808 !important;
}

/* ── Session picker pill ─────────────────────────────────────────── */
.session-pill {
  background: #0d2440;
  border: 1px solid var(--bg-separator);
  border-radius: 6px;
  padding: 0.34rem 0.7rem;
  max-width: 200px;
  white-space: nowrap;
  cursor: pointer;
  color: #cdddf2;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.session-pill:hover {
  border-color: #3b6fff;
  background: #123150;
}

.session-pill-active {
  border-color: #f0c808;
}

.session-pill-icon {
  font-size: 11px;
  color: #89a8ff;
  flex-shrink: 0;
}

.session-pill-active .session-pill-icon {
  color: #f0c808;
}

.session-pill-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-pill-caret {
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}

.session-pill-dot {
  font-size: 8px;
  color: #4ade80;
  flex-shrink: 0;
}

.session-row {
  transition: background 0.1s ease;
}
.session-row:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* Active search-filter pills — match the filter popover styling */
#search-filters .filter-chip {
  display: inline-flex;
  /* Override Bootstrap's `.row > *` width:100% so the pill hugs its content */
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.85rem;
  background-color: #23609a;
  border: 1px solid #3b6fff;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.2;
}

.filter-chip .filter-chip-label {
  white-space: nowrap;
}

.filter-chip .filter-chip-x {
  cursor: pointer;
  color: #cfe0f5;
  font-size: 0.9em;
  transition: color 0.12s ease;
}

.filter-chip .filter-chip-x:hover {
  color: #ffd2d2;
}

.filter-active {
  color: #f0c808;
}

.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  width: 100%;
}

@media (max-width: 767.98px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.filter-col {
  min-width: 0;
}

/* Full-width section (DNS association type + actions) */
.filter-col-full {
  grid-column: 1 / -1;
}

/* Section headers — light-blue accent to establish hierarchy */
.filter-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #89a8ff;
  margin: 0 0 1.1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bg-separator);
}

/* Labeled input addons — dark-blue prefix chips */
.filter-input-group {
  flex-wrap: nowrap;
}

.filter-addon {
  min-width: 104px;
  font-size: small;
  font-weight: 600;
  color: #cdddf2;
  background-color: #163755;
  border-color: var(--bg-separator);
}

#range_filter_list .form-control {
  background-color: #0c2138;
  border-color: var(--bg-separator);
}

#range_filter_list .form-control:focus {
  border-color: #3b6fff;
  box-shadow: 0 0 0 0.15rem rgba(59, 111, 255, 0.25);
}

/* Keep the jQuery UI datepicker trigger inline and matching the input height */
.filter-date-group .ui-datepicker-trigger {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  margin-left: 0.4rem;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #163755;
  border: 1px solid var(--bg-separator);
  border-radius: 0.2rem;
  box-sizing: border-box;
}

.filter-date-group .ui-datepicker-trigger img {
  height: 1rem;
  width: auto;
  display: block;
}

/* Fallback when the datepicker renders the trigger as a bare image */
.filter-date-group img.ui-datepicker-trigger {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  margin-left: 0.4rem;
  padding: 0.25rem;
  box-sizing: border-box;
  background-color: #163755;
  border: 1px solid var(--bg-separator);
  border-radius: 0.2rem;
  cursor: pointer;
}

/* Association type — flowing pill selector that matches the app's toggles */
#assoc_type .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

#assoc_type .list-group-item {
  width: auto;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Hide the raw checkbox; the label becomes a clickable pill */
#assoc_type .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

#assoc_type label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--bg-separator);
  border-radius: 999px;
  background-color: #0c2138;
  color: #9fb6d4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

#assoc_type label:hover {
  background-color: #1c4061;
  color: #e8f0fa;
}

#assoc_type .form-check-input:checked + label {
  background-color: #23609a;
  border-color: #3b6fff;
  color: #ffffff;
}

/* Select-All pill — visually distinct from the type pills */
#assoc_type #select_all + label {
  background-color: transparent;
  border: 1px dashed #89a8ff;
  color: #89a8ff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.35rem;
}

#assoc_type #select_all + label:hover {
  background-color: rgba(137, 168, 255, 0.12);
  color: #cdddf2;
}

#assoc_type #select_all:checked + label {
  background-color: #3b6fff;
  border: 1px solid #3b6fff;
  color: #ffffff;
}

/* Theme the remaining real checkboxes to match the accent blue */
.filter-check {
  accent-color: #3b6fff;
}

/* Divider between Override Type and the search options */
.filter-divider {
  border: 0;
  border-top: 1px solid var(--bg-separator);
  opacity: 1;
  margin: 1rem 0;
}

/* Key Type selector — segmented toggle matching the rest of the app */
.filter-type-toggle {
  border-radius: 6px;
  overflow: hidden;
}

.filter-type-toggle .text-toggle-element {
  padding: 0.55rem 0.5rem;
  font-size: 0.92rem;
  border-right: 1px solid var(--bg-separator);
}

.filter-type-toggle .text-toggle-element:last-of-type {
  border-right: 0;
}

/* Drive the active state off the hidden radio's checked state */
.filter-type-toggle .btn-check:checked + .text-toggle-element {
  background-color: #031633;
  color: #f7f6f3;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #3b6fff;
}

.filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--bg-separator);
}

.filter-actions .button-primary {
  min-width: 140px;
}

/* Show/Collapse Summary toggle above table timelines */
.summary-toggle-btn {
  cursor: pointer;
  user-select: none;
  padding: 0.35rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--bg-separator);
  background-color: #031633;
  color: #cdddf2;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.summary-toggle-btn:hover {
  background-color: rgba(59, 111, 255, 0.18);
  border-color: #3b6fff;
  color: #f7f6f3;
}

.summary-toggle-btn:active {
  background-color: rgba(59, 111, 255, 0.28);
}

.summary-toggle-icon i {
  transition: transform 0.2s ease;
  color: #3b6fff;
}

/* Black Hat 2026 announcement banner (matches marketing site event-banner) */
.announcement-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 44px;
  background: #f0c808;
  color: #0f2a43;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.announcement-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 3px;
  border-bottom: 2px solid currentColor;
}

.announcement-banner-icon {
  flex-shrink: 0;
}

.announcement-banner-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.announcement-banner:hover {
  background: #23609a;
  color: #f7f6f3;
}

.announcement-banner:hover .announcement-banner-arrow {
  transform: translateX(4px);
}

.announcement-banner-close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.7;
  padding: 4px 8px;
  transition: opacity 0.2s ease;
}

.announcement-banner-close:hover {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .announcement-banner {
    font-size: 13px;
    padding: 8px 40px;
    gap: 8px;
  }
}

/* ============================================================================
   DETAIL-PAGE TABLES — MOBILE OVERHAUL  (<= 767.98px)
   Makes the result tables and their controls usable on a phone: readable
   cells with real padding, a frozen first column for context while scrolling,
   compact-but-legible headers, tappable pagination / filter / summary
   controls, and a horizontally-scrollable timeline that keeps its key/value
   columns. All rules are scoped to the scrolling result tables so the rest of
   the app is unaffected.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* --- Cells: breathing room + consistent header/body padding ------------
     Body cells use Bootstrap `.p-2` (0.5rem) from table2.js on mobile; the
     header cells and linkified cells are aligned to that here so the columns
     line up instead of headers looking padded while cells look cramped. */
  .table-scroll-container .table th {
    padding: 0.55rem 0.6rem !important;
    font-size: 0.82rem;
    line-height: 1.25;
    vertical-align: middle;
  }
  .table-scroll-container .table td {
    font-size: 0.85rem;
    vertical-align: middle;
  }
  /* linkified cells push their padding onto the inner <a>; match .p-2 */
  .table-scroll-container .table td:has(.table-cell-link) > .table-cell-link {
    padding: 0.5rem !important;
  }

  /* --- Frozen first column ------------------------------------------------
     Keeps each row's identifying column on screen while the rest of the
     columns scroll horizontally. Opaque backgrounds let scrolled cells pass
     underneath; the right-edge divider signals the column is pinned. */
  /* the timeline row is a single full-width <td> holding the SVG — never
     freeze/clamp it, only real data rows */
  .table-scroll-container { position: relative; }
  .table-scroll-container .table thead th:first-child,
  .table-scroll-container .table tbody:not([name="timeline"]) td:first-child {
    position: sticky;
    left: 0;
  }
  .table-scroll-container .table tbody:not([name="timeline"]) td:first-child {
    z-index: 2;
    background-color: #0b1f32;
    box-shadow: inset -1px 0 0 #2b509a;
    /* don't let a long identifier column swallow the whole viewport */
    max-width: 60vw;
  }
  .table-scroll-container .table thead th:first-child {
    z-index: 3;
    box-shadow: inset -1px 0 0 #2b509a;
  }

  /* --- Header filter / sort icons: bigger tap targets -------------------- */
  .table-scroll-container .table th .fa-filter,
  .table-scroll-container .table th .fa-sort-up,
  .table-scroll-container .table th .fa-sort-down {
    padding: 0.35rem;
    margin: -0.35rem 0 -0.35rem 0 !important;
    font-size: 0.9rem;
  }

  /* --- Pagination footer: keep the "N–M of total" count on the same row
     as the compact page-arrow buttons (no wrapping, small buttons). --- */
  .table tfoot td > div {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }
  .table tfoot td > div .button-secondary {
    padding: 0.3rem 0.45rem;
  }

  /* --- Top control row (View / Export / Reset + page controls) ---------
     Below 576px this row is `d-block`, so the count + page arrows stack as
     block elements and read as misaligned. Force a wrapping flex row and put
     the control buttons on their own line so the count and arrows share one
     aligned line beneath them (matching the footer). */
  [name="timeline_toggle_div_row"] {
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    align-items: center;
  }
  [name="timeline_toggle_div_row"] > div:first-child {
    flex: 1 1 100%;
  }
  [name="timeline_toggle_div_row"] .button-secondary {
    padding: 0.3rem 0.45rem;
  }
  .timeline_toggle_div {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* --- Filter / column / export dropdown popovers ----------------------
     The dropdown() helper positions these with inline `left`/`right`/`top`
     computed from the trigger, which overhangs on a narrow screen. Pin them
     to the viewport horizontally (both margins) so they can never overflow —
     these !important rules override the inline styles; vertical anchoring to
     the trigger is left to the JS. Each row gets a comfortable tap target. */
  .filter-dropdown-menu.show {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .filter-dropdown-item,
  .filter-dropdown-item-hoverable,
  .filter-dropdown-select-all {
    min-height: 40px;
  }
  /* The popover is a flex column; once its height is capped on a short mobile
     viewport the children (default flex-shrink: 1) get squeezed and their
     content spills onto the items below — e.g. the "Select Project" tag chips
     overlapping the "Add to Project" buttons. Stop them shrinking so the
     popover scrolls (overflow-y is set by constrainDropdownHeight) instead. */
  .filter-dropdown-menu.show > * {
    flex-shrink: 0;
  }

  /* --- Search filter panel (limit / types / date filters) --------------
     The panel is `position-absolute w-100`, but a hard `min-width: 1000px`
     (custom.css) blows it far past the viewport on a phone, making the limit
     input and type toggles unreachable. Constrain it to the search row and
     cap the height so it scrolls within the screen. */
  .query-search-dropdown {
    min-width: 0 !important;
    width: 100%;
    left: 0;
    max-height: 75vh;
    overflow-x: hidden;
  }
  /* Bootstrap `.row` inside the filter grid adds negative gutters that would
     poke past the panel edge — neutralise them so nothing overflows. */
  .query-search-dropdown #range_filter_list.row {
    margin-left: 0;
    margin-right: 0;
  }

  /* --- Summary: quick-filter chips wrap; timeline scrolls -------------- */
  .quick_filters_div {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  /* the full timeline is rendered wider than the viewport on mobile (see
     table2.js) so it can keep its key/value columns; the table's own
     .table-scroll-container provides the horizontal scroll. Momentum-scroll
     it on touch. */
  .table-scroll-container {
    -webkit-overflow-scrolling: touch;
  }

  /* --- Pivot History popup ---------------------------------------------
     Make it near-fullscreen so the tree has room, and reflow the top bar:
     the Tree/Provenance/Session toggle + filter + export won't fit on one
     line on a phone. */
  #validin-info-popup:has(.pivot-history) {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  .pivot-history-topbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  /* toggle stays on the first row; icon-only to stay compact (the description
     bar underneath spells out the active mode) */
  .pivot-history-topbar [name="toggle_node"] .text-toggle-element {
    padding: 0.5rem 0.7rem;
  }
  .pivot-history-topbar [name="toggle_node"] .text-toggle-element span {
    display: none;
  }
  .pivot-history-topbar [name="toggle_node"] .text-toggle-element i {
    margin-right: 0 !important;
  }
  /* filter drops to its own full-width row */
  .pivot-history-filter {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0 !important;
  }
  .pivot-history-filter input {
    flex: 1 1 auto;
    width: 100%;
  }

  /* --- Mobile top bar (hamburger + logo) -------------------------------- */
  .mobile-topbar-logo {
    display: flex;
    align-items: center;
    margin-left: auto; /* push the logo to the right side of the top bar */
    padding-right: 0.75rem;
  }

  /* --- Global header: keep breadcrumbs + account on one line -----------
     The header is a Bootstrap `.row`; below md its two halves would wrap
     onto separate lines. Keep them side by side, let the breadcrumbs take
     the remaining space (and scroll), and let the account cluster hug the
     right. */
  #main-content > header {
    flex-wrap: nowrap !important;
    align-items: center;
  }
  #main-content > header > .col-md-6:first-child {
    flex: 1 1 auto;
    min-width: 0; /* allow the breadcrumbs to shrink so they can scroll */
  }
  #main-content > header > .header-right {
    flex: 0 0 auto;
    width: auto !important;
    padding-right: 0.5rem !important;
  }

  /* --- Breadcrumbs: swipeable single line instead of overflowing -------
     Deeply nested navs used to run off the edge; scroll them horizontally
     with no visible scrollbar and keep each crumb intact. */
  .breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }
  .breadcrumbs > * {
    flex: 0 0 auto;
  }
  .breadcrumbs {
    padding-left: 0.5rem;
  }

  /* --- Projects list: name-first ---------------------------------------
     On a phone the fixed Bootstrap columns (author / last-viewed / count)
     ate almost the whole row and crushed the project name. Reduce each row
     to a clean three-part line: [icon] [name grows] [menu pinned right].
     The author / last-viewed / indicator-count columns are dropped. */
  #last-opened,
  #ioc-count {
    display: none !important;
  }
  #projects-div table a.row > .col-2,   /* last-viewed + indicator count */
  #projects-div table a.row > .col-3 {  /* author */
    display: none !important;
  }
  /* keep the three remaining items on one line */
  #projects-div table a.row {
    flex-wrap: nowrap;
  }
  /* name takes all remaining space and ellipsizes cleanly. It's a d-flex
     column itself, so its children (the <h6>) also need min-width:0 or they
     refuse to shrink and push the menu onto a second line. */
  #projects-div table a.row > .col {
    min-width: 0;
    flex: 1 1 0;
    margin-left: 0;
  }
  #projects-div table a.row > .col > * {
    min-width: 0;
  }
  #projects-div table a.row > .col h6 {
    font-size: 1rem;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* icon + menu never shrink */
  #projects-div table a.row > .col-auto {
    flex: 0 0 auto;
  }
  /* the ⋮ menu stays pinned to the far right even for short names */
  #projects-div table a.row > .col-auto:last-child {
    margin-left: auto;
  }

  /* --- Project detail: header ------------------------------------------
     Two clean rows: the action buttons get their own row on top, and the
     title (Back + name + edit) sits on the row below. Buttons keep their
     natural width and wrap if needed rather than squashing their labels. */
  .project-detail-header {
    /* !important to beat Bootstrap's .flex-row utility on the same element */
    flex-direction: column-reverse !important; /* buttons (last child) above the title */
    align-items: stretch !important;
    gap: 0.85rem;
  }
  .project-detail-header > div:first-child {
    width: 100%;
    min-width: 0;
  }
  .project-detail-header #project-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.4rem;
  }
  .project-detail-header > div:last-child {
    width: 100%;
  }
  .project-detail-header > div:last-child > div {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* !important to beat Bootstrap's .justify-content-end utility */
    justify-content: flex-start !important;
  }

  /* --- Project detail: surface the About / description panel -----------
     The about-sidebar is desktop-only (d-none d-md-flex), which hid the
     editable description on mobile. Show it full-width above the table, and
     make it vertically collapsible (collapsed by default) so the tables stay
     visible. Its per-tab sections stay JS-driven, so when expanded it shows
     the sidebar for whichever tab is active. */
  #about-sidebar {
    display: flex !important;
    order: -1;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  #about-sidebar .about-header {
    cursor: pointer;
    margin-top: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bg-separator);
  }
  /* collapsed (default): show only the header bar */
  #about-sidebar:not(.about-expanded) > *:not(.about-header) {
    display: none !important;
  }
  .about-toggle-icon {
    transition: transform 0.2s ease;
  }
  #about-sidebar.about-expanded .about-toggle-icon {
    transform: rotate(180deg);
  }

  /* --- Project settings popup ------------------------------------------
     Opened at only 75% width with a non-wrapping tab row that overflowed.
     Give it near-fullscreen width and let the tab row scroll. */
  #validin-info-popup:has(.project-settings) {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  .project-settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .project-settings-tabs::-webkit-scrollbar {
    display: none;
  }
  .project-settings-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* toggles sit at the end of d-flex rows next to long labels; keep them at
     their full 52px instead of letting flex shrink them to a sliver */
  .toggle {
    flex-shrink: 0;
  }
  /* let the label text wrap/shrink instead of the toggle */
  .project-settings .d-flex > .toggle {
    margin-left: 0.75rem;
  }

  /* --- Share popup: vertical scroll only -------------------------------
     Near-fullscreen, and make the users/permissions table + long emails
     wrap so nothing forces a horizontal scrollbar. */
  #validin-info-popup:has(.share-popup) {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  .share-popup {
    overflow-x: hidden !important;
  }
  .share-popup table {
    width: 100%;
    table-layout: fixed;
  }
  .share-popup table td,
  .share-popup table th {
    word-break: break-word;
    white-space: normal;
  }
  /* permissions dropdown fills its cell rather than overflowing */
  .share-popup table select {
    width: 100%;
    max-width: 100%;
  }
  /* the email chip input can grow tall but never wider than the popup */
  .share-popup input.pill-input {
    min-width: 0;
  }
}

/* ============================================================================
   SEARCH-INTENT PROMPTS
   The "leading/trailing whitespace" and "interpreting this as a URL" popups.
   A single card-based layout used by both, responsive by default (help images
   reflow and stack; option cards and previews wrap on narrow screens).
   ========================================================================== */
.search-prompt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.search-prompt-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 1.75rem 0 0; /* leave room for the close X */
}
.search-prompt-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Whole card is a <label> tied to its radio, so tapping anywhere selects it */
.search-prompt-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.85rem 1rem;
  background: #0c2138;
  border: 1px solid var(--bg-separator);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.search-prompt-option:hover {
  border-color: #3b6fff;
  background: #123150;
}
.search-prompt-option:has(input:checked) {
  border-color: #3b6fff;
  background: #12335a;
  box-shadow: inset 0 0 0 1px #3b6fff;
}
.search-prompt-option .form-check-input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.search-prompt-option-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}
.search-prompt-option-label {
  font-weight: 600;
  color: #f7f6f3;
}
.search-prompt-preview {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: #031633;
  border: 1px solid var(--bg-separator);
  border-radius: 6px;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.85rem;
  color: #cdddf2;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}
/* highlighted whitespace markers / stripped URL parts */
.search-prompt-preview .ws-char {
  color: #ff6b6b;
  font-weight: 700;
}
.search-prompt-submit {
  align-self: flex-start;
  min-width: 160px;
}
.search-prompt-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #cdddf2;
  cursor: pointer;
}
.search-prompt-hint {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--bg-separator);
  color: #9fb6d4;
  font-size: 0.9rem;
}
.search-prompt-help-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.search-prompt-help-imgs img {
  flex: 1 1 240px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bg-separator);
  border-radius: 6px;
}

/* ============================================================================
   SHARE PROJECT POPUP — cleaner structure + theme-consistent colors
   Applies on desktop and mobile. Recipient chips move from a bright yellow to
   the app's accent-blue pill, inputs/tables pick up the dark theme, and the
   section headers become quiet uppercase labels.
   ========================================================================== */
.share-popup h2 {
  font-size: 1.4rem;
  margin: 0.75rem 2rem 0.5rem 0; /* top breathing room; right leaves the close ✕ */
}
.share-popup h5 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #89a8ff;
  margin-bottom: 0.75rem;
}

/* Email entry box */
.share-input {
  border: 1px solid var(--bg-separator) !important;
  border-radius: 8px;
  background: #0c2138 !important;
  gap: 0.4rem;
  align-items: center;
}
.share-input:focus-within {
  border-color: #3b6fff !important;
}
.share-input input.pill-input::placeholder {
  color: #6f8bb0;
}

/* Selected-recipient chips → accent-blue pills (were bright yellow) */
.share-input > span[value] {
  background-color: #23609a !important;
  color: #eaf1fb !important;
  border: 1px solid #3b6fff;
  border-radius: 999px !important;
  align-items: center;
}
.share-input > span[value] .fa-x {
  font-size: 0.7em;
  opacity: 0.85;
  cursor: pointer;
}
.share-input > span[value] .fa-x:hover {
  opacity: 1;
}

/* Message textarea + any inputs → dark theme */
.share-popup textarea {
  background: #0c2138 !important;
  border: 1px solid var(--bg-separator) !important;
  border-radius: 6px;
  color: #e8f0fa;
}
.share-popup textarea::placeholder {
  color: #6f8bb0;
}

/* People-with-access list */
.share-table {
  --bs-table-bg: transparent;
  --bs-table-bg-state: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
.share-table thead td {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #89a8ff;
  font-weight: 700;
  border-bottom: 1px solid var(--bg-separator);
  padding: 0.5rem 0.6rem;
}
.share-table tbody td {
  border-bottom: 1px solid var(--bg-separator);
  padding: 0.65rem 0.6rem;
  vertical-align: middle;
}
.share-table select {
  background: #0c2138;
  border: 1px solid var(--bg-separator);
  border-radius: 6px;
  color: #e8f0fa;
  padding: 0.35rem 0.5rem;
}
.share-table select:focus {
  border-color: #3b6fff;
  outline: none;
}