/* ==========================================================================
   ConstructIQ — Button system v0.1  (loaded after style.css)
   Rule: if you can click it, it looks like a button. Colour = what it does.

   Blue   .btn-go     Go / save        create, save, submit, next, sign in
   Green  .btn-ok     Approve / done   sign, approve, complete, release, verify
   Amber  .btn-warn   Flag a problem   missing, punch, blocked, delay, reset
   Red    .btn-bad    Reject / remove  outline; .btn-bad-solid inside confirm boxes
   Grey   .btn (none) Safe actions     export, print, upload, cancel, edit

   js/buttons.js adds these classes automatically from each button's label, so
   existing markup gets colour-coded without editing every template. To force a
   colour, put the class on the button yourself; to opt out, add data-intent="none".
   ========================================================================== */

:root {
  --b-go: #2563EB;   --b-go-h: #1D4ED8;   --b-go-ink: #FFFFFF;
  --b-ok: #15803D;   --b-ok-h: #166534;   --b-ok-ink: #FFFFFF;
  --b-warn: #F59E0B; --b-warn-h: #D97706; --b-warn-ink: #1C1917;
  --b-bad: #F87171;  --b-bad-tint: rgba(248,113,113,.12);
  --b-bad-solid: #DC2626; --b-bad-solid-h: #B91C1C;
  --b-sec-bg: #1F252B; --b-sec-line: #56606B; --b-sec-ink: #E9E6E0;
  --b-sec-bg-h: #2A3138; --b-sec-line-h: #7A8591;
  --b-dis-bg: #1A1F24; --b-dis-ink: #6B727B; --b-dis-line: #2E353C;
  --b-focus: #60A5FA;
  --b-shadow: 0 1px 0 rgba(0,0,0,.35);
}
[data-theme="light"] {
  --b-go: #1D4ED8;   --b-go-h: #1E40AF;
  --b-bad: #B91C1C;  --b-bad-tint: #FEF2F2;
  --b-bad-solid: #B91C1C; --b-bad-solid-h: #991B1B;
  --b-sec-bg: #FFFFFF; --b-sec-line: #8C939B; --b-sec-ink: #171B1F;
  --b-sec-bg-h: #F1EFEA; --b-sec-line-h: #5F666E;
  --b-dis-bg: #E7E3DA; --b-dis-ink: #6C737B; --b-dis-line: #D2CDC2;
  --b-focus: #2563EB;
  --b-shadow: 0 1px 0 rgba(23,27,31,.10);
}

/* ---- Base: every .btn is a visible, raised box ---------------------------- */
.btn {
  min-height: 38px; justify-content: center; line-height: 1.1;
  background: var(--b-sec-bg); color: var(--b-sec-ink);
  border: 1.5px solid var(--b-sec-line); box-shadow: var(--b-shadow);
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s, box-shadow .12s, transform .05s;
}
.btn:hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible, .icon-btn:focus-visible, .yn-btn:focus-visible { outline: 3px solid var(--b-focus); outline-offset: 2px; }

/* Ghost used to be invisible text. Now: same box, no fill. */
.btn-ghost { background: transparent; border-color: var(--b-sec-line); box-shadow: none; }
.btn-ghost:hover { background: var(--b-sec-bg-h); }

/* ---- Colour families (beat .btn-accent / .btn-ghost from style.css) ------- */
.btn.btn-go   { background: var(--b-go);   border-color: var(--b-go);   color: var(--b-go-ink); }
.btn.btn-go:hover   { background: var(--b-go-h);   border-color: var(--b-go-h); }
.btn.btn-ok   { background: var(--b-ok);   border-color: var(--b-ok);   color: var(--b-ok-ink); }
.btn.btn-ok:hover   { background: var(--b-ok-h);   border-color: var(--b-ok-h); }
.btn.btn-warn { background: var(--b-warn); border-color: var(--b-warn-h); color: var(--b-warn-ink); }
.btn.btn-warn:hover { background: var(--b-warn-h); }
.btn.btn-bad  { background: transparent;   border-color: var(--b-bad);  color: var(--b-bad); box-shadow: none; }
.btn.btn-bad:hover  { background: var(--b-bad-tint); }
.btn.btn-bad-solid { background: var(--b-bad-solid); border-color: var(--b-bad-solid); color: #FFFFFF; }
.btn.btn-bad-solid:hover { background: var(--b-bad-solid-h); border-color: var(--b-bad-solid-h); }

/* ---- Disabled: obviously off, and the reason sits under it ---------------- */
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled,
.btn.btn-go:disabled, .btn.btn-ok:disabled, .btn.btn-warn:disabled, .btn.btn-bad:disabled, .btn.btn-bad-solid:disabled {
  background: var(--b-dis-bg); color: var(--b-dis-ink); border-color: var(--b-dis-line);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-reason { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--amber); }

/* ---- Small helpers ------------------------------------------------------- */
.icon-btn { border: 1.5px solid var(--b-sec-line); background: var(--b-sec-bg); color: var(--b-sec-ink); box-shadow: var(--b-shadow); }
.icon-btn:hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); }
.yn-btn { border: 1.5px solid var(--b-sec-line); color: var(--b-sec-ink); min-height: 34px; }
.yn-btn.active.yes { background: var(--b-ok); border-color: var(--b-ok); color: #FFFFFF; }
.yn-btn.active.no  { background: var(--b-bad-solid); border-color: var(--b-bad-solid); color: #FFFFFF; }
.linklike { color: var(--b-go); text-underline-offset: 3px; }
[data-theme="light"] .linklike, .linklike { font-weight: 700; }
:root:not([data-theme="light"]) .linklike { color: #93C5FD; }

/* Tabs read as tabs: visible hover, selected tab is a raised panel */
.wp-tabs button { color: var(--dim2); font-weight: 600; }
.wp-tabs button:hover { background: var(--b-sec-bg-h); color: var(--text); }
.wp-tabs button[aria-selected="true"] { color: var(--text); font-weight: 700; border-bottom-color: var(--b-go); }

/* Phones / gloves: bigger targets */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .yn-btn { min-height: 44px; padding-left: 18px; padding-right: 18px; }
}

/* ==========================================================================
   v0.2 — things that were clickable but looked like plain text
   ========================================================================== */

/* Top-of-page trail (Dashboard / Projects / PNOS …). Links back are buttons;
   the page you're on stays plain text so it's clearly not a button. */
.crumb:not(.current) {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1.5px solid var(--b-sec-line); border-radius: 8px;
  background: var(--b-sec-bg); color: var(--b-sec-ink); box-shadow: var(--b-shadow);
  font-weight: 600; text-decoration: none;
}
.crumb:not(.current):hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); color: var(--b-sec-ink); }
.crumb:not(.current)::before { content: "‹"; margin-right: 6px; font-size: 14px; line-height: 1; color: var(--dim2); }
.crumb.current { font-weight: 700; }

/* Commissioning trail (Systems › 2740 › tag) — same treatment */
.tv .tv-link.tv-big {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1.5px solid var(--b-sec-line); border-radius: 8px;
  background: var(--b-sec-bg); color: var(--b-sec-ink); box-shadow: var(--b-shadow);
}
.tv .tv-link.tv-big:hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); }

/* Tag / record links in tables become teal pills, like the prototype */
.tv .tv-link.mono:not(.tv-big) {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px;
  border: 1.5px solid var(--teal); border-radius: 999px;
  background: rgba(127,224,196,.12); /* fallback for iOS < 16.2 */
  background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal);
  font-size: 12.5px;
}
.tv .tv-link.mono:not(.tv-big):hover { background: rgba(127,224,196,.22); background: color-mix(in srgb, var(--teal) 22%, transparent); }

/* Small text actions → small buttons */
.lessons .lesson-link, .progress-clear {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px;
  border: 1.5px solid var(--b-sec-line); border-radius: 6px;
  background: var(--b-sec-bg); color: var(--b-sec-ink);
  font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.lessons .lesson-link:hover, .progress-clear:hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); color: var(--b-sec-ink); }
.lessons .lesson-link.lesson-danger { background: transparent; border-color: var(--b-bad); color: var(--b-bad); }
.lessons .lesson-link.lesson-danger:hover { background: var(--b-bad-tint); }

/* The ⋯ on project cards was invisible until hover — on a phone it never showed */
.card-menu { opacity: 1; border: 1.5px solid var(--b-sec-line); background: var(--b-sec-bg); color: var(--b-sec-ink); }
.card-menu:hover { background: var(--b-sec-bg-h); border-color: var(--b-sec-line-h); }

/* ---- Planning page uses the Projects register layout ---------------------- */
.planning-register .project-cell { min-width: 1060px; }
.planning-register .project-card {
  grid-template-columns: minmax(240px, 2fr) 160px 150px 110px 110px minmax(200px, 1.6fr);
  padding: 12px 18px;
}
.planning-register .pl-notes { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim2); }
.planning-register .loc-chip { display: inline-flex; margin-top: 2px; }

/* ==========================================================================
   v0.3 — work pack rows look like rows you can open, not a line of text
   Project page → Progress list (.pack-link) and Dashboard → Work packs (.dash-pack)
   ========================================================================== */
a.pack-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 46px 16px; gap: 12px; align-items: center;
  min-height: 52px; padding: 8px 12px 8px 14px;
  border: 1.5px solid var(--b-sec-line); border-radius: 10px;
  background: var(--b-sec-bg); color: inherit; text-decoration: none; box-shadow: var(--b-shadow);
  transition: background-color .12s, border-color .12s, transform .12s;
}
a.pack-link:hover { background: var(--b-sec-bg-h); border-color: var(--accent); transform: translateY(-1px); }
a.pack-link:active { transform: none; }
.pack-link-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pack-link-main > .pack-link-no, .pack-link-main > .pack-link-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-link-no { font-weight: 700; font-size: 12px; color: var(--text); }
.pack-link-name { color: var(--dim2); }
.pack-link-meta { font-size: 10px; color: var(--dim); }
.pack-link-status { white-space: nowrap; }
.pack-link-pct { font-size: 13px; font-weight: 700; text-align: right; }
.pack-link-go, a.dash-pack::after { font-size: 22px; line-height: 1; color: var(--dim2); text-align: center; }
a.pack-link:hover .pack-link-go { color: var(--accent); }

/* Dashboard pack rows become cards too */
a.dash-pack {
  position: relative; margin: 0 0 8px; padding: 12px 40px 12px 14px;
  border: 1.5px solid var(--b-sec-line); border-radius: 10px;
  background: var(--b-sec-bg); box-shadow: var(--b-shadow);
  transition: background-color .12s, border-color .12s;
}
a.dash-pack:last-child { border-bottom: 1.5px solid var(--b-sec-line); }
a.dash-pack:hover { background: var(--b-sec-bg-h); border-color: var(--accent); }
a.dash-pack::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
a.dash-pack:hover::after { color: var(--accent); }

/* Phones: name on top, status + bar + % underneath */
@media (max-width: 640px) {
  a.pack-link { grid-template-columns: minmax(0, 1fr) 46px 16px; row-gap: 8px; }
  a.pack-link .pack-link-main { grid-column: 1 / -1; }
  a.pack-link .pack-link-status { grid-column: 1; justify-self: start; }
  a.pack-link .bar-track { grid-column: 1 / -1; grid-row: 3; }
}