/* FinalReview.css */ .final-review { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8f9fa; min-height: 100vh; } .review-header { text-align: center; margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #6f42c1, #5a32a3); color: white; border-radius: 12px; } .review-header h2 { margin: 0 0 10px 0; font-size: 2rem; font-weight: 700; } .review-header p { margin: 0; font-size: 1.1rem; opacity: 0.9; } .quote-readiness-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -12px 0 24px; padding: 18px 20px; border: 2px solid; border-radius: 12px; background: #fff; } .quote-readiness-banner.blocked { border-color: #dc2626; background: #fef2f2; color: #7f1d1d; } .quote-readiness-banner.pending { border-color: #d97706; background: #fffbeb; color: #78350f; } .quote-readiness-banner.ready { border-color: #16a34a; background: #f0fdf4; color: #14532d; } .quote-readiness-banner strong, .quote-readiness-kicker { display: block; } .quote-readiness-kicker { margin-bottom: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .quote-readiness-banner strong { font-size: 1.08rem; } .quote-readiness-banner p { margin: 5px 0 0; line-height: 1.4; } .quote-readiness-banner button { min-width: 112px; min-height: 44px; border: 0; border-radius: 8px; background: #132238; color: #fff; cursor: pointer; font-weight: 800; } @media (max-width: 640px) { .quote-readiness-banner { align-items: stretch; flex-direction: column; } } .review-sections { display: flex; flex-direction: column; gap: 25px; } .review-section { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border: 1px solid #e0e0e0; } .review-section h3 { margin: 0 0 20px 0; font-size: 1.3rem; color: #2c5530; font-weight: 600; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; } .project-ai-validation { border: 1px solid #b9c2cc; border-left: 4px solid #365f73; padding: 16px; margin-bottom: 16px; background: #f7f9fa; } .project-ai-validation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .project-ai-validation-header p, .project-ai-result p { margin: 4px 0 0; color: #4b5563; } .project-ai-progress { display: grid; gap: 8px; margin-top: 14px; color: #374151; font-size: 14px; } .project-ai-progress-bar { height: 6px; overflow: hidden; background: #dbe1e5; } .project-ai-progress-bar span { display: block; width: 35%; height: 100%; background: #365f73; animation: project-ai-progress 1.4s ease-in-out infinite; } @keyframes project-ai-progress { from { transform: translateX(-100%); } to { transform: translateX(300%); } } .project-ai-message, .project-ai-result { margin-top: 14px; padding: 12px; border: 1px solid #cbd5e1; background: #fff; } .project-ai-message.error { border-color: #dc2626; color: #991b1b; } .project-ai-message.warning, .project-ai-result.warnings { border-color: #d97706; color: #78350f; } .project-ai-result.passed { border-color: #16803c; color: #14532d; } .project-ai-result ul { margin: 10px 0 0; padding-left: 20px; } .project-ai-result li + li { margin-top: 8px; } @media (max-width: 640px) { .project-ai-validation-header { align-items: stretch; flex-direction: column; } } /* Project Info */ .project-info { border-left: 4px solid #17a2b8; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } .info-item { display: flex; flex-direction: column; gap: 5px; } .info-item label { font-weight: 600; color: #555; font-size: 0.9rem; } .info-item span { font-size: 1rem; color: #333; } /* Geometry Info */ .geometry-info { border-left: 4px solid #28a745; } .geometry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .geo-item { display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 10px; background: #f8f9fa; border-radius: 6px; } .geo-item.total-area { background: linear-gradient(135deg, #e8f5e8, #f0f8f0); border: 1px solid #28a745; font-weight: 600; } .geo-item label { font-size: 0.85rem; color: #666; font-weight: 500; } .geo-item span { font-size: 1.1rem; font-weight: 600; color: #2c5530; } /* Materials Review */ .materials-review { border-left: 4px solid #4a90e2; } /* Excel-style table - RIGTIG TABLE ELEMENT MED FASTE KOLONNER */ .materials-table, .labor-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: "Calibri", "Segoe UI", system-ui, sans-serif; font-size: 14px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.08); border: 1px solid #c0c0c0; } .materials-table th, .materials-table td, .labor-table th, .labor-table td { border: 1px solid #d0d0d0; padding: 6px 10px; vertical-align: middle; overflow: hidden; text-overflow: clip; white-space: normal; word-break: break-word; } .materials-table thead th, .labor-table thead th { background-color: #f2f2f2; font-weight: 600; text-align: center; font-size: 13px; letter-spacing: 0.3px; padding: 10px 8px; } .materials-table .text-left { text-align: left; padding-left: 12px; } .materials-table .text-center, .labor-table .text-center { text-align: center; } .materials-table .text-right, .labor-table .text-right { text-align: right; padding-right: 12px; } .materials-table .number-cell, .labor-table .number-cell { text-align: right; font-variant-numeric: tabular-nums; padding-right: 12px; } .materials-table tbody tr:nth-child(even), .labor-table tbody tr:nth-child(even) { background-color: #fafafa; } .materials-table tbody tr:hover, .labor-table tbody tr:hover { background-color: #f0f8ff; } .materials-table tfoot td, .labor-table tfoot td { background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%); font-weight: 700; border-top: 2px solid #808080; padding: 12px 10px; } /* Gammel grid-baseret styling (behold for bagudkompatibilitet hvis nødvendigt) */ .table-header { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(90px, 0.8fr) minmax(70px, 0.6fr) minmax(120px, 0.9fr) minmax(140px, 1fr); background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%); border-bottom: 2px solid #808080; } .table-header span { padding: 12px 8px; font-weight: 700; color: #000; text-align: center; border-right: 1px solid #c0c0c0; font-size: 11pt; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; } .table-header span:first-child { text-align: left; padding-left: 12px; justify-content: flex-start; } .table-header span:last-child { border-right: none; text-align: center; justify-content: center; } .labor-table .table-header { grid-template-columns: minmax(240px, 2fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr) minmax(140px, 1fr); } .table-row { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(90px, 0.8fr) minmax(70px, 0.6fr) minmax(120px, 0.9fr) minmax(140px, 1fr); border-bottom: 1px solid #d4d4d4; background: white !important; transition: background-color 0.1s; align-items: center; } .table-row:nth-child(even) { background: #fafafa !important; } .table-row:hover { background: #f0f8ff !important; } .table-row > span, .table-row > input { padding: 10px 8px; border-right: 1px solid #e0e0e0; text-align: center; font-size: 10.5pt; line-height: 1.3; display: flex; align-items: flex-start; justify-content: center; min-width: 0; } .table-row > span:first-child, .table-row > .material-name { text-align: left; padding-left: 12px; font-weight: 500; color: #1a1a1a; border-right: 1px solid #c0c0c0; justify-content: flex-start; } .table-row > span:last-child { border-right: none; text-align: center; font-weight: 600; justify-content: center; } .table-row > input { background: white !important; border: none !important; border-right: 1px solid #e0e0e0 !important; text-align: center; padding: 10px 8px !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 10.5pt; color: #000; } .table-row > input:focus { outline: 2px solid #2e75b6 !important; outline-offset: -2px; background: #fff8e1 !important; box-shadow: none !important; } .labor-table .table-row { grid-template-columns: minmax(240px, 2fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr) minmax(140px, 1fr); } .material-name, .task-info { white-space: normal; word-break: break-word; } .pdf-inline-preview { margin-top: 14px; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; } .pdf-preview-frame { width: 100%; min-height: 560px; border: 0; background: #fff; } /* Fjern browser autofill gul baggrund - ULTRA AGGRESSIV */ .editable-input, .quantity-input, .price-input, input[type="number"], .table-row input { background-color: white !important; background-image: none !important; background: white !important; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; } .editable-input:-webkit-autofill, .editable-input:-webkit-autofill:hover, .editable-input:-webkit-autofill:focus, .editable-input:-webkit-autofill:active, .quantity-input:-webkit-autofill, .price-input:-webkit-autofill, input[type="number"]:-webkit-autofill, .table-row input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; background-color: white !important; background: white !important; background-image: none !important; -webkit-text-fill-color: #000 !important; transition: background-color 5000s ease-in-out 0s; caret-color: #000 !important; color: #000 !important; } .materials-table input, .materials-table input:-webkit-autofill, .labor-table input, .labor-table input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; background: white !important; background-color: white !important; -webkit-text-fill-color: #000 !important; } .material-name { font-weight: 500; color: #1a1a1a; text-align: left; padding-left: 12px !important; border-right: 1px solid #c0c0c0 !important; background: transparent !important; } .total { font-weight: 700; color: #000; text-align: right; padding-right: 16px !important; } .table-total { display: grid; grid-template-columns: 2fr 0.8fr 0.6fr 0.9fr 1fr; padding: 12px 0; background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%); border-top: 2px solid #808080; border-bottom: 1px solid #808080; font-weight: 700; font-size: 11pt; align-items: center; } .table-total span:first-child { grid-column: 1 / 5; text-align: right; padding-right: 12px; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: flex-end; } .table-total span:last-child { text-align: center; font-weight: 700; color: #000; font-size: 11.5pt; display: flex; align-items: center; justify-content: center; } .labor-table .table-total { grid-template-columns: 2fr 0.9fr 0.9fr 1fr; } .labor-table .table-total span:first-child { grid-column: 1 / 4; } .total-amount { color: #000; font-size: 11.5pt; font-weight: 700; text-align: right; padding-right: 16px; } /* Editable inputs - Excel style med table support */ .editable-input, .materials-table input, .labor-table input { width: 100%; padding: 6px 10px; border: none; border-radius: 0; font-size: 14px; font-family: "Calibri", "Segoe UI", system-ui, sans-serif; background: white !important; text-align: right; box-sizing: border-box; color: #000; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; } .editable-input:focus, .materials-table input:focus, .labor-table input:focus { outline: 2px solid #2e75b6 !important; outline-offset: -2px; background: #fff8e1 !important; box-shadow: none; } .total-amount { color: #27ae60; font-size: 1.2rem; font-weight: 700; } /* Labor Review */ .labor-review { border-left: 4px solid #fd7e14; } /* Financial Summary */ .financial-summary { border-left: 4px solid #6f42c1; } .financial-breakdown { background: #f8f9fa; border-radius: 8px; padding: 20px; } .financial-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1rem; } .financial-row.subtotal { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 10px 0; padding: 12px 0; font-weight: 600; } .financial-row.total { border-top: 2px solid #6f42c1; margin-top: 15px; padding-top: 15px; font-size: 1.2rem; color: #6f42c1; } /* Ordering Section */ .ordering-section { border-left: 4px solid #dc3545; } .ordering-info p { margin-bottom: 15px; line-height: 1.5; color: #555; } .details-toggle { background: none; border: none; color: #6f42c1; cursor: pointer; font-size: 0.9rem; padding: 5px 0; text-decoration: underline; } .ordering-details { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #6f42c1; } .ordering-details h4 { margin: 0 0 10px 0; color: #6f42c1; } .ordering-details ul { margin: 0; padding-left: 20px; } .ordering-details li { margin-bottom: 5px; color: #555; } /* Submit Result */ .submit-result { margin-top: 20px; padding: 15px; border-radius: 8px; border-left: 4px solid; } .submit-result.success { background: #d4edda; border-color: #28a745; color: #155724; } .submit-result.error { background: #f8d7da; border-color: #dc3545; color: #721c24; } .submit-result h4 { margin: 0 0 8px 0; } .submit-result p { margin: 0; line-height: 1.4; } /* No Data */ .no-data { text-align: center; padding: 40px; color: #666; font-style: italic; } /* Review Actions */ .review-actions { display: flex; gap: 20px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .final-review .back-btn, .final-review .submit-btn { padding: 15px 30px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-width: 200px; } .final-review .back-btn { background: #6c757d; color: white; } .final-review .back-btn:hover:not(:disabled) { background: #5a6268; transform: translateY(-2px); } .final-review .submit-btn { background: linear-gradient(135deg, #28a745, #218838); color: white; } .final-review .submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); } .final-review .submit-btn:disabled, .final-review .back-btn:disabled { background: #6c757d; cursor: not-allowed; opacity: 0.6; transform: none; } /* Responsive Design */ @media (max-width: 768px) { .final-review { padding: 15px; } .review-header h2 { font-size: 1.5rem; } .table-header, .table-row { grid-template-columns: 1fr; text-align: left; } .table-header { display: none; } .table-row { display: block; padding: 15px; border: 1px solid #e0e0e0; margin-bottom: 10px; border-radius: 6px; } .table-row > span { display: block; margin-bottom: 5px; } .table-row > span:before { content: attr(data-label) ': '; font-weight: 600; color: #555; } .info-grid, .geometry-grid { grid-template-columns: 1fr; } .review-actions { flex-direction: column; } .final-review .back-btn, .final-review .submit-btn { min-width: auto; width: 100%; } } /* Animation */ @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .review-section { animation: slideIn 0.6s ease-out; } .table-row { animation: slideIn 0.3s ease-out; } /* Tilbudstekst Section */ .quote-text-section { background: linear-gradient(135deg, #f8f9fa, #e9ecef); } .quote-generation-controls { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .quote-type-selector { display: flex; gap: 20px; padding: 15px; background: white; border-radius: 8px; border: 2px solid #dee2e6; } .quote-type-selector label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 15px; border-radius: 6px; transition: background 0.3s; } .quote-type-selector label:hover { background: #f8f9fa; } .quote-type-selector input[type="radio"] { width: 18px; height: 18px; cursor: pointer; } .quote-type-selector span { font-size: 15px; font-weight: 500; } .ai-instructions { display: flex; flex-direction: column; gap: 8px; } .ai-instructions label { font-weight: 600; color: #495057; } .ai-instructions textarea { padding: 12px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; transition: border-color 0.3s; } .ai-instructions textarea:focus { outline: none; border-color: #6f42c1; } .generate-quote-btn { padding: 14px 24px; background: linear-gradient(135deg, #6f42c1, #5a32a3); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .generate-quote-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3); } .generate-quote-btn:disabled { opacity: 0.6; cursor: not-allowed; } .quote-editor { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; } .quote-editor label { font-weight: 600; color: #495057; font-size: 15px; } .quote-textarea { width: 100%; padding: 15px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; line-height: 1.6; resize: vertical; transition: border-color 0.3s; } .quote-textarea:focus { outline: none; border-color: #6f42c1; } .quote-actions { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } .pdf-status { margin-top: 10px; font-size: 13px; padding: 10px 12px; border-radius: 8px; border: 1px solid #dee2e6; } .pdf-status.fresh { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; } .pdf-status.stale { background: #fff8e1; border-color: #ffe082; color: #7c4d00; } .generate-pdf-btn { padding: 12px 24px; background: linear-gradient(135deg, #28a745, #218838); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .generate-pdf-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .generate-pdf-btn:disabled { opacity: 0.6; cursor: not-allowed; } .view-pdf-btn { padding: 12px 24px; background: #17a2b8; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .view-pdf-btn:hover { background: #138496; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3); } .download-pdf-btn { padding: 12px 24px; background: #495057; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .download-pdf-btn:hover { background: #343a40; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(73, 80, 87, 0.3); } .quote-preview-card { border: 1px solid #ced4da; border-radius: 10px; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } .quote-preview-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e9ecef; background: linear-gradient(90deg, #f8f9fa, #ffffff); } .quote-preview-header h4 { margin: 0; font-size: 15px; color: #212529; } .quote-preview-header span { font-size: 12px; color: #6c757d; } .quote-preview-body { padding: 18px 20px; background: #fffefb; font-family: Georgia, 'Times New Roman', serif; line-height: 1.55; color: #212529; border-left: 4px solid #6f42c1; } .quote-preview-body p { margin: 0 0 8px 0; white-space: pre-wrap; } /* Legacy link style - kept for backwards compatibility */ .view-pdf-link { padding: 12px 24px; background: #17a2b8; color: white; text-decoration: none; border-radius: 8px; font-size: 15px; font-weight: 600; transition: all 0.3s; display: inline-block; } .view-pdf-link:hover { background: #138496; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3); } .quote-hint { padding: 20px; background: #fff3cd; border: 2px dashed #ffc107; border-radius: 8px; color: #856404; text-align: center; font-style: italic; margin-top: 15px; } /* Editable inputs for prices and hours */ .editable-table .editable-row { align-items: center; background: white !important; } .editable-table .table-row { background: white !important; } .editable-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 14px; font-weight: 400; transition: all 0.2s; background: white !important; width: 80px; text-align: center; } .editable-input:focus { outline: none; border-color: #4a90e2; background: white !important; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1); } /* Fjern browser autofill gul baggrund - ULTRA AGGRESSIV */ .editable-input, .quantity-input, .price-input, input[type="number"], .table-row input { background-color: white !important; background-image: none !important; background: white !important; } .editable-input:-webkit-autofill, .editable-input:-webkit-autofill:hover, .editable-input:-webkit-autofill:focus, .editable-input:-webkit-autofill:active, .quantity-input:-webkit-autofill, .price-input:-webkit-autofill, input[type="number"]:-webkit-autofill, .table-row input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; background-color: white !important; background: white !important; background-image: none !important; -webkit-text-fill-color: #000 !important; transition: background-color 5000s ease-in-out 0s; caret-color: #000 !important; color: #000 !important; } /* Fjern gul highlighting for alle input felter i tabellen */ .editable-table input, .editable-table input:-webkit-autofill, .editable-table input:-webkit-autofill:hover, .editable-table input:-webkit-autofill:focus, .materials-table input, .materials-table input:-webkit-autofill, .labor-table input, .labor-table input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; background-color: white !important; background: white !important; background-image: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; } /* Force white background på alle table rows */ .editable-table .table-row, .editable-table .editable-row, .materials-table .table-row, .labor-table .table-row { background: white !important; background-color: white !important; background-image: none !important; } /* Ekstra aggressiv - target alle inputs */ input[type="number"].editable-input { background-color: white !important; background: white !important; background-image: none !important; } input[type="number"].editable-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000 !important; background: white !important; background-color: white !important; color: #000 !important; } .editable-input:focus { outline: none; border-color: #6f42c1; background: white !important; box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1); } .editable-input.quantity-input, .editable-input.hours-input { width: 70px; } .editable-input.price-input, .editable-input.rate-input { width: 90px; } .profit-margin-row { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; background: #fff3cd; padding: 12px; border-radius: 8px; margin: 10px 0; } .profit-margin-row label { font-weight: 600; color: #856404; } .profit-input { width: 80px !important; background: white; } .profit-amount { font-weight: 600; color: #856404; min-width: 100px; text-align: right; } .final-review .action-btn { width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 10px 14px; white-space: normal; text-align: center; } .review-readiness-summary { margin: 10px 0 0; font-weight: 700; } .material-link-review { margin: 16px 0; padding: 16px; border: 1px solid #f59e0b; border-radius: 10px; background: #fffbeb; } .material-link-review button { min-height: 44px; padding: 10px 14px; } .material-link-review-list { display: grid; gap: 12px; margin-top: 14px; } .material-link-review-row { padding: 12px; border: 1px solid #fde68a; border-radius: 8px; background: #fff; } .material-link-review-row p { margin: 8px 0; }