* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; color: #222; background: #f3f4f6; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #1f2937; color: #e5e7eb; flex-wrap: wrap; }
#toolbar button, #toolbar select { background: #374151; color: #e5e7eb; border: 1px solid #4b5563; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
#toolbar button:hover { background: #4b5563; }
#toolbar button.active { background: #2563eb; border-color: #2563eb; }
#toolbar .tool { min-width: 70px; }
#toolbar .sep { width: 1px; height: 20px; background: #4b5563; margin: 0 4px; }
#toolbar .label { color: #9ca3af; font-size: 12px; }
/* Roof system badge โ compact pill that shows "๐ Shingle ยท GAF" for the
active project. Only visible when a roof type + manufacturer are set.
Clicking it jumps to Project Settings so the user can change the roof
system without re-creating the project. */
#toolbar .roof-badge { background: #065f46; color: #d1fae5; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #047857; cursor: pointer; font-weight: 500; white-space: nowrap; }
#toolbar .roof-badge:hover { background: #047857; }
#toolbar .roof-badge[hidden] { display: none; }
#scale-info, #page-info, #zoom-info { color: #fbbf24; font-size: 12px; padding: 0 4px; }
#page-input { width: 52px; background: #374151; color: #e5e7eb; border: 1px solid #4b5563; border-radius: 4px; padding: 4px 6px; font-size: 12px; text-align: center; }
#page-input::-webkit-inner-spin-button, #page-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Page picker dialog */
#pages-dialog { max-width: 90vw; width: 1000px; max-height: 85vh; padding: 0; border: 1px solid #d1d5db; border-radius: 6px; }
#pages-dialog form { display: flex; flex-direction: column; max-height: 85vh; margin: 0; }
#pages-dialog .pg-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-wrap: wrap; }
#pages-dialog .pg-header h3 { margin: 0; font-size: 16px; }
#pages-dialog .pg-meta { color: #6b7280; font-size: 12px; }
#pages-dialog .pg-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#pages-dialog .pg-search-label { font-size: 12px; color: #374151; display: flex; gap: 6px; align-items: center; }
#pages-dialog .pg-search-label input { padding: 4px 8px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 4px; width: 200px; }
#pages-dialog .pg-actions button { background: #374151; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12px; }
#pages-dialog .pg-actions button:hover { background: #1f2937; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 16px; overflow-y: auto; background: #f3f4f6; }
.pg-item { background: white; border: 2px solid transparent; border-radius: 4px; cursor: pointer; padding: 6px; display: flex; flex-direction: column; align-items: center; transition: border-color 0.1s, box-shadow 0.1s; }
.pg-item:hover { border-color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18); }
.pg-item.active { border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25); }
.pg-item canvas { display: block; max-width: 100%; height: auto; background: white; border: 1px solid #e5e7eb; }
.pg-item .pg-label { margin-top: 6px; font-size: 11px; color: #374151; text-align: center; width: 100%; line-height: 1.25; }
.pg-item .pg-num { font-weight: 600; color: #111827; }
.pg-item .pg-title { color: #6b7280; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pg-item.hidden { display: none; }
.pg-empty { padding: 40px; color: #6b7280; text-align: center; grid-column: 1 / -1; }
/* Zone tab bar โ sits between the toolbar and the viewer. Each zone is a
separate PDF/sheet (e.g. "Main Roof", "Parapet Details"). */
#zone-tabs { display: flex; align-items: stretch; background: #111827; border-bottom: 1px solid #1f2937; padding: 0 6px; min-height: 30px; gap: 2px; overflow-x: auto; }
#zone-tabs-list { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; }
.zone-tab { display: inline-flex; align-items: center; gap: 6px; background: #1f2937; color: #9ca3af; border: 1px solid #1f2937; border-bottom: none; border-top-left-radius: 6px; border-top-right-radius: 6px; padding: 5px 10px; margin-top: 4px; cursor: pointer; font-size: 12px; max-width: 220px; user-select: none; white-space: nowrap; }
.zone-tab:hover { background: #374151; color: #e5e7eb; }
.zone-tab.active { background: #f3f4f6; color: #111827; border-color: #d1d5db; font-weight: 500; }
.zone-tab .zt-name { overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.zone-tab .zt-count { color: #6b7280; font-size: 10px; background: #e5e7eb; border-radius: 8px; padding: 1px 6px; }
.zone-tab.active .zt-count { background: #d1d5db; color: #374151; }
.zone-tab:not(.active) .zt-count { background: #374151; color: #9ca3af; }
.zone-tab .zt-close { color: inherit; opacity: 0.5; padding: 0 2px; font-size: 14px; line-height: 1; border: none; background: transparent; cursor: pointer; }
.zone-tab .zt-close:hover { opacity: 1; color: #ef4444; }
.zone-tab.zt-needs-pdf { background: #78350f; color: #fef3c7; border-color: #78350f; }
.zone-tab.zt-needs-pdf:hover { background: #92400e; color: #fff; }
.zone-tab.zt-needs-pdf.active { background: #fef3c7; color: #78350f; border-color: #f59e0b; }
.zone-tab.zt-needs-pdf .zt-count { background: #f59e0b; color: #78350f; }
/* Sketch zones โ distinct purple tone so they read as "drew this one" */
.zone-tab.zt-sketch { background: #4c1d95; color: #ede9fe; border-color: #4c1d95; }
.zone-tab.zt-sketch:hover { background: #5b21b6; color: #fff; }
.zone-tab.zt-sketch.active { background: #f3f4f6; color: #4c1d95; border-color: #a78bfa; }
.zone-tab.zt-sketch .zt-count { background: #7c3aed; color: #ede9fe; }
.zone-tab.zt-sketch.active .zt-count { background: #ede9fe; color: #4c1d95; }
#btn-zone-add { background: transparent; color: #9ca3af; border: 1px dashed #4b5563; border-radius: 4px; padding: 3px 10px; margin: 4px 0 2px 6px; cursor: pointer; font-size: 12px; align-self: center; }
#btn-zone-add:hover { background: #1f2937; color: #e5e7eb; }
#btn-measurements-tab { margin-left: auto; align-self: center; background: #2563eb; color: #fff; border: 1px solid #2563eb; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 4px; }
#btn-measurements-tab:hover { background: #1d4ed8; border-color: #1d4ed8; }
#btn-measurements-tab .mt-count { background: rgba(255,255,255,0.25); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; min-width: 18px; text-align: center; }
#btn-measurements-tab.has-pending { background: #d97706; border-color: #d97706; }
#btn-measurements-tab.has-pending:hover { background: #b45309; border-color: #b45309; }
#btn-measurements-tab.has-pending .mt-count { background: #fef3c7; color: #78350f; }
#zone-tabs:empty { display: none; }
#zone-tabs.hidden { display: none; }
#main { flex: 1; display: flex; overflow: hidden; }
#viewer-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#viewer-scroll { flex: 1; overflow: auto; background: #9ca3af; }
#viewer-inner { position: relative; display: inline-block; margin: 0; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
#pdf-canvas { display: block; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; }
#overlay.tool-drawing { cursor: crosshair; }
#overlay.panning, #overlay.panning.tool-drawing { cursor: grab; }
.crosshair-line { stroke: #2563eb; stroke-width: 0.5; opacity: 0.85; pointer-events: none; }
.crosshair-dot { fill: #2563eb; pointer-events: none; }
.screw-hint-line { stroke: #60a5fa; stroke-width: 1.25; stroke-dasharray: 5 4; opacity: 0.6; pointer-events: none; fill: none; }
.wind-tab-line { stroke: #16a34a; stroke-width: 1.5; stroke-dasharray: 6 3; opacity: 0.7; pointer-events: none; fill: none; }
.snap-indicator { fill: none; stroke: #22c55e; stroke-width: 2; pointer-events: none; }
#hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(31,41,55,0.9); color: #e5e7eb; padding: 6px 12px; border-radius: 4px; font-size: 11px; pointer-events: none; }
#project-settings { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; padding: 10px 12px; }
#project-settings .ps-row { margin: 8px 0; }
#project-settings label { font-size: 13px; color: #374151; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 3px; }
#project-settings select { display: block; width: 100%; margin-top: 2px; padding: 4px 8px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 3px; background: white; }
#project-settings select:disabled { opacity: 0.5; }
/* Project Settings dialog โ same visual language as Material List */
#project-settings-dialog { border: none; padding: 0; border-radius: 8px; width: 560px; max-width: 92vw; max-height: 90vh; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#project-settings-dialog::backdrop { background: rgba(0,0,0,0.5); }
#ps-dialog-inner { display: flex; flex-direction: column; max-height: 90vh; }
#ps-header { padding: 16px 22px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 8px 8px 0 0; }
#ps-header h2 { margin: 0; font-size: 17px; color: #111827; }
#ps-header .ps-actions { display: flex; gap: 8px; }
#ps-header button { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#ps-header #btn-ps-close:hover { background: #f3f4f6; }
#ps-body { padding: 16px 22px; overflow-y: auto; }
#ps-body #project-settings { background: transparent; border: none; padding: 0; margin: 0; }
/* Project-info readout at the top of Project Settings. Populated from
state.projectInfo (set via the New Project wizard). */
#ps-body .ps-project-summary { font-size: 12px; color: #374151; padding: 10px 12px; border-radius: 4px; background: #eff6ff; border: 1px solid #bfdbfe; margin-bottom: 14px; line-height: 1.5; }
#ps-body .ps-project-summary.ps-project-summary-empty { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; font-size: 11px; font-style: italic; }
#ps-header #btn-ps-edit-info { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
#ps-header #btn-ps-edit-info:hover { background: #e5e7eb; }
#ps-body .ps-section-title { font-size: 13px; font-weight: 600; color: #111827; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid #e5e7eb; text-transform: uppercase; letter-spacing: 0.5px; }
/* Shingle Roof settings block โ only visible for Shingle-type projects.
Slightly indented visual treatment to separate it from the generic PVC
membrane settings above. */
.ps-shingle-section { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 4px 12px 12px; margin-top: 14px; }
.ps-shingle-section[hidden] { display: none; }
.ps-shingle-section .ps-section-title { margin-top: 8px; padding-top: 8px; border-top: none; color: #065f46; }
.ps-shingle-section .ps-row { margin: 6px 0; }
#totals { font-size: 12px; }
#totals .row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #e5e7eb; }
#totals .row .cond { color: #374151; }
#totals .row .val { font-weight: 600; color: #111827; }
#totals .row.sub { padding-left: 14px; color: #6b7280; font-size: 11px; border-bottom: none; }
#totals .row.sub .cond { color: #6b7280; }
#totals .row.sub .val { font-weight: 500; color: #374151; }
#measurements { list-style: none; padding: 0; margin: 0; }
#measurements li { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; font-size: 12px; cursor: default; display: flex; justify-content: space-between; align-items: center; }
#measurements li:hover { background: #f9fafb; }
#measurements li.selected { background: #dbeafe; }
#measurements li .label { flex: 1; }
#measurements li .del { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; padding: 0 4px; }
#measurements li .wall-height { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 500; cursor: pointer; margin-left: 4px; white-space: nowrap; }
#measurements li .wall-height:hover { background: #e0e7ff; }
#measurements li .wall-height-missing { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
#measurements li .wall-height-missing:hover { background: #fde68a; }
/* overlay styling โ base shapes (fallback colors; categories override below) */
.poly-fill { fill: rgba(37, 99, 235, 0.2); stroke: #2563eb; stroke-width: 1.5; }
.line-stroke { fill: none; stroke: #16a34a; stroke-width: 2; }
.count-dot { fill: #dc2626; stroke: white; stroke-width: 1; }
.rect-shape { fill: rgba(168, 85, 247, 0.18); stroke: #a855f7; stroke-width: 1.5; }
.preview { stroke-dasharray: 4 3; opacity: 0.7; }
/* Pending (AI-suggested, awaiting user approval) */
.pending { stroke-dasharray: 6 4; opacity: 0.65; }
/* Standing-seam panel layout overlay โ seams drawn inside Metal field
polygons when the "Show panel layout" project setting is on. Thin amber
so they read as guides rather than hard roof features. pointer-events
disabled so clicks still hit the underlying polygon. */
.panel-seam {
stroke: #d97706;
stroke-width: 0.8;
fill: none;
pointer-events: none;
opacity: 0.75;
}
.panel-run-arrow {
stroke: #b45309;
stroke-width: 1.4;
fill: none;
pointer-events: none;
opacity: 0.9;
}
/* Category colors โ applied to the group element, children inherit via currentColor */
.cat-field .poly-fill { fill: rgba(37, 99, 235, 0.20); stroke: #2563eb; }
.cat-ridge .line-stroke { stroke: #7c3aed; }
.cat-hip .line-stroke { stroke: #a855f7; }
.cat-valley .line-stroke { stroke: #0891b2; }
.cat-eave-rake .line-stroke { stroke: #ea580c; }
.cat-seam .line-stroke { stroke: #16a34a; }
.cat-perimeter .line-stroke { stroke: #f59e0b; }
.cat-corner .line-stroke { stroke: #b45309; }
.cat-coping .line-stroke { stroke: #eab308; stroke-width: 3; }
.cat-edge-metal .line-stroke { stroke: #ea580c; stroke-width: 3; }
.cat-termination .line-stroke { stroke: #92400e; }
.cat-penetration .count-dot { fill: #dc2626; }
.cat-rect-pen .rect-shape { fill: rgba(236, 72, 153, 0.18); stroke: #ec4899; }
.cat-ruler .line-stroke { stroke: #475569; stroke-width: 2; stroke-dasharray: 3 3; }
.cat-flow .line-stroke { stroke: #0ea5e9; stroke-width: 2.5; }
.cat-flow .arrowhead { fill: #0ea5e9; }
.cricket-outline { fill: rgba(161, 98, 7, 0.15); stroke: #a16207; stroke-width: 1.5; }
.cricket-step-line { stroke: #dc2626; stroke-width: 1.25; stroke-dasharray: 4 2; opacity: 0.85; }
.cricket-flow-line { stroke: #2563eb; stroke-width: 1.75; fill: none; }
.cricket-main-arrow { stroke: #2563eb; stroke-width: 3; fill: none; }
.cricket-main-arrow-head { fill: #2563eb; }
/* cricket-inner is the tan dashed outline used for the inner diamond/triangle */
.cricket-ridge { stroke: #111827; stroke-width: 2.25; fill: none; stroke-linecap: round; }
.cricket-drain { fill: #111827; stroke: white; stroke-width: 1.5; }
.taper-drain-label { fill: #111827; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: white; stroke-width: 3; pointer-events: none; }
.taper-tile { fill: none; stroke: #ec4899; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.75; pointer-events: none; }
.taper-tile-label { fill: #be185d; font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: white; stroke-width: 2.5; pointer-events: none; }
.arrowhead { fill: currentColor; pointer-events: none; }
.cat-insulation .poly-fill { fill: rgba(161, 98, 7, 0.18); stroke: #a16207; }
.cat-drainage .count-dot { fill: #0e7490; }
.cat-drainage .line-stroke { stroke: #0e7490; stroke-width: 2.5; }
.cat-other .count-dot { fill: #6b7280; }
.cat-other .line-stroke { stroke: #6b7280; }
.cat-other .poly-fill { fill: rgba(107, 114, 128, 0.15); stroke: #6b7280; }
/* Measurement list */
.m-row-pending { background: #fef3c7 !important; }
#measurements li .accept { background: none; border: none; color: #16a34a; cursor: pointer; font-size: 16px; padding: 0 4px; font-weight: bold; }
#measurements li .reject { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 16px; padding: 0 4px; }
/* Pending review banner */
#pending-bar { background: #fef3c7; border: 1px solid #fbbf24; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; display: none; }
#pending-bar.visible { display: block; }
#pending-bar .count { font-weight: 600; color: #92400e; font-size: 12px; }
#pending-bar .actions { display: flex; gap: 6px; margin-top: 6px; }
#pending-bar button { flex: 1; padding: 4px 8px; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; font-size: 11px; background: white; }
#pending-bar button.accept-all { background: #16a34a; color: white; border-color: #16a34a; }
#pending-bar button.accept-all:hover { background: #15803d; }
#pending-bar button.reject-all { background: white; color: #b91c1c; }
#pending-bar button.reject-all:hover { background: #fee2e2; }
/* AI Takeoff button โ make it prominent */
#btn-ai-takeoff { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-color: #6366f1 !important; color: white !important; font-weight: 600; }
#btn-ai-takeoff:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; }
#btn-focus-toggle.active { background: #16a34a !important; border-color: #16a34a !important; color: white !important; }
.handle { fill: white; stroke: #2563eb; stroke-width: 1.5; }
.calibrate-line { fill: none; stroke: #eab308; stroke-width: 2; stroke-dasharray: 5 3; }
.selected-stroke { stroke-width: 3 !important; filter: drop-shadow(0 0 2px rgba(0,0,0,0.4)); }
.measure-label { fill: #111827; font-size: 11px; font-family: monospace; paint-order: stroke; stroke: white; stroke-width: 3; pointer-events: none; }
.measure-label.seg { fill: #1e3a8a; font-weight: 600; font-size: 12px; }
.measure-label.total { fill: #0f172a; font-weight: 700; font-size: 12px; }
.measure-label.ruler-seg { fill: #b45309; font-weight: 700; font-size: 12px; stroke-width: 3.5; }
.measure-label.ruler-total { fill: #7c2d12; font-weight: 700; font-size: 12px; stroke-width: 3.5; }
.measure-label.no-scale { fill: #b91c1c; font-weight: 700; font-size: 12px; stroke-width: 3.5; }
/* New Project wizard โ Step 1 gate (mandatory name, rest optional). */
#new-project-dialog { border: none; padding: 0; border-radius: 8px; width: 520px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#new-project-dialog::backdrop { background: rgba(0,0,0,0.5); }
#np-dialog-inner { display: flex; flex-direction: column; }
#np-header { padding: 18px 22px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px 8px 0 0; }
#np-header h2 { margin: 0; font-size: 18px; color: #111827; }
#np-header .dlg-hint { color: #6b7280; font-size: 12px; }
#np-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
#np-body .np-row { display: flex; flex-direction: column; gap: 4px; }
#np-body .np-row-split { flex-direction: row; gap: 12px; }
#np-body .np-row-split .np-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#np-body label { font-size: 12px; font-weight: 500; color: #374151; }
#np-body .np-req { color: #dc2626; font-weight: 700; }
#np-body input { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: white; }
#np-body input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
#np-body input.np-invalid { border-color: #dc2626; background: #fef2f2; }
#np-body select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: white; cursor: pointer; }
#np-body select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
#np-body select:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
#np-error { color: #b91c1c; font-size: 12px; font-weight: 500; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; padding: 8px 10px; }
/* Optional plan upload block โ sits above the manually-entered fields.
AI prefill turns green on success and highlights filled inputs briefly. */
#np-body .np-upload-row { background: #f0f9ff; border: 1px dashed #93c5fd; border-radius: 6px; padding: 10px 12px; gap: 6px; }
#np-body .np-upload-row label { color: #1e40af; font-weight: 600; }
#np-body .np-upload-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#np-body .np-upload-btn { padding: 6px 12px; border: 1px solid #2563eb; border-radius: 4px; background: #fff; color: #2563eb; cursor: pointer; font-size: 12px; font-weight: 500; }
#np-body .np-upload-btn:hover:not(:disabled) { background: #eff6ff; }
#np-body .np-upload-btn:disabled { opacity: 0.6; cursor: wait; }
#np-body .np-upload-clear { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; color: #6b7280; }
#np-body .np-upload-clear:hover { background: #f3f4f6; color: #111827; }
#np-body .np-upload-status { font-size: 11px; color: #6b7280; }
#np-body .np-upload-status.np-upload-busy { color: #2563eb; }
#np-body .np-upload-status.np-upload-ok { color: #059669; font-weight: 500; }
#np-body .np-upload-status.np-upload-warn { color: #b45309; }
#np-body .np-upload-status.np-upload-err { color: #b91c1c; }
/* Briefly highlight inputs that AI prefilled so the user notices which
fields came from the plans (vs. what they typed). Fades out via the JS
timeout that strips the class โ CSS just paints the highlighted state. */
#np-body input.np-ai-filled, #np-body select.np-ai-filled {
background: #ecfdf5;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
#np-footer { padding: 12px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }
#np-footer button { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#np-footer button.primary { background: #2563eb; color: white; border-color: #2563eb; font-weight: 500; }
#np-footer button.primary:hover { background: #1d4ed8; }
#np-footer button:not(.primary):hover { background: #f3f4f6; }
/* Primary toolbar button โ makes "+ New Project" stand out as the main entry point. */
#toolbar button.primary { background: #059669; border-color: #059669; color: #fff; font-weight: 600; }
#toolbar button.primary:hover { background: #047857; border-color: #047857; }
/* scale dialog */
#scale-dialog { border: none; border-radius: 8px; padding: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.25); min-width: 380px; }
#scale-dialog::backdrop { background: rgba(0,0,0,0.4); }
#scale-dialog form { padding: 18px 22px; }
#scale-dialog h3 { margin: 0 0 8px; font-size: 15px; color: #111827; }
#scale-dialog .dlg-hint { color: #6b7280; font-size: 12px; margin: 0 0 14px; }
#scale-dialog .dlg-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 13px; }
#scale-dialog .dlg-row label { min-width: 100px; color: #374151; font-weight: 500; }
#scale-dialog select, #scale-dialog input { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
#scale-dialog select { min-width: 160px; }
#scale-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#scale-dialog .dlg-actions button { padding: 6px 14px; border-radius: 4px; border: 1px solid #d1d5db; background: white; cursor: pointer; font-size: 13px; }
#scale-dialog .dlg-actions button#btn-scale-apply { background: #2563eb; color: white; border-color: #2563eb; }
#scale-dialog .dlg-actions button#btn-scale-apply:hover { background: #1d4ed8; }
/* Shared style for small single-field prompt dialogs: parapet-height-dialog
(wall height for parapet measurements) and calibration-dialog (image/PDF
scale calibration). Both stand in for window.prompt(), which is disabled
in Electron. Same look as #scale-dialog so they feel consistent. */
#parapet-height-dialog,
#calibration-dialog { border: none; border-radius: 8px; padding: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.25); min-width: 340px; }
#parapet-height-dialog::backdrop,
#calibration-dialog::backdrop { background: rgba(0,0,0,0.4); }
#parapet-height-dialog form,
#calibration-dialog form { padding: 18px 22px; margin: 0; }
#parapet-height-dialog h3,
#calibration-dialog h3 { margin: 0 0 8px; font-size: 15px; color: #111827; }
#parapet-height-dialog .dlg-hint,
#calibration-dialog .dlg-hint { color: #6b7280; font-size: 12px; margin: 0 0 14px; }
#parapet-height-dialog .dlg-row,
#calibration-dialog .dlg-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 13px; }
#parapet-height-dialog .dlg-row label,
#calibration-dialog .dlg-row label { min-width: 80px; color: #374151; font-weight: 500; }
#parapet-height-dialog input,
#calibration-dialog input { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
#parapet-height-dialog .dlg-actions,
#calibration-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#parapet-height-dialog .dlg-actions button,
#calibration-dialog .dlg-actions button { padding: 6px 14px; border-radius: 4px; border: 1px solid #d1d5db; background: white; cursor: pointer; font-size: 13px; }
#parapet-height-dialog #btn-parapet-ok,
#calibration-dialog #btn-calibration-ok { background: #2563eb; color: white; border-color: #2563eb; }
#parapet-height-dialog #btn-parapet-ok:hover,
#calibration-dialog #btn-calibration-ok:hover { background: #1d4ed8; }
/* Pitch edit dialog โ same minimal prompt layout as parapet/calibration. */
#pitch-dialog { border: none; border-radius: 8px; padding: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.25); min-width: 340px; }
#pitch-dialog::backdrop { background: rgba(0,0,0,0.4); }
#pitch-dialog form { padding: 18px 22px; margin: 0; }
#pitch-dialog h3 { margin: 0 0 8px; font-size: 15px; color: #111827; }
#pitch-dialog .dlg-hint { color: #6b7280; font-size: 12px; margin: 0 0 14px; }
#pitch-dialog .dlg-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 13px; }
#pitch-dialog .dlg-row label { min-width: 60px; color: #374151; font-weight: 500; }
#pitch-dialog input { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
#pitch-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#pitch-dialog .dlg-actions button { padding: 6px 14px; border-radius: 4px; border: 1px solid #d1d5db; background: white; cursor: pointer; font-size: 13px; }
#pitch-dialog #btn-pitch-ok { background: #059669; color: white; border-color: #059669; }
#pitch-dialog #btn-pitch-ok:hover { background: #047857; }
/* Measurements dialog โ zone's measurement list, with pending review bar */
#measurements-dialog { border: none; padding: 0; border-radius: 8px; width: 520px; max-width: 92vw; max-height: 85vh; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#measurements-dialog::backdrop { background: rgba(0,0,0,0.3); }
#md-dialog-inner { display: flex; flex-direction: column; max-height: 85vh; }
#md-header { padding: 14px 20px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; display: flex; align-items: center; gap: 14px; border-radius: 8px 8px 0 0; }
#md-header h2 { margin: 0; font-size: 16px; color: #111827; }
#md-zone-info { flex: 1; font-size: 12px; color: #6b7280; }
#md-header .md-actions { display: flex; gap: 8px; }
#md-header button { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#md-header #btn-md-close:hover { background: #f3f4f6; }
#md-body { padding: 12px 16px; overflow-y: auto; }
/* Full-screen Material List dialog */
#material-list-dialog { border: none; padding: 0; border-radius: 8px; width: 90vw; max-width: 1100px; height: 88vh; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#material-list-dialog::backdrop { background: rgba(0,0,0,0.5); }
#ml-dialog-inner { display: flex; flex-direction: column; height: 100%; }
#ml-header { padding: 18px 24px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; border-radius: 8px 8px 0 0; }
#ml-header h2 { margin: 0; font-size: 18px; color: #111827; }
#ml-project-info { flex: 1; font-size: 12px; color: #6b7280; line-height: 1.5; }
#ml-project-info b { color: #374151; }
#ml-header .ml-actions { display: flex; gap: 8px; }
#ml-header button { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#ml-header #btn-ml-print { background: #2563eb; color: white; border-color: #2563eb; }
#ml-header #btn-ml-print:hover { background: #1d4ed8; }
#ml-header #btn-ml-close:hover { background: #f3f4f6; }
#ml-tabs { display: flex; gap: 0; padding: 0 24px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
#ml-tabs .ml-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: 13px; color: #6b7280; cursor: pointer; font-weight: 500; }
#ml-tabs .ml-tab:hover { color: #111827; }
#ml-tabs .ml-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
#ml-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
#ml-body .ml-view[hidden] { display: none; }
#ml-body .ml-cat { margin-top: 16px; }
#ml-body .ml-cat:first-child { margin-top: 0; }
#ml-body .ml-cat h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #e5e7eb; }
#ml-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
#ml-body th, #ml-body td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
#ml-body th { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; background: #fafafa; }
#ml-body td.num { text-align: right; font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ml-body td.sku { font-weight: 500; color: #111827; }
#ml-body td.sku .sku-main { font-weight: 500; }
#ml-body td.sku .sku-cond { font-size: 11px; color: #6b7280; font-weight: 400; font-style: italic; margin-top: 2px; line-height: 1.3; }
#ml-body td.item-num { color: #6b7280; font-family: monospace; font-size: 11px; }
#ml-body td.qty { color: #374151; }
#ml-body tr:hover td { background: #f9fafb; }
/* Per-section subtotal: heavier top border, light fill, no hover highlight so
it reads as a summary rather than another orderable line. */
#ml-body tfoot tr.ml-subtotal td { background: #f3f4f6; border-top: 2px solid #9ca3af; border-bottom: none; color: #111827; }
#ml-body tfoot tr.ml-subtotal:hover td { background: #f3f4f6; }
/* Editable quantity + price inputs โ override auto-generated values when you
have a supplier quote that differs from what the drawing produces. */
#ml-body input.ml-edit {
width: 80px;
padding: 3px 6px;
font: inherit;
font-family: monospace;
font-variant-numeric: tabular-nums;
text-align: right;
border: 1px solid #d1d5db;
border-radius: 3px;
background: white;
color: #111827;
}
#ml-body input.ml-edit:hover { border-color: #9ca3af; }
#ml-body input.ml-edit:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
#ml-body input.ml-edit.ml-edit-cost { width: 90px; }
#ml-body td.cost-cell { white-space: nowrap; }
#ml-body td.cost-cell .ml-cost-prefix { color: #6b7280; padding-right: 2px; }
#ml-body input.ml-edit.ml-edit-each { width: 70px; }
#ml-body td.each-cell { white-space: nowrap; }
#ml-body td.each-cell .ml-cost-prefix { color: #6b7280; padding-right: 2px; }
#ml-body td.each-cell .ml-each-suffix { color: #6b7280; padding-left: 2px; font-size: 11px; }
/* Saved-price badge โ small floppy-disk icon next to the each input.
Only appears when the price came from the cross-project memory store
and the user hasn't overridden it for this project yet. */
#ml-body td.each-cell .ml-mem-badge { font-size: 11px; padding-right: 3px; opacity: 0.7; cursor: help; }
#ml-body tr.is-from-memory td.each-cell input.ml-edit-each { background: #fefce8; border-color: #facc15; color: #713f12; }
/* Saved Prices manager dialog. Same chrome as the Material List dialog so
they feel like siblings โ sticky header, scrollable body, simple table. */
#saved-prices-dialog { border: none; padding: 0; border-radius: 8px; width: 80vw; max-width: 900px; height: 80vh; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#saved-prices-dialog::backdrop { background: rgba(0,0,0,0.5); }
#sp-dialog-inner { display: flex; flex-direction: column; height: 100%; }
#sp-header { padding: 18px 24px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; display: flex; align-items: center; gap: 14px; border-radius: 8px 8px 0 0; }
#sp-header h2 { margin: 0; font-size: 18px; color: #111827; flex: 1; }
#sp-header .sp-actions { display: flex; gap: 8px; }
#sp-header button { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#sp-header #btn-sp-clear { color: #b91c1c; border-color: #fecaca; }
#sp-header #btn-sp-clear:hover { background: #fef2f2; }
#sp-header #btn-sp-close { background: #2563eb; color: white; border-color: #2563eb; }
#sp-body { flex: 1; overflow: auto; padding: 12px 24px 24px; }
#sp-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
#sp-body th, #sp-body td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
#sp-body th { background: #f9fafb; font-weight: 600; color: #374151; position: sticky; top: 0; }
#sp-body td.num { text-align: right; font-variant-numeric: tabular-nums; }
#sp-body td.sp-sku { font-family: monospace; font-size: 12px; color: #111827; }
#sp-body td.sp-itemnum { font-family: monospace; font-size: 12px; color: #6b7280; }
#sp-body td.sp-updated { color: #6b7280; font-size: 11px; white-space: nowrap; }
#sp-body input.sp-edit-each { width: 80px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 3px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
#sp-body input.sp-edit-each:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
#sp-body button.sp-forget { padding: 2px 8px; border: 1px solid #fecaca; background: white; color: #b91c1c; border-radius: 3px; cursor: pointer; font-size: 12px; }
#sp-body button.sp-forget:hover { background: #fef2f2; }
#sp-body .sp-empty { text-align: center; color: #6b7280; padding: 60px 20px; }
/* Override badge: shaded row + blue inputs so supplier-quoted lines stand out */
#ml-body tr.is-override td { background: #eff6ff; }
#ml-body tr.is-override input.ml-edit { border-color: #2563eb; background: #ffffff; font-weight: 600; color: #1d4ed8; }
#ml-body tr.is-override:hover td { background: #dbeafe; }
#ml-body th.ml-reset-col { width: 28px; }
#ml-body td.ml-reset-cell { width: 28px; text-align: center; padding: 4px; }
#ml-body button.ml-reset {
width: 22px; height: 22px; padding: 0;
background: transparent; border: 1px solid transparent; border-radius: 3px;
color: #9ca3af; cursor: pointer; font-size: 14px; line-height: 1;
visibility: hidden;
}
#ml-body tr.is-override button.ml-reset { visibility: visible; color: #2563eb; }
#ml-body button.ml-reset:hover { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; }
#ml-body .ml-layouts { margin-top: 24px; }
#ml-body .ml-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
#ml-body .ml-shape { border: 1px solid #e5e7eb; border-radius: 4px; padding: 8px 10px; background: #fafafa; }
#ml-body .ml-shape .mat-shape-title { font-size: 12px; font-weight: 600; color: #111827; }
#ml-body .ml-shape .mat-shape-meta { font-size: 11px; color: #6b7280; margin: 2px 0 6px; line-height: 1.4; }
#ml-body .ml-shape svg { width: 100%; height: auto; display: block; background: white; border: 1px solid #e5e7eb; border-radius: 3px; }
/* Material Order tab โ supplier-ready view. */
#ml-body .ml-order-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; }
#ml-body .ml-order-toolbar button { background: #2563eb; color: white; border: none; border-radius: 4px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
#ml-body .ml-order-toolbar button:hover { background: #1d4ed8; }
#ml-body .ml-order-toolbar .ml-order-hint { color: #6b7280; font-size: 12px; }
#ml-body .ml-order-cat { margin-top: 16px; }
#ml-body .ml-order-cat:first-of-type { margin-top: 0; }
#ml-body .ml-order-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#ml-body .ml-order-table thead th { text-align: left; padding: 6px 8px; background: #f3f4f6; border-bottom: 1px solid #d1d5db; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #374151; font-weight: 600; }
#ml-body .ml-order-table thead th.num { text-align: right; }
#ml-body .ml-order-table td { padding: 6px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
#ml-body .ml-order-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#ml-body .ml-order-table td.item-num { color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; }
#ml-body .ml-order-table td.sku .sku-main { color: #111827; font-weight: 500; }
#ml-body .ml-order-total { margin-top: 14px; padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#ml-body .ml-order-total .grand { font-weight: 700; font-size: 16px; color: #111827; }
#ml-body .ml-order-total .quoted { color: #6b7280; font-size: 12px; }
#ml-footer { padding: 14px 24px; border-top: 2px solid #d1d5db; background: #f9fafb; display: flex; justify-content: space-between; align-items: center; border-radius: 0 0 8px 8px; font-size: 13px; }
#ml-footer .grand { font-weight: 700; font-size: 16px; color: #111827; }
#ml-footer .quoted { color: #6b7280; font-size: 12px; }
/* Dedicated print root โ visible only when printing. */
#print-root { display: none; }
/* Print: show only #print-root. */
@media print {
@page { margin: 0.5in; }
html, body { height: auto !important; overflow: visible !important; background: white !important; display: block !important; }
body > *:not(#print-root) { display: none !important; }
#print-root { display: block !important; color: #111827; font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
#print-root .pr-header { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #111827; }
#print-root .pr-header h1 { margin: 0 0 4px; font-size: 20px; }
#print-root .pr-header .pr-meta { font-size: 11px; color: #374151; line-height: 1.5; }
#print-root .pr-header .pr-meta-sub { font-size: 10.5px; color: #4b5563; line-height: 1.5; margin-top: 2px; font-style: italic; }
#print-root .pr-cat { margin-top: 14px; page-break-inside: auto; }
#print-root .pr-cat h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #374151; margin: 0 0 4px; padding-bottom: 2px; border-bottom: 1.5px solid #9ca3af; }
#print-root table { width: 100%; border-collapse: collapse; font-size: 11px; }
#print-root th, #print-root td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
#print-root th { font-size: 10px; color: #374151; font-weight: 700; text-transform: uppercase; background: #f3f4f6; border-bottom: 1px solid #9ca3af; }
#print-root td.num { text-align: right; font-family: "SF Mono", Consolas, Menlo, monospace; white-space: nowrap; }
#print-root td.sku { font-weight: 500; }
#print-root tr { page-break-inside: avoid; }
#print-root tfoot tr.pr-subtotal td { background: #f3f4f6; border-top: 1.5px solid #6b7280; border-bottom: none; }
#print-root .pr-footer { margin-top: 16px; padding-top: 10px; border-top: 2px solid #111827; font-size: 12px; display: flex; justify-content: space-between; }
#print-root .pr-footer .grand { font-weight: 700; font-size: 15px; }
#print-root .pr-layout { margin-top: 0; }
#print-root .pr-layout > h2 { display: none; } /* each shape gets its own titled page */
#print-root .pr-layout-grid { display: block; }
/* Each shape prints on its own page, large enough to read tile labels. */
#print-root .pr-shape { page-break-before: always; page-break-inside: avoid; background: white; padding: 0; border: none; display: flex; flex-direction: column; min-height: 9.5in; }
#print-root .pr-shape:first-child { page-break-before: always; }
#print-root .pr-shape .pr-shape-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; border-bottom: 2px solid #111827; padding-bottom: 6px; }
#print-root .pr-shape .pr-shape-meta { font-size: 12px; color: #374151; margin-bottom: 10px; line-height: 1.5; }
#print-root .pr-shape svg { width: 100%; flex: 1 1 auto; height: auto; max-height: 9in; display: block; background: #fafafa; border: 1px solid #d1d5db; }
}
/* find dialog */
#find-dialog { border: none; border-radius: 8px; padding: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.25); min-width: 480px; max-width: 640px; max-height: 70vh; }
#find-dialog::backdrop { background: rgba(0,0,0,0.4); }
#find-dialog form { padding: 18px 22px; display: flex; flex-direction: column; max-height: 70vh; }
#find-dialog h3 { margin: 0 0 8px; font-size: 15px; color: #111827; }
#find-dialog .dlg-hint { color: #6b7280; font-size: 12px; margin: 0 0 10px; }
#find-results { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; border-top: 1px solid #e5e7eb; }
#find-results li { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
#find-results li:hover { background: #f3f4f6; }
#find-results .page-num { font-weight: 600; color: #2563eb; min-width: 50px; font-family: monospace; }
#find-results .score { color: #6b7280; font-size: 11px; font-family: monospace; min-width: 42px; }
#find-results .snippet { flex: 1; color: #374151; font-size: 12px; line-height: 1.4; }
#find-results .snippet mark { background: #fde68a; color: #111827; padding: 0 2px; }
/* AI result list */
#ai-result-body .ai-row { display: flex; gap: 8px; padding: 4px 6px; border-radius: 3px; cursor: pointer; align-items: flex-start; }
#ai-result-body .ai-row:hover { background: #dbeafe; }
#ai-result-body .ai-row.best { background: #dcfce7; font-weight: 600; }
#ai-result-body .ai-row.best:hover { background: #bbf7d0; }
#ai-result-body .ai-row .pg { color: #2563eb; min-width: 45px; font-weight: 600; }
#ai-result-body .ai-row .mark { min-width: 16px; text-align: center; }
#ai-result-body .ai-row .text { flex: 1; word-break: break-word; }
#ai-result-body .ai-row .conf { color: #6b7280; font-size: 11px; min-width: 50px; text-align: right; }
/* Sketch setup dialog */
#sketch-dialog { border: none; padding: 0; border-radius: 8px; width: 540px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#sketch-dialog::backdrop { background: rgba(0,0,0,0.5); }
#sk-dialog-inner { display: flex; flex-direction: column; }
#sk-header { padding: 18px 22px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px 8px 0 0; }
#sk-header h2 { margin: 0; font-size: 18px; color: #111827; }
#sk-header .dlg-hint { color: #6b7280; font-size: 12px; line-height: 1.4; }
#sk-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 16px; }
#sk-body .sk-row { display: flex; flex-direction: column; gap: 6px; }
#sk-body label { font-size: 12px; font-weight: 500; color: #374151; }
#sk-body input[type="text"], #sk-body input[type="number"] { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: white; }
#sk-body input[type="text"]:focus, #sk-body input[type="number"]:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
#sk-body .sk-presets { display: flex; gap: 6px; flex-wrap: wrap; }
#sk-body .sk-preset { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 10px; font-size: 12px; cursor: pointer; color: #374151; }
#sk-body .sk-preset:hover { background: #ede9fe; border-color: #7c3aed; color: #4c1d95; }
#sk-body .sk-preset.active { background: #4c1d95; color: white; border-color: #4c1d95; }
#sk-body .sk-dim-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
#sk-body .sk-dim-row .sk-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#sk-body .sk-dim-row .sk-col label { font-size: 11px; color: #6b7280; font-weight: 400; }
#sk-body .sk-dim-row .sk-x { padding-bottom: 10px; color: #9ca3af; font-size: 14px; }
#sk-body .sk-grid-opts { display: flex; gap: 10px; flex-wrap: wrap; }
#sk-body .sk-grid-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #111827; cursor: pointer; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; background: white; }
#sk-body .sk-grid-opt:hover { background: #f3f4f6; }
#sk-body .sk-grid-opt input { margin: 0; accent-color: #7c3aed; }
#sk-body .sk-hint { color: #6b7280; font-size: 11px; margin: 2px 0 0; line-height: 1.4; }
#sk-error { color: #b91c1c; font-size: 12px; font-weight: 500; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; padding: 8px 10px; }
#sk-footer { padding: 12px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }
#sk-footer button { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#sk-footer button.primary { background: #7c3aed; color: white; border-color: #7c3aed; font-weight: 500; }
#sk-footer button.primary:hover { background: #6d28d9; }
#sk-footer button:not(.primary):hover { background: #f3f4f6; }
/* Zone Settings dialog โ reuses the same visual language as the sketch and
project settings dialogs; structured with .dlg-* utility classes so
future "settings" dialogs can share one stylesheet instead of copy-
pasting #sk-* overrides for each. */
#zone-settings-dialog { border: none; padding: 0; border-radius: 8px; width: 480px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
#zone-settings-dialog::backdrop { background: rgba(0,0,0,0.5); }
#zone-settings-dialog .dlg-inner { display: flex; flex-direction: column; }
#zone-settings-dialog .dlg-header { padding: 18px 22px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px 8px 0 0; }
#zone-settings-dialog .dlg-header h2 { margin: 0; font-size: 18px; color: #111827; }
#zone-settings-dialog .dlg-header .dlg-hint { color: #6b7280; font-size: 12px; line-height: 1.4; }
#zone-settings-dialog .dlg-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
#zone-settings-dialog .dlg-body .ps-row { display: flex; flex-direction: column; gap: 6px; }
#zone-settings-dialog .dlg-body label { font-size: 12px; font-weight: 500; color: #374151; display: flex; flex-direction: column; gap: 4px; }
#zone-settings-dialog .dlg-body input[type="text"],
#zone-settings-dialog .dlg-body select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: white; }
#zone-settings-dialog .dlg-body input[type="text"]:focus,
#zone-settings-dialog .dlg-body select:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
#zone-settings-dialog #zs-current-info { background: #f3f4f6; border-radius: 4px; padding: 8px 10px; line-height: 1.5; }
#zone-settings-dialog .dlg-footer { padding: 12px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }
#zone-settings-dialog .dlg-footer button { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
#zone-settings-dialog .dlg-footer button.primary { background: #7c3aed; color: white; border-color: #7c3aed; font-weight: 500; }
#zone-settings-dialog .dlg-footer button.primary:hover { background: #6d28d9; }
#zone-settings-dialog .dlg-footer button:not(.primary):hover { background: #f3f4f6; }
/* Zone tab roof-type / cog icons */
.zone-tab-cog {
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
padding: 0 4px;
font-size: 12px;
margin-left: 4px;
opacity: 0.6;
}
.zone-tab-cog:hover { opacity: 1; color: #4c1d95; }
.zone-tab-system {
font-size: 10px;
color: #6b7280;
margin-left: 4px;
padding: 1px 5px;
background: #eef2ff;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.zone-tab.active .zone-tab-system { background: #ede9fe; color: #4c1d95; }
/* Background image panel (sketch-zone feature) โ floating top-right over the viewer.
Lets the user import a site photo / map screenshot, calibrate it against a known
real-world distance, move/lock it, and adjust opacity so the grid shows through. */
#bgimage-panel {
position: absolute;
top: 12px;
right: 12px;
min-width: 220px;
max-width: 280px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(4px);
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
padding: 10px 12px;
z-index: 15;
font-size: 12px;
color: #1f2937;
}
#bgimage-panel.hidden { display: none; }
#bgimage-panel .bgi-empty { display: flex; flex-direction: column; gap: 6px; }
#bgimage-panel .bgi-loaded { display: none; flex-direction: column; gap: 8px; }
#bgimage-panel.has-image .bgi-empty { display: none; }
#bgimage-panel.has-image .bgi-loaded { display: flex; }
#bgimage-panel .bgi-row { display: flex; align-items: center; gap: 8px; }
#bgimage-panel .bgi-title { font-weight: 600; color: #111827; justify-content: space-between; }
#bgimage-panel .bgi-title > span:first-child { font-size: 12px; }
#bgimage-panel .bgi-hint { color: #6b7280; font-size: 11px; line-height: 1.35; }
#bgimage-panel label[for="bgi-opacity"] { font-size: 11px; color: #374151; min-width: 42px; }
#bgimage-panel #bgi-opacity { flex: 1; accent-color: #7c3aed; }
#bgimage-panel #bgi-opacity-val { font-size: 11px; color: #6b7280; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
#bgimage-panel .bgi-modes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
#bgimage-panel .bgi-modes button {
background: white;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 6px 4px;
cursor: pointer;
font-size: 11px;
color: #374151;
text-align: center;
white-space: nowrap;
}
#bgimage-panel .bgi-modes button:hover { background: #f3f4f6; }
#bgimage-panel .bgi-modes button.active { background: #7c3aed; color: white; border-color: #7c3aed; font-weight: 500; }
#bgimage-panel .bgi-footer { justify-content: space-between; font-size: 11px; color: #6b7280; }
#bgimage-panel #bgi-status { flex: 1; color: #4c1d95; font-weight: 500; font-size: 11px; min-height: 14px; }
#bgimage-panel #btn-bgi-remove {
background: white;
border: 1px solid #fca5a5;
border-radius: 4px;
padding: 4px 10px;
color: #b91c1c;
font-size: 11px;
cursor: pointer;
}
#bgimage-panel #btn-bgi-remove:hover { background: #fef2f2; }
#bgimage-panel #btn-bgi-import,
#bgimage-panel #btn-bgi-import-empty {
background: #7c3aed;
color: white;
border: 1px solid #7c3aed;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
#bgimage-panel #btn-bgi-import { padding: 4px 10px; font-size: 11px; font-weight: 500; }
#bgimage-panel #btn-bgi-import:hover,
#bgimage-panel #btn-bgi-import-empty:hover { background: #6d28d9; }
/* Pitch Calculator โ floating panel top-right over the viewer. Matches the
visual language of #bgimage-panel but shifted down so they can stack if
both are open on a sketch zone. Converts roof pitch to slope factor + angle
and applies it to the selected area measurement or sets a project default. */
#pitch-calculator {
position: absolute;
top: 12px;
right: 12px;
width: 240px;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(4px);
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
padding: 0;
z-index: 16;
font-size: 12px;
color: #1f2937;
}
#pitch-calculator.hidden { display: none; }
/* When both the background-image panel and pitch calculator are visible on a
sketch zone, offset the pitch calculator down so they don't overlap. */
#bgimage-panel:not(.hidden) ~ #pitch-calculator:not(.hidden) { top: 260px; }
#pitch-calculator .pc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
border-radius: 8px 8px 0 0;
}
#pitch-calculator .pc-title { font-weight: 600; color: #065f46; font-size: 12px; }
#pitch-calculator #btn-pc-close {
background: transparent; border: none; font-size: 16px;
color: #6b7280; cursor: pointer; padding: 0 4px; line-height: 1;
}
#pitch-calculator #btn-pc-close:hover { color: #111827; }
#pitch-calculator .pc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
#pitch-calculator .pc-row { display: flex; align-items: center; gap: 8px; }
#pitch-calculator .pc-row.hidden { display: none; }
#pitch-calculator .pc-row label { font-size: 11px; color: #374151; font-weight: 500; min-width: 40px; }
#pitch-calculator .pc-row select,
#pitch-calculator .pc-row input {
padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px;
font-size: 12px; flex: 1;
}
#pitch-calculator .pc-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
padding: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 6px;
}
#pitch-calculator .pc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#pitch-calculator .pc-stat-label { font-size: 10px; color: #047857; text-transform: uppercase; letter-spacing: 0.4px; }
#pitch-calculator .pc-stat-value { font-size: 15px; font-weight: 600; color: #065f46; font-variant-numeric: tabular-nums; }
#pitch-calculator .pc-hint { font-size: 10px; color: #6b7280; line-height: 1.35; font-style: italic; }
#pitch-calculator .pc-hint.has-sel { color: #065f46; font-style: normal; font-weight: 500; }
#pitch-calculator .pc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#pitch-calculator .pc-actions button {
padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px;
background: white; cursor: pointer; font-size: 11px; font-weight: 500;
color: #374151;
}
#pitch-calculator .pc-actions button:hover { background: #f3f4f6; }
#pitch-calculator #btn-pc-apply { background: #059669; color: white; border-color: #059669; }
#pitch-calculator #btn-pc-apply:hover { background: #047857; }
#pitch-calculator #btn-pc-apply:disabled { background: #d1d5db; color: #6b7280; border-color: #d1d5db; cursor: not-allowed; }
#pitch-calculator .pc-note { font-size: 10px; color: #6b7280; line-height: 1.4; padding-top: 4px; border-top: 1px dashed #e5e7eb; }
/* Toolbar pitch-toggle button โ highlights when the panel is visible. */
#btn-pitch-toggle.active { background: #065f46; color: white; border-color: #065f46; }
/* Pitch badge in the measurements list โ mirrors .wall-height layout. */
.pitch-badge {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
border-radius: 10px;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
font-variant-numeric: tabular-nums;
margin-right: 4px;
}
.pitch-badge:hover { background: #d1fae5; }
.pitch-badge.pitch-missing { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.pitch-badge.pitch-missing:hover { background: #fde68a; }
/* ============================================================================
* Auth overlay โ covers the takeoff app until the user signs in (browser only)
* ============================================================================ */
.auth-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f3a3e 0%, #155a60 100%);
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.auth-overlay.hidden { display: none; }
.auth-overlay .auth-card {
width: 100%;
max-width: 420px;
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.auth-overlay .auth-logo {
width: 64px;
height: 64px;
margin: 0 auto 20px;
background: #0f3a3e;
border-radius: 14px;
color: #f0c549;
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
.auth-overlay .auth-title {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0 0 4px;
}
.auth-overlay .auth-subtitle {
text-align: center;
color: #6b7280;
margin: 0 0 28px;
font-size: 13px;
}
.auth-overlay .auth-tabs {
display: flex;
background: #f3f4f6;
border-radius: 8px;
padding: 4px;
margin-bottom: 24px;
}
.auth-overlay .auth-tab {
flex: 1;
padding: 8px 12px;
border: none;
background: transparent;
font: inherit;
font-weight: 500;
color: #374151;
border-radius: 6px;
cursor: pointer;
}
.auth-overlay .auth-tab:hover { color: #111827; }
.auth-overlay .auth-tab.active {
background: white;
color: #0f3a3e;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.auth-overlay .field { margin-bottom: 16px; }
.auth-overlay .field label {
display: block;
font-size: 12px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.auth-overlay .field input {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font: inherit;
font-size: 14px;
color: #111827;
background: white;
box-sizing: border-box;
}
.auth-overlay .field input:focus {
outline: none;
border-color: #155a60;
box-shadow: 0 0 0 3px rgba(21, 90, 96, 0.15);
}
.auth-overlay .field-hint {
font-size: 11px;
color: #6b7280;
margin-top: 4px;
}
.auth-overlay .auth-submit {
width: 100%;
padding: 11px 16px;
background: #0f3a3e;
color: white;
border: none;
border-radius: 6px;
font: inherit;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.auth-overlay .auth-submit:hover:not(:disabled) { background: #155a60; }
.auth-overlay .auth-submit:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.auth-overlay .auth-message {
padding: 10px 12px;
border-radius: 6px;
font-size: 13px;
margin-bottom: 16px;
display: none;
}
.auth-overlay .auth-message.error { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.auth-overlay .auth-message.success { display: block; background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.auth-overlay .auth-message.info { display: block; background: #e6f0f1; color: #0f3a3e; border: 1px solid #b8d8db; }
.auth-overlay .auth-footer {
margin-top: 16px;
text-align: center;
font-size: 12px;
color: #6b7280;
}
.auth-overlay .auth-footer a { color: #155a60; text-decoration: none; font-weight: 500; }
.auth-overlay .auth-footer a:hover { text-decoration: underline; }
.auth-overlay .spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin-right: 6px;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* User chip in toolbar โ appears in browser mode after sign-in */
.cloud-user-chip {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 11px;
color: #374151;
}
.cloud-user-chip .cuc-signout {
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
padding: 2px 4px;
font-size: 14px;
line-height: 1;
}
.cloud-user-chip .cuc-signout:hover { color: #b91c1c; }
/* Modal pickers used by the Electron-API shim (open project, etc.) */
.api-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.api-modal {
background: white;
border-radius: 8px;
width: 100%;
max-width: 520px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.api-modal h2 {
margin: 0;
padding: 18px 24px;
font-size: 16px;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.api-modal-hint {
margin: 0;
padding: 10px 24px;
font-size: 12px;
color: #6b7280;
border-bottom: 1px solid #f3f4f6;
}
.api-modal-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
}
.api-modal-list li {
padding: 12px 24px;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
}
.api-modal-list li:hover { background: #f9fafb; }
.api-modal-item-name {
font-weight: 500;
color: #111827;
margin-bottom: 2px;
}
.api-modal-item-meta {
font-size: 11px;
color: #6b7280;
}
.api-modal-footer {
padding: 12px 24px;
border-top: 1px solid #e5e7eb;
text-align: right;
background: #f9fafb;
}
.api-modal-footer button {
padding: 6px 14px;
border: 1px solid #d1d5db;
background: white;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.api-modal-footer button:hover { background: #f3f4f6; }