@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-var.woff2") format("woff2");
}

:root {
  /* Base Colors */
  --color-text-main: rgba(58, 53, 65, 0.87);
  --color-bg-main: #f4f6f9;
  --color-white: #ffffff;

  /* Theme Colors */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-light: #00b0ff;
  --color-primary-border: #80bdff;
  --color-primary-bg-light: #f8fbff;
  --color-primary-hover-border: #006fe6;
  --color-secondary-hover: #5a6268;
  --color-secondary-hover-border: #545b62;
  --color-danger: #dc3545;
  --color-danger-dark: #e60049;
  --color-danger-hover: #c82333;
  --color-danger-hover-border: #bd2130;
  --color-danger-bg-light: #fef2f2;
  --color-danger-border-light: #f5c6cb;
  --color-success: #50e991;
  --color-success-alt: #28a745;
  --color-warning: #ffc107;
  --color-warning-bg: #fff3cd;
  --color-warning-bg-light: #fff8e1;
  --color-warning-text: #856404;
  --color-warning-text-light: #997404;
  --color-info: #0bb4ff;
  --color-info-alt: #17a2b8;

  /* Grays & Neutrals */
  --color-gray-fafbfb: #fafbfb;
  --color-gray-f8f9fa: #f8f9fa;
  --color-gray-fbfbfb: #fbfbfb;
  --color-gray-f9f9f9: #f9f9f9;
  --color-gray-f6f6f6: #f6f6f6;
  --color-gray-f3f3f3: #f3f3f3;
  --color-gray-f2f4f6: #f2f4f6;
  --color-gray-eceff2: #eceff2;
  --color-gray-f0f0f0: #f0f0f0;
  --color-gray-e0e0e0: #e0e0e0;
  --color-gray-dee2e6: #dee2e6;
  --color-gray-ced4da: #ced4da;
  --color-gray-d0d0d0: #d0d0d0;
  --color-gray-c0c0c0: #c0c0c0;
  --color-gray-adb5bd: #adb5bd;
  --color-gray-ddd: #ddd;
  --color-gray-999: #999;
  --color-gray-6c757d: #6c757d;
  --color-gray-666: #666;
  --color-gray-495057: #495057;
  --color-gray-343a40: #343a40;
  --color-gray-3a3541: #3a3541;
  --color-gray-333: #333;

  /* Specific Component Colors */
  --color-blue-9ecaed: #9ecaed;
  --color-green-caed9e: #caed9e;
  --color-blue-bfdfff: #bfdfff;
  --color-auth0: #eb5424;
  --color-session-tag-ignore: #e51010;
  --color-session-tag-important: #12c853;

  /* Named Colors */
  --color-named-gray: gray;
  --color-named-red: red;
  --color-named-limegreen: limegreen;
  --color-named-darkgray: darkgray;

  /* Alpha/Shadow Colors */
  --color-shadow-04: rgba(0, 0, 0, 0.04);
  --color-shadow-06: rgba(0, 0, 0, 0.06);
  --color-shadow-10: rgba(0, 0, 0, 0.1);
  --color-shadow-125: rgba(0, 0, 0, 0.125);
  --color-shadow-15: rgba(0, 0, 0, 0.15);
  --color-shadow-30: rgba(0, 0, 0, 0.3);
  --color-shadow-75: rgba(0, 0, 0, 0.75);

  --color-primary-alpha-08: rgba(0, 123, 255, 0.08);
  --color-primary-alpha-15: rgba(0, 123, 255, 0.15);
  --color-info-alt-alpha-20: rgba(23, 162, 184, 0.2);

  --color-info-alt-alpha-40: rgba(23, 162, 184, 0.4);
  --color-info-alt-alpha-80: rgba(23, 162, 184, 0.8);

  --color-primary-alpha-08: rgba(0, 123, 255, 0.08);
  --color-primary-alpha-15: rgba(0, 123, 255, 0.15);
  --color-primary-alpha-20: rgba(0, 123, 255, 0.2);
  --color-primary-alpha-25: rgba(0, 123, 255, 0.25);

  --color-secondary-alpha-12: rgba(108, 117, 125, 0.12);

  /* Text selection */
  --color-selection-bg: var(--color-primary-alpha-25);
  --color-selection-text: var(--color-primary-hover);
  --color-selection-bg-inverted: rgba(255, 255, 255, 0.35);
  --color-selection-text-inverted: var(--color-white);
  --color-selection-bg-code: var(--color-info-alt-alpha-40);

  --color-warning-alpha-15: rgba(255, 193, 7, 0.15);

  /* --- Layout ------------------------------------------------------------- */

  --sf-sidebar-width: 250px;
  --sf-sidebar-collapsed-width: 4.6rem;
  --sf-layout-min-width: 320px;

  /* --- Typography --------------------------------------------------------- */

  --font-size-root: 14px;

  /* Font families */
  --font-family-heading:
    "Poppins", sans-serif; /* titles only: h1–h6, .card-title, .modal-title */
  --font-family-base:
    "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* body/regular text */
  --font-family-alt: var(
    --font-family-base
  ); /* kept for compat; was a separate Roboto stack, now identical to base */
  --font-family-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale — replaces the ad-hoc mix of px/em/rem sizes.
     Steps approximate a 1.2 (minor third) modular scale. */
  --font-size-3xs: 0.7rem; /* ~10px — timestamps, fine print */
  --font-size-2xs: 0.78rem; /* ~11px — pills, badges, meta text */
  --font-size-xs: 0.85rem; /* ~12px — secondary/supporting text */
  --font-size-sm: 0.9rem; /* ~13px — compact controls, labels */
  --font-size-base: 1rem; /* 14px — body copy, buttons, forms */
  --font-size-md: 1.2rem; /* ~17px — emphasized body */
  --font-size-lg: 1.4rem; /* ~20px — card headers */
  --font-size-xl: 1.7rem; /* ~24px — h2, card headers */
  --font-size-2xl: 2rem; /* 28px — h1, page titles */
  --font-size-3xl: 2.5rem; /* 35px — api-doc/hero headings */

  /* Heading scale — own steps, decoupled from the shared UI scale above
     (that scale is also used by .card-header/.sf-api-doc/etc., so h1–h5
     need their own values to avoid resizing unrelated components).
     ~1.25 ratio for a clearer size difference than the old, nearly-flat scale. */
  --font-size-h1: 2rem; /* 28px */
  --font-size-h2: 1.75rem; /* ~24.5px */
  --font-size-h3: 1.5rem; /* 21px */
  --font-size-h4: 1.25rem; /* ~17.5px */
  --font-size-h5: 1rem; /* 14px */

  /* Font weights — named steps instead of bold/lighter keywords */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: var(--font-weight-semibold);

  /* Line heights */
  --line-height-none: 1; /* icon buttons, single-line pills */
  --line-height-tight: 1.2; /* headings, stacked meta */
  --line-height-snug: 1.4; /* chips, dense lists */
  --line-height-base: 1.5; /* body copy, buttons */
  --line-height-relaxed: 1.6; /* long-form descriptions */
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
  scroll-padding-top: 57px;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-drag: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea {
  resize: vertical;
}

a {
  color: var(--color-primary);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--color-primary-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* AdminLTE strips Bootstrap's default focus ring app-wide
   (.btn:focus/.form-control:focus set outline:0; box-shadow:none), leaving
   keyboard users with no visible focus indicator on buttons/inputs/nav —
   restore one, matching the link treatment above.
   A soft halo (box-shadow, not outline) rather than a hard solid ring:
   some controls sit flush against a neighbor with no gap (e.g. the navbar
   search input against its attached button), where outline-offset would
   draw past the element's own edge and over that neighbor -- box-shadow
   follows the element's actual rendered shape instead. border-color is a
   no-op on elements with no border (most buttons/nav links), but gives
   form fields a crisper tinted edge under the halo. */
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible,
textarea:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Forced-colors mode (Windows High Contrast) suppresses box-shadow, which
   would otherwise leave these controls with no visible focus indicator
   at all. CanvasText is a forced-colors system color that always renders
   visibly against the mode's background. */
@media (forced-colors: active) {
  .btn:focus-visible,
  .form-control:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .page-link:focus-visible,
  .dropdown-item:focus-visible,
  .nav-link:focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* iOS Safari auto-zooms the viewport when a focused form field computes to
   under 16px. --font-size-base is 14px, so every field on the app currently
   triggers it on iPhone; bump to 16px on phone-width viewports only, since
   14px is otherwise the intended base size for the rest of the UI. */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

a.text-muted:hover {
  color: var(--color-gray-495057) !important;
}

a.disabled,
a[aria-disabled="true"] {
  color: var(--color-gray-999);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

/* --- Text element spacing -------------------------------------------------- */

p {
  line-height: var(--line-height-relaxed);
}

ul,
ol {
  line-height: var(--line-height-relaxed);
}

li + li {
  margin-top: 0.35rem;
}

li > ul,
li > ol {
  margin-top: 0.35rem;
}

/* The rules above are meant for prose-like content lists, but a bare `li`
   selector also matches UI-component lists (nav/sidebar, dropdowns,
   pagination, breadcrumbs, list-groups) -- confirmed this was leaking an
   unwanted 0.35rem gap into every sidebar nav item. Opt those back out. */
.nav li + li,
.dropdown-menu li + li,
.pagination li + li,
.list-group li + li,
.breadcrumb li + li {
  margin-top: 0;
}

.table th,
.table td {
  padding: 0.6rem 0.9rem;
  line-height: var(--line-height-snug);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */

html {
  font-size: var(--font-size-root);
}

body {
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
}

/* --- Text selection ------------------------------------------------------- */

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

::-moz-selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

pre::selection,
code::selection,
pre *::selection,
code *::selection {
  background-color: var(--color-selection-bg-code);
  color: inherit;
}

pre::-moz-selection,
code::-moz-selection,
pre *::-moz-selection,
code *::-moz-selection {
  background-color: var(--color-selection-bg-code);
  color: inherit;
}

.btn-primary::selection,
.badge-primary::selection,
.main-sidebar a.nav-link.active::selection {
  background-color: var(--color-selection-bg-inverted);
  color: var(--color-selection-text-inverted);
}

.btn-primary::-moz-selection,
.badge-primary::-moz-selection,
.main-sidebar a.nav-link.active::-moz-selection {
  background-color: var(--color-selection-bg-inverted);
  color: var(--color-selection-text-inverted);
}

.ui-widget {
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text-main) !important;
}

.btn {
  font-size: var(--font-size-base);
  -webkit-user-drag: none;
  user-drag: none;
}

.nav-icon {
  font-size: var(--font-size-base) !important;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

ul.sortable-project-list li.nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul.sortable-project-list li.nav-item div.dropdown {
  cursor: pointer;
  display: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

ul.sortable-project-list li.nav-item:hover div.dropdown {
  display: block;
}

ul.sortable-project-list li.nav-item:hover div.dropdown div.dropdown-container {
  padding-left: 5px;
  padding-right: 5px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.modal-title {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  letter-spacing: -0.015em; /* em, not px/rem, so tracking scales with each heading's own size */
}

h1,
.content-header h1 {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);
}

h2 {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h2);
}

h3 {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h3);
}

h4 {
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h4);
}

h5 {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h5);
}

h1.logo {
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
}

.navbar-light {
  background-color: var(--color-bg-main);
}

.main-sidebar {
  width: 250px;
  background-color: var(--color-bg-main);
}

/* AdminLTE's nav-link padding/margin is in rem, so the SIT-369 base-size
   bump (12px -> 14px) inflated every sidebar item's height along with it;
   text also inherits body's line-height:1.5, which is looser than a nav
   list needs. Tighten padding/line-height/item-gap -- denser than the
   pre-bump original, not just restoring it. */
.nav-sidebar .nav-link {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  line-height: var(--line-height-tight);
}

.nav-sidebar .nav-item > .nav-link {
  margin-bottom: 0.05rem;
}

/* Global maintenance banner */
.sf-maintenance-warnings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}

.sf-maintenance-warning {
  position: relative;
  border-radius: 0;
  border-width: 0 0 2px 0;
  color: inherit;
  cursor: default;
}

.sf-maintenance-warning-text {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}

.sf-maintenance-warning-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.sf-maintenance-scope-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

/* Inverted warning colors: dark background with warning-colored text */
.sf-maintenance-scope-badge--customer {
  background-color: var(--color-text-main);
  color: var(--color-warning);
}

.sf-maintenance-status-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: var(--color-text-main);
  user-select: none;
}

.sf-maintenance-status-indicator::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.25;
  animation: sf-maintenance-status-pulse 2s infinite;
}

@keyframes sf-maintenance-status-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.sf-maintenance-warning--link {
  text-decoration: none;
  cursor: pointer;
}

body.sf-has-maintenance-warning .wrapper {
  padding-top: var(--sf-maintenance-banner-height, 0);
}

body.sf-has-maintenance-warning nav.main-header {
  top: var(--sf-maintenance-banner-height, 0);
}

body.sf-has-maintenance-warning aside.main-sidebar {
  top: calc(57px + var(--sf-maintenance-banner-height, 0px));
}

/* Sticky top navbar — stays visible when content scrolls */
nav.main-header {
  position: sticky;
  top: 0;
  z-index: 1034;
}

/* Fixed sidebar — completely independent of content height/scrolling.
   Starts below the navbar (top: 57px) and fills to the bottom.
   Uses flexbox so the brand-link takes its natural height and
   .sidebar fills the remainder without hardcoded calc(). */
aside.main-sidebar {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 57px;
  left: 0;
  bottom: 0;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

.sidebar {
  padding-left: 0;
}

.main-footer {
  border: none;
  background-color: var(--color-bg-main);
  text-align: left;
  /* Long admin build tags (after "Container:") must wrap — otherwise the footer
     sets the page min-width and the main content appears scaled down. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Keep header, content, and footer on the same horizontal track. Only inset
   for the sidebar at lg+ — below 992px the sidebar overlays so the main
   column can shrink with the window down to --sf-layout-min-width. */
@media (min-width: 992px) {
  body.sidebar-mini:not(.sidebar-collapse) .main-header,
  body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
  body.sidebar-mini:not(.sidebar-collapse) .main-footer {
    margin-left: var(--sf-sidebar-width) !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header,
  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: var(--sf-sidebar-collapsed-width) !important;
  }
}

@media (max-width: 991.98px) {
  body.sidebar-mini .main-header,
  body.sidebar-mini .content-wrapper,
  body.sidebar-mini .main-footer {
    margin-left: 0 !important;
  }
}

html:has(body.sidebar-mini) {
  min-width: var(--sf-layout-min-width);
}

body.sidebar-mini {
  min-width: var(--sf-layout-min-width);
}

.verify-info {
  border-bottom: 1px solid var(--color-gray-dee2e6);
  padding: 1em 1em 1em 0 !important;
}

.verify-info div {
  border-left: 8px solid var(--color-warning);
}

/* Overriding parent styles for overflow */
.main-sidebar a.nav-link.active {
  position: relative;
  overflow: visible;
  z-index: 1;
  /* ensures the actual link stays above the backgrounds */
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Gradient background extending to the left */
.main-sidebar a.nav-link.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: -100vw;
  z-index: -2;
  /* below the main content but above the solid background */
  background-image: linear-gradient(
    to left,
    var(--color-primary),
    var(--color-primary-light)
  );
}

/* Solid background to prevent any content overlap with the gradient */
.main-sidebar a.nav-link.active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-primary);
  /* this matches the start of your gradient */
  z-index: -1;
  /* below the main content but above the gradient */
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
}

/* 0000000000000000 */

.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar::before {
  border-right: 1px solid var(--color-gray-dee2e6) !important;
}

.main-header {
  border: none;
}

.nowrap {
  white-space: nowrap;
}

.brand-image {
  margin-top: -0.5rem;
  height: 33px;
  -webkit-user-drag: none;
  user-drag: none;
}

.brand-text {
  margin-left: 0 !important;
  user-select: none;
}

.timeline-header,
.timeline-header h3 {
  font-size: var(--font-size-lg);
}

.timeline-header {
  width: 100%;
}

.timeline-body {
  font-size: var(--font-size-base) !important;
}

.picker-btn {
  font-size: var(--font-size-base) !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  min-width: 250px; /* prevent layout jump while picker initializes */
  line-height: var(--line-height-base);
  color: var(--color-gray-6c757d) !important;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-ced4da);
  border-radius: 0.25rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

@media (max-width: 991.98px) {
  .picker-btn {
    min-width: 0;
  }
}

.picker-btn .caret {
  margin-left: auto;
}

.picker-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.picker-btn span {
  margin-left: 0.4rem;
  white-space: nowrap;
  text-align: left;
}

.picker-btn:focus,
.picker-btn:focus-visible {
  border: 1px solid var(--color-primary-border);
  box-shadow: 0 0 0 0.2rem var(--color-primary-alpha-20); /* HACK: adminlte conformity */
  outline: none;
}

.sf-param-timeline-header {
  display: table;
}

.sf-action-h {
  display: table-cell;
  vertical-align: middle;
}

.CodeMirror {
  width: 100%;
  border: 1px solid var(--color-gray-ddd);
}

.field-with-error {
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

.sf-btn-extrapadding {
  padding-left: 3em;
  padding-right: 3em;
}

.squishable {
  --squish-at: 1.5rem;
  white-space: nowrap;
  user-select: none;
}

.squishable::before,
.squishable::after {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.squishable::before {
  content: attr(data-short);
  max-width: calc((var(--squish-at) - 100%) * 999);
}

.squishable::after {
  content: attr(aria-label);
  max-width: calc((100% - var(--squish-at)) * 999);
}

.non-squishable {
  display: inline-block;
  max-width: 100%;
}

.squishable-table {
  width: 100%;
}

th,
td {
  max-width: 1.5rem;
}

.card {
  /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15);*/
  box-shadow: 1px 1px 5px 1px var(--color-shadow-10);
}

.card-header {
  border-bottom: none;
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
}

/* Same "more breathing room" treatment as .card-header.test-list/.project-list,
   scoped to the dashboard page only (not the generic .card-header/.card-body,
   which are used app-wide) since these are plain header+body cards, not the
   dense list-card pattern those two were fixing. */
body.sf-dashboard .card-header {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

body.sf-dashboard .card-body {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.card-header.test-list {
  border-bottom: none;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  /* Opt back out of the generic .card-header's heading font: unlike a plain
     title header, this one wraps a whole card's worth of body copy
     (description/meta/tags) directly, not just a title -- the actual title
     is its own nested <h3> and already gets Poppins from that rule. */
  font-family: var(--font-family-base);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.card-header.project-list {
  border-bottom: none;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  /* No drag handle here (unlike .card-header.test-list, which has one via
     .sf-test-drag), so match that card's effective left indent by hand:
     the default 1.25rem padding-left + the drag column's ~0.5rem gap and
     ~1rem icon width it would otherwise take up. */
  padding-left: 2.25rem;
}

.card-secondary:not(.card-outline) > .card-header {
  background-color: var(--color-white);
}

.history-card {
  margin-bottom: 0.5rem;
}

.history-card .card-body {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
}

.history-card .btn {
  margin-top: 3px;
  margin-bottom: 3px;
}

textarea {
  outline: none;
}

@media screen and (min-width: 900px) {
  .subscription-select {
    width: 720px;
  }
}

.subscription-card .card-widget {
  background-color: var(--color-gray-fafbfb);
}

.subscription-card .card-footer {
  padding: 0.75rem 1.25rem 0.75rem 1.25rem;
}

.subscription-card .widget-user-header {
  height: 100%;
}

.subscription-card .card-footer button {
  margin: 0.5em;
}

.subscription-card .subscription-selected {
  border: 2px solid var(--color-blue-9ecaed);
  box-shadow: 0 0 10px var(--color-blue-9ecaed);
  border-radius: 7px;
}

.subscription-card .subscription-current {
  border: 2px solid var(--color-green-caed9e);
  box-shadow: 0 0 10px var(--color-green-caed9e);
  border-radius: 7px;
}

.subscription-card .subscription-selector {
  text-align: center;
  margin-top: -0.5em;
}

.subscription-card .subscription-features {
  padding: 0 1em;
  margin-top: 1em;
  background-color: var(--color-gray-f8f9fa);
}

.subscription-card #confirm_subscription-form .subscription-features {
  margin-top: 0em;
}

.subscription-card #confirm_subscription-form .subscription-services {
  padding: 1em 1em;
  margin-top: -1em;
  background-color: var(--color-gray-f8f9fa);
}

.subscription-card .subscription-features .fa-arrow-right,
.subscription-card .subscription-services .fa-arrow-right {
  width: 1.5em;
  color: var(--color-named-gray);
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.subscription-card .subscription-features .fa-xmark,
.subscription-card .subscription-services .fa-xmark {
  width: 1.5em;
  color: var(--color-named-red);
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.subscription-card .subscription-features .fa-check,
.subscription-card .subscription-services .fa-check {
  width: 1.5em;
  color: var(--color-named-limegreen);
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.subscription-currency-selector {
  text-align: right;
  vertical-align: middle;
  display: inline;
}

.subsciption-header {
  margin-bottom: 1rem;
}

.light-gray {
  color: var(--color-gray-c0c0c0);
}

#card-errors {
  color: var(--color-danger);
}

.ElementsApp,
.ElementsApp .InputElement {
  color: var(--color-gray-495057) !important;
}

div.sidebar nav ul.nav-sidebar li ul {
  margin-left: 2em;
}

.sf-advanced-param {
  font-size: 0.8em;
}

.param-require-label {
  font-family: var(--font-family-base);
  font-size: 0.6em;
  text-transform: uppercase;
  font-weight: var(--font-weight-light);
  user-select: none;
}

.tooltip-inner {
  max-width: 480px !important;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

#testcase-description {
  padding: 0.5em 1em 0.5em 1em;
}

.info-box.sf-result-status-box {
  padding: 0;
  flex-wrap: wrap !important;
}

.info-box.sf-result-status-box .info-box-content {
  padding: 1em;
}

.info-box.sf-result-status-box .info-box-icon {
  padding: 1em;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.info-box-content a .info-box-text {
  text-decoration: underline;
}

.info-box-content.text-secondary a,
.info-box-text .text-secondary {
  color: var(--color-gray-6c757d) !important;
}

.info-box-content.text-success a,
.info-box-text .text-success {
  color: var(--color-success) !important;
}

.info-box-content.text-danger a,
.info-box-text .text-danger {
  color: var(--color-danger-dark) !important;
}

.info-box-content.text-info a,
.info-box-text .text-info {
  color: var(--color-info) !important;
}

.info-box.sf-result-status-box .info-box-text {
  text-transform: uppercase;
}

.info-box.sf-result-status-box .info-box-number {
  font-size: 2em;
  font-weight: var(--font-weight-bold);
}

.info-box.sf-result-status-box .info-box-break {
  flex-basis: 100%;
  height: 0;
}

.info-box.sf-result-status-box .info-box-footer {
  background-color: var(--color-white);
  color: var(--color-gray-343a40);
  padding-top: 1em;
  width: 100%;
  border: 1px solid var(--color-gray-ddd);
  border-top: none;
}

.info-box.sf-result-status-box .info-box-footer p {
  margin-bottom: 0;
}

.info-box.sf-result-status-box .info-box-footer li {
  margin-bottom: 1em;
}

.no-padding-right {
  padding-right: 0px !important;
}

.sf-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  white-space: pre;
  background: var(--color-primary-bg-light);
  color: var(--color-primary-hover);
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

:not(pre) > code {
  font-family: var(--font-family-mono);
  background: var(--color-primary-bg-light);
  color: var(--color-primary-hover);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

ul.api-attribute-list,
ul.api-list {
  list-style-type: none;
}

ul.api-attribute-list li {
  border-top: 1px solid var(--color-gray-ddd);
  padding-top: 10px;
  padding-bottom: 10px;
}

ul.api-attribute-list li p {
  margin-top: 3px;
  margin-bottom: 3px;
}

.api-attribute-name {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.api-attribute-type {
  font-family: var(--font-family-alt);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-gray-999);
  margin-left: 0.5em;
}

.api-attribute-req {
  font-family: var(--font-family-alt);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  color: var(--color-gray-666);
  margin-left: 0.5em;
}

.api-attribute-value-label {
  font-family: var(--font-family-alt);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  color: var(--color-gray-666);
  margin-left: 0.5em;
}

.api-attribute-value {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  color: var(--color-gray-666);
  border: 1px solid var(--color-gray-ddd);
  border-radius: 4px;
  padding: 4px;
}

.api-attribute-description {
  font-size: var(--font-size-base);
  color: var(--color-gray-666);
}

pre code.hljs {
  padding: 0px 15px 15px 15px;
  border-radius: 10px;
  font-size: var(--font-size-base);
}

pre {
  margin-bottom: 0px;
  padding: 0px;
}

.api-doc-img {
  width: 100%;
  float: left;
  padding: 40px 40px 20px 20px;
}

.sf-example-csv {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  margin-left: 0.5em;
}

.sf-api-doc .card-title {
  font-size: var(--font-size-2xl);
}

.sf-api-doc h1 {
  font-size: var(--font-size-3xl);
}

.sf-api-doc h2 {
  font-size: var(--font-size-3xl);
}

.sf-api-doc h3 {
  font-size: var(--font-size-2xl);
}

.sf-card-header {
  font-weight: var(--font-weight-bold);
}

#sf-confirm-modal .modal-header {
  font-weight: var(--font-weight-bold);
}

#service-plans-view h3,
#services-view h3 {
  margin-left: 0.8rem;
  margin-top: 0.8rem;
  margin-bottom: 0;
}

#credential-selection .credentials-block {
  margin-left: 20px;
}

#credential-selection .tabulator-table {
  width: 100%;
  font-family:
    "Source Sans Pro",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

#credential-selection .tabulator-row {
  border: none;
  margin-top: 2px;
  margin-bottom: 0px;
  min-height: 2rem !important;
}

#credential-selection .tabulator-cell {
  height: 2rem !important;
  padding: 1px 3px 1px 3px;
  margin: 0;
}

#credential-selection button.tabulator-page {
  padding: 4px 6px;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

#credential-selection .tabulator-footer {
  margin-top: 1px;
  padding: 4px 6px;
}

#credential-selection .tabulator-col-resize-handle {
  border-left: 1px dashed var(--color-gray-e0e0e0);
}

#credential-selection .tabulator-col-resize-handle.prev {
  border: none;
}

#credential-selection .add-creds-button {
  margin-top: 5px;
}

label.input-error {
  text-align: left;
  color: var(--color-white);
  padding: 0.2rem 0.5rem 0.2rem 0.35rem;
  opacity: 0.8;
  background-color: var(--color-danger);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--color-gray-999);
  -moz-box-shadow: 0 0 8px var(--color-gray-999);
  -webkit-box-shadow: 0 0 8px var(--color-gray-999);
}

label.input-error i,
label.input-error svg {
  margin-right: 5px;
  font-size: var(--font-size-md);
  position: relative;
  top: 0.12rem;
  opacity: 0.9;
}

.sf-scrollable {
  overflow: scroll;
}

.sf-fixed-400 {
  height: 400px;
}

.sf-nomargin {
  margin: 0;
}

.sf-small-link {
  font-size: var(--font-size-2xs);
}

#hepic-modal .modal-dialog {
  width: 80%;
  max-width: 80%;
  height: 80%;
  max-height: 80%;
}

#hepic-modal .modal-content {
  height: 80%;
  max-height: 80%;
}

#hepic-modal .modal-body {
  height: 100%;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

#hepic-modal iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  border: none;
}

.sf-form-inline-label {
  font-weight: var(--font-weight-regular) !important;
}

.bootstrap-tagsinput {
  width: 100% !important;
}

.sf-toggle label {
  font-weight: var(--font-weight-regular) !important;
}

/* Matrix options: align both toggles vertically (same label column width) */
.bulk-options-bar .bulk-option-label {
  min-width: 340px;
  width: 340px;
}

/* Multi-test toggles: compact width/height for "Multiple"/"Single" */
.sf-toggle-multitest .toggle {
  min-width: 100px !important;
  width: 100px !important;
  min-height: 22px !important;
  height: 22px !important;
  user-select: none;
}
.sf-toggle-multitest .toggle .toggle-on,
.sf-toggle-multitest .toggle .toggle-off {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: var(--font-size-xs) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  line-height: var(--line-height-none) !important;
}

.sf-btn-margin {
  margin: 3px;
}

.sf-test-runrow {
  height: 100px;
  min-height: 100px !important;
  border-top: 1px solid var(--color-gray-f0f0f0);
  border-bottom: 1px solid var(--color-gray-f0f0f0);
  margin: 3px;
}

.sf-test-runcol {
  padding-right: 0px;
}

.sf-test-runblock {
  float: left;
  margin: 5px 3px 5px 0px;

  width: 10px;
  height: 75px;
  min-height: 75px;
}

.sf-test-runblock-success {
  background-color: var(--color-success-alt);
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-failed {
  background-color: var(--color-danger);
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-progress {
  background-color: var(--color-info-alt);
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-light1 {
  background-color: var(--color-gray-f9f9f9) !important;
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-light2 {
  background-color: var(--color-gray-f6f6f6) !important;
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-light3 {
  background-color: var(--color-gray-f3f3f3) !important;
  height: 100%;
  border-radius: 25px;
}

.sf-test-runblock-margin {
  margin-right: 9%;
}

body.sf-kiosk,
body.sf-print {
  padding: 1rem;
}

div.dropdown button.dropdown-toggle i {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

div.card.highlight {
  box-shadow:
    0 0 2px var(--color-info-alt-alpha-20),
    0 1px 4px var(--color-info-alt-alpha-40) !important;
  border: 1px solid var(--color-info-alt-alpha-80);
}

/* ── Mobile session/jsGrid table: collapse the two fixed-layout tables into a
      single full-width stacked card list ──────────────────────────────────────
   jsGrid renders the header (labels + filters) and the rows as two separate
   `table-layout: fixed` tables whose column widths are synced via a JS-injected
   <colgroup>.  On narrow screens we hide the header table and break the body
   table out of table layout so every cell flows as a full-width block.  Each
   cell shows its column name from the data-label attribute set in the renderer. */
@media (max-width: 767px) {
  /* Column-label + filter header is redundant once cells carry their own labels */
  .sf-table:not(.sf-creds-table) .jsgrid-grid-header {
    display: none;
  }

  /* Take the body out of fixed table layout; the synced <colgroup> no longer
       applies.  Every level (table → tbody → tr → td) must become a block — a
       leftover table-cell inside a block table gets wrapped in an anonymous
       min-content table and collapses to one character per line (e.g. the
       "No sessions found." row). */
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body {
    overflow-x: hidden;
  }
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body > table > colgroup {
    display: none;
  }
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body > table,
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body > table > tbody,
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body > table > tbody > tr,
  .sf-table:not(.sf-creds-table) .jsgrid-grid-body > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    /* The fixed-layout column widths surface as min/max-width on the cells;
           both must be released or the cell stays pinned to its column width. */
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Each row becomes a self-contained full-width card */
  .sf-table:not(.sf-creds-table) tr.sf-grid-row,
  .sf-table:not(.sf-creds-table) tr.sf-grid-row-darker {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-shadow-125);
    border-radius: 4px;
    overflow: hidden;
  }

  /* Each cell becomes a full-width block carrying an inline "Label: value"
       line.  Plain block layout (not flex) keeps inline icons at their natural
       size and lets text wrap normally.  Override the desktop pill
       borders/radii (set without !important, so equal-specificity rules here
       win by source order); text-center utility cells need !important. */
  .sf-table:not(.sf-creds-table) tr.sf-grid-row td,
  .sf-table:not(.sf-creds-table) tr.sf-grid-row-darker td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 0;
    border-bottom: 1px solid var(--color-shadow-06);
    border-radius: 0;
  }
  .sf-table:not(.sf-creds-table) tr.sf-grid-row td:first-child,
  .sf-table:not(.sf-creds-table) tr.sf-grid-row-darker td:first-child {
    border-left: 0;
    border-radius: 0;
  }
  .sf-table:not(.sf-creds-table) tr.sf-grid-row td:last-child,
  .sf-table:not(.sf-creds-table) tr.sf-grid-row-darker td:last-child {
    border-bottom: 0;
    border-radius: 0;
  }

  /* Inline column label, only for cells that carry a non-empty data-label
       (e.g. action/button columns have none and stay label-less). */
  .sf-table:not(.sf-creds-table)
    tr.sf-grid-row
    td[data-label]:not([data-label=""])::before,
  .sf-table:not(.sf-creds-table)
    tr.sf-grid-row-darker
    td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ": ";
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-6c757d);
    margin-right: 0.35rem;
  }

  /* Drop cells with no content (e.g. an empty actions column, or a missing
       duration) so they don't render as blank bordered lines. */
  .sf-table:not(.sf-creds-table) tr.sf-grid-row td:empty,
  .sf-table:not(.sf-creds-table) tr.sf-grid-row-darker td:empty {
    display: none;
  }

  /* Credentials grids have six+ columns — keep table layout and scroll
       horizontally instead of stacking (which breaks sf-grid-row-normal rows). */
  .sf-creds-table .jsgrid-grid-header,
  .sf-creds-table .jsgrid-grid-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sf-creds-table .jsgrid-grid-header > table,
  .sf-creds-table .jsgrid-grid-body > table {
    min-width: 36rem;
  }
}

.sf-table-container.is-invalid {
  border: 1px solid var(--color-named-red) !important;
}

.sf-table .jsgrid-grid-header {
  background-color: var(--color-white);
}

.sf-table .jsgrid-grid-header th,
.sf-table .jsgrid-grid-header td {
  background-color: var(--color-white);
  border: 0;
}

.sf-table .jsgrid-grid-header th {
  font-weight: var(--font-weight-bold);
  padding: 0.75rem;
  user-select: none;
}

.sf-table .jsgrid-grid-header td {
  padding: 0 0.75rem 0.75rem 0.75rem;
}

.sf-table .jsgrid-header-sort-asc:before {
  border-color: transparent transparent var(--color-primary) transparent;
}

.sf-table .jsgrid-header-sort-desc:before {
  border-color: var(--color-primary) transparent transparent transparent;
}

.sf-table .jsgrid-grid-body {
  border: 0;
}

.sf-table .jsgrid-grid-header {
  border: 0;
}

.sf-table .jsgrid-grid-body table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

tr.sf-grid-row td,
tr.sf-grid-row-darker td {
  padding: 0.75rem;
  border-top: 1px solid var(--color-shadow-125);
  border-bottom: 1px solid var(--color-shadow-125);
}

tr.sf-grid-row td {
  background-color: var(--color-white);
}

tr.sf-grid-row-darker td {
  background-color: var(--color-gray-fbfbfb);
}

.sf-grid-btncol {
  color: var(--color-white);
}

tr.jsgrid-edit-row {
  background: var(--color-white);
}

tr.jsgrid-edit-row td.jsgrid-cell {
  background: var(--color-white);
  border: 0;
}

tr.jsgrid-selected-row td.highlight-selected {
  cursor: pointer;
  background-color: var(--color-blue-bfdfff) !important;
}

tr.sf-grid-row td:first-child,
tr.sf-grid-row-darker td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid var(--color-shadow-125);
}

tr.sf-grid-row td:last-child,
tr.sf-grid-row-darker td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid var(--color-shadow-125);
}

.sf-creds-table .jsgrid-insert-row input[type="text"],
.sf-creds-table .jsgrid-edit-row input[type="text"] {
  border: 1px solid var(--color-shadow-125);
  border-radius: 3px;
  padding: 0.3em 0.5em;
}

tr.sf-grid-row-normal .jsgrid-cell:not(.jsgrid-control-field),
.sf-creds-table .jsgrid-insert-row .jsgrid-cell:not(.jsgrid-control-field) {
  padding: 0.75rem;
  padding-left: 2rem;
  border: 0;
  border-top: 1px solid var(--color-shadow-125) !important;
  border-bottom: 1px solid var(--color-shadow-125) !important;
  background: var(--color-gray-fbfbfb);
}

.sf-creds-table tr.sf-grid-row-normal .jsgrid-cell:not(.jsgrid-control-field),
.sf-creds-table .jsgrid-insert-row .jsgrid-cell:not(.jsgrid-control-field),
.sf-creds-table .jsgrid-edit-row .jsgrid-cell:not(.jsgrid-control-field) {
  padding: 0.55rem 0.75rem !important;
  text-align: left;
  vertical-align: top;
}

.sf-creds-table tr.sf-grid-row-normal td.jsgrid-control-field,
.sf-creds-table .jsgrid-edit-row td.jsgrid-control-field,
.sf-creds-table .jsgrid-insert-row td.jsgrid-control-field,
.sf-creds-table .jsgrid-filter-row td.jsgrid-control-field,
.sf-creds-table .jsgrid-grid-header th.jsgrid-control-field {
  padding: 0.55rem 0.75rem !important;
  text-align: left !important;
  vertical-align: top;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}

.sf-creds-table tr.sf-grid-row-normal td.jsgrid-control-field,
.sf-creds-table .jsgrid-insert-row td.jsgrid-control-field {
  background: var(--color-gray-fbfbfb) !important;
}

.sf-creds-table .jsgrid-edit-row td.jsgrid-control-field,
.sf-creds-table .jsgrid-filter-row td.jsgrid-control-field,
.sf-creds-table .jsgrid-grid-header th.jsgrid-control-field {
  background: var(--color-white) !important;
}

.sf-creds-table tr.jsgrid-selected-row td.jsgrid-control-field,
.sf-creds-table tr.jsgrid-row:hover td.jsgrid-control-field {
  background: var(--color-gray-fbfbfb) !important;
}

.sf-creds-table
  tr.jsgrid-filter-row.jsgrid-selected-row
  td.jsgrid-control-field,
.sf-creds-table tr.jsgrid-filter-row:hover td.jsgrid-control-field,
.sf-creds-table .jsgrid-filter-row td.jsgrid-control-field:hover {
  background: var(--color-white) !important;
}

.sf-creds-table tr.jsgrid-edit-row.jsgrid-selected-row td.jsgrid-control-field,
.sf-creds-table tr.jsgrid-edit-row:hover td.jsgrid-control-field {
  background: var(--color-white) !important;
}

.sf-creds-table .jsgrid-filter-row td.jsgrid-control-field {
  padding-top: 0.35rem !important;
  padding-bottom: 0.5rem !important;
}

.sf-creds-table .jsgrid-insert-row .jsgrid-cell:not(.jsgrid-control-field) {
  padding-left: 0.75rem !important;
}

tr.sf-grid-row-normal td:first-child,
.sf-creds-table .jsgrid-insert-row td:first-child {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-left: 1px solid var(--color-shadow-125) !important;
}

tr.sf-grid-row-normal td:last-child,
.sf-creds-table .jsgrid-insert-row td:last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-right: 1px solid var(--color-shadow-125) !important;
}

tr.jsgrid-filter-row,
tr.jsgrid-filter-row .jsgrid-cell {
  border: 0;
}

.sf-creds-table .jsgrid-grid-header .jsgrid-table {
  border-collapse: separate !important;
}

.sf-creds-table .jsgrid-grid-header th,
.sf-creds-table .jsgrid-grid-header td,
.sf-creds-table .jsgrid-header-cell,
.sf-creds-table tr.sf-grid-row-normal .jsgrid-cell,
.sf-creds-table .jsgrid-grid-body .jsgrid-cell,
.sf-creds-table .jsgrid-control-field {
  vertical-align: top;
}

.sf-creds-table .jsgrid-grid-header th,
.sf-creds-table .jsgrid-grid-header .jsgrid-header-cell {
  padding: 0.55rem 0.75rem !important;
  text-align: left;
}

.sf-creds-table .jsgrid-filter-row .jsgrid-cell:not(.jsgrid-control-field) {
  padding: 0.35rem 0.75rem 0.5rem !important;
  text-align: left;
  vertical-align: top;
}

.sf-creds-table .jsgrid-filter-row input.form-control {
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.sf-creds-table .jsgrid-control-field .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  height: 2rem !important;
  padding: 0 !important;
  line-height: 1;
  margin: 0 !important;
  vertical-align: top;
  position: relative;
  z-index: 1;
}

.sf-creds-table .jsgrid-filter-row .jsgrid-control-field .btn {
  color: var(--color-gray-6c757d);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-adb5bd);
  height: calc(1.5em + 0.75rem + 2px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.sf-creds-table .jsgrid-filter-row .jsgrid-control-field .btn:hover {
  color: var(--color-gray-495057);
  background-color: var(--color-white);
  border-color: var(--color-gray-6c757d);
}

.sf-creds-table .jsgrid-control-field .btn + .btn {
  margin-left: 0.25rem;
}

.sf-creds-table .jsgrid-selected-row > .jsgrid-cell,
.sf-creds-table tr.jsgrid-selected-row td.jsgrid-cell {
  background: var(--color-gray-fbfbfb) !important;
}

.sf-creds-table tr.jsgrid-selected-row td.jsgrid-control-field {
  background: var(--color-gray-fbfbfb) !important;
}

.sf-creds-table .jsgrid-header-sortable:hover,
.sf-creds-table .jsgrid-header-sort {
  background: var(--color-white) !important;
}

.sf-creds-table.jsgrid {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.sf-creds-table .jsgrid-grid-header,
.sf-creds-table .jsgrid-grid-body {
  width: 100%;
  max-width: 100%;
}

.sf-creds-table .jsgrid-grid-header {
  overflow-y: scroll;
}

.sf-creds-table .jsgrid-grid-body {
  overflow-y: auto;
}

.sf-creds-table .jsgrid-grid-header > table,
.sf-creds-table .jsgrid-grid-body > table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.sf-creds-table .jsgrid-grid-body > table {
  border-spacing: 0 0.5rem;
}

.sf-creds-table .jsgrid-grid-header th:not(.jsgrid-control-field),
.sf-creds-table .jsgrid-grid-header td:not(.jsgrid-control-field),
.sf-creds-table .jsgrid-grid-body td:not(.jsgrid-control-field) {
  min-width: 0;
  overflow: hidden;
}

.sf-creds-table td.jsgrid-control-field,
.sf-creds-table th.jsgrid-control-field {
  overflow: visible;
  white-space: nowrap;
}

.sf-creds-table .jsgrid-insert-row input[type="text"],
.sf-creds-table .jsgrid-edit-row input[type="text"],
.sf-creds-table .jsgrid-insert-row .input-group,
.sf-creds-table .jsgrid-edit-row .input-group {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sf-creds-table .jsgrid-insert-row .input-group > .form-control,
.sf-creds-table .jsgrid-edit-row .input-group > .form-control {
  min-width: 0;
  width: 1%;
  flex: 1 1 auto;
}

.sf-creds-table .jsgrid-insert-row .input-group-append,
.sf-creds-table .jsgrid-edit-row .input-group-append {
  flex-shrink: 0;
}

.sf-creds-table .jsgrid-control-field .btn.btn-block {
  display: inline-flex !important;
  width: 2.25rem !important;
}

.sf-creds-table .jsgrid-filter-row .jsgrid-control-field .btn.btn-block {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

.cred-set .cred-set-entries,
.cred-set .sf-creds-table,
.cred-set .sf-table-container {
  width: 100%;
  max-width: 100%;
}

.cred-set .cred-set-entries {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-dee2e6);
}

.cred-set .sf-creds-table {
  margin-bottom: 0;
}

.cred-set .sf-creds-table td.jsgrid-control-field,
.cred-set .sf-creds-table th.jsgrid-control-field {
  width: 8rem !important;
  min-width: 8rem;
  white-space: normal;
}

.cred-set .sf-creds-table tr.sf-grid-row-normal td.jsgrid-control-field .btn,
.cred-set .sf-creds-table .jsgrid-edit-row td.jsgrid-control-field .btn,
.cred-set .sf-creds-table .jsgrid-insert-row td.jsgrid-control-field .btn {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

.cred-set
  .sf-creds-table
  tr.sf-grid-row-normal
  td.jsgrid-control-field
  .btn
  + .btn,
.cred-set .sf-creds-table .jsgrid-edit-row td.jsgrid-control-field .btn + .btn,
.cred-set
  .sf-creds-table
  .jsgrid-insert-row
  td.jsgrid-control-field
  .btn
  + .btn {
  margin-left: 0 !important;
  margin-top: 0.25rem;
}

.cred-set
  .sf-creds-table
  tr.sf-grid-row-normal
  td.jsgrid-control-field
  .btn.btn-block,
.cred-set
  .sf-creds-table
  .jsgrid-edit-row
  td.jsgrid-control-field
  .btn.btn-block,
.cred-set
  .sf-creds-table
  .jsgrid-insert-row
  td.jsgrid-control-field
  .btn.btn-block {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

.jsgrid-load-panel:before {
  border: 2px solid var(--color-primary) !important;
  /* load spinner color to primary color */
}

.ui-widget .jsgrid a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.ui-widget .jsgrid a:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: none !important;
}

.sf-test-sessions {
  /*    min-height: 135px;*/
}

.sf-project-runs {
  min-height: 130px;
}

.ui-progressbar p {
  position: relative;
  top: -75%;
  /* Center vertically */
  left: 50%;
  /* Center horizontally */
  /*transform: translate(-50%, -50%); /* Adjusts centering */
  color: var(--color-named-darkgray);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  user-select: none;
  /*background: rgba(0, 0, 0, 0.5); /* Optional background */
  /*padding: 5px 10px;*/
}

/* jQuery UI's stock "smoothness" theme only sizes the fill to the
   track's *content* box (height: 100%) while nudging it -1px up/left
   to mask the track's border on those two sides -- so the bottom/right
   border is never covered and a full bar still shows a thin uncovered
   sliver. Grow the fill by the border width so it reaches every edge
   of the track. Fill/track colors are left as the stock theme's grays.
   Selector has one extra class over jquery-ui.css's own
   ".ui-progressbar .ui-progressbar-value" so this wins on specificity
   regardless of stylesheet load order (jquery-ui.min.css loads after
   this file). */
.ui-widget.ui-progressbar .ui-progressbar-value {
  height: calc(100% + 2px);
}

/* The widget computes the fill's width as a frozen pixel snapshot of the
   track's width at the moment it (re-)renders -- if the track's width
   changes afterward (webfonts swapping in, the jsGrid table loading
   asynchronously below it, etc.) that snapshot goes stale and a
   "complete" bar can visibly undershoot the track's actual width.
   The widget already flags a fully-complete bar with this class, so
   force it to the live width instead of trusting the stale px value. */
.ui-widget.ui-progressbar .ui-progressbar-value.ui-progressbar-complete {
  /* +2px for the same reason as the height override above: percentage
     width resolves against the track's content box, but the -1px
     margin shifts this element to start at the track's outer edge, so
     it needs the border width added back to reach the opposite edge. */
  width: calc(100% + 2px) !important;
}

.sf-test-projects {
  /*    min-height: 135px;*/
}

.modal {
  padding: 20px !important;
}

#upload-bar {
  background-color: var(--color-primary);
  height: 1rem;
  min-height: 1rem;
}

.details-card .card-header {
  font-family: var(--font-family-alt);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.details-card .card-body {
  font-family: var(--font-family-alt);
  font-size: var(--font-size-base);
}

.card-header a.toggle-button {
  color: var(--color-primary);
  text-decoration: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.card-header a.toggle-button:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.sf-test-sessions .card-body .ui-widget-header {
  background: var(--color-white);
  border: none;
  border-bottom: 1px solid var(--color-gray-ddd);
}

.sf-project-runs .card-body .ui-widget-header {
  background: var(--color-white);
  border: none;
  border-bottom: 1px solid var(--color-gray-ddd);
}

.sf-test-projects .card-body .ui-widget-header {
  background: var(--color-white);
  border: none;
  border-bottom: 1px solid var(--color-gray-ddd);
}

.sf-test-projects .card-body .ui-widget.ui-widget-content {
  border: none;
}

.sf-test-projects .card-header b {
  font-weight: var(--font-weight-semibold);
}

table.sf-traceroute-table {
}

table.sf-traceroute-table th {
  font-weight: var(--font-weight-semibold);
  text-align: center;
  vertical-align: middle;
}

table.sf-traceroute-table td {
  text-align: center;
  vertical-align: middle;
}

td.sf-traceroute-col-narrow {
  max-width: 6rem;
  width: 6rem;
  white-space: nowrap;
}

.sf-bg-dark {
  background-color: var(--color-gray-f2f4f6);
}

.sf-bg-darker {
  background-color: var(--color-gray-eceff2);
}

.checkbox-1x {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}

.radio-1x {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}

div.sf-test-session-slot-list div.box.placeholder {
  border: 1px dashed var(--color-gray-d0d0d0);
  min-height: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
}

ul.sortable-project-list li.box.placeholder {
  border: 1px dashed var(--color-gray-d0d0d0);
  min-height: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}

div.sf-test-session-slot-list .sf-test-drag {
  cursor: move;
  /* Fallback if grab cursor is unsupported */
  cursor: -webkit-grab;
  /* Old versions of Chrome/Safari */
  cursor: -moz-grab;
  /* Old versions of Firefox */
  cursor: grab;
  /* Standard: Use this if supported */

  padding: 0;
  margin: 10px;
  margin-top: auto;
  margin-bottom: auto;
  color: var(--color-gray-d0d0d0);
  user-select: none;

  width: 2rem;
  max-width: 2rem;
}

.only-print {
  display: none;
}

.always-print {
}

.card-sip-traces,
.card-call-states,
.sipp-error-logs,
.media-statistics,
.media-details,
.signaling-insights,
.result-status,
.codeceptjs-report,
.dns-logs,
.dns-metrics,
.tcp-metrics,
.traffic-metrics,
.advanced-metrics,
.webrequest-status {
  width: 100%;
  border: none;
}

.card-sip-traces {
  height: 500px;
}

.card-call-states,
.media-statistics,
.media-details,
.signaling-insights,
.result-status,
.dns-metrics,
.tcp-metrics,
.traffic-metrics,
.advanced-metrics {
  height: 250px;
}

.media-details-2 {
  width: 100%;
  border: none;
}

.media-details-2 {
  height: 350px;
}

.media-statistics-dashboard {
  width: 100%;
  height: 2880px;
  border: none;
}

.sipp-error-logs,
.dns-logs,
.webrequest-status {
  height: 400px;
}

.tls-insights {
  height: 500px;
}

.codeceptjs-report {
  height: 1024px;
}

#error-description-long-container {
  display: none;
}

.sf-scenario-info-card {
  --sf-scenario-secondary-margin-top: 0.5rem;
  --sf-scenario-secondary-margin-bottom: 1.5rem;
}

.sf-scenario-info-card .card-header {
  align-items: flex-start;
  column-gap: 0;
  padding: 2rem 2.25rem 0.75rem;
}

.sf-scenario-info-card .card-body {
  padding: 0 2.25rem 2.75rem;
}

.sf-scenario-info-card .sf-scenario-secondary {
  margin-top: var(--sf-scenario-secondary-margin-top);
  margin-bottom: var(--sf-scenario-secondary-margin-bottom);
}

.sf-scenario-info-card .sf-scenario-status {
  margin-right: 1rem;
}

.sf-scenario-info-card #session-state,
.sf-scenario-info-card #run-state {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.sf-scenario-info-card #result-description {
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.sf-scenario-info-card #result-description:empty {
  display: none;
}

.sf-scenario-info-card #result-description .badge {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.35em 0.6em;
  white-space: normal;
  text-align: left;
  max-width: 100%;
}

.sf-scenario-info-card .card-title {
  margin-bottom: 0;
  float: none;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.sf-scenario-info-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  grid-auto-rows: minmax(1.75rem, auto);
  align-items: stretch;
}

.sf-scenario-info-card .sf-scenario-info-data {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sf-scenario-info-fields .sf-scenario-details {
  display: contents;
}

.sf-scenario-info-fields .sf-scenario-tags {
  display: contents;
}

.sf-scenario-info-fields .sf-scenario-tags > style {
  display: none;
}

.sf-scenario-info-fields .sf-scenario-tags .row {
  display: contents;
}

.sf-scenario-info-fields .sf-scenario-tags > .sf-session-tags-status {
  grid-column: 1 / -1;
}

.sf-scenario-info-fields .sf-scenario-tags > script {
  display: none;
}

.sf-scenario-info-card .sf-scenario-details dt,
.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6:first-child {
  font-weight: 600;
  color: var(--color-gray-495057);
  text-align: left;
  line-height: 1.35;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  height: 100%;
}

.sf-scenario-info-card .sf-scenario-details dd,
.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6:last-child {
  margin-bottom: 0;
  margin-left: 0;
  text-align: left;
  line-height: 1.35;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  height: 100%;
}

.sf-scenario-info-card .sf-scenario-details dd.d-flex {
  width: 100%;
  justify-content: flex-start;
}

.sf-scenario-info-card .sf-scenario-details dd > #progressbar {
  width: 100%;
}

.sf-scenario-info-card .sf-scenario-tags .row.mt-1 {
  margin-top: 0 !important;
}

.sf-scenario-info-card .sf-scenario-details dt,
.sf-scenario-info-card .sf-scenario-details dd,
.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6:first-child,
.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6:last-child {
  align-self: stretch;
}

.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6:last-child {
  flex-wrap: wrap;
  gap: 0.25rem;
  align-content: center;
}

.sf-scenario-info-card .sf-scenario-tags .badge,
.sf-scenario-info-card .sf-session-tags-list .sf-session-tag,
.sf-scenario-info-card .sf-session-admin-tag-btn {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.1rem 0.5rem;
  border-radius: 0.2rem;
  border-width: 1px;
  border-style: solid;
  margin: 0 !important;
  vertical-align: baseline;
  box-shadow: none;
}

.sf-scenario-info-card .sf-scenario-tags .badge-primary {
  border-color: var(--color-primary);
}

.sf-scenario-info-card .sf-session-tags-list {
  gap: 0.25rem;
  min-height: 0;
  align-items: stretch;
}

.sf-scenario-info-card .sf-session-tags-list .sf-session-tag {
  align-items: center;
}

.sf-scenario-info-card .sf-session-tags-list .sf-session-tag.badge-info {
  border-color: var(--color-info-alt);
}

.sf-scenario-info-card
  .sf-session-tags-list
  .sf-session-tag.badge-sf-session-ignore {
  border-color: var(--color-session-tag-ignore);
}

.sf-scenario-info-card
  .sf-session-tags-list
  .sf-session-tag.badge-sf-session-important {
  border-color: var(--color-session-tag-important);
}

.sf-scenario-info-card .sf-session-tags-list .sf-session-tag-remove {
  font-size: 1.05em;
  line-height: 1;
  margin-left: 0.35em;
  padding: 0 0.1em;
}

.sf-scenario-info-card .sf-session-tags-list .sf-session-tag-input {
  align-self: stretch;
  height: auto;
  min-height: 0;
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
  border-radius: 0.2rem;
}

.sf-scenario-info-card #sf-session-tags-status {
  min-height: 0 !important;
  margin: 0 0 0.25rem !important;
  padding: 0;
  line-height: 1.35;
}

.sf-scenario-info-card #sf-session-tags-status:empty {
  display: none;
}

.sf-scenario-info-card .sf-session-admin-tags {
  gap: 0.25rem;
  align-items: stretch;
}

.sf-scenario-info-card .sf-session-admin-tag-btn.btn-sm {
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
}

.sf-scenario-info-card .sf-scenario-tags .row > .col-sm-6 {
  flex: none;
  max-width: none;
  width: auto;
}

.sf-scenario-info-card .sf-scenario-tags .font-weight-bold {
  font-weight: 600 !important;
}

.sf-scenario-info-card .sf-scenario-session-id {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font-size: 1rem;
  color: var(--color-gray-495057);
  background: var(--color-gray-f8f9fa);
  padding: 0.1rem 0.35rem;
  border-radius: 0.2rem;
  line-height: 1.35;
  margin: 0;
  cursor: pointer;
}

.sf-scenario-info-card dd:has(.sf-scenario-session-id) {
  align-items: stretch;
}

.sf-scenario-info-card .sf-scenario-clipboard-btn.btn-sm,
.sf-scenario-info-card .sf-session-tag-add-btn.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 2.25rem;
  padding: 0.1rem 0.65rem;
  font-size: 1rem;
  line-height: 1.35;
  border-radius: 0.2rem;
}

.sf-scenario-config-panel {
  display: flex;
  flex-direction: column;
  --sf-scenario-config-bg: var(--color-gray-f8f9fa);
  --sf-scenario-config-bg-hover: var(--color-gray-eceff2);
  --sf-scenario-config-border: var(--color-gray-dee2e6);
  --sf-scenario-config-text: var(--color-gray-495057);
  --sf-scenario-config-text-strong: var(--color-gray-343a40);
  --sf-scenario-config-text-muted: var(--color-gray-6c757d);
  --sf-scenario-config-card-bg: var(--color-white);
  --sf-scenario-config-card-border: var(--color-gray-eceff2);
  --sf-scenario-config-divider: var(--color-gray-f2f4f6);
}

.sf-scenario-config-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--sf-scenario-config-bg);
  border: 1px solid var(--sf-scenario-config-border);
  border-radius: 0.25rem;
  color: var(--sf-scenario-config-text);
  text-decoration: none;
  white-space: nowrap;
}

.sf-scenario-config-content.collapse,
.sf-scenario-config-content.collapsing,
.sf-scenario-config-content.collapse.show {
  align-self: stretch;
  width: 100%;
}

@media (min-width: 992px) {
  .sf-scenario-config-panel {
    align-items: flex-start;
  }

  .sf-scenario-config-toggle {
    width: auto;
    justify-content: center;
  }
}

.sf-scenario-config-toggle:hover,
.sf-scenario-config-toggle:focus {
  background-color: var(--sf-scenario-config-bg-hover);
  color: var(--sf-scenario-config-text-strong);
  text-decoration: none;
}

.sf-scenario-config-toggle[aria-expanded="true"] {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sf-scenario-config-chevron {
  transition: transform 0.2s ease;
}

.sf-scenario-config-toggle[aria-expanded="true"] .sf-scenario-config-chevron {
  transform: rotate(180deg);
}

.sf-scenario-config-content.collapse.show,
.sf-scenario-config-content.collapsing {
  border-top: none;
  border-right: 1px solid var(--sf-scenario-config-border);
  border-bottom: 1px solid var(--sf-scenario-config-border);
  border-left: 1px solid var(--sf-scenario-config-border);
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 0;
  background-color: var(--sf-scenario-config-bg);
}

.sf-scenario-config-content.collapse.show .sf-config-params-display,
.sf-scenario-config-content.collapsing .sf-config-params-display {
  padding: 1.75rem 2rem;
}

.sf-scenario-config-panel .sf-config-params-display {
  --sf-config-text-strong: var(--sf-scenario-config-text-strong);
  --sf-config-text-muted: var(--sf-scenario-config-text-muted);
  --sf-config-card-bg: var(--sf-scenario-config-card-bg);
  --sf-config-card-border: var(--sf-scenario-config-card-border);
  --sf-config-divider: var(--sf-scenario-config-divider);
  width: 100%;
  min-width: 0;
}

.sf-scenario-info-card .sf-failure-reasons-callout {
  padding: 1.5rem 1.5rem;
  background: var(--color-danger-bg-light);
  border-color: var(--color-danger-border-light);
  color: var(--color-danger);
  box-shadow: none;
}

.sf-scenario-info-card .sf-failure-reasons-inner {
  padding-left: 0.5rem;
}

.sf-scenario-info-card .sf-failure-reasons-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: 0.75rem;
}

.sf-scenario-info-card .sf-failure-reasons,
.sf-scenario-info-card #error-description-long {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  color: var(--color-danger);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.45;
}

.sf-scenario-info-card .sf-failure-reasons li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.625rem;
  color: var(--color-danger);
}

.sf-scenario-info-card .sf-failure-reasons li span {
  font-weight: 600;
}

.sf-scenario-info-card .sf-failure-reasons li:last-child {
  margin-bottom: 0;
}

.sf-failure-reason-bullet {
  flex-shrink: 0;
  margin-top: 0.25em;
}

/* Root-cause/script errors (e.g. a WebDriver exception) are visually
   distinct from failed test conditions (e.g. MOS/RTP assertions) so it's
   clear at a glance which lines are the underlying cause vs. its symptoms. */
.sf-scenario-info-card .sf-failure-reasons li.sf-failure-reason-description,
.sf-scenario-info-card .sf-failure-reasons li.sf-failure-reason-description span {
  color: var(--color-warning-text);
}

/* A voicebot task failure, split into what happened and what was required (see
   voicebot_task_failure in lib/Sipfront.pm). The heading is a block so the two bullets sit
   under it rather than running on from it, and the two keys are what the eye lands on. */
.sf-vb-task-head {
  display: block;
  font-weight: 700;
}

.sf-vb-task-parts {
  margin-top: 0.4rem !important;
}

.sf-vb-task-key {
  font-weight: 700;
  /* Not a colour of its own: this sits inside the danger-coloured callout and a second
     accent there reads as a second severity. */
}
/*** negative margins ***/
.mt--1 {
  margin-top: -0.25rem !important;
}

.mr--1 {
  margin-right: -0.25rem !important;
}

.mb--1 {
  margin-bottom: -0.25rem !important;
}

.ml--1 {
  margin-left: -0.25rem !important;
}

.mt--2 {
  margin-top: -0.5rem !important;
}

.mr--2 {
  margin-right: -0.5rem !important;
}

.mb--2 {
  margin-bottom: -0.5rem !important;
}

.ml--2 {
  margin-left: -0.5rem !important;
}

.mt--3 {
  margin-top: -1rem !important;
}

.mr--3 {
  margin-right: -1rem !important;
}

.mb--3 {
  margin-bottom: -1rem !important;
}

.ml--3 {
  margin-left: -1rem !important;
}

.mt--4 {
  margin-top: -1.5rem !important;
}

.mr--4 {
  margin-right: -1.5rem !important;
}

.mb--4 {
  margin-bottom: -1.5rem !important;
}

.ml--4 {
  margin-left: -1.5rem !important;
}

.mt--5 {
  margin-top: -3rem !important;
}

.mr--5 {
  margin-right: -3rem !important;
}

.mb--5 {
  margin-bottom: -3rem !important;
}

.ml--5 {
  margin-left: -3rem !important;
}

.minh-1 {
  min-height: 1.5rem !important;
}

.minh-2 {
  min-height: 3rem !important;
}

.minh-3 {
  min-height: 4.5rem !important;
}

.maxh-1 {
  max-height: 1.5rem !important;
}

.maxh-2 {
  max-height: 3rem !important;
}

.maxh-3 {
  max-height: 4.5rem !important;
}

.width-50pc {
  width: 50%;
}

.auth0::before {
  content: "A";
  font-weight: var(--font-weight-bold);
  color: var(--color-auth0);
}

/* OAuth Login Button Styles */
.oauth-login-btn {
  min-width: 220px;
  font-weight: var(--font-weight-medium);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-333);
  color: var(--color-gray-333);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.oauth-login-btn:hover {
  background-color: var(--color-gray-f8f9fa);
  border-color: var(--color-gray-495057);
  color: var(--color-gray-495057);
  text-decoration: none;
}

.oauth-login-btn .oauth-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 1rem;
  -webkit-user-drag: none;
  user-drag: none;
}

/* OR Divider */
.oauth-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.oauth-divider .divider-line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-gray-dee2e6);
}

.oauth-divider .divider-text {
  padding: 0 1rem;
  color: var(--color-gray-6c757d);
}

/* Wizard Page - Auto-expanding textareas */
.auto-expand-textarea {
  width: 100%;
  min-height: 42px;
  padding: 12px 16px;
  line-height: var(--line-height-base);
  border: 1px solid var(--color-gray-ced4da);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--color-shadow-04);
  resize: none;
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.auto-expand-textarea:focus {
  outline: none;
  border-color: var(--color-blue-80bdff);
  box-shadow: 0 2px 6px var(--color-primary-alpha-08);
}

.auto-expand-textarea:hover {
  border-color: var(--color-gray-adb5bd);
}

/* Wizard Page - Response time slider */
.slider-container {
  padding: 10px 15px;
  position: relative;
}

.response-time-slider {
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.slider-labels {
  display: flex;
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.slider-labels span {
  position: absolute;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-6c757d);
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
  transform: translateX(-50%);
  white-space: nowrap;
  user-select: none;
}

.slider-labels span[data-value="0"] {
  left: 0%;
  transform: none;
  text-align: left;
}

.slider-labels span[data-value="1"] {
  left: 25%;
}

.slider-labels span[data-value="2"] {
  left: 50%;
}

.slider-labels span[data-value="3"] {
  left: 75%;
}

.slider-labels span[data-value="4"] {
  left: auto;
  right: 0%;
  transform: none;
  text-align: right;
}

.slider-labels span.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.slider-labels span small {
  font-size: var(--font-size-2xs);
  color: var(--color-gray-adb5bd);
}

.slider-labels span.active small {
  color: var(--color-primary);
}

/* Wizard Index Page Styles */
.wizard-card-link {
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.wizard-card-link:hover {
  text-decoration: none;
  transform: translateY(-5px);
}

.wizard-card {
  height: 100%;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid var(--color-gray-e0e0e0);
  box-shadow: 0 2px 8px var(--color-shadow-06);
}

.wizard-card-link:hover .wizard-card {
  box-shadow: 0 8px 24px var(--color-primary-alpha-15);
  border-color: var(--color-primary);
}

.wizard-card .card-body {
  padding: 2rem 1.5rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.wizard-icon {
  font-size: 4rem;
  color: var(--color-primary);
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.wizard-card-link:hover .wizard-icon {
  transform: scale(1.1);
  color: var(--color-primary-hover);
}

.wizard-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-3a3541);
  margin-bottom: 1rem;
}

.wizard-description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-6c757d);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
  margin-bottom: 1rem;
}

.wizard-badge {
  margin-top: auto;
}

.wizard-badge .badge {
  font-size: var(--font-size-xs);
  padding: 0.4rem 0.8rem;
  font-weight: var(--font-weight-medium);
}

/* Disabled wizard cards */
.wizard-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.wizard-disabled:hover {
  transform: none;
}

.wizard-disabled .wizard-card {
  background-color: var(--color-gray-f8f9fa);
}

.wizard-disabled:hover .wizard-card {
  box-shadow: 0 2px 8px var(--color-shadow-06);
  border-color: var(--color-gray-e0e0e0);
}

.wizard-disabled .wizard-icon {
  color: var(--color-gray-6c757d);
}

.wizard-disabled:hover .wizard-icon {
  transform: none;
  color: var(--color-gray-6c757d);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wizard-card .card-body {
    padding: 1.5rem 1rem;
    min-height: 280px;
  }

  .wizard-icon {
    font-size: 3rem;
  }

  .wizard-title {
    font-size: var(--font-size-md);
  }

  .wizard-description {
    font-size: var(--font-size-sm);
  }
}

/* Product-grouped wizard sections (Beat / Probe / Lens / Echo) */
.sf-product-section {
  margin-bottom: 2rem;
}

.sf-product-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 1rem;
}

.sf-product-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc, var(--color-primary));
  background: color-mix(
    in srgb,
    var(--uc, var(--color-primary)) 12%,
    transparent
  );
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.sf-product-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--uc, var(--color-primary));
}

.sf-product-desc {
  font-size: 1rem;
  color: var(--color-gray-6c757d);
  line-height: 1.5;
  flex: 1 1 320px;
  margin: 0;
}

/* Project "new / existing" segmented toggle (shared by the test wizard and
   the testbook convert wizard). */
.sf-project-mode-toggle {
  display: inline-flex;
  background: #e9ecef;
  border-radius: 2rem;
  padding: 3px;
}
.sf-project-mode-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sf-project-mode-toggle label {
  padding: 0.3rem 1.25rem;
  margin: 0;
  border-radius: 2rem;
  cursor: pointer;
  font-weight: normal;
  color: #6c757d;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
  line-height: 1.5;
}
.sf-project-mode-toggle input[type="radio"]:checked + label {
  background: #fff;
  color: #007bff;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Compact, modern case cards */
.sf-wiz-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-gray-e0e0e0);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px var(--color-shadow-06);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  text-decoration: none;
}

a.sf-wiz-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--uc, var(--color-primary));
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--uc, var(--color-primary)) 16%, transparent);
}

.sf-wiz-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sf-wiz-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--uc, var(--color-primary));
  background: color-mix(
    in srgb,
    var(--uc, var(--color-primary)) 12%,
    transparent
  );
}

.sf-wiz-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-gray-3a3541);
  margin: 0;
  line-height: 1.3;
}

.sf-wiz-card__desc {
  font-size: 1rem;
  color: var(--color-gray-6c757d);
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto;
}

.sf-wiz-card__cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--uc, var(--color-primary));
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s ease;
}

a.sf-wiz-card:hover .sf-wiz-card__cta {
  gap: 0.55rem;
}

.sf-wiz-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sf-wiz-card--disabled .sf-wiz-card__icon {
  color: var(--color-gray-6c757d);
  background: var(--color-gray-f8f9fa);
}

.sf-wiz-card__soon {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-6c757d);
}

/* Test-case configuration form: clean, evenly spaced sections. */
.sf-wiz-section {
  margin-bottom: 1.5rem;
}
.sf-wiz-section + .sf-wiz-section {
  border-top: 1px solid var(--color-gray-e0e0e0);
  padding-top: 1.5rem;
}
.sf-wiz-section-label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-gray-3a3541);
  margin-bottom: 0.6rem;
}
/* A section whose heading carries a control of its own -- today the scenario search.
   The label keeps the left, the control sits at the right edge on the same line, and
   both wrap onto separate lines when the card gets narrow rather than the control
   squeezing the heading. */
.sf-wiz-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.sf-wiz-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Session Info Overlay */
.sf-session-overlay {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: -2px 0 15px var(--color-shadow-15);
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.4s;
  will-change: transform;
  visibility: hidden;
}

/* Desktop: Slide from Right */
@media (min-width: 768px) {
  .sf-session-overlay {
    top: 0;
    right: 0;
    width: 450px;
    height: 100vh;
    transform: translateX(100%);
    border-left: 1px solid var(--color-gray-dee2e6);
  }
  .sf-session-overlay.is-active {
    transform: translateX(0);
    visibility: visible;
  }
}

/* Mobile: Slide from Top */
@media (max-width: 767px) {
  .sf-session-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    transform: translateY(-100%);
    border-bottom: 1px solid var(--color-gray-dee2e6);
  }
  .sf-session-overlay.is-active {
    transform: translateY(0);
    visibility: visible;
  }
}

.sf-session-overlay .overlay-header {
  background-color: var(--color-gray-f8f9fa);
}

.sf-session-overlay .overlay-body {
  flex: 1;
  overflow-y: auto;
}

.sf-session-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-shadow-30);
  z-index: 1059;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  user-select: none;
}

.sf-session-overlay-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

/* Action context chips (run details page) */
.sf-action-context {
  gap: 0.5rem;
}

.sf-ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--color-gray-dee2e6);
  background: var(--color-gray-f8f9fa);
  color: var(--color-gray-495057);
  white-space: nowrap;
  line-height: var(--line-height-snug);
}

.sf-ctx-chip i {
  color: var(--color-gray-6c757d);
  font-size: 0.9em;
}

.sf-ctx-chip .sf-ctx-label {
  color: var(--color-gray-6c757d);
  margin-right: 0.1rem;
}

.sf-ctx-chip strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-343a40);
}

.sf-ctx-chip-warn {
  border-color: var(--color-warning);
  background: var(--color-warning-bg-light);
  color: var(--color-warning-text);
}

.sf-ctx-chip-warn i,
.sf-ctx-chip-warn .sf-ctx-label {
  color: var(--color-warning-text-light);
}

.sf-ctx-chip-warn strong {
  color: var(--color-warning-text);
}

/* -----------------------------------------------
   Annotation Overlay
   ----------------------------------------------- */
.sf-annotation-overlay {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: -2px 0 15px var(--color-shadow-15);
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.4s;
  will-change: transform;
  visibility: hidden;
}

@media (min-width: 768px) {
  .sf-annotation-overlay {
    top: 0;
    right: 0;
    width: 480px;
    height: 100vh;
    transform: translateX(100%);
    border-left: 1px solid var(--color-gray-dee2e6);
  }
  .sf-annotation-overlay.is-active {
    transform: translateX(0);
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .sf-annotation-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 75vh;
    transform: translateY(-100%);
    border-bottom: 1px solid var(--color-gray-dee2e6);
  }
  .sf-annotation-overlay.is-active {
    transform: translateY(0);
    visibility: visible;
  }
}

.sf-annotation-overlay .overlay-header {
  background-color: var(--color-gray-f8f9fa);
  flex-shrink: 0;
}

.sf-annotation-overlay .overlay-body {
  flex: 1;
  overflow-y: auto;
}

.sf-annotation-overlay .overlay-footer {
  flex-shrink: 0;
  background: var(--color-gray-f8f9fa);
}

.sf-annotation-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-shadow-30);
  z-index: 1059;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  user-select: none;
}

.sf-annotation-overlay-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

/* Filter clear buttons (shared across dashboard, notifications, etc.) */
.summary-scope-clear {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-shadow-15);
  background: var(--color-white);
  color: var(--color-gray-6c757d);
  padding: 0;
  cursor: pointer;
  line-height: var(--line-height-none);
  z-index: 10;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.summary-scope-clear i {
  font-size: var(--font-size-base);
  line-height: var(--line-height-none);
}
.summary-scope-clear:hover {
  background: var(--color-gray-f8f9fa);
  color: var(--color-gray-343a40);
}
.summary-scope-clear:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--color-primary-alpha-25);
}
.summary-scope-select-wrap .select2 {
  width: 100% !important;
}
.summary-scope-select-wrap .select2-selection {
  padding-right: 28px !important;
}
.summary-scope-select-wrap #notif-daterange {
  padding-right: 28px !important;
  width: 100%;
}

/* Annotation cards */
.sf-annotation-card {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-gray-f0f0f0);
}

.sf-annotation-card:last-child {
  border-bottom: none;
}

.sf-annotation-card--unread {
  border-left: 3px solid var(--color-primary);
  padding-left: 0.6rem;
  background: var(--color-primary-bg-light);
  border-radius: 0 4px 4px 0;
}

@keyframes sf-annotation-highlight-fade {
  0% {
    background-color: var(--color-warning-bg);
    box-shadow: 0 0 0 2px var(--color-warning);
  }
  70% {
    background-color: var(--color-warning-bg);
    box-shadow: 0 0 0 2px var(--color-warning);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}
.sf-annotation-card--highlight {
  animation: sf-annotation-highlight-fade 2.5s ease-out forwards;
  border-radius: 4px;
}

.sf-annotation-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sf-annotation-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  -webkit-user-drag: none;
  user-drag: none;
}

.sf-annotation-meta {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-tight);
}

.sf-annotation-author {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-gray-343a40);
}

.sf-annotation-date {
  font-size: var(--font-size-3xs);
}

.sf-annotation-body {
  font-size: var(--font-size-xs);
  color: var(--color-gray-495057);
  white-space: pre-wrap;
  word-break: break-word;
  padding-left: calc(28px + 0.5rem);
}

/* Annotation bubble icon on session rows */
/* Zero-annotation icon: muted, no pill */
.sf-annotation-bubble-icon {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-adb5bd);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 50em;
  transition:
    color 0.15s,
    background 0.15s;
  white-space: nowrap;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sf-annotation-bubble-icon:hover {
  color: var(--color-gray-6c757d);
  background: var(--color-secondary-alpha-12);
}

/* Pill: icon + count fused into one capsule */
.sf-annot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 50em;
  background: var(--color-gray-6c757d);
  color: var(--color-white);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sf-annot-pill:hover {
  opacity: 0.82;
}

.sf-annot-pill--unread {
  background: var(--color-danger);
}

.sf-annotation-cell {
  white-space: nowrap;
  width: 65px;
  min-width: 65px;
  max-width: 65px;
}

/* gap utility for browsers without gap support in flex */
.gap-2 {
  gap: 0.5rem;
}

/* Notification bell pill — same capsule concept as .sf-annot-pill */
.sf-notif-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 50em;
  color: inherit;
  font-size: var(--font-size-2xs);
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sf-notif-pill--unread {
  background: var(--color-danger);
  color: var(--color-white);
}

/* Notification dropdown */
.sf-notif-dropdown {
  min-width: 320px !important;
  max-width: 360px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#sf-notif-items {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sf-notif-item {
  padding: 0.6rem 0.9rem;
  white-space: normal;
}

.sf-notif-item:hover {
  background: var(--color-bg-main);
}

.sf-notif-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.sf-notif-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
  -webkit-user-drag: none;
  user-drag: none;
}

.sf-notif-item-body {
  flex: 1;
  min-width: 0;
}

.sf-notif-item-meta {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
  line-height: var(--line-height-snug);
}

.sf-notif-item-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xs);
  color: var(--color-gray-343a40);
}

.sf-notif-item-test {
  font-size: var(--font-size-2xs);
  color: var(--color-gray-6c757d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.sf-notif-item-test::before {
  content: "on ";
}

.sf-notif-item-time {
  font-size: var(--font-size-3xs);
  color: var(--color-gray-adb5bd);
  margin-left: auto;
  flex-shrink: 0;
}

.sf-notif-item-content {
  font-size: var(--font-size-2xs);
  color: var(--color-gray-495057);
  margin-top: 2px;
  word-break: break-word;
}

.sf-notif-read-all {
  font-size: var(--font-size-2xs);
}

/* Annotation overlay send button */
.sf-annotation-send-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Annotation pill in session details header — matches btn-sm height, fills column width */
.sf-head-annot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  border-radius: 50em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-gray-6c757d);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.sf-head-annot-btn:hover {
  color: var(--color-gray-495057);
  background: var(--color-secondary-alpha-12);
  text-decoration: none;
}
.sf-head-annot-btn--read {
  background: var(--color-gray-6c757d);
  color: var(--color-white);
  border-color: var(--color-gray-6c757d);
}
.sf-head-annot-btn--read:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover-border);
  color: var(--color-white);
}
.sf-head-annot-btn--unread {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}
.sf-head-annot-btn--unread:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover-border);
  color: var(--color-white);
}

/* ── Mobile timeline: tighter left indent ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Shift the vertical guide-line to match the new circle position */
  .timeline::before {
    left: 13px;
  }
  /* Move circles from left:18px to left:0; circle centre is now at 15px,
     which aligns with the guide-line centre (13px + 2px half-width = 15px). */
  .timeline > div > .fa,
  .timeline > div > .fas,
  .timeline > div > .far,
  .timeline > div > .fab,
  .timeline > div > .glyphicon,
  .timeline > div > .ion {
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
  }
  /* Reduce timeline-item left margin: was 60px (18px circle left + 30px width + 12px gap).
     New: 0px + 30px + 12px = 42px.  Right margin trimmed from 15px to 5px. */
  .timeline > div > .timeline-item {
    margin-left: 42px;
    margin-right: 5px;
  }
  /* Outer row right margin: 10px → 5px */
  .timeline > div {
    margin-right: 5px;
  }
}

/* ── Mobile jQuery-UI tabs: single nowrap row, horizontally scrollable ─────── */
@media (max-width: 767px) {
  /* Switch the nav from float-based to flex so wrapping is fully controlled */
  .ui-tabs .ui-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* hide the scrollbar track on small screens — still scrollable */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .ui-tabs .ui-tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  /* float:none so items respect the flex context; flex-shrink:0 keeps labels intact */
  .ui-tabs .ui-tabs-nav li {
    float: none;
    flex-shrink: 0;
  }
  /* tighter horizontal padding on mobile so all three tabs fit without scrolling */
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.5em 0.65em;
    font-size: var(--font-size-xs);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
  }
}

/* Window-level Chart.js tooltip — appended to body so it's never clipped */
#sf-chart-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--color-shadow-75);
  color: var(--color-white);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--font-size-2xs);
  max-width: 320px;
  word-break: break-word;
  opacity: 0;
  transition: opacity 0.1s;
  transform: translate(-50%, calc(-100% - 10px));
  line-height: var(--line-height-base);
  user-select: none;
}
#sf-chart-tooltip .sf-ct-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 3px;
}
#sf-chart-tooltip .sf-ct-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Date range picker input — truncate long date strings with ellipsis instead
   of wrapping or bleeding out of the container */
#daterange,
#notif-daterange {
  display: flex !important;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
#daterange i,
#daterange b,
#notif-daterange i,
#notif-daterange b {
  flex-shrink: 0;
}
#daterange span,
#notif-daterange span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

wave canvas {
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}