/* ============================================================
   css/owner-view.css -- the owner view (js/owner-view.js).
   One page for a plant owner: what the plants made, what that
   saved, one plain status per site, open issues in plain words,
   the next visit, monthly reports. Used by the Dashboard's Owner
   tab (index.html) and by the standalone pages/owner.html (phone,
   offline, share links).

   Colours are --ow-* tokens declared here for both themes, so the
   page reads the same inside the console and on its own. Type and
   radii read the shared --type-* / --r-* tokens (css/glass.css).
   ============================================================ */

:root {
  --ow-bg: #F4F7F7;
  --ow-card: #FFFFFF;
  --ow-ink: #25343F;
  --ow-soft: #5B6B74;
  --ow-line: #E3EAEB;
  --ow-brand: #0F6A71;
  --ow-brand-soft: #E4F1F1;
  --ow-ok: #2F9E6E;
  --ow-ok-soft: #E4F5EC;
  --ow-warn: #B7790B;
  --ow-warn-soft: #FBF1DE;
  --ow-off: #6B7780;
  --ow-off-soft: #EDF0F2;
  --ow-bar: #0F6A71;
  --ow-bar-2: #FA891A;
}
:root[data-theme="dark"] {
  --ow-bg: #0E1B1F;
  --ow-card: #18272C;
  --ow-ink: #E7EFF0;
  --ow-soft: #A9B8BD;
  --ow-line: #2A3D43;
  --ow-brand: #69C8C2;
  --ow-brand-soft: rgba(105, 200, 194, .14);
  --ow-ok: #5CC596;
  --ow-ok-soft: rgba(92, 197, 150, .14);
  --ow-warn: #E8B34A;
  --ow-warn-soft: rgba(232, 179, 74, .14);
  --ow-off: #A9B8BD;
  --ow-off-soft: rgba(169, 184, 189, .14);
  --ow-bar: #69C8C2;
  --ow-bar-2: #FA9A3A;
}

.ow { color: var(--ow-ink); max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
.ow *, .ow *::before, .ow *::after { box-sizing: border-box; }
.ow p, .ow h1, .ow h2, .ow h3 { margin: 0; }

/* ---------- head ---------- */
.ow-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ow-titles { flex: 1 1 240px; min-width: 0; }
.ow-title { font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-lh); }
.ow-sub { margin-top: 4px; color: var(--ow-soft); font-size: var(--type-caption-size); line-height: 1.45; }
.ow-sync { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ow-soft); font-size: var(--type-caption-size); }
.ow-sync.is-stale { color: var(--ow-warn); }
.ow-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ow-line); border-radius: var(--r-chip); background: var(--ow-card); color: var(--ow-ink); font: inherit; font-size: var(--type-button-size); font-weight: var(--type-button-weight); text-decoration: none; cursor: pointer; }
.ow-btn:hover { border-color: var(--ow-brand); }
.ow-btn:focus-visible, .ow-seg button:focus-visible, .ow-select:focus-visible { outline: 2px solid var(--ow-brand); outline-offset: 2px; }
.ow-btn.is-primary { background: var(--ow-brand); border-color: var(--ow-brand); color: var(--ow-card); }
.ow-seg { display: inline-flex; padding: 3px; border: 1px solid var(--ow-line); border-radius: var(--r-chip); background: var(--ow-card); }
.ow-seg button { min-height: 34px; min-width: 40px; padding: 4px 10px; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--ow-soft); font: inherit; font-size: var(--type-chip-size); font-weight: var(--type-chip-weight); cursor: pointer; }
.ow-seg button[aria-pressed="true"] { background: var(--ow-brand-soft); color: var(--ow-brand); }
.ow-select { min-height: 40px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--ow-line); border-radius: var(--r-ctl); background: var(--ow-card); color: var(--ow-ink); font: inherit; font-size: var(--type-body-size); }

/* ---------- headline numbers ---------- */
.ow-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ow-kpi { padding: 14px 16px; border: 1px solid var(--ow-line); border-radius: var(--r-card); background: var(--ow-card); min-width: 0; }
.ow-kpi-label { color: var(--ow-soft); font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.ow-kpi-value { margin-top: 6px; font-size: var(--type-kpi-number-size); font-weight: var(--type-kpi-number-weight); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ow-kpi-value small { margin-left: 4px; color: var(--ow-soft); font-size: var(--type-kpi-unit-size); font-weight: var(--type-kpi-unit-weight); }
.ow-kpi-rows { margin-top: 8px; display: grid; gap: 2px; color: var(--ow-soft); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; }
.ow-kpi-rows b { color: var(--ow-ink); font-weight: 600; }

/* ---------- status strip ---------- */
.ow-status { display: grid; gap: 8px; margin-bottom: 20px; }
.ow-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--ow-line); border-radius: var(--r-card); background: var(--ow-card); }
.ow-status-name { flex: 1 1 200px; min-width: 0; font-weight: 600; font-size: var(--type-body-size); }
.ow-status-time { color: var(--ow-soft); font-size: var(--type-caption-size); }
.ow-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-chip); font-size: var(--type-chip-size); font-weight: var(--type-chip-weight); white-space: nowrap; }
.ow-pill::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-chip); background: currentColor; }
.ow-pill.is-normal { background: var(--ow-ok-soft); color: var(--ow-ok); }
.ow-pill.is-attention { background: var(--ow-warn-soft); color: var(--ow-warn); }
.ow-pill.is-offline { background: var(--ow-off-soft); color: var(--ow-off); }

/* ---------- section heads ---------- */
.ow-h2 { margin: 4px 0 10px; color: var(--ow-soft); font-size: var(--type-section-head-size); font-weight: var(--type-section-head-weight); letter-spacing: var(--type-section-head-ls); text-transform: uppercase; }

/* ---------- site cards ---------- */
.ow-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ow-site { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--ow-line); border-radius: var(--r-card); background: var(--ow-card); min-width: 0; }
.ow-site-top { display: flex; align-items: flex-start; gap: 10px; }
.ow-site-name { flex: 1; min-width: 0; font-size: var(--type-card-title-size); font-weight: var(--type-card-title-weight); line-height: var(--type-card-title-lh); }
.ow-site-meta { margin-top: 2px; color: var(--ow-soft); font-size: var(--type-caption-size); }
.ow-meter-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--type-body-size); font-variant-numeric: tabular-nums; }
.ow-meter-head b { font-weight: 700; }
.ow-meter { position: relative; height: 10px; margin-top: 6px; border-radius: var(--r-chip); background: var(--ow-off-soft); overflow: hidden; }
.ow-meter i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-chip); background: var(--ow-bar); }
.ow-note { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--ow-warn-soft); color: var(--ow-ink); font-size: var(--type-caption-size); line-height: 1.45; }
.ow-note.is-calm { background: var(--ow-brand-soft); }
.ow-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ow-fact { padding: 10px; border-radius: var(--r-ctl); background: var(--ow-bg); min-width: 0; }
.ow-fact-label { color: var(--ow-soft); font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.ow-fact-value { margin-top: 4px; font-size: var(--type-card-title-size); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ow-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ow-list li { padding: 10px 12px; border: 1px solid var(--ow-line); border-radius: var(--r-ctl); font-size: var(--type-body-size); line-height: 1.4; }
.ow-list .ow-who { display: block; margin-top: 2px; color: var(--ow-soft); font-size: var(--type-caption-size); }
.ow-empty { color: var(--ow-soft); font-size: var(--type-body-size); }
.ow-sub-h { margin-bottom: 6px; font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--ow-soft); }

/* ---------- chart ---------- */
.ow-panel { padding: 16px; border: 1px solid var(--ow-line); border-radius: var(--r-card); background: var(--ow-card); margin-bottom: 20px; }
.ow-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.ow-panel-head .ow-h2 { margin: 0; flex: 1 1 auto; }
.ow-chart svg { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.ow-chart .owc-bar { fill: var(--ow-bar); }
.ow-chart .owc-bar.is-now { fill: var(--ow-bar-2); }
.ow-chart .owc-tick { fill: var(--ow-soft); font-size: var(--type-axis-tick-size); }
.ow-chart .owc-val { fill: var(--ow-ink); font-size: var(--type-axis-tick-size); font-weight: 600; }
.ow-chart .owc-grid { stroke: var(--ow-line); stroke-width: 1; }
.ow-chart-note { margin-top: 8px; color: var(--ow-soft); font-size: var(--type-caption-size); }

/* ---------- reports ---------- */
.ow-reports { display: grid; gap: 10px; }
.ow-report-site { font-weight: 600; font-size: var(--type-body-size); margin-bottom: 6px; }
.ow-report-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- share ---------- */
.ow-share { display: grid; gap: 10px; }
.ow-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-share-url { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ow-line); border-radius: var(--r-ctl); background: var(--ow-bg); color: var(--ow-ink); font: inherit; font-size: var(--type-caption-size); }
.ow-share-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ow-share-list li span { flex: 1 1 200px; }

.ow-foot { margin-top: 8px; color: var(--ow-soft); font-size: var(--type-caption-size); line-height: 1.5; }
.ow-skel { min-height: 96px; border-radius: var(--r-card); background: var(--ow-off-soft); }

@media (max-width: 900px) {
  .ow-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-sites { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .ow-kpis { gap: 8px; }
  .ow-kpi { padding: 12px; }
  .ow-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .ow-tools, .ow-share { display: none; }
}

/* Share box, partner: which sites go in this link (js/owner-view.js shareSites) */
.ow-share-sites { border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.ow-share-sites legend { padding: 0; }
.ow-share-full { flex-basis: 100%; }
.ow-share-site { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ow-share-site input { accent-color: var(--ow-brand); width: 18px; height: 18px; margin: 0; }