.finishing-page { background: radial-gradient(circle at 88% 0, rgba(240,132,67,.08), transparent 25%), #f3f6f3; }
.finishing-topbar { margin-bottom: 18px; }
.owner-access { color: #28745e; background: #e7f3ed; }

.finishing-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.finish-summary-card { display: flex; min-width: 0; min-height: 92px; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e7e3; border-radius: 13px; text-align: left; background: #fff; box-shadow: 0 5px 16px rgba(21,55,44,.04); cursor: pointer; }
.finish-summary-card > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; color: #24745d; background: #e7f3ed; }
.finish-summary-card svg { width: 15px; }
.finish-summary-card small, .finish-summary-card strong, .finish-summary-card p { display: block; }
.finish-summary-card small { color: var(--muted); font-size: var(--font-caption); font-weight: 800; text-transform: uppercase; }
.finish-summary-card strong { margin-top: 2px; font: 800 20px "Manrope", sans-serif; }
.finish-summary-card p { margin: 1px 0 0; color: var(--muted); font-size: var(--font-caption); }
.finish-summary-card.ready > span { color: #bd641f; background: #fff1e4; }
.finish-summary-card.picked > span { color: #6650ae; background: #f0ecff; }
.finish-summary-card.working > span { color: #116f83; background: #e4f4f7; }
.finish-summary-card.done > span { color: #24805c; background: #e2f4eb; }
.finish-summary-card.sample > span { color: #b84d4d; background: #fcebea; }

.panel { margin-bottom: 15px; border: 1px solid #e0e6e2; border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(18,48,39,.045); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 16px 17px 11px; }
.section-kicker { color: var(--orange); font-size: var(--font-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-heading h2 { margin: 3px 0 2px; font: 800 16px "Manrope", sans-serif; }
.section-heading p { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.readonly-badge, .live-badge { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #dce6e1; border-radius: 8px; color: #397762; background: #f5faf7; font-size: var(--font-label); font-weight: 800; white-space: nowrap; }
.readonly-badge svg { width: 12px; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #47c78f; box-shadow: 0 0 0 3px rgba(71,199,143,.15); }

.register-tools { display: grid; grid-template-columns: minmax(250px, 1fr) 190px; gap: 9px; padding: 0 17px 11px; }
.ledger-tools { grid-template-columns: minmax(250px, 1fr) 170px 170px; }
.finish-search { display: flex; height: 38px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #dce4df; border-radius: 9px; background: #fff; }
.finish-search svg { width: 13px; color: #738078; }
.finish-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: var(--font-control); }
.register-tools select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dce4df; border-radius: 9px; color: var(--ink); background: #fff; font-size: var(--font-control); }

.finish-table-wrap { margin: 0 17px 16px; overflow-x: auto; border: 1px solid #e2e7e4; border-radius: 10px; }
.finish-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.finish-table th { padding: 8px 9px; color: #75837b; background: #f1f4f2; font-size: var(--font-label); letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.finish-table td { padding: 9px; border-top: 1px solid #e8ece9; vertical-align: middle; font-size: var(--font-control); }
.finish-table td strong, .finish-table td small { display: block; }
.finish-table td strong { font-size: var(--font-control); }
.finish-table td small { margin-top: 2px; color: var(--muted); font-size: var(--font-caption); }
.alter-badge { display: inline-grid; min-width: 29px; height: 29px; place-items: center; margin-right: 6px; border-radius: 8px; color: var(--orange); background: #fff0e6; font-weight: 800; }
.worker-cell { display: flex; align-items: center; }
.finish-product-cell, .finish-card-product { display: flex; align-items: center; gap: 8px; }
.finishing-product-thumb { display: inline-flex; width: 31px; height: 31px; flex: 0 0 auto; overflow: hidden; border-radius: 7px; background: #edf2ef; }
.finishing-product-thumb.large { width: 46px; height: 46px; border-radius: 12px; }
.finishing-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.status-chip { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border-radius: 999px; font-size: var(--font-label); font-weight: 800; white-space: nowrap; }
.status-chip.assigned { color: #68756e; background: #edf1ef; }
.status-chip.on_machine, .status-chip.finishing { color: #aa5b20; background: #fff0e3; }
.status-chip.completed, .status-chip.done { color: #24775d; background: #e4f3eb; }
.status-chip.completed_exception { color: #b44e50; background: #fcebea; }
.status-chip.ready { color: #9c5b21; background: #fff0e3; }
.status-chip.picked { color: #6650ae; background: #f0ecff; }

.workflow-tabs { display: flex; gap: 4px; margin: 0 17px 12px; padding: 4px; overflow-x: auto; border-radius: 10px; background: #f1f4f2; }
.workflow-tabs button { min-height: 31px; padding: 0 10px; border: 0; border-radius: 7px; color: #6c7972; background: transparent; font-size: var(--font-control); font-weight: 800; white-space: nowrap; cursor: pointer; }
.workflow-tabs button.active { color: #fff; background: #184f41; box-shadow: 0 3px 9px rgba(14,62,49,.17); }
.workflow-tabs b { margin-left: 4px; }
.finishing-board { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 10px; padding: 0 17px 17px; }
.finish-batch-card { position: relative; display: flex; min-height: 228px; flex-direction: column; padding: 13px; overflow: hidden; border: 1px solid #dfe6e2; border-radius: 12px; background: #fbfcfb; cursor: pointer; }
.finish-batch-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #e28548; content: ""; }
.finish-batch-card.picked::before { background: #7058ba; }
.finish-batch-card.finishing::before { background: #248295; }
.finish-batch-card.done::before { background: #2f8a69; }
.batch-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.batch-source { display: inline-flex; min-height: 20px; align-items: center; padding: 0 7px; border-radius: 6px; color: #7c522f; background: #fff0e4; font-size: var(--font-micro); font-weight: 800; text-transform: uppercase; }
.batch-source.sample { color: #a44747; background: #fce9e8; }
.finish-batch-card h3 { margin: 11px 0 2px; font: 800 13px "Manrope", sans-serif; }
.finish-batch-card > p { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.finish-card-product { margin-top: 10px; }
.finish-card-product h3 { margin: 0 0 2px; }
.finish-card-product p { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.batch-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 11px; }
.batch-metrics span { padding: 7px; border-radius: 7px; background: #fff; }
.batch-metrics small, .batch-metrics strong { display: block; }
.batch-metrics small { color: var(--muted); font-size: var(--font-caption); text-transform: uppercase; }
.batch-metrics strong { margin-top: 2px; font-size: var(--font-caption); }
.batch-note { margin-top: 9px; padding: 8px; border-left: 2px solid #e18549; border-radius: 6px; color: #665c55; background: #fff5ed; font-size: var(--font-label); }
.batch-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 11px; }
.batch-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #d9e2dd; border-radius: 8px; color: #405149; background: #fff; font-size: var(--font-control); font-weight: 800; cursor: pointer; }
.batch-actions .primary-batch-action { flex: 1; color: #fff; border-color: #e17939; background: #e17939; }
.finish-batch-card.picked .primary-batch-action { border-color: #6b54ae; background: #6b54ae; }
.finish-batch-card.finishing .primary-batch-action { border-color: #267f91; background: #267f91; }

.export-button { display: inline-flex; min-height: 31px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #dce5e0; border-radius: 8px; color: #376f5e; background: #fff; font-size: var(--font-control); font-weight: 800; cursor: pointer; }
.export-button svg { width: 12px; }
.ledger-table { min-width: 980px; }
.action-name { font-weight: 800; text-transform: capitalize; }
.finish-mobile-list { display: none; }
.finish-empty { margin: 0 17px 17px; padding: 20px; border: 1px dashed #d9e1dc; border-radius: 10px; color: var(--muted); text-align: center; font-size: var(--font-caption); }

.finishing-modal-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(8,34,27,.58); backdrop-filter: blur(4px); }
.finishing-modal-backdrop[hidden] { display: none; }
.finish-output-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.finish-output-fields label, .finish-output-remarks { display: grid; gap: 6px; font-size: var(--font-control); }
.finish-output-fields input, .finish-output-remarks textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid #dce3de; border-radius: 8px; font: inherit; }
.finish-output-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px; }
.finish-output-actions button { padding: 10px 14px; border: 1px solid #ccdcd5; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; cursor: pointer; }
.finish-output-actions button[type="submit"] { background: #207a65; color: #fff; }
#finishing-output-error { color: #ba342d; font-size: var(--font-control); }
.finishing-modal { position: relative; width: min(920px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; border-radius: 15px; background: #fff; box-shadow: 0 24px 70px rgba(4,29,22,.3); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 8px; color: #68766f; background: #f0f3f1; cursor: pointer; }
.modal-close svg { width: 13px; }
.finish-detail-hero { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 11px; padding: 20px 52px 15px 18px; border-bottom: 1px solid #e3e8e5; }
.finish-detail-hero > span:first-child { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: #d66f31; background: #fff0e5; font: 800 var(--font-control) "Manrope", sans-serif; }
.finish-detail-hero h2 { margin: 2px 0; font: 800 17px "Manrope", sans-serif; }
.finish-detail-hero p { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.finish-detail-section { padding: 14px 18px; border-bottom: 1px solid #e5e9e7; }
.finish-detail-section h3 { margin: 0 0 8px; font: 700 10px "Manrope", sans-serif; }
.finishing-product-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.finishing-product-gallery button { width: 150px; height: 105px; padding: 0; overflow: hidden; border: 1px solid #dce4df; border-radius: 9px; background: #eef3f0; cursor: zoom-in; }
.finishing-product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.finishing-product-gallery button.expanded { position: fixed; inset: 8vh 8vw; z-index: 190; width: 84vw; height: 84vh; padding: 12px; border-color: #fff; background: rgba(12,34,28,.95); cursor: zoom-out; }
.finishing-product-gallery button.expanded img { object-fit: contain; }
.no-finishing-image { color: var(--muted); font-size: var(--font-caption); }
.detail-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.detail-metrics div { padding: 9px; border-radius: 8px; background: #f5f7f6; }
.detail-metrics small, .detail-metrics strong { display: block; }
.detail-metrics small { color: var(--muted); font-size: var(--font-caption); text-transform: uppercase; }
.detail-metrics strong { margin-top: 2px; font-size: var(--font-caption); }
.event-timeline { display: grid; gap: 6px; }
.event-line { display: grid; grid-template-columns: 90px 1fr auto; gap: 9px; padding: 8px; border-radius: 8px; background: #f6f8f7; }
.event-line strong, .event-line small { display: block; }
.event-line strong { font-size: var(--font-caption); text-transform: capitalize; }
.event-line small { margin-top: 2px; color: var(--muted); font-size: var(--font-caption); }
.event-line span { font-size: var(--font-label); }

.finishing-toast { position: fixed; right: 22px; bottom: 22px; z-index: 180; display: flex; min-width: 300px; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #d8e7df; border-radius: 11px; background: #fff; box-shadow: 0 16px 40px rgba(7,35,27,.2); opacity: 0; transform: translateY(18px); pointer-events: none; transition: 180ms ease; }
.finishing-toast.show { opacity: 1; transform: translateY(0); }
.finishing-toast > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: #26775d; background: #e5f3ec; }
.finishing-toast svg { width: 13px; }
.finishing-toast strong { display: block; font-size: var(--font-control); }
.finishing-toast p { margin: 2px 0 0; color: var(--muted); font-size: var(--font-caption); }

@media (max-width: 1180px) {
  .finishing-summary { grid-template-columns: repeat(3, 1fr); }
  .finishing-board { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 820px) {
  .register-tools, .ledger-tools { grid-template-columns: 1fr 1fr; }
  .finish-search { grid-column: 1 / -1; }
  .finish-table-wrap { display: none; }
  .finish-mobile-list { display: grid; gap: 8px; padding: 0 14px 14px; }
  .finish-mobile-card { padding: 11px; border: 1px solid #e0e6e2; border-radius: 10px; background: #fbfcfb; }
  .finish-mobile-card header { display: flex; justify-content: space-between; gap: 8px; }
  .finish-mobile-card h3 { margin: 0; font-size: 9px; }
  .finish-mobile-card p { margin: 2px 0 8px; color: var(--muted); font-size: var(--font-caption); }
  .mobile-finish-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .mobile-finish-metrics span { padding: 7px; border-radius: 7px; background: #fff; }
  .mobile-finish-metrics small, .mobile-finish-metrics strong { display: block; }
  .mobile-finish-metrics small { color: var(--muted); font-size: var(--font-caption); }
  .mobile-finish-metrics strong { margin-top: 2px; font-size: var(--font-caption); }
}
@media (max-width: 620px) {
  .finishing-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .finish-summary-card { min-height: 78px; padding: 9px; }
  .section-heading { padding: 14px 13px 10px; }
  .section-heading > :last-child { display: none; }
  .register-tools, .ledger-tools { grid-template-columns: 1fr; padding: 0 13px 10px; }
  .finish-search { grid-column: auto; }
  .workflow-tabs { margin: 0 13px 10px; }
  .finishing-board { grid-template-columns: 1fr; padding: 0 13px 13px; }
  .finish-batch-card { min-height: 215px; }
  .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .event-line { grid-template-columns: 1fr auto; }
  .event-line > span:first-child { grid-column: 1 / -1; }
  .finishing-toast { right: 12px; bottom: 78px; left: 12px; min-width: 0; }
}