/*
 * Portal theme — Operations-style design system.
 *
 * Matches the look of the Operations app (/user-corrected, /quarantine-addresses,
 * /geocoding-preview-beta, /cognex-data): slate sidebar with coral accents, white
 * header, Open Sans, compact controls, hairline cards and dense tables.
 *
 * Loaded last in <head> (after the per-user primary colour style) so it overrides the
 * Materio theme on every page without rebuilding the Vite assets. Brand variables use
 * !important because the theme customizer re-applies a saved colour from script.
 *
 * See docs/operations_design_system_plan.md for the token table.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme=light] {
  --op-accent: #404e67;
  --op-accent-hover: #2f3a4e;
  --op-accent-soft: #e9ecf2;
  --op-coral: #fe8a7d;
  --op-ink: #212529;
  --op-ink-2: #495057;
  --op-muted: #6c757d;
  --op-faint: #adb5bd;
  --op-hairline: #e9ecef;
  --op-row-line: #f1f3f5;
  --op-head-bg: #f8f9fa;
  --op-row-hover: #f4f6f9;
  --op-input-border: #dee2e6;
  --op-field-border: #c3cad5;      /* inputs, selects, checkboxes: a step darker so fields stand out */
  --op-field-border-hover: #a9b2c0;
  --op-good: #1e8a3c;
  --op-good-bg: #e3f4e6;
  --op-warn: #8a5a00;
  --op-warn-bg: #fff4d6;
  --op-bad: #b3261e;
  --op-bad-bg: #fbeaea;
  --op-info: #2a78d6;
  --op-info-bg: #e7f0fb;
  --op-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --op-card-shadow: 0 1px 2px rgba(16, 24, 40, .04);

  /* Compact: every rem-based size in the theme scales from this */
  --bs-root-font-size: 14px;
  --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.45;

  --bs-primary: #404e67 !important;
  --bs-primary-rgb: 64, 78, 103 !important;
  --bs-primary-contrast: #fff !important;
  --bs-primary-bg-subtle: #e9ecf2 !important;
  --bs-primary-border-subtle: #c5ccd9 !important;
  --bs-primary-text-emphasis: #2f3a4e !important;
  --bs-link-color: #404e67;
  --bs-link-color-rgb: 64, 78, 103;
  --bs-link-hover-color: #2f3a4e;

  --bs-success: #1e8a3c;
  --bs-success-rgb: 30, 138, 60;
  --bs-warning: #e8a317;
  --bs-warning-rgb: 232, 163, 23;
  --bs-danger: #d03b3b;
  --bs-danger-rgb: 208, 59, 59;
  --bs-info: #2a78d6;
  --bs-info-rgb: 42, 120, 214;

  --bs-body-color: #495057;
  --bs-body-color-rgb: 73, 80, 87;
  --bs-heading-color: #212529;
  --bs-secondary-color: #6c757d;
  --bs-secondary-color-rgb: 108, 117, 125;
  --bs-body-bg: #f6f7fb;
  --bs-body-bg-rgb: 246, 247, 251;
  --bs-paper-bg: #fff;
  --bs-border-color: #e9ecef;
  --bs-border-radius: .4286rem;     /* 6px */
  --bs-border-radius-lg: .5714rem;  /* 8px */
  --bs-border-radius-xl: .7143rem;  /* 10px */
  --bs-box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
  --bs-box-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --bs-box-shadow-lg: 0 10px 30px rgba(16, 24, 40, .14);

  --bs-navbar-bg: #fff;
  --bs-navbar-box-shadow: 0 1px 0 #e9ecef;
}

[data-bs-theme=dark] {
  /* Mid slate: readable as text on dark cards and as a fill behind white text */
  --op-accent: #6f81a5;
  --op-accent-hover: #7e90b4;
  --op-accent-soft: rgba(143, 160, 196, .16);
  --op-ink: #e7e9ee;
  --op-ink-2: #c3c8d2;
  --op-muted: #949bab;
  --op-hairline: #353d4f;
  --op-row-line: #2f3646;
  --op-head-bg: #262d3b;
  --op-row-hover: #2a3242;
  --op-input-border: #3f4759;
  --op-field-border: #535d73;
  --op-field-border-hover: #6a7590;
  --op-good-bg: rgba(30, 138, 60, .18);
  --op-warn-bg: rgba(232, 163, 23, .16);
  --op-bad-bg: rgba(208, 59, 59, .18);
  --op-info-bg: rgba(42, 120, 214, .18);
  --op-good: #6fcf8b;
  --op-warn: #f0c060;
  --op-bad: #f08a8a;

  --bs-primary: #6f81a5 !important;
  --bs-primary-rgb: 111, 129, 165 !important;
  --bs-primary-contrast: #fff !important;
  --bs-primary-bg-subtle: rgba(143, 160, 196, .16) !important;
  --bs-link-color: #a9b7d4;
  --bs-body-bg: #1b202b;
  --bs-body-bg-rgb: 27, 32, 43;
  --bs-paper-bg: #232a38;
  --bs-body-color: #c3c8d2;
  --bs-heading-color: #e7e9ee;
  --bs-border-color: #353d4f;
  --bs-navbar-bg: #232a38;
  --bs-navbar-box-shadow: 0 1px 0 #353d4f;
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif);
  color: var(--bs-heading-color);
}

/* ── Sidebar (slate, coral accents) ─────────────────────────────────────── */
.layout-menu.menu {
  --bs-menu-bg: #404e67;
  --bs-menu-bg-rgb: 64, 78, 103;
  --bs-menu-color: #dcdcdc;
  --bs-menu-color-rgb: 220, 220, 220;
  --bs-menu-hover-bg: rgba(255, 255, 255, .07);
  --bs-menu-hover-color: #fff;
  --bs-menu-active-bg: rgba(254, 138, 125, .14);
  --bs-menu-active-color: #fe8a7d;
  --bs-menu-active-toggle-bg: rgba(255, 255, 255, .06);
  --bs-menu-sub-active-bg: rgba(255, 255, 255, .06);
  --bs-menu-sub-active-color: #fe8a7d;
  --bs-menu-item-icon-color: #c9ced8;
  --bs-menu-box-shadow: none;
  --bs-menu-divider-color: rgba(255, 255, 255, .08);
  background-color: #404e67 !important;
  color: #dcdcdc;
}

[data-bs-theme=dark] .layout-menu.menu {
  --bs-menu-bg: #2b3446;
  --bs-menu-bg-rgb: 43, 52, 70;
  background-color: #2b3446 !important;
}

.layout-menu .menu-inner > .menu-item > .menu-link {
  font-size: 14px;
  font-weight: 400;
  border-radius: 0 !important;
  margin-inline: 0 !important;
  padding-inline: 1.5rem 1rem;
  inline-size: 100% !important;
}

.layout-menu .menu-inner > .menu-item {
  margin-block: 1px;
}

.layout-menu .menu-item .menu-link:hover {
  background-color: var(--bs-menu-hover-bg) !important;
  color: #fff !important;
}

.layout-menu .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--bs-menu-active-bg) !important;
  color: var(--bs-menu-active-color) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--op-coral) !important;
}

.layout-menu .menu-item.active > .menu-link .menu-icon,
.layout-menu .menu-item.active > .menu-link i {
  color: var(--op-coral) !important;
}

.layout-menu .menu-header {
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
  letter-spacing: .04em;
}

.layout-menu .menu-inner-shadow {
  display: none !important;
}

.layout-menu .app-brand {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.layout-menu .layout-menu-toggle,
.layout-menu .layout-menu-toggle i {
  color: #dcdcdc !important;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.layout-navbar.navbar-detached,
.layout-navbar {
  background-color: var(--bs-navbar-bg) !important;
  box-shadow: var(--bs-navbar-box-shadow) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.layout-navbar.navbar-detached {
  inline-size: 100% !important;
  margin: 0 0 1.25rem !important;
  max-inline-size: 100% !important;
  padding-inline: 1.5rem !important;
}

/* The theme insets the fixed header by 3rem; the Operations header runs edge to edge */
@media (min-width: 1200px) {
  html.layout-navbar-fixed .layout-navbar.navbar-detached {
    inline-size: calc(100% - var(--bs-menu-width)) !important;
  }

  html.layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-hover) .layout-navbar.navbar-detached {
    inline-size: calc(100% - var(--bs-menu-collapsed-width)) !important;
  }
}

@media (max-width: 1199.98px) {
  html.layout-navbar-fixed .layout-navbar.navbar-detached {
    inline-size: 100% !important;
  }
}

/* ── Page heading: ⌂ Parent › Current page ───────────────────────────── */
.page-heading {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.page-heading__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--op-accent);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[data-bs-theme=dark] .page-heading__title {
  color: var(--op-ink);
}

.page-heading__trail {
  flex-shrink: 0;
}

.page-heading__trail .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  background: none !important;
}

.page-heading__trail .breadcrumb-item {
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.page-heading__trail .breadcrumb-item + .breadcrumb-item::before {
  display: none;
}

/* The current page is already the title */
.page-heading__trail .breadcrumb-item.active {
  display: none;
}

/* Parent pages: quiet chips that light up on hover / keyboard focus */
.page-heading__trail .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--op-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}

.page-heading__trail .breadcrumb-item:first-child a::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .39-.79l8-6.22a1 1 0 0 1 1.23 0l8 6.22a1 1 0 0 1 .38.79V20Zm-2-1V9.98l-7-5.45-7 5.45V19h14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .39-.79l8-6.22a1 1 0 0 1 1.23 0l8 6.22a1 1 0 0 1 .38.79V20Zm-2-1V9.98l-7-5.45-7 5.45V19h14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-heading__trail .breadcrumb-item a:hover {
  background-color: var(--op-accent-soft);
  color: var(--op-accent);
}

.page-heading__trail .breadcrumb-item a:focus-visible {
  outline: none;
  background-color: var(--op-accent-soft);
  color: var(--op-accent);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .2);
}

.page-heading__trail .breadcrumb-item a:active {
  background-color: #dce1ea;
}

.page-heading__trail .breadcrumb-icon {
  color: var(--op-faint) !important;
  font-size: 18px !important;
  margin: 0 2px;
}

/* Small screens: the trail becomes a single "back" button to the parent page */
@media (max-width: 767.98px) {
  .page-heading {
    gap: 8px;
  }

  .page-heading__title {
    font-size: 16px;
  }

  .page-heading__trail .breadcrumb-item:not(:nth-last-child(2)),
  .page-heading__trail .breadcrumb-icon {
    display: none !important;
  }

  .page-heading__trail .breadcrumb-item a {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    border: 1px solid var(--op-input-border);
  }

  .page-heading__trail .breadcrumb-item a::before,
  .page-heading__trail .breadcrumb-item:first-child a::before {
    width: 18px;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.83 12 4.95 4.95-1.41 1.41L8 12l6.37-6.36 1.41 1.41L10.83 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.83 12 4.95 4.95-1.41 1.41L8 12l6.37-6.36 1.41 1.41L10.83 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .page-heading__trail .breadcrumb-item a::before {
    content: '';
    flex-shrink: 0;
    background-color: currentColor;
  }
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--op-hairline);
  --bs-card-box-shadow: var(--op-card-shadow);
  --bs-card-border-radius: .7143rem;
  --bs-card-inner-border-radius: calc(.7143rem - 1px);
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.0714rem;
  --bs-card-cap-padding-y: .8571rem;
  --bs-card-cap-padding-x: 1.0714rem;
  --bs-card-cap-bg: transparent;
  border: 1px solid var(--op-hairline) !important;
  box-shadow: var(--op-card-shadow) !important;
}

.card-header {
  border-bottom: 1px solid var(--op-hairline);
}

/* The theme drops the body's top padding after a header; headers here have a divider,
   so the body needs its padding back. */
.card-header + .card-body {
  padding-top: var(--bs-card-spacer-y) !important;
}

.card-title,
.card-header h5,
.card-header .card-title {
  font-size: 14px;
  font-weight: 700;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: .4286rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: .4286rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.btn-sm {
  --bs-btn-font-size: 12px;
  --bs-btn-padding-y: .2857rem;
  --bs-btn-padding-x: .7143rem;
}

.btn-lg {
  --bs-btn-font-size: 14px;
}

.btn-primary {
  --bs-btn-bg: var(--op-accent);
  --bs-btn-border-color: var(--op-accent);
  --bs-btn-hover-bg: var(--op-accent-hover);
  --bs-btn-hover-border-color: var(--op-accent-hover);
  --bs-btn-active-bg: var(--op-accent-hover);
  --bs-btn-active-border-color: var(--op-accent-hover);
  --bs-btn-disabled-bg: var(--op-accent);
  --bs-btn-disabled-border-color: var(--op-accent);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* Every button you can click is colour-coded: tinted at rest, filled on hover (like the tabs).
   .btn.btn-x.btn-x matches the theme's own `.btn[class*="btn-outline-"]:not(:focus)` (core.css),
   which would otherwise keep outline buttons transparent. */
.btn.btn-label-secondary.btn-label-secondary,
.btn.btn-outline-secondary.btn-outline-secondary,
.btn.btn-label-primary.btn-label-primary,
.btn.btn-outline-primary.btn-outline-primary,
.btn.btn-text-secondary.btn-text-secondary {
  --btn-tint: color-mix(in srgb, var(--op-accent) 16%, transparent);
  --bs-btn-color: var(--op-accent);
  --bs-btn-bg: var(--btn-tint);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--op-accent);
  --bs-btn-hover-border-color: var(--op-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--op-accent-hover);
  --bs-btn-active-border-color: var(--op-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  border: 1px solid transparent !important;
}

.btn-label-secondary:hover,
.btn-outline-secondary:hover,
.btn-label-primary:hover,
.btn-outline-primary:hover,
.btn-text-secondary:hover,
.btn-label-secondary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-label-primary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-text-secondary:focus-visible {
  border-color: var(--op-accent) !important;
}

/* Destructive: the same pattern in red */
.btn.btn-outline-danger.btn-outline-danger,
.btn.btn-label-danger.btn-label-danger {
  --bs-btn-color: var(--op-bad, var(--bs-danger));
  --bs-btn-bg: color-mix(in srgb, var(--bs-danger) 14%, transparent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label,
.col-form-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--op-muted);
  margin-bottom: 4px;
}

.form-label .text-danger {
  font-weight: 700;
}

.form-control,
.form-select {
  font-size: 13.5px;
  border-color: var(--op-field-border);
  border-radius: var(--bs-border-radius-lg);
  color: var(--op-ink);
  background-color: var(--bs-paper-bg);
}

/* Compact sizing for regular (non-floating) controls; floating-label controls keep the
   theme's geometry so their labels stay aligned. */
.form-control:not(.form-floating > .form-control),
.form-select:not(.form-floating > .form-select) {
  border-width: 1px !important;
  min-block-size: 36px;
  padding-block: .4286rem !important;
}

/* Hovering a field you can type in darkens its border a little more */
.form-control:not([readonly]):not(:disabled):not(:focus):not(.is-invalid):hover,
.form-select:not(:disabled):not(:focus):not(.is-invalid):hover {
  border-color: var(--op-field-border-hover);
}

/* A field with an error stays red, also while you're typing in it */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bs-danger) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), .15) !important;
}

/* Checkboxes, radios and switches use the same field border */
.form-check-input:not(:checked) {
  border-color: var(--op-field-border);
}

/* Searchable dropdowns (select2) match the other fields */
.select2-container--default .select2-selection {
  border-color: var(--op-field-border) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--op-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15) !important;
}

.form-control::placeholder {
  color: var(--op-faint);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--op-head-bg);
  color: var(--op-ink-2);
}

.form-control.x-small,
.form-select.x-small {
  min-block-size: 32px;
  font-size: 12.5px;
}

.form-text {
  font-size: 12px;
  color: var(--op-muted);
}

.input-group:not(:has(.form-floating)) > .input-group-text {
  border-width: 1px !important;
}

.input-group-text,
.input-group > .input-group-text {
  border-color: var(--op-field-border);
  color: var(--op-muted);
  font-size: 13px;
  background-color: var(--bs-paper-bg);
}

/* Slate label tab on the left of a filter (Operations "addon" pattern) */
.input-group-text.op-addon {
  /* A label for the field next to it (not clickable): neutral, so it doesn't look like a button */
  background-color: var(--op-head-bg) !important;
  border-color: var(--op-field-border, var(--op-input-border)) !important;
  color: var(--op-ink-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.form-check-input:checked {
  background-color: var(--op-accent);
  border-color: var(--op-accent);
}

.form-check-label {
  font-size: 13px;
}

.invalid-feedback {
  font-size: 12px;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--op-ink);
  --bs-table-hover-bg: var(--op-row-hover);
  font-size: 13px;
}

.table > thead > tr > th,
.card-datatable table thead th,
table.dataTable thead th {
  background-color: var(--op-head-bg) !important;
  color: var(--op-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  border-top: 0 !important;
  border-bottom: 1px solid var(--op-hairline) !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.table > tbody > tr > td,
table.dataTable tbody td {
  padding: 7px 12px !important;
  border-top: 1px solid var(--op-row-line) !important;
  border-bottom: 0 !important;
  vertical-align: middle;
  color: var(--op-ink);
}

.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover > td {
  background-color: var(--op-row-hover);
}

.table.border-top {
  border-top: 0 !important;
}

/* ── Badges & pills ────────────────────────────────────────────────────── */
.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.badge.rounded-pill {
  padding: .2857em .7143em;
}

.bg-label-success { background-color: var(--op-good-bg) !important; color: var(--op-good) !important; }
.bg-label-warning { background-color: var(--op-warn-bg) !important; color: var(--op-warn) !important; }
.bg-label-danger { background-color: var(--op-bad-bg) !important; color: var(--op-bad) !important; }
.bg-label-info { background-color: var(--op-info-bg) !important; color: var(--op-info) !important; }
.bg-label-primary { background-color: var(--op-accent-soft) !important; color: var(--op-accent) !important; }
.bg-label-secondary { background-color: var(--op-head-bg) !important; color: var(--op-ink-2) !important; }

/* ── Nav pills / tabs ──────────────────────────────────────────────────── */
.nav-pills .nav-link {
  font-size: 13px;
  font-weight: 600;
  padding: .4286rem .9286rem;
  border-radius: var(--bs-border-radius-lg);
  transition: background-color .15s, color .15s, box-shadow .15s;
}

/* Tabs you can switch to: tinted in the accent colour, so every tab reads as clickable */
.nav-pills .nav-link:not(.active) {
  background-color: color-mix(in srgb, var(--op-accent) 16%, transparent);
  color: var(--op-accent);
}

/* Hover fills in like the selected tab (and the "Add" chips). The .nav-item form outranks the theme's
   own pale hover (core.css) */
.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:not(.active):focus-visible,
.nav-pills .nav-item .nav-link:not(.active):hover,
.nav-pills .nav-item .nav-link:not(.active):focus-visible {
  background-color: var(--op-accent);
  color: #fff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--op-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  --bs-pagination-font-size: 12.5px;
}

.page-link,
.dt-paging .page-link {
  color: var(--op-accent) !important;
  background-color: color-mix(in srgb, var(--op-accent) 16%, transparent) !important;
  border-color: transparent !important;
  border-radius: var(--bs-border-radius) !important;
  min-inline-size: 30px;
  block-size: 30px;
  font-size: 12.5px;
  font-weight: 600;
}

.page-item:not(.active):not(.disabled) .page-link:hover,
.page-item:not(.active):not(.disabled) .page-link:focus-visible {
  background-color: var(--op-accent) !important;
  color: #fff !important;
}

/* First / previous / next / last when there's nowhere to go: switched off */
.page-item.disabled .page-link {
  background-color: var(--op-head-bg) !important;
  color: var(--op-faint) !important;
  border: 1px dashed var(--op-input-border) !important;
}

.page-item.active .page-link,
.page-item.active .page-link:hover {
  background-color: var(--op-accent) !important;
  border-color: var(--op-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Dropdowns, modals, offcanvas, alerts ──────────────────────────────── */
.dropdown-menu {
  font-size: 13px;
  border: 1px solid var(--op-hairline);
  box-shadow: var(--bs-box-shadow);
}

.dropdown-item {
  padding: .4286rem .8571rem;
}

.modal-content {
  border: 0;
  border-radius: .7143rem;
}

.modal-header {
  border-bottom: 1px solid var(--op-hairline);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
}

.modal-footer {
  border-top: 1px solid var(--op-hairline);
}

.offcanvas-title {
  font-weight: 700;
}

.alert {
  font-size: 13px;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
}

.alert-success { background-color: var(--op-good-bg) !important; color: var(--op-good) !important; }
.alert-warning { background-color: var(--op-warn-bg) !important; color: var(--op-warn) !important; }
.alert-danger { background-color: var(--op-bad-bg) !important; color: var(--op-bad) !important; }
.alert-info { background-color: var(--op-info-bg) !important; color: var(--op-info) !important; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.content-footer {
  font-size: 12.5px;
  color: var(--op-muted);
}

/* ── Shared Operations components (usable on any page) ─────────────────── */
.op-mono {
  font-family: var(--op-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--op-ink);
}

.op-muted {
  color: var(--op-muted);
}

.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
}

.op-pill i { font-size: 12px; }
.op-pill--good { background: var(--op-good-bg); color: var(--op-good); border-color: #b2e2bf; }
.op-pill--warn { background: var(--op-warn-bg); color: var(--op-warn); border-color: #f5dc9a; }
.op-pill--bad { background: var(--op-bad-bg); color: var(--op-bad); border-color: #f1c0c0; }
.op-pill--info { background: var(--op-info-bg); color: var(--op-info); border-color: #c5d9f4; }
.op-pill--grey { background: var(--op-head-bg); color: var(--op-ink-2); border-color: var(--op-input-border); }

[data-bs-theme=dark] .op-pill { border-color: transparent; }

.op-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
}

/* Count chips (Operations quarantine list) */
.op-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Clickable: tinted, filled on hover (like the tabs and buttons) */
  background: color-mix(in srgb, var(--op-accent) 16%, transparent);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--op-accent);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}

.op-chip:hover {
  background: var(--op-accent);
  border-color: var(--op-accent);
  color: #fff;
}

.op-chip:hover .op-chip__count {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.op-chip:hover .op-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.op-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}

.op-chip.is-active,
.op-chip.is-active:hover {
  background: var(--op-accent);
  border-color: var(--op-accent);
  color: #fff;
}

.op-chip__count {
  min-inline-size: 26px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  background: var(--op-row-line);
  color: var(--op-ink);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.op-chip.is-active .op-chip__count {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* Section heading inside a drawer / panel */
.op-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--op-muted);
  margin-bottom: 8px;
}

/* Key / value grid */
.op-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin: 0;
}

.op-kv dt {
  color: var(--op-muted);
  font-weight: 600;
}

.op-kv dd {
  margin: 0;
  color: var(--op-ink);
  overflow-wrap: anywhere;
}

/* Light loading overlay with a centred pill (Operations pattern) */
.op-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 9px 18px;
  background: var(--bs-paper-bg);
  border: 1px solid var(--op-input-border);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--op-ink);
}

.op-spinner {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  border: 2px solid var(--op-accent-soft);
  border-top-color: var(--op-accent);
  animation: op-spin .7s linear infinite;
}

@keyframes op-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .op-spinner { animation: none; }
}

/* ── Tooltips ──────────────────────────────────────────────────────────── */
.tooltip {
  --bs-tooltip-font-size: 12px;
  --bs-tooltip-padding-x: 9px;
  --bs-tooltip-padding-y: 5px;
  --bs-tooltip-max-width: 280px;
  /* A tooltip never blocks the button underneath it (e.g. Save's tip over Discard) */
  pointer-events: none;
}

/* ── Page loader (resources/views/layouts/sections/page-loader.blade.php) ─ */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100001;
  pointer-events: none;
}

.page-progress__bar {
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--op-accent), var(--op-coral));
  box-shadow: 0 0 8px rgba(254, 138, 125, .55);
  opacity: 0;
  transition: transform .25s ease, opacity .3s ease;
}

.page-progress.is-active .page-progress__bar {
  opacity: 1;
}

.page-progress.is-done .page-progress__bar {
  opacity: 0;
  transition: transform .2s ease, opacity .35s ease .15s;
}

.global-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(246, 247, 251, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.global-preloader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-bs-theme=dark] .global-preloader {
  background: rgba(27, 32, 43, .6);
}

.loader-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  min-width: 280px;
  max-width: 380px;
  padding: 16px 20px;
  border: 1px solid var(--op-hairline);
  border-radius: 14px;
  background: var(--bs-paper-bg);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  transform: translateY(6px) scale(.98);
  transition: transform .2s ease;
}

.global-preloader.is-visible .loader-card {
  transform: none;
}

.loader-card__mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loader-spin 1s linear infinite;
}

.loader-ring circle {
  fill: none;
  stroke-width: 3;
}

.loader-ring__track {
  stroke: var(--op-accent-soft);
}

.loader-ring__arc {
  stroke: var(--op-accent);
  stroke-linecap: round;
  stroke-dasharray: 44 157;
  transform-origin: center;
  animation: loader-dash 1.6s ease-in-out infinite;
}

.loader-card__logo {
  width: 32px;
  height: auto;
}

.loader-card__logo--dark,
[data-bs-theme=dark] .loader-card__logo--light {
  display: none;
}

[data-bs-theme=dark] .loader-card__logo--dark {
  display: block;
}

.loader-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.loader-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--op-ink);
}

.loader-card__hint {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--op-muted);
  animation: loader-fade-in .25s ease;
}

.loader-card__dismiss {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid var(--op-input-border);
  border-radius: 8px;
  background: var(--bs-paper-bg);
  color: var(--op-accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  animation: loader-fade-in .25s ease;
}

.loader-card__dismiss:hover {
  background: var(--op-accent-soft);
  border-color: transparent;
}

.loader-card__dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .25);
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes loader-dash {
  0% { stroke-dasharray: 10 157; }
  50% { stroke-dasharray: 80 157; }
  100% { stroke-dasharray: 10 157; }
}

@keyframes loader-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-ring,
  .loader-ring__arc {
    animation: none;
  }

  .loader-card,
  .page-progress__bar {
    transition: none;
  }
}

/* ── Footer credit (resources/views/layouts/sections/footer/footer.blade.php) ─ */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--op-hairline);
  border-radius: 999px;
  background: var(--bs-paper-bg);
  color: var(--op-muted);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.footer-credit__sep {
  width: 1px;
  height: 12px;
  margin: 0 3px;
  background: var(--op-hairline);
}

.footer-credit__year {
  font-variant-numeric: tabular-nums;
}

.footer-credit__heart {
  font-size: 13px;
  color: var(--op-coral);
  transition: transform .2s ease;
}

.footer-credit__brand {
  font-weight: 700;
  color: var(--op-accent);
}

.footer-credit__arrow {
  font-size: 13px;
  color: var(--op-accent);
  /* Takes no room until hover, so the pill doesn't carry empty space */
  width: 0 !important;
  margin-left: -5px;
  opacity: 0;
  overflow: hidden;
  transition: opacity .15s ease, width .15s ease, margin .15s ease, transform .15s ease;
}

a.footer-credit:hover,
a.footer-credit:focus-visible {
  border-color: var(--op-coral);
  box-shadow: 0 2px 10px rgba(254, 138, 125, .22);
  color: var(--op-ink-2);
  transform: translateY(-1px);
  outline: none;
}

a.footer-credit:hover .footer-credit__heart,
a.footer-credit:focus-visible .footer-credit__heart {
  animation: footer-heartbeat .9s ease-in-out infinite;
}

a.footer-credit:hover .footer-credit__arrow,
a.footer-credit:focus-visible .footer-credit__arrow {
  width: 13px !important;
  opacity: 1;
  margin-left: 0;
  transform: translate(1px, -1px);
}

@keyframes footer-heartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.25); }
  40% { transform: scale(1); }
  60% { transform: scale(1.15); }
}

@media (max-width: 767.98px) {
  .content-footer .footer-container {
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.footer-credit:hover,
  a.footer-credit:focus-visible {
    transform: none;
  }

  a.footer-credit:hover .footer-credit__heart,
  a.footer-credit:focus-visible .footer-credit__heart {
    animation: none;
  }
}

/* Side menu: items only admins see (shown while an admin views the portal as a user) */
.menu-admin-only {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: rgba(254, 138, 125, .18);
  color: var(--op-coral, #fe8a7d);
}

/* Disabled buttons look switched off — grey, dashed, muted text — not just a faded version of the
   colour (which reads as clickable). Buttons disabled while saving (spinner) keep their colour. */
.btn:disabled:not([data-loading="1"]),
.btn.disabled:not([data-loading="1"]),
fieldset:disabled .btn {
  background-color: var(--op-head-bg, #f1f3f6) !important;
  border: 1px dashed var(--op-input-border, #cfd5de) !important;
  color: var(--op-faint, #9aa3b2) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Information tags (account type, status, delivery DC …) — not clickable.
   White with a hairline border, squarer corners and an icon or dot, so they never look like the
   slate-blue tinted buttons. Hovering explains them (help cursor + tooltip); nothing changes colour. */
.op-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--op-hairline, var(--bs-border-color));
  border-radius: 6px;
  background: var(--bs-paper-bg);
  color: var(--op-ink-2, var(--bs-body-color));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.op-tag .ri {
  width: 13px;
  height: 13px;
  color: var(--op-muted, var(--bs-secondary-color));
}

.op-tag[data-tip] {
  cursor: help;
}

.op-tag .op-dot {
  width: 7px;
  height: 7px;
}

.op-tag--good { color: var(--op-good, var(--bs-success)); }
.op-tag--muted { color: var(--op-muted, var(--bs-secondary-color)); }