* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  padding: 20px 16px 40px;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0f172a;
  letter-spacing: -0.3px;
}

h2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #374151;
  letter-spacing: 0.02em;
}

/* ── Form ── */

/* 3-column compact grid */
.compact-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.compact-grid-3 .field {
  margin-bottom: 0;
}

/* 2-column compact grid (ФОТ) */
.compact-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.compact-grid-2 .field {
  margin-bottom: 0;
}

/* Compact field: label always bottom-aligned → all inputs start at same height */
.compact-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 72px;
}

.compact-field label {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Disabled state (auto roaster rate mode) */
.compact-field input:disabled {
  background: #f0f0ee;
  color: #999;
  cursor: default;
}

/* Subsection heading inside a form-section */
.subsection-title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  margin-top: 4px;
}

.form-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15px;
  color: #1a1a1a;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s;
}

.field input:focus,
.field select:focus {
  border-color: #2563eb;
  background: #fff;
}

/* Row with input + select side by side */
.row {
  display: flex;
  gap: 8px;
}

.row input {
  flex: 1;
}

.row select {
  width: 90px;
  flex-shrink: 0;
}

.form-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

button#calcBtn {
  flex: 1;
  padding: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

button#calcBtn:hover {
  background: #1d4ed8;
}

.reset-btn {
  padding: 12px 16px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.reset-btn:hover {
  background: #dbeafe;
  color: #475569;
}

.reset-settings-btn {
  padding: 12px 14px;
  background: none;
  color: #94a3b8;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.reset-settings-btn:hover {
  background: #f1f5f9;
  color: #475569;
}

.autosave-hint {
  font-size: 11px;
  color: #b0a090;
  margin: 4px 0 0;
  text-align: right;
}

/* ── Results ── */

.results-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.result-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  gap: 8px;
}

.result-item.highlight {
  background: #eff6ff;
  border-color: #93c5fd;
}

.result-item.profit {
  background: #f0f9f0;
  border-color: #a8d8a8;
}

.result-label {
  font-size: 13px;
  color: #555;
  flex: 1;
}

.result-value {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.result-unit {
  font-size: 12px;
  color: #888;
  margin-left: 3px;
  white-space: nowrap;
}

/* ── Error ── */

.error-box {
  background: #fff0f0;
  border: 1px solid #f5a0a0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #c0392b;
}

/* ── Price status messages ── */

.warning-box {
  margin-top: 14px;
  background: #fff0f0;
  border: 1px solid #e08080;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #8b1a1a;
}

.safe-box {
  margin-top: 14px;
  background: #f0f9f0;
  border: 1px solid #a8d8a8;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1e5c1e;
}

/* ── Recommended prices sub-section ── */

.cost-details {
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 2px;
}

.cost-details-summary {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 8px 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.cost-details-summary::-webkit-details-marker { display: none; }

.cost-details-summary::before {
  content: "▶";
  font-size: 9px;
  transition: transform 0.15s;
  color: #94a3b8;
}

.cost-details[open] .cost-details-summary::before {
  transform: rotate(90deg);
}

.cost-details-grid {
  margin-top: 4px;
}

.rec-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.rec-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* ── Page layout: 3 columns ── */

/* ── Блок расчёта сделки — горизонтальный, как оптовая лестница ── */

.deal-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 4px;
}

.deal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.deal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 1 1 150px;
}

.deal-field.deal-field-wide {
  min-width: 200px;
  flex: 2 1 200px;
}

.deal-field.deal-field-sm {
  min-width: 100px;
  flex: 1 1 100px;
}

.deal-field label {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.deal-field input,
.deal-field select {
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  width: 100%;
  box-sizing: border-box;
}

.deal-field input:focus,
.deal-field select:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
}

.deal-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.deal-extras .cost-details {
  flex: 1 1 240px;
}

/* Оставляем page-layout как запасной вариант (не используется в основной форме) */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  align-items: start;
}

/* Placeholder shown before first calculation */
.results-placeholder {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  color: #999;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Responsive: 1 column on mobile ── */
@media (max-width: 680px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .compact-grid-3,
  .compact-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Save button ── */

.save-btn {
  display: block;
  margin-top: 16px;
  width: 100%;
  padding: 11px;
  background: #2d6a2d;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.save-btn:hover {
  background: #1e4f1e;
}

/* ── Поле "Название расчёта" перед кнопкой сохранения ── */
.calc-label-row {
  margin-top: 14px;
}

.calc-label-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
}

.calc-label-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
}

.calc-label-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.bs-label-row {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  margin-bottom: 8px;
}

/* ── Pricelist section ── */

.pricelist-section {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
}

.section-summary {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid #e2e8f0;
}
.section-summary::-webkit-details-marker { display: none; }
.section-summary::before {
  content: '▶';
  font-size: 11px;
  color: #3b82f6;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] > .section-summary::before { transform: rotate(90deg); }

.pricelist-section > summary { margin-bottom: 14px; }

/* ── Тулбар прайса ── */
.pl-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pl-eval-field {
  max-width: 260px;
}

/* ── Таблица "Прайс и маржа" ── */
.pl-margin-table td {
  vertical-align: middle;
  padding: 7px 10px;
  font-size: 13px;
}

.pl-coffee-name {
  white-space: nowrap;
  min-width: 160px;
}

.pl-price-cell {
  width: 80px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 13px;
  text-align: right;
  background: #f8fafc;
}

.pl-price-cell:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
}

/* ── Статусы маржи ── */
.pl-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pl-status-green  { background: #c8ecc8; color: #1a5020; }
.pl-status-yellow { background: #fce8a8; color: #6a4000; }
.pl-status-red    { background: #f8d0d0; color: #7a1010; }
.pl-status-gray   { background: #e2e8f0; color: #64748b; }

/* ── Пустая ячейка ── */
.pl-na { color: #bbb; font-size: 12px; }

/* ── Здоровье прайса ── */
.pl-health-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.pl-health-title {
  font-size: 12px;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

.pl-health-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.pl-health-total {
  font-size: 12px;
  color: #94a3b8;
  margin-left: auto;
}

/* ── Название активной партии в таблице ── */
.pl-batch-name {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  max-width: 160px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Блок "Влияние активной партии" ── */
.pl-impact-box {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.pl-impact-box.pl-impact-warn { border-color: #e8b840; background: #fffbf0; }
.pl-impact-box.pl-impact-ok   { border-color: #7ec87e; background: #f4fbf4; }

.pl-impact-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.pl-impact-prev {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
}

.pl-impact-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.7;
  margin: 0;
}

.pl-save-btn {
  padding: 8px 18px;
  background: #4a6c8c;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.pl-save-btn:hover { background: #35506e; }

/* 4-column compact grid */
.compact-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.compact-grid-4 .field { margin-bottom: 0; }

@media (max-width: 680px) {
  .compact-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Brief summary card ── */

.bs-card {
  padding: 18px 20px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bs-decision {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  letter-spacing: -0.3px;
}

.bs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}

.bs-item { display: flex; flex-direction: column; }
.bs-label { font-size: 11px; opacity: 0.65; }
.bs-val   { font-size: 13px; font-weight: 600; }

.bs-card.bs-green  { background: #f0f9f0; border-color: #a8d8a8; color: #1a5020; }
.bs-card.bs-yellow { background: #fff8e0; border-color: #f0c060; color: #6a4000; }
.bs-card.bs-red    { background: #fff0f0; border-color: #e08080; color: #7a1010; }

/* ── Decision block ── */

.dec-section {
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.dec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
}

.dec-header-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.dec-header-status { font-size: 15px; font-weight: 700; }

.dec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid transparent;
}

.dec-item {
  padding: 10px 14px;
  border-right: 1px solid transparent;
}

.dec-item:last-child { border-right: none; }

.dec-item-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  opacity: 0.7;
}

.dec-item-status {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
}

.dec-item-detail { font-size: 12px; opacity: 0.85; line-height: 1.6; }

.dec-recommendation {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: rgba(0,0,0,0.02);
}

/* Color variants */
.dec-header.dec-green  { background: #e8f5e8; border-color: #a8d8a8; color: #1a5020; }
.dec-header.dec-yellow { background: #fff8e0; border-color: #f0c060; color: #6a4000; }
.dec-header.dec-red    { background: #fff0f0; border-color: #e08080; color: #7a1010; }

.dec-item.dec-green  { background: #f6fcf6; border-right-color: #ddf0dd; color: #1a5020; }
.dec-item.dec-yellow { background: #fffcf0; border-right-color: #f0e0a0; color: #6a4000; }
.dec-item.dec-red    { background: #fff8f8; border-right-color: #f0c0c0; color: #7a1010; }
.dec-item.dec-neutral{ background: #f8fafc; border-right-color: #e8e5e0; color: #555;    }

.dec-section:has(.dec-header.dec-green)  { border-color: #a8d8a8; }
.dec-section:has(.dec-header.dec-yellow) { border-color: #f0c060; }
.dec-section:has(.dec-header.dec-red)    { border-color: #e08080; }

/* ── Warehouse section ── */

.warehouse-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.warehouse-section > h2 {
  margin-bottom: 16px;
}

/* Single-row layout for warehouse inputs */
.wh-input-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.wh-input-row .field {
  margin-bottom: 0;
}

/* Button cell aligns with inputs */
.wh-btn-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 680px) {
  .wh-input-row {
    grid-template-columns: 1fr;
  }
}

#wh-results {
  margin-top: 12px;
}

.wh-result-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.wh-status {
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

.wh-status-green  { background: #f0f9f0; color: #1e5c1e; border: 1px solid #a8d8a8; }
.wh-status-yellow { background: #fff8e6; color: #7a4f00; border: 1px solid #f0c060; }
.wh-status-red    { background: #fff0f0; color: #8b1a1a; border: 1px solid #e08080; }

.wh-save-btn {
  margin-top: 14px;
  padding: 9px 20px;
  background: #4a7c4e;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.wh-save-btn:hover { background: #365d39; }

.wh-saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.wh-saved-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  position: relative;
}

.wh-saved-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.wh-saved-date {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
  border-top: 1px solid #e2e8f0;
  padding-top: 5px;
}

.wh-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #bbb;
  font-size: 17px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.wh-delete-btn:hover { color: #c0392b; background: #fff0f0; }

/* ── Склад готового кофе ── */

.finished-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.finished-section > h2 {
  margin-bottom: 16px;
}

.fs-input-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.fs-input-row .field {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .fs-input-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .fs-input-row {
    grid-template-columns: 1fr;
  }
}

.fs-save-btn {
  margin-top: 14px;
  padding: 9px 18px;
  background: #5a6e8a;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.fs-save-btn:hover { background: #445268; }

/* ── Data tables (history + analytics) ── */

.tbl-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
}

.data-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  background: #f8fafc;
}

.data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.data-table tbody tr:hover td { background: #fdf9f5; }

.tbl-num { text-align: right !important; }
.data-table thead .tbl-num { text-align: right; }

.tbl-date { font-size: 11px; color: #999; white-space: nowrap; }
.tbl-actions { white-space: nowrap; }

/* Small action buttons inside table */
.tbl-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s;
}

.tbl-btn:first-child { margin-left: 0; }

.tbl-btn-info { background: #eaf0ff; color: #1a3a7a; border-color: #b0c8f5; }
.tbl-btn-info:hover { background: #d0e4ff; }

.tbl-btn-del { background: #fff0f0; color: #c0392b; border-color: #f5a0a0; }
.tbl-btn-del:hover { background: #ffe0e0; }

/* Expandable detail row */
.tbl-detail-row td { background: #f8fafc; padding: 8px 14px; }

.tbl-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12px;
  color: #555;
}

.tbl-detail b { color: #1a1a1a; font-weight: 600; }

/* ── History section ── */

.history-section {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.history-header h2 {
  margin-bottom: 0;
}

.history-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.export-btn {
  padding: 7px 14px;
  background: #eaf0ff;
  color: #1a3a7a;
  border: 1px solid #b0c8f5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.export-btn:hover {
  background: #d0e4ff;
}

.export-btn-csv {
  background: #edfaf0;
  color: #1a5c2e;
  border-color: #90d4a8;
}

.export-btn-csv:hover {
  background: #d4f5e0;
}

.import-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #eafaea;
  color: #1a5c1a;
  border: 1px solid #a0d8a0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.import-btn:hover {
  background: #d0f0d0;
}

.clear-btn {
  padding: 7px 14px;
  background: #fff0f0;
  color: #c0392b;
  border: 1px solid #f5a0a0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.clear-btn:hover {
  background: #ffe0e0;
}

.history-list {
  display: block;
}

.history-empty {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 20px 0 4px;
}

/* ── History card ── */

.history-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 14px 12px;
}

.history-card-client {
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.history-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  padding-right: 24px;
}

.history-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
  gap: 8px;
}

.history-card-row .hval {
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.history-card-date {
  font-size: 11px;
  color: #aaa;
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 6px;
}

.history-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #bbb;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.history-card-delete:hover {
  color: #c0392b;
  background: #fff0f0;
}

/* ── Analytics section ── */

.analytics-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.analytics-section > h2 {
  margin-bottom: 16px;
}

.analytics-list {
  display: block;
}

.analytics-empty {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 20px 0 4px;
}

.analytics-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
}

.analytics-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

/* ── Comparison section ── */

.comparison-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.comparison-section > h2,
.comparison-section > summary {
  margin-bottom: 16px;
}

.comparison-results {
  margin-top: 16px;
}

.comparison-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
}

.comparison-card.ok {
  border-color: #a8d8a8;
  background: #f6fcf6;
}

.comparison-card.warn {
  border-color: #f5a0a0;
  background: #fff8f8;
}

.comparison-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.comparison-status {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
}

.comparison-status.ok {
  color: #1e5c1e;
  background: #e4f5e4;
}

.comparison-status.warn {
  color: #8b1a1a;
  background: #ffeaea;
}

.analytics-summary-card {
  margin-top: 20px;
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
}

.analytics-card-delete-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  background: none;
  border: 1px solid #f5a0a0;
  border-radius: 5px;
  color: #c0392b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.analytics-card-delete-btn:hover {
  background: #fff0f0;
}

/* ── Проверка перед сохранением ── */

.pre-save-check {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.psc-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}

.psc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.psc-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.psc-icon {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
}

.psc-ok    { color: #1a7a1a; }
.psc-warn  { color: #8a6000; }
.psc-error { color: #c0392b; }

/* ── Расчёт партии зелёного кофе ── */

.batch-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.batch-section > h2,
.batch-section > summary {
  margin-bottom: 16px;
}

#bt-results {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.bt-result-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.bt-final {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0f4fa;
  border: 1px solid #b0c4de;
  border-radius: 7px;
  font-size: 14px;
  color: #1a3a5c;
}

.bt-final strong {
  font-size: 16px;
}

.bt-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bt-apply-btn {
  padding: 9px 20px;
  background: #4a6fa5;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.bt-apply-btn:hover { background: #365480; }

.bt-save-btn {
  padding: 9px 20px;
  background: #4a7c4e;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.bt-save-btn:hover { background: #365d39; }

.bt-auto-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.bt-auto-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.field-hint {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.3;
}

.bt-final-hint {
  display: block;
  font-size: 11px;
  color: #5a7090;
  margin-top: 4px;
  font-weight: 400;
}

/* ── Чекбокс "Сделать активной" ── */
/* ── Блок проверок партии ── */
.bt-validation-box {
  margin: 10px 0 6px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.6;
}

.bt-validation-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #3b82f6;
  margin-bottom: 5px;
}

/* ── Чекбокс "Сделать активной" ── */
.bt-make-active-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  color: #2c4a2c;
  background: #edf7ed;
  border: 1px solid #a8d8a8;
  border-radius: 7px;
  padding: 10px 14px;
  cursor: pointer;
  line-height: 1.4;
}

.bt-make-active-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Бейджи статуса партии ── */
.bt-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.bt-active  { background: #c8ecc8; color: #1a5020; }
.bt-archive { background: #e2e8f0; color: #64748b; }

/* ── Кнопка «Активная» в таблицах ── */
.tbl-btn-warn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
}

.tbl-btn-warn:hover { background: #6a4428; }

/* ── Оптовая лестница ── */

.ladder-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.ladder-section > h2 {
  margin-bottom: 16px;
}

.ld-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 4px;
}

.ld-controls .field {
  margin-bottom: 0;
  min-width: 200px;
}

.ld-volumes-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ld-volumes-label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.ld-volumes-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ld-vol-input {
  width: 72px;
  padding: 7px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  text-align: right;
  color: #111827;
  background: #f8fafc;
}

.ld-vol-input:focus {
  outline: none;
  border-color: #2563eb;
}

.ladder-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #94a3b8;
}

.ladder-empty {
  color: #999;
  font-size: 13px;
  margin: 4px 0;
}

.ld-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.ld-st-green   { background: #e6f5e6; color: #1e5c1e; }
.ld-st-yellow  { background: #fff8e6; color: #7a4f00; }
.ld-st-red     { background: #fff0f0; color: #8b1a1a; }
.ld-st-neutral { background: #f0f0f0; color: #777; }

/* ── Рекомендация по цене ── */

.pr-block {
  margin: 12px 0;
  border-radius: 8px;
  padding: 14px 16px;
  border: 1.5px solid;
}

.pr-good   { background: #f0f9f0; border-color: #a8d8a8; }
.pr-warn   { background: #fff8e6; border-color: #f0c060; }
.pr-danger { background: #fff0f0; border-color: #e08080; }

.pr-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.pr-warning {
  font-size: 13px;
  font-weight: 600;
  color: #8b1a1a;
  margin-bottom: 10px;
  padding: 7px 10px;
  background: #ffe0e0;
  border-radius: 5px;
}

.pr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.pr-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-label {
  font-size: 11px;
  color: #94a3b8;
}

.pr-val {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.pr-rec {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ── Шаблоны себестоимости кофе ── */

.template-section {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.template-section > summary {
  margin-bottom: 16px;
}

.tpl-save-btn {
  padding: 9px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.tpl-save-btn:hover { background: #1d4ed8; }

.tpl-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #94a3b8;
}

/* ── Прайс: раскрывашка доп. позиций ── */

.pl-more-details {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.pl-more-summary {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  user-select: none;
}

.pl-more-summary::-webkit-details-marker { display: none; }

.pl-more-summary::before {
  content: "▶";
  font-size: 9px;
  color: #94a3b8;
  transition: transform 0.15s;
}

.pl-more-details[open] .pl-more-summary::before { transform: rotate(90deg); }

.pl-more-grid {
  margin-top: 8px;
}

/* ── Справочник кофе ── */

.catalog-section {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.catalog-summary {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.catalog-summary::-webkit-details-marker { display: none; }

.catalog-summary::before {
  content: "▶";
  font-size: 9px;
  color: #94a3b8;
  transition: transform 0.15s;
}

.catalog-section[open] .catalog-summary::before { transform: rotate(90deg); }

.catalog-hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 14px 10px;
}

.catalog-table { min-width: 500px; }

.cat-name {
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
  padding-right: 16px;
  width: 200px;
}

.cat-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}

.cat-alias {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 6px;
  color: #475569;
}

/* ── Вкладки ── */

/* ══ Карточка «Быстрый итог цены» ══════════════════════════════════════════ */

.quick-price-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  padding: 16px 20px;
  background: #fff;
}

.quick-price-card.qp-green  { border-color: #7ec87e; background: #f4fbf4; }
.quick-price-card.qp-yellow { border-color: #e8b840; background: #fffbf0; }
.quick-price-card.qp-red    { border-color: #d07070; background: #fff5f5; }

.qp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.qp-title {
  font-size: 11px;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.qp-coffee {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.qp-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.qp-green  .qp-status { background: #c8ecc8; color: #1a5020; }
.qp-yellow .qp-status { background: #fce8a8; color: #6a4000; }
.qp-red    .qp-status { background: #f8d0d0; color: #7a1010; }

.qp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 20px;
}

@media (max-width: 860px) {
  .qp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .qp-grid { grid-template-columns: repeat(2, 1fr); }
}

.qp-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qp-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.qp-val {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}

.qp-unit {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

.qp-item-accent .qp-val { color: #1e6b1e; font-size: 18px; }

.qp-no-discount {
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
}

/* ══ Пошаговый путь работы ══════════════════════════════════════════════════ */

.workflow-step {
  margin-bottom: 8px;
}

.step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 10px;
  border-top: 2px solid #e2e8f0;
  margin-bottom: 10px;
}

.workflow-step:first-child .step-header {
  border-top: none;
  padding-top: 0;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  background: #2563eb;
  color: #fff;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  white-space: nowrap;
}

.step-info {
  flex: 1;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

.step-desc {
  font-size: 13px;
  color: #3b82f6;
  line-height: 1.4;
}

.step-empty-hint {
  font-size: 13px;
  color: #94a3b8;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  margin: 0;
}

.step-placeholder {
  font-size: 13px;
  color: #94a3b8;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  margin-top: 12px;
}

/* ── Справочник и шаблоны (обёртка) ── */
.reference-section {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
}

.reference-desc {
  font-size: 13px;
  color: #3b82f6;
  margin: 0 0 14px;
}

@media (max-width: 600px) {
  .step-badge { font-size: 11px; min-width: 26px; height: 26px; }
  .step-title { font-size: 14px; }
  .step-desc  { font-size: 12px; }
}

/* ══ Навигация по вкладкам ══════════════════════════════════════════════════ */

.tab-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #fff;
  padding: 0 2px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 0;
}

.tab-btn:hover {
  color: #1e293b;
  background: #f8fafc;
}

.tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: none;
  font-weight: 600;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

@media (max-width: 500px) {
  .tab-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ── Placeholder: Импорт 1С ── */
.onec-placeholder-section {
  margin-top: 20px;
  background: #f8fafc;
  border: 2px dashed #c8bfb0;
  border-radius: 12px;
  padding: 28px 28px 24px;
}

.onec-placeholder-section h2 {
  margin-bottom: 10px;
  color: #0f172a;
}

.onec-placeholder-text {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ── Плашка топ-5 текущих цен ── */

.top5-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 6px;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.t5-card {
  flex: 0 0 auto;
  min-width: 130px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #c8c0b5;
  border-radius: 8px;
  padding: 10px 12px 8px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.t5-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-color: #3b82f6;
}

.t5-card.t5-green  { border-top-color: #4a9c4a; }
.t5-card.t5-yellow { border-top-color: #d4a000; }
.t5-card.t5-red    { border-top-color: #c0392b; }
.t5-card.t5-gray   { border-top-color: #c8c0b5; }

.t5-name {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t5-price {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.t5-price.t5-gray { color: #94a3b8; }

.t5-margin {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
  width: fit-content;
}
.t5-margin.t5-green  { background: #e8f5e8; color: #2a6a2a; }
.t5-margin.t5-yellow { background: #fff8dc; color: #7a5a00; }
.t5-margin.t5-red    { background: #ffeaea; color: #8b1a1a; }
.t5-margin.t5-gray   { background: #f0ede8; color: #7a6a60; }

.t5-cost {
  font-size: 10px;
  color: #94a3b8;
}

/* ════════════════════════════════════════════════════
   DASHBOARD — вкладка Расчёт и прайс
   ════════════════════════════════════════════════════ */

/* ── Секции дашборда ── */

.db-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px 20px;
  margin-bottom: 14px;
}

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

.db-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.db-section-hint {
  font-size: 12px;
  color: #94a3b8;
}

.db-section-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.5;
}

.db-section-main-result {
  background: #fdf8f3;
  border-color: #d8c8b0;
}

/* Collapsible db-section (details) */
.db-section-collapsible {
  padding: 0;
}

.db-section-summary {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  user-select: none;
}
.db-section-summary::-webkit-details-marker { display: none; }
.db-section-summary::before {
  content: '▶';
  font-size: 10px;
  color: #3b82f6;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details.db-section-collapsible[open] > .db-section-summary::before {
  transform: rotate(90deg);
}
.db-inner {
  padding: 4px 22px 20px;
}

/* ── Рабочие сценарии — горизонтальная панель карточек ── */

.scenarios-panel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* ── Сценарии — шапка с кофе ── */

.sc-coffee-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sc-coffee-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.sc-coffee-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sc-coffee-field select {
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
}
.sc-coffee-field select:focus { border-color: #3b82f6; }

.sc-gc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1;
}

.sc-gc-input {
  font-size: 16px;
  font-weight: 700;
  padding: 7px 10px;
  border: 2px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  box-sizing: border-box;
}
.sc-gc-input:focus { outline: none; border-color: #2563eb; background: #fff; }

.sc-gc-hint { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.sc-batch-ok   { color: #2a6a2a; font-weight: 600; }
.sc-batch-none { color: #94a3b8; }
.sc-batch-info { font-size: 12px; }

/* ── Сценарии — вкладки-задачи ── */

.sc-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sc-tab-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.sc-tab-btn:hover      { background: #dbeafe; color: #334155; }
.sc-tab-btn.sc-tab-active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ── Сценарии — поля ввода ── */

.sc-inputs { margin-bottom: 12px; }

.sc-fields-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sc-input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  flex: 1;
}

.sc-input-field label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sc-input-field input {
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #1e293b;
  width: 100%;
  box-sizing: border-box;
}
.sc-input-field input:focus { outline: none; border-color: #3b82f6; background: #fff; }

/* ── Сценарии — результаты ── */

.sc-result-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #334155;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.sc-result-main {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.sc-rl { font-size: 12px; color: #64748b; }
.sc-rv { font-size: 14px; font-weight: 600; color: #111827; }
.sc-val-ok  { color: #2a6a2a; }
.sc-val-bad { color: #c0392b; }

.sc-status {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  margin-top: 2px;
}
.sc-status-green  { background: #e8f5e8; color: #2a6a2a; }
.sc-status-yellow { background: #fff8dc; color: #7a5a00; }
.sc-status-red    { background: #ffeaea; color: #8b1a1a; }

.sc-no-data {
  font-size: 13px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 12px 14px;
  border-radius: 7px;
  text-align: center;
  margin-bottom: 10px;
}

/* ── Сценарии — блок "Совет" ── */

.sc-advice {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.sc-advice-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 8px;
}

.sc-advice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sc-advice-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-advice-lbl  { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-advice-val  { font-size: 15px; font-weight: 700; color: #111827; }
.sc-advice-rec  { color: #2a5a2a; }
.sc-advice-hold { color: #0f172a; }
.sc-advice-hint { font-size: 10px; color: #94a3b8; }

/* ── Сценарии — лестница объёмов ── */

.sc-ladder-wrap { overflow-x: auto; margin-bottom: 10px; }
.sc-rec-price   { color: #2a6a2a; font-weight: 700; }

/* ── Сценарии — новая партия ── */

.sc-new-batch { padding: 8px 0 4px; }
.sc-new-batch-text { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.sc-new-batch-hint { font-size: 13px; color: #64748b; margin-bottom: 16px; }

/* ── Сценарии — кнопка применить ── */

.sc-apply-main-btn {
  width: 100%;
  padding: 9px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 2px;
}
.sc-apply-main-btn:hover { background: #1d4ed8; }

/* ── Переключатели целевой маржи ── */

.margin-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.margin-toggles-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.margin-btn {
  padding: 5px 12px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.margin-btn:hover {
  background: #dbeafe;
  color: #334155;
}

.margin-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* ── Авто-ставка обжарщика ── */

.roaster-auto-info {
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 10px;
  display: inline-block;
}

/* ── Краткая рекомендованная лестница ── */

.ladder-rec-summary {
  margin-bottom: 14px;
}

.lrs-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.lrs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.lrs-cell {
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.lrs-label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.lrs-price {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.lrs-hint {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .lrs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Сложные сценарии — поля ввода ── */

.comparison-inputs-wrap {
  margin-bottom: 16px;
}

.comparison-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comparison-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ci-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  min-width: 80px;
}

.ci-sep {
  font-size: 12px;
  color: #94a3b8;
}

/* ── Партии зелёного: details с формой добавления ── */

.batch-add-details {
  margin-top: 14px;
}

.batch-add-details > summary {
  margin-bottom: 14px;
}

/* Убираем устаревшие step-wrapper стили чтобы db-section выглядел чище */
.workflow-step {
  display: none;
}

@media (max-width: 680px) {
  .scenarios-panel {
    flex-wrap: nowrap;
  }
  .sc-card {
    flex: 0 0 190px;
  }
}

/* ════════════════════════════════════════════════════
   АВТОРИЗАЦИЯ — экран входа
   ════════════════════════════════════════════════════ */

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.login-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  text-align: center;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.login-logo { font-size: 48px; margin-bottom: 12px; }

.login-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.login-hint {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 20px;
}

.pin-input {
  width: 100%;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 8px;
  padding: 10px 16px;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #111827;
  box-sizing: border-box;
  margin-bottom: 14px;
}
.pin-input:focus { outline: none; border-color: #2563eb; }

.pin-btn {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.pin-btn:hover { background: #1d4ed8; }

.pin-error {
  color: #c0392b;
  font-size: 13px;
  margin-top: 10px;
}

.logout-btn {
  margin-left: auto;
  padding: 8px 14px;
  font-size: 12px;
  color: #94a3b8;
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.logout-btn:hover { color: #c0392b; border-color: #c0392b; }

/* ════════════════════════════════════════════════════
   ЗАЯВКИ — вкладка
   ════════════════════════════════════════════════════ */

.orders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.orders-header h2 { margin: 0; }

.orders-header-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.orders-sync-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 10px;
}

.orders-date-input {
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
}

.orders-add-btn {
  padding: 8px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.orders-add-btn:hover { background: #1d4ed8; }

/* Форма */
.order-form-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.order-form-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px;
}

.order-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.order-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-form-field-wide { grid-column: 1 / -1; }

.order-form-field label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-form-field input,
.order-form-field select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
}
.order-form-field input:focus,
.order-form-field select:focus { outline: none; border-color: #2563eb; background: #fff; }

.order-form-actions { display: flex; gap: 10px; }

.order-save-btn {
  padding: 9px 24px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.order-save-btn:hover { background: #1d4ed8; }

.order-cancel-btn {
  padding: 9px 16px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* Карточки заявок */
.orders-list { display: flex; flex-direction: column; gap: 10px; }

.ord-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  transition: box-shadow 0.12s;
}
.ord-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.ord-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ord-num {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  min-width: 40px;
}

.ord-date {
  font-size: 13px;
  color: #94a3b8;
}

.ord-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ord-new     { background: #e8f0ff; color: #2a4a9a; }
.ord-inprog  { background: #fff8dc; color: #7a5a00; }
.ord-done    { background: #e8f5e8; color: #2a6a2a; }

.ord-actions { margin-left: auto; display: flex; gap: 6px; }

.ord-btn {
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.ord-btn:hover { background: #f1f5f9; }
.ord-btn-del:hover { border-color: #c0392b; color: #c0392b; }

.ord-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 14px;
  align-items: baseline;
}

.ord-coffee { font-weight: 700; color: #111827; }
.ord-vol    { color: #2563eb; font-weight: 600; }
.ord-client { color: #334155; }
.ord-notes  { font-size: 12px; color: #94a3b8; width: 100%; }

.ord-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.ord-status-btn {
  padding: 5px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.ord-status-btn:hover { background: #dbeafe; }
.ord-status-done { background: #e8f5e8; color: #2a6a2a; border-color: #a8d8a8; }
.ord-status-done:hover { background: #d4edd4; }

.ord-done-mark {
  font-size: 12px;
  color: #2a6a2a;
  font-weight: 600;
}

/* ── Чек для печати ── */
.print-receipt { display: none; }

@media print {
  body > *              { display: none !important; }
  .print-receipt        { display: block !important; }
  .receipt-box {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    width: 280px;
    margin: 0 auto;
    padding: 12px;
    line-height: 1.6;
  }
  .receipt-num  { font-size: 22px; font-weight: bold; text-align: center; }
  .receipt-date { text-align: center; color: #555; margin-bottom: 6px; }
  .receipt-hr   { border: none; border-top: 1px dashed #000; margin: 8px 0; }
  .receipt-row  { display: flex; justify-content: space-between; }
  .receipt-row span:last-child { font-weight: bold; }
  .receipt-notes { font-size: 12px; color: #555; margin-top: 4px; }
}

@media (max-width: 600px) {
  .orders-header { flex-direction: column; align-items: flex-start; }
  .order-form-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════
   THEME OVERRIDES — Professional Light B2B (2025)
   ════════════════════════════════════════════════════ */

/* ── Card shadows ── */
.warehouse-section, .finished-section, .history-section, .analytics-section,
.comparison-section, .batch-section, .ladder-section, .pricelist-section,
.template-section, .reference-section, .db-section, .deal-section,
.order-form-wrap, .ord-card, .analytics-summary-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.warehouse-section, .finished-section, .history-section, .analytics-section,
.comparison-section, .batch-section, .ladder-section, .pricelist-section,
.template-section, .reference-section {
  border-radius: 12px;
}

/* ── Modern form fields ── */
.field input, .field select,
.deal-field input, .deal-field select,
.order-form-field input, .order-form-field select,
.sc-input-field input, .sc-coffee-field select, .sc-gc-input {
  background: #fff;
  border-color: #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus, .field select:focus,
.deal-field input:focus, .deal-field select:focus,
.order-form-field input:focus, .order-form-field select:focus,
.sc-input-field input:focus, .sc-coffee-field select:focus, .sc-gc-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  outline: none;
  background: #fff;
}

/* ── db-section: modern card look ── */
.db-section {
  border-radius: 12px;
  border-color: #e2e8f0;
}

.db-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.db-section-summary {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── h1: smaller app header ── */
h1 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
  margin-bottom: 16px;
}

/* ── Data table header: lighter ── */
.data-table thead th {
  color: #64748b;
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Orders tab header ── */
.orders-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  text-transform: none;
  letter-spacing: -0.2px;
}

/* ── History and analytics headers ── */
.history-section h2, .analytics-section > h2,
.warehouse-section > h2, .finished-section > h2,
.comparison-section > h2, .batch-section > h2,
.ladder-section > h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  text-transform: none;
  letter-spacing: -0.2px;
  margin-bottom: 16px;
}

/* ── Ord cards: cleaner ── */
.ord-card {
  border-radius: 10px;
  border-color: #e2e8f0;
}
.ord-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* ── Primary buttons: consistent blue ── */
button#calcBtn { background: #2563eb; border-radius: 8px; }
button#calcBtn:hover { background: #1d4ed8; }

.save-btn, .wh-save-btn, .fs-save-btn, .bt-save-btn, .tpl-save-btn,
.orders-add-btn, .order-save-btn, .pin-btn, .sc-apply-main-btn { border-radius: 8px; }

/* ── Primary badge/step ── */
.step-badge { border-radius: 8px; font-size: 12px; }

/* ── Scenario tabs: more refined ── */
.sc-tabs { border-bottom-color: #e2e8f0; }

.sc-tab-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  border-radius: 7px;
  color: #475569;
  font-size: 13px;
}
.sc-tab-btn:hover { background: #f1f5f9; color: #1e293b; }
.sc-tab-btn.sc-tab-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── Margin buttons ── */
.margin-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
  border-radius: 20px;
}
.margin-btn:hover { background: #f1f5f9; color: #1e293b; }
.margin-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── Top5 bar ── */
.t5-card {
  border-radius: 10px;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.t5-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* ── Result items ── */
.result-item {
  border-radius: 8px;
  border-color: #e2e8f0;
}

/* ── Login box ── */
.login-box { border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.18); }
.login-title { color: #0f172a; }
.pin-input { border-radius: 10px; border-color: #e2e8f0; background: #f8fafc; color: #0f172a; }
.pin-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.pin-btn { background: #2563eb; border-radius: 10px; }
.pin-btn:hover { background: #1d4ed8; }

/* ── Logout button ── */
.logout-btn { border-radius: 8px; font-size: 13px; }
.logout-btn:hover { color: #dc2626; border-color: #dc2626; }

/* ── Export/import buttons ── */
.export-btn { border-radius: 8px; }
.import-btn { border-radius: 8px; }
.clear-btn { border-radius: 8px; }

/* ── Pricelist section ── */
.pricelist-section { border-radius: 12px; }

/* ── Batch status badges ── */
.bt-active  { background: #dcfce7; color: #166534; }
.bt-archive { background: #f1f5f9; color: #64748b; }

/* ── Quick price card ── */
.quick-price-card { border-radius: 12px; border-width: 1px; }
.qp-title { color: #64748b; }
.qp-label { color: #94a3b8; }
.qp-val   { color: #0f172a; }

/* ── Lrs cells ── */
.lrs-cell { background: #f8fafc; border-radius: 10px; }
.lrs-label { color: #64748b; }
.lrs-price { color: #111827; }

/* ── Sc advice block ── */
.sc-advice { border-radius: 10px; border-color: #e2e8f0; }


/* ── App Header ── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px;
  margin-bottom: 4px;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-logo {
  font-size: 28px;
  line-height: 1;
}

.app-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.app-tagline {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}


/* ════════════════════════════════════════════════════
   СВОДКА ДНЯ (производственный план)
   ════════════════════════════════════════════════════ */

.day-summary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ds-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.ds-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ds-stat {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.ds-stat-new  { background: #dbeafe; color: #1d4ed8; }
.ds-stat-prog { background: #fef9c3; color: #854d0e; }
.ds-stat-done { background: #dcfce7; color: #166534; }

.ds-coffees {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ds-coffee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
}

.ds-coffee-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.ds-coffee-kg {
  font-size: 16px;
  font-weight: 700;
  color: #2563eb;
}

.ds-coffee-cnt {
  font-size: 12px;
  color: #94a3b8;
}

.ds-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.ds-total {
  font-size: 14px;
  color: #475569;
}

.ds-total strong {
  color: #0f172a;
  font-size: 16px;
}

.ds-start-btn {
  padding: 7px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ds-start-btn:hover { background: #1d4ed8; }

/* ════════════════════════════════════════════════════
   КЛИЕНТЫ
   ════════════════════════════════════════════════════ */

.clients-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.client-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow 0.12s;
}
.client-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

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

.client-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.client-card-actions {
  display: flex;
  gap: 4px;
}

.client-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.client-info-item {
  font-size: 13px;
  color: #475569;
}

.client-card-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.client-stat {
  font-size: 12px;
  color: #64748b;
}
.client-stat strong { color: #0f172a; }
.client-stat-muted  { color: #94a3b8; margin-left: auto; }

.client-card-notes {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* ════════════════════════════════════════════════════
   АНАЛИТИКА (KPI + бар-чарты)
   ════════════════════════════════════════════════════ */

.an-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .an-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.an-kpi-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.an-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -1px;
}

.an-kpi-unit {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0;
}

.an-kpi-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.an-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .an-charts-row { grid-template-columns: 1fr; }
}

.an-chart-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.an-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
}

.an-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.an-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 54px;
  align-items: center;
  gap: 10px;
}

.an-bar-label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-bar-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.an-bar-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.an-bar-val {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: right;
}


/* ── Зелёный бар (продукты в 1С) ── */
.an-bar-fill-green { background: #16a34a; }

/* ── Метка-кнопка импорта 1С ── */
.onec-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.onec-label:hover { background: #1d4ed8; }


/* ── Чипы загруженных периодов 1С ── */
.onec-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.onec-chips-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}

.onec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
}

.onec-chip-stat {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
}

.onec-chip-del {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
  transition: color 0.12s, background 0.12s;
}
.onec-chip-del:hover { color: #dc2626; background: #fee2e2; }

/* ── Полный ряд для графика по месяцам ── */
.an-chart-full {
  grid-column: 1 / -1;
}


/* ════════════════════════════════════════════════════
   ПИН-ПЭД (новый дизайн как на стройке)
   ════════════════════════════════════════════════════ */

.login-overlay {
  position: fixed;
  inset: 0;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  padding: 0 16px;
  box-shadow: none;
  background: none;
  border-radius: 0;
}

.login-logo {
  font-size: 44px;
  margin-bottom: 8px;
  line-height: 1;
}

.login-app-name {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.login-app-sub {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 36px;
}

/* Точки прогресса */
.pin-dots {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background 0.15s, transform 0.15s;
}

.pin-dot-filled {
  background: #0f172a;
  transform: scale(1.15);
}

.pin-error {
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  min-height: 20px;
}

/* Цифровой блок */
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.pin-key {
  height: 68px;
  background: #fff;
  border: none;
  border-radius: 18px;
  font-size: 26px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.1s, box-shadow 0.1s, transform 0.08s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pin-key:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.pin-key:active {
  background: #f1f5f9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: scale(0.95);
}

.pin-key-back {
  color: #64748b;
  font-size: 22px;
}

.pin-key-back:active { color: #0f172a; }