/* ---------------------------------------------------------------------------
   Potli application styles.
   Built on Bootstrap 5 with a small boutique palette. Designed for a desktop
   counter and a tablet at exhibitions: large tap targets, high contrast status
   badges, readable prices, and never colour alone to convey meaning.
   --------------------------------------------------------------------------- */

:root {
  --potli-ink: #241b2f;
  --potli-plum: #6b2d5b;
  --potli-plum-soft: #f3e9f0;
  --potli-gold: #b8860b;
  --potli-surface: #faf8fb;
  --potli-border: #e3dce6;
  --potli-muted: #6d6478;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--potli-surface);
  color: var(--potli-ink);
  font-size: 0.95rem;
}

/* --- shell ---------------------------------------------------------------- */
.potli-navbar {
  background: var(--potli-plum);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.potli-navbar .navbar-brand { font-weight: 600; letter-spacing: .02em; }
.potli-navbar .nav-link { color: rgba(255, 255, 255, .82); border-radius: .375rem; padding: .4rem .7rem; }
.potli-navbar .nav-link:hover,
.potli-navbar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .12); }
.potli-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .2); font-weight: 600; }

.page-header { border-bottom: 1px solid var(--potli-border); padding-bottom: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.page-header .subtitle { color: var(--potli-muted); font-size: .875rem; margin: .2rem 0 0; }

.card { border-color: var(--potli-border); }
.card-header { background: #fff; border-bottom: 1px solid var(--potli-border); font-weight: 600; }

/* --- KPI cards ------------------------------------------------------------- */
.kpi-card { background: #fff; border: 1px solid var(--potli-border); border-radius: .6rem; padding: 1rem; height: 100%; }
.kpi-card .kpi-label { color: var(--potli-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 650; line-height: 1.2; margin-top: .25rem; }
.kpi-card .kpi-meta { font-size: .8rem; color: var(--potli-muted); margin-top: .2rem; }
.kpi-card.accent { border-left: 4px solid var(--potli-plum); }

/* --- tables ---------------------------------------------------------------- */
.table-potli { background: #fff; }
.table-potli thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--potli-muted); background: #fff; border-bottom: 2px solid var(--potli-border);
  white-space: nowrap;
}
.table-potli td { vertical-align: middle; }
.table-potli .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--potli-plum); }
.sort-link .bi { font-size: .7rem; }

/* --- piece thumbnails ------------------------------------------------------ */
.piece-thumb {
  width: 46px; height: 60px; object-fit: cover; border-radius: .3rem;
  border: 1px solid var(--potli-border); background: #efe9f1;
}
.piece-thumb-lg { width: 100%; max-width: 320px; border-radius: .5rem; border: 1px solid var(--potli-border); }
.thumb-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--potli-muted); font-size: 1rem;
}

/* --- status badges: shape + text, never colour alone ----------------------- */
.status-badge { font-size: .72rem; font-weight: 600; padding: .28rem .5rem; border-radius: 999px; white-space: nowrap; }

/* --- billing / scanning ---------------------------------------------------- */
.scan-input {
  font-size: 1.15rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; padding: .75rem 1rem;
}
.scan-input:focus { border-color: var(--potli-plum); box-shadow: 0 0 0 .25rem rgba(107, 45, 91, .18); }
.scan-status { min-height: 1.5rem; font-weight: 500; }
.bill-line { border-bottom: 1px solid var(--potli-border); }
.bill-total-row { font-size: 1.1rem; font-weight: 650; }
.big-action { min-height: 3rem; font-size: 1.05rem; font-weight: 600; }

/* --- camera ----------------------------------------------------------------- */
.camera-stage { background: #1b1420; border-radius: .5rem; overflow: hidden; position: relative; }
.camera-stage video, .camera-stage canvas { width: 100%; display: block; max-height: 60vh; object-fit: contain; }
.camera-controls { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

/* --- charts ------------------------------------------------------------------ */
.chart-shell { position: relative; width: 100%; }
.chart-shell svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: var(--potli-muted); }
.chart-legend .swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; margin-right: .3rem; }

/* --- misc --------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--potli-muted); }
.empty-state .bi { font-size: 2rem; opacity: .5; display: block; margin-bottom: .5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.piece-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: .02em; }
.text-muted-sm { color: var(--potli-muted); font-size: .82rem; }
.required::after { content: " *"; color: #b02a37; }
.insufficient-data { background: #fff8e6; border-left: 3px solid var(--potli-gold); padding: .5rem .75rem; font-size: .82rem; }
.reason-chip {
  display: inline-block; background: var(--potli-plum-soft); color: var(--potli-plum);
  border-radius: 999px; padding: .12rem .5rem; font-size: .72rem; margin: .1rem .15rem 0 0;
}
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.5rem; border-left: 2px solid var(--potli-border); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -.42rem; top: .25rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--potli-plum); border: 2px solid #fff;
}
.filter-bar { background: #fff; border: 1px solid var(--potli-border); border-radius: .5rem; padding: .85rem; }
.busy { opacity: .55; pointer-events: none; }

/* Focus visibility is never removed - keyboard operation is a requirement. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(107, 45, 91, .45); outline-offset: 1px;
}

@media (max-width: 767.98px) {
  .kpi-card .kpi-value { font-size: 1.25rem; }
  .table-responsive-stack thead { display: none; }
}

@media print {
  .no-print, .potli-navbar, .filter-bar { display: none !important; }
  body { background: #fff; }
  .card { border: none; }
}