/* Store Visit Survey — built on the Haier design system.
 *
 * tokens.css (copied from the system) supplies every colour, type style, space
 * and radius; nothing here invents a value. The system's rules that shape this
 * file: neutral grounds carry ~90% of a surface and blue stays under ~10%, so
 * the page is beige and the header band is the dark-grey fascia rather than a
 * blue bar; the brand is flat, so there are no shadows or gradients, only the
 * focus ring; rounding stays at radius-sm/md and the pill radius is for status
 * dots only; controls are 44px tall for touch.
 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--text-body);
}

/* Thai is never uppercased or letter-spaced, and keeps its taller line height */
:lang(th) { text-transform: none; letter-spacing: normal; }

h1 { font: var(--text-title); margin: var(--space-1) 0 var(--space-4); }
h2 { font: var(--text-label); margin: 0; }
h3 { font: var(--text-label); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--action); }
a:hover { color: var(--action-hover); }

/* ------------------------------------------- app themes (colour only) ----
 * Type, spacing, radius and the fonts stay the design system's. Only the
 * colour roles are redefined: Light is this app's original palette, Dark is a
 * near-black ground. Every pair below was checked against WCAG AA.
 */

:root, [data-theme="light"] {
  --surface: #f4f6f9;          /* page */
  --surface-alt: #e8f0f9;      /* bands, table heads, the action bar */
  --surface-raised: #ffffff;   /* cards, inputs */
  --surface-dark: #ffffff;     /* header band */
  --ink: #16202b;
  --ink-muted: #5b6b7c;
  --on-dark: #16202b;          /* text in the header band */
  --action: #004ea2;
  --action-hover: #003b7a;
  --action-soft: #e8f0f9;
  --on-action: #ffffff;
  --accent: #32beff;
  --on-accent: #000000;
  --line: #d8e0e8;
  --line-strong: #5f6b78;
  --danger: #b3261e;
  --focus-ring: 0 0 0 2px #f4f6f9, 0 0 0 4px #004ea2;
}

/* Dark = the design system's Gold theme on a near-black ground. The gold family
 * and its on-colours are the system's values; only the grounds are darker than
 * the system's #3A3A3A, as asked. */
[data-theme="dark"] {
  --surface: #0f0f0f;
  --surface-alt: #191614;      /* a hint of the warm gold cast */
  --surface-raised: #1e1b18;
  --surface-dark: #0b0b0b;     /* header band */
  --ink: #fffaf2;              /* Beige 1 — 18.6:1 on the ground */
  --ink-muted: #d1c5b0;        /* Beige 4 — 12.8:1 */
  --on-dark: #fffaf2;
  --action: #d0ad8d;           /* Gold 1 — 9.8:1 on the ground */
  --action-hover: #e3c9ad;
  --action-soft: #4a3b2a;      /* the system's gold tint */
  --on-action: #000000;        /* black on gold, per the system */
  --accent: #b89670;           /* Gold 2 */
  --on-accent: #000000;
  --line: #332c25;
  --line-strong: #9c8b76;
  --danger: #ff9a8f;
  --focus-ring: 0 0 0 2px #0f0f0f, 0 0 0 4px #d0ad8d;
}

/* ----------------------------------------------------------- header band */

header.app {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line);
}
/* row 1: the logo, the app name and the theme switch — nothing else */
header.app .bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}
header.app img.logo {
  height: 64px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}
header.app .title {
  font: var(--text-title);
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* row 2: whatever buttons the page itself needs */
header.app .navrow {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 0 var(--space-4) var(--space-2);
  max-width: 900px;
  margin: 0 auto;
}
header.app .navrow:empty { display: none; }
header.app .navrow a {
  color: var(--action);
  text-decoration: none;
  font: var(--text-label);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  white-space: nowrap;
}
header.app .navrow a:hover { background: var(--action-soft); }
header.app .navrow a.active {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card > h2 {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font: var(--text-label);
  color: var(--ink);
}
/* step numbers: one of the few small blue accents */
.card > h2 .n, label.field > span.lbl .n {
  display: inline-block;
  min-width: 20px;
  margin-right: var(--space-2);
  padding: 0 var(--space-1);
  background: var(--action);
  color: var(--on-action);
  border-radius: var(--radius-sm);
  text-align: center;
  font: var(--text-caption);
}
.sub {
  color: var(--ink-muted);
  font: var(--text-body-sm);
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.muted { color: var(--ink-muted); font: var(--text-body-sm); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- fields */

label.field { display: block; margin-bottom: var(--space-4); }
label.field > span.lbl {
  display: block;
  font: var(--text-label);
  color: var(--ink);
  margin-bottom: var(--space-1);
}
label.field > small.muted {
  display: block;
  margin-top: var(--space-1);
  font: var(--text-caption);
  color: var(--ink-muted);
}

input[type=text], input[type=number], input[type=password], input[type=date],
input[type=datetime-local], input[type=search], select, textarea {
  width: 100%;
  font: var(--text-body);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-7);
}
select:disabled { opacity: .4; }
textarea { min-height: 88px; resize: vertical; line-height: 28px; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
input.invalid, select.invalid { border: 2px solid var(--danger); }
.req::after { content: " *"; color: var(--danger); }

.row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.row > * { flex: 1 1 150px; min-width: 0; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.grid5 input { text-align: center; }
.grid5 span.lbl { text-align: center; }

.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choices label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font: var(--text-body-sm);
  cursor: pointer;
}
.choices label:has(input:checked) {
  border-color: var(--action);
  background: var(--action-soft);
  font: var(--text-label);
  color: var(--ink);
}
.choices input { accent-color: var(--action); margin: 0; }

.followup { margin-top: var(--space-2); }
.hidden { display: none !important; }

/* --------------------------------------------------------------- buttons */

button {
  font: var(--text-label);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--action);
  background: var(--action);
  color: var(--on-action);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: var(--surface-raised); color: var(--action); }
button.ghost:hover:not(:disabled) { background: var(--action-soft); color: var(--action); }
button.small { min-height: 36px; padding: var(--space-2) var(--space-3); font: var(--text-caption); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
button.danger:hover:not(:disabled) { background: #8f1e17; border-color: #8f1e17; }
button.link {
  background: none;
  border: none;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  color: var(--action);
  text-decoration: underline;
}

/* the checklist's submit block: the last card in the form, not a fixed bar */
.submit-card { text-align: center; }
.submit-card button { min-width: 260px; }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font: var(--text-body-sm); }
th, td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--surface-alt);
  color: var(--ink);
  font: var(--text-label);
  white-space: nowrap;
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
tr.clickable:hover { background: var(--surface-alt); cursor: pointer; }

/* status tags are square-edged: the pill radius is for status dots only */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font: var(--text-caption);
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.pending { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }
.badge.approved { background: var(--action-soft); color: var(--action); border-color: var(--action); }
.badge.rejected { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------------- photos */

.photo-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--surface);
}
.photo-cat h3 { font: var(--text-label); margin: 0 0 var(--space-2); color: var(--ink); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.thumb { position: relative; width: 88px; height: 88px; }
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.thumb button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
  font: var(--text-caption);
  line-height: 1;
}
input[type=file] { font: var(--text-body-sm); min-height: 44px; }

/* ------------------------------------------------------------------ misc */

.notice {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font: var(--text-body-sm);
  border: 1px solid;
}
.notice.err { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.notice.ok { background: var(--action-soft); color: var(--action); border-color: var(--action); }
.notice.warn { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }
.notice.info { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.stat {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.stat b { display: block; font: var(--text-title); color: var(--action); }
.stat span { font: var(--text-caption); color: var(--ink-muted); }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--action);
  border-radius: var(--radius-pill);
  animation: spin .8s linear infinite;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

dl.kv { margin: 0; }
dl.kv > div {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
dl.kv dt { flex: 0 0 42%; color: var(--ink-muted); font: var(--text-body-sm); margin: 0; }
dl.kv dd { flex: 1; margin: 0; word-break: break-word; }

/* -------------------------------------------------------------- overlays */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(58, 58, 58, .6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  overflow: auto;
  z-index: 60;
}
.modal {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  max-width: 820px;
  width: 100%;
  padding: var(--space-5);
}
.modal h2 { font: var(--text-title); margin: 0 0 var(--space-4); }
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

/* ---------------------------------------------------------- picker lists */

.combo { position: relative; }
.combo-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 300px;
  overflow: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.combo-list div {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font: var(--text-body-sm);
}
.combo-list div:last-child { border-bottom: 0; }
.combo-list div:hover, .combo-list div.on { background: var(--action-soft); }
.combo-list div small { display: block; color: var(--ink-muted); font: var(--text-caption); }
.combo-list div.empty { color: var(--ink-muted); cursor: default; }

/* ---------------------------------------------------------------- footer */

.app-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  margin-top: var(--space-6);
}
.app-footer .foot-in {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.app-footer strong { color: var(--ink); font-weight: 600; }
.app-footer .foot-meta { font-variant-numeric: tabular-nums; }
.app-footer a { color: var(--action); text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 640px) {
  .grid5 { grid-template-columns: repeat(3, 1fr); }
  dl.kv > div { flex-direction: column; gap: var(--space-1); }
  header.app .bar { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  header.app img.logo { height: 44px; }
  header.app .title { font: var(--text-subtitle); font-weight: 700; }
  header.app .navrow { padding: 0 var(--space-3) var(--space-2); }
  header.app .navrow a { font: var(--text-caption); padding: var(--space-2); }
  .theme-switch .theme-btn, .icon-btn { width: 36px; height: 36px; }
  main { padding: var(--space-4) var(--space-4) var(--space-6); }
  h1 { font: var(--text-subtitle); font-weight: 700; }
  .submit-card button { width: 100%; min-width: 0; }
  .modal { padding: var(--space-4); }
}

/* ------------------------------------------------------- theme switch */

/* the two header icons sit together on the right of row 1 */
header.app .head-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.theme-switch { display: flex; flex: 0 0 auto; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--action-soft); color: var(--ink); }
.icon-btn svg { display: block; }
.theme-switch .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
}
.theme-switch .theme-btn:hover { background: var(--action-soft); color: var(--ink); }
.theme-switch .theme-btn svg { display: block; }

/* ------------------------------------------------- admin: a desktop page ----
 * The field app is mobile-first; the console is not. admin.html pins the layout
 * viewport at 1280px, so a phone shows the same desktop page zoomed out instead
 * of a narrow one. These widths give its tables and filter rows room to breathe.
 */

body.admin main,
body.admin header.app .bar,
body.admin header.app .navrow,
body.admin .app-footer .foot-in { max-width: 1280px; }

body.admin main { padding: var(--space-5) var(--space-6) var(--space-8); }
body.admin .row > * { flex: 1 1 200px; }
body.admin table { font: var(--text-body-sm); }
body.admin .modal { max-width: 960px; }