/* app/material/material.css */
.material-view { padding: 16px; }
.material-calc { display: flex; flex-direction: column; gap: 16px; }
.material-placeholder {
  padding: 24px; text-align: center; color: #64748b;
  background: #f8fafc; border-radius: 8px;
}

/* Grid picker */
.grid-picker { display: flex; flex-direction: column; gap: 6px; }
.grid-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #f5f5f5; border-radius: 6px; }
.grid-row-top { display: flex; align-items: center; gap: 8px; }
.grid-row-bottom { display: flex; align-items: center; gap: 6px; padding-left: 68px; /* align with label width + gap */ }
.grid-row-label { font-weight: 600; min-width: 60px; color: #334155; }
.grid-slots { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.grid-slot {
  width: 28px; height: 40px; background: #e5e7eb; border-radius: 3px;
  cursor: pointer; transition: background 0.1s;
}
@media (hover: hover) {
  .grid-slot.preview { background: #bfdbfe; }
}
.grid-slot.filled { background: #3b82f6; }
.grid-row-count { min-width: 50px; font-weight: 600; text-align: right; }
.grid-row-actions { display: flex; gap: 4px; }
.grid-btn {
  padding: 4px 8px; background: #e0e7ff; border: 1px solid #c7d2fe;
  border-radius: 3px; cursor: pointer; font-size: 0.9em;
}
.grid-btn:hover { background: #c7d2fe; }
.grid-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.grid-add-row {
  align-self: flex-start; padding: 6px 12px; background: #dbeafe;
  border: 1px solid #93c5fd; border-radius: 4px; cursor: pointer; font-weight: 500;
}
.grid-btn-delete { background: #fee2e2; border-color: #fca5a5; }
.grid-btn-delete:hover { background: #fca5a5; }

/* Customer picker modal */
.cp-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; z-index: 1000;
}
.cp-modal { background: white; border-radius: 8px; width: 480px; max-width: 90vw; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.cp-input { width: 100%; padding: 8px; font-size: 1em; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; margin-bottom: 8px; }
.cp-results { max-height: 360px; overflow-y: auto; }
.cp-item { padding: 8px; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; gap: 10px; }
.cp-item:hover, .cp-item.active { background: #dbeafe; }
.cp-empty { padding: 16px; text-align: center; color: #64748b; }
.cp-item-id { font-family: monospace; font-size: 0.85em; color: #475569; min-width: 80px; }
.cp-item-name { flex: 1; }
.cp-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap; min-width: 78px; text-align: center;
}
.cp-badge-real  { background: #dcfce7; color: #15803d; }
.cp-badge-offer { background: #fef3c7; color: #92400e; }

/* Form */
.material-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 12px; background: #f8fafc; border-radius: 6px; }
.material-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; font-weight: 600; }
/* Checkbox-style label: row layout (checkbox vlevo + text), span všech sloupců. */
.material-form label.material-checkbox-label { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; grid-column: 1 / -1; padding: 6px 0; }
.material-form label.material-checkbox-label input[type="checkbox"] { width: auto; accent-color: var(--c-primary, #4f46e5); }
.material-form label.material-checkbox-label span { font-weight: 500; color: var(--c-text, #111827); user-select: none; }

/* Warehouse toggle (volitelný seznam pro skladníka) */
.material-warehouse-toggle { background: #fef3c7; border: 1px solid #fcd34d; }

/* Warehouse result panel (pod tabulkou totals) */
.material-warehouse {
  margin-top: 16px; padding: 12px 16px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px;
}
.material-warehouse h3 { font-size: 1em; margin: 0 0 8px; color: #92400e; }
.material-warehouse-table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-bottom: 10px; }
.material-warehouse-table th { text-align: left; padding: 4px 8px; border-bottom: 1px solid #fcd34d; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; color: #78350f; }
.material-warehouse-table td { padding: 4px 8px; border-bottom: 1px solid rgba(252,211,77,0.4); }
.material-warehouse-table td.muted { color: #78350f; font-style: italic; font-size: 0.9em; }
.material-warehouse-table td.num { text-align: right; white-space: nowrap; }
.material-warehouse-subtitle { margin: 12px 0 4px; font-size: 0.9em; color: #78350f; }
.material-warehouse-generic { margin: 0 0 4px 22px; padding: 0; font-size: 0.9em; color: #78350f; }
.material-warehouse-generic li { margin: 2px 0; }
.material-form input, .material-form select { padding: 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 1em; }
.material-form input.invalid, .material-form select.invalid { border-color: #ef4444; }
.material-form textarea { padding: 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-family: inherit; font-size: 0.9em; min-height: 50px; resize: vertical; }
.form-poznamka { grid-column: 1 / -1; }

/* Actions + result */
.material-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.material-btn-primary { padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 1em; }
.material-btn-primary:hover { background: #2563eb; }
.material-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.material-result { background: #ecfdf5; border-left: 4px solid #10b981; padding: 12px; border-radius: 4px; margin-top: 12px; }
.material-result table { width: 100%; border-collapse: collapse; }
.material-result td { padding: 4px 8px; }
.material-result td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.material-warning { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 8px 12px; border-radius: 4px; margin-top: 8px; font-size: 0.9em; }
.material-hint { padding: 12px; text-align: center; color: #64748b; font-style: italic; }

/* Layout */
.layout-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.layout-two-col .col-right { position: sticky; top: 16px; align-self: start; }
@media (max-width: 900px) {
  .layout-two-col { grid-template-columns: 1fr; }
  .layout-two-col .col-right { position: static; }
}

.material-status { padding: 12px; background: #d1fae5; border-radius: 4px; margin-top: 12px; }
.material-status a { color: #059669; font-weight: 600; }

.material-view-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid #e2e8f0;
}
.material-view-header h1 { margin: 0; font-size: 1.5em; }
.material-customer-badge {
  background: #dbeafe; color: #1e40af; padding: 4px 10px; border-radius: 12px;
  font-size: 0.9em; font-weight: 500;
}

/* Multi-block UI */
.material-block {
  border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; overflow: hidden;
}
.material-block-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f1f5f9; cursor: pointer;
  user-select: none; border-bottom: 1px solid #e2e8f0;
}
.material-block-header:hover { background: #e2e8f0; }
.material-block-chevron { font-size: 0.9em; color: #64748b; flex-shrink: 0; }
.material-block-title { font-weight: 700; color: #1e293b; font-size: 0.95em; flex-shrink: 0; }
.material-block-summary { color: #64748b; font-size: 0.88em; flex: 1; }
.material-block-delete {
  background: none; border: none; cursor: pointer; font-size: 1em; padding: 2px 6px;
  border-radius: 4px; color: #94a3b8; line-height: 1; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.material-block-delete:hover { background: #fee2e2; color: #ef4444; }
.material-block-body { padding: 12px; }
.material-block-add-row {
  display: flex; margin-bottom: 12px;
}
.material-btn-secondary {
  padding: 8px 16px; background: #e0e7ff; color: #3730a3;
  border: 1px solid #c7d2fe; border-radius: 4px; font-weight: 600;
  cursor: pointer; font-size: 0.95em;
}
.material-btn-secondary:hover { background: #c7d2fe; }
.material-note-area {
  margin-top: 4px;
}
.material-result-label {
  font-size: 0.85em; font-weight: 600; color: #059669; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.material-per-block-details {
  margin-top: 12px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;
}
.material-per-block-details > summary {
  padding: 8px 12px; background: #f8fafc; cursor: pointer; font-size: 0.9em;
  font-weight: 600; color: #64748b; user-select: none;
}
.material-per-block-details > summary:hover { background: #f1f5f9; }
.material-block-detail { padding: 0 12px 8px; }
.material-block-detail > summary {
  padding: 6px 0; cursor: pointer; font-weight: 600; font-size: 0.88em;
  color: #1e293b; user-select: none; list-style: none;
}
.material-block-detail > summary::before { content: '▾ '; }
.material-block-detail[open] > summary::before { content: '▾ '; }
.material-block-detail:not([open]) > summary::before { content: '▸ '; }
.material-block-detail table { margin-top: 4px; }

/* Load picker — Předchozí výpočty */
.material-load-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 0.9em;
}
.material-load-picker:empty { display: none; }
.load-picker-label { font-weight: 600; color: #92400e; }
#load-picker-select { padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px; }