/*
 * Residual app styles.
 * Stock Bootstrap (served from /vendor/bootstrap) provides the design system.
 * Keep this file intentionally small - prefer Bootstrap utilities/components in the views.
 * Only add rules here for things Bootstrap has no equivalent for.
 */

/* Subtle app background instead of stark white (uses a Bootstrap theme token). */
body {
  background-color: var(--bs-tertiary-bg);
}

:root {
  --app-grey-hover-bg: color-mix(in srgb, var(--bs-secondary-bg) 70%, var(--bs-body-bg));
  --app-grey-hover-border: color-mix(in srgb, var(--bs-secondary-color) 28%, transparent);
}

[data-bs-theme="dark"] {
  --app-grey-hover-bg: color-mix(in srgb, var(--bs-tertiary-bg) 72%, var(--bs-body-bg));
  --app-grey-hover-border: color-mix(in srgb, var(--bs-secondary-color) 38%, transparent);
}

/* Fast taps on action controls should stay clicks rather than becoming browser
   double-tap zoom. Pinch zoom and page panning remain available. */
@media (any-pointer: coarse) {
  :where(
    a,
    button,
    summary,
    select,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="number"],
    input[type="checkbox"],
    input[type="radio"]
  ) {
    touch-action: manipulation;
  }
}

.nav-tabs .nav-link:not(.active):not(.disabled):not(:disabled):hover,
.nav-tabs .nav-link:not(.active):not(.disabled):not(:disabled):focus-visible,
.nav-pills .nav-link:not(.active):not(.disabled):not(:disabled):hover,
.nav-pills .nav-link:not(.active):not(.disabled):not(:disabled):focus-visible {
  color: var(--bs-primary);
  background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.nav-tabs .nav-link:not(.active):not(.disabled):not(:disabled):hover,
.nav-tabs .nav-link:not(.active):not(.disabled):not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--bs-primary) 24%, transparent);
}

.dropdown-item:not(.active):not(.disabled):not(:disabled):hover,
.dropdown-item:not(.active):not(.disabled):not(:disabled):focus-visible {
  color: var(--bs-body-color);
  background-color: var(--app-grey-hover-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--app-grey-hover-bg);
}

a.card:hover,
a.card:focus-visible,
[data-google-sheets-tab-card]:hover,
[data-google-sheets-tab-card]:focus-visible {
  background-color: var(--app-grey-hover-bg);
  border-color: var(--app-grey-hover-border);
}

/* Tag colors are categorical and dark enough to keep white labels readable. */
.inventory-tag,
.tag-color-swatch {
  min-width: 0;
  max-width: 100%;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
  font-family: var(--type-count-family);
  font-size: var(--type-count-size);
  font-weight: var(--type-count-weight);
  line-height: var(--type-count-line-height);
  letter-spacing: var(--type-count-letter-spacing);
  text-transform: var(--type-count-transform);
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.inventory-tag.inventory-tag--compact {
  padding-inline: 0.4rem;
  font-size: 0.625rem;
  line-height: 1.2;
}

.inventory-tag.inventory-tag--tiny {
  padding-inline: 0.35rem;
  font-size: 0.56rem;
  line-height: 1.1;
}

.inventory-tag[data-tag-color="tag-01"], .tag-color-swatch[data-tag-color="tag-01"] { background-color: #245B9E; }
.inventory-tag[data-tag-color="tag-02"], .tag-color-swatch[data-tag-color="tag-02"] { background-color: #9C3F36; }
.inventory-tag[data-tag-color="tag-03"], .tag-color-swatch[data-tag-color="tag-03"] { background-color: #176B62; }
.inventory-tag[data-tag-color="tag-04"], .tag-color-swatch[data-tag-color="tag-04"] { background-color: #68479B; }
.inventory-tag[data-tag-color="tag-05"], .tag-color-swatch[data-tag-color="tag-05"] { background-color: #596B1F; }
.inventory-tag[data-tag-color="tag-06"], .tag-color-swatch[data-tag-color="tag-06"] { background-color: #913E5B; }
.inventory-tag[data-tag-color="tag-07"], .tag-color-swatch[data-tag-color="tag-07"] { background-color: #17697A; }
.inventory-tag[data-tag-color="tag-08"], .tag-color-swatch[data-tag-color="tag-08"] { background-color: #7A5328; }
.inventory-tag[data-tag-color="tag-09"], .tag-color-swatch[data-tag-color="tag-09"] { background-color: #2F6B3F; }
.inventory-tag[data-tag-color="tag-10"], .tag-color-swatch[data-tag-color="tag-10"] { background-color: #60458D; }
.inventory-tag[data-tag-color="tag-11"], .tag-color-swatch[data-tag-color="tag-11"] { background-color: #8A4A18; }
.inventory-tag[data-tag-color="tag-12"], .tag-color-swatch[data-tag-color="tag-12"] { background-color: #4A539C; }
.inventory-tag[data-tag-color="tag-13"], .tag-color-swatch[data-tag-color="tag-13"] { background-color: #52672A; }
.inventory-tag[data-tag-color="tag-14"], .tag-color-swatch[data-tag-color="tag-14"] { background-color: #7B427E; }
.inventory-tag[data-tag-color="tag-15"], .tag-color-swatch[data-tag-color="tag-15"] { background-color: #785B13; }
.inventory-tag[data-tag-color="tag-16"], .tag-color-swatch[data-tag-color="tag-16"] { background-color: #3F56A6; }
.inventory-tag[data-tag-color="tag-17"], .tag-color-swatch[data-tag-color="tag-17"] { background-color: #176B68; }
.inventory-tag[data-tag-color="tag-18"], .tag-color-swatch[data-tag-color="tag-18"] { background-color: #8F3D61; }
.inventory-tag[data-tag-color="tag-19"], .tag-color-swatch[data-tag-color="tag-19"] { background-color: #53683D; }
.inventory-tag[data-tag-color="tag-20"], .tag-color-swatch[data-tag-color="tag-20"] { background-color: #85462B; }

.tag-color-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: 0.5rem;
}

.tag-color-choice {
  position: absolute;
  opacity: 0;
}

.tag-color-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  cursor: pointer;
}

.tag-color-swatch > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.app-setting-card {
  min-width: 0;
}

.tag-color-action {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.tag-color-choice:checked + .tag-color-swatch {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.tag-color-choice:focus-visible + .tag-color-swatch {
  outline: 3px solid color-mix(in srgb, var(--bs-primary) 52%, transparent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .tag-color-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .tag-color-swatch {
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
  }
}

/* Scan page: large, touch-friendly +/- buttons for the quantity input-group. */
.quantity-stepper-btn {
  min-width: 56px;
  font-family: var(--type-control-family);
  font-size: 1.5rem;
  font-weight: var(--type-control-weight);
  line-height: 1;
}