:root {
  --tblr-primary: #fec428 !important;
  --tblr-primary-light: #ffe88d !important;
  --tblr-primary-light-transparent: #ffe88d00 !important;
  --tblr-primary-light-hover: #fec42812 !important;
  --tblr-primary-fg: #313538 !important;
  --tblr-primary-rgb: 248, 199, 0 !important;
  --tblr-primary-darken: #f4b303 !important;
  --tblr-body-font-size: 0.9rem;
  --tblr-body-font-size-lg: 1.25rem;
  --tblr-btn-disabled-border-color: transparent !important;
  --tblr-link-color: #066fd1 !important;
  --tblr-link-hover-color: color-mix(
    in srgb,
    var(--tblr-link-color),
    #000 20%
  ) !important;
  --tblr-link-hover-color-rgb: var(--tblr-link-hover-color) !important;
  --fp-navy-blue: #091d5b;
  --fp-navy-blue-light: #081670;
  --fp-yellow: #fec428;
  --fp-yellow-tint: #fff6dc;
  --fp-border: #e8ebf2;
  --fp-surface-tint: #f6f8fb;
}

.text-selected,
::selection {
  background-color: color-mix(in srgb, var(--tblr-primary) 40%, transparent);
}

.card {
  --tblr-card-cap-bg: transparent;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.02),
    0 4px 6px rgba(0, 0, 0, 0.015),
    0 10px 20px rgba(0, 0, 0, 0.01),
    0 25px 50px rgba(0, 0, 0, 0.009);
  /* backdrop-filter: blur(20px); */
  border-color: #00000014;
}

.card:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 6px rgba(0, 0, 0, 0.03),
    0 10px 20px rgba(0, 0, 0, 0.02),
    0 25px 50px rgba(0, 0, 0, 0.03);
}

.dropdown-item {
  --tblr-dropdown-link-hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
}

.btn {
  font-size: var(--tblr-body-font-size);
}

.btn-group-lg > .btn,
.btn-lg {
  font-size: var(--tblr-btn-font-size, 1.25rem);
}

/*
 * Light primary button: soft yellow tint with a gold border and dark text.
 * A calmer alternative to the solid .btn-primary for secondary actions.
 * Keep in sync with frontend/src/styles/BrandButtonStyles.tsx (webpack React apps).
 */
.btn-primary-lt {
  --tblr-btn-color: var(--tblr-primary-fg);
  --tblr-btn-bg: color-mix(in srgb, var(--tblr-primary) 16%, #fff);
  --tblr-btn-border-color: color-mix(in srgb, var(--tblr-primary) 55%, #fff);
  --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-primary) 26%, #fff);
  --tblr-btn-hover-border-color: color-mix(
    in srgb,
    var(--tblr-primary) 65%,
    #fff
  );
  --tblr-btn-active-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-primary) 32%, #fff);
  --tblr-btn-active-border-color: color-mix(
    in srgb,
    var(--tblr-primary) 65%,
    #fff
  );
  --tblr-btn-disabled-color: var(--tblr-primary-fg);
  --tblr-btn-disabled-bg: color-mix(in srgb, var(--tblr-primary) 16%, #fff);
  --tblr-btn-disabled-border-color: color-mix(
    in srgb,
    var(--tblr-primary) 55%,
    #fff
  );
}

/*
 * Solid ink button: dark slate pill for primary commit actions
 * (save delivery, move stock, confirm). Use instead of .btn-primary when the
 * yellow brand fill would feel too loud next to a calm edit panel.
 */
.btn-ink {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: #1e293b;
  --tblr-btn-border-color: #1e293b;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: #0f172a;
  --tblr-btn-hover-border-color: #0f172a;
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: #0b1220;
  --tblr-btn-active-border-color: #0b1220;
  --tblr-btn-disabled-color: #fff;
  --tblr-btn-disabled-bg: #1e293b;
  --tblr-btn-disabled-border-color: #1e293b;
  border-radius: 999px;
  font-weight: 600;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.btn-group-sm > .btn-ink,
.btn-ink.btn-sm {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

/*
 * Quiet outline pill: dark slate text, soft grey border, pale wash on hover.
 * Companion to .btn-ink for secondary banner actions (mark as ordered, log
 * delivery, transfer) where Tabler's .btn-outline-secondary hover is too loud.
 */
.btn-outline-ink {
  --tblr-btn-color: #1e293b;
  --tblr-btn-bg: #fff;
  --tblr-btn-border-color: #e2e8f0;
  --tblr-btn-hover-color: #0f172a;
  --tblr-btn-hover-bg: #f1f5f9;
  --tblr-btn-hover-border-color: #cbd5e1;
  --tblr-btn-active-color: #0f172a;
  --tblr-btn-active-bg: #e2e8f0;
  --tblr-btn-active-border-color: #cbd5e1;
  --tblr-btn-disabled-color: #94a3b8;
  --tblr-btn-disabled-bg: #fff;
  --tblr-btn-disabled-border-color: #e2e8f0;
  border-radius: 999px;
  font-weight: 600;
  padding-left: 1.05rem;
  padding-right: 1.05rem;
}

.btn-group-sm > .btn-outline-ink,
.btn-sm.btn-outline-ink {
  /* Prefer this over Tabler's default .btn-sm height for outline-ink pills. */
  --tblr-btn-padding-y: 0.2rem;
}

/*
 * Soft edit panel: warm cream surface with a light gold border.
 * Use for open inline editors (delivery, transfer, on order, places & vans,
 * category/unit/supplier options, and similar compose panels).
 */
.fp-edit-panel {
  --fp-edit-panel-bg: #fffbeb;
  --fp-edit-panel-border: color-mix(in srgb, var(--tblr-primary) 42%, #fff);
  background: var(--fp-edit-panel-bg);
  border: 1px solid var(--fp-edit-panel-border);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
}

.fp-edit-panel .form-label {
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.3rem;
}

.fp-edit-panel-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.fp-edit-panel-hint {
  color: var(--tblr-secondary, #667382);
  font-size: 0.8125rem;
  line-height: 1.35;
  margin: 0.15rem 0 0;
}

.fp-edit-panel-hint strong {
  color: #475569;
  font-weight: 600;
}

.form-label,
.form-control {
  font-size: var(--tblr-body-font-size);
}

.form-control-lg {
  font-size: var(--tblr-body-font-size-lg);
}

.form-check-input:focus {
  border-color: var(--tblr-primary);
}

.form-switch .form-check-input:focus:not(:checked) {
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f4b303'/%3e%3c/svg%3e");
}

.nav-bordered .nav-link.active {
  color: var(--fp-navy-blue-light) !important;
}

/*
 * Brand primary (#fec428) is too light for pill text. Use the dark primary
 * foreground on a soft yellow tint so active tabs stay readable.
 */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--tblr-primary-fg);
  background-color: color-mix(in srgb, var(--tblr-primary) 32%, #fff);
}

.navbar-secondary {
  --tblr-navbar-active-border-color: var(--tblr-gray-400);
}

img {
  height: revert-layer;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0.01;
    width: 100%;
    height: 100%;
  }

  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0.01;
    width: 100%;
    height: 60%;
  }

  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

.fade-out {
  display: block;
  -webkit-animation: fadeOut 1s;
  animation: fadeOut 1s;
  animation-fill-mode: forwards;
}

.navbar .avatar {
  --tblr-avatar-size: 1.8rem;
}

@media (min-width: 768px) {
  .navbar-expand-md .nav-item {
    position: relative;
  }

  .navbar-expand-md .nav-item:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25rem;
    border: 0 var(--tblr-border-style) var(--tblr-primary-light-transparent);
    border-bottom-width: 2px;
    transition: border-color 100ms;
  }

  .navbar-expand-md .nav-item:hover:after {
    border-color: var(--tblr-primary-light);
  }
}

.card-image-aspect-ratio {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.table-responsive .table tr:last-child td {
  border-bottom: none;
}

.list-group {
  --tblr-list-group-action-hover-bg: var(--tblr-primary-light-hover);
  --tblr-list-group-action-active-bg: var(--tblr-primary-light-hover);
}

.list-group-item:active,
.list-group-item:focus,
.list-group-item:hover {
  background-color: var(--tblr-primary-light-hover);
}

.summary-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
}

.mw-0 {
  /* Prevents elements from pushing out flex rows */
  min-width: 0;
}

.form-label.required:after {
  content: "*";
  color: var(--tblr-danger);
}

.form-control.inactive-flush:not(:focus, :hover),
.form-select.inactive-flush:not(:focus, :hover) {
  border-color: transparent;
  box-shadow: none;
}

.border-dashed {
  border-style: dashed;
}

.no-wrap {
  white-space: nowrap;
}

/*
 * Google's Places widget appends .pac-container to the body at z-index 1000.
 * Dialogs on this app sit at 1055–1070, and the assistant panel at 11050,
 * which hides those suggestions. Address search draws its own list above that.
 * This keeps any leftover Google menu visible if one is still created.
 */
.pac-container {
  z-index: 11100 !important;
}