/* Every color and the font come from the company's branding row via CSS
   variables set at startup from /api/brand. No brand values live here. */
:root {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --danger: #ff6b6b;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--brand-bg);
  color: var(--text);
  font-family: var(--brand-font), Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
body.pattern-honeycomb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='2'/%3E%3C/svg%3E");
}
a { color: var(--brand-link); }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 16px; }
.card { background: var(--brand-surface); border-radius: var(--radius); padding: 20px; margin: 0 0 16px; }
.deep { background: var(--brand-deep); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.row > * { flex: 1 1 180px; min-width: 0; }
label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 4px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: var(--brand-deep); color: var(--text);
}
input[type=checkbox] { width: auto; padding: 0; margin: 0 8px 0 0; vertical-align: middle; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; }
button {
  padding: 10px 16px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--brand-accent); color: var(--brand-deep); font-weight: bold;
}
button.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.3); }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button:disabled { opacity: .5; cursor: default; }
.msg { min-height: 1.4em; margin: 8px 0 0; color: var(--muted); }
.msg.error { color: var(--danger); }

/* Sign-in */
.signin { max-width: 420px; margin: 6vh auto 0; padding: 16px; }
.signin .logo { display: block; max-width: 240px; max-height: 120px; margin: 0 auto 12px; }
.signin h1 { text-align: center; font-size: 24px; margin: 0 0 4px; }
.signin .company-lines { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.signin .company-lines div { margin: 2px 0; }
.signin form > * + * { margin-top: 12px; }
.signin button[type=submit] { width: 100%; }
.powered { text-align: center; font-size: 11px; color: var(--muted); opacity: .7; margin: 28px 0 8px; }
.langswitch { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; }
.langswitch button { padding: 4px 10px; font-size: 13px; background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.2); }
.langswitch button[aria-pressed=true] { color: var(--brand-deep); background: var(--brand-accent); border-color: var(--brand-accent); }

/* App header */
header.top { background: var(--brand-deep); }
header.top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
header.top img { height: 36px; width: auto; }
header.top .name { font-weight: bold; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.top .langswitch { margin: 0; }
nav.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 0; }
nav.tabs button { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.15); white-space: nowrap; }
nav.tabs button[aria-selected=true] { background: var(--brand-surface); color: var(--text); border-color: var(--brand-accent); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
th { color: var(--muted); font-weight: normal; }
td .actions { display: flex; flex-wrap: wrap; gap: 6px; }
td button { padding: 5px 10px; font-size: 13px; }
.scroll { overflow-x: auto; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--brand-deep); color: var(--muted); }
.badge.ok { color: var(--brand-deep); background: var(--brand-accent); }
.code-reveal { font-size: 28px; letter-spacing: 6px; color: var(--brand-accent); font-weight: bold; }
#map { height: 340px; border-radius: 8px; margin: 12px 0; }
footer.report { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 16px; }

@media (max-width: 600px) {
  .card { padding: 16px; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}

/* Can't-load screen: no branding is available offline (it comes from /api), so neutral colors. */
body.cantload-body { background: #1f2226; }
.cantload .card { background: #2a2e33; }
.cantload h1 { font-size: 22px; }
.cantload button { width: 100%; background: #e6e6e6; color: #15171a; margin-top: 8px; }
.cantload .langswitch button { width: auto; background: transparent; color: var(--muted); }
.cantload .langswitch button[aria-pressed=true] { background: #e6e6e6; color: #15171a; }

/* Field clock (1B) */
h2.section { font-size: 18px; margin: 8px 0 12px; }
button.big { width: 100%; padding: 16px; font-size: 18px; margin-top: 12px; }
.card.job.in { outline: 2px solid var(--brand-accent); }
.card.warn { outline: 2px solid var(--danger); }
.card.warn input, .card.warn textarea { margin-bottom: 10px; }
.sync-banner p { margin: 0 0 8px; }
.sync-banner.waiting { outline: 1px solid rgba(255,255,255,.3); }
ul.entries { list-style: none; padding: 0; margin: 0; }
ul.entries li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.state { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #6b6b6b; color: #fff; }
.state.ok { background: #1f8a3b; color: #fff; }
.geo-status { font-weight: bold; }
.selfie video, .selfie .selfie-preview { display: block; width: 100%; max-width: 320px; border-radius: 8px; margin: 8px 0; }
.selfie video.hidden, .selfie .selfie-preview.hidden { display: none; }
.result-line { font-size: 20px; padding: 12px; border-radius: 8px; background: #6b6b6b; }
.result-line.ok { background: #1f8a3b; }
body.notsaved-body { background: #b00020 !important; background-image: none !important; }
.notsaved { color: #fff; text-align: center; padding-top: 10vh; }
.notsaved h1 { font-size: 40px; margin: 0 0 16px; }
.notsaved p { font-size: 20px; }
.notsaved .what { font-weight: bold; }
.notsaved button { background: #fff; color: #b00020; margin-top: 24px; }
textarea { resize: vertical; }

/* Phone header: keep the logo, language switch and sign-out on one line. */
@media (max-width: 480px) {
  header.top .wrap { gap: 8px; padding-left: 12px; padding-right: 12px; }
  header.top img { height: 28px; max-width: 26vw; object-fit: contain; object-position: left; }
  header.top .langswitch button { padding: 3px 7px; font-size: 12px; }
  header.top button.secondary { padding: 6px 8px; font-size: 13px; line-height: 1.15; max-width: 30vw; }
  header.top .langswitch { gap: 4px; }
}

/* Job documents */
.doc-row { padding: 10px 0; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.doc-row button { margin: 6px 6px 0 0; }
.card.job > button + button { margin-top: 8px; }
.rev-list { padding-left: 18px; }
.rev-list li { margin: 8px 0; }
.rev-body { white-space: pre-wrap; padding: 6px 8px; margin-top: 4px; border-left: 3px solid var(--brand-accent, #f80); }
.req.rejected { opacity: .55; text-decoration: line-through; }
.req button { margin: 6px 6px 0 0; }

/* Stage 5 forms */
.form-page { position: relative; touch-action: none; user-select: none; max-width: 100%; overflow: hidden; margin: 8px 0; background: #fff; }
.form-page canvas, .form-page img { display: block; }
.form-box { position: absolute; border: 2px solid var(--brand-accent, #f80); background: rgba(255,136,0,.14); color: #111; font-size: 11px; line-height: 1.1; overflow: hidden; pointer-events: none; }
.form-box.ghost { border-style: dashed; }
.sig-pad { display: block; background: #fff; border: 1px solid rgba(127,127,127,.6); border-radius: 6px; touch-action: none; max-width: 100%; margin: 6px 0; }

/* In-app assistant */
.assistant .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-msg.user { border-left: 3px solid var(--accent, #f58220); padding-left: 8px; }
.assistant-msg.assistant { border-left: 3px solid #6b7a99; padding-left: 8px; }
.assistant-draft input[type=text] { width: 100%; max-width: 420px; }
.assistant-draft textarea { width: 100%; }