/* ============================================================
   Enviroair Field App — overlay tokens
   Builds on colors_and_type.css. Import AFTER the base file.
   ============================================================ */

:root {
  /* ---- Touch targets ---- */
  --touch-min:    44px;   /* iOS HIG minimum */
  --touch-comfy:  52px;   /* gloves, wet hands */
  --touch-large:  64px;   /* primary actions */

  /* ---- Density (medium) ---- */
  --field-row-pad-y: 14px;
  --field-row-pad-x: 16px;
  --field-section-gap: 12px;
  --field-screen-pad: 16px;

  /* ---- Outdoor-readable contrast bumps ---- */
  --field-fg-primary:   #14161A;   /* darker than charcoal-900 for sunlight */
  --field-fg-secondary: #3A3B3D;
  --field-border:       #C5C7CB;   /* heavier than charcoal-200 */
  --field-border-strong:#909195;

  /* ---- Status palette (high-contrast for sunlight) ---- */
  --field-status-ok:     #2E7A1E;
  --field-status-ok-bg:  #E4F1DB;
  --field-status-warn:   #B5651D;
  --field-status-warn-bg:#FCEBD2;
  --field-status-fail:   #B5251C;
  --field-status-fail-bg:#FBE0DD;
  --field-status-na:     #6E6F72;
  --field-status-na-bg:  #ECECED;
  --field-status-todo:   #2B6E9E;
  --field-status-todo-bg:#DCEDF7;
}

/* Dark theme — auto via prefers-color-scheme; can be forced via [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:       #0F1316;
    --bg-surface:    #181C20;
    --bg-subtle:     #20262B;
    --bg-muted:      #2A3137;
    --fg-primary:    #F2F3F4;
    --fg-secondary:  #B6BABE;
    --fg-tertiary:   #8E9296;
    --fg-muted:      #6B7075;
    --border-subtle: #2A3137;
    --border-default:#384048;
    --border-strong: #5A636B;
    --field-fg-primary:   #F6F7F8;
    --field-fg-secondary: #B6BABE;
    --field-border:       #384048;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.5), 0 12px 28px rgba(0,0,0,0.5);
  }
}
[data-theme="dark"] {
  --bg-page:       #0F1316;
  --bg-surface:    #181C20;
  --bg-subtle:     #20262B;
  --bg-muted:      #2A3137;
  --fg-primary:    #F2F3F4;
  --fg-secondary:  #B6BABE;
  --fg-tertiary:   #8E9296;
  --fg-muted:      #6B7075;
  --border-subtle: #2A3137;
  --border-default:#384048;
  --border-strong: #5A636B;
  --field-fg-primary:   #F6F7F8;
  --field-fg-secondary: #B6BABE;
  --field-border:       #384048;
}

/* ============================================================
   Field App primitives
   ============================================================ */

.fa-screen {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  min-height: 100%;
  display: flex; flex-direction: column;
}

/* Top bar — sticky, blurred, plant-room friendly */
.fa-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.fa-topbar-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-primary); border: none; cursor: pointer;
}
.fa-topbar-icon:active { background: var(--bg-subtle); }
.fa-topbar-title {
  flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.fa-topbar-sub {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--fg-tertiary); font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Offline banner */
.fa-offline {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: var(--field-status-warn-bg); color: var(--field-status-warn);
  border-bottom: 1px solid #00000010;
}
.fa-offline .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.6s infinite; }
@keyframes blink { 0%,50% {opacity:1;} 51%,100% {opacity:0.3;} }

/* Tab bar (bottom nav) */
.fa-tabbar {
  display: flex; align-items: stretch; height: 64px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.fa-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-tertiary); padding: 0;
}
.fa-tab svg { stroke: currentColor; }
.fa-tab.on { color: var(--ea-green-700); }
[data-theme="dark"] .fa-tab.on, .fa-screen[data-theme="dark"] .fa-tab.on { color: var(--ea-green-400); }
.fa-tab:active { background: var(--bg-subtle); }

/* Section heads inside a screen */
.fa-section-head {
  padding: 18px var(--field-screen-pad) 8px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.fa-section-head h2 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.fa-section-head .meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary);
}

/* List card group */
.fa-list {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.fa-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: var(--field-row-pad-y) var(--field-row-pad-x);
  min-height: var(--touch-comfy);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.fa-list-row:last-child { border-bottom: none; }
.fa-list-row:active { background: var(--bg-subtle); }

/* Status chip */
.fa-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
}
.fa-status.ok    { background: var(--field-status-ok-bg);   color: var(--field-status-ok); }
.fa-status.warn  { background: var(--field-status-warn-bg); color: var(--field-status-warn); }
.fa-status.fail  { background: var(--field-status-fail-bg); color: var(--field-status-fail); }
.fa-status.na    { background: var(--field-status-na-bg);   color: var(--field-status-na); }
.fa-status.todo  { background: var(--field-status-todo-bg); color: var(--field-status-todo); }

/* Big buttons */
.fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--touch-comfy); padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: -0.005em; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.fa-btn-primary { background: var(--ea-green-600); color: #fff; }
.fa-btn-primary:active { background: var(--ea-green-700); transform: scale(0.98); }
.fa-btn-secondary { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-default); }
.fa-btn-secondary:active { background: var(--bg-subtle); }
.fa-btn-danger { background: var(--field-status-fail); color: #fff; }
.fa-btn-large { height: var(--touch-large); font-size: 17px; padding: 0 28px; }
.fa-btn-block { width: 100%; }

/* Form controls */
.fa-field { padding: 12px var(--field-screen-pad); display: flex; flex-direction: column; gap: 6px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.fa-field label { font-size: 12px; font-weight: 700; color: var(--fg-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }
.fa-input, .fa-select, .fa-textarea {
  width: 100%; min-height: var(--touch-comfy);
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--field-border);
  background: var(--bg-surface);
  color: var(--field-fg-primary);
  font-family: var(--font-body); font-size: 16px; /* iOS no-zoom */
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fa-input:focus, .fa-select:focus, .fa-textarea:focus {
  border-color: var(--ea-green-600);
  box-shadow: var(--ring-brand);
}
.fa-textarea { min-height: 96px; resize: vertical; }

/* Pass/Fail/N/A segmented control */
.fa-pfn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fa-pfn-btn {
  height: var(--touch-comfy); border-radius: 10px;
  background: var(--bg-subtle); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fa-pfn-btn.pass.on { background: var(--field-status-ok-bg);   color: var(--field-status-ok);   border-color: var(--field-status-ok); }
.fa-pfn-btn.fail.on { background: var(--field-status-fail-bg); color: var(--field-status-fail); border-color: var(--field-status-fail); }
.fa-pfn-btn.na.on   { background: var(--field-status-na-bg);   color: var(--field-status-na);   border-color: var(--field-status-na); }