/* portal_theme.css - the one shared look for every portal screen.
   v13, 2026-09-07. Loaded by admin.php, job.php, roof.php, users.php, account.php, today.php.
   Each screen keeps its own inline CSS for layout; this file sets the tokens, the type
   scale, buttons, fields, cards and touch targets on top of it. Selectors carry a `body`
   or `html` prefix so they win over the single-class rules in the inline styles.

   Tokens (from the Wallaby Portal Redesign): forest #2c6437 · ivory #f6f2ea · paper #fbf9f4
   sand #ece4d6 · ink #23271f · muted #6b6f64 · bronze #b08850 · line #e0d8c8 · red #a33b2e
   Type: Cormorant Garamond for headings, Jost for everything else. Sizes 32 / 22 / 16 / 14 / 12.
   Radii 6 / 12 / 20. Every tappable thing is at least 44px tall. */

html:root{
  --forest:#1b2a22; --forest-deep:#1b2a22; --forest-mid:#2c6437; --ivory:#f6f2ea; --paper:#fbf9f4; --sand:#ece4d6;
  --ink:#23271f; --muted:#6b6f64; --bronze:#b08850; --gold:#d8b878; --line:#e0d8c8; --red:#a33b2e; --green:#2c6437;
  --r-s:6px; --r-m:12px; --r-l:20px;
  --t-1:32px; --t-2:22px; --t-3:16px; --t-4:14px; --t-5:12px;
}

html body{ font-family:'Jost',system-ui,sans-serif; color:var(--ink); background:var(--ivory); -webkit-font-smoothing:antialiased; }

/* headings */
html body h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:var(--t-1); line-height:1.15; color:var(--forest-deep); letter-spacing:-.01em; }
html body h2{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:var(--t-2); line-height:1.25; color:var(--forest-deep); }
html body h3{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:18px; color:var(--forest-deep); }
html body label{ font-size:var(--t-5); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; }
html body .muted, html body .intro{ color:var(--muted); }

/* cards and bars */
html body .card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); box-shadow:0 1px 2px rgba(35,39,31,.04); }
html body .abar{ border-radius:var(--r-m) var(--r-m) 0 0; border-left-color:var(--forest); }
html body .abar + .card{ border-left-color:var(--forest); }
html body .flash{ border-radius:var(--r-m); border-left:4px solid var(--forest); }
html body .err, html body .qwarn{ border-radius:var(--r-m); }

/* buttons: forest, 44px, quiet ghost, red danger */
html body button, html body .btn, html body input[type=submit]{
  background:var(--forest); color:#fff; border:0; border-radius:var(--r-s);
  min-height:44px; padding:10px 18px; font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition:background .12s ease, transform .06s ease;
}
html body button:hover, html body .btn:hover{ background:#2c6437; }
html body button:active, html body .btn:active{ transform:translateY(1px); }
html body button.ghost, html body .btn.ghost, html body button.secondary{
  background:#fff; color:var(--forest-deep); border:1px solid var(--line);
}
html body button.ghost:hover, html body .btn.ghost:hover{ background:var(--paper); border-color:#cfc5b1; }
html body button.small, html body .btn.small{ min-height:38px; padding:7px 12px; font-size:14px; }
html body button.danger{ background:#fff; color:var(--red); border:1px solid #dcb4ac; }
html body button.danger:hover{ background:#fbf1ef; }
html body button[disabled], html body .btn[disabled], html body button[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; filter:none; transform:none; }
/* v1.4: tiny controls that are buttons in the markup but not in the eye. The 44px forest pill used to paint under them on hover. */
html body button.mintog, html body button.mintog:hover{ background:none; color:var(--muted); min-height:0; padding:2px 6px; border:0; transform:none; }
html body button.rm, html body button.rm:hover{ background:none; color:var(--muted); min-height:0; padding:2px 6px; border:0; }
html body .arrbtn, html body .arrbtn:hover{ background:#fff; color:var(--forest); border:1px solid var(--line); min-height:0; padding:3px 10px; }
/* v1.4: kanban boards on a phone slide sideways one column at a time instead of stacking seven columns deep */
@media(max-width:720px){
  html body .board{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  html body .board .col{ flex:0 0 82vw; scroll-snap-align:start; }
}
html body .copy{ background:var(--forest-deep); }

/* fields */
html body input[type=text], html body input[type=email], html body input[type=password], html body input[type=number],
html body input[type=date], html body input[type=tel], html body input[type=url], html body select, html body textarea{
  border:1px solid var(--line); border-radius:var(--r-s); background:#fff; color:var(--ink);
  font:inherit; font-size:15px; min-height:44px; padding:10px 12px;
}
html body textarea{ line-height:1.5; }
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible,
html body button:focus-visible, html body a:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }
html body input[type=checkbox], html body input[type=radio]{ accent-color:var(--forest); width:18px; height:18px; min-height:0; }

/* tags, pills, chips */
html body .tag, html body .pill, html body .flag, html body .spill, html body .tpill{ border-radius:999px; font-weight:500; letter-spacing:.02em; }
html body .tag.owner{ background:#f3e3c3; color:#7a5a25; }
html body .tag.staff{ background:#dbe7f5; color:#1d4e89; }
html body .tag.sales{ background:#e6efe6; color:#2c6437; }

/* admin side navigation and job list */
html body aside.side a.on{ background:var(--forest); color:#fff; border-radius:var(--r-s); }
html body aside.side a.on .sc{ background:rgba(255,255,255,.18); color:#fff; }
html body .joblink{ border-radius:var(--r-m); }
html body .joblink:hover{ border-color:#cfc5b1; background:#fff; }
html body .joblink .pill{ background:var(--forest); color:#fff; }

/* tables */
html body table.t th{ font-size:var(--t-5); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; }
html body table.t td{ border-top:1px solid #efe9dc; }

/* client / crew page (job.php) */
html body header .brand{ font-family:'Cormorant Garamond',Georgia,serif; }
html body .shead{ border-radius:var(--r-s) var(--r-s) 0 0; }
html body .sbody{ border-radius:0 0 var(--r-m) var(--r-m); }
html body .gbanner{ border-radius:var(--r-m); background:var(--forest); }
html body .moneycard, html body .msbox, html body .pinned{ border-radius:var(--r-m); }
html body .call{ border-radius:999px; min-height:44px; display:inline-flex; align-items:center; }

/* field mode: crew on a phone in the sun - bigger targets, stronger contrast */
html body.teamview button, html body.crewview button{ min-height:48px; font-size:16px; }
@media (max-width:640px){
  html:root{ --t-1:28px; --t-2:20px; }
  html body button, html body .btn{ width:auto; }
}

/* print: the client page and the contracts preview go to paper cleanly */
@media print{
  html body{ background:#fff; }
  html body header, html body aside.side, html body footer, html body .uover, html body #pus-ov, html body .welcometip{ display:none !important; }
  html body .card{ box-shadow:none; }
}