/* Override Tabler icons font with font-display: swap for better performance */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../tabler/icons-webfont/dist/fonts/tabler-icons-uIXMt1i.woff2")
      format("woff2"),
    url("../tabler/icons-webfont/dist/fonts/tabler-icons-cm7hgqt.woff") format("woff"),
    url("../tabler/icons-webfont/dist/fonts/tabler-icons-QX4zmt3.ttf")
      format("truetype");
}

/* Safari fix: ensure full width layout */
html,
body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.page {
  width: 100%;
  min-width: 100%;
}

/* Fix for SweetAlert2 height issue */
body.swal2-height-auto {
  height: 100vh !important;
}

body.swal2-height-auto .page-body {
  min-height: calc(100vh - 200px) !important;
}

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  background-color: #fff !important;
}

select option[value=""] {
  color: #999;
}

select:has(option[value=""]:checked) {
  color: #999;
}

/* Default filter styling */
.tag.tag-default {
  background-color: #e3f2fd;
  border: 1px solid #2196f3;
  color: #1565c0;
}

.tag.tag-default .ti-star {
  color: #ff9800;
}

select option:not([value=""]) {
  color: #000;
}

#HW_badge_cont {
  position: absolute;
  display: inline-block;
  top: -15px;
  right: -25px;
}

.hourglass-animate {
  animation: hourglass-rotate 2s infinite;
}

@keyframes hourglass-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Readonly input styling */
.readonly-input {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  cursor: not-allowed;
}

/* Mission type card selected state */
label.mission-type-card {
  transition: box-shadow 0.2s ease, transform 0.05s ease, border-color 0.2s ease;
  border: 1px solid var(--tblr-border-color, #dee2e6);
  background-color: #f8f9fa;
  position: relative;
}

label.mission-type-card:has(input[type="radio"]:checked) {
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.15);
  border-color: #206bc4;
  background-color: #e7f1ff;
}

label.mission-type-card:hover {
  transform: translateY(-1px);
  border-color: var(--tblr-border-color, #ced4da);
}

/* Visual radio indicator */
label.mission-type-card .radio-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tblr-border-color, #adb5bd);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}

label.mission-type-card .radio-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

label.mission-type-card[aria-checked="true"] .radio-indicator {
  border-color: #206bc4;
  box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.15);
}

label.mission-type-card[aria-checked="true"] .radio-indicator .dot {
  background: #206bc4;
}

/* Selected chip */
label.mission-type-card.is-selected .selected-chip {
  display: inline-flex !important;
}

label.mission-type-card .selected-chip {
  display: none;
}

/* Focus ring */
label.mission-type-card:focus-within {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
  border-color: #206bc4;
}

/* JS fallback: selected class applied by Stimulus */
label.mission-type-card.is-selected {
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.15);
  border-color: #206bc4;
  background-color: #e7f1ff;
}

/* Make password toggle icon clickable when using Tabler input-icon */
.input-icon .input-icon-addon {
  pointer-events: auto;
}

.input-icon .input-icon-addon.cursor-pointer {
  cursor: pointer;
}

/* Social auth buttons */
.btn-social-google,
.btn-social-microsoft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 600;
  border-width: 1px;
}

.btn-social-google {
  background-color: #db4437;
  border-color: #db4437;
  color: #ffffff;
}

.btn-social-google:hover,
.btn-social-google:focus,
.btn-social-google:active {
  background-color: #c53929;
  border-color: #c53929;
  color: #ffffff;
}

.btn-social-google .ti {
  color: #ffffff;
}

.btn-social-microsoft {
  background-color: #2f2f2f;
  border-color: #2f2f2f;
  color: #ffffff;
}

.btn-social-microsoft:hover,
.btn-social-microsoft:focus,
.btn-social-microsoft:active {
  background-color: #1f1f1f;
  border-color: #1f1f1f;
  color: #ffffff;
}

/* Item history timeline flow cards */
.history-flow {
  display: flex;
  align-items: stretch;
}

.history-node {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}

.history-node-center {
  background: rgba(var(--tblr-primary-rgb), 0.04);
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
}

.history-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  color: var(--tblr-secondary);
  font-size: 1rem;
}

.history-node-label {
  display: flex;
  align-items: center;
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  font-weight: 700;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-node-value {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-node-value:hover {
  text-decoration: underline;
}

.history-node-meta {
  margin-top: 0.2rem;
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  line-height: 1.3;
}

.history-node-meta a {
  color: inherit;
  text-decoration: none;
}

.history-node-meta a:hover {
  text-decoration: underline;
}

.history-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
}

.history-qty-before {
  color: var(--tblr-secondary);
}

.history-qty-arrow {
  color: var(--tblr-secondary);
}

.history-qty-after {
  font-weight: 700;
  color: var(--tblr-body-color);
}

.history-qty-picked {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tblr-primary);
  display: block;
  line-height: 1;
  margin-top: 0.15rem;
}

.history-qty-unit {
  font-size: 0.7rem;
  color: var(--tblr-secondary);
}

@media (max-width: 767.98px) {
  .history-flow {
    flex-direction: column;
  }

  .history-sep {
    width: auto;
    height: 1.5rem;
  }
}