/* PlanFast — blueprint theme */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
	--bp-deep: #0d1d33;
	--bp-mid: #12294a;
	--bp-line: #1e3f6e;
	--bp-grid: rgba(120, 170, 235, 0.07);
	--ink: #dce8f7;
	--ink-dim: #8fa9c9;
	--cyan: #4fd1e0;
	--amber: #f5a623;
	--danger: #e0604f;
	--panel: #102340;
	--radius: 6px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Sora', 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink);
	background:
		linear-gradient(rgba(13,29,51,0.97), rgba(13,29,51,0.97)),
		repeating-linear-gradient(0deg, transparent 0 23px, var(--bp-grid) 23px 24px),
		repeating-linear-gradient(90deg, transparent 0 23px, var(--bp-grid) 23px 24px),
		var(--bp-deep);
}

h1 { font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-size: 1.35rem; margin: 0 0 10px; }
.mono, td.num, .badge { font-family: 'IBM Plex Mono', monospace; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
	background: var(--bp-mid);
	border-bottom: 2px solid var(--bp-line);
}
.topbar .brand {
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	color: var(--cyan);
}
.topbar .brand span { color: var(--amber); }
.topbar .spacer { flex: 1; }
.mainnav { display: flex; gap: 14px; margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--bp-line); }
.mainnav a { color: var(--ink-dim); font-weight: 700; font-size: 0.95rem; }
.mainnav a:hover { color: var(--cyan); text-decoration: none; }
.help-btn { border: 1px solid var(--bp-line); }

.help-drawer {
	position: fixed; top: 46px; right: -380px; bottom: 0; width: 360px; z-index: 40;
	background: var(--bp-mid);
	border-left: 2px solid var(--amber);
	padding: 14px 16px;
	overflow-y: auto;
	transition: right 0.22s ease;
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.help-drawer.open { right: 0; }
.help-head { display: flex; align-items: center; justify-content: space-between; }
.help-head h3 { margin: 0; color: var(--amber); }
.help-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.help-steps li {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 10px 0; border-bottom: 1px solid var(--bp-line);
	font-size: 0.92rem;
}
.help-steps .meta { margin-top: 3px; line-height: 1.45; }
.step-check {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	border: 1px solid var(--bp-line); color: transparent;
	display: grid; place-items: center; font-size: 14px; margin-top: 1px;
}
li.step-done .step-check { background: var(--cyan); border-color: var(--cyan); color: var(--bp-deep); }

.noscale-banner {
	position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 6;
	background: rgba(245, 166, 35, 0.95); color: var(--bp-deep);
	font-weight: 700; font-size: 0.95rem;
	padding: 6px 14px; border-radius: var(--radius);
	cursor: pointer;
}

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; min-width: 0; }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--cyan); text-decoration: none; }
.crumb-sep { color: var(--bp-line); }
.crumb-here {
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 340px;
}

.container { width: 76%; max-width: 1500px; margin: 0 auto; padding: 18px 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 20px; }

.card {
	background: var(--bp-mid);
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	padding: 14px;
}
.card h3 { margin: 0 0 6px; font-size: 1rem; }
.card .meta { color: var(--ink-dim); font-size: 0.95rem; }

label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 0.95rem; }

input, select, textarea {
	width: 100%;
	height: 32px;
	padding: 4px 8px;
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	background: var(--bp-deep);
}
input:focus, select:focus { outline: 1px solid var(--cyan); }

button, .btn {
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--cyan);
	border-radius: var(--radius);
	background: var(--cyan);
	color: var(--bp-deep);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; color: var(--cyan); }
.btn-amber { background: var(--amber); border-color: var(--amber); }

table { width: 100%; border-collapse: collapse; }
th, td { height: 32px; padding: 4px 12px; text-align: left; border-bottom: 1px solid var(--bp-line); }
tbody tr:nth-child(even) { background: rgba(30, 63, 110, 0.25); }
tbody tr:hover { background: rgba(79, 209, 224, 0.08); }

.error-line { color: var(--danger); font-weight: 700; min-height: 20px; }

/* ── Public landing / login (modeled on the roofcrm split hero) ── */
.landing {
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	gap: 56px;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 48px;
}
.hero-panel {
	flex: 1.5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 0;
	position: relative;
	/* the ::before/::after glow layers extend past the panel — clip them or
	   they stretch the document and force a scrollbar */
	overflow: hidden;
}
.hero-panel::before {
	content: '';
	position: absolute;
	top: -40%; left: -20%;
	width: 80%; height: 80%;
	background: radial-gradient(ellipse, rgba(79, 209, 224, 0.10) 0%, transparent 70%);
	pointer-events: none;
}
.hero-panel::after {
	content: '';
	position: absolute;
	bottom: -30%; right: -10%;
	width: 60%; height: 60%;
	background: radial-gradient(ellipse, rgba(245, 166, 35, 0.07) 0%, transparent 70%);
	pointer-events: none;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(79, 209, 224, 0.10);
	border: 1px solid rgba(79, 209, 224, 0.25);
	color: var(--cyan);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 13px;
	border-radius: 100px;
	margin-bottom: 14px;
	width: fit-content;
}
.hero-badge::before {
	content: '';
	width: 8px; height: 8px;
	background: var(--cyan);
	border-radius: 50%;
	animation: pf-pulse 2s infinite;
}
@keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero-title {
	font-size: clamp(30px, 3vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 12px;
	color: #f2f7fd;
}
.hero-title span {
	background: linear-gradient(135deg, var(--cyan), var(--amber));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.hero-subtitle {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.45;
	color: var(--ink-dim);
	margin: 0 0 18px;
	max-width: 680px;
}
.value-props { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.value-prop { display: flex; gap: 12px; align-items: flex-start; }
.value-icon {
	flex: none;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	font-size: 17px;
	background: var(--bp-mid);
	border: 1px solid var(--bp-line);
	border-radius: 8px;
}
.value-text h3 { margin: 0 0 2px; font-size: 1.05rem; color: #f2f7fd; }
.value-text p { margin: 0; color: var(--ink-dim); font-size: 1rem; line-height: 1.4; }
.estimates-box {
	margin-top: 16px;
	max-width: 680px;
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	background: rgba(18, 41, 74, 0.55);
	padding: 10px 14px;
}
.estimates-title {
	font-weight: 700;
	color: var(--cyan);
	margin-bottom: 8px;
	font-size: 1rem;
	line-height: 1.35;
}
.estimates-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 3px 16px;
}
.estimates-list li {
	position: relative;
	padding-left: 18px;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--ink);
}
.estimates-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--amber);
	font-weight: 700;
}

.hero-cta {
	margin-top: 16px;
	color: var(--amber);
	font-weight: 700;
	font-size: 1.05rem;
}
.landing .login-card {
	align-self: center;
	margin: 24px 0;
	flex: none;
}
/* Short desktop viewports (laptops): shave spacing, never font size —
   the 16px body-copy floor holds; whitespace absorbs the squeeze. */
@media (min-width: 981px) and (max-height: 840px) {
	.hero-panel { padding: 14px 0; }
	.hero-badge { margin-bottom: 10px; }
	.hero-title { margin-bottom: 8px; font-size: clamp(30px, 2.6vw, 42px); }
	.hero-subtitle { margin-bottom: 12px; }
	.value-props { gap: 7px; }
	.value-icon { width: 30px; height: 30px; font-size: 15px; }
	.estimates-box { margin-top: 12px; padding: 8px 14px; }
	.hero-cta { margin-top: 12px; }
}

@media (max-width: 980px) {
	.landing { flex-direction: column; gap: 0; padding: 0 24px; }
	.hero-panel { padding: 40px 0; }
	.hero-title { font-size: 38px; }
	.hero-subtitle { font-size: 17px; }
	.landing .login-card { margin: 0 auto 40px; }
}

.demo-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(245, 166, 35, 0.12);
	border: 1px solid rgba(245, 166, 35, 0.4);
	color: var(--amber);
	font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
	padding: 4px 12px; border-radius: 100px; margin: 6px 0 10px;
}
.demo-badge::before { content: ''; width: 8px; height: 8px; background: var(--amber); border-radius: 50%; animation: pf-pulse 2s infinite; }
.demo-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--ink-dim); font-size: 12px; }
.demo-divider::before, .demo-divider::after { content: ''; flex: 1; border-top: 1px solid var(--bp-line); }

/* ── Login ── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card {
	width: 360px;
	padding: 28px;
	background: var(--bp-mid);
	border: 1px solid var(--bp-line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
}
.login-card .brand { font-size: 1.6rem; font-weight: 700; color: var(--cyan); margin-bottom: 2px; }
.login-card .brand span { color: var(--amber); }
.login-card .tag { color: var(--ink-dim); margin-bottom: 18px; font-size: 0.95rem; }
.login-card label { margin-top: 12px; }
.login-card button { width: 100%; margin-top: 18px; }
.pw-row { position: relative; }
.pw-row input { padding-right: 40px; }
.pw-row .pw-toggle {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;               /* .login-card button margin-top must not shift it */
	height: 26px;
	width: 30px;
	padding: 0;
	display: grid;
	place-items: center;
	background: transparent;
	border: none;
	font-size: 16px;
	line-height: 1;
	filter: none;
}
.pw-row .pw-toggle:hover { filter: brightness(1.3); }

/* ── Viewer layout ── */
.viewer-shell {
	display: grid;
	grid-template-columns: 240px 1fr;
	height: calc(100vh - 46px);
}
.sheetbar {
	background: var(--bp-mid);
	border-right: 1px solid var(--bp-line);
	overflow-y: auto;
	padding: 8px;
}
.sheetbar .filter { margin-bottom: 8px; }
.sheet-item {
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	margin-bottom: 8px;
	padding: 6px;
	cursor: pointer;
}
.sheet-item.active { border-color: var(--amber); background: rgba(245, 166, 35, 0.08); }
.sheet-item canvas { width: 100%; display: block; background: #fff; border-radius: 3px; }
.sheet-item .row { display: flex; gap: 4px; margin-top: 4px; }
.sheet-item input, .sheet-item select {
	height: 24px; font-size: 14px; padding: 2px 4px;
}
.sheet-item .num { width: 56px; flex: none; }

.canvas-stage { position: relative; overflow: hidden; background: #26303c; }
.canvas-stage canvas { position: absolute; top: 0; left: 0; touch-action: none; }
#scratch { cursor: grab; }
#scratch.panning { cursor: grabbing; }

.viewer-hud {
	position: absolute; right: 12px; top: 10px; z-index: 5;
	display: flex; gap: 6px; align-items: center;
	background: rgba(13, 29, 51, 0.85);
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	padding: 4px 8px;
}
.viewer-hud button { height: 26px; padding: 0 9px; font-size: 14px; }
.viewer-hud .zoom-readout { font-family: 'IBM Plex Mono', monospace; font-size: 14px; width: 52px; text-align: center; }

/* ── Takeoff tools ── */
.viewer-shell.three-col { grid-template-columns: 240px 1fr 300px; }

.toolbar {
	position: absolute; left: 12px; top: 10px; z-index: 5;
	display: flex; flex-direction: column; gap: 4px;
	background: rgba(13, 29, 51, 0.85);
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	padding: 6px;
}
.toolbar button {
	width: 38px; height: 34px; padding: 0;
	background: transparent; border: 1px solid transparent; color: var(--ink);
	font-size: 15px;
}
.toolbar button:hover { border-color: var(--bp-line); }
.toolbar button.active { background: var(--cyan); color: var(--bp-deep); }
.toolbar button:disabled { opacity: 0.35; }
.toolbar hr { border: none; border-top: 1px solid var(--bp-line); margin: 2px 0; width: 100%; }

.scale-chip {
	font-family: 'IBM Plex Mono', monospace; font-size: 14px;
	padding: 2px 8px; border-radius: 3px;
	background: rgba(79, 209, 224, 0.15); color: var(--cyan);
}
.scale-chip.warn { background: rgba(245, 166, 35, 0.18); color: var(--amber); }

.takeoff-panel {
	background: var(--bp-mid);
	border-left: 1px solid var(--bp-line);
	overflow-y: auto;
	padding: 10px;
}
.cond-box {
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	margin-bottom: 8px;
	overflow: hidden;
}
.cond-box.active { border-color: var(--cyan); }
.cond-head {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 9px; cursor: pointer;
}
.cond-head:hover { background: rgba(79, 209, 224, 0.07); }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cond-name { flex: 1; font-size: 0.95rem; }
.cond-total { font-size: 0.95rem; color: var(--ink-dim); }
.cond-height-row {
	display: flex; align-items: center; gap: 8px;
	padding: 0 9px 7px; font-size: 0.95rem;
}
.cond-height-row input { width: 70px; height: 24px; font-size: 14px; }
.mark-row {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 9px; font-size: 0.95rem;
	border-top: 1px solid rgba(30, 63, 110, 0.5);
	cursor: pointer;
}
.mark-row:hover { background: rgba(79, 209, 224, 0.07); }
.mark-row.selected { background: rgba(245, 166, 35, 0.12); }
.mark-row span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-row .mono { color: var(--ink-dim); font-size: 0.95rem; }
.typed-add {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 3px 8px;
	background: transparent;
	border: 1px dashed var(--ink-dim);
	border-radius: 4px;
	color: var(--ink-dim);
	font-size: 12px;
	cursor: pointer;
	text-align: left;
}
.typed-add:hover { color: var(--cyan); border-color: var(--cyan); }
.mark-del {
	width: 20px; height: 20px; padding: 0; flex: none;
	background: transparent; border: none; color: var(--ink-dim); font-size: 15px;
}
.mark-del:hover { color: var(--danger); }

.pin-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.95rem; }
.pin-row span { flex: 1; }
.pin-val { width: 84px; height: 24px; font-size: 14px; }

.modal-scrim {
	position: absolute; inset: 0; z-index: 20;
	background: rgba(13, 29, 51, 0.6);
	display: flex; align-items: center; justify-content: center;
}
.modal {
	width: 380px; padding: 18px;
	background: var(--bp-mid);
	border: 1px solid var(--bp-line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.popover {
	position: absolute; z-index: 15; width: 220px;
	background: var(--bp-mid);
	border: 1px solid var(--cyan);
	border-radius: var(--radius);
	padding: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.popover label { font-size: 0.95rem; }
.popover input, .popover select { height: 26px; font-size: 14px; }
.popover button { height: 26px; font-size: 14px; padding: 0 10px; }

/* Customers — accordion rows: spread-out header, services expand below */
.cust-row {
	background: var(--bp-mid);
	border: 1px solid var(--bp-line);
	border-radius: var(--radius);
	margin-bottom: 8px;
	overflow: hidden;
}
.cust-head {
	display: grid;
	grid-template-columns: 18px minmax(160px, 1.2fr) minmax(120px, 1fr) minmax(180px, 1.4fr) 150px 230px auto;
	gap: 18px;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
}
.cust-head:hover { background: rgba(79, 209, 224, 0.06); }
.cust-chev { color: var(--cyan); }
.cust-name { font-size: 1.02rem; }
.cust-cell { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-body {
	display: none;
	border-top: 1px solid var(--bp-line);
	padding: 10px 14px 12px 46px;
	background: rgba(13, 29, 51, 0.4);
}
.cust-row.open .cust-body { display: block; }
.cust-svc {
	display: grid;
	grid-template-columns: minmax(180px, 300px) 70px 100px;
	gap: 12px;
	align-items: center;
	padding: 4px 0;
}
.cust-svc input { height: 28px; }
.cust-actions { display: flex; gap: 8px; }
.cust-actions button { height: 26px; padding: 0 10px; font-size: 13px; }

@media (max-width: 1100px) {
	.cust-head { grid-template-columns: 18px 1fr 1fr auto; }
	.cust-head .cust-cell:nth-child(3), .cust-head .cust-cell:nth-child(5) { display: none; }
}

.project-card { cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.project-card:hover { border-color: var(--cyan); transform: translateY(-2px); }

.upload-drop {
	border: 2px dashed var(--bp-line);
	border-radius: var(--radius);
	padding: 26px;
	text-align: center;
	color: var(--ink-dim);
	cursor: pointer;
}
.upload-drop.drag { border-color: var(--cyan); color: var(--cyan); }
.progress { height: 6px; background: var(--bp-deep); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress > div { height: 100%; width: 0; background: var(--cyan); transition: width 0.15s; }