/* Trifecta Solar Tracker - light theme built on the logo palette */
:root {
	--blue: #025586;
	--blue-600: #034a74;
	--blue-50: #e8f1f7;
	--green: #69b545;
	--green-600: #579a37;
	--green-50: #edf6e8;
	--orange: #f9a11b;
	--orange-50: #fef3e1;
	--red: #c0392b;
	--red-50: #fbeceb;

	--bg: #f3f5f2;
	--surface: #ffffff;
	--text: #1c2830;
	--muted: #5d6a72;
	--border: #e0e5e1;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(16, 32, 40, .05), 0 2px 8px rgba(16, 32, 40, .04);
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; color: var(--blue); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 750; }
h2 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.mt { margin-top: 1.5rem; }

/* ---------- top bar ---------- */
.topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
	max-width: 1280px; margin: 0 auto;
	display: flex; align-items: center; gap: 1.5rem;
	padding: .6rem 1rem;
}
.brand img { display: block; height: 42px; width: auto; }
.mainnav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a, .mainnav .soon {
	padding: .45rem .75rem; border-radius: 999px; white-space: nowrap;
	font-weight: 600; font-size: .92rem; color: var(--text);
}
.mainnav a:hover { background: var(--blue-50); text-decoration: none; }
.mainnav a.active { background: var(--blue); color: #fff; }
.mainnav .soon { color: #a2acb2; cursor: default; }

.usermenu { position: relative; }
.usermenu summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
	padding: .25rem .5rem .25rem .25rem; border-radius: 999px;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--bg); }
.usermenu-name { font-weight: 600; font-size: .92rem; }
.usermenu-panel {
	position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(16, 32, 40, .12); padding: .35rem; display: flex; flex-direction: column;
}
.usermenu-panel a, .usermenu-panel .linklike {
	display: block; padding: .5rem .75rem; border-radius: 6px; color: var(--text); text-align: left; width: 100%;
}
.usermenu-panel a:hover, .usermenu-panel .linklike:hover { background: var(--bg); text-decoration: none; }
.usermenu-panel a.menu-admin { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.menu-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); background: var(--blue-50); border-radius: 999px; padding: .1rem .45rem; }

.avatar {
	display: inline-grid; place-items: center; flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--green); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.avatar-sm { width: 26px; height: 26px; font-size: .68rem; vertical-align: middle; }

/* ---------- page ---------- */
.page { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.back { display: inline-block; font-size: .88rem; margin-bottom: .35rem; }
.footer { text-align: center; color: var(--orange); font-weight: 600; font-size: .8rem; padding: 1rem; }
.footer a { color: inherit; }
/* technical strings: no contextual alternates (the font draws "x86" as "\00d7 86") */
.literal { font-feature-settings: "calt" 0; font-variant-ligatures: none; }

.card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 1.25rem;
}
.card-flush { padding: 0; overflow-x: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.span-2 { grid-column: 1 / -1; }
/* a grid-2 column holding several cards, so each column stacks independently (no gaps from the other side) */
.col-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card-module { border-top: 4px solid var(--blue); }
.card-module p { color: var(--muted); margin: 0; font-size: .92rem; }
.card-module .chip { margin-bottom: .6rem; }

.chip {
	display: inline-block; padding: .12rem .55rem; border-radius: 999px;
	background: #eef1f0; color: var(--muted); font-size: .75rem; font-weight: 650; vertical-align: middle;
}
.chip-green { background: var(--green-50); color: #3f7a24; }
.chip-blue { background: var(--blue-50); color: var(--blue); }
.chip-orange { background: var(--orange-50); color: #a5620a; }
.chip-purple { background: #efe8f7; color: #5b3a8a; }

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: .85rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .88rem; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=url], input[type=tel], input[type=search], select, textarea {
	font: inherit; font-weight: 400; color: var(--text);
	padding: .6rem .7rem; border: 1px solid #cdd5d0; border-radius: var(--radius-sm); background: #fff;
	width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); }
.input-short { max-width: 8rem; }
.hint { font-size: .8rem; color: var(--muted); margin: -.3rem 0 0; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	font: inherit; font-weight: 650; font-size: .92rem;
	padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none !important; white-space: nowrap;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-600); }
.btn-secondary { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn-secondary:hover { background: var(--blue-50); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-small { padding: .3rem .7rem; font-size: .8rem; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; }

.flash { padding: .7rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; border: 1px solid; }
.flash-success { background: var(--green-50); border-color: #cfe6c3; color: #2f5f1a; }
.flash-error { background: var(--red-50); border-color: #f1c9c5; color: #8c2a20; }
.flash-info { background: var(--blue-50); border-color: #c9dceb; color: var(--blue-600); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
	text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--muted); font-weight: 700; padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: #fafbfa;
}
.table td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafcfb; }
.row-muted td { color: #9aa5ab; }

/* ---------- devices ---------- */
.devices { list-style: none; margin: 0 0 1rem; padding: 0; }
.devices li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.devices li:last-child { border-bottom: 0; }

/* ---------- activity log ---------- */
.activity { list-style: none; margin: 0; padding: 0; }
.activity-item { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: 0; }
.activity-meta { font-size: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.activity-meta time { color: var(--muted); }
/* dashboard Latest activity: which project an entry is on */
.activity-project { font-weight: 600; }
@media (max-width: 760px) { .activity-project { flex-basis: 100%; } }
/* an entry linked from the dashboard lands clear of the top bar */
.activity-item[id] { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
.activity-change, .activity-event { color: var(--muted); font-size: .9rem; }
.activity-change .val { color: var(--text); background: #f1f3f2; padding: 0 .3rem; border-radius: 4px; }
.comment-text { background: var(--blue-50); border-radius: 0 10px 10px 10px; padding: .5rem .75rem; margin-top: .2rem; color: var(--text); }
.activity-empty { color: var(--muted); }

/* ---------- auth pages ---------- */
.auth-body { background: linear-gradient(160deg, #eef4f8 0%, #f3f5f2 55%, #eef6e9 100%); }
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-card {
	width: 100%; max-width: 400px; background: var(--surface); border-radius: 18px;
	border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(2, 85, 134, .08); padding: 2rem 1.75rem;
}
.auth-logo { display: block; margin: 0 auto 1.25rem; height: auto; width: 170px; }
.auth-title { font-size: 1.3rem; text-align: center; margin-bottom: 1.25rem; }

.empty-state { text-align: center; padding: 4rem 1rem; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
	body { font-size: 16px; } /* prevents iOS zoom on input focus */
	.topbar-inner { flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem; }
	.brand img { height: 34px; }
	.usermenu { margin-left: auto; }
	.usermenu-name { display: none; }
	.mainnav { order: 3; flex-basis: 100%; padding-bottom: .15rem; }
	.grid-2 { grid-template-columns: 1fr; }
	.page { padding: .75rem .5rem 2rem; }
	.card:not(.card-flush) { padding: .9rem .8rem; }
	h1 { font-size: 1.35rem; }
}

/* =====================================================================
   Projects, lists, forms (v2)
   ===================================================================== */
.text-red { color: var(--red) !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); padding: 1.25rem 1rem; text-align: center; }
.row-gap { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .3rem 0; }
.self-end { align-self: end; padding-bottom: .55rem; }
.narrow { max-width: 760px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem .5rem; }
.card-head h2 { margin: 0; }
.cell-note { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* nav "Lists" dropdown */
.navmenu { position: relative; }
.navmenu summary { list-style: none; cursor: pointer; padding: .45rem .75rem; border-radius: 999px; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary:hover { background: var(--blue-50); }
.navmenu summary.active { background: var(--blue); color: #fff; }
.navmenu .usermenu-panel { right: auto; left: 0; min-width: 220px; z-index: 30; }

/* dashboard stats */
.stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); color: var(--text); display: flex; flex-direction: column; border-left: 4px solid var(--blue); }
.stat:hover { text-decoration: none; border-color: var(--blue); }
.stat-purple { border-left-color: #7a5ea8; }
.stat-orange { border-left-color: var(--orange); }
.stat-num { font-size: 1.7rem; font-weight: 750; color: var(--blue); line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* list tabs + filters */
.tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: .9rem; scrollbar-width: none; }
.tab { padding: .55rem .8rem; color: var(--muted); font-weight: 600; font-size: .9rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-count { background: #eef1f0; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; margin-left: .2rem; }
.tab.active .tab-count { background: var(--blue-50); }
/* projects: a thin bracket over Active through Closeout, the tabs that make up Active */
.tabs-grouped { align-items: flex-end; }
.tab-group { display: flex; gap: .25rem; position: relative; padding-top: 7px; flex-shrink: 0; }
.tab-group::before { content: ''; position: absolute; top: 1px; left: .35rem; right: .35rem; height: 5px; border: 2px solid #b8c7d0; border-bottom: 0; border-radius: 4px 4px 0 0; pointer-events: none; }
.filters { display: flex; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; }
.filters input[type=search] { max-width: 340px; }
.filters select { max-width: 220px; }
tr.clickable { cursor: pointer; }
.table-projects td { vertical-align: top; overflow-wrap: normal; }
/* Floating blue column headers on every list table: stay under the top bar while scrolling.
   The card must not scroll sideways for sticky to work, so these tables wrap to fit instead.
   Rounded top corners only when the header is the top of the card (no card-head above it). */
.card-sticky-head { overflow: visible; }
.card-sticky-head .table th, .card-sticky-head .todo-head {
	position: sticky; top: var(--topbar-h, 64px); z-index: 5;
	background: var(--blue); color: #fff; border-bottom: 0; white-space: nowrap;
}
.card-sticky-head > .table:first-child th:first-child, .card-sticky-head .todo-head { border-top-left-radius: var(--radius); }
.card-sticky-head > .table:first-child th:last-child, .card-sticky-head .todo-head { border-top-right-radius: var(--radius); }
/* Tables with no phone layout of their own scroll sideways inside the card on phones. That makes the
   card the sticky container, which would push the header down by the top bar's height, so on phones
   the header stays blue but sits still. */
@media (max-width: 760px) {
	.card-sticky-head.scroll-x-phone { overflow-x: auto; }
	.card-sticky-head.scroll-x-phone .table th { position: static; }
}
/* the card no longer scrolls sideways, so the table wraps to fit instead */
.table-projects td:nth-child(2), .table-projects td:nth-child(5), .table-projects td:nth-child(6), .table-projects td:nth-child(7) { white-space: normal; }
@media (max-width: 1280px) { .table-projects .cell-note { max-width: 260px; } }
.table-projects .phase, .table-projects .chip { white-space: nowrap; display: inline-block; }
/* project # a step smaller than the name, the name bold, and a tighter gap between the two columns */
.table-projects td:nth-child(1) { font-size: .84rem; font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
	/* tighter rows than other tables, so more projects fit on screen */
	.table-projects td { padding-top: .5rem; padding-bottom: .5rem; }
	/* the smaller # sat about a pixel high next to the name; nudge it down onto the name's baseline */
	.table-projects td:nth-child(1) { padding-top: calc(.5rem + 1.5px); }
	.table-projects th:nth-child(1), .table-projects td:nth-child(1) { padding-right: .5rem; }
	.table-projects th:nth-child(2), .table-projects td:nth-child(2) { padding-left: .75rem; }
}
.table-projects td:nth-child(2) > a:first-child { font-weight: 600; }
/* inline SVG icons (App\Icons): line drawings in currentColor, solid parts marked .fill */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon .fill { fill: currentColor; stroke: none; }
/* install type and batteries under the project number on the Projects list */
.scope-icons { display: flex; gap: .3rem; margin-top: .25rem; color: var(--blue); }
.scope-icons .icon { width: 18px; height: 18px; }
.scope-icons .icon-battery { color: var(--green-600); }
@media (min-width: 761px) and (max-width: 1040px) {
	/* tablet widths: Type is dropped so the other columns don't break mid-word */
	.table-projects th:nth-child(5), .table-projects td:nth-child(5) { display: none; }
	.table-projects th, .table-projects td { padding-left: .6rem; padding-right: .6rem; }
	.table-projects .cell-note { max-width: 190px; }
	.table-projects th:nth-child(1), .table-projects td:nth-child(1) { padding-right: .3rem; }
	.table-projects th:nth-child(2), .table-projects td:nth-child(2) { padding-left: .45rem; }
}

/* phase badges */
.phase { display: inline-block; padding: .14rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.phase-pre_install { background: #eef1f0; color: #45525a; }
.phase-installation { background: var(--blue-50); color: var(--blue); }
.phase-closeout { background: var(--orange-50); color: #a5620a; }
.phase-complete { background: var(--green-50); color: #3f7a24; }
.phase-cancelled { background: #f4e6e4; color: #8c2a20; text-decoration: line-through; }

/* project header */
.project-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.project-head h1 { margin-bottom: .4rem; }
.pnum { color: var(--muted); font-weight: 600; }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.status-note { margin: .5rem 0 0; color: var(--text); background: #fff; border: 1px dashed var(--border); border-radius: 8px; padding: .35rem .6rem; display: inline-block; }
.head-actions { display: flex; gap: .5rem; }

/* summary cards */
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.summary-grid .card { padding: 1rem 1.1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .75rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--muted); font-weight: 600; font-size: .8rem; padding-top: .1rem; }
.kv dd { margin: 0; }
.kv .work-order { white-space: nowrap; }
.metrics { display: flex; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.metrics > div { display: flex; flex-direction: column; }
.m-num { font-size: 1.3rem; font-weight: 750; color: var(--blue); line-height: 1.1; }
.m-label { font-size: .72rem; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }

/* task grid */
.tasks-wrap { display: flex; flex-direction: column; gap: 1rem; }
.phase-title { display: flex; align-items: baseline; gap: .75rem; padding: .9rem 1rem .4rem; }
.phase-title h2 { margin: 0; }
.tgrid { font-size: .88rem; }
.trow {
	display: grid; align-items: center; gap: .4rem;
	grid-template-columns: minmax(200px, 2.2fr) 70px 150px 112px minmax(90px, .9fr) 70px minmax(140px, 2fr) 32px;
	padding: .3rem 1rem; border-top: 1px solid var(--border); position: relative;
}
.phase-block { overflow: visible; }
.trow.thead { position: sticky; top: var(--topbar-h, 64px); z-index: 6; border-bottom: 1px solid var(--border); }
.trow.thead { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding-top: .45rem; padding-bottom: .45rem; }
.trow-task { background: #fff; }
.trow-task .tname { font-weight: 650; }
.trow-sub .tname { padding-left: 1.4rem; }
.trow .rollup { grid-column: span 2; color: var(--muted); font-size: .82rem; }
.trow input, .trow select { padding: .3rem .4rem; font-size: .85rem; border-color: #dde3df; border-radius: 6px; min-width: 0; }
.trow select { padding-right: .2rem; }
.trow input[type=date] { font-variant-numeric: tabular-nums; }
.trow input.is-overdue { background: #fff4d1; border-color: #e6c766; }
.trow input.is-overdue-30 { background: #fbd3cd; border-color: #d9534f; color: #8c1d14; font-weight: 650; }
.dwrap { display: block; margin: 0; min-width: 0; font-weight: 400; }
.dwrap .mlabel { display: none; }
.tname { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #b6c1bb; flex: none; }
.is-resolved > .tname .dot { background: var(--green); border-color: var(--green); }
.is-na > .tname, .parent-na > .tname { color: #9aa5ab; text-decoration: line-through; }
.is-na > .tname .dot, .parent-na > .tname .dot { border-style: dashed; }
.is-na input, .is-na select:not([data-field=needed]), .parent-na input, .parent-na select { opacity: .45; }
.is-saving { opacity: .6; }
.is-saved { box-shadow: inset 3px 0 0 var(--green); }
.is-error { box-shadow: inset 3px 0 0 var(--red); }
.gate { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; background: var(--blue-50); color: var(--blue); border-radius: 4px; padding: 0 .3rem; font-weight: 700; }
.tmenu { position: relative; }
.tmenu summary { list-style: none; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); font-size: 1.1rem; }
.tmenu summary::-webkit-details-marker { display: none; }
.tmenu summary:hover { background: var(--bg); }
.tmenu .usermenu-panel { z-index: 25; min-width: 160px; }
.tmenu form { margin: 0; }
.phase-add { display: flex; gap: .75rem; flex-wrap: wrap; padding: .7rem 1rem .9rem; border-top: 1px solid var(--border); background: #fafbfa; border-radius: 0 0 var(--radius) var(--radius); }
.inline-add { display: flex; gap: .4rem; align-items: center; flex: 1; min-width: 260px; }
.inline-add input, .inline-add select { padding: .35rem .5rem; font-size: .85rem; }

/* log */
.log-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg a { padding: .3rem .8rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.seg a.active { background: var(--blue); color: #fff; }
.seg a:hover { text-decoration: none; }
.comment-form { display: flex; gap: .5rem; align-items: flex-end; margin: .75rem 0 .5rem; }
.comment-form textarea { flex: 1; }
.comment-edit { margin-top: .3rem; font-size: .82rem; }
.comment-edit summary { cursor: pointer; color: var(--muted); }
.comment-edit form { margin-top: .4rem; }
.stack-sm { display: flex; flex-direction: column; gap: .4rem; }
textarea { font: inherit; padding: .55rem .7rem; border: 1px solid #cdd5d0; border-radius: var(--radius-sm); width: 100%; resize: vertical; }

/* generic form grid */
.project-form .card { margin-bottom: 1rem; }
.grid-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1rem; align-items: start; }
.grid-form .span-2 { grid-column: span 2; }
.grid-form .span-all { grid-column: 1 / -1; }
/* hints sit under their field; checkbox fields line up with the inputs beside them */
.grid-form .hint, label > .hint, .checkfield .hint { margin: 0; font-weight: 400; font-size: .78rem; line-height: 1.35; }
.checkfield { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field-label { font-weight: 600; font-size: .88rem; }
.boxrow { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.boxwrap { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; min-height: 2.75rem; }
.mt-sm { margin-top: .8rem; }
.grid-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
h3.sub, h2.sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.2rem 0 .5rem; }
.reveal { background: var(--blue-50); border-radius: var(--radius-sm); padding: .8rem; margin-top: .8rem; }
.provider { display: flex; flex-direction: column; gap: .5rem; }
.checks { border: 0; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.checks legend { font-weight: 600; font-size: .88rem; margin-bottom: .4rem; padding: 0; }
.form-actions { display: flex; gap: .6rem; margin: .5rem 0 2rem; }
.eq { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.eq-head, .eq-row { display: grid; grid-template-columns: 90px 120px minmax(200px, 1fr) 36px; gap: .5rem; width: 100%; max-width: 720px; }
.eq-4 .eq-head, .eq-4 .eq-row { grid-template-columns: 90px 110px 110px minmax(180px, 1fr) 36px; }
.eq-head { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* contacts */
.contacts { list-style: none; margin: 0 0 .75rem; padding: 0; }
.contacts > li { display: flex; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.contact-main { flex: 1; min-width: 200px; }
.contact-edit { flex-basis: 100%; }
.contact-edit[open] summary { margin-bottom: .6rem; }
.contact-edit summary, .add-contact summary { list-style: none; display: inline-flex; }
.contact-edit summary::-webkit-details-marker, .add-contact summary::-webkit-details-marker { display: none; }
.contacts > li:not(:has(.contact-edit[open])) .contact-edit { flex-basis: auto; }

/* template table */
.table-template td { white-space: normal; }
.tpl-sub td { background: #fcfdfc; font-size: .88rem; }
.indent { color: var(--muted); margin-left: 1rem; }

@media (max-width: 1100px) {
	.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trow { grid-template-columns: minmax(160px, 2fr) 64px 146px 110px minmax(80px, .8fr) 64px minmax(120px, 1.6fr) 32px; }
}

@media (min-width: 761px) and (max-width: 960px) {
	.trow { gap: .3rem; padding: .3rem .6rem; grid-template-columns: minmax(120px, 2fr) 56px 142px 106px minmax(56px, .7fr) 56px minmax(80px, 1.3fr) 28px; }
	.trow input, .trow select { font-size: .8rem; padding: .25rem .3rem; }
}

@media (max-width: 760px) {
	.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.summary-grid { grid-template-columns: 1fr; }
	.grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-form .span-2, .grid-form .span-2-phone { grid-column: 1 / -1; }
/* a grid-2 column holding several cards, so each column stacks independently (no gaps from the other side) */
.col-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
	.eq-head { display: none; }
	.eq-row, .eq-4 .eq-row { grid-template-columns: 70px 1fr 36px; }
	.eq-4 .eq-row { grid-template-columns: 60px 1fr 1fr 36px; }
	.eq-row input[type=text] { grid-column: 1 / -2; }

	/* tasks become compact cards on phones:
	   name ............ menu
	   completed  target  assigned
	   needed / ref #
	   note */
	.trow.thead { display: none; }
	.trow {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 4.4rem 28px;
		grid-template-areas: "name name name menu" "done target owner owner" "needed ref ref ref" "note note note note";
		padding: .5rem .7rem; row-gap: .3rem; column-gap: .4rem;
	}
	.trow > .tname { grid-area: name; font-size: .92rem; }
	.trow > [data-field=needed], .trow > .needed-cell { grid-area: needed; }
	.trow > .needed-cell:empty, .trow > .needed-cell[data-needed=""]:not(:has(*)), .trow > .needed-cell[data-needed="1"] { display: none; }
	.trow > .dw-owner { grid-area: owner; }
	.trow > .dw-target { grid-area: target; }
	.trow > .dw-done { grid-area: done; }
	.trow > .rollup { grid-column: 1 / 3; grid-row: 2; align-self: end; padding-bottom: .35rem; font-size: .8rem; }
	.dwrap .mlabel { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: .05rem; }
	.trow > [data-field=reference] { grid-column: 1 / -1; grid-row: 3; }
	.trow:has(> select[data-field=needed]) > [data-field=reference] { grid-column: 2 / -1; }
	.trow > [data-field=note] { grid-area: note; }
	.trow > .tmenu { grid-area: menu; }
	.trow > span:empty { display: none; }
	.trow input, .trow select { padding: .28rem .35rem; font-size: .84rem; }
	.trow select[data-field=owner_id] { padding-right: .1rem; }
	.trow-sub { margin-left: 1rem; border-left: 3px solid #b9cbd8; padding-left: .6rem; }
	.trow-sub .tname { padding-left: 0; font-size: .88rem; }
	.comment-form { flex-direction: column; align-items: stretch; }
	.cell-note { max-width: 180px; }
}

/* dashboard weather */
.dash-weather { margin-bottom: 1.25rem; }
.weather { display: flex; align-items: center; gap: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: .6rem 1.1rem; box-shadow: var(--shadow); flex-wrap: wrap; justify-self: start; max-width: 100%; }
.wday { display: flex; align-items: center; gap: .6rem; }
.wlabel { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wtemp .hi { font-size: 1.35rem; font-weight: 750; color: var(--text); }
.wtemp .lo { font-size: 1rem; color: var(--muted); font-weight: 600; }
.wdesc { font-size: .8rem; color: var(--muted); }
.weather-empty { box-shadow: none; }

@media (max-width: 760px) {
	.dash-weather { margin-bottom: .9rem; }
	.weather { width: 100%; padding: .55rem .8rem; }
	.wday { gap: .45rem; }
	.wday svg { width: 30px; height: 30px; flex: none; }
	.wlabel { font-size: .66rem; }
	.wtemp .hi { font-size: 1.05rem; }
	.wtemp .lo { font-size: .85rem; }
	.wdesc { font-size: .7rem; line-height: 1.25; }
	.stat-row { gap: .5rem; }
	.stat { flex-direction: row; align-items: baseline; }
	.stat-num { font-size: 1.3rem; }
	.stat-label { font-size: .8rem; }
	/* Lists menu: full-width panel under the header instead of hanging off the left edge */
	.navmenu { position: static; }
	.navmenu .usermenu-panel { position: absolute; left: .75rem; right: .75rem; top: calc(100% - .25rem); min-width: 0; }
	.usermenu { position: static; }
	.usermenu .usermenu-panel { right: .75rem; }
}

.drive-link { font-size: .72rem; font-weight: 700; margin-left: .4rem; padding: 0 .35rem; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); }
.drive-link:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.link-arrow { margin-left: .3em; }
.link-arrow:hover { text-decoration: none; }

/* ---------- service ---------- */
.summary-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.desc-text { margin: 0 0 .75rem; white-space: normal; }
.nowrap { white-space: nowrap; }
.table td.cell-desc { max-width: 380px; white-space: normal; }
.table-service th { white-space: nowrap; }
.table-service td:nth-child(3) { white-space: normal; min-width: 9rem; }
.table-service td.cell-desc { min-width: 12rem; }
@media (min-width: 761px) and (max-width: 900px) {
	.table-service th:nth-child(5), .table-service td:nth-child(5) { display: none; }
	.table-service td:nth-child(3) { min-width: 7rem; }
	.table-service td.cell-desc { min-width: 9rem; }
}
@media (min-width: 761px) and (max-width: 1150px) {
	/* tablet widths: Trips and Man-hrs (on each ticket's page), and Coverage below 900px, are dropped so the table fits */
	.table-service th:nth-child(6), .table-service td:nth-child(6), .table-service th:nth-child(7), .table-service td:nth-child(7) { display: none; }
	.table-service th, .table-service td { padding-left: .6rem; padding-right: .6rem; }
}
.table-visits td:nth-child(5) { white-space: normal; min-width: 180px; }
.quick-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.quick-form input { width: auto; flex: 1 1 110px; padding: .35rem .5rem; font-size: .85rem; }
.quick-form input[type=date] { flex: 0 1 150px; }
.table-visits td { vertical-align: top; }
.table-visits tfoot td { border-top: 2px solid var(--border); }
.visit-edit-row td { padding: 0; white-space: normal; }
.visit-edit-form { border-radius: 0; background: var(--blue-50); }
.visit-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; padding: .8rem 1rem .9rem; border-top: 1px solid var(--border); background: #fafbfa; border-radius: 0 0 var(--radius) var(--radius); }
.visit-add label { font-size: .78rem; flex: 0 1 150px; }
.visit-add label.short { flex: 0 1 90px; }
.visit-add label.grow { flex: 1 1 160px; }
.visit-add label.grow-2 { flex: 2 1 240px; }
.visit-add input { padding: .4rem .5rem; font-size: .88rem; }
@media (max-width: 1100px) { .summary-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
	.summary-3 { grid-template-columns: 1fr; }
	.visit-add label, .visit-add label.short { flex: 1 1 40%; }
}
.stat-service { border-left-color: var(--green); }
.stat-service.stat-orange { border-left-color: var(--orange); }

/* ---------- reports ---------- */
.report-metrics { padding: .2rem 1rem .6rem; gap: 2rem; }
.report-sub { padding: 0 1rem; }
.report-hint { padding: 0 1rem .6rem; margin: 0; }
.table tfoot td { border-top: 2px solid var(--border); font-weight: 600; }
.check-col { width: 64px; }
tr.is-excluded td { color: #a3adb2; text-decoration: line-through; }
tr.is-excluded td.check-col { text-decoration: none; }
section[id] { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
/* the row you came back to from a record (see app.js); the margin keeps it clear of the top bar and
   the floating column header if the browser's own #anchor jump is what places it */
.table tr[id], li.todo[id] { scroll-margin-top: calc(var(--topbar-h, 64px) + 3.5rem); }
tr.row-flash, li.row-flash { animation: row-flash 2.5s ease-out; }
@keyframes row-flash { 0%, 35% { background: var(--orange-50); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.row-flash, li.row-flash { animation: none; background: var(--orange-50); } }
.table th.num { text-align: right; }

/* earlier years folded under a header in long lists: a solid band with an orange edge so it
   stands out when scrolling past quickly */
.year-head td { padding: 0; background: #d5e5f0; border-top: 2px solid var(--blue); border-bottom: 1px solid #b7cfe0; box-shadow: inset 5px 0 0 var(--orange); }
.year-head tr:hover td { background: #c8dceb; }
.year-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .65rem 1rem .65rem 1.3rem; cursor: pointer; font-weight: 750; font-size: 1rem; color: var(--blue-600); }
.year-head .tab-count { background: var(--blue); color: #fff; }
.year-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.year-caret { display: inline-block; transition: transform .15s; }
.year-toggle[aria-expanded="true"] .year-caret { transform: rotate(90deg); }
.amount { font-size: 1.05rem; }

/* report pages */
.report-head { align-items: flex-start; }
.report-summary { margin: .1rem 0 0; color: var(--muted); font-weight: 600; }
.report-filters { align-items: flex-end; gap: .75rem; }
.report-filters label { font-size: .78rem; }
.report-filters select, .report-filters input { width: auto; min-width: 150px; padding: .45rem .6rem; }
.report-card h2 { margin-bottom: .3rem; }
.report-card:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(16, 32, 40, .1); }
/* Reports page: "At a glance" counts and latest activity under the report cards */
.section-title { margin: 1.75rem 0 .75rem; font-size: 1.1rem; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.summary-card h3 { display: flex; justify-content: space-between; align-items: baseline; line-height: 2rem; margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.summary-total { font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--blue); }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .22rem 0; font-size: .92rem; }
.summary-list li.summary-sub { display: block; padding: 0 0 0 1.1rem; border-left: 2px solid var(--border); margin: .1rem 0 .1rem .3rem; }
.summary-list .summary-sub li { font-size: .86rem; }
.summary-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.no-price { margin-right: .35rem; }

@media print {
	.topbar, .footer, .no-print, .flash { display: none !important; }
	body { background: #fff; }
	main.page { padding: 0 !important; max-width: none !important; margin: 0 !important; }
	.card { box-shadow: none; border-color: #ccc; }
	.card-flush { overflow: visible; }
	.table td, .table th { padding: .35rem .6rem; }
	.table { font-size: .8rem; }
	a { color: inherit; text-decoration: none; }
	.print-break { break-before: page; }
	.check-col input { display: none; }
	tr.is-excluded td.check-col::after { content: "excluded"; font-size: .7rem; color: #888; }
	.phase, .chip { border: 1px solid #ccc; }
}
.report-filters { margin-bottom: 1.1rem; }

/* report readability: stronger column headers and section labels */
.report-card-body .table tfoot td { background: #f3f6f4; }
.report-card-body h3.sub, .report-card-body h2.sub { color: #2d3b43; }
.rate-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.25rem; padding: .8rem 1rem .4rem; }
.rate-calc label { font-size: .78rem; }
.rate-calc-label { font-weight: 600; font-size: .88rem; padding-bottom: .5rem; }
.money-input { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; font-size: .95rem; }
.money-input input { width: 90px; padding: .4rem .5rem; }
.est { font-style: italic; color: #5b3a8a; }
.est-num { color: #5b3a8a; }
.print-only { display: none; }

/* weather phones: all five days in one row that scrolls sideways, like the nav; the place name sits above it */
@media (max-width: 760px) {
	.weather { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.weather::-webkit-scrollbar { display: none; }
	.weather .wday { flex: none; }
}

@media print {
	.print-only { display: inline; }
	img.print-only.report-logo { display: block; margin-bottom: .6rem; }
	.report-card-body .table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.rate-calc input { display: none; }
	.rate-calc label, .rate-calc-label { display: none; }
}

/* report headers: brand blue with white text */
.report-card-body .table th { background: var(--blue); color: #fff; border-bottom: 0; }
.rate-note { flex-basis: 100%; font-size: .82rem; color: #5b3a8a; font-weight: 600; }
@media print {
	.report-card-body .table th { background: #025586 !important; color: #fff !important; }
	.rate-note { display: none; }
}

/* dashboard: label each row of summary boxes */
.stat-group { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: .75rem; }
.stat-group-label { font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); text-align: right; }
@media (max-width: 760px) {
	.stat-group { grid-template-columns: 1fr; gap: .3rem; }
	.stat-group-label { text-align: left; }
}

/* dashboard: open items grouped by project */
.open-head { cursor: pointer; }
.open-head:hover td { background: #f6f9f7; }
.open-head.is-open .year-caret { transform: rotate(90deg); }
.open-head .year-caret { color: var(--blue); margin-right: .2rem; }
.open-link { font-size: .8rem; margin-left: .6rem; opacity: 0; }
.open-head:hover .open-link, .open-head.is-open .open-link { opacity: 1; }
.open-items td { background: #fbfcfb; padding-top: .45rem; padding-bottom: .45rem; font-size: .88rem; }
.open-item { padding-left: 2.4rem !important; white-space: normal !important; }
@media (max-width: 760px) {
	/* phones: each project is a block with its counts on one line under the name (no column header) */
	.table-open thead { display: none; }
	.table-open td { overflow-wrap: normal; }
	.table-open .open-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); }
	.table-open .open-head td { padding: 0; border: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; background: none; }
	.table-open .open-head td:first-child { flex-basis: 100%; font-size: .95rem; color: var(--text); white-space: normal; }
	.table-open .open-head td.text-red { color: var(--red); font-weight: 600; }
	.table-open .open-head td:empty { display: none; }
	.table-open .open-head td:nth-child(2) { margin-left: 1.2rem; }
	.table-open .open-head td:nth-child(2)::after { content: " open"; }
	.table-open .open-head td:nth-child(3)::after { content: " overdue"; }
	.table-open .open-head td:nth-child(4)::after { content: " need an answer"; }
	.table-open .open-head td:nth-child(5)::before { content: "Next "; }
	.open-link { opacity: 1; margin-left: .5rem; white-space: nowrap; }
	.table-open .open-items tr { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem .9rem .45rem 2.1rem; border-bottom: 1px solid var(--border); background: #fbfcfb; }
	.table-open .open-items td { padding: 0 !important; border: 0; background: none; }
	.table-open .open-items td:last-child { white-space: nowrap; font-size: .8rem; }
}

/* ---------- tasks (one-off to-dos) ---------- */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.todo:last-child { border-bottom: 0; }
.todo-check { margin: 0; }
.checkbox-btn { width: 22px; height: 22px; border: 2px solid #9fb0a7; border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 800; padding: 0; margin-top: .1rem; }
.checkbox-btn:hover { border-color: var(--green); background: var(--green-50); }
.todo.is-done .checkbox-btn { background: var(--green); border-color: var(--green); }
.todo-main { min-width: 0; flex: 1; }
.todo-title { font-weight: 600; color: var(--text); }
.todo.is-done .todo-title { color: #9aa5ab; text-decoration: line-through; }
.todo-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.todo-details { margin: .15rem 0 0; font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tasks page: Assigned to, Due and Project / Service as columns (stacked under the title on phones) */
.todo-head, .todo-cols .todo { display: grid; grid-template-columns: 22px minmax(0, 1fr) 9.5rem 9.5rem minmax(0, 15rem); gap: .75rem; }
.todo-head { padding: 0 0 .45rem; border-bottom: 1px solid var(--border); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.card-sticky-head .todo-head { padding: .75rem 1rem; font-size: .75rem; letter-spacing: .05em; }
.card-sticky-head .todo-cols .todo { padding-left: 1rem; padding-right: 1rem; }
.card-sticky-head .todo-cols { padding-bottom: .25rem; }
.todo-cells { display: contents; }
.todo-cell { font-size: .88rem; padding-top: .1rem; min-width: 0; overflow-wrap: anywhere; }
.todo-assignee { color: var(--text); }
.todo-due { white-space: nowrap; }
.todo-cols .is-done .todo-cell { color: #9aa5ab; }
.phone-only { display: none; }
/* Reports landing page: a heads-up shown only on phones */
.report-phone-note { display: none; margin: -.6rem 0 1.25rem; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--orange-50); border-left: 3px solid var(--orange); font-size: .85rem; color: var(--text); }
@media (max-width: 760px) { .report-phone-note { display: block; } }
@media (max-width: 760px) {
	.todo-head { display: none; }
	.todo-cols .todo { grid-template-columns: 22px minmax(0, 1fr); row-gap: .2rem; }
	.todo-cells { display: flex; flex-wrap: wrap; gap: .2rem .8rem; grid-column: 2; }
	.todo-cell { font-size: .8rem; color: var(--muted); padding-top: 0; }
	.todo-cell:empty { display: none; }
	.todo-details { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.phone-only { display: inline; }
}
.due-overdue { color: var(--red); font-weight: 700; }
.due-today { color: #a5620a; font-weight: 700; }
.chip-red { background: #fbe3e0; color: #8c1d14; }
.is-done-title { text-decoration: line-through; color: #8a979e; }
.card-head-actions { display: flex; gap: .5rem; align-items: center; }
.task-strip { padding: .8rem 1.1rem; margin-bottom: 1rem; }
.task-strip-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.task-strip-head h2 { margin: 0; font-size: 1rem; }
/* project page: the newest comment between Tasks and the phases; long ones are clipped, the full text is in the log */
.last-comment .activity-item { padding: .6rem 0 0; border-bottom: 0; }
.last-comment .comment-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.last-comment-empty { margin: .4rem 0 0; }
.card-head-plain { padding: 0 0 .5rem; }

/* task grid: Completed is the main date; Target is a quieter planning field */
.trow input[type=date] { padding-right: .2rem; }
.trow input[type=date]::-webkit-calendar-picker-indicator { margin-left: 0; padding: 0; opacity: .55; }
.trow .dw-target input { font-size: .76rem; color: #7d8a91; background: #fafbfa; border-color: #e8ece9; border-style: dashed; padding-top: .25rem; padding-bottom: .25rem; }
.trow .dw-target input:focus { color: var(--text); border-style: solid; }
.trow .dw-target input::-webkit-calendar-picker-indicator { opacity: .35; }
.trow .dw-target input.is-overdue { background: #fff4d1; border: 1px solid #e6c766; color: #6b5310; }
.trow .dw-target input.is-overdue-30 { background: #fbd3cd; border: 1px solid #d9534f; color: #8c1d14; font-weight: 650; }
.trow.thead .th-target { font-weight: 600; }
.chip-na { background: #eceff0; color: #7d8a91; font-size: .68rem; letter-spacing: .04em; }
.needed-cell { display: flex; align-items: center; min-height: 30px; }

/* project page: stronger phase header bar, sub-tasks set off from their parent */
.trow.thead { background: var(--blue); color: #fff; border-top: 0; }
.trow.thead > span:first-child { color: #fff; }
.trow.thead .th-target { color: #b9cfe0; }
.trow-sub { background: #eef2f0; }
.trow-sub input, .trow-sub select { background: #fff; }
.trow-sub .tname { color: #2b3940; }

/* edit forms: Save stays in reach at the bottom of the screen */
.project-form .form-actions {
	position: sticky; bottom: 0; z-index: 15; margin: .5rem -1px 2rem; padding: .7rem 1rem;
	background: rgba(255, 255, 255, .96); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 -4px 16px rgba(16, 32, 40, .08); backdrop-filter: blur(4px);
}
@media (min-width: 761px) {
	/* desktop: the floating bar hugs the buttons instead of spanning the page */
	.project-form .form-actions { width: fit-content; }
}

@media (max-width: 760px) {
	/* dashboard boxes: one line per label */
	.stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
	.stat { min-width: 0; padding: .45rem .65rem; gap: .4rem; }

	/* phase headers are hidden on phones; show the phase name bar instead */
	.phase-block .phase-title { background: var(--blue); border-radius: var(--radius) var(--radius) 0 0; padding: .6rem .9rem; }
	.phase-block .phase-title h2, .phase-block .phase-title .muted { color: #fff; }

	/* compact project list: # | name + note | status + days */
	.table-projects thead { display: none; }
	.table-projects tbody tr { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: .4rem; row-gap: .1rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
	.table-projects td { display: none; padding: 0; border: 0; white-space: normal; }
	.table-projects td:nth-child(1) { display: block; grid-column: 1; grid-row: 1 / span 2; font-size: .8rem; font-variant-numeric: tabular-nums; padding-top: .15rem; }
	.table-projects td:nth-child(2) { display: block; grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
	.table-projects td:nth-child(2) > a:first-child { font-weight: 600; }
	.table-projects td:nth-child(2) .cell-note { max-width: none; font-size: .8rem; }
	.table-projects td:nth-child(2) .drive-link { font-size: .65rem; padding: 0 .3rem; }
	.table-projects td:nth-child(7) { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; grid-column: 3; grid-row: 1; }
	.table-projects td:nth-child(8) { display: block; grid-column: 3; grid-row: 2; text-align: right; font-size: .75rem; color: var(--muted); }
	.table-projects td:nth-child(8):not(:empty)::after { content: " days"; }
	.table-projects .phase, .table-projects .chip { font-size: .66rem; padding: .08rem .45rem; }

	/* compact service list: # / opened | customer / problem | status / amount */
	.table-service thead { display: none; }
	.table-service tbody tr { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr) auto; column-gap: .55rem; row-gap: .1rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
	.table-service td { display: none; padding: 0; border: 0; white-space: normal; }
	.table-service td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; font-size: .85rem; }
	.table-service td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; font-size: .72rem; color: var(--muted); }
	.table-service td:nth-child(3) { display: block; grid-column: 2; grid-row: 1; min-width: 0; font-weight: 600; }
	.table-service td:nth-child(3) .muted { display: none; }
	.table-service td:nth-child(4) { display: block; grid-column: 2; grid-row: 2; min-width: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
	.table-service td:nth-child(8) { display: block; grid-column: 3; grid-row: 2; text-align: right; font-size: .78rem; }
	.table-service td:nth-child(9) { display: block; grid-column: 1; grid-row: 3; font-size: .72rem; color: var(--muted); }
	.table-service td:nth-child(9):empty { display: none; }
	.table-service td:nth-child(10) { display: block; grid-column: 3; grid-row: 1; text-align: right; }
	.table-service td:nth-child(10) .muted { display: none; }
	.table-service .chip { font-size: .66rem; padding: .08rem .45rem; }

	/* year headers and empty rows keep a normal full-width layout */
	.table-projects .year-head tr, .table-service .year-head tr { display: block; padding: 0; }
	.table-projects .year-head td, .table-service .year-head td,
	.table-projects td.empty, .table-service td.empty { display: block; }
}
@media (max-width: 760px) {
	.table-projects .drive-link { display: none; }
	.page-head { margin-bottom: .6rem; align-items: center; }
	.page-head h1 { font-size: 1.45rem; margin: 0; }
	.page-head .btn { padding: .4rem .85rem; font-size: .85rem; }
	.tabs { margin-bottom: .6rem; }
	.tab { padding: .45rem .6rem; font-size: .85rem; }
	.filters { gap: .4rem; margin-bottom: .6rem; flex-wrap: nowrap; }
	.filters input[type=search], .filters select { padding: .42rem .55rem; font-size: .88rem; min-width: 0; }
	.filters input[type=search] { flex: 1 1 auto; }
	.filters select { flex: 0 1 40%; }
	.filters .btn { padding: .4rem .7rem; flex: none; }

	/* reports: the filter bar becomes a grid (range and salesperson full width, From / To side by side)
	   instead of one row wider than the screen, and table headers wrap so the tables fit the card */
	.report-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem; }
	.report-filters .rf-wide { grid-column: 1 / -1; }
	.report-filters select, .report-filters input { min-width: 0; width: 100%; }
	.report-filters .btn { justify-self: start; }
	.report-card-body .table th { white-space: normal; overflow-wrap: normal; vertical-align: bottom; font-size: .64rem; letter-spacing: 0; }
	.rate-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; padding: .6rem .6rem .3rem; }
	.rate-calc > span { grid-column: 1 / -1; }
	.rate-calc-label { padding-bottom: 0; }
	.money-input input { width: 100%; min-width: 0; }
	.report-card-body .table td { font-size: .78rem; overflow-wrap: normal; }
	/* short header labels where a long one would set the column width (data-short="Hrs") */
	.report-card-body .table th[data-short] { font-size: 0; }
	.report-card-body .table th[data-short]::after { content: attr(data-short); font-size: .64rem; }
	.report-card-body .table td:first-child { white-space: normal; }
	.report-card-body .table th, .report-card-body .table td { padding-left: .2rem; padding-right: .2rem; }
	.report-card-body .table th:first-child, .report-card-body .table td:first-child { padding-left: .6rem; }
	.report-card-body .table th:last-child, .report-card-body .table td:last-child { padding-right: .6rem; }
	.report-metrics { padding: .2rem .6rem .5rem; gap: .5rem 1.25rem; }
	.report-sub, .report-hint { padding-left: .6rem; padding-right: .6rem; }
}

/* collapsible phases on the project page (click the phase title) */
.phase-block .phase-title { cursor: pointer; user-select: none; }
.phase-caret { display: inline-block; color: var(--blue); font-size: .95rem; width: .9rem; }
.phase-caret::before { content: "\25BE"; }
.phase-block.is-collapsed .phase-caret::before { content: "\25B8"; }
.phase-block.is-collapsed .tgrid, .phase-block.is-collapsed .phase-add { display: none; }
.phase-block.is-collapsed .phase-title { padding-bottom: .9rem; }
.phase-block .phase-title:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 760px) {
	.phase-block .phase-title { align-items: center; }
	.phase-caret { color: #fff; }
	.phase-block.is-collapsed .phase-title { border-radius: var(--radius); padding-bottom: .6rem; }
	.tasks-wrap { gap: .6rem; }
}

/* phone numbers never break mid-number; the whole number moves to the next line */
a[href^="tel:"] { white-space: nowrap; }

/* Completed date: green check beside an empty date fills in today */
.date-wrap { display: flex; align-items: center; gap: .3rem; }
.date-wrap input { flex: 1 1 auto; min-width: 0; }
.today-btn { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: .72rem; font-weight: 800; padding: 0; cursor: pointer; display: grid; place-items: center; }
.today-btn:hover { filter: brightness(.92); }
.date-wrap.has-date .today-btn { display: none; }
.clear-date-btn { display: none; flex: none; width: 22px; height: 22px; border: 1px solid #cfd8d3; border-radius: 50%; background: #fff; color: #7d8a91; font-size: .95rem; line-height: 1; padding: 0; cursor: pointer; place-items: center; }
.clear-date-btn:hover { color: var(--red); border-color: var(--red); }
.date-wrap.has-date .clear-date-btn { display: grid; }
.is-na .clear-date-btn, .parent-na .clear-date-btn { display: none !important; }
.is-na .today-btn, .parent-na .today-btn { display: none; }

/* page header buttons (project / service / task pages) wrap instead of running off the screen */
.head-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.project-head > div:first-child { min-width: 0; }
@media (max-width: 760px) {
	.project-head { align-items: stretch; }
	.head-actions { justify-content: flex-start; gap: .4rem; width: 100%; }
	.head-actions .btn { padding: .4rem .8rem; font-size: .82rem; }
	.head-actions form { margin: 0; }
}

/* log entries: long links and values wrap inside the card instead of widening the page */
.activity-item { min-width: 0; }
.activity-body { min-width: 0; flex: 1; overflow-wrap: anywhere; word-break: break-word; }
.activity-change .val, .comment-text { overflow-wrap: anywhere; word-break: break-word; }
.card, .kv dd, .desc-text { min-width: 0; overflow-wrap: anywhere; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }