/* Plate production screens (views/production). */

/* ---------- plate variants ---------- */
.plate.amer { border-top-width: 4px; border-top-color: var(--blue); }
.plate.eu .ua.eu { background: #003399; }
.plate.plain { border-color: #555; }
.plate.moto .t.two { flex-direction: column; justify-content: center; line-height: .95; font-size: 11px; padding: 0 5px; }
.plate.moto .t.two b { font-weight: 600; }
.plate-m.moto .t.two { font-size: 15px; }
.plate-l.moto .t.two { font-size: 52px; padding: 0 22px; }
@media (max-width: 760px) { .plate-l.moto .t.two { font-size: 30px; } }

/* ---------- layout ---------- */
.prod-page { padding-bottom: 20px; }
.prod-stats { display: flex; gap: 22px; align-items: baseline; margin-left: 12px; flex-wrap: wrap; }
.prod-stats b { font-size: 20px; font-weight: 600; }
.tabs b.alert-n { color: var(--alert); }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters .filter-q { height: 34px; width: 260px; }
.prod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 16px; align-items: start; }
.job-panel {
  min-height: 420px; position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
}
.queue-panel { overflow: hidden; }
.queue-panel .panel-head { padding: 8px 10px 8px 16px; }
.job-empty { margin: auto; }
.red { color: var(--alert) !important; }

/* ---------- queue ---------- */
.qgroup {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px;
  background: var(--sunk); border-bottom: 1px solid #E3E8ED; font-size: 12px; color: var(--ink-2);
}
.qgroup b { font-weight: 500; color: var(--ink); }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #E3E8ED; align-items: center; color: var(--ink); }
.qrow:hover { background: #F7F9FB; color: var(--ink); }
.qrow.cur { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.qmain { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qmeta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.qmeta .ic { display: inline-flex; align-items: center; gap: 3px; }
.qside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; text-align: right; }
.qside b { font-size: 17px; font-weight: 600; }
.qside span { font-size: 12px; max-width: 118px; }
.claim { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.claim.mine { color: var(--blue); font-weight: 500; }

/* ---------- job ---------- */
.job { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.job-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #E3E8ED; }
.job-title { display: flex; flex-direction: column; min-width: 0; }
.job-title h2 { font-size: 18px; }
.holder { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--sunk); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.holder.mine { background: var(--blue-soft); color: var(--blue-ink); }
.job-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow: auto; flex: 1; }
.job-plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 16px 12px; background: var(--sunk); border-radius: 12px; container-type: inline-size; }
/* The plate fills the panel: a long UA plate by width, a square US or moto plate by height
   (limited, so it does not push the note and the buttons off the screen). */
.job-plate .plate-real-l { --w: min(100cqw - 8px, 720px); height: min(calc(var(--w) / var(--ar, 4.5)), 300px); font-size: min(calc(var(--w) / var(--ar, 4.5)), 300px); max-width: 100%; }
.plate-extra { font-size: 13px; color: var(--ink-2); }
.blank-thumb { align-self: flex-end; width: 92px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; }
.blank-thumb img { width: 100%; height: 100%; object-fit: cover; }
.specs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.specs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.specs span { font-size: 12px; color: var(--muted); }
.specs b { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.specs b.big { font-size: 22px; font-weight: 600; }
.specs small { font-size: 12px; }
.swatch { width: 12px; height: 12px; border-radius: 6px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #FFF6D6; color: #4A3B00; }
.note svg { margin-top: 1px; }
.note-info { background: var(--blue-soft); color: var(--blue-ink); }
.note-alert { background: var(--alert-soft); color: var(--alert-ink); }
.job-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.job-cols:empty { display: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chips .chip { cursor: default; height: auto; min-height: 32px; padding: 4px 10px; }
.chips a.chip { cursor: pointer; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.thumb { width: 120px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-missing { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: var(--muted); background: var(--sunk); }
.job-actions { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid #E3E8ED; background: #FAFBFC; flex-wrap: wrap; }
.job-actions form { display: contents; }
.job-actions form.push-right { display: block; margin-left: auto; }

/* ---------- dialogs ---------- */
.dialog-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.dialog-form h2 { font-size: 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--field); border-radius: 8px; height: 44px; overflow: hidden; width: max-content; }
.stepper button { width: 44px; height: 100%; border: 0; background: #fff; font-size: 20px; cursor: pointer; }
.stepper input { width: 56px; height: 100%; border: 0; border-left: 1px solid #E3E8ED; border-right: 1px solid #E3E8ED; text-align: center; font-size: 16px; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 80; background: rgba(12, 16, 20, .88); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; border-radius: 6px; background: #fff; }
.lightbox-title { color: #fff; font-size: 14px; }

.phone-next { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 20; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .prod-grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .prod-grid { grid-template-columns: minmax(0, 1fr); }
  .prod-page.has-job .queue-panel, .prod-page.has-job .filters, .prod-page.has-job .prod-tabs { display: none; }
  .prod-page:not(.has-job) .job-panel { display: none; }
  .job-panel { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .prod-page { padding-bottom: calc(var(--tabbar-h) + 90px + env(safe-area-inset-bottom)); }
  /* Строка фильтров прокручивается вбок, поэтому ничего не сжимаем: списки с поиском (.kzs) схлопывались
     в узкую полоску и налезали на соседний фильтр — на телефоне было видно «…бая краска». */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filters > *, .filters .kzs { flex: none; }
  .filters .filter-q { width: 100%; min-width: 200px; }
  .qrow { grid-template-columns: minmax(0, 1fr) 92px; padding: 12px; }
  .qline .plate { height: 28px; }
  .qline .plate .t { font-size: 20px; }
  .job-head { padding: 10px 12px; }
  .job-body { padding: 12px; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-actions { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 10px 12px; }
  .job-actions .btn-ok { flex: 1 1 100%; order: -1; }
  .job-actions .btn-lg:not(.btn-ok) { flex: 1; height: 48px; padding: 0 8px; font-size: 13px; }
}

/* ---------- configurable sides, note, mockups ---------- */
.prod-grid.queue-left { grid-template-columns: 520px minmax(0, 1fr); }
.prod-grid.queue-left .queue-panel { order: -1; }
@media (max-width: 1280px) { .prod-grid.queue-left { grid-template-columns: 420px minmax(0, 1fr); } }
@media (max-width: 1100px) { .prod-grid.queue-left { grid-template-columns: minmax(0, 1fr); } }

.job-goods { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.info-tip { position: relative; display: inline-flex; }
.info-btn { display: inline-flex; border: 0; background: none; padding: 2px; color: var(--blue); cursor: pointer; border-radius: 50%; }
.info-btn:hover { background: var(--blue-soft); }
.info-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; width: min(420px, 80vw); padding: 12px 14px; border-radius: 10px;
  background: #fff; box-shadow: var(--shadow-pop); font-size: 14px; color: var(--ink); white-space: normal; line-height: 1.45;
}

.tag-mockup { background: #7B3FE4; color: #fff; }
.tag-note { background: var(--signal); color: var(--ink); }

.master-note {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px;
  background: var(--signal); color: #1C1600; box-shadow: inset 0 0 0 2px #E0A800;
}
.master-note svg { margin-top: 4px; }
.master-note span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.master-note p { margin: 2px 0 0; font-size: 24px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }

.mockups { border-radius: 12px; box-shadow: inset 0 0 0 2px #7B3FE4; background: #F4EEFF; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mockups-head { display: flex; align-items: center; gap: 8px; color: #4B2A86; flex-wrap: wrap; }
.mockups-head b { font-size: 16px; }
.mockups-head .num { background: #7B3FE4; color: #fff; border-radius: 10px; padding: 0 8px; font-size: 13px; font-weight: 600; }
.mockups-head .muted { font-size: 12px; }
.mockups-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.mockup { display: block; max-width: 100%; padding: 4px; border: 1px solid #D9C8FA; border-radius: 8px; background: #fff; cursor: zoom-in; overflow: hidden; }
/* Thumbnails, not the working picture: a manager may attach a sample, and a mockup as big
   as the screen gets made instead of the ordered number. Click opens it full size. */
.mockup img { display: block; width: auto; max-width: min(340px, 100%); height: auto; max-height: 180px; object-fit: contain; }
.mockup-file { display: flex; align-items: center; gap: 10px; padding: 14px; color: #4B2A86; cursor: pointer; }
@media (max-width: 760px) { .master-note p { font-size: 20px; } }

/* «После „Готово“» switch */
.after-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.after-done .seg { height: 32px; }
.after-done .seg button { font-size: 13px; }
.job-empty.all-done { color: var(--ok-ink); gap: 6px; }
.job-empty.all-done b { font-size: 18px; }
@media (max-width: 760px) { .after-done .muted { display: none; } }

/* «Готово» за другого: руководитель отмечает, кто на самом деле печатал */
.job-done { display: flex; align-items: center; gap: 8px; }
.job-as { display: flex; align-items: center; gap: 6px; }
.job-as .input { height: 40px; max-width: 200px; }