* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.6; } .hidden { display: none !important; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.header-with-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.header-logo {
  height: 72px;
  width: auto;
} h1 { color: #2c3e50; margin-bottom: 20px; } h2 { color: #34495e; font-size: 1.5em; margin-bottom: 10px; } h3 { color: #34495e; font-size: 1.2em; margin: 20px 0 10px 0; } .project-info { background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .actions { margin-bottom: 20px; } .btn-primary { background-color: #27ae60; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; } .btn-primary:hover { background-color: #229954; } .btn-secondary { background-color: #95a5a6; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 6px; cursor: pointer; margin-left: 10px; } .btn-secondary:hover { background-color: #7f8c8d; } .btn-danger { background-color: #e74c3c; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; } .btn-danger:hover { background-color: #c0392b; } .products-table-container { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #34495e; color: white; font-weight: 600; } tr:hover { background-color: #f9f9f9; } .child-row { background-color: #f0f8f0; padding-left: 30px; } .delete-btn { background-color: #e74c3c; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; width: 85px; font-size: 13px; line-height: 1.2; } .delete-btn:hover { background-color: #c0392b; }

/* Collapse/expand toggle for parent products */
.btn-collapse { background: none; border: none; cursor: pointer; font-size: 11px; color: #666; padding: 0 4px 0 0; line-height: 1; vertical-align: middle; }
.btn-collapse:hover { color: #333; }

/* Add child button */
.btn-add-child { background-color: #27ae60; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-right: 6px; width: 85px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.btn-add-child:hover { background-color: #229954; }
.btn-add-child .btn-plus { font-weight: bold; } .edit-btn { background-color: #3498db; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-right: 6px; width: 85px; font-size: 13px; line-height: 1.2; } .edit-btn:hover { background-color: #2980b9; } .summary { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.project-extras { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.planning-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.planning-row label { min-width: 160px; }
.planning-row input { width: 140px; }
.help-text { margin-top: 8px; font-size: 12px; color: #666; }

.customer-type-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.customer-type-row label { min-width: 160px; }
.customer-type-row select { width: 140px; padding: 8px; }

.treatment-step-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.treatment-step-row label { min-width: 160px; }
.treatment-step-row select { width: 140px; padding: 8px; }

.transport-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.transport-row label { min-width: 160px; cursor: pointer; }

.treatment-info {
  margin-top: 12px;
  margin-left: 170px;
  padding: 12px 15px;
  background: #f8f9fa;
  border-left: 3px solid #27ae60;
  border-radius: 0 6px 6px 0;
}

.treatment-info .help-text {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

.treatment-info .help-text strong {
  color: #2c3e50;
}

.save-indicator.hidden { display: none; }
.save-indicator { display: inline-block; margin-left: 10px; font-size: 12px; color: #666; }
.save-indicator.success { color: #27ae60; }
.save-indicator.error { color: #e74c3c; }

/* Tab navigation */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
}

.tab-btn {
  background: #f8f9fa;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  color: #666;
}

.tab-btn:hover {
  background: #e9ecef;
  color: #333;
}

.tab-btn.active {
  background: white;
  color: #27ae60;
  border-bottom-color: #27ae60;
  font-weight: 600;
}

.tab-content.hidden {
  display: none;
}

/* Parameters styles */
.parameters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.parameters-header h2 {
  margin: 0;
}

.param-mode-toggle {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  border-radius: 6px;
  padding: 3px;
}

.param-mode-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.param-mode-btn:hover {
  color: #333;
}

.param-mode-btn.active {
  background: white;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.param-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.param-actions button {
  padding: 10px 20px;
  font-size: 14px;
  margin-left: 0;
}

.param-mode-label {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
}

.parameters-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.parameters-section h3 {
  color: #2c3e50;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.parameters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

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

.param-row label {
  flex: 1;
  margin-bottom: 0;
  font-size: 14px;
}

.param-row input,
.param-row select {
  width: 150px;
  padding: 8px;
}

.param-value {
  font-family: monospace;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.save-status {
  margin-left: 15px;
  font-weight: 500;
}

.save-status.success {
  color: #27ae60;
}

.save-status.error {
  color: #e74c3c;
} /* Modal styles */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: white; margin: 5% auto; padding: 0; border-radius: 8px; width: 90%; max-width: 600px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .modal-header { padding: 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { margin: 0; } .close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover { color: #000; } form { padding: 20px; } .form-group { margin-bottom: 15px; } .form-row { display: flex; gap: 15px; } .form-row .form-group { flex: 1; } label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } input:focus, select:focus { outline: none; border-color: #27ae60; } .form-actions { margin-top: 20px; text-align: right; } /* Tab navigation */ .tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid #ddd; } .tab-btn { background-color: #f8f9fa; border: none; border-bottom: 3px solid transparent; padding: 12px 24px; font-size: 14px; cursor: pointer; transition: all 0.3s; color: #666; font-weight: 500; } .tab-btn:hover { background-color: #e9ecef; color: #333; } .tab-btn.active { background-color: white; border-bottom-color: #27ae60; color: #27ae60; } .tab-content.hidden { display: none; } /* Parameters page */ .parameters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .parameters-header h2 { margin: 0; color: #2c3e50; } .param-category { background: white; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; } .param-category-header { background-color: #34495e; color: white; padding: 15px 20px; font-weight: 600; font-size: 1.1em; } .param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .param-item { display: flex; flex-direction: column; gap: 5px; } .param-item label { font-weight: 500; color: #555; font-size: 13px; } .param-item input, .param-item select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; width: 100%; } .param-item input:focus, .param-item select:focus { outline: none; border-color: #27ae60; } .param-description { font-size: 12px; color: #888; margin-top: 2px; } .save-message { margin-left: 15px; color: #27ae60; font-weight: 500; opacity: 0; transition: opacity 0.3s; } .save-message.show { opacity: 1; }

/* Project status bar (own white box) */
.project-status-bar {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Project status section */
.project-status-section {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.project-status-header {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  gap: 12px;
}
.project-status-section h3,
.project-status-bar h3 {
  margin: 0;
  color: #2c3e50;
  white-space: nowrap;
  line-height: 1;
}
.project-name-label {
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  margin-bottom: 0;
}
.project-name-clickable {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f8f9fa;
  transition: border-color 0.15s, background 0.15s;
}
.project-name-clickable:hover {
  border-color: #ccc;
  background: #eef0f2;
}

/* Products header row */
.products-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.products-header-row h3 {
  margin: 0;
}

/* Summary sections and cost tables */
.summary-section { margin-bottom: 25px; }
.summary-section h4 { color: #2c3e50; font-size: 1.1em; margin: 0 0 15px 0; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.summary-item { background: #f8f9fa; padding: 12px 15px; border-radius: 6px; }
.summary-item strong { display: block; color: #34495e; font-size: 0.9em; margin-bottom: 4px; }

/* Cost table styling */
.cost-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.cost-table th, .cost-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }
.cost-table tr.sub td { padding-left: 25px; color: #666; font-size: 0.95em; }
.cost-table tr.sub td:first-child::before { content: "└ "; }
.cost-table tr.total td { font-weight: 600; background: #f0f0f0; border-top: 2px solid #34495e; }
.cost-table tr.subtotal td { font-weight: 500; background: #f8f9fa; }
.cost-table tr.grand-total td { font-weight: 700; font-size: 1.1em; background: #27ae60; color: white; }
.cost-table tr.grand-total td.num { font-size: 1.15em; }
.cost-table tr.note td { font-size: 0.85em; color: #888; font-style: italic; padding-top: 5px; }
.cost-table td.num { text-align: right; font-family: 'SF Mono', Monaco, monospace; }
.cost-table tfoot td { border-top: 2px solid #34495e; }

/* Material breakdown sub-rows */
.cost-table tr.sub.material-row td { padding-left: 30px; font-size: 0.9em; }
.cost-table tr.sub.material-row td:first-child { color: #555; }

/* Table number formatting */
td.num { text-align: right; font-family: 'SF Mono', Monaco, monospace; white-space: nowrap; }
td.num:empty::before { content: "-"; color: #999; }

/* Pricing section highlight */
.summary-section.pricing { background: linear-gradient(135deg, #f8fff9 0%, #f0f8f0 100%); padding: 15px; border-radius: 8px; border: 1px solid #d4edda; }

/* Responsive table */
.products-table-container { max-width: 100%; overflow-x: auto; }
#products-table { min-width: 1000px; }
#products-table { min-width: 1000px; }
#products-table th { font-size: 0.85em; white-space: nowrap; }
#products-table td { font-size: 0.9em; }
#products-table th:last-child,
#products-table td:last-child { min-width: 100px; }

/* Auto-filled dimensions indicator */
input.auto-filled {
  background-color: #e8f5e9;
  border-color: #27ae60;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Form hints for derived dimensions */
.form-hint {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  font-style: italic;
}

.form-hint.suggested {
  color: #27ae60;
}

/* Custom dialog overlay */
.dialog-overlay {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFadeIn 0.15s ease;
}

.dialog-overlay.hidden {
  display: none;
}

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dialog-box {
  background: white;
  border-radius: 8px;
  padding: 30px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: dialogSlideIn 0.15s ease;
}

@keyframes dialogSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dialog-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.dialog-message {
  color: #333;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
  word-break: break-word;
}

.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dialog-actions button {
  padding: 10px 24px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  min-width: 100px;
}

.dialog-btn-confirm {
  background-color: #27ae60;
  color: white;
}

.dialog-btn-confirm:hover {
  background-color: #229954;
}

.dialog-btn-danger {
  background-color: #e74c3c;
  color: white;
}

.dialog-btn-danger:hover {
  background-color: #c0392b;
}

.dialog-btn-cancel {
  background-color: #95a5a6;
  color: white;
}

.dialog-btn-cancel:hover {
  background-color: #7f8c8d;
}

.dialog-btn-ok {
  background-color: #27ae60;
  color: white;
}

.dialog-btn-ok:hover {
  background-color: #229954;
}

/* Parameter filter bar */
.param-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.param-filter-btn {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.param-filter-btn:hover {
  background: #e9ecef;
  color: #333;
  border-color: #ccc;
}

.param-filter-btn.active {
  background: #27ae60;
  color: white;
  border-color: #27ae60;
}

.parameters-section.hidden {
  display: none;
}

/* --- Export modal --- */
.export-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.export-item {
  padding: 14px 16px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.export-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.export-item .help-text {
  margin: 4px 0 10px;
  font-size: 12px;
  color: #666;
}

.export-item button {
  margin-top: 0;
}

.export-all {
  background: #eaf6ee;
  border-color: #b2d8bc;
}

.export-options {
  padding: 8px 4px;
}

.export-options hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 4px 0;
}

/* ═══ Login overlay (Fas 2) ═══ */
.login-overlay {
  position: fixed;
  inset: 0;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.login-box {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  width: 360px;
  text-align: center;
}
.login-logo {
  height: 64px;
  margin-bottom: 16px;
}
.login-box h2 {
  margin-bottom: 24px;
  color: #2c3e50;
}
.login-box .form-group {
  margin-bottom: 16px;
  text-align: left;
}
.login-box input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
.error-text {
  color: #e74c3c;
  font-size: 13px;
  min-height: 20px;
  margin-bottom: 8px;
}

/* Header user display */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-display {
  font-size: 13px;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.user-display:hover {
  background: #e8e8e8;
  color: #333;
}

/* User management table */
.user-table tbody tr { border-bottom: 1px solid #eee; }
.user-table tbody tr:hover { background: #f9f9f9; }
.user-table td { padding: 8px; vertical-align: middle; }
.user-table .badge-active { color: #27ae60; font-weight: 500; }
.user-table .badge-inactive { color: #999; font-weight: 500; }
.user-table input, .user-table select { font-size: 13px; padding: 4px 6px; }
.user-table .btn-icon { background: none; border: none; cursor: pointer; padding: 4px; font-size: 15px; color: #666; }
.user-table .btn-icon:hover { color: #333; }

/* ═══ Project top row: name + status on same line ═══ */
.project-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.project-name-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.project-title-input {
  display: none; /* replaced by .project-name-clickable */
}
.project-number-badge {
  background: #34495e;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ═══ Project meta rows ═══ */
.project-meta-row {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.customer-picker-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.customer-picker-row label { white-space: nowrap; }
.customer-picker-row select { min-width: 180px; padding: 8px; }

/* ═══ Project settings row (compact grid) ═══ */
.project-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.project-settings-row label {
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  margin-bottom: 0;
}
.project-settings-row select {
  width: auto;
  padding: 6px 8px;
  font-size: 14px;
}

/* ═══ Status flow (Fas 4) ═══ */
.project-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.status-flow {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.status-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: #e9ecef;
  color: #666;
  border: 1px solid #dee2e6;
  transition: background 0.15s, box-shadow 0.15s;
}
.status-step.status-past {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.status-step.status-current {
  background: #27ae60;
  color: white;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(39,174,96,0.3);
  border-color: #27ae60;
}
.status-step-label { white-space: nowrap; }
.status-arrow { color: #aaa; font-size: 14px; }
/* Steg med knappar — visa att de är interaktiva */
.status-step:has(button) {
  cursor: pointer;
}
.status-step:has(button):hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* Framåt-knapp — mer framträdande */
.status-advance-btn {
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 3px 8px !important;
  font-size: 12px !important;
  cursor: pointer;
  margin-left: 2px;
}
.status-advance-btn:hover {
  background: #219a52;
}
/* Bakåt-knapp */
.status-back-btn {
  border-radius: 4px;
  padding: 3px 8px !important;
  font-size: 12px !important;
  cursor: pointer;
}

/* Status badges (used in customers, production) */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-utkast { background: #e9ecef; color: #666; }
.status-offert_skickad { background: #fff3cd; color: #856404; }
.status-godkand { background: #d4edda; color: #155724; }
.status-material_bestallt { background: #cce5ff; color: #004085; }
.status-i_produktion { background: #d1ecf1; color: #0c5460; }
.status-levererad { background: #c3e6cb; color: #155724; }

/* ═══ Customers tab (Fas 3) ═══ */
.customers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.customers-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 220px;
}
.customers-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.customers-table th,
.customers-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.customers-table th {
  background: #34495e;
  color: white;
}
.customers-table tr.customer-row:hover td {
  background: #eaf2f8;
}

.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.btn-small.btn-primary { background: #27ae60; color: white; }
.btn-small.btn-secondary { background: #f2b8c6; color: #333; }
.btn-small.btn-danger { background: #e74c3c; color: white; margin-left: 4px; }

/* Customer detail card */
.customer-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 16px;
}
.customer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.customer-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-bottom: 16px;
}
.customer-invoicing {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.invoicing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mini-table th, .mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}
.mini-table th { background: #f0f0f0; color: #333; font-weight: 600; }

/* ═══ Production tab (Fas 5) ═══ */
.production-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.production-view-tabs {
  display: flex;
  gap: 4px;
}
.production-view-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.production-view-btn.active {
  background: #34495e;
  color: white;
  border-color: #34495e;
}
.production-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.production-table th,
.production-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.production-table th { background: #34495e; color: white; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.status-actions { display: flex; align-items: center; gap: 6px; justify-content: center; }
.status-action-label { font-size: 12px; font-weight: 500; color: #555; white-space: nowrap; }
.invoice-sent { color: #27ae60; font-weight: 500; }
.invoice-not-sent { color: #999; }

.materials-actions {
  margin-bottom: 16px;
}
.materials-project {
  background: white;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ═══ Mobile responsive ═══ */
@media (max-width: 768px) {
  .container { padding: 10px; }
  .header-with-logo { flex-wrap: wrap; gap: 8px; }
  .header-logo { height: 48px; }
  .header-right { gap: 8px; }

  .project-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  .project-name-group { width: 100%; }
  .project-name-clickable { flex: 1; }
  .project-status-row { width: 100%; overflow-x: auto; }
  .status-flow { flex-wrap: nowrap; }
  .status-step { padding: 3px 8px; font-size: 11px; }
  .status-arrow { font-size: 12px; }

  .project-selector-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .project-selector-row select { width: 100%; }

  .project-meta-row { flex-direction: column; gap: 8px; align-items: stretch; }
  .customer-type-row { width: 100%; }
  .customer-picker-row { width: 100%; }
  .customer-picker-row select { flex: 1; min-width: 0; }
  .project-settings-row { flex-direction: column; align-items: flex-start; gap: 6px; }

  .tabs { flex-wrap: wrap; gap: 4px; }
  .tab-btn { flex: 1; min-width: 70px; padding: 8px 6px; font-size: 13px; }

  .btn-primary, .btn-secondary, .btn-danger { padding: 8px 14px; font-size: 13px; }

  .products-table-container { padding: 10px; }
  th, td { padding: 8px 6px; font-size: 13px; }

  .production-header { flex-direction: column; gap: 10px; align-items: stretch; }
  .production-view-tabs { width: 100%; }
  .production-view-btn { flex: 1; text-align: center; }
  .production-table th, .production-table td { padding: 8px 6px; font-size: 12px; }

  .customers-header { flex-direction: column; gap: 10px; align-items: stretch; }
  .customers-actions { width: 100%; }
  .search-input { flex: 1; width: auto; }

  .customer-info-grid { grid-template-columns: 1fr; }
  .invoicing-grid { grid-template-columns: 1fr; }

  .login-box { width: 90%; padding: 24px; }

  .modal-content { margin: 10px; max-height: 90vh; overflow-y: auto; }
}