body { margin: 0; position: relative; min-height: 100vh; } canvas { position: absolute; top: 0; left: 0; z-index: 1; } .buttons-container { justify-self: center !important; } /* Lean control slider */ .lean-slider { position: fixed; top: 50%; left: 16px; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; z-index: 9999; flex-direction: column; } .lean-slide { display: none; flex-direction: column; gap: 8px; } .lean-slide.active { display: flex; } .lean-title { font-size: 12px; font-weight: 600; color: #0b3b5a; background: #fff; padding: 4px 8px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); margin-bottom: 4px; } .lean-arrow { width: 32px; height: 32px; border: none; background: #0b3b5a; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; font-weight: 700; line-height: 1; } .lean-arrow:hover { background: #0d4f7a; } .lean-arrow:active { transform: translateY(1px); } .lean-slide .btn { margin: 0; } /* When Bootstrap adds .modal-open to the , disable canvas pointer events */ body.modal-open canvas { pointer-events: none !important; } .square-button { position: fixed; top: 5%; right: 0; transform: translate(0, -50%); z-index: 100; width: 50px; /* Square button */ height: 50px; /* Square button */ background-color: #007bff; /* Bootstrap primary color */ border: none; border-radius: 5px; /* Optional rounded corners */ color: white; /* Text color */ font-size: 18px; /* Adjust size of `<<` */ font-weight: bold; text-align: center; /* Center the content */ line-height: 50px; /* Align icons vertically */ cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional shadow */ } .accordion-collapse { transition: all 0.5s ease; /* Smooth transition with custom duration */ } .design-option { transition: 0.3s; } .design-option:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: scale(1.05); } #garageSummaryModal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } #garageSummaryContent { max-height: 90vh; max-width: 1000px; overflow-y: auto; overflow-x: auto; background: white; padding: 2rem; border: 2px solid #000; box-shadow: 0 0 10px rgba(0,0,0,0.5); } @media print { #garageSummaryModal { position: static !important; height: auto !important; background: none !important; } #garageSummaryContent { max-height: none !important; overflow: visible !important; border: none !important; box-shadow: none !important; } } #sidebarContainer { height: 100vh; /* Full height */ overflow-y: auto; /* Enable scroll */ padding-right: 8px; /* prevent scrollbar overlap */ } /* button#showGarageSummary { margin-top: 1rem; } */ .clickable-image:hover { border-color: #007bff; transform: scale(1.05); } .clickable-image { cursor: pointer; border: 2px solid transparent; border-radius: 6px; transition: border-color 0.2s, box-shadow 0.2s; } .clickable-image.active { border-color: #007bff; /* Bootstrap primary blue */ box-shadow: 0 0 8px rgba(0,123,255,0.6); } .fixed-footer { position: fixed; bottom: 0; right: 0; /* adjust depending on sidebar position */ width: 380px; /* match your sidebar width */ background: #fff; border-top: 1px solid #ccc; padding: 0.75rem; display: flex; justify-content: center; /* center the buttons */ gap: 0.5rem; z-index: 9999; } .fixed-footer .btn { min-width: 90px; /* keeps buttons same size */ } .modal-backdrop { z-index: 10500 !important; } .modal { z-index: 10600 !important; } /* Makes the button appear faded/inactive */ .lean-btn-faded { opacity: 0.4; filter: brightness(0.9); transition: opacity 0.3s ease, filter 0.3s ease; } .lean-col { display:flex; flex-direction:column; gap:10px; width:60px; /* important! */ } /********************************************************/ /****************Lean-Tos on the panel*******************/ /********************************************************/ .segment-control { position: relative; display: flex; justify-content: space-between; background: #e5e5e5; border-radius: 40px; padding: 5px; height: 42px; user-select: none; align-items: center; /* 👉 This is where the width should be */ min-width: 180px; /* adjust as needed */ } .segment-control input[type="radio"] {display: none;} .segment-control label { flex: 1; text-align: center; z-index: 2; padding: 6px 0; cursor: pointer; font-weight: 500; border-radius: 40px; } .segment-control .segment-slider { position: absolute; top: 5px; bottom: 5px; width: calc(33.33% - 10px); /* correct width */ background: #007bff; border-radius: 40px; transition: 0.3s ease; z-index: 1; } /********************************************************/ /* 👉 Correct slider positions */ /********************************************************/ /* Left */ input[id$="left"]:checked ~ .segment-slider { left: 5px; } /* Center */ input[id$="center"]:checked ~ .segment-slider { left: calc(33.33% + 5px); } /* Right */ input[id$="right"]:checked ~ .segment-slider { left: calc(66.66% + 5px); } /* White label for active */ input[id$="left"]:checked + label, input[id$="center"]:checked + label, input[id$="right"]:checked + label { color: #fff; } /********************************************************/ /* Slider width for 3 options */ /********************************************************/ /* 3 options = slider width */ input[id*="pitch"]:checked ~ .segment-slider { width: calc(33.33% - 10px); } /* Left position (3:12) */ input[id*="pitch-3-12"]:checked ~ .segment-slider { left: 5px; } /* Center position (2:12) */ input[id*="pitch-2-12"]:checked ~ .segment-slider { left: calc(33.33% + 5px); } /* Right position (1:12) */ input[id*="pitch-1-12"]:checked ~ .segment-slider { left: calc(66.66% + 5px); } /* White label */ input[id*="pitch-3-12"]:checked + label, input[id*="pitch-2-12"]:checked + label, input[id*="pitch-1-12"]:checked + label { color: #fff; } /********************************************************/ /* 👉 Garage Summary */ /********************************************************/ /* PAGE BREAK CONTROL */ .page-break { break-before: page; page-break-before: always; } /* Avoid chopping tables across pages */ table, tr, td, th { page-break-inside: avoid !important; } /* Header & Footer placeholders */ .pdf-header, .pdf-footer { position: fixed; left: 0; right: 0; font-size: 11px; color: #444; width: 100%; text-align: center; z-index: 10; } .pdf-header { top: -10px; } .pdf-footer { bottom: -10px; } /* Prevent footer/header overlap */ #summaryPdfWrapper { padding-top: 40px; padding-bottom: 40px; } /* Internal footer alignment */ .footer-left { float: left; margin-left: 20px; } .footer-right { float: right; margin-right: 20px; } /* Page breaks */ .page-break { page-break-before: always; break-before: page; } /* Mobile panel toggle bar */ .mobile-panel-toggle { display: none; } /* Responsive: Move sidebar below workspace on small screens */ @media (max-width: 992px) { /* Ensure workspace (canvas) is visible first */ canvas { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; min-height: 400px; z-index: 1 !important; } /* Mobile panel toggle bar - hidden by default, panel itself is the bar */ .mobile-panel-toggle { display: none !important; } /* Sidebar: collapsed by default on mobile - show as orange bar */ #offcanvasForm { position: fixed !important; top: auto !important; /* Override Bootstrap's top-0 */ bottom: 0 !important; right: auto !important; left: 0 !important; width: 100% !important; height: 60px !important; /* Collapsed to orange bar height */ max-height: 60px !important; border-right: none !important; border-top: none !important; border-left: none; border-right: none; z-index: 199 !important; overflow: hidden !important; transition: height 0.3s ease, max-height 0.3s ease, background-color 0.3s ease !important; padding: 0 !important; background-color: #ff8c00 !important; /* Orange color when collapsed */ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; } /* Hover effect on collapsed panel */ #offcanvasForm:not(.panel-expanded):hover { background-color: #ff7a00 !important; } #offcanvasForm:not(.panel-expanded):active { background-color: #ff6b00 !important; } /* Sidebar: expanded state */ #offcanvasForm.panel-expanded { top: 0 !important; /* Start from top when expanded */ bottom: auto !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; padding: 0 !important; background-color: #fff !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2) !important; display: block !important; flex-direction: column !important; } /* Hide offcanvas body when collapsed */ #offcanvasForm .offcanvas-body { display: none !important; } /* Show offcanvas body when expanded */ #offcanvasForm.panel-expanded .offcanvas-body { display: block !important; } /* Show offcanvas header when collapsed - but only the title, centered */ #offcanvasForm:not(.panel-expanded) .offcanvas-header { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; } #offcanvasForm:not(.panel-expanded) .offcanvas-title { color: white !important; font-weight: bold !important; font-size: 1.1rem !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } #offcanvasForm:not(.panel-expanded) .offcanvas-title::after { content: "▲"; font-size: 1rem; margin-left: 5px; transition: transform 0.3s ease; } /* Remove arrow when expanded - normal header display */ #offcanvasForm.panel-expanded .offcanvas-title::after { content: ""; } #offcanvasForm.panel-expanded .offcanvas-title { color: #212529 !important; /* Dark text for expanded panel */ font-size: inherit !important; display: block !important; } /* Hide close button when collapsed */ #offcanvasForm:not(.panel-expanded) .mobile-close-btn { display: none !important; } /* Show offcanvas header when expanded */ #offcanvasForm.panel-expanded .offcanvas-header { display: flex !important; justify-content: space-between !important; align-items: center !important; position: relative !important; top: 0 !important; background-color: #fff !important; z-index: 10 !important; padding: 1rem !important; margin: 0 !important; border-bottom: 1px solid #dee2e6 !important; width: 100% !important; } /* Show mobile close button when panel is expanded on mobile */ #offcanvasForm.panel-expanded .mobile-close-btn { display: block !important; position: relative !important; top: auto !important; margin: 0 !important; flex-shrink: 0 !important; } /* Offcanvas body padding when expanded - add bottom padding for footer */ #offcanvasForm.panel-expanded .offcanvas-body { padding: 1rem !important; padding-bottom: 80px !important; /* Make room for fixed footer buttons */ } /* Fixed footer: adjust for mobile - hide when collapsed */ .fixed-footer { display: none !important; } /* Show fixed footer when panel is expanded (it's inside the panel) */ #offcanvasForm.panel-expanded .fixed-footer { display: flex !important; position: fixed !important; bottom: 0 !important; width: 100% !important; right: auto !important; left: 0 !important; border-top: 1px solid #ccc; border-right: none; z-index: 201 !important; background: #fff !important; padding: 0.75rem !important; gap: 0.5rem !important; justify-content: center !important; } #offcanvasForm.panel-expanded .fixed-footer .btn { min-width: 90px !important; flex: 1 !important; max-width: 120px !important; } /* Bottom buttons: adjust position for mobile */ #bottom-buttons { bottom: 80px !important; z-index: 1000; } /* Sidebar container: adjust height for mobile */ #sidebarContainer { height: auto !important; max-height: calc(100vh - 200px); overflow-y: auto; margin-bottom: 50px; } /* Add padding to body to prevent content from being hidden */ body { padding-bottom: 60px; } /* Adjust body padding when panel is expanded */ body.panel-expanded { padding-bottom: 0; } } /* Ensure workspace takes remaining space on desktop */ @media (min-width: 993px) { canvas { width: calc(100% - 380px) !important; height: 100vh !important; } } /* Autocomplete Styles */ .autocomplete-wrapper { position: relative; } .autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ced4da; border-top: none; border-radius: 0 0 0.375rem 0.375rem; max-height: 200px; overflow-y: auto; /* High z-index to ensure it appears above modals and other overlays */ z-index: 20000; display: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .autocomplete-dropdown.show { display: block; } .autocomplete-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.15s ease; color: #212529 !important; /* Ensure black text */ } .autocomplete-item:hover, .autocomplete-item.highlighted { background-color: #f8f9fa; color: #212529 !important; /* Keep black text on hover/highlight */ } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item.no-results { color: #6c757d; font-style: italic; cursor: default; } .autocomplete-item.no-results:hover { background-color: transparent; } /* Ensure form labels are visible */ .form-label { color: #212529 !important; /* Bootstrap's default dark text color */ font-weight: 500; } /* Modal form labels specifically */ #ownerModal .form-label { color: #212529 !important; } /* Ensure all titles and headings have dark text (except collapsed panel title on orange) */ .modal-title, h1, h2, h3, h4, h5, h6 { color: #212529 !important; } /* Exception: collapsed panel title should be white on orange background */ #offcanvasForm:not(.panel-expanded) .offcanvas-title { color: white !important; /* Keep white for orange bar */ } /* Color Palette Grid Styles */ .color-palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; } .color-swatch { position: relative; width: 100%; aspect-ratio: 1; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background-size: cover; background-position: center; } .color-swatch:hover { border-color: #007bff; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .color-swatch.selected { border-color: #ff6600; border-width: 3px; box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.3); } .color-checkmark { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background-color: #ff6600; border-radius: 50%; display: none; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; z-index: 10; } .color-swatch.selected .color-checkmark { display: flex; } .color-name { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); color: white; font-size: 10px; padding: 2px 4px; text-align: center; font-weight: 500; line-height: 1.2; } /* Light colors need darker text */ .color-swatch[style*="background-color: #ffffff"] .color-name, .color-swatch[style*="background-color: #d4c5a9"] .color-name, .color-swatch[style*="background-color: #c8b99c"] .color-name, .color-swatch[style*="background-color: #b8a082"] .color-name, .color-swatch[style*="background-color: #c0c0c0"] .color-name { background-color: rgba(0, 0, 0, 0.8); } /* Opened sides */ .wall-segment-control { position: relative; display: inline-flex; background: #e9ecef; border-radius: 6px; overflow: hidden; } .wall-segment-control input { display: none; } .wall-segment-control label { padding: 6px 14px; cursor: pointer; font-size: 14px; z-index: 2; user-select: none; } .wall-segment-control .wall-segment-slider { position: absolute; top: 0; bottom: 0; width: 33.33%; background: #0d6efd; border-radius: 6px; transition: transform 0.25s ease; z-index: 1; } /* Slider movement */ .wall-segment-control input:nth-of-type(1):checked ~ .wall-segment-slider { transform: translateX(0%); } .wall-segment-control input:nth-of-type(2):checked ~ .wall-segment-slider { transform: translateX(100%); } .wall-segment-control input:nth-of-type(3):checked ~ .wall-segment-slider { transform: translateX(200%); /* Dropdown menu styles - ensure black text */ .dropdown-menu { color: #212529 !important; background-color: #fff !important; } .dropdown-item { color: #212529 !important; } .dropdown-item:hover, .dropdown-item:focus { color: #212529 !important; background-color: #f8f9fa !important; } /* Ensure dropdown items are black in responsive mode */ @media (max-width: 992px) { .dropdown-menu { color: #212529 !important; background-color: #fff !important; } .dropdown-item { color: #212529 !important; } .dropdown-item:hover, .dropdown-item:focus { color: #212529 !important; background-color: #f8f9fa !important; } } }