/* Brand colors pulled directly from unitechconcrete.com's own stylesheet
   (src/css/style.css in that repo - #079930 is by far its most-used color),
   not guessed - this dashboard had used a generic, unrelated indigo
   (#4f46e5) since it was first built. Applied only to genuinely
   brand/interactive-identity elements (primary buttons, active tab/subtab
   indicators, links, focus outlines) - status colors elsewhere (live
   tracking dot staleness, timeline segment types, battery level) are left
   as their own separate semantic palette, since those colors carry meaning
   unrelated to brand identity and remapping them to brand green would
   reduce clarity (e.g. "recent" vs "a button happens to be green") rather
   than improve it. */
:root {
  --brand-primary: #079930;
  --brand-primary-dark: #067a27;
  --brand-primary-tint: #eafbf0;
  --brand-accent: #e5322d;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #f4f5f7;
  color: #1a1a1a;
}

/* [hidden] must win over #login-view's own display:flex below - an ID
   selector otherwise beats a class+attribute selector on specificity alone,
   regardless of source order, so a plain `.view[hidden] { display: none }`
   rule here would be silently overridden and never actually hide the login
   view. Scoping the flex layout to :not([hidden]) sidesteps the specificity
   fight entirely instead of trying to out-specificity it (e.g. !important).
   Found via a real browser's DevTools showing `hidden` was correctly set on
   the element while it kept rendering with Chrome's own "flex" badge. */
.view[hidden] { display: none; }

/* Login */
#login-view:not([hidden]) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  width: 340px;
  text-align: center;
}
.login-logo { display: block; height: 64px; margin: 0 auto 16px; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .subtitle { margin: 0 0 24px; color: #666; }
/* The form itself stays left-aligned - centering "Email"/"Password" labels
   and their inputs would look odd, unlike the logo/heading above them. */
#login-form { text-align: left; }
#login-form { display: flex; flex-direction: column; gap: 14px; }
#login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #444; }
.password-input-wrap { display: flex; gap: 6px; align-items: center; }
.password-input-wrap input { flex: 1; }
.password-toggle-btn {
  background: none;
  color: var(--brand-primary);
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.password-toggle-btn:hover { background: #f4f5f7; }

input, select {
  padding: 8px 10px;
  border: 1px solid #d0d3d9;
  border-radius: 6px;
  font-size: 14px;
}

button {
  padding: 9px 16px;
  border: none;
  border-radius: 6px;
  background: var(--brand-primary);
  color: white;
  font-size: 14px;
  cursor: pointer;
}
button:hover { background: var(--brand-primary-dark); }
button:disabled { background: #c7c9d1; cursor: not-allowed; }
button.secondary { background: #e5e7eb; color: #1a1a1a; }
button.secondary:hover { background: #d1d5db; }
button.link-btn { background: none; color: var(--brand-primary); padding: 0; text-decoration: underline; }

.error { color: #dc2626; font-size: 13px; min-height: 18px; margin: 4px 0 0; }

/* Dashboard shell */
header {
  background: white;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--brand-primary);
}
.header-brand { display: flex; align-items: center; gap: 12px; }
.header-logo { height: 40px; }
header h1 { font-size: 18px; margin: 0; color: var(--brand-primary-dark); font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 16px; font-size: 14px; color: #555; }

nav {
  background: white;
  padding: 0 32px;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  /* With 8 tabs this overflows a phone-width viewport - scroll the nav
     itself horizontally rather than letting it push the whole page (and
     the actual tab content, which does NOT extend that wide) out of view
     sideways. Found on a real 320px-wide screen while adding the 8th tab -
     every earlier tab count happened to still just barely fit. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  background: none;
  color: #555;
  border-radius: 0;
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { background: #f4f5f7; }
.tab-btn.active { color: var(--brand-primary-dark); border-bottom-color: var(--brand-primary); }

main { padding: 32px; max-width: 1000px; margin: 0 auto; }
.tab-panel[hidden] { display: none; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel-header h2 { margin: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 14px; }
th { background: #fafafa; color: #555; font-weight: 600; }

.inline-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.inline-form h3 { width: 100%; margin: 0 0 4px; }
.inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; flex: 1 1 160px; }
.inline-form label.checkbox { flex-direction: row; align-items: center; gap: 6px; }
.form-actions { display: flex; gap: 8px; align-items: flex-end; }
.inline-form .error { width: 100%; }

.filters {
  background: white;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
#reimb-total { font-weight: 600; margin: 0 0 12px; }
.employee-checklist-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.employee-checklist {
  min-width: 220px;
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid #d0d3d9;
  border-radius: 6px;
  padding: 6px 10px;
  background: white;
}
.employee-checklist label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #1a1a1a;
  padding: 3px 0;
  cursor: pointer;
}

/* Visits report - Notes/Address can be long free text, so wrap instead of
   forcing the whole table wider than the viewport. */
#visits-table td:nth-child(6), #visits-table td:last-child { max-width: 220px; white-space: normal; }

/* Tracking tab */
.tracking-layout { display: flex; gap: 16px; align-items: flex-start; }
.tracking-summary { flex: 0 0 220px; }
.track-stats {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.track-stats .stat-value { font-size: 22px; font-weight: 700; }
.track-stats .stat-label { font-size: 12px; color: #777; text-transform: uppercase; margin-bottom: 12px; }
.muted { color: #777; font-size: 14px; }
/* Leaflet requires an explicit height on its container - it can't infer one
   from content the way most elements do. */
#track-map { flex: 1; height: 520px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Timeline (Tracking Started/Stop/Drive/Walk breakdown) */
.timeline-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.timeline-item {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-left: 4px solid #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.timeline-item:hover { background: #f4f5f7; }
.timeline-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.timeline-item.active { background: var(--brand-primary-tint); box-shadow: 0 0 0 2px var(--brand-primary) inset; }
.timeline-item.type-start { border-left-color: #16a34a; }
.timeline-item.type-end { border-left-color: #f59e0b; }
.timeline-item.type-stop { border-left-color: #dc2626; }
.timeline-item.type-drive { border-left-color: #4f46e5; }
.timeline-item.type-walk { border-left-color: #d97706; }
.timeline-item.type-outage { border-left-color: #6b7280; border-left-style: dashed; background: #f9fafb; }
.timeline-item.type-visit { border-left-color: #9333ea; }

/* Tracking map - a client visit's own logged location, always visible
   (not just on click, unlike the highlight circles) - square + a distinct
   color from every circleMarker already on this map (start/end/stop) so
   it reads as its own kind of thing at a glance. */
.visit-marker {
  width: 14px;
  height: 14px;
  background: #9333ea;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #9333ea;
  transform: rotate(45deg);
}
.timeline-time { font-weight: 600; margin-right: 6px; }
.timeline-label { font-weight: 600; }
.timeline-detail { color: #555; margin-top: 3px; }
/* Address resolves in the background after the timeline is already shown
   (see app.js's fillInAddresses) - styled distinctly enough to read as
   "still working on this", not as if the item failed to load. */
.geocode-pending { color: #999; font-style: italic; }

/* Tracking sub-tabs (Live Location / Tracking History) - a second, smaller
   tab row nested inside the Tracking tab, same visual language as the
   top-level nav but one size down. */
.subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
.subtab-btn {
  background: none;
  color: #555;
  border-radius: 0;
  padding: 8px 14px;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.subtab-btn:hover { background: #f4f5f7; }
.subtab-btn.active { color: var(--brand-primary-dark); border-bottom-color: var(--brand-primary); }
.subtab-panel[hidden] { display: none; }

/* Live Location list */
#live-map { flex: 1; height: 520px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.live-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.live-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
}
.live-item:hover { background: #f9fafb; }
.live-item__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.live-item__dot.status-recent { background: #16a34a; }
.live-item__dot.status-idle { background: #d97706; }
.live-item__dot.status-stale { background: #9ca3af; }
.live-item__name { font-weight: 600; font-size: 14px; }
.live-item__contact { font-size: 12px; color: #777; margin-top: 1px; }
.live-item__meta { font-size: 12px; color: #777; margin-top: 2px; }
.live-item__battery { font-size: 12px; color: #777; margin-top: 2px; }
.live-item__diagnostics { font-size: 12px; color: #999; margin-top: 2px; font-style: italic; }
#live-refresh-btn { margin-top: 8px; width: 100%; }

/* Infrastructure Costs tab - a static report, not a data-loaded table like
   every other tab, so it gets its own lightweight layout rather than
   reusing .filters/.track-stats which both imply an interactive load. */
.cost-section { margin-bottom: 28px; }
.cost-section h3 { margin: 0 0 10px; color: var(--brand-primary-dark); }
/* max-width on a td doesn't reliably constrain an auto-layout table's
   column-width calculation (confirmed on a real narrow screen - the table
   still overflowed and dragged the whole page sideways, same failure mode
   the nav bar above had). Scoping the scroll to this wrapper instead is the
   robust fix: any overflow now stays contained to the table itself. */
.cost-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cost-table td:nth-child(2) { white-space: nowrap; font-weight: 600; }
.cost-table td:nth-child(3) { color: #555; }
.cost-subtotal { margin: 8px 2px 0; font-size: 13px; color: #555; }
/* Pending items (not yet actually being paid) get the same amber tone
   already used for "idle"/"walk" elsewhere on this dashboard, so it reads
   as "not active yet" at a glance rather than a normal line item. */
.cost-pending td:first-child { color: #d97706; }
.cost-pending td:nth-child(2) { color: #d97706; }
.cost-grand-total {
  background: var(--brand-primary-tint);
  border-radius: 8px;
  padding: 16px 20px;
}
.cost-grand-total h3 { margin-top: 0; }
.cost-grand-total p:nth-of-type(1) { font-size: 20px; margin: 4px 0 10px; }

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 32px;
  margin-top: 24px;
  color: #777;
  font-size: 13px;
}
.app-footer-logo { height: 22px; }
.app-footer a { color: #777; text-decoration: underline; }
.app-footer a:hover { color: var(--brand-primary-dark); }