/* Metronic-inspired form controls — b-input, b-select, b-checkbox, b-switch, b-pagination */

/* ── Text input ── */

.b-input {
  display: block;
  width: 100%;
  height: 2.125rem;
  padding-inline: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03));
  font-family: inherit;
  font-size: var(--text-sm, 0.8125rem);
  line-height: var(--leading-tight, 1.25);
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-input::placeholder {
  color: var(--color-text-muted, #9ca3af);
}

.b-input:focus-visible {
  border-color: var(--color-primary, #2f3747);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-primary, #2f3747) 20%, transparent);
}

.b-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.b-input[aria-invalid='true'] {
  border-color: var(--color-error, #dc2626);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-error, #dc2626) 12%, transparent);
}

.b-input--full {
  width: 100%;
}

/* ── Search input (wrapper + icon) ── */

.b-input-field {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  height: 2.125rem;
  padding-inline: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03));
  transition:
    border-color var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-input-field:focus-within {
  border-color: var(--color-primary, #2f3747);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-primary, #2f3747) 20%, transparent);
}

.b-input-field__icon {
  flex-shrink: 0;
  font-size: var(--text-base, 0.875rem);
  color: var(--color-text-muted, #9ca3af);
  line-height: 1;
}

.b-input-field__input {
  display: block;
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--text-sm, 0.8125rem);
  line-height: var(--leading-tight, 1.25);
  outline: none;
  box-shadow: none;
}

.b-input-field__input::placeholder {
  color: var(--color-text-muted, #9ca3af);
}

.b-input-field__input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.b-input-field:has(.b-input-field__input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Select (native) ── */

.b-select {
  display: block;
  width: 100%;
  height: 2.125rem;
  padding-inline: var(--space-3, 0.75rem) var(--space-8, 1.5rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background-color: var(--color-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 14px 11px;
  color: var(--color-text, #111827);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03));
  font-family: inherit;
  font-size: var(--text-sm, 0.8125rem);
  line-height: var(--leading-tight, 1.25);
  cursor: pointer;
  appearance: none;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-select:focus-visible {
  border-color: var(--color-primary, #2f3747);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-primary, #2f3747) 20%, transparent);
}

.b-select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.b-select[aria-invalid='true'] {
  border-color: var(--color-error, #dc2626);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-error, #dc2626) 12%, transparent);
}

.b-select--full {
  width: 100%;
}

.b-select--compact {
  width: 4rem;
  min-width: 4rem;
  padding-inline: var(--space-2, 0.5rem) var(--space-6, 1.25rem);
  text-align: center;
}

/* ── Select menu (custom dropdown, vanilla JS) ── */

.b-select-menu {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.b-select-menu--full {
  width: 100%;
}

.b-select-menu--compact {
  width: 4rem;
  min-width: 4rem;
}

.b-select-menu--disabled {
  pointer-events: none;
  opacity: 0.6;
}

.b-select-menu--loading {
  pointer-events: none;
  opacity: 0.85;
}

.b-select-menu--loading .b-select-menu__value {
  opacity: 0.6;
}

.b-select-menu__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.b-select-menu__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 2.125rem;
  padding-inline: var(--space-3, 0.75rem) var(--space-8, 1.5rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background-color: var(--color-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 14px 11px;
  color: var(--color-text, #111827);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03));
  font-family: inherit;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-tight, 1.25);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-select-menu--compact .b-select-menu__trigger {
  justify-content: center;
  padding-inline: var(--space-2, 0.5rem) var(--space-6, 1.25rem);
  text-align: center;
}

.b-select-menu__trigger:focus-visible,
.b-select-menu--open .b-select-menu__trigger {
  border-color: var(--color-primary, #2f3747);
  box-shadow:
    var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03)),
    0 0 0 3px color-mix(in srgb, var(--color-primary, #2f3747) 20%, transparent);
}

.b-select-menu__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.b-select-menu__placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-muted, #9ca3af);
}

@media (max-width: 48rem) {
  .b-select-menu__value,
  .b-select-menu__placeholder {
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: -0.01em;
  }

  .b-select-menu__option-text {
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: -0.01em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

.b-select-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 105;
  display: none;
  width: 100%;
  min-width: 100%;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.b-select-menu--open .b-select-menu__dropdown {
  display: block;
  overflow: visible;
}

.b-select-menu__options {
  margin: 0;
  padding: var(--space-2, 0.5rem);
  list-style: none;
}

.b-select-menu__option {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.4375rem var(--space-3, 0.75rem);
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  font-size: var(--text-sm, 0.8125rem);
  line-height: var(--leading-tight, 1.25);
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) var(--ease-out, ease),
    color var(--duration-fast, 150ms) var(--ease-out, ease);
}

@media (hover: hover) {
  .b-select-menu__option:hover,
  .b-select-menu__option--highlighted {
    background: var(--color-primary-bg, #eef1f4);
    color: var(--color-text, #111827);
  }
}

.b-select-menu__option--selected {
  color: var(--color-text, #111827);
}

.b-select-menu__option--disabled {
  cursor: not-allowed;
}

.b-select-menu__option--disabled .b-select-menu__option-text,
.b-select-menu__option--disabled .b-select-menu__check {
  color: var(--color-text-muted, #9ca3af);
}

@media (hover: hover) {
  .b-select-menu__option--disabled:hover,
  .b-select-menu__option--disabled.b-select-menu__option--highlighted {
    background: transparent;
    color: inherit;
  }
}

.b-select-menu__option--has-tooltip.b-tooltip-host {
  position: relative;
}

.b-select-menu__option .b-tooltip {
  z-index: 120;
  background-color: var(--color-mono, #09090b);
  color: var(--color-mono-fg, #fff);
}

.b-select-menu__option-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.b-select-menu__check {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: auto;
  color: var(--color-primary, #2f3747);
  opacity: 0;
}

.b-select-menu__option--selected .b-select-menu__check {
  opacity: 1;
}

/* ── Checkbox ── */

.b-checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius-sm, 0.5rem) - 4px);
  background-color: var(--color-surface, #fff);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition:
    background-color var(--duration-fast, 150ms) var(--ease-out, ease),
    border-color var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-checkbox:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-surface, #fff),
    0 0 0 4px var(--color-border, #e5e7eb);
}

.b-checkbox:checked,
.b-checkbox[aria-checked='true'] {
  border-color: var(--color-primary, #2f3747);
  background-color: var(--color-primary, #2f3747);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z' fill='white'/%3E%3C/svg%3E");
}

.b-checkbox:indeterminate {
  border-color: var(--color-primary, #2f3747);
  background-color: var(--color-primary, #2f3747);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
}

.b-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.b-checkbox--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.b-checkbox--sm:checked,
.b-checkbox--sm[aria-checked='true'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M8.4932 0.233321L4.03986 4.68665L1.4532 2.09999C1.32829 1.97582 1.15932 1.90613 0.983198 1.90613C0.807074 1.90613 0.638106 1.97582 0.513198 2.09999C0.38903 2.2249 0.319336 2.39386 0.319336 2.56999C0.319336 2.74611 0.38903 2.91508 0.513198 3.03999L3.5732 6.09999C3.69811 6.22415 3.86707 6.29385 4.0432 6.29385C4.21932 6.29385 4.38829 6.22415 4.5132 6.09999L9.4332 1.17999C9.49568 1.11801 9.54528 1.04428 9.57912 0.963038C9.61297 0.881799 9.6304 0.794662 9.6304 0.706655C9.6304 0.618647 9.61297 0.53151 9.57912 0.45027C9.54528 0.369031 9.49568 0.295296 9.4332 0.233321C9.30829 0.109154 9.13932 0.0394592 8.9632 0.0394592C8.78707 0.0394592 8.61811 0.109154 8.4932 0.233321Z' fill='white'/%3E%3C/svg%3E");
}

.b-checkbox--sm:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
}

/* ── Switch ── */

.b-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.25rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-border, #e5e7eb);
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-switch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-xs, 0 1px 1px rgba(17, 24, 39, 0.03));
  transform: translateY(-50%);
  transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  pointer-events: none;
}

.b-switch:checked,
.b-switch[aria-checked='true'] {
  background: var(--color-primary, #2f3747);
}

.b-switch:checked::before,
.b-switch[aria-checked='true']::before {
  transform: translate(0.875rem, -50%);
}

.b-switch:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-surface, #fff),
    0 0 0 4px var(--color-border, #e5e7eb);
}

.b-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.b-switch--sm {
  width: 1.625rem;
  height: 1.125rem;
}

.b-switch--sm::before {
  width: 0.625rem;
  height: 0.625rem;
  left: 0.1875rem;
}

.b-switch--sm:checked::before,
.b-switch--sm[aria-checked='true']::before {
  transform: translate(0.75rem, -50%);
}

/* ── Field label (control + text) ── */

.b-field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  color: var(--color-text, #111827);
  cursor: pointer;
}

.b-field-label--nowrap {
  white-space: nowrap;
}

.b-field-label:has(.b-switch:disabled),
.b-field-label:has(.b-checkbox:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Segment toggle ── */

.b-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface-muted, #eef1f4);
}

.b-segment--sm {
  gap: 0.2rem;
  padding: 0.15rem;
}

.b-segment__btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full, 9999px);
  font: inherit;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  color: var(--color-text-secondary, #6b7280);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast, 150ms) var(--ease-out, ease),
    color var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.b-segment--sm .b-segment__btn {
  padding: 0.3rem 0.65rem;
  font-size: var(--text-xs, 0.75rem);
}

.b-segment__btn[aria-selected='true'] {
  color: var(--color-text, #111827);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(17, 24, 39, 0.08));
}

.b-segment__btn:focus-visible {
  outline: 2px solid var(--color-primary, #2f3747);
  outline-offset: 2px;
}

.b-segment__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Pagination ── */

.b-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.b-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: var(--space-1, 0.25rem);
  border: none;
  border-radius: calc(var(--radius-sm, 0.5rem) - 2px);
  background: transparent;
  color: var(--color-text-secondary, #6b7280);
  font-family: inherit;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) var(--ease-out, ease),
    color var(--duration-fast, 150ms) var(--ease-out, ease);
}

@media (hover: hover) {
  .b-pagination__btn:hover:not(:disabled):not(.b-pagination__btn--active) {
    background: var(--color-primary-bg, #eef1f4);
    color: var(--color-text, #111827);
  }
}

.b-pagination__btn--active,
.b-pagination__btn--active:disabled {
  background: var(--color-primary-bg, #eef1f4);
  color: var(--color-text, #111827);
  cursor: default;
}

.b-pagination__btn:disabled:not(.b-pagination__btn--active) {
  cursor: default;
  opacity: 0.5;
}

/* ── Table footer (per-page + pagination) ── */

.b-table-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5, 1rem);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-secondary, #6b7280);
}

@media (min-width: 48rem) {
  .b-table-footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

.b-table-footer__length {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  white-space: nowrap;
  order: 2;
}

.b-table-footer__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4, 0.875rem);
  order: 1;
}

@media (min-width: 48rem) {
  .b-table-footer__length {
    order: 1;
  }

  .b-table-footer__nav {
    order: 2;
  }
}

.b-table-footer__info {
  color: var(--color-text-secondary, #6b7280);
}