/* ---------------------------------------------------------------------------
   Self-hosted fonts (work fully offline)
   Fraunces -> display/headings (elegant serif, fits a joalheria)
   Inter    -> body/UI text
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-400.ttf") format("truetype");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.ttf") format("truetype");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-700.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.ttf") format("truetype");
}

:root {
  --bg: #f6f3ee;
  --bg-tint: #efe9df;
  --panel: #ffffff;
  --ink: #1f262b;
  --muted: #6c757c;
  --line: #e7e1d6;
  --line-strong: #d8d1c4;

  --primary: #146c5f;
  --primary-dark: #0f5047;
  --primary-soft: #e2efea;

  --gold: #b08a45;
  --gold-dark: #927330;
  --gold-soft: #f3ead6;

  --danger: #a64036;
  --danger-soft: #f7e0dc;
  --warning: #b07417;
  --warning-soft: #f8ecd6;
  --blue: #275d86;
  --blue-soft: #dde9f2;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(24, 38, 35, 0.04), 0 1px 3px rgba(24, 38, 35, 0.06);
  --shadow: 0 6px 20px rgba(24, 46, 41, 0.08);
  --shadow-lg: 0 14px 34px rgba(24, 46, 41, 0.14);
  --ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 540px at 88% -8%, rgba(176, 138, 69, 0.06), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(20, 108, 95, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

a {
  color: inherit;
}

::selection {
  background: var(--primary-soft);
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  align-items: center;
  background: linear-gradient(180deg, #1a2226 0%, #131a1d 100%);
  border-bottom: 1px solid rgba(176, 138, 69, 0.28);
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  background: linear-gradient(95deg, #e9d6a8 0%, #c9a86a 55%, #b08a45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topbar-start,
.primary-nav {
  align-items: center;
  display: flex;
}

.topbar-start {
  gap: 28px;
  min-width: 0;
}

.primary-nav {
  gap: 6px;
}

.primary-nav a {
  border-radius: 8px;
  color: #dfe5e3;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 11px;
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}

.primary-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.topbar-actions {
  align-items: center;
  display: flex;
  gap: 16px;
}

.nav-toggle {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.nav-toggle-btn {
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  transition: background var(--ease);
}

.nav-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-toggle-btn span {
  background: #fff;
  border-radius: 2px;
  display: block;
  height: 3px;
  transition: transform var(--ease);
  width: 26px;
}

.nav {
  background: #1d2428;
  border: 1px solid #2c343a;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: 10px;
  position: absolute;
  right: 16px;
  top: calc(100% - 6px);
  z-index: 40;
}

.nav-toggle:checked ~ .nav {
  display: flex;
}

.nav a,
.link-button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #eef1f0;
  cursor: pointer;
  font: inherit;
  padding: 11px 13px;
  text-align: left;
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  width: 100%;
}

.nav a:hover,
.nav .link-button:hover {
  background: #2b343a;
  color: #fff;
}

.nav-stage {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.nav-count {
  background: rgba(176, 138, 69, 0.22);
  border-radius: 999px;
  color: #e9d6a8;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  padding: 2px 8px;
  text-align: center;
}

/* ------------------------------------------------------------------ page */
.page {
  margin: 0 auto;
  max-width: 1180px;
  padding: 32px 20px 64px;
}

.page-head {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.page-head-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.eyebrow {
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.2px;
}

h1 {
  font-size: 33px;
  font-weight: 600;
}

h2 {
  font-size: 22px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

/* ----------------------------------------------------------------- grids */
.metric-grid,
.state-grid,
.form-grid,
.detail-grid {
  display: grid;
  gap: 16px;
}

.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 28px;
}

/* Purificação keeps the 5% deduction visually separate from the result pair. */
.purification-preview {
  display: grid;
  gap: 20px;
}

.purification-result-main-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.purification-fee-row {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.purification-fee-row p {
  margin: 0 0 10px;
}

.purification-fee-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 50%;
}

.metric,
.panel,
.job-card,
.auth-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- metrics */
.metric {
  color: inherit;
  display: block;
  overflow: hidden;
  padding: 20px 20px 20px 22px;
  position: relative;
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

a.metric:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

a.metric.warning:hover {
  border-color: var(--warning);
}

a.metric.danger-metric:hover {
  border-color: var(--danger);
}

.metric span,
.metric strong {
  text-decoration: none;
}

.metric::before {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-radius: 0 4px 4px 0;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.metric strong {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
}

.metric.warning::before {
  background: linear-gradient(180deg, var(--warning) 0%, #94600f 100%);
}

.metric.warning strong {
  color: var(--warning);
}

.metric.danger-metric::before {
  background: linear-gradient(180deg, var(--danger) 0%, #842f27 100%);
}

.metric.danger-metric strong {
  color: var(--danger);
}

/* -------------------------------------------------------------- sections */
.section {
  margin-top: 34px;
}

.section-title {
  align-items: baseline;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
  content: "";
  flex: 1;
  height: 1px;
}

.section-help {
  color: var(--muted);
  margin: -4px 0 14px;
}

/* ------------------------------------------------------------- job cards */
.job-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.job-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease), background-color var(--ease);
}

.job-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--line-strong);
  transition: background-color var(--ease);
}

/* ------------------------------------------------ sticky note stage colors */
/* 1. Design: soft lavender sticky note */
.job-card.card-state-design,
.job-card.card-state-design_approval {
  background-color: #f4effe;
  border-color: #dcd0ff;
}
.job-card.card-state-design::before,
.job-card.card-state-design_approval::before {
  background-color: #7c3aed;
}
.job-card.card-state-design .card-state,
.job-card.card-state-design_approval .card-state {
  color: #6d28d9;
  font-weight: 700;
}

/* 2. Cast / Impressao-Fundicao: soft sunshine yellow sticky note */
.job-card.card-state-casting,
.job-card.card-state-casting_approval,
.casting-queue-card {
  background-color: #fffbea;
  border-color: #fde68a;
}
.job-card.card-state-casting::before,
.job-card.card-state-casting_approval::before,
.casting-queue-card::before {
  background-color: #d97706;
}
.job-card.card-state-casting .card-state,
.job-card.card-state-casting_approval .card-state,
.casting-queue-card .card-state {
  color: #b45309;
  font-weight: 700;
}

/* 3. Ourives / Acabamento: soft mint green sticky note */
.job-card.card-state-goldsmith,
.job-card.card-state-goldsmith_approval {
  background-color: #ebfef5;
  border-color: #a7f3d0;
}
.job-card.card-state-goldsmith::before,
.job-card.card-state-goldsmith_approval::before {
  background-color: #059669;
}
.job-card.card-state-goldsmith .card-state,
.job-card.card-state-goldsmith_approval .card-state {
  color: #047857;
  font-weight: 700;
}

/* 4. Polimento: soft rose pink sticky note */
.job-card.card-state-polishing,
.job-card.card-state-polishing_approval {
  background-color: #fff1f2;
  border-color: #fecdd3;
}
.job-card.card-state-polishing::before,
.job-card.card-state-polishing_approval::before {
  background-color: #e11d48;
}
.job-card.card-state-polishing .card-state,
.job-card.card-state-polishing_approval .card-state {
  color: #be123c;
  font-weight: 700;
}

/* 5. Cravacao terceirizada: soft turquoise cyan sticky note */
.job-card.card-state-stone_setting_external {
  background-color: #ecfeff;
  border-color: #a5f3fc;
}
.job-card.card-state-stone_setting_external::before {
  background-color: #0891b2;
}
.job-card.card-state-stone_setting_external .card-state {
  color: #0e7490;
  font-weight: 700;
}

/* 6. Rodio terceirizado: soft coral peach sticky note */
.job-card.card-state-rhodium_external {
  background-color: #fff7ed;
  border-color: #fed7aa;
}
.job-card.card-state-rhodium_external::before {
  background-color: #ea580c;
}
.job-card.card-state-rhodium_external .card-state {
  color: #c2410c;
  font-weight: 700;
}

/* Other workflow states */
.job-card.card-state-received,
.job-card.card-state-quote_pending,
.job-card.card-state-quote_rejected {
  background-color: #faf7f2;
  border-color: #e8dfd1;
}
.job-card.card-state-received::before,
.job-card.card-state-quote_pending::before,
.job-card.card-state-quote_rejected::before {
  background-color: #b08a45;
}

.job-card.card-state-customer_final_approval,
.job-card.card-state-ready_delivery {
  background-color: #f0fdfa;
  border-color: #99f6e4;
}
.job-card.card-state-customer_final_approval::before,
.job-card.card-state-ready_delivery::before {
  background-color: #0d9488;
}
.job-card.card-state-customer_final_approval .card-state,
.job-card.card-state-ready_delivery .card-state {
  color: #0f766e;
  font-weight: 700;
}

.job-card.card-state-delivered {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}
.job-card.card-state-delivered::before {
  background-color: #94a3b8;
}



.card-top {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.card-id {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card h3 {
  font-size: 15.5px;
  margin: 0;
}

.card-foot {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  margin-top: auto;
}

.card-foot-right {
  align-items: center;
  display: flex;
  gap: 8px;
}

.avatar {
  align-items: center;
  background: var(--primary-soft);
  border-radius: 50%;
  color: var(--primary-dark);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  letter-spacing: 0.5px;
  width: 22px;
}

/* The title link stretches to cover the whole card, so a click anywhere on the
   card opens the service. Other links (Ver historico) sit above it. */
.job-card .card-link::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.job-card .mini-link {
  position: relative;
  z-index: 2;
}

.job-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.job-card h3 a {
  text-decoration: none;
  transition: color var(--ease);
}

.job-card h3 a:hover {
  color: var(--primary-dark);
}

.job-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.card-sub {
  font-size: 12px;
}

.card-meta,
.badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ---------------------------------------------------------------- badges */
.badge {
  background: var(--bg-tint);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 3px 9px;
}

.status-delayed,
.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-in_progress {
  background: var(--blue-soft);
  color: var(--blue);
}

.status-ready,
.status-done {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.badge.urgent {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.overdue {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge.edited {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Banner shown to a worker when the boss edited their in-progress job. */
.edited-callout {
  border-left: 4px solid var(--blue);
  margin-bottom: 18px;
}

.edited-callout h2 {
  align-items: center;
  display: flex;
  gap: 10px;
}

.head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.edit-hint {
  color: var(--muted);
  margin: -6px 0 16px;
  max-width: 70ch;
}

/* ---------------------------------------------------- metal badges */
/* Solid, bold, uppercase chips so every worker reads the metal + whose it is
   at first glance. Each metal and source gets its own distinct, saturated hue. */
.metal-badge {
  align-items: center;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  text-transform: uppercase;
}
.metal-badge.metal-ouro_branco {
  background: #5b6571;
}
.metal-badge.metal-ouro_amarelo {
  background: #b0851f;
}
.metal-badge.metal-ouro_rose {
  background: #b76e79;
}
.metal-badge.metal-prata {
  background: #3d7a8a;
}
/* Whose metal: the shop's is calm green; the client's is loud red so it never gets mixed up. */
.metal-badge.metal-source-loja {
  background: var(--primary);
}
.metal-badge.metal-source-cliente {
  background: var(--danger);
}

/* Finishing metal loss: a chip in the details, a loud callout when the boss receives. */
.loss-badge {
  background: var(--danger);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 11px;
}
.loss-callout {
  align-items: center;
  background: var(--warning-soft);
  border: 1.5px solid var(--warning);
  border-radius: var(--radius-sm);
  color: var(--warning);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  padding: 12px 14px;
}
.loss-callout strong {
  font-size: 17px;
}

/* ---------------------------------------------------- quebra report */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quebra-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.quebra-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: inherit;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease);
}
.quebra-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.quebra-name {
  display: block;
  font-weight: 600;
}
.quebra-sub {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
.quebra-empty {
  color: var(--muted);
  font-size: 13px;
}

/* "Metal de" (Loja/Cliente) as a segmented pill toggle instead of bare radios. */
#id_job-metal_source {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
#id_job-metal_source > div {
  flex: 1;
}
#id_job-metal_source label {
  align-items: center;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 12px 14px;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
#id_job-metal_source input {
  accent-color: var(--primary);
  margin: 0;
}
#id_job-metal_source label:hover {
  border-color: var(--primary);
}
#id_job-metal_source label:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Boolean fields (e.g. "Aguardar aprovacao/orcamento do cliente") render as a
   full-width clickable row with a proper sliding toggle instead of a lonely
   little checkbox floating under its label. */
.check-field-wrap {
  margin: 0 0 12px;
}
.check-field {
  align-items: center;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 14px;
  justify-content: space-between;
  padding: 13px 16px;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.check-field:hover {
  border-color: var(--primary);
}
.check-field:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.check-field-text {
  flex: 1;
}
/* Turn the native checkbox into a pill switch (track + sliding thumb). */
.check-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--line-strong);
  border: none;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  flex: 0 0 auto;
  height: 26px;
  margin: 0;
  padding: 0;
  position: relative;
  transition: background var(--ease);
  width: 46px;
}
.check-field input[type="checkbox"]::before {
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform var(--ease);
  width: 20px;
}
.check-field input[type="checkbox"]:checked {
  background: var(--primary);
}
.check-field input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}
.check-field input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

/* ----------------------------------------------------------- forms/panel */
.form-grid {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Desktop keeps the reference below Cliente; mobile makes it the final panel. */
.job-create-grid {
  grid-template-areas:
    "customer piece"
    "reference piece";
}

.job-create-customer { grid-area: customer; }
.job-create-piece { grid-area: piece; }
.job-create-reference { grid-area: reference; }

/* A vertical stack of panels forming one grid column. Used so a short panel and
   the panel under it sit together, independent of the tall panel beside them. */
.form-col {
  align-content: start;
  display: grid;
  gap: 16px;
}

.filter-bar {
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  grid-template-columns: 1.4fr 1fr 160px 160px auto auto;
  margin-bottom: 22px;
  padding: 18px;
}

.search-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.search-bar input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
}

.filter-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------- kiosk */
.kiosk-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 18px;
}

.kiosk-card {
  margin: 0;
}

.kiosk-card-btn {
  align-items: flex-start;
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 26px 24px;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  width: 100%;
}

.kiosk-card-btn:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.kiosk-name {
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
}

.kiosk-pending {
  color: var(--muted);
  font-size: 15px;
}

.kiosk-fresh {
  align-self: flex-start;
  background: var(--warning-soft);
  border-radius: 999px;
  color: var(--warning);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 14px;
}

.kiosk-card.fresh .kiosk-card-btn {
  background: var(--warning-soft);
  border-color: var(--warning);
  animation: kiosk-pulse 1.1s ease-in-out infinite;
}

@keyframes kiosk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 116, 23, 0.0); }
  50% { box-shadow: 0 0 0 6px rgba(176, 116, 23, 0.18); }
}

.kiosk-section {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  margin: 4px 0 12px;
}

.kiosk-hint {
  color: var(--muted);
  text-align: center;
}

/* The kiosk page itself cannot set Android's hardware brightness. This 90%
   black scrim gives the board an approximately 10% visual idle level, while
   the JS wake lock keeps the plugged-in display available for a single tap. */
.kiosk-wake-scrim {
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  border: 0;
  color: rgba(255, 255, 255, 0.56);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 16px;
  inset: 0;
  justify-content: center;
  letter-spacing: 0.01em;
  position: fixed;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  width: 100%;
  z-index: 30;
}

@keyframes kiosk-idle-clock {
  to { opacity: 1; }
}

/* The timer lives in CSS rather than a background JS timeout. Chrome keeps
   this animation reliable for an installed, visible Android kiosk PWA. */
.kiosk-idle-clock {
  animation: kiosk-idle-clock 60s step-end forwards;
}

.kiosk-idle-active {
  opacity: 1;
  pointer-events: auto;
}

/* Shown only while the browser still blocks audio. Sits at the bottom so it
   never covers a worker's name. */
.sound-arm {
  background: var(--warning);
  border: none;
  border-radius: 999px;
  bottom: 16px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  left: 50%;
  min-height: 56px;
  padding: 0 26px;
  position: fixed;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  z-index: 20;
}

.detail-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.panel,
.auth-panel {
  padding: 22px;
}

.full {
  grid-column: 1 / -1;
}

.form-stack {
  display: grid;
  gap: 14px;
}

.form-stack p,
.panel p {
  margin: 0 0 12px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  padding: 11px 12px;
  transition: border-color var(--ease), box-shadow var(--ease);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

textarea {
  resize: vertical;
}

textarea[data-autogrow] {
  min-height: 76px;
  overflow-y: hidden;
}

.multiline-title {
  white-space: pre-line;
}

#id_jobs {
  display: grid;
  gap: 8px;
}

#id_jobs label {
  align-items: center;
  display: flex;
  gap: 8px;
}

#id_jobs input {
  width: auto;
}

/* --------------------------------------------------------------- buttons */
.button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}

.button:hover {
  border-color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.button:active {
  transform: translateY(1px);
}

.button.primary {
  background: linear-gradient(180deg, #1a7e6f 0%, var(--primary) 60%, var(--primary-dark) 100%);
  border-color: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(15, 80, 71, 0.28);
  color: #fff;
}

.button.primary:hover {
  background: linear-gradient(180deg, #198877 0%, var(--primary-dark) 100%);
  box-shadow: 0 6px 16px rgba(15, 80, 71, 0.32);
}

.button.danger {
  background: var(--danger);
  border-color: #8c352c;
  color: #fff;
}

.button.danger:hover {
  background: #8c352c;
}

.button.warning {
  background: var(--warning);
  border-color: #8f5d12;
  color: #fff;
}

.button.warning:hover {
  background: #8f5d12;
}

.button.touch {
  font-size: 16px;
  min-height: 64px;
  width: 100%;
}

.button-stack {
  display: grid;
  gap: 14px;
}

.button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Two form fields sharing one row (e.g. the two cartucho numbers). */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.field-row > p {
  flex: 1 1 200px;
}

/* Prazo (due date) field: the input keeps its normal height; the arrow and the
   +5d/+10d buttons sit beside it on the same row. */
.date-field {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

/* Short, fixed width — just enough for dd/mm/aaaa; override input { width: 100% }. */
.date-field input {
  flex: 0 0 auto;
  width: 130px;
}

/* Small up/down arrows tucked next to the date (the ^dd nudge). */
.date-stepper {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
}

.date-step {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-size: 9px;
  height: 19px;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.date-step:hover {
  border-color: var(--muted);
}

.date-step:active {
  transform: translateY(1px);
}

/* Keep the quick buttons compact even under the mobile .button width rule. */
.date-field .date-quick-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  width: auto;
}

.started-note {
  color: var(--primary-dark);
  font-weight: 500;
  margin: 0;
}

.reject-box {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* --------------------------------------------------------------- details */
.details {
  display: grid;
  gap: 12px;
  grid-template-columns: 120px 1fr;
}

.details dt {
  color: var(--muted);
  font-weight: 600;
}

.details dd {
  margin: 0;
}

.attachment-list,
.timeline {
  margin-bottom: 0;
  padding-left: 20px;
}

.attachment-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding-left: 0;
}

.attachment-item {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 12px;
  padding: 10px;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.attachment-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.attachment-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: block;
  height: 86px;
  object-fit: cover;
  width: 86px;
}

.attachment-photo-trigger,
.attachment-photo-label {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
  padding: 0;
}

.attachment-photo-trigger {
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.attachment-photo-label {
  color: var(--primary-dark);
  text-align: left;
}

.attachment-photo-label:hover,
.attachment-photo-label:focus-visible {
  text-decoration: underline;
}

body.photo-viewer-open {
  overflow: hidden;
}

.photo-viewer[hidden] {
  display: none;
}

.photo-viewer {
  align-items: center;
  background: rgba(10, 12, 12, 0.94);
  cursor: zoom-out;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  position: fixed;
  z-index: 1000;
}

.photo-viewer-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  max-width: min(1200px, calc(100vw - 24px));
  pointer-events: none;
}

.photo-viewer-image {
  display: block;
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
  max-width: 100%;
  object-fit: contain;
}

.photo-viewer-caption {
  color: #ffffff;
  font-size: 13px;
  margin: 0;
  max-width: min(680px, calc(100vw - 80px));
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-viewer-close {
  align-items: center;
  appearance: none;
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  color: #202525;
  cursor: pointer;
  display: flex;
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  height: 42px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  width: 42px;
  z-index: 1;
}

.photo-viewer-close:hover,
.photo-viewer-close:focus-visible {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 12px rgba(0, 0, 0, 0.45);
}

.timeline {
  border-left: 2px solid var(--line-strong);
  list-style: none;
  margin-left: 6px;
  padding-left: 18px;
}

.timeline li {
  margin-bottom: 16px;
  position: relative;
}

.timeline li::before {
  background: var(--primary);
  border: 2px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
  content: "";
  height: 9px;
  left: -24px;
  position: absolute;
  top: 5px;
  width: 9px;
}

.timeline span,
.attachment-list span {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

/* ------------------------------------------------ multi-file upload & previews */
.file-upload-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.file-upload-btn {
  align-items: center;
  background: var(--panel-muted, #f8f9fa);
  border: 2px dashed var(--line-strong, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 14px 16px;
  position: relative;
  transition: all var(--ease, 0.15s ease);
  color: var(--text);
  user-select: none;
}

.file-upload-btn:hover {
  background: var(--panel);
  border-color: var(--primary, #0f766e);
  color: var(--primary, #0f766e);
}

.file-upload-btn input[type="file"] {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.file-upload-icon {
  font-size: 1.25rem;
}

.file-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.file-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.file-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-preview-item .file-preview-name {
  font-size: 11px;
  padding: 4px;
  text-align: center;
  word-break: break-all;
  color: var(--muted);
}

.file-preview-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.file-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--ease, 0.15s ease), background-color var(--ease, 0.15s ease);
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.file-remove-btn:hover,
.file-remove-btn:focus {
  background: #b91c1c;
  transform: scale(1.15);
}

/* -------------------------------- worker note & stage attachments callouts */
.worker-note-callout {
  background: rgba(15, 118, 110, 0.08);
  border-left: 4px solid var(--primary, #0f766e);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.worker-note-callout .callout-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary, #0f766e);
  margin-bottom: 4px;
}

.worker-note-callout .callout-text {
  font-size: 15px;
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.stage-attachments-callout {
  margin-bottom: 14px;
}

.stage-attachments-callout .callout-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}

.stage-attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-attachment-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-muted);
  transition: transform var(--ease);
  cursor: zoom-in;
  padding: 0;
}

.stage-attachment-thumb:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

.stage-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------- state grids */
.state-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.workload-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.workload-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.workload-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.compact .job-card {
  align-items: stretch;
  flex-direction: column;
}

.mini-link {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.mini-link:hover {
  text-decoration: underline;
}

.state-pill {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  padding: 16px;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.state-pill span {
  font-weight: 500;
}

.state-pill strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.state-pill.link {
  text-decoration: none;
}

.state-pill.link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.state-pill.link strong {
  color: var(--primary-dark);
}

/* ------------------------------------------------------------------ auth */
.auth-panel {
  box-shadow: var(--shadow);
  margin: 72px auto;
  max-width: 420px;
}

/* -------------------------------------------------------------- messages */
.messages {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.message {
  background: var(--blue-soft);
  border: 1px solid transparent;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}

.message.error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
}

.message.success {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}

.message.warning {
  background: var(--warning-soft);
  border-left-color: var(--warning);
}

.empty {
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

/* ------------------------------------------------------------------ team */
.team-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-item {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 13px 15px;
  transition: border-color var(--ease);
}

.team-item:hover {
  border-color: var(--line-strong);
}

.team-item span {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.team-item.inactive {
  opacity: 0.55;
}

.team-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

/* --------------------------------------------------------- notifications */
.nav-bell {
  align-items: center;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  padding: 8px;
  position: relative;
  transition: background var(--ease);
}

.nav-bell:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-bell .bell-icon {
  display: block;
}

.nav-badge {
  align-items: center;
  background: var(--danger);
  border: 1.5px solid #131a1d;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  line-height: 1;
  min-width: 19px;
  padding: 0 5px;
  position: absolute;
  right: 0;
  top: 0;
}

.notification-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-item a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 6px;
  padding: 15px 17px;
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.notification-item a:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.notification-item.unread a {
  border-left: 4px solid var(--gold);
}

.notification-item span {
  color: var(--muted);
  font-size: 13px;
}

/* ----------------------------------------------------------- tablet board */
.tablet-board {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Workers read these at arm's length: everything scales up from the compact
   boss card sizes. */
.tablet-board .job-card {
  align-items: stretch;
  gap: 10px;
  min-height: 160px;
  padding: 18px 20px;
}

.tablet-board .job-card h3 {
  font-size: 22px;
}

.tablet-board .card-id {
  font-size: 15px;
}

.tablet-board .job-card .badge {
  font-size: 14px;
  padding: 6px 12px;
}

.tablet-board .job-card .metal-badge {
  font-size: 14px;
  padding: 6px 12px;
}

.tablet-board .card-foot {
  font-size: 15px;
}

.tablet-board .avatar {
  font-size: 12px;
  height: 28px;
  width: 28px;
}

/* ---------------------------------------------------------- production board
   The whole workshop at a glance: three phase strips (Entrada / Produção /
   Aprovação e entrega), each holding fixed-width columns that share the same
   sticky-note accent as the cards inside them. Column bodies scroll on their
   own so a long queue never stretches the page. Empty columns collapse into a
   quiet sliver instead of a big dashed void.                                 */
.board-summary {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin: 4px 0 0;
}

.board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Focused metric-filter view: a simple responsive grid of only the matching
   jobs, instead of the full phase/column board. */
.board-filtered {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

.board-phase {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(239, 233, 223, 0.5) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  box-shadow: var(--shadow-sm);
}

.board-phase-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 2px 4px 12px;
}

.board-phase-label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.board-phase-count {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
}

.board-cols {
  display: grid;
  gap: 12px;
  grid-auto-columns: minmax(240px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.board-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  max-height: 68vh;
  min-height: 140px;
  overflow: hidden;
  scroll-snap-align: start;
}

.board-col.is-empty {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.board-col-head {
  align-items: center;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  letter-spacing: 0.4px;
  padding: 10px 12px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.board-col-head::before {
  background: var(--line-strong);
  border-radius: 3px;
  content: "";
  flex: 0 0 auto;
  height: 14px;
  width: 4px;
}

.board-col-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-col-count {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  padding: 1px 8px;
  text-align: center;
}

.board-col.is-empty .board-col-count {
  color: var(--muted);
  opacity: 0.6;
}

.board-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
}

.board-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  margin: 0;
  opacity: 0.7;
  padding: 6px 4px;
  text-align: center;
}

/* Compact card variant inside board columns so a full queue fits without
   dominating the screen. The sticky-note colors from the flat card styles
   still come through untouched.

   The stack behaves like a rolodex: each card is clipped to a slim header
   strip in normal flow so many fit at once. On hover/focus a single card is
   PULLED FORWARD (scale + translate) and its content extends over the cards
   below it — the flow doesn't shift, so the deck stays put while just the
   picked card floats to the front. Reduced-motion and touch users get the
   whole card by default (no reveal to interact with).                       */
.board-cards {
  /* Make sure the pulled-forward card can extend a hair beyond the visible
     scroll frame on the sides without getting hard-clipped mid-shadow.      */
  padding: 10px 12px;
}

.board .job-card {
  cursor: pointer;
  flex: 0 0 auto;
  gap: 4px;
  height: 52px;
  overflow: hidden;
  padding: 10px 12px;
  position: relative;
  transform-origin: 50% 100%;
  transition:
    height 300ms cubic-bezier(0.34, 1.32, 0.5, 1),
    transform 300ms cubic-bezier(0.34, 1.32, 0.5, 1),
    box-shadow 260ms ease-out,
    border-color var(--ease);
  will-change: height, transform;
  z-index: 0;
}

/* A soft fade at the bottom of the collapsed strip hints that there's more
   content tucked under the next card — the "there's info hidden here" cue
   that motivates hovering.                                                  */
.board .job-card::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 100%);
  bottom: 0;
  content: "";
  height: 14px;
  left: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 180ms ease;
}

.board .job-card:hover,
.board .job-card:focus-within {
  /* Enough headroom for the tallest realistic card while still capping the
     pull so the user only sees the picked card and doesn't lift the whole
     pile with it. The transform is the lift itself — a translate + tiny
     scale gives that "pulled from the stack" pop without spinning content
     out of proportion.                                                      */
  height: 210px;
  box-shadow:
    0 28px 52px -14px rgba(24, 46, 41, 0.36),
    0 10px 22px -8px rgba(24, 46, 41, 0.22),
    0 2px 4px rgba(24, 46, 41, 0.08);
  transform: translateY(-14px) scale(1.045);
  z-index: 20;
}

.board .job-card:hover::after,
.board .job-card:focus-within::after {
  opacity: 0;
}

/* The deeper rows fade in slightly after the pull begins so the reveal
   feels deliberate instead of everything appearing at frame one.            */
.board .job-card .card-meta,
.board .job-card .card-foot,
.board .job-card .card-sub {
  opacity: 0;
  transition: opacity 200ms ease 90ms;
}

.board .job-card:hover .card-meta,
.board .job-card:focus-within .card-meta,
.board .job-card:hover .card-foot,
.board .job-card:focus-within .card-foot,
.board .job-card:hover .card-sub,
.board .job-card:focus-within .card-sub {
  opacity: 1;
}

.board .job-card h3 {
  font-size: 15px;
  line-height: 1.25;
}

.board .card-id,
.board .card-foot,
.board .card-meta {
  font-size: 11.5px;
}

.board .card-meta {
  gap: 4px;
}

.board .badge,
.board .metal-badge {
  font-size: 10.5px;
  padding: 2px 7px;
}

.board .avatar {
  font-size: 10px;
  height: 22px;
  width: 22px;
}

/* Users who ask the OS to reduce motion get instant open/close and no lift
   so the reveal remains functional without the sweep.                       */
@media (prefers-reduced-motion: reduce) {
  .board .job-card,
  .board .job-card .card-meta,
  .board .job-card .card-foot,
  .board .job-card .card-sub {
    transition: none;
  }

  .board .job-card:hover,
  .board .job-card:focus-within {
    transform: none;
  }
}

/* Touch devices have no hover, so we can't rely on it to reveal detail.
   Show every card fully open there instead of stranding content behind an
   interaction that never fires.                                             */
@media (hover: none) {
  .board .job-card {
    height: auto;
  }

  .board .job-card::after {
    display: none;
  }

  .board .job-card .card-meta,
  .board .job-card .card-foot,
  .board .job-card .card-sub {
    opacity: 1;
  }
}

/* Per-column head accents match the sticky-note colors used on the cards
   inside each column, so the eye can lock onto a stage at a glance.        */
.board-col-quote_pending .board-col-head {
  background: #faf7f2;
}
.board-col-quote_pending .board-col-head::before {
  background: #b08a45;
}

.board-col-design .board-col-head { background: #f4effe; }
.board-col-design .board-col-head::before { background: #7c3aed; }
.board-col-design .board-col-label { color: #5b21b6; }

.board-col-casting .board-col-head { background: #fffbea; }
.board-col-casting .board-col-head::before { background: #d97706; }
.board-col-casting .board-col-label { color: #92400e; }

.board-col-goldsmith .board-col-head { background: #ebfef5; }
.board-col-goldsmith .board-col-head::before { background: #059669; }
.board-col-goldsmith .board-col-label { color: #047857; }

.board-col-stone_setting_external .board-col-head { background: #ecfeff; }
.board-col-stone_setting_external .board-col-head::before { background: #0891b2; }
.board-col-stone_setting_external .board-col-label { color: #0e7490; }

.board-col-polishing .board-col-head { background: #fff1f2; }
.board-col-polishing .board-col-head::before { background: #e11d48; }
.board-col-polishing .board-col-label { color: #be123c; }

.board-col-rhodium_external .board-col-head { background: #fff7ed; }
.board-col-rhodium_external .board-col-head::before { background: #ea580c; }
.board-col-rhodium_external .board-col-label { color: #c2410c; }

.board-col-customer_final_approval .board-col-head,
.board-col-ready_delivery .board-col-head {
  background: #f0fdfa;
}
.board-col-customer_final_approval .board-col-head::before,
.board-col-ready_delivery .board-col-head::before {
  background: #0d9488;
}
.board-col-customer_final_approval .board-col-label,
.board-col-ready_delivery .board-col-label {
  color: #0f766e;
}

/* On phones the phase strip becomes a single stacked column instead of a
   sideways scroll — small screens can't do 6 columns comfortably.          */
@media (max-width: 760px) {
  .board-cols {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .board-col {
    max-height: none;
  }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 760px) {
  .topbar,
  .page-head,
  .job-card {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-start {
    flex-wrap: wrap;
    gap: 8px 18px;
    width: 100%;
  }

  .primary-nav a {
    padding: 7px 9px;
  }

  .metric-grid,
  .form-grid,
  .filter-bar,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .job-create-grid {
    grid-template-areas:
      "customer"
      "piece"
      "reference";
  }

  h1 {
    font-size: 29px;
  }

  .nav {
    gap: 8px;
  }

  .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- charts
   One visual system behind the four history charts: SVG axes and gridlines,
   a single dark floating tooltip, ranked bars, and staggered entrance
   animations. Series colours arrive inline from the payload built in
   workflow/views.py (METAL_LEGEND), so there are no per-metal CSS classes to
   keep in sync with Python.                                                */

.chart-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 16px;
}

.chart-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-sub {
  color: var(--muted);
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 3px;
}

/* Headline number for the chart, filled in by the JS and kept in sync with the
   legend toggles — the answer before you read the shapes. */
.chart-metric {
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 5px 11px;
  white-space: nowrap;
}

.chart-metric:empty {
  display: none;
}

/* Explanatory line above a chart/list (also used by the quebra dashboard). */
.chart-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 0 2px 8px;
}

.chart-empty {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
  padding: 44px 0;
  text-align: center;
}

/* --------------------------------------------------------------- legend */
.chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legend-item {
  align-items: center;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 7px;
}

.swatch {
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
  height: 11px;
  width: 11px;
}

.legend-toggle {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  transition: border-color var(--ease), background var(--ease), opacity var(--ease);
}

.legend-toggle:hover {
  border-color: var(--line-strong);
}

.legend-count {
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 1px 6px;
}

.legend-toggle.is-off {
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  opacity: 0.55;
}

.legend-toggle.is-off .swatch {
  filter: grayscale(1);
}

/* ------------------------------------------------------- shared SVG parts */
.chart-svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.chart-svg .grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-svg .axis-base {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.chart-svg .axis-x,
.chart-svg .axis-y {
  fill: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chart-svg .axis-y {
  text-anchor: end;
}

/* The dashed average line: a benchmark, so it stays quieter than the data. */
.chart-svg .guide {
  stroke: var(--gold);
  stroke-dasharray: 5 5;
  stroke-width: 1;
  opacity: 0.75;
}

.chart-svg .guide-label {
  fill: var(--gold-dark);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.chart-svg .chart-hit,
.chart-svg .col-hit {
  fill: transparent;
}

.chart-svg .chart-hit {
  cursor: crosshair;
}

/* ------------------------------------------------- chart 1: stacked columns */
.chart-svg .col {
  transition: opacity 160ms ease;
}

/* Hovering one month mutes the rest so the eye locks onto it. */
.chart-svg .cols.has-active .col:not(.is-active) {
  opacity: 0.3;
}

.chart-svg .col-stack {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.chart-svg.is-entering .col-stack {
  transform: scaleY(0);
}

/* Hairline between stacked metals so two similar tones stay countable. */
.chart-svg .col-seg {
  stroke: var(--panel);
  stroke-width: 0.75;
}

.chart-svg .col-blank {
  fill: var(--line-strong);
}

.chart-svg .col-value {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --------------------------------------------------- chart 2: line/area */
.line-svg .area {
  pointer-events: none;
}

.line-svg .line-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.line-svg .line-dot {
  stroke: var(--panel);
  stroke-width: 1.5;
}

.line-svg .crosshair {
  stroke: var(--muted);
  stroke-dasharray: 3 4;
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.line-svg .cross-dot {
  stroke: var(--panel);
  stroke-width: 2;
}

/* --------------------------------------------- charts 3 & 4: ranked bars */
.rank-chart {
  display: grid;
  gap: 10px;
}

.rank-row {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: default;
  display: grid;
  gap: 12px;
  grid-template-columns: 118px minmax(0, 1fr) auto 38px;
  padding: 3px 6px;
  transition: background var(--ease);
}

.rank-row:hover {
  background: var(--bg-tint);
}

.rank-label {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  min-width: 0;
}

.rank-dot {
  border-radius: 3px;
  flex: 0 0 auto;
  height: 11px;
  width: 11px;
}

.rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-name sup {
  color: var(--muted);
  font-size: 11px;
}

.rank-track {
  background: var(--bg-tint);
  border-radius: 999px;
  display: block;
  height: 12px;
  overflow: hidden;
}

.rank-fill {
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.rank-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.rank-share {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* Client-owned metal keeps its metal's colour but wears a diagonal hatch, so an
   overlay row is never mistaken for the shop's own stock. Colours arrive inline
   as background-color, which leaves background-image free for the hatch. */
.rank-row.is-overlay .rank-fill,
.rank-row.is-overlay .rank-dot,
.legend-toggle.is-overlay .swatch {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0 3px,
    transparent 3px 6px
  );
}

.rank-row.is-zero {
  opacity: 0.6;
}

.rank-row.is-zero .rank-value {
  color: var(--muted);
  font-weight: 600;
}

.rank-foot {
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  display: flex;
  font-size: 12.5px;
  font-weight: 600;
  justify-content: space-between;
  margin-top: 2px;
  padding: 10px 6px 0;
}

.rank-foot strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- tooltip */
.chart-tip {
  background: #1b2226;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  color: #f2f4f3;
  display: grid;
  font-size: 12.5px;
  gap: 5px;
  left: 0;
  min-width: 154px;
  padding: 10px 12px;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 80;
}

.chart-tip .tip-head {
  color: #c3cbc8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.chart-tip .tip-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.chart-tip .tip-dot {
  border-radius: 3px;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.chart-tip .tip-label {
  flex: 1;
}

.chart-tip .tip-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.chart-tip .tip-total {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #c3cbc8;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 6px;
}

.chart-tip .tip-total b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.chart-tip .tip-none {
  color: #9aa5a2;
  font-style: italic;
}

@media (max-width: 760px) {
  .chart-row {
    grid-template-columns: 1fr;
  }

  .rank-row {
    grid-template-columns: 92px minmax(0, 1fr) auto 34px;
    gap: 8px;
  }

  .chart-head {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-svg .col-stack,
  .rank-fill {
    transition: none;
  }
}

/* ===========================================================================
   History page (/historico/)
   A reporting screen, so it reads top-down as: filters -> KPIs -> charts ->
   the closed-jobs ledger. The ledger is a real data table on desktop (dense,
   scannable, tabular numbers) and collapses into labelled cards on phones.
   =========================================================================== */

.page-sub {
  color: var(--muted);
  font-size: 14.5px;
  margin: 6px 0 0;
  max-width: 62ch;
}

/* ----------------------------------------------------------- filter panel */
.hist-filters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  padding: 18px;
}

.hist-search {
  position: relative;
}

.hist-search-icon {
  align-items: center;
  color: var(--muted);
  display: flex;
  height: 100%;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.hist-search input[type="search"] {
  font-size: 15px;
  min-height: 48px;
  padding-left: 42px;
}

.hist-search input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Flex rather than a fixed grid: the fields keep their natural widths and wrap
   onto a second line as they run out of room, so adding a filter later doesn't
   crush the others. */
.hist-filter-row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hist-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hist-field select {
  min-width: 152px;
}

.hist-field-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.hist-field-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Segmented control — radios styled as one connected switch. */
.segmented {
  background: var(--bg-tint);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.segmented-option {
  display: block;
}

.segmented-option input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.segmented-option span {
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: block;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}

.segmented-option span:hover {
  color: var(--ink);
}

.segmented-option input:checked + span {
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--primary-dark);
}

.segmented-option input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Date range as one visual field with a dash between both inputs. */
.hist-range {
  align-items: center;
  display: flex;
  gap: 8px;
}

.hist-range input {
  width: 150px;
}

.hist-range-sep {
  color: var(--muted);
}

/* Applied filters, each removable on its own. */
.hist-chips {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}

.hist-chips-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.hist-chip {
  align-items: center;
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--primary-dark);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 7px;
  padding: 4px 8px 4px 12px;
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.hist-chip:hover {
  background: #d5e8e1;
  border-color: var(--primary);
}

.hist-chip-x {
  font-size: 15px;
  line-height: 1;
  opacity: 0.65;
}

/* -------------------------------------------------------------------- KPIs */
.hist-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 18px 20px;
  position: relative;
}

.kpi::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 3px;
}

.kpi-gold::before {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
}

.kpi-blue::before {
  background: linear-gradient(180deg, #3c7ba9 0%, var(--blue) 100%);
}

.kpi-danger::before {
  background: linear-gradient(180deg, var(--danger) 0%, #842f27 100%);
}

.kpi-label {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.05;
  margin: 8px 0 6px;
}

.kpi-value em {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  margin-left: 3px;
}

.kpi-caption {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

/* ---------------------------------------------------------- charts panel */
.hist-analytics {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(239, 233, 223, 0.45) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 34px;
  padding: 18px;
}

.hist-analytics-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hist-analytics-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 0;
}

.hist-analytics .chart-row:last-child {
  margin-bottom: 0;
}

.hist-analytics .chart-card h3 {
  font-size: 16.5px;
}

/* The legend lives in this panel's header (chip styling is in the charts
   section, shared with any future chart screen). */
.hist-analytics .chart-legend {
  justify-content: flex-end;
  max-width: 620px;
}

/* Footnote explaining the client-metal overlay marked with * in the bars. */
.hist-analytics-foot {
  color: var(--muted);
  font-size: 12px;
  margin: 4px 2px 0;
}

.hist-analytics-foot span {
  font-weight: 700;
}

/* ------------------------------------------------------------- result table */
.hist-results-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.hist-results-head::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
  content: "";
  flex: 1;
  height: 1px;
}

.hist-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hist-table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* The purification ledger has more columns than the general history table.
   Fixed column proportions and compact actions keep every value on screen. */
.purification-history-table {
  table-layout: fixed;
}

.purification-col-status { width: 8%; }
.purification-col-date { width: 8%; }
.purification-col-name { width: 11%; }
.purification-col-received { width: 9%; }
.purification-col-casting { width: 11%; }
.purification-col-final { width: 12%; }
.purification-col-result-g { width: 8%; }
.purification-col-fee { width: 11%; }
.purification-col-result-pct { width: 8%; }
.purification-col-actions { width: 14%; }

.hist-table.purification-history-table thead th {
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 10px 6px;
  white-space: normal;
}

@media (min-width: 761px) {
  .hist-table.purification-history-table tbody td {
    overflow-wrap: anywhere;
    padding: 11px 6px;
  }
}

.purification-history-table th.num,
.purification-history-table td.num {
  font-size: 12.5px;
}

.purification-actions-heading {
  text-align: right !important;
}

.purification-history-actions {
  gap: 4px;
  justify-content: flex-end;
}

.purification-history-actions form {
  margin: 0;
}

.purification-action-button {
  box-shadow: none;
  font-size: 12px;
  min-height: 32px;
  padding: 0 8px;
  white-space: nowrap;
  width: auto;
}

.button.danger.purification-delete-button {
  background: #fff;
  border-color: #c9867f;
  box-shadow: none;
  color: var(--danger);
}

.button.danger.purification-delete-button:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  box-shadow: none;
}

.hist-table {
  border-collapse: collapse;
  font-size: 13.5px;
  width: 100%;
}

.hist-table thead th {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 11px 16px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.hist-table th.num,
.hist-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.hist-table tbody td {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  vertical-align: middle;
}

.hist-table tbody tr:last-child td {
  border-bottom: 0;
}

.hist-table tbody tr {
  transition: background var(--ease);
}

.hist-table tbody tr:hover {
  background: #fbf9f5;
}

.hist-cartucho {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.hist-title a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.hist-title a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.hist-sub {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 2px;
}

.hist-table .metal-badge + .metal-badge {
  margin-left: 4px;
}

.hist-outcome {
  border-radius: 999px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.hist-outcome.paid {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.hist-outcome.rejected {
  background: var(--danger-soft);
  color: var(--danger);
}

.hist-outcome.legacy {
  background: var(--bg-tint);
  color: var(--muted);
}

/* ---------------------------------------------------------------- pager */
.hist-pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 16px;
}

.hist-pager-info,
.hist-pager-page {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.hist-pager-links {
  align-items: center;
  display: flex;
  gap: 10px;
}

.button.is-disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

/* ------------------------------------------------------------ empty state */
.hist-empty {
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 44px 20px;
  text-align: center;
}

.hist-empty-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.hist-empty-sub {
  color: var(--muted);
  margin: 0 0 8px;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .hist-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hist-kpis {
    grid-template-columns: 1fr;
  }

  .hist-field,
  .hist-field-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .hist-field select {
    min-width: 0;
  }

  .segmented {
    width: 100%;
  }

  .segmented-option {
    flex: 1;
  }

  .segmented-option span {
    text-align: center;
  }

  .hist-range input {
    flex: 1;
    width: auto;
  }

  .hist-field-actions .button {
    flex: 1;
  }

  .hist-analytics-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* The table becomes one labelled card per closed job — every cell keeps its
     header as a prefix so nothing loses meaning on a phone. */
  .hist-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .hist-table thead {
    display: none;
  }

  .hist-table,
  .hist-table tbody,
  .hist-table tr,
  .hist-table td {
    display: block;
    width: 100%;
  }

  .hist-table tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    padding: 6px 14px;
  }

  .hist-table tbody td {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 9px 0;
    text-align: right;
  }

  .hist-table tbody tr td:last-child {
    border-bottom: 0;
  }

  .hist-table tbody td::before {
    color: var(--muted);
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
    text-transform: uppercase;
  }

  .hist-table .hist-sub {
    text-align: right;
  }

  .hist-pager {
    justify-content: center;
  }

  .hist-pager-links {
    width: 100%;
  }

  .hist-pager-links .button {
    flex: 1;
  }

  .hist-pager-page {
    display: none;
  }
}

/* Purificação needs the labelled-card layout a little earlier than the
   general history because its ten columns should never be squeezed or cut. */
@media (min-width: 761px) and (max-width: 900px) {
  .purification-history-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .purification-history-table thead {
    display: none;
  }

  .purification-history-table,
  .purification-history-table tbody,
  .purification-history-table tr,
  .purification-history-table td {
    display: block;
    width: 100%;
  }

  .purification-history-table tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    padding: 6px 14px;
  }

  .hist-table.purification-history-table tbody td {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 9px 0;
    text-align: right;
  }

  .purification-history-table tbody tr td:last-child {
    border-bottom: 0;
  }

  .purification-history-table tbody td::before {
    color: var(--muted);
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
    text-transform: uppercase;
  }
}