:root {
  --ops-bg: #f5f7fb;
  --ops-surface: #ffffff;
  --ops-surface-muted: #f8fafc;
  --ops-surface-subtle: #f1f5f9;
  --ops-border: #d8e0ea;
  --ops-border-strong: #c3cedb;
  --ops-text: #111827;
  --ops-text-muted: #64748b;
  --ops-text-soft: #94a3b8;
  --ops-primary: #1d4ed8;
  --ops-primary-strong: #1e40af;
  --ops-primary-soft: #eff6ff;
  --ops-aws: #ec7211;
  --ops-aws-soft: #fff7ed;
  --ops-azure: #0a7bd4;
  --ops-azure-soft: #eff6ff;
  --ops-success: #15803d;
  --ops-success-soft: #f0fdf4;
  --ops-warning: #b45309;
  --ops-warning-soft: #fffbeb;
  --ops-danger: #b91c1c;
  --ops-danger-soft: #fef2f2;
  --ops-info: #0369a1;
  --ops-info-soft: #f0f9ff;
  --ops-neutral: #475569;
  --ops-neutral-soft: #f1f5f9;
  --ops-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  --ops-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ops-radius: 8px;
  --ops-radius-sm: 6px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ops-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: var(--ops-bg);
}

/* Menu navigation is a full page load. A cross-document view transition keeps
   the old page painted until the new one is ready and fades between them, so
   switching pages no longer flashes. The sidebar and topbar are named so they
   stay put instead of fading. Browsers without support simply navigate. */
@view-transition {
  navigation: auto;
}

html {
  background: var(--ops-bg);
}

.app-sidebar {
  view-transition-name: mf-sidebar;
}

.app-topbar {
  view-transition-name: mf-topbar;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}

::view-transition-group(mf-sidebar),
::view-transition-group(mf-topbar),
::view-transition-old(mf-sidebar),
::view-transition-new(mf-sidebar),
::view-transition-old(mf-topbar),
::view-transition-new(mf-topbar) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand span,
.app-heading {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

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

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

code {
  color: #334155;
  background: var(--ops-surface-subtle);
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius-sm);
  padding: 0.08rem 0.28rem;
}

.app-content > .container,
.container {
  max-width: 1320px;
}

.app-navbar {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--ops-shadow-soft);
}

.app-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--ops-radius);
}

.app-navbar .navbar-brand img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 34px;
}

.app-navbar .navbar-brand span {
  color: #f8fafc;
  font-size: 1.08rem;
  font-weight: 700;
}

.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.app-navbar .nav-link {
  color: rgba(248, 250, 252, 0.86) !important;
  border-radius: var(--ops-radius-sm);
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.app-navbar .dropdown-menu {
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow);
  padding: 0.35rem;
}

.app-navbar .dropdown-item {
  border-radius: var(--ops-radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--ops-text);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
  background: var(--ops-surface-muted);
}

.app-navbar .dropdown-item i {
  width: 1.1rem;
  margin-right: 0.45rem;
}

.app-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 0.88rem;
}

.app-user-chip .username-hint {
  color: rgba(248, 250, 252, 0.7);
  font-size: 0.78rem;
}

.alert {
  border-radius: var(--ops-radius);
  border-width: 1px;
  box-shadow: none;
}

.card {
  background: var(--ops-surface);
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow-soft);
}

.card-header {
  border-bottom: 1px solid var(--ops-border);
  background: var(--ops-surface-muted);
}

.card-body {
  color: var(--ops-text);
}

.table {
  color: var(--ops-text);
  margin-bottom: 0;
}

.table thead th {
  border-bottom: 1px solid var(--ops-border-strong);
  background: var(--ops-surface-subtle);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody td {
  border-color: #e5ebf2;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #fbfdff;
}

.table-hover tbody tr:hover {
  background: #f8fafc;
}

/* A dense list table (Jira automation, JSM request ops). Header cells keep
   the global 0.78rem rule above: rem does not inherit the smaller body size. */
.ops-table-compact {
  font-size: 0.82rem;
}

.ops-table-compact .btn-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
}

.ops-table-compact .small,
.ops-table-compact small {
  font-size: 0.9em;
}

.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* The bundled Bootstrap is 5.1.3, which has no `text-bg-*` utilities. Without
   these rules such badges render as white text on a transparent background and
   become unreadable. Keep the console's light-surface/dark-text palette. */
.badge.text-bg-primary {
  border: 1px solid #bfdbfe;
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
}

.badge.text-bg-secondary {
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

.badge.text-bg-success {
  border: 1px solid #86efac;
  background-color: #dcfce7 !important;
  color: #166534 !important;
}

.badge.text-bg-danger {
  border: 1px solid #fca5a5;
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge.text-bg-warning {
  border: 1px solid #fcd34d;
  background-color: #fef3c7 !important;
  color: #78350f !important;
}

.badge.text-bg-info {
  border: 1px solid #a5d8f3;
  background-color: #e0f2fe !important;
  color: #075985 !important;
}

.badge.text-bg-light {
  border: 1px solid #e2e8f0;
  background-color: #f8fafc !important;
  color: #334155 !important;
}

.badge.text-bg-dark {
  border: 1px solid #334155;
  background-color: #1f2937 !important;
  color: #f8fafc !important;
}

.btn {
  border-radius: var(--ops-radius-sm);
  font-weight: 700;
  letter-spacing: 0;
}

.btn-sm {
  border-radius: var(--ops-radius-sm);
}

.btn-primary {
  border-color: var(--ops-primary);
  background-color: var(--ops-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--ops-primary-strong);
  background-color: var(--ops-primary-strong);
}

.btn-outline-secondary {
  border-color: var(--ops-border-strong);
  color: #475569;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  border-color: #94a3b8;
  background: var(--ops-surface-subtle);
  color: var(--ops-text);
}

.form-control,
.form-select {
  border-radius: var(--ops-radius-sm);
  border-color: var(--ops-border-strong);
  color: var(--ops-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ops-primary);
  box-shadow: 0 0 0 0.18rem rgba(29, 78, 216, 0.14);
}

/* Page foundation */
.ops-hero,
.ops-page-header {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  background: var(--ops-surface);
  color: var(--ops-text);
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow-soft);
}

.ops-hero::after {
  content: none;
}

.ops-hero > *,
.ops-page-header > * {
  position: relative;
  z-index: 1;
}

.ops-hero .ops-hero-title,
.ops-page-title {
  margin: 0;
  color: var(--ops-text);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 1;
  transform: none;
  animation: none;
}

.ops-hero .ops-hero-subtitle,
.ops-page-subtitle {
  max-width: 960px;
  margin: 0.35rem 0 0;
  color: var(--ops-text-muted);
  opacity: 1;
  transform: none;
  animation: none;
}

.ops-header-actions,
.ops-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ops-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.ops-metric,
.ops-stat-card {
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  padding: 0.7rem 0.8rem;
  background: var(--ops-surface-muted);
}

.ops-metric-label,
.ops-stat-label {
  display: block;
  color: var(--ops-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ops-metric-value,
.ops-stat-value {
  display: block;
  margin-top: 0.15rem;
  color: var(--ops-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

/* A metric that needs its denominator stated beside it. A rate shown without
   what it was measured over is a number nobody can check. */
.ops-metric-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--ops-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}

.ops-page-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
}

.ops-toolbar-label {
  color: var(--ops-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface-muted);
}

.ops-segmented .btn {
  border-radius: var(--ops-radius-sm);
}

.ops-data-panel,
.ops-group-panel,
.ops-subpanel {
  overflow: hidden;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
  box-shadow: var(--ops-shadow-soft);
}

.ops-group-panel {
  border-left: 4px solid var(--group-color, var(--ops-border-strong));
}

.ops-panel-header,
.ops-group-header,
.ops-subpanel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--ops-border);
  background: var(--ops-surface-muted);
}

.ops-panel-title,
.ops-group-title {
  margin: 0;
  color: var(--ops-text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.ops-panel-desc,
.ops-group-desc,
.ops-section-note {
  margin: 0.15rem 0 0;
  color: var(--ops-text-muted);
  font-size: 0.88rem;
}

.ops-panel-body {
  padding: 0.9rem;
}

/* A form that would stretch unreadably across a wide screen. */
.ops-form-body {
  max-width: 960px;
}

.ops-table-wrap {
  overflow: hidden;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
}

/* overflow: hidden above keeps the rounded corners, but it also cancelled
   Bootstrap's sideways scroll, so a wide table was silently cut off (the
   user list's row actions, the audit log's Source column). Scrolling clips
   to the corners just the same. */
.table-responsive.ops-table-wrap {
  overflow-x: auto;
}

.ops-table-wrap .table {
  margin-bottom: 0;
}

.ops-empty {
  padding: 1.5rem;
  color: var(--ops-text-muted);
  text-align: center;
}

.ops-muted {
  color: var(--ops-text-muted);
}

/* Badges and status language */
.ops-badge,
.ops-provider-badge,
.ops-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.22rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.ops-provider-badge.aws {
  border-color: #fed7aa;
  background: var(--ops-aws-soft);
  color: #9a3412;
}

.ops-provider-badge.azure {
  border-color: #bfdbfe;
  background: var(--ops-azure-soft);
  color: #075985;
}

.ops-status-success {
  border-color: #bbf7d0;
  background: var(--ops-success-soft);
  color: var(--ops-success);
}

.ops-status-warning {
  border-color: #fde68a;
  background: var(--ops-warning-soft);
  color: var(--ops-warning);
}

.ops-status-danger {
  border-color: #fecaca;
  background: var(--ops-danger-soft);
  color: var(--ops-danger);
}

.ops-status-info {
  border-color: #bae6fd;
  background: var(--ops-info-soft);
  color: var(--ops-info);
}

.ops-status-neutral,
.ops-status-disabled {
  border-color: var(--ops-border);
  background: var(--ops-neutral-soft);
  color: var(--ops-neutral);
}

.ops-row-actions,
.btn-group.ops-row-actions {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.ops-row-actions .btn,
.btn-group.ops-row-actions .btn {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--ops-radius-sm) !important;
}

.ops-row-actions form {
  display: inline-flex;
}

.btn-xs,
.btn-compact {
  padding: 0.22rem 0.48rem;
  font-size: 0.75rem;
  border-radius: var(--ops-radius-sm);
}

.ops-inline-form {
  display: inline;
  margin: 0;
}

.ops-hero-search {
  display: flex;
  gap: 0.6rem;
  max-width: 680px;
  margin-top: 0.9rem;
}

.ops-hero-search .btn {
  white-space: nowrap;
}

.ops-hero-search-hint,
.ops-hero-search-empty {
  margin: 0.5rem 0 0;
  color: var(--ops-text-muted);
  font-size: 0.85rem;
}

.ops-hero-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ops-hero-search-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface-muted);
  color: var(--ops-text);
  text-decoration: none;
}

.ops-hero-search-item:hover {
  border-color: var(--ops-border-strong);
  background: var(--ops-surface-subtle);
}

.ops-hero-search-title {
  font-size: 0.86rem;
  font-weight: 700;
}

.ops-hero-search-desc {
  color: var(--ops-text-muted);
  font-size: 0.75rem;
}

.ops-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.ops-action-card {
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
  box-shadow: var(--ops-shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ops-action-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.ops-action-card p {
  margin-bottom: 0.65rem;
  color: var(--ops-text-muted);
}

.ops-action-card:hover {
  border-color: var(--ops-border-strong);
  box-shadow: var(--ops-shadow);
}

.ops-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ops-radius-sm);
  background: var(--ops-surface-subtle);
  color: var(--ops-neutral);
}

.ops-icon-blue { color: #2563eb; }
.ops-icon-teal { color: #0d9488; }
.ops-icon-purple { color: #7c3aed; }
.ops-icon-indigo { color: #4f46e5; }
.ops-icon-amber { color: #d97706; }
.ops-icon-emerald { color: #059669; }
.ops-icon-sky { color: #0284c7; }
.ops-icon-slate { color: #475569; }
.ops-icon-rose { color: #e11d48; }
.ops-icon-cyan { color: #0891b2; }
.ops-icon-violet { color: #6d28d9; }
.ops-icon-orange { color: #ea580c; }
.ops-icon-pink { color: #db2777; }
.ops-icon-lime { color: #65a30d; }
.ops-icon-gray { color: #4b5563; }

.ops-kv {
  margin: 0;
}

.ops-kv dt {
  color: var(--ops-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.ops-kv dd {
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.ops-page-section {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
  box-shadow: var(--ops-shadow-soft);
}

.ops-page-section .ops-group-title {
  margin-bottom: 0.75rem;
}

.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-subtle);
  color: var(--ops-neutral);
  font-size: 0.78rem;
  font-weight: 700;
}

.form-help {
  color: var(--ops-text-muted);
  font-size: 0.85rem;
}

.quick-list .list-group-item {
  margin-bottom: 0.48rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: var(--ops-surface);
}

.quick-list .list-group-item:last-child {
  margin-bottom: 0;
}

.quick-list a {
  font-weight: 700;
  text-decoration: none;
}

.customer-item {
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.customer-item.dragging {
  opacity: 0.55;
}

.customer-drop-zone.drag-over {
  background-color: var(--ops-primary-soft);
  outline: 2px dashed #93c5fd;
  outline-offset: -2px;
}

.customer-item:hover {
  background-color: var(--ops-surface-muted);
}

@media (max-width: 1199px) {
  .app-navbar .navbar-brand span {
    font-size: 1.05rem;
  }

  .ops-hero,
  .ops-page-header {
    padding: 0.9rem;
  }

  .ops-hero .ops-hero-title,
  .ops-page-title {
    font-size: 1.22rem;
  }

  .ops-grid-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .app-navbar .navbar-brand img {
    height: 32px;
  }

  .app-navbar .navbar-brand {
    gap: 0.7rem;
    padding: 0.32rem 0.45rem;
  }

  .ops-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ops-grid-cards {
    grid-template-columns: 1fr;
  }

  .ops-toolbar {
    align-items: stretch;
  }

  .ops-row-actions .btn,
  .btn-group.ops-row-actions .btn {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
  }
}

/* Audit log timestamps: read down the column, not across the row. */
.ops-audit-when {
  font-size: 0.78rem;
  color: var(--ops-text-muted);
  font-variant-numeric: tabular-nums;
}

/* JSM request detail (#711). Everything is scoped to `.jsm-detail` so the
   smaller type and the description layout stay on this one page. Sizes are
   rem, not em, so nested `.small` text does not shrink twice. */
.jsm-detail {
  font-size: 0.85rem;
  line-height: 1.45;
}

.jsm-detail .ops-hero .ops-hero-title {
  font-size: 1.15rem;
}

.jsm-detail .ops-hero .ops-hero-subtitle {
  font-size: 0.9rem;
}

.jsm-detail .card-header {
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
}

.jsm-detail .card-body {
  padding: 0.85rem;
}

.jsm-detail p {
  margin-bottom: 0.4rem;
}

.jsm-detail .small,
.jsm-detail small,
.jsm-detail pre {
  font-size: 0.78rem;
}

.jsm-detail .form-control:not(.small),
.jsm-detail .btn:not(.btn-sm) {
  font-size: 0.85rem;
}

/* Label / value pairs. */
.jsm-detail-fields {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.3rem;
  margin: 0;
}

.jsm-detail-fields dt {
  color: var(--ops-text-muted);
  font-weight: 600;
}

.jsm-detail-fields dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.jsm-detail-note {
  margin: 0.15rem 0 0.4rem;
  color: var(--ops-text-muted);
  font-size: 0.78rem;
}

.jsm-detail-section-title {
  margin: 0.9rem 0 0.35rem;
  color: var(--ops-text);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Description text: body font, wraps, keeps the ticket's own line breaks. */
.jsm-detail-text {
  padding: 0.6rem 0.75rem;
  background: var(--ops-surface-muted);
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius-sm);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jsm-detail-comments {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jsm-detail-comments > li + li {
  margin-top: 0.6rem;
}

.jsm-detail-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
}

.jsm-detail-comment-time {
  color: var(--ops-text-muted);
  font-variant-numeric: tabular-nums;
}

.jsm-detail-comment-meta .badge {
  font-size: 0.7rem;
  font-weight: 500;
}

/* Requester candidates and Jira comment recipients (#712). */
.jsm-detail-candidates {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jsm-detail-candidates > li {
  padding: 0.45rem 0;
  border-top: 1px solid var(--ops-border);
}

.jsm-detail-candidates > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.jsm-detail-candidate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.jsm-detail-candidate-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jsm-detail-evidence {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ops-text-muted);
  font-size: 0.75rem;
}

.jsm-detail-recipients {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.jsm-detail-original {
  margin-top: 0.75rem;
  font-size: 0.78rem;
}

.jsm-detail-raw {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.75rem;
  max-height: 24rem;
  overflow: auto;
  background: var(--ops-surface-muted);
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Request Brief lists (#713): asks and missing items read as content, not
   as the muted evidence lines they share the indentation with. */
.jsm-detail-brief-list {
  color: var(--ops-text);
  font-size: 0.82rem;
}

.jsm-detail-brief-list > li + li {
  margin-top: 0.15rem;
}

/* Jira Service Requests index (#735): a denser page than the console
   default, scoped to `.jsm-index` like `.jsm-detail` above. */
.jsm-index {
  font-size: 0.85rem;
}

.jsm-index .ops-hero-title {
  font-size: 1.35rem;
}

.jsm-index .ops-hero-subtitle {
  font-size: 0.82rem;
}

.jsm-index .card-header {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

.jsm-index .card-body {
  padding: 0.7rem 0.85rem;
}

.jsm-index .card.mb-4 {
  margin-bottom: 0.9rem !important;
}

.jsm-index .form-label {
  margin-bottom: 0.15rem;
  color: var(--ops-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.jsm-index .form-control,
.jsm-index .form-select {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8rem;
}

.jsm-index .form-control {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.jsm-index .form-select {
  padding-left: 0.5rem;
  padding-right: 1.75rem;
  background-position: right 0.5rem center;
}

.jsm-index .form-check-label {
  font-size: 0.8rem;
}

.jsm-index .form-text {
  margin-top: 0.15rem;
  font-size: 0.72rem;
}

.jsm-index .btn:not(.btn-sm) {
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
}

.jsm-index .ops-table-compact {
  font-size: 0.8rem;
}

.jsm-index .ops-table-compact > :not(caption) > * > * {
  padding: 0.3rem 0.4rem;
}

.jsm-index .table thead th {
  font-size: 0.68rem;
}

.jsm-index .ops-metric {
  padding: 0.4rem 0.55rem;
}

.jsm-index .ops-metric-label {
  font-size: 0.64rem;
}

.jsm-index .ops-metric-value {
  font-size: 1rem;
}

.jsm-index .ops-metric-note {
  font-size: 0.66rem;
}

/* Provider checkboxes of the queue, boxed like the selects beside them. */
.jsm-provider-checks {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.9rem;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--ops-border);
  border-radius: var(--bs-border-radius, 0.25rem);
  background: var(--ops-surface);
}

.jsm-provider-checks .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding-left: 0;
}

.jsm-provider-checks .form-check-input {
  float: none;
  margin: 0;
}

.jsm-provider-checks .form-check-label {
  cursor: pointer;
}

/* Request Queue table: fixed layout so the SLA columns keep their width and
   long summaries, labels and names are clamped (full text in `title`).
   Below the min width the table scrolls inside its own container. */
.jsm-queue-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1000px;
}

.jsm-queue-table thead th {
  white-space: normal;
  font-size: 0.64rem;
  letter-spacing: 0;
  line-height: 1.2;
  vertical-align: bottom;
}

.jsm-index .jsm-queue-table > :not(caption) > * > * {
  padding: 0.3rem 0.35rem;
}

.jsm-queue-table td {
  overflow: hidden;
}

.jsm-queue-table .jsm-col-status { width: 84px; }
.jsm-queue-table .jsm-col-assignee { width: 88px; }
.jsm-queue-table .jsm-col-time { width: 86px; }
.jsm-queue-table .jsm-col-sla { width: 96px; }
.jsm-queue-table .jsm-col-workspace { width: 92px; }
.jsm-queue-table .jsm-col-labels { width: 92px; }
.jsm-queue-table .jsm-col-account { width: 92px; }
.jsm-queue-table .jsm-col-info { width: 80px; }

.jsm-queue-table .jsm-sla-time {
  font-size: 0.75rem;
  white-space: nowrap;
}

.jsm-queue-table .jsm-account {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jsm-queue-table .jsm-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jsm-queue-table .ops-status-badge,
.jsm-queue-table .ops-provider-badge {
  padding: 0.08rem 0.35rem;
  font-size: 0.64rem;
}

.jsm-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.jsm-queue-table td > .jsm-clamp + .small {
  margin-top: 0.05rem;
}

/* Delay highlight, through Bootstrap's cell accent. Not table-danger on a
   striped table: the striped-row accent above is opaque and hid it on odd
   rows. */
.jsm-queue-table > tbody > tr.jsm-row-breached > * {
  --bs-table-accent-bg: #fdecec;
}

.jsm-queue-table > tbody > tr.jsm-row-at-risk > * {
  --bs-table-accent-bg: #fff4d6;
}

.jsm-queue-table > tbody > tr.jsm-row-paused > * {
  --bs-table-accent-bg: var(--ops-neutral-soft);
}

.jsm-queue-table > tbody > tr.jsm-row-breached > td:first-child {
  box-shadow: inset 3px 0 0 var(--ops-danger), inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.jsm-queue-table > tbody > tr.jsm-row-at-risk > td:first-child {
  box-shadow: inset 3px 0 0 var(--ops-warning), inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.jsm-queue-table > tbody > tr.jsm-row-paused > td:first-child {
  box-shadow: inset 3px 0 0 var(--ops-text-soft), inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/* Jira Service Requests weekly dashboard (#735). Every number is a button
   that filters the Request Queue below. */
.jsm-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.45rem;
}

button.jsm-dash-metric {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.jsm-dash-metric:hover,
button.jsm-dash-metric:focus-visible,
.jsm-dash-chip:hover,
.jsm-dash-chip:focus-visible {
  border-color: var(--ops-primary);
  background: var(--ops-primary-soft);
}

button.jsm-dash-metric.is-active,
.jsm-dash-chip.is-active {
  border-color: var(--ops-primary);
  box-shadow: inset 0 0 0 1px var(--ops-primary);
}

.jsm-dash-metric.is-danger .ops-metric-value {
  color: var(--ops-danger);
}

.jsm-dash-metric.is-warning .ops-metric-value {
  color: var(--ops-warning);
}

.jsm-dash-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.jsm-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--ops-border);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  background: var(--ops-surface);
  color: var(--ops-text);
  font-size: 0.74rem;
  cursor: pointer;
}

.jsm-dash-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jsm-sla-cell {
  white-space: nowrap;
}

.jsm-sla-time {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .jsm-detail-fields {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .jsm-detail-fields dd {
    margin-bottom: 0.4rem;
  }
}