/* ============================================================================
     PinPoint by Eastall Software Systems | Stylesheet
     Version: 2.0.0 2026

     Built on the shared Eastall design system (cdn.eastallss.com/eastallss/
     styles/v1.2026-1-0-0.css) so PinPoint looks and behaves like
     eastall.software and my.eastall.software: the same dark-first palette with
     a light theme, the same topbar with dropdowns, the same footer, cookie
     notice and theme toggle. The ESS class names (.ess-nav, .ess-dropdown,
     .ess-footer, ...) are reused verbatim for that reason.

     PinPoint keeps its own orange as the product accent, the way each Eastall
     product keeps its own colour. It takes the role ESS blue plays in MyESS:
     primary buttons, focus rings, the active navigation item.

     Self-contained on purpose: the app must render even if the CDN is down,
     so the shared tokens are copied here rather than loaded from it.
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────── */
/* Dark is the default, exactly as on every other Eastall service. The inline
   script in in-header.php / out-header.php stamps data-theme before first
   paint from the shared ess-theme cookie, falling back to the OS preference. */
:root {
  /* Shared Eastall brand */
  --ess-blue:   #2376f5;
  --ess-red:    #e83038;
  --ess-yellow: #ffcf1a;
  --ess-grey:   #535353;
  --grad-btn:   linear-gradient(120deg,#2376f5 0%,#2e2e33 27%,#e83038 50%,#535353 73%,#ffcf1a 100%);
  --stripe:     linear-gradient(90deg,#2376f5 0 33.34%,#e83038 33.34% 66.67%,#ffcf1a 66.67% 100%);

  /* PinPoint product accent */
  --orange:      #f97316;
  --orange-dark: #ea6b0c;

  color-scheme: dark;

  /* ESS surfaces and text (dark) */
  --bg:          #1f2024;
  --bg-2:        #191a1d;
  --menu:        #26272c;
  --panel-brd:   rgba(255,255,255,.10);
  --text:        #e8eaed;
  --text-hi:     #ffffff;
  --grey-d:      #c7cace;
  --grey-m:      #9aa0a6;
  --line:        rgba(255,255,255,.09);
  --overlay:     rgba(255,255,255,.06);
  --overlay-2:   rgba(255,255,255,.10);
  --overlay-3:   rgba(255,255,255,.035);
  --nav-border:  rgba(255,255,255,.06);
  --btn-brd:     rgba(255,255,255,.16);
  --btn-brd-h:   rgba(255,255,255,.30);
  --toggle-knob: rgba(255,255,255,.14);
  --shadow-menu: 0 18px 44px rgba(0,0,0,.46);

  /* PinPoint's own token names, mapped onto the ESS palette. Every component
     below (and inline styles across the pages) uses these, so they theme
     without per-page changes. */
  --page-bg:       var(--bg);
  --card-bg:       var(--menu);
  --surface:       var(--card-bg);  /* floor-tab bars: referenced by pages, previously undefined */
  --surface-2:     #2d2e34;
  --border:        var(--line);
  --border-strong: var(--btn-brd);
  --border-light:  rgba(255,255,255,.06);
  --text-muted:    var(--grey-m);
  --text-xmuted:   #6f757c;
  --link-hover:    #fb923c;
  --orange-light:  rgba(249,115,22,.14);
  --orange-text:   #fdba74;
  --orange-ring:   rgba(249,115,22,.30);

  --success:        #22c55e;
  --success-bg:     rgba(34,197,94,.13);
  --success-text:   #4ade80;
  --success-border: rgba(74,222,128,.32);
  --danger:         #ef4444;
  --danger-bg:      rgba(239,68,68,.14);
  --danger-text:    #f87171;
  --danger-border:  rgba(248,113,113,.34);
  --warning:        #f59e0b;
  --warning-bg:     rgba(245,158,11,.14);
  --warning-text:   #fbbf24;
  --warning-border: rgba(251,191,36,.30);
  --info:           #3b82f6;
  --info-bg:        rgba(35,118,245,.15);
  --info-text:      #7cb0ff;
  --info-border:    rgba(35,118,245,.38);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.14);
  --shadow:    0 1px 3px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.16);
  --shadow-md: 0 6px 16px rgba(0,0,0,.28);
  --shadow-lg: var(--shadow-menu);

  --radius-sm: 11px;
  --radius:    16px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --topbar-h:    64px;
  --content-max: 1480px;
  --transition:  .15s ease;
  --pin-size:    28px;

  /* The public worksite view (view/index.php) puts white text on this, so it
     stays dark in both themes. */
  --sidebar-bg: #191a1d;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #ffffff;
  --bg-2:        #f3f4f6;
  --menu:        #ffffff;
  --panel-brd:   rgba(0,0,0,.12);
  --text:        #1f2328;
  --text-hi:     #0e1116;
  --grey-d:      #3a3f47;
  --grey-m:      #5b626d;
  --line:        rgba(0,0,0,.10);
  --overlay:     rgba(0,0,0,.05);
  --overlay-2:   rgba(0,0,0,.08);
  --overlay-3:   rgba(0,0,0,.035);
  --nav-border:  rgba(0,0,0,.08);
  --btn-brd:     rgba(0,0,0,.16);
  --btn-brd-h:   rgba(0,0,0,.28);
  --toggle-knob: #ffffff;
  --shadow-menu: 0 18px 44px rgba(20,22,28,.16);

  --surface-2:     #f5f6f8;
  --border-light:  rgba(0,0,0,.06);
  --text-xmuted:   #8a9099;
  --link-hover:    #c2410c;
  --orange-light:  #fff4ea;
  --orange-text:   #c2410c;
  --orange-ring:   rgba(249,115,22,.18);

  --success-bg:     #ecfdf3;
  --success-text:   #15803d;
  --success-border: #86efac;
  --danger-bg:      #fef2f2;
  --danger-text:    #b91c1c;
  --danger-border:  #fca5a5;
  --warning-bg:     #fffbeb;
  --warning-text:   #92400e;
  --warning-border: #fcd34d;
  --info-bg:        #eff6ff;
  --info-text:      #1d4ed8;
  --info-border:    #93c5fd;

  --shadow-sm: 0 1px 2px rgba(20,22,28,.06);
  --shadow:    0 1px 3px rgba(20,22,28,.08), 0 1px 2px rgba(20,22,28,.05);
  --shadow-md: 0 6px 16px rgba(20,22,28,.08);
}

/* Added briefly by the theme toggle so the switch cross-fades. */
:root.theme-anim, :root.theme-anim * {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease,
              fill .28s ease, box-shadow .28s ease !important;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The page itself must never scroll sideways. `clip` doesn't create a
     scroll container, so position:sticky keeps working; `hidden` is the
     fallback for older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}

/* Signed-in pages: nav, content, footer stacked so the footer sits at the
   bottom of short pages. Public pages keep normal flow. */
body.pp-app { display: flex; flex-direction: column; min-height: 100vh; }

a       { color: var(--orange); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); }

.material-icons { user-select: none; }

/* ============================================================================
   TOPBAR  (the shared Eastall .ess-nav, with PinPoint's brand and menus)
============================================================================ */

.ess-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg-2);
  border-bottom: 1px solid var(--nav-border);
}
.ess-nav-inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 11px 24px;
  display: flex; align-items: center; gap: 20px;
  min-height: var(--topbar-h);
}

/* Brand: PinPoint Banner Light.png on the dark theme, Banner Dark.png on the
   light theme (the name describes the tagline's text colour). If a banner
   fails to load, the pin mark plus a live wordmark stands in. */
.ess-brand { display: inline-flex; align-items: center; min-width: 0; color: var(--text-hi); }
.ess-brand:hover { color: var(--text-hi); }
.ess-brand-logo { height: 44px; width: auto; display: block; max-width: none; }  /* same as the ESS header */
.ess-brand-logo.brand-on-light { display: none; }
:root[data-theme="light"] .ess-brand-logo.brand-on-dark  { display: none; }
:root[data-theme="light"] .ess-brand-logo.brand-on-light { display: block; }
.ess-brand-fallback { display: none; align-items: center; gap: 10px; }
.ess-brand.img-failed .ess-brand-logo     { display: none !important; }
.ess-brand.img-failed .ess-brand-fallback { display: inline-flex; }
.ess-brand-mark { width: 34px; height: 34px; object-fit: contain; flex: none; }
.ess-brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.ess-brand-name {
  font-size: 1.22rem; font-weight: 900; letter-spacing: -.025em; color: var(--orange);
}
.ess-brand-by {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--grey-m);
  white-space: nowrap;
}

.ess-menu { display: contents; }
.ess-nav-links { list-style: none; display: flex; align-items: center; gap: 2px; }

.ess-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  color: var(--grey-d); font-family: inherit; font-weight: 600; font-size: .94rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .14s, background .14s, box-shadow .14s;
}
.ess-nav-link:hover, .ess-nav-link:focus-visible {
  color: var(--text-hi); background: var(--overlay); outline: none;
}
.ess-nav-link .chev {
  font-size: 20px; margin: 0 -4px 0 -3px; color: var(--grey-m); transition: transform .2s ease;
}
/* Current section: just a slightly lighter button, the same fill as hover. */
.ess-nav-link.is-active { color: var(--text-hi); background: var(--overlay); }

.ess-nav-actions { display: flex; align-items: center; gap: 8px; }

/* Company (single) and account triggers */
.pp-company {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--grey-m); font-size: .85rem; font-weight: 600;
  max-width: 220px;
}
.pp-company .material-icons { font-size: 18px; }
.pp-company span:last-child, .pp-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-trunc { max-width: 180px; }
.ess-nav-link > .material-icons:not(.chev) { font-size: 19px; color: var(--grey-m); }

.pp-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-weight: 800; font-size: .84rem; letter-spacing: 0;
}
.pp-account { padding-left: 6px; }

/* Dropdown menus */
.has-dropdown { position: relative; }
.ess-dropdown {
  background: var(--menu); border: 1px solid var(--panel-brd); border-radius: 14px;
  box-shadow: var(--shadow-menu); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; z-index: 70;
}
.ess-dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--grey-d); font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .13s, color .13s;
}
.ess-dropdown a:hover, .ess-dropdown a:focus-visible {
  background: var(--overlay-2); color: var(--text-hi); outline: none;
}
.ess-dropdown a .material-icons { font-size: 20px; color: var(--grey-m); transition: color .13s; }
.ess-dropdown a:hover .material-icons { color: var(--text-hi); }
.ess-dropdown a.is-active { color: var(--text-hi); background: var(--overlay); }
.ess-dropdown a.is-active .material-icons { color: var(--text-hi); }
.ess-dropdown a.is-danger:hover, .ess-dropdown a.is-danger:hover .material-icons { color: var(--ess-red); }
.ess-dropdown-head {
  padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ess-dropdown-head b    { color: var(--text-hi); font-size: .92rem; font-weight: 700; }
.ess-dropdown-head span { color: var(--grey-m); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.ess-dropdown-label {
  padding: 8px 12px 4px; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey-m);
}
.ess-dropdown hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

.ess-nav-toggle {
  display: none; position: relative; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: var(--overlay-3); border: 1px solid var(--panel-brd); color: var(--text-hi);
  border-radius: 10px; padding: 0; cursor: pointer;
}
.ess-nav-toggle .material-icons { font-size: 24px; transition: opacity .2s ease, transform .28s ease; }
.ess-nav-toggle .ic-close {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-90deg); opacity: 0;
}
.ess-nav.open .ess-nav-toggle .ic-menu  { opacity: 0; transform: rotate(90deg); }
.ess-nav.open .ess-nav-toggle .ic-close { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }

/* Desktop (901px and above) */
@media (min-width: 901px) {
  .ess-brand        { flex: 0 0 auto; margin-right: 8px; }
  .ess-nav-links    { flex: 1 1 auto; }
  .ess-nav-actions  { flex: 0 0 auto; margin-left: auto; }

  .ess-dropdown {
    position: absolute; top: calc(100% + 12px); left: 50%; min-width: 236px;
    transform: translateX(-50%) translateY(-8px) scale(.97); transform-origin: top center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility 0s linear .18s;
  }
  /* Menus on the right edge open leftwards so they never leave the screen. */
  .ess-dropdown.align-end {
    left: auto; right: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
  }
  /* Invisible hover bridge across the gap, so the cursor can't fall through. */
  .ess-dropdown::before { content: ""; position: absolute; left: -8px; right: -8px; top: -16px; height: 20px; }

  .has-dropdown.open  > .ess-dropdown,
  .has-dropdown:hover > .ess-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
  .has-dropdown.open  > .ess-dropdown.align-end,
  .has-dropdown:hover > .ess-dropdown.align-end { transform: translateY(0) scale(1); }

  .has-dropdown.open  > .ess-nav-link,
  .has-dropdown:hover > .ess-nav-link { color: var(--text-hi); background: var(--overlay); }
  .has-dropdown.open  > .ess-nav-link .chev,
  .has-dropdown:hover > .ess-nav-link .chev { transform: rotate(180deg); }
}

/* Narrow desktop: drop the account name, keep the avatar. */
@media (min-width: 901px) and (max-width: 1140px) {
  .pp-account .pp-trunc { display: none; }
  .pp-company { max-width: 150px; }
}

/* Mobile (900px and below) */
@media (max-width: 900px) {
  .ess-nav-inner { padding: 10px 16px; min-height: 60px; }
  .ess-brand-logo { height: 36px; }
  .ess-brand-mark { width: 30px; height: 30px; }
  .ess-brand-name { font-size: 1.1rem; }
  .ess-nav-toggle { display: inline-flex; margin-left: auto; }

  .ess-menu {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-menu);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 14px 16px;
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto;
    opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
    transition: opacity .24s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s linear .26s;
  }
  .ess-nav.open .ess-menu {
    opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
    transition: opacity .24s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }

  .ess-nav-links   { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .ess-nav-link    { width: 100%; justify-content: flex-start; font-size: 1rem; padding: 13px 12px; }
  .ess-nav-link .chev { margin-left: auto; }
  .ess-nav-link.is-active { background: var(--overlay); }

  .ess-nav-actions {
    flex-direction: column; align-items: stretch; gap: 2px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .pp-company { max-width: none; padding: 10px 12px; }
  .pp-account .pp-trunc { max-width: none; }

  .has-dropdown { position: static; }
  .ess-dropdown {
    min-width: 0; margin: 0; padding: 0 2px 0 8px;
    background: var(--overlay-3); border: 0; box-shadow: none; border-radius: 10px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .24s ease, margin .3s ease, padding .3s ease;
  }
  .has-dropdown.open > .ess-dropdown {
    max-height: 520px; opacity: 1; margin: 2px 0 6px; padding: 4px 2px 4px 8px;
  }
  .has-dropdown.open > .ess-nav-link .chev { transform: rotate(180deg); }
  .ess-dropdown-head { border-bottom-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .ess-dropdown, .ess-menu, .ess-nav-toggle .material-icons,
  .ess-nav-link .chev { transition-duration: .01ms !important; }
}

/* Site-wide notice bar (the ESS announcement style) */
.ess-announce {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ess-blue); color: #fff;
  font-size: .84rem; font-weight: 600; line-height: 1.45; text-align: center;
  padding: 9px 18px;
}
.ess-announce .material-icons { font-size: 18px; flex: none; }
.ess-announce a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   PAGE AREA
============================================================================ */

.page-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 26px 24px 48px;
  min-width: 0;
}

/* Breadcrumbs (replace the old topbar title line) */
.pp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px;
  font-size: .8125rem; color: var(--grey-m); margin-bottom: 16px;
}
.pp-crumbs a        { color: var(--grey-m); font-weight: 600; }
.pp-crumbs a:hover  { color: var(--text-hi); }
.pp-crumbs .sep     { opacity: .45; }
.pp-crumbs [aria-current="page"] { color: var(--grey-d); font-weight: 600; overflow-wrap: anywhere; }

/* Company switcher items (kept for the Eastall company picker on the create
   pages, which reuses these classes for its own search dropdown) */
.company-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: var(--card-bg); border: 1px solid var(--panel-brd); border-radius: 12px;
  box-shadow: var(--shadow-menu); overflow: hidden; z-index: 200;
}
.company-dropdown.open { display: block; }
.company-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  font-size: .875rem; color: var(--text); cursor: pointer; text-decoration: none;
  transition: background var(--transition);
}
.company-dropdown-item:hover  { background: var(--overlay-2); color: var(--text-hi); }
.company-dropdown-item.active { color: var(--orange); font-weight: 600; }

/* ============================================================================
   PAGE HEADER
============================================================================ */

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.page-header-left { min-width: 0; }
.page-header-left h1 {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  color: var(--text-hi); text-wrap: balance;
  overflow-wrap: anywhere; /* long worksite names wrap instead of widening the page */
}
.page-header-left p {
  font-size: .9rem; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere;
}
.page-actions, .page-header-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* ============================================================================
   STATS GRID
============================================================================ */

.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--card-bg); border: 1px solid var(--panel-brd);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.stat-value {
  font-size: 1.85rem; font-weight: 800; color: var(--text-hi);
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: .8125rem; color: var(--text-muted); margin-top: 6px; }

/* ============================================================================
   CARD
============================================================================ */

.card {
  background: var(--card-bg);
  border: 1px solid var(--panel-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: clip;  /* visual clipping only; doesn't block scroll containers */
  min-width: 0;    /* cards in grid/flex layouts shrink instead of overflowing */
}
.card + .card { margin-top: 20px; }

.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--card-bg);
}
.card-title    { font-size: .98rem; font-weight: 800; color: var(--text-hi); letter-spacing: -.01em; }
.card-subtitle { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.card-body     { padding: 20px; }
.card-actions  { display: flex; align-items: center; gap: 8px; }

/* ============================================================================
   DATA TABLE
============================================================================ */

.table-wrapper { overflow-x: auto; }
.data-table    { width: 100%; border-collapse: collapse; }

.data-table th {
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); text-align: left;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: var(--overlay-3); white-space: nowrap;
}
.data-table td {
  font-size: .875rem; color: var(--text);
  padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr        { transition: background var(--transition); }
.data-table tbody tr:hover  { background: var(--overlay-3); }
.data-table td.td-primary   { color: var(--text-hi); }
.data-table td.actions      { white-space: nowrap; text-align: right; }
/* .data-table th sets text-align:left, which outranks the .text-right utility,
   so right-aligned headers (Actions) sat left of their buttons. */
.data-table th.text-right, .data-table td.text-right { text-align: right; }

.table-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: .9375rem; }
.table-empty .material-icons { font-size: 40px; display: block; margin: 0 auto 12px; opacity: .35; }

/* ============================================================================
   BUTTONS  (ESS button shape; PinPoint orange as the primary)
============================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: .875rem; font-weight: 700;
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; line-height: 1;
  transition: background .15s, border-color .15s, box-shadow .15s, filter .15s, transform .06s;
}
.btn:active    { transform: translateY(1px); }
.btn .material-icons { font-size: 17px; }
.btn:disabled  { opacity: .5; pointer-events: none; }

.btn-sm { font-size: .8125rem; padding: 7px 12px; border-radius: 10px; }
.btn-sm .material-icons { font-size: 16px; }
.btn-lg { font-size: 1rem; padding: 13px 24px; }

.btn-primary {
  background: var(--orange); color: #fff; border-color: var(--orange);
  box-shadow: 0 3px 10px rgba(249,115,22,.22);
}
.btn-primary:hover {
  background: var(--orange-dark); border-color: var(--orange-dark); color: #fff;
  box-shadow: 0 4px 14px rgba(249,115,22,.32);
}

.btn-secondary {
  background: var(--overlay-3); color: var(--text-hi); border-color: var(--btn-brd);
}
.btn-secondary:hover {
  background: var(--overlay-2); border-color: var(--btn-brd-h); color: var(--text-hi);
}

.btn-ghost { background: transparent; color: var(--grey-m); border-color: transparent; }
.btn-ghost:hover { background: var(--overlay); color: var(--text-hi); }

.btn-danger { background: var(--ess-red); color: #fff; border-color: var(--ess-red); }
.btn-danger:hover {
  filter: brightness(1.07); color: #fff; box-shadow: 0 3px 10px rgba(232,48,56,.30);
}

.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { filter: brightness(1.06); color: #fff; }

/* The Eastall gradient, for cross-service calls to action */
.btn-grad { color: #fff; background: var(--grad-btn); border-color: transparent; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.btn-grad:hover { filter: brightness(1.06); color: #fff; }

/* ============================================================================
   BADGES / PILLS
============================================================================ */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-success { background: var(--success-bg);   color: var(--success-text); }
.badge-danger  { background: var(--danger-bg);    color: var(--danger-text); }
.badge-warning { background: var(--warning-bg);   color: var(--warning-text); }
.badge-info    { background: var(--info-bg);      color: var(--info-text); }
.badge-gray    { background: var(--overlay-2);    color: var(--grey-d); }
.badge-orange  { background: var(--orange-light); color: var(--orange-text); }

/* ============================================================================
   FORMS
============================================================================ */

.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: .8125rem; font-weight: 700; color: var(--text-hi); margin-bottom: 6px;
}
.form-hint { font-size: .75rem; color: var(--text-muted); margin-top: 5px; }

.form-input, .form-select, .form-textarea {
  width: 100%; font-family: inherit; font-size: .9375rem; color: var(--text-hi);
  background: var(--overlay-3); border: 1px solid var(--panel-brd);
  border-radius: var(--radius-sm); padding: 10px 13px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-xmuted); }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--btn-brd); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-ring); background: var(--card-bg);
}
.form-input[readonly] { color: var(--grey-d); }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .84rem; margin-right: 12px; padding: 7px 14px;
  cursor: pointer; color: var(--text-hi); background: var(--overlay-2);
  border: 1px solid var(--btn-brd); border-radius: 9px;
}
input[type="file"]::file-selector-button:hover { background: var(--overlay); border-color: var(--btn-brd-h); }

.form-input.is-error { border-color: var(--danger); }
.form-input.is-error:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
.form-error-msg { font-size: .75rem; color: var(--danger-text); margin-top: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-card {
  background: var(--card-bg); border: 1px solid var(--panel-brd);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); max-width: 560px;
}
.form-card-title { font-size: 1.08rem; font-weight: 800; color: var(--text-hi); margin-bottom: 20px; }
.form-submit-row {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}

/* ============================================================================
   ALERTS
============================================================================ */

.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent;
  font-size: .875rem; line-height: 1.55; margin-bottom: 20px;
}
.alert .material-icons { font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }

/* ============================================================================
   TOASTS
============================================================================ */

#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; min-width: 240px; max-width: 380px;
  background: var(--menu); color: var(--text-hi);
  border: 1px solid var(--panel-brd); border-radius: 12px;
  box-shadow: var(--shadow-menu);
  font-size: .875rem; font-weight: 600;
  pointer-events: all; animation: toast-in .2s ease;
}
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-warning { border-left: 3px solid var(--warning); }
.toast .material-icons { font-size: 19px; flex-shrink: 0; color: var(--info-text); }
.toast.toast-success .material-icons { color: var(--success); }
.toast.toast-error   .material-icons { color: var(--danger); }
.toast.toast-warning .material-icons { color: var(--warning); }
.toast-exit { animation: toast-out .2s ease forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(12px); } }

/* ============================================================================
   MODAL
============================================================================ */

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--panel-brd); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: 28px; max-width: 460px; width: 100%;
  transform: scale(.96); transition: transform .15s ease;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-title  { font-size: 1.1rem; font-weight: 800; color: var(--text-hi); margin-bottom: 8px; }
.modal-body   { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }

/* ============================================================================
   PUBLIC / STANDALONE PAGES  (login, signup, signout)
============================================================================ */

.public-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--orange-light), transparent 62%),
    var(--page-bg);
}
.public-card {
  background: var(--card-bg); border: 1px solid var(--panel-brd);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-menu);
  padding: 40px 36px; width: 100%; max-width: 420px;
}
/* The login page lays its card over a photograph; keep it slightly glassy
   in both themes instead of the old always-white card. */
.login-bg .public-card {
  background: color-mix(in srgb, var(--card-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.public-logo { display: block; max-width: 180px; max-height: 48px; object-fit: contain; margin: 0 auto 28px; }
.public-logo-fallback {
  text-align: center; font-size: 1.4rem; font-weight: 900; color: var(--orange);
  letter-spacing: -.03em; margin-bottom: 28px;
}
.public-title    { font-size: 1.3rem; font-weight: 800; color: var(--text-hi); text-align: center; margin-bottom: 4px; }
.public-subtitle { font-size: .875rem; color: var(--text-muted); text-align: center; margin-bottom: 28px; }
.public-divider  { height: 1px; background: var(--line); margin: 20px 0; }
.public-link     { display: block; text-align: center; font-size: .875rem; color: var(--text-muted); margin-top: 20px; }
.public-link a   { color: var(--orange); font-weight: 600; }

/* The banner logo's tagline is black-on-transparent; on the dark theme lift it
   onto a light plate so "By Eastall Software Systems" stays legible. */
:root:not([data-theme="light"]) .public-logo {
  background: #fff; border-radius: 12px; padding: 8px 12px; max-height: 64px; box-sizing: content-box;
}

/* ============================================================================
   SIGNOUT CHOICE PAGE
============================================================================ */

.signout-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.signout-choice-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; background: var(--overlay-3);
  border: 1px solid var(--panel-brd); border-radius: 14px;
  font-size: .9375rem; font-weight: 600; color: var(--text-hi); cursor: pointer; text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.signout-choice-btn:hover {
  border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-ring);
  background: var(--overlay); color: var(--text-hi);
}
.signout-choice-btn .material-icons { font-size: 18px; color: var(--text-muted); }

/* ============================================================================
   WORKSITE MAP / PIN VIEWER
============================================================================ */

.map-card {
  background: var(--card-bg); border: 1px solid var(--panel-brd);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  min-width: 0; max-width: 100%;
}
.map-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--overlay-3); border-bottom: 1px solid var(--line);
}
.map-toolbar-label {
  font-size: .72rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.map-scroll { overflow: auto; max-height: 70vh; position: relative; cursor: grab; }
.map-scroll:active { cursor: grabbing; }
.map-inner { position: relative; display: inline-block; transform-origin: top left; }
.map-inner img { display: block; max-width: none; user-select: none; }

/* Pin badges keep their fixed orange-and-white in both themes: they sit on
   the floor plan image, not on the page. */
.pin-badge {
  position: absolute; width: var(--pin-size); height: var(--pin-size);
  background: var(--orange); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--pin-size) * .4); font-weight: 700; cursor: pointer;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform var(--transition), box-shadow var(--transition);
  user-select: none; z-index: 10;
}
.pin-badge:hover {
  transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 4px 12px rgba(249,115,22,.5);
}

.zoom-controls, .pin-size-controls { display: flex; align-items: center; gap: 8px; }

.zoom-slider, .pin-size-slider {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--overlay-2); border-radius: 2px; outline: none; cursor: pointer;
}
.zoom-slider     { width: 100px; }
.pin-size-slider { width: 80px; }
.zoom-slider::-webkit-slider-thumb, .pin-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.zoom-slider::-webkit-slider-thumb     { background: var(--orange); }
.pin-size-slider::-webkit-slider-thumb { background: var(--grey-d); }
.zoom-slider::-moz-range-thumb, .pin-size-slider::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%; cursor: pointer;
}
.zoom-slider::-moz-range-thumb     { background: var(--orange); }
.pin-size-slider::-moz-range-thumb { background: var(--grey-d); }

.pin-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.pin-legend .btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }

.pin-panel {
  display: none; position: fixed; right: 24px; top: calc(var(--topbar-h) + 16px); width: 320px;
  background: var(--card-bg); border: 1px solid var(--panel-brd);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-menu);
  z-index: 500; overflow: hidden;
}
.pin-panel.open { display: flex; flex-direction: column; }
.pin-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--overlay-3);
}
.pin-panel-title { font-size: .95rem; font-weight: 800; color: var(--text-hi); }
.pin-panel-body  { padding: 16px; overflow-y: auto; max-height: 60vh; }

.pin-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.pin-photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; cursor: pointer;
}

.pp-upload-status { font-size: .8125rem; color: var(--text-muted); margin-top: 6px; }
.pp-drop-zone.pp-drop-active {
  outline: 2px dashed var(--orange); outline-offset: 3px;
  background: var(--orange-light); border-radius: var(--radius-sm);
}

/* ============================================================================
   STATUS PAGE  (pending approval, 403, 503)
============================================================================ */

.status-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--page-bg); padding: 24px;
}
.status-card { text-align: center; max-width: 420px; }
.status-icon { font-size: 64px; margin-bottom: 16px; color: var(--text-xmuted); }
.status-card h1 { font-size: 1.35rem; font-weight: 800; color: var(--text-hi); margin-bottom: 8px; }
.status-card p  { font-size: .9375rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }

/* ============================================================================
   NOTICES
============================================================================ */

.trial-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 20px; text-align: center;
  background: var(--warning-bg); border-bottom: 1px solid var(--warning-border);
  color: var(--warning-text); font-size: .85rem; font-weight: 600; line-height: 1.45;
}
.trial-banner .material-icons { font-size: 18px; color: var(--warning); flex-shrink: 0; }
.trial-banner-urgent {
  background: var(--danger-bg); border-bottom-color: var(--danger-border); color: var(--danger-text);
}
.trial-banner-urgent .material-icons { color: var(--danger); }

/* ============================================================================
   PHOTO SOURCE BOTTOM SHEET (mobile)
============================================================================ */

.pp-sheet-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s ease;
}
.pp-sheet-overlay.open { opacity: 1; }
.pp-sheet {
  width: 100%; max-width: 460px;
  background: var(--card-bg); border: 1px solid var(--panel-brd); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-menu);
  transform: translateY(100%); transition: transform .24s cubic-bezier(.22,1,.36,1);
}
.pp-sheet-overlay.open .pp-sheet { transform: translateY(0); }
.pp-sheet-title {
  text-align: center; font-size: .8125rem; font-weight: 700; color: var(--text-muted);
  padding: 12px 10px 8px;
}
.pp-sheet-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 16px; border: none; background: transparent; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--text-hi);
  text-align: left; cursor: pointer; transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.pp-sheet-btn:active, .pp-sheet-btn:hover { background: var(--overlay); }
.pp-sheet-btn .material-icons { color: var(--orange); font-size: 22px; }
.pp-sheet-cancel { justify-content: center; margin-top: 4px; font-weight: 700; color: var(--text-muted); }

/* ============================================================================
   UTILITIES
============================================================================ */

.text-muted  { color: var(--text-muted) !important; }
.text-small  { font-size: .8125rem; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.w-full      { width: 100%; }

hr.divider { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

.img-placeholder {
  background: var(--overlay-3); border: 1px dashed var(--panel-brd); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-xmuted); font-size: .75rem;
}

/* ============================================================================
   FOOTER  (the thin Eastall footer, as on MyESS and the coming-soon page:
   copyright left, theme toggle centre, legal links right)
============================================================================ */

.ess-stripe { height: 5px; background: var(--stripe); }

.my-foot { margin-top: auto; background: var(--bg-2); }
.my-foot-inner {
  max-width: 1120px; margin: 0 auto; padding: 16px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.my-foot-copy  { color: var(--grey-m); font-size: .8rem; line-height: 1.5; }
.my-foot-theme { display: flex; justify-content: center; }
.my-foot-legal { display: flex; justify-content: flex-end; gap: 20px; }
.my-foot-legal a { color: var(--grey-m); font-size: .8rem; font-weight: 600; white-space: nowrap; transition: color .13s; }
.my-foot-legal a:hover { color: var(--text-hi); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--overlay-3); border: 1px solid var(--panel-brd); border-radius: 999px;
}
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; color: var(--grey-m); cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.theme-btn .material-icons { font-size: 19px; }
.theme-btn:hover { color: var(--text-hi); }
.theme-btn[aria-pressed="true"] {
  background: var(--toggle-knob); color: var(--text-hi); box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

@media (max-width: 720px) {
  .my-foot-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .my-foot-legal { justify-content: center; }
}

/* Cookie notice */
.cookie-bar {
  position: fixed; z-index: 80; left: 50%; bottom: 22px;
  transform: translateX(-50%) translateY(160%);
  width: min(600px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  padding: 15px 18px;
  background: var(--bg-2); border: 1px solid var(--panel-brd); border-radius: 16px;
  box-shadow: var(--shadow-menu);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .42s cubic-bezier(.2,.7,.3,1), opacity .3s ease, visibility 0s linear .42s;
}
.cookie-bar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .3s ease, visibility 0s;
}
.cookie-text { flex: 1 1 280px; min-width: 0; color: var(--grey-m); font-size: .86rem; line-height: 1.55; }
.cookie-text a { color: var(--ess-blue); font-weight: 600; }
.cookie-text a:hover { text-decoration: underline; color: var(--ess-blue); }
.cookie-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--btn-brd); background: var(--overlay-3); color: var(--text-hi);
  transition: background .15s, border-color .15s, filter .15s, transform .06s;
}
.c-btn:hover  { background: var(--overlay-2); border-color: var(--btn-brd-h); }
.c-btn:active { transform: translateY(1px); }
.c-btn.accept { border-color: transparent; color: #fff; background: var(--grad-btn); box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.c-btn.accept:hover { filter: brightness(1.06); }

@media (max-width: 560px) {
  .cookie-bar      { left: 14px; right: 14px; bottom: 14px; width: auto; transform: translateY(180%); }
  .cookie-bar.show { transform: translateY(0); }
  .cookie-btns { width: 100%; }
  .c-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition-duration: .01ms; }
}

/* ============================================================================
   MOBILE CONTENT  (≤ 860px: phones and small tablets)
============================================================================ */

@media (max-width: 860px) {

  /* Page */
  .page-content { padding: 14px 12px 32px; }
  .pp-crumbs    { margin-bottom: 12px; }
  .page-header  { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .page-header-left h1 { font-size: 1.35rem; }
  .page-actions, .page-header-right { flex-wrap: wrap; max-width: 100%; }

  /* Forms */
  .form-row    { grid-template-columns: 1fr; }
  .form-card   { padding: 20px; }
  .public-card { padding: 28px 20px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card  { padding: 14px 16px; }
  .stat-value { font-size: 1.4rem; }

  /* Cards */
  .card-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .card-body   { padding: 14px; }
  .card-header .form-input { width: 100% !important; }

  /* Tables become stacked cards (no sideways scrolling). Cells label
     themselves via data-label="..."; the headline cell has class td-primary;
     cells that are redundant on phones have class hide-mobile. */
  .table-wrapper { overflow-x: visible; }
  table.data-table, table.data-table tbody { display: block; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table tbody tr {
    display: flex; flex-direction: column; gap: 4px;
    padding: 13px 14px; border-bottom: 1px solid var(--line);
  }
  table.data-table tbody tr:last-child { border-bottom: none; }
  table.data-table tbody tr:hover { background: transparent; }
  table.data-table td {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    border: none; padding: 0; white-space: normal; overflow-wrap: anywhere; font-size: .875rem;
  }
  table.data-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 88px;
    font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted);
  }
  table.data-table td.td-primary {
    order: -1; font-weight: 700; font-size: .95rem; color: var(--text-hi); margin-bottom: 2px;
  }
  .hide-mobile { display: none !important; }
  table.data-table td.actions {
    order: 99; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 6px; margin-top: 8px; text-align: left;
  }
  table.data-table td.actions .btn { font-size: .8125rem; }
  /* Ghost buttons need a visible boundary once they leave the table. */
  table.data-table td.actions .btn-ghost { border: 1px solid var(--btn-brd); background: var(--overlay-3); }
  table.data-table td.actions form { display: inline-flex; align-items: center; gap: 6px; }
  table.data-table td.actions form .form-input { flex: 1 1 140px; width: auto !important; min-width: 0; }

  /* Collapse every inline multi-column grid inside the page. */
  .page-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  .edit-layout { grid-template-columns: 1fr !important; }

  /* Map */
  .map-scroll  { max-height: 46vh !important; }
  .map-toolbar { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .map-toolbar-label { display: none; }
  .map-toolbar-hint  { display: none !important; }
  .zoom-slider       { width: 70px !important; }
  .pin-size-slider   { width: 56px !important; }
  #pinMoveLabel      { display: none; }
  #pinMoveToggle     { padding: 4px 8px !important; }

  /* Toasts: centred at the bottom, above the home bar */
  #toast-container {
    right: 0; left: 0; bottom: max(16px, env(safe-area-inset-bottom, 16px));
    align-items: center; padding: 0 12px;
  }
  .toast { min-width: 0; width: 100%; max-width: none; }

  /* Modals become bottom sheets */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-width: 100% !important; max-height: 85vh !important; overflow-y: auto !important;
    padding: 20px 16px 36px !important; /* 36px clears the iPhone home bar */
  }

  /* The edit-page crop modal stays centred: it needs the full space. */
  #editCropModal { align-items: center !important; }
  #editCropModal .ecrop-box { max-height: 92vh; }

  .pin-badge:active { transform: translate(-50%,-50%) scale(1.18); }
  .pin-panel { left: 12px; right: 12px; width: auto; top: 72px; }

  #welcomeCard { padding: 28px 20px 24px !important; max-height: 88vh; overflow-y: auto; }

  .form-submit-row      { justify-content: stretch; }
  .form-submit-row .btn { flex: 1; justify-content: center; }
  .table-empty          { padding: 32px 16px; }
}