/* Parts tracker - shop-floor friendly styles on top of Bootstrap 5 */

:root {
  --pt-bg: #f3f4f6;
  --pt-navy: #0f2438;   /* wrench */
  --pt-red: #d3141a;    /* lettering */
  --pt-core: #0d6efd;
  --pt-return: #6f42c1;
  --pt-warranty: #fd7e14;
  --pt-owed: #b02a37;
  --pt-ok: #198754;
}

html, body { height: 100%; }
body {
  background: var(--pt-bg);
  -webkit-tap-highlight-color: transparent;
  font-size: 1.05rem;
}
main { padding-bottom: 6rem; }
@media (min-width: 992px) { main { padding-bottom: 2rem; } }

/* Top bar */
.pt-navbar { background: #fff; border-bottom: 3px solid var(--pt-navy); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pt-navbar .navbar-brand { font-weight: 800; letter-spacing: .02em; color: var(--pt-navy); }
.pt-navbar .brand-logo { height: 40px; width: auto; }
@media (max-width: 575px) { .pt-navbar .brand-logo { height: 32px; } }
.pt-navbar .brand-text { font-size: .95rem; color: var(--pt-navy); }
.pt-navbar .nav-link { color: #374151; font-weight: 700; padding: .6rem .9rem; border-radius: .5rem; }
.pt-navbar .nav-link.active, .pt-navbar .nav-link:hover { color: #fff; background: var(--pt-navy); }

/* Bottom nav (mobile) */
.pt-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 1px solid #dee2e6;
  display: flex; justify-content: space-around;
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
.pt-bottom-nav a {
  flex: 1; text-align: center; text-decoration: none; color: #6b7280;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: .35rem 0;
}
.pt-bottom-nav a .icon { display: block; font-size: 1.5rem; line-height: 1.2; }
.pt-bottom-nav a.active { color: var(--pt-red); }

/* Big touch targets */
.btn-xl {
  padding: 1.1rem 1.25rem; font-size: 1.2rem; font-weight: 700; border-radius: .9rem;
  letter-spacing: .02em; min-height: 4.2rem;
}
.btn-lg { font-weight: 700; border-radius: .75rem; }
.btn { min-height: 2.75rem; }
.btn-check + .btn { min-height: 3rem; }
.form-control-lg, .form-select-lg { min-height: 3.25rem; border-radius: .6rem; }

/* Dashboard tiles */
.tile {
  display: block; text-decoration: none; color: #fff; border-radius: 1rem;
  padding: 1.1rem 1.25rem 1rem; height: 10rem; position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,.08); transition: transform .08s;
}
.tile:hover, .tile:focus, .tile:active { color: #fff; text-decoration: none; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.14); filter: brightness(1.06); }
.tile:active { transform: scale(.98); }
.tile .tile-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; opacity: .9; min-height: 2.4em; line-height: 1.2; }
.tile .tile-amount { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; }
.tile .tile-count { font-size: .95rem; font-weight: 600; opacity: .9; margin-top: auto; }
.tile-cores { background: linear-gradient(135deg, #1f4e79, var(--pt-navy)); }
.tile-credit { background: linear-gradient(135deg, #6f42c1, #59359a); }
.tile-warranty { background: linear-gradient(135deg, #fd7e14, #d9640a); }
.tile-attention { background: linear-gradient(135deg, #e0242a, #a80f14); }
.tile-attention.tile-calm { background: linear-gradient(135deg, #198754, #146c43); }

/* Outline buttons that sit on a white card: keep dark text on hover, just tint the background.
   (Bootstrap's outline hover turns the text white, and .bg-white keeps the background white = invisible text.) */
.btn-outline-dark.bg-white:hover, .btn-outline-dark.bg-white:focus,
.btn-outline-secondary.bg-white:hover, .btn-outline-secondary.bg-white:focus {
  color: var(--pt-navy); background-color: #e8edf3 !important; border-color: var(--pt-navy);
}
.btn-outline-dark.bg-white:active, .btn-outline-secondary.bg-white:active {
  color: #fff; background-color: var(--pt-navy) !important; border-color: var(--pt-navy);
}

/* Quick actions */
.quick-actions .btn-xl { width: 100%; height: 6.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; line-height: 1.15; }
.quick-actions .btn-xl .icon { font-size: 1.6rem; line-height: 1; }

/* Case cards */
.case-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid #e5e7eb; border-left-width: 6px; border-radius: .9rem;
  padding: .9rem 1rem; margin-bottom: .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.case-card:hover { background: #fafafa; color: inherit; }
.case-card.type-core { border-left-color: var(--pt-core); }
.case-card.type-return { border-left-color: var(--pt-return); }
.case-card.type-warranty { border-left-color: var(--pt-warranty); }
.case-card .title { font-weight: 800; font-size: 1.15rem; }
.case-card .meta { color: #6b7280; font-size: .95rem; }
.case-card .loc { font-weight: 800; font-size: 1.05rem; background: #111827; color: #fff; padding: .15rem .55rem; border-radius: .4rem; }
.badge.type-core { background: var(--pt-core); }
.badge.type-return { background: var(--pt-return); }
.badge.type-warranty { background: var(--pt-warranty); }
.badge { font-size: .75rem; letter-spacing: .04em; }

.money { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.money-owed { color: var(--pt-owed); }
.money-zero { color: var(--pt-ok); }
.money-neg { color: #0a58ca; }

.urgency-strip { font-size: .75rem; font-weight: 800; letter-spacing: .08em; }

/* Section headers */
.section-title { font-size: .85rem; font-weight: 800; letter-spacing: .1em; color: #6b7280; text-transform: uppercase; margin: 1.25rem 0 .6rem; }

/* Case detail facts */
.fact { background: #fff; border-radius: .9rem; padding: .9rem 1rem; border: 1px solid #e5e7eb; height: 100%; }
.fact .label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: #6b7280; text-transform: uppercase; }
.fact .value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-top: .2rem; }
.fact .value.small { font-size: 1.1rem; }
.fact.owed { border-color: var(--pt-owed); background: #fff5f5; }
.fact.owed .value { color: var(--pt-owed); }
.fact.paid { border-color: var(--pt-ok); background: #f2fbf6; }
.fact.paid .value { color: var(--pt-ok); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: .5rem 0 .5rem 1.6rem; border-left: 3px solid #e5e7eb; margin-left: .5rem; }
.timeline li::before { content: ""; position: absolute; left: -.55rem; top: .95rem; width: .85rem; height: .85rem; border-radius: 50%; background: #9ca3af; }
.timeline li.credit::before, .timeline li.closed::before { background: var(--pt-ok); }
.timeline li.pickup::before { background: var(--pt-core); }
.timeline li.write_off::before, .timeline li.deadline::before { background: var(--pt-owed); }
.timeline .when { font-size: .8rem; color: #6b7280; font-weight: 600; }

/* Checklist rows (pickup / credit) */
.check-row {
  display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid #e5e7eb;
  border-radius: .9rem; padding: .8rem 1rem; margin-bottom: .6rem; cursor: pointer;
}
.check-row .form-check-input { width: 1.9rem; height: 1.9rem; margin: 0; flex: none; }
.check-row.unchecked { opacity: .5; }
.check-row .loc { font-weight: 800; font-size: 1.2rem; min-width: 3.5rem; text-align: center; background: #111827; color: #fff; padding: .3rem .5rem; border-radius: .5rem; }

/* Location picker buttons */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.loc-grid .btn { font-weight: 800; font-size: 1.05rem; padding: .8rem .4rem; }

/* Vendor buttons */
.vendor-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; }
.vendor-btn .count { font-size: 1.35rem; font-weight: 800; }
.vendor-btn.quiet { opacity: .55; }

.stale { border-left: 6px solid var(--pt-owed); }
.fresh { border-left: 6px solid var(--pt-ok); }

.sticky-actions { position: sticky; bottom: 4.5rem; background: rgba(243,244,246,.95); padding: .75rem 0; }
@media (min-width: 992px) { .sticky-actions { bottom: 0; } }

.big-total { font-size: 2rem; font-weight: 800; }
.thumb { max-height: 140px; border-radius: .5rem; border: 1px solid #e5e7eb; }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }