/* =========================================================
   Aqua Glass — design layer (loaded after styles.css).
   Scoped to #appShell so the login screen keeps its own look.
   ========================================================= */

#appShell {
  /* Light "frosted aqua": cool near-white surfaces, deep ink text, one teal accent. */
  color-scheme: light;
  --abyss: #eef4f7;
  --deep: #e6f0f4;
  --shallows: #d3ebf2;
  --panel-rgb: 255, 255, 255;
  --ink-rgb: 11, 37, 48;
  --overlay-rgb: 11, 37, 48;      /* subtle tints/overlays are ink at low alpha on light */
  --accent-rgb: 8, 145, 178;
  --grow-rgb: 13, 148, 136;
  --watch-rgb: 217, 119, 6;
  --act-rgb: 225, 29, 72;
  --ai-rgb: 124, 58, 237;
  --mist-rgb: 74, 104, 115;
  --glass: rgba(var(--panel-rgb), .74);
  --glass-strong: rgba(var(--panel-rgb), .9);
  --glass-line: rgba(var(--ink-rgb), .1);
  --glass-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 12px 32px -16px rgba(var(--ink-rgb), .18);
  --biolume: #0e7490;              /* accent for text, links, primary actions (5.4:1 on white) */
  --foam: #0b2530;                 /* primary text */
  --mist: #4a6873;                 /* secondary text (5.6:1) */
  --mist-2: #36535d;
  --grow: #0f766e;
  --watch: #b45309;
  --act: #be123c;
  --ai: #6d28d9;
  --font-ui: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Remap legacy tokens so untouched screens inherit the glass look. */
  --ink: var(--foam);
  --muted: var(--mist);
  --line: var(--glass-line);
  --panel: var(--glass);
  --soft: rgba(var(--overlay-rgb), .04);
  --surface: rgba(var(--overlay-rgb), .06);
  --page: var(--abyss);
  --success: var(--grow);
  --success-soft: rgba(var(--grow-rgb), .15);
  --warning: var(--watch);
  --danger: var(--act);
  --font-body: var(--font-ui);

  font-family: var(--font-ui);
  color: var(--foam);
  min-height: 100vh;
  background:
    linear-gradient(rgba(var(--accent-rgb), .045) 1px, transparent 1px) 0 0 / 32px 32px fixed,
    linear-gradient(90deg, rgba(var(--accent-rgb), .045) 1px, transparent 1px) 0 0 / 32px 32px fixed,
    radial-gradient(40% 30% at 85% 5%, rgba(var(--accent-rgb), .14), transparent 70%) fixed,
    radial-gradient(120% 90% at 15% 0%, var(--shallows) 0%, var(--deep) 45%, var(--abyss) 100%) fixed;
}

/* Slow caustic light drift */
#appShell::before {
  content: "";
  position: fixed;
  width: 60vw;
  height: 50vh;
  right: -15vw;
  top: -15vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .10), transparent 65%);
  animation: aq-drift 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes aq-drift { 50% { transform: translate(-4vw, 3vh); } }

/* ---------- Legacy reskin ---------- */
#appShell .sidebar {
  background: rgba(var(--panel-rgb), .82);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--glass-line);
  color: var(--foam);
}
#appShell .panel,
#appShell .kpi-card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  color: var(--foam);
}
#appShell .table-wrap { background: rgba(var(--panel-rgb), .6); border: 1px solid var(--glass-line); color: var(--foam); }
#appShell input,
#appShell select,
#appShell textarea {
  background: #fff;
  color: var(--foam);
  border: 1px solid rgba(var(--ink-rgb), .16);
}
#appShell th { color: var(--mist); }
#appShell .primary-button { background: var(--biolume); color: #fff; box-shadow: 0 0 18px rgba(var(--accent-rgb), .35); }
#appShell .secondary-button { background: transparent; color: var(--biolume); border: 1px solid rgba(var(--accent-rgb), .4); }

/* The new home replaces the legacy KPI row and status grid. */
#appShell #overviewView > #kpiGrid,
#appShell #overviewView .overview-grid-row > .panel:has(#pondStatusGrid) { display: none; }
#appShell #overviewView .overview-grid-row:has(#pondStatusGrid) { grid-template-columns: 1fr; }

/* Sidebar on the light theme: ink text, accent for the current page. */
#appShell .nav-link { color: var(--mist-2); }
#appShell .nav-link:hover { background: rgba(var(--accent-rgb), .07); color: var(--foam); }
#appShell .nav-link.active { background: rgba(var(--accent-rgb), .12); color: var(--biolume); }
#appShell .rail-brand-name { color: var(--foam); }
#appShell .rail-brand-sub, #appShell .rail-user-role, #appShell .rail-farm-arrow { color: var(--mist); }
#appShell .rail-brand .drawer-close { color: var(--mist); }
#appShell .rail-farm-switcher { background: rgba(var(--overlay-rgb), .04); border: 1px solid var(--glass-line); }
#appShell .rail-farm-switcher:hover { background: rgba(var(--accent-rgb), .07); }
#appShell .rail-farm-name, #appShell .rail-user-name { color: var(--foam); }
#appShell .rail-farm-dot { background: var(--biolume); }
#appShell .rail-farm-dropdown { background: #fff; border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
#appShell .rail-farm-option { color: var(--mist-2); }
#appShell .rail-farm-option:hover { background: rgba(var(--accent-rgb), .07); color: var(--foam); }
#appShell .rail-farm-option.active { color: var(--biolume); }
#appShell .rail-divider { background: var(--glass-line); }
#appShell .rail-user { border-top-color: var(--glass-line); }
#appShell .rail-icon-box { color: var(--biolume); background: rgba(var(--accent-rgb), .1); }

/* Phone header: frosted light bar instead of the dark brand bar. */
#appShell .mobile-header { background: rgba(var(--panel-rgb), .88); backdrop-filter: blur(14px); color: var(--foam); border-bottom: 1px solid var(--glass-line); }
#appShell .mobile-header .eyebrow { color: var(--biolume); }
#appShell .mobile-title-block strong, #appShell #mobilePageTitle { color: var(--foam); }
#appShell .mobile-title-block span, #appShell #mobileUserBadge { color: var(--mist); }
#appShell .mobile-header .subtle, #appShell .mobile-header p { color: var(--mist); }
#appShell .mobile-header .menu-toggle span { background: var(--foam); }
#appShell .bottom-nav { background: rgba(var(--panel-rgb), .92); backdrop-filter: blur(14px); border-top-color: var(--glass-line); }

/* ---------- Primitives ---------- */
.aq-glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
}
.aq-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.aq-sub { font-size: 11px; color: var(--mist); margin: 4px 0 0; }
.aq-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.aq-glow { color: var(--biolume); }
.aq-up { color: var(--grow); }
.aq-watch-text { color: var(--watch); }
.aq-act-text { color: var(--act); }
.aq-ai-mark { color: var(--ai); margin-right: 4px; }

.aq-btn {
  font: 600 12px var(--font-ui);
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  color: var(--mist-2);
}
.aq-btn-primary { background: var(--biolume); color: #fff; box-shadow: 0 0 18px rgba(var(--accent-rgb), .45); }
.aq-btn-secondary { border-color: rgba(var(--accent-rgb), .4); color: var(--biolume); }
.aq-btn-quiet:hover { color: var(--foam); }
.aq-btn:focus-visible, .aq-dot:focus-visible, .aq-askbar:focus-visible,
.aq-tabs button:focus-visible, .aq-seg button:focus-visible { outline: 2px solid var(--biolume); outline-offset: 2px; }

.aq-orb {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9fbff, #29c7de 55%, #0a5d6e);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .7);
  display: inline-block;
}

.aq-skeleton { min-height: 64px; overflow: hidden; }
.aq-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--overlay-rgb), .06), transparent);
  animation: aq-shimmer 1.4s infinite;
}
.aq-skeleton-line { height: 12px; min-height: 0; margin: 6px 0; border-radius: 6px; background: rgba(var(--overlay-rgb), .06); position: relative; }
.aq-skeleton-line.short { width: 60%; }
@keyframes aq-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Home ---------- */
.aq-home { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin: 8px 0 20px; }
.aq-greet h2 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.aq-greet p { color: var(--mist-2); margin: 4px 0 0; }
.aq-askbar {
  width: 100%;
  margin: 14px 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font: 13px var(--font-ui);
  color: var(--mist-2);
  cursor: text;
  text-align: left;
}
.aq-askbar kbd { margin-left: auto; font-size: 10px; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 6px; padding: 2px 6px; color: var(--mist); background: none; }
.aq-card { display: flex; gap: 10px; padding: 12px; margin-top: 8px; }
.aq-card-bar { width: 3px; border-radius: 3px; align-self: stretch; background: var(--grow); }
.aq-sev-act .aq-card-bar { background: var(--act); }
.aq-sev-watch .aq-card-bar { background: var(--watch); }
.aq-card-main { flex: 1; min-width: 0; }
.aq-card h3 { font-size: 13px; margin: 0; font-weight: 600; }
.aq-card p { margin: 3px 0 0; color: var(--mist-2); font-size: 12px; }
.aq-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aq-why { margin: 8px 0 0; padding-left: 16px; font-size: 11px; color: var(--mist); }
.aq-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aq-kpi { padding: 10px 12px; }
.aq-kpi-value { font-size: 24px; margin-top: 2px; }
.aq-delta { font-size: 10.5px; font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }
.aq-spark { width: 100%; height: 26px; margin-top: 6px; display: block; }
.aq-spark-line { fill: none; stroke: var(--biolume); stroke-width: 1.5; }
.aq-spark-fill { fill: rgba(var(--accent-rgb), .14); }

/* ---------- Pond map ---------- */
.aq-map-panel { margin-top: 8px; padding: 12px; }
.aq-map-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.aq-seg { display: flex; gap: 2px; background: rgba(var(--overlay-rgb), .04); border-radius: 99px; padding: 2px; }
.aq-seg button { font: 600 11px var(--font-ui); color: var(--mist); background: none; border: 0; border-radius: 99px; padding: 4px 9px; cursor: pointer; }
.aq-seg button.on, .aq-seg button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .14); color: var(--biolume); }
.aq-map { display: grid; gap: 8px; margin-top: 10px; }
.aq-zone { display: flex; gap: 10px; align-items: center; }
.aq-zone-label { width: 16px; font-size: 11px; color: var(--mist); font-weight: 600; }
.aq-zone-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.aq-dot { width: 16px; height: 16px; min-height: 0; min-width: 0; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; opacity: var(--dot-alpha, 1); display: inline-block; }
.aq-dot-grow { background: var(--grow); box-shadow: 0 0 8px rgba(var(--grow-rgb), .6); }
.aq-dot-watch { background: var(--watch); box-shadow: 0 0 8px rgba(var(--watch-rgb), .5); }
.aq-dot-act { background: var(--act); animation: aq-pulse 1.8s infinite; }
@keyframes aq-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--act-rgb), .7); } 50% { box-shadow: 0 0 0 7px rgba(var(--act-rgb), 0); } }
.aq-map-legend { display: flex; gap: 12px; margin-top: 10px; font-size: 10.5px; color: var(--mist); }
.aq-map-legend .aq-dot { width: 9px; height: 9px; margin-right: 4px; vertical-align: middle; animation: none; cursor: default; }
.aq-tip { position: absolute; transform: translate(-50%, calc(-100% - 8px)); padding: 8px 10px; font-size: 11px; line-height: 1.5; pointer-events: none; white-space: nowrap; z-index: 5; background: var(--foam); color: #fff; }

/* ---------- Ask overlay ---------- */
.aq-ask-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(var(--ink-rgb), .28); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; font-family: var(--font-ui); color: var(--foam); }
.aq-ask-overlay.hidden { display: none; }
.aq-ask-panel { width: min(720px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: rgba(var(--panel-rgb), .97); }
.aq-ask-form { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--glass-line); }
.aq-ask-form input { flex: 1; background: none; border: 0; outline: 0; color: var(--foam); font: 14px var(--font-ui); }
.aq-ask-form:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 16px rgba(var(--accent-rgb), .18); border-radius: 14px 14px 0 0; }
.aq-ask-thread { overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; }
.aq-msg p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
.aq-msg-user { justify-self: end; background: rgba(var(--accent-rgb), .12); border-radius: 12px; padding: 8px 12px; max-width: 80%; }
.aq-msg-ai { color: var(--foam); }
.aq-thinking { display: flex; align-items: center; gap: 8px; color: var(--mist); }
.aq-ask-chart { height: 180px; margin-top: 8px; }

/* ---------- Pond detail ---------- */
#pondDetailView .pond-detail-main { position: relative; z-index: 1; }
.aq-pd-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.aq-pd-crumb { font-size: 11px; color: var(--mist); }
.aq-pd-title { font-size: 28px; font-weight: 600; margin: 4px 0; display: flex; align-items: center; gap: 10px; }
.aq-pd-sub { font-size: 11.5px; color: var(--mist); }
.aq-pd-actions { display: flex; gap: 8px; }
.aq-pd-read { margin-top: 12px; padding: 12px 14px; }
.aq-pd-read p { margin: 0 0 4px; font-size: 13px; line-height: 1.55; }
.aq-pd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.aq-pd-kpis-sm .aq-kpi { padding: 8px 10px; }
.aq-pd-kpis-sm .aq-kpi-value { font-size: 16px; }
.aq-tabs { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.aq-tabs button { font: 600 12px var(--font-ui); padding: 7px 13px; border-radius: 99px; color: var(--mist-2); background: none; border: 1px solid transparent; cursor: pointer; }
.aq-tabs button.on { background: rgba(var(--accent-rgb), .14); color: var(--biolume); border-color: rgba(var(--accent-rgb), .35); }
.aq-trend { padding: 12px; }
.aq-trend-canvas { height: 240px; margin-top: 8px; }
.aq-subsection + .aq-subsection { margin-top: 14px; }

/* ---------- Intelligent Search (Answer Workspace) ---------- */
.aq-search { position: relative; z-index: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
.aq-search-rail { padding: 12px; align-self: start; display: grid; gap: 6px; max-height: calc(100vh - 120px); overflow-y: auto; }
.aq-recent { text-align: left; font: 12px var(--font-ui); color: var(--mist-2); background: rgba(var(--overlay-rgb), .04); border: 1px solid var(--glass-line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.aq-recent:hover, .aq-recent:focus-visible { border-color: rgba(var(--accent-rgb), .45); color: var(--foam); outline: none; }
.aq-search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.aq-search-bar:focus-within { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.aq-search-bar textarea { flex: 1; resize: none; background: none; border: 0; outline: 0; color: var(--foam); font: 14px/1.5 var(--font-ui); min-height: 24px; padding: 2px 0; }
#appShell .aq-search-bar textarea { background: none; border: 0; }
.aq-search-status { min-height: 18px; margin: 6px 2px; }
.aq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.aq-chips button { font: 12px var(--font-ui); color: var(--mist-2); background: none; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
.aq-chips button:hover, .aq-chips button:focus-visible { color: var(--biolume); border-color: rgba(var(--accent-rgb), .6); outline: none; }
.aq-search-results { display: grid; gap: 10px; }
.aq-search-results.hidden { display: none; }
.aq-search-answer { padding: 14px 16px; }
.aq-search-answer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aq-engine { font-size: 10.5px; color: var(--mist); border: 1px solid var(--glass-line); border-radius: 99px; padding: 2px 9px; }
.aq-engine-ai { color: var(--ai); border-color: rgba(var(--ai-rgb), .45); }
.aq-notice { margin: 8px 0 0; font-size: 12px; color: var(--watch); }
.aq-search-answer-text { font-size: 15px; line-height: 1.55; margin: 8px 0 4px; }
.aq-insights { margin: 6px 0; padding-left: 18px; color: var(--mist-2); font-size: 12.5px; }
.aq-explain summary { cursor: pointer; color: var(--mist); font-size: 12px; margin-top: 6px; }
.aq-explain p { font-size: 12px; color: var(--mist-2); margin: 6px 0 0; }
.aq-search-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.aq-search-grid:has(> .hidden) { grid-template-columns: minmax(0, 1fr); }
.aq-search-table, .aq-search-chart { padding: 12px; min-width: 0; }
.aq-search-chart.hidden { display: none; }
.aq-search-table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.aq-table-scroll { overflow: auto; max-height: 420px; }
.aq-table-scroll table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12px; }
.aq-table-scroll th { position: sticky; top: 0; background: var(--surface-solid); text-align: left; }
.aq-table-scroll th button { font: 600 11.5px var(--font-ui); color: var(--mist); background: none; border: 0; padding: 6px; cursor: pointer; white-space: nowrap; }
.aq-table-scroll th button:focus-visible { outline: 2px solid var(--biolume); outline-offset: -2px; }
.aq-table-scroll td { padding: 6px; border-bottom: 1px solid rgba(var(--accent-rgb), .07); font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aq-search-chart-canvas { height: 280px; margin-top: 6px; }
.aq-followups { display: grid; gap: 6px; }

@media (max-width: 900px) {
  .aq-search { grid-template-columns: 1fr; }
  .aq-search-rail { order: 2; max-height: none; }
  .aq-search-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .aq-search-bar { flex-wrap: wrap; }
  .aq-search-bar textarea { flex-basis: 100%; }
  .aq-search-bar .aq-orb { display: none; }
}
.aq-search-answer:focus-visible { outline: 2px solid var(--biolume); outline-offset: 2px; }

/* ---------- App-wide consistency (all tabs) ---------- */
/* `overflow-x: hidden` on both html and body turns body into a scroll container and breaks the
   sticky sidebar; `clip` stops sideways overflow without creating one. */
html, body { overflow-x: clip; }
/* The workspace grid used to stretch its rows to the viewport, so the page header grew to
   200-350px on short pages and every tab's title sat at a different height. */
#appShell .workspace { align-content: start; row-gap: 20px; }
#appShell .topbar { min-height: 44px; }
#appShell .topbar h2 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; text-wrap: balance; }
#appShell .panel h3, #appShell .panel-heading h3 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
/* Section kickers repeated the heading beneath them in red (which reads as an error). */
#appShell .view-panel .eyebrow { display: none; }

/* Solid surface for sticky table headers (translucent glass let rows show through). */
#appShell { --surface-solid: #f3f8fa; --danger-soft: rgba(var(--act-rgb), .08); --brand-dark: #0e5c6e; }
#appShell table thead th,
#appShell .scroll-table thead th { background: var(--surface-solid); color: var(--mist); font-weight: 600; letter-spacing: .04em; }
#appShell table tbody tr:hover td { background: rgba(var(--accent-rgb), .04); }
#appShell .scroll-table { max-height: min(68vh, 640px); border-color: var(--glass-line); scrollbar-color: rgba(var(--accent-rgb), .3) transparent; }
#appShell .scroll-table::-webkit-scrollbar-thumb { border-color: transparent; }

/* Native controls: explicit popup colours so options stay readable on Windows/Android. */
#appShell option, #appShell optgroup { background: #fff; color: var(--foam); }
#appShell .water-colour-select { background: rgba(var(--overlay-rgb), .06); }
#appShell input::placeholder, #appShell textarea::placeholder { color: rgba(var(--mist-rgb), .75); }
#appShell input:focus-visible, #appShell select:focus-visible, #appShell textarea:focus-visible,
#appShell button:focus-visible, #appShell summary:focus-visible, #appShell a:focus-visible {
  outline: 2px solid var(--biolume); outline-offset: 2px;
}
#appShell input[readonly] { background: rgba(var(--overlay-rgb), .03); color: var(--mist-2); }
#appShell button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Accordions (Entries, Management): flat glass rows instead of white or glossy gradient bars. */
#appShell .lifecycle-section > summary, #appShell .management-accordion > summary, #appShell .management-subsection > summary {
  background: rgba(var(--overlay-rgb), .04); color: var(--foam); border-radius: 10px; transition: background-color .18s ease-out;
}
#appShell .lifecycle-section > summary:hover, #appShell .management-accordion > summary:hover, #appShell .management-subsection > summary:hover { background: rgba(var(--accent-rgb), .07); }
#appShell .lifecycle-section[open] > summary, #appShell .management-accordion[open] > summary { background: rgba(var(--accent-rgb), .08); }
/* Management: one column of sections; each section is a single surface, not a box inside a box. */
#appShell .admin-management-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
#appShell .management-accordion.panel { padding: 0; }
#appShell .management-accordion > summary { background: none; border-radius: 12px; padding: 16px 20px; }
#appShell .management-accordion[open] > summary { border-bottom: 1px solid var(--glass-line); border-radius: 12px 12px 0 0; }
#appShell .management-accordion > .management-body { padding: 16px 20px 20px; }
/* Nested form groups read as headings, not as bars. */
#appShell .entry-box:not(.management-subsection):not(.entry-register-accordion) > summary { background: none; color: var(--foam); }
#appShell .lifecycle-section, #appShell .management-subsection, #appShell .entry-register-accordion { background: transparent; border-color: var(--glass-line); }

/* Buttons share one vocabulary across tabs. */
#appShell .secondary-button, #appShell .primary-button, #appShell .danger-button { border-radius: 10px; min-height: 36px; transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out; }
#appShell .secondary-button:hover { background: rgba(var(--accent-rgb), .08); }
#appShell .danger-button { background: var(--danger-soft); color: var(--act); border-color: rgba(var(--act-rgb), .35); }

/* Home alert cards: a severity dot instead of a coloured side stripe. */
.aq-card-bar { width: 8px; height: 8px; border-radius: 50%; align-self: flex-start; margin-top: 5px; flex: none; }

/* Sidebar footer: keep the sign-out button inside the rail. */
#appShell .rail-user-info { min-width: 0; }
#appShell .rail-user-name, #appShell .rail-user-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#appShell .rail-logout { flex: none; white-space: nowrap; min-height: 32px; padding: 6px 10px; font-size: 12px; }

/* Charts never push a grid column wider than the screen; "small" charts stay small. */
#appShell .overview-grid-row > *, #appShell .chart-wrap { min-width: 0; }
#appShell .chart-wrap canvas { max-width: 100%; }
#appShell .chart-wrap.chart-wrap-sm { height: 160px; }
/* Empty tables explain themselves instead of showing a bare header. */
#appShell td.table-empty { padding: 22px 16px; text-align: left; color: var(--mist); font-family: var(--font-ui); white-space: normal; }
#appShell .mobile-logout { margin-left: auto; width: auto; flex: none; }

#appShell input[type="checkbox"], #appShell input[type="radio"] { accent-color: var(--biolume); }
#appShell .metric-tabs, #appShell .range-tabs { flex-wrap: wrap; }
#appShell .metric-tab, #appShell .range-tab { background: #fff; border: 1px solid var(--glass-line); color: var(--mist-2); }
#appShell .metric-tab.active, #appShell .range-tab.active { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .4); color: var(--biolume); }
@media (pointer: coarse) {
  #appShell input[type="checkbox"], #appShell input[type="radio"] { width: 22px; height: 22px; }
}

/* Pond Detail list: farm groups and a filter once the list gets long. */
#appShell .pd-filter { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font: 13px var(--font-ui); }
#appShell .pd-farm-head { margin: 12px 4px 4px; font-size: 11px; font-weight: 600; color: var(--mist); }
#appShell .pd-list .pd-farm-head:first-child { margin-top: 2px; }

/* Farm picker in the top bar on every tab (it filters every tab); the sidebar switcher stays in sync. */
#appShell .topbar-farm { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--mist); }
#appShell .topbar-farm select { min-width: 170px; min-height: 36px; padding: 6px 10px; border-radius: 10px; font: 600 13px var(--font-ui); }
/* The switcher clipped its own dropdown (overflow: hidden), so the farm list never appeared. */
#appShell .rail-farm-switcher { overflow: visible; z-index: 20; }
#appShell .rail-farm-name { min-width: 0; }
/* Phones/tablets: Refresh is a compact action, not a full-width bar above every tab. */
@media (max-width: 900px) {
  #appShell .topbar, #appShell .topbar .toolbar { flex-direction: row; align-items: center; justify-content: flex-end; min-height: 0; }
  #appShell .topbar .toolbar { width: auto; flex-wrap: nowrap; }
  #appShell .topbar-farm select { min-width: 0; max-width: 58vw; }
  #appShell #refreshButton { width: auto; min-height: 36px; padding: 6px 14px; }
}

/* Overview: partial harvests. Plain stat row (not more cards), then the per-pond table. */
#appShell .partial-harvest-panel .subtle { margin-top: 2px; }
#appShell .ph-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 14px; }
#appShell .ph-stat dt { font-size: 11px; color: var(--mist); margin: 0 0 2px; }
#appShell .ph-stat dd { margin: 0; font: 600 20px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--foam); }
#appShell .ph-stat dd small { display: block; font: 11px var(--font-ui); color: var(--mist); margin-top: 2px; }
#appShell .ph-stats:empty { display: none; }
#appShell .ph-table { max-height: 320px; }
#appShell .ph-table table { min-width: 640px; }
#appShell .ph-table th { white-space: normal; line-height: 1.25; }
#appShell .ph-table td strong { color: var(--grow); font-weight: 600; }
#appShell .ph-table .link-button { font: inherit; padding: 0; }

.aq-kpi-link { margin-top: 6px; padding: 2px 0; font: 600 11px var(--font-ui); color: var(--biolume); background: none; border: 0; cursor: pointer; }
.aq-kpi-link:hover { text-decoration: underline; }
#appShell #overviewView > .partial-harvest-panel { margin-bottom: 16px; }
#appShell #harvestPlanningView > .partial-harvest-panel { margin: 16px 0; }

/* Overview right column: partial-harvest summary under the pond map. */
.aq-ph-mini { margin-top: 8px; padding: 12px 14px; }
.aq-ph-mini.hidden { display: none; }
.aq-ph-head { display: flex; justify-content: space-between; align-items: center; }
.aq-ph-head .aq-kpi-link { margin: 0; }
.aq-ph-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.aq-ph-nums .aq-num { display: block; font-size: 17px; color: var(--foam); }
.aq-ph-nums small { font-size: 10.5px; color: var(--mist); }
.aq-ph-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(var(--overlay-rgb), .07); }
.aq-ph-bar .aq-ph-standing { background: var(--biolume); }
.aq-ph-bar .aq-ph-harvested { background: rgba(var(--grow-rgb), .55); }
.aq-ph-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 11px; color: var(--mist); }
.aq-ph-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.aq-ph-legend i.aq-ph-standing { background: var(--biolume); }
.aq-ph-legend i.aq-ph-harvested { background: rgba(var(--grow-rgb), .55); }
.aq-ph-legend strong { margin-left: auto; color: var(--grow); font-weight: 600; font-size: 12px; }

/* ---------- Expenses & Profit ---------- */
#financeView { position: relative; z-index: 1; }
.fin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.fin-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.fin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.fin-kpis .aq-kpi-value { font-size: 22px; }
.fin-kpis .aq-sub { line-height: 1.45; }
.fin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.fin-panel { padding: 14px 16px; min-width: 0; }
.fin-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.fin-chart { height: 340px; }
.fin-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fin-cats summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; grid-template-areas: "name amt share" "bar bar bar"; gap: 4px 10px; align-items: center; padding: 7px 6px; border-radius: 8px; cursor: pointer; list-style: none; }
.fin-cats summary::-webkit-details-marker { display: none; }
.fin-cats summary:hover { background: rgba(var(--accent-rgb), .06); }
.fin-cat-name { grid-area: name; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fin-cat-name i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fin-cats summary .aq-num { grid-area: amt; font-size: 13px; }
.fin-share { grid-area: share; text-align: right; font-size: 12px; color: var(--mist); }
.fin-bar { grid-area: bar; height: 5px; border-radius: 99px; background: rgba(var(--overlay-rgb), .06); overflow: hidden; }
.fin-bar span { display: block; height: 100%; border-radius: 99px; }
.fin-items { margin: 2px 0 8px 23px; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--mist-2); }
.fin-items li { display: flex; justify-content: space-between; gap: 10px; }
.fin-cat-extra { display: flex; justify-content: space-between; gap: 10px; padding: 7px 6px; font-size: 12.5px; color: var(--mist-2); border-top: 1px solid var(--glass-line); }
.fin-proj { margin-top: 12px; }
.fin-proj-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; }
.fin-inputs { display: grid; gap: 12px; align-content: start; }
.fin-inputs label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mist-2); }
.fin-inputs input { min-height: 38px; padding: 6px 10px; border-radius: 10px; font: 600 15px 'IBM Plex Mono', ui-monospace, monospace; }
.fin-inputs small { font-weight: 400; color: var(--mist); font-size: 11px; }
.fin-lines { margin: 0; display: grid; }
.fin-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--glass-line); }
.fin-lines dt { font-size: 13px; color: var(--foam); }
.fin-lines dt small { display: block; font-size: 11px; color: var(--mist); margin-top: 2px; }
.fin-lines dd { margin: 0; font: 600 15px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-sum dt { font-weight: 600; }
.fin-profit { border-bottom: 0 !important; }
.fin-profit dt, .fin-profit dd { font-size: 18px; color: inherit; }
.fin-sens { width: 100%; min-width: 0 !important; margin-top: 14px; border-collapse: collapse; font-size: 12px; }
.fin-sens caption { text-align: left; font-size: 11px; color: var(--mist); padding-bottom: 6px; }
.fin-sens th, .fin-sens td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--glass-line); font-family: 'IBM Plex Mono', monospace; }
.fin-sens th:first-child, .fin-sens td:first-child { text-align: left; font-family: var(--font-ui); color: var(--mist); }
#appShell .fin-sens thead th { background: none; position: static; }
@media (max-width: 1100px) {
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-grid, .fin-proj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .fin-kpis { grid-template-columns: minmax(0, 1fr); }
  .fin-chart { height: 280px; }
  .fin-sens { font-size: 11px; }
}

/* ---------- Harvest plan (partial now, balance at 12 count) ---------- */
.fin-modes { display: inline-flex; margin-bottom: 12px; }
.fin-modes button { padding: 7px 14px; font-size: 12px; }
.hp-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; }
.hp-hero h3 { margin: 4px 0 2px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.hp-hero-num { display: grid; justify-items: end; text-align: right; gap: 2px; }
.hp-hero-num strong { font-size: 34px; line-height: 1.1; }
.hp-changed { font-size: 11px; font-weight: 600; color: var(--watch); background: rgba(var(--watch-rgb), .1); border-radius: 99px; padding: 2px 9px; }
.hp-timeline { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.hp-timeline li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 40px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.hp-timeline li:first-child { border-radius: 14px 0 0 14px; }
.hp-timeline li:last-child { border-radius: 0 14px 14px 0; }
.hp-timeline li + li { border-left: 0; }
.hp-timeline li::before { counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 13px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-ui); color: #fff; background: var(--biolume); }
.hp-timeline strong { font-size: 14px; font-weight: 600; }
.hp-timeline span:last-child { font-size: 11.5px; color: var(--mist); }
.hp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.hp-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hp-compare { margin-bottom: 12px; }
.hp-compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12.5px; }
.hp-compare th, .hp-compare td { padding: 7px 10px; border-bottom: 1px solid var(--glass-line); text-align: right; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.hp-compare th[scope="row"] { text-align: left; font-family: var(--font-ui); font-weight: 500; color: var(--mist-2); }
#appShell .hp-compare thead th { position: static; background: none; font-family: var(--font-ui); font-size: 11.5px; line-height: 1.3; vertical-align: bottom; color: var(--mist-2); }
#appShell .hp-compare thead th.hp-best { color: var(--biolume); }
.hp-compare td:last-child, .hp-compare th.hp-best { background: rgba(var(--accent-rgb), .05); }
.hp-sum th, .hp-sum td { font-weight: 600; color: var(--foam) !important; }
.hp-profit th, .hp-profit td { font-size: 14px; border-bottom: 0; }
.hp-controls .fin-inputs { grid-template-columns: 1fr 1fr; }
.hp-controls select { min-height: 38px; border-radius: 10px; padding: 6px 10px; font: 600 14px var(--font-ui); }
.hp-sens td { white-space: nowrap; }
.hp-table { max-height: 300px; }
.hp-table table { min-width: 0 !important; font-size: 12px; }
.hp-risks ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--mist-2); max-width: 110ch; }
.hp-risks strong { color: var(--foam); font-weight: 600; }
@media (max-width: 1100px) {
  .hp-grid, .hp-grid-even { grid-template-columns: minmax(0, 1fr); }
  .hp-timeline { grid-template-columns: minmax(0, 1fr); }
  .hp-timeline li, .hp-timeline li:first-child, .hp-timeline li:last-child { border-radius: 0; border-left: 1px solid var(--glass-line); }
  .hp-timeline li:first-child { border-radius: 14px 14px 0 0; }
  .hp-timeline li:last-child { border-radius: 0 0 14px 14px; }
  .hp-timeline li + li { border-top: 0; }
  .hp-hero-num { justify-items: start; text-align: left; }
}
@media (max-width: 520px) { .hp-controls .fin-inputs { grid-template-columns: 1fr; } }
/* ---------- Brand: Seafood Joy logo, by Nishanth Reddy ---------- */
.brand-lockup { display: grid; justify-items: start; gap: 6px; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-by { margin: 0; font: 500 12px var(--font-ui, 'Sora', system-ui, sans-serif); letter-spacing: .02em; color: #4a6873; }
.brand-by strong {
  font-weight: 700; color: #c8102e;
  background: linear-gradient(transparent 58%, rgba(200, 16, 46, .14) 58%);
  padding: 0 2px;
}
.brand-card { margin: 0 auto 14px; justify-items: center; }
.brand-card .brand-logo { max-width: 300px; }
.brand-card .brand-by { font-size: 13px; }
/* Dark login panel: the logo sits on a white plate so its blue and crimson stay true. */
.brand-on-dark { background: #fff; border-radius: 14px; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 360px; }
.brand-on-dark .brand-by { font-size: 13px; }
.brand-rail { flex: 1; min-width: 0; padding: 2px 4px; }
.brand-rail .brand-logo { max-width: 172px; }
.brand-rail .brand-by { font-size: 10.5px; }
.brand-mobile { width: 128px; margin-bottom: 2px; }

/* ---------- Sampling photos ---------- */
.entry-photos { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.entry-photos .field-label { font-size: 12px; font-weight: 600; color: var(--mist); letter-spacing: .02em; }
.entry-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-photo-strip:empty { display: none; }
.entry-photo-thumb { position: relative; margin: 0; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  background: rgba(var(--overlay-rgb), .06); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.entry-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry-photo-thumb.is-saved::after { content: "Saved"; position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px;
  font-size: 9px; font-weight: 700; color: #fff; background: rgba(var(--ink-rgb), .6); }
.entry-photo-remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; font-size: 15px; line-height: 1; cursor: pointer; color: #fff; background: rgba(var(--ink-rgb), .68); }
.entry-photo-remove:hover, .entry-photo-remove:focus-visible { background: var(--act); }
.date-cell { white-space: nowrap; }
.photo-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 9px; min-height: 24px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); color: var(--biolume);
  font: 600 12px var(--font-ui); cursor: pointer; vertical-align: middle; }
.photo-chip:hover, .photo-chip:focus-visible { background: rgba(var(--accent-rgb), .16); }
/* Overlays are appended to <body> (outside #appShell), so tokens carry literal fallbacks. */
.photo-viewer { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 56px 16px 24px;
  background: rgba(11, 37, 48, .82); backdrop-filter: blur(6px); overflow-y: auto; }
.photo-viewer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.photo-viewer-grid img { max-width: 90vw; max-height: 80vh; min-width: 120px; min-height: 90px; border-radius: 14px; object-fit: contain;
  background: rgba(255, 255, 255, .08); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .55); color: #e6f0f4; font: 500 13px 'Sora', system-ui, sans-serif; }
.photo-viewer-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.photo-viewer-close:hover, .photo-viewer-close:focus-visible { background: rgba(255, 255, 255, .28); }

/* ---------- App (Capacitor): offline banner, upload pill, upload list ----------
   Appended to <body> (outside #appShell), so colours are literal values of the aqua tokens. */
.sfj-offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1250; text-align: center;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; font: 600 12px 'Sora', system-ui, sans-serif; letter-spacing: .01em;
  color: #78350f; background: rgba(254, 243, 199, .96); border-bottom: 1px solid rgba(217, 119, 6, .35);
  box-shadow: 0 6px 18px -12px rgba(11, 37, 48, .35); }
.sfj-outbox-pill { position: fixed; left: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 210;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: 600 12px 'Sora', system-ui, sans-serif; color: #fff; background: #0e7490; border: 0;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .18), 0 10px 24px -10px rgba(11, 37, 48, .5); }
.sfj-outbox-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.sfj-outbox-pill.attention { background: #be123c; box-shadow: 0 0 0 3px rgba(225, 29, 72, .18), 0 10px 24px -10px rgba(11, 37, 48, .5); }
.sfj-outbox-pill:focus-visible { outline: 2px solid #0b2530; outline-offset: 2px; }
.sfj-outbox-panel { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: end center;
  padding: 16px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(11, 37, 48, .55); backdrop-filter: blur(4px); }
@media (min-width: 640px) { .sfj-outbox-panel { place-items: center; } }
.sfj-outbox-card { width: min(520px, 100%); max-height: 80vh; overflow-y: auto; padding: 18px; border-radius: 18px;
  background: #fff; color: #0b2530; font-family: 'Sora', system-ui, sans-serif; box-shadow: 0 24px 60px -20px rgba(11, 37, 48, .55); }
.sfj-outbox-card h3 { margin: 0 0 12px; font-size: 16px; }
.sfj-outbox-card > p { margin: 0 0 12px; color: #4a6873; font-size: 14px; }
.sfj-outbox-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0;
  border-top: 1px solid rgba(11, 37, 48, .1); font-size: 13px; line-height: 1.45; }
.sfj-outbox-row.needs_attention { border-left: 3px solid #be123c; padding-left: 10px; }
.sfj-outbox-what { min-width: 0; color: #36535d; }
.sfj-outbox-what strong { color: #0b2530; }
.sfj-outbox-error { margin: 6px 0 0; color: #be123c; font-weight: 600; }
.sfj-outbox-buttons, .sfj-outbox-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sfj-outbox-actions { justify-content: flex-end; padding-top: 14px; border-top: 1px solid rgba(11, 37, 48, .1); }
.sfj-outbox-card button { min-height: 36px; border-radius: 10px; padding: 0 14px; font: 600 13px 'Sora', system-ui, sans-serif; cursor: pointer; }
.sfj-outbox-card .primary-button { background: #0e7490; color: #fff; border: 0; }
.sfj-outbox-card .secondary-button { background: transparent; color: #0e7490; border: 1px solid rgba(8, 145, 178, .4); }
.sfj-outbox-card .danger-button { background: rgba(225, 29, 72, .08); color: #be123c; border: 1px solid rgba(225, 29, 72, .35); }

/* ---------- Responsive + motion ---------- */
/* Tablet / small laptop: styles.css stacks the whole sidebar above the page at 901-1180px,
   pushing the dashboard a full screen down. Keep a slimmer sidebar beside the content instead. */
@media (min-width: 901px) and (max-width: 1180px) {
  #appShell.app-shell { grid-template-columns: 196px minmax(0, 1fr); }
  #appShell .sidebar { height: 100vh; padding: 24px 14px; gap: 20px; }
}
@media (max-width: 1100px) {
  .aq-home { grid-template-columns: 1fr; }
  /* Single column: the full Partial harvests panel follows right below, so skip the summary copy. */
  .aq-ph-mini { display: none; }
}
@media (max-width: 900px) {
  .aq-home { grid-template-columns: 1fr; }
  .aq-pd-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #appShell::before, .aq-dot-act, .aq-skeleton::after { animation: none !important; }
}

/* Touch screens: pond-map dots and photo chips big enough to hit with a thumb (~30 px hit area). */
@media (pointer: coarse) {
  .aq-zone-dots { gap: 8px; }
  .aq-zone-dots .aq-dot { width: 22px; height: 22px; position: relative; }
  .aq-zone-dots .aq-dot::after { content: ""; position: absolute; inset: -4px; }
  .photo-chip { min-height: 36px; padding: 6px 12px; }
}

/* ---------------------------------------------------------------- Companies (admin landing + management) */
#appShell .co-head, #appShell .co-page-head { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
#appShell .co-page-head { justify-content: flex-start; }
#appShell .co-page-head .aq-btn { margin-left: auto; }
#appShell .co-head h2, #appShell .co-page-head h2 { margin: 0; font-size: 22px; color: var(--foam); }
#appShell .co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
#appShell .co-tile { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 16px; min-height: 132px;
  border: 1px solid var(--glass-line); border-radius: 16px; cursor: pointer; color: var(--foam); font: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
#appShell .co-tile:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .45); }
#appShell .co-tile:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .55); outline-offset: 2px; }
#appShell .co-tile-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
#appShell .co-tile-title { display: flex; flex-direction: column; min-width: 0; }
#appShell .co-name { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
#appShell .co-sub { color: var(--mist); font-size: 12.5px; }
#appShell .co-link-prompt { margin-top: auto; }
#appShell .co-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: auto; }
#appShell .co-stat { font-size: 12px; color: var(--mist); }
#appShell .co-stat strong { display: block; font-size: 17px; color: var(--foam); font-variant-numeric: tabular-nums; }
#appShell .co-stat-alert strong { color: var(--act); }
#appShell .co-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  border-radius: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: hsl(var(--tile-hue, 195) 55% 42%); }
#appShell .co-logo-lg { width: 56px; height: 56px; font-size: 19px; }
#appShell .co-logo-sm { width: 36px; height: 36px; font-size: 13px; border-radius: 9px; }
#appShell .co-logo.has-logo { background: #fff; border: 1px solid var(--glass-line); }
#appShell .co-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
#appShell .co-empty { padding: 24px; border-radius: 16px; text-align: center; }
#appShell .co-empty h2, #appShell .co-empty h3 { margin: 0 0 6px; color: var(--foam); }
#appShell .co-empty .aq-btn { margin-top: 12px; }
#appShell .co-back { margin-bottom: 10px; padding: 8px 0; }
#appShell .co-note { margin-top: 14px; }
#appShell .co-msg { min-height: 18px; margin: 0 0 10px; }
#appShell .co-form { margin-top: 10px; }
#appShell .co-form h4, #appShell .co-section h4 { margin: 0 0 10px; color: var(--foam); }
#appShell .co-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
#appShell .co-form-grid .co-span { grid-column: 1 / -1; }
#appShell .co-check { display: flex; align-items: center; gap: 8px; }
#appShell .co-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-line); }
#appShell .co-logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#appShell .co-file { display: inline-flex; align-items: center; cursor: pointer; }
#appShell .co-farm-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
#appShell .co-farm-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#appShell .co-link-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#appShell .co-link-row select { min-width: 220px; }

/* Phones: 1–2 thumb-sized tiles per row. */
@media (max-width: 768px) {
  #appShell .co-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  #appShell .co-tile { padding: 14px; min-height: 150px; }
  #appShell .co-tile-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  #appShell .co-logo-lg { width: 48px; height: 48px; font-size: 17px; }
  #appShell .co-stats { grid-template-columns: 1fr 1fr; }
  #appShell .co-page-head .aq-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { #appShell .co-tile { transition: none; } #appShell .co-tile:hover { transform: none; } }
#appShell .co-check { flex-direction: row; align-self: end; min-height: 40px; }
#appShell .co-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }
/* Company tiles: the logo is the big tap target. */
#appShell .co-company-tile { gap: 10px; }
#appShell .co-logo-hero { width: 100%; height: 112px; border-radius: 12px; font-size: 34px; }
#appShell .co-logo-hero.has-logo img { padding: 10px 14px; }
#appShell .co-order { white-space: nowrap; }
#appShell .co-order .table-button { min-width: 34px; }
/* Above a company's farm pages: small logo, name, back to all companies. */
#appShell .co-context { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 12px;
  border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-strong); }
#appShell .co-context.hidden { display: none; }
#appShell .co-context-name { color: var(--foam); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
#appShell .co-context-back { margin-left: auto; white-space: nowrap; padding: 8px 4px; }
@media (max-width: 768px) {
  #appShell .co-logo-hero { height: 88px; font-size: 28px; }
  #appShell .co-context { margin: 0 0 10px; }
}

/* ---- Companies dashboard = the front door: no side menu, phone bar, + button or farm picker until a company is opened. */
#appShell.co-home { grid-template-columns: minmax(0, 1fr); }
#appShell.co-home .sidebar, #appShell.co-home .nav-backdrop, #appShell.co-home #menuToggle,
#appShell.co-home .topbar-farm, #appShell.co-home #refreshButton { display: none !important; }
body.co-home-page .bottom-nav, body.co-home-page .fab { display: none !important; }
body.co-home-page #appShell .workspace { padding-bottom: 24px !important; }
#appShell.co-home #companiesRoot { max-width: 1240px; margin: 0 auto; }
#appShell .co-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bigger company tiles on desktop… */
#appShell .co-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
#appShell .co-company-tile { padding: 20px; gap: 14px; border-radius: 20px; }
#appShell .co-company-tile .co-logo-hero { height: 190px; font-size: 52px; border-radius: 16px; }
#appShell .co-company-tile .co-logo-hero.has-logo img { padding: 16px 24px; }
#appShell .co-company-tile .co-name { font-size: 20px; }
#appShell .co-company-tile .co-stat strong { font-size: 19px; }

/* Desktop: the side menu collapses to icons (remembered per device). */
#appShell .rail-collapse { display: none; margin-left: auto; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--mist); cursor: pointer; }
#appShell .rail-collapse:hover { background: rgba(var(--accent-rgb), .1); color: var(--biolume); }
#appShell .rail-collapse svg { width: 18px; height: 18px; transition: transform .2s ease; }
@media (min-width: 901px) {
  #appShell .rail-collapse { display: inline-flex; }
  #appShell.rail-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  #appShell.rail-collapsed .sidebar-rail { width: 64px; }
  #appShell.rail-collapsed .rail-brand { justify-content: center; padding: 0; }
  #appShell.rail-collapsed .rail-collapse { margin: 0; }
  #appShell.rail-collapsed .rail-collapse svg { transform: rotate(180deg); }
  #appShell.rail-collapsed .brand-lockup, #appShell.rail-collapsed .rail-nav-label, #appShell.rail-collapsed .rail-farm-switcher,
  #appShell.rail-collapsed .rail-user-info, #appShell.rail-collapsed .rail-avatar { display: none; }
  #appShell.rail-collapsed .rail-nav { padding: 0 8px; }
  #appShell.rail-collapsed .rail-nav .nav-link { justify-content: center; position: relative; padding: 10px 0; }
  #appShell.rail-collapsed .rail-nav-badge { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 9px; padding: 0 4px; }
  #appShell.rail-collapsed .rail-user { justify-content: center; padding: 10px 4px 4px; }
  #appShell.rail-collapsed .rail-logout { font-size: 10px; padding: 6px 4px; min-height: 0; }
}

/* …and compact ones on phones (two per row). */
@media (max-width: 768px) {
  #appShell .co-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  #appShell .co-company-tile { padding: 12px; gap: 8px; border-radius: 14px; min-height: 0; }
  #appShell .co-company-tile .co-logo-hero { height: 76px; font-size: 24px; border-radius: 10px; }
  #appShell .co-company-tile .co-logo-hero.has-logo img { padding: 6px 10px; }
  #appShell .co-company-tile .co-name { font-size: 15px; }
  #appShell .co-company-tile .co-stat strong { font-size: 15px; }
  #appShell .co-company-tile .co-stat { font-size: 11px; }
}
@media (max-width: 900px) { #appShell .co-signout { display: none; } } /* phones / iPad portrait: Sign out is in the header */
@media (prefers-reduced-motion: reduce) { #appShell .rail-collapse svg { transition: none; } }

/* ---------------------------------------------------------------- Phase 0: bell, notifications, settings */
#appShell .notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-strong); color: var(--foam); cursor: pointer; flex: none; }
#appShell .notif-bell:hover { border-color: rgba(var(--accent-rgb), .45); color: var(--biolume); }
#appShell .notif-bell svg { width: 20px; height: 20px; }
#appShell .notif-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--act); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#appShell .notif-count.hidden { display: none; }
#appShell .nt-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 14px; }
#appShell .nt-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#appShell .nt-check { display: flex; align-items: center; gap: 8px; }
#appShell .nt-check input { width: 18px; height: 18px; margin: 0; flex: none; }
#appShell .nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#appShell .nt-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-strong); }
#appShell .nt-item.nt-unread { border-color: rgba(var(--accent-rgb), .35); box-shadow: inset 3px 0 0 0 rgba(var(--accent-rgb), .0); background: rgba(var(--accent-rgb), .05); }
#appShell .nt-main { flex: 1; min-width: 0; }
#appShell .nt-main p { margin: 4px 0; color: var(--foam); font-size: 13.5px; overflow-wrap: anywhere; }
#appShell .nt-meta { color: var(--mist); font-size: 12px; }
#appShell .nt-prefs { display: grid; gap: 10px; }
#appShell .fs-farm { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; max-width: 360px; }
#appShell .fs-group { border: 1px solid var(--glass-line); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 14px; }
#appShell .fs-group legend { padding: 0 6px; font-weight: 700; color: var(--foam); }
#appShell .fs-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#appShell .fs-field.co-check { flex-direction: row; }
#appShell .owner-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
#appShell .owner-fields.hidden { display: none; }
@media (max-width: 768px) {
  #appShell .nt-item { flex-wrap: wrap; }
  #appShell .notif-bell { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- Phase 1: pond prep, seed & hatchery */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#appShell .link-button { background: none; border: 0; padding: 0; color: var(--biolume); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
#appShell .link-button:hover { text-decoration: underline; }
#appShell .t-bad { color: var(--act); font-weight: 600; }

/* shared file list */
#appShell .file-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
#appShell .file-list li { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
#appShell .file-add { position: relative; display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; }
#appShell .file-add:focus-within { outline: 2px solid var(--biolume); outline-offset: 2px; }
#appShell .file-msg { margin-left: 8px; }

/* stocking form: PL batches + confirm/override */
#appShell .crop-batches { border: 1px solid var(--glass-line); border-radius: 14px; padding: 10px 14px 12px; margin: 0; }
#appShell .crop-batches legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
#appShell .crop-batches.hidden { display: none; }
#appShell .crop-batch-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
#appShell .crop-batch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#appShell .crop-batch-foot .is-warn, #appShell #cropBatchSum.is-warn { color: var(--watch); font-weight: 600; }
#appShell .crop-manual-source.hidden { display: none; }
#appShell .crop-guard { border: 1px solid rgba(var(--watch-rgb), .45); background: rgba(var(--watch-rgb), .08); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
#appShell .crop-guard ul { margin: 6px 0 10px; padding-left: 18px; }
#appShell .crop-guard textarea { width: 100%; }
#appShell .crop-guard-msg { border: 1px solid rgba(var(--act-rgb), .35); background: rgba(var(--act-rgb), .06); color: var(--foam); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }

/* pond prep board */
#appShell .prep-head .panel-heading { flex-wrap: wrap; gap: 10px 16px; }
#appShell .prep-head .entry-actions { flex-wrap: wrap; align-items: center; }
#appShell .prep-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto;
  padding: 2px 2px 12px; margin: 14px 0; scroll-snap-type: x proximity; }
#appShell .prep-col { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; padding: 10px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
#appShell .prep-col header { padding: 2px 4px 4px; font-size: 13px; }
#appShell .prep-count { display: inline-flex; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .12); color: var(--biolume); font-size: 11.5px; font-weight: 700; margin-left: 4px; }
#appShell .prep-cards { display: grid; gap: 8px; }
#appShell .prep-card { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--glass-line); background: var(--glass-strong); color: var(--foam); font: 13px var(--font-ui); min-height: 44px; }
#appShell .prep-card:hover { border-color: rgba(var(--accent-rgb), .45); }
#appShell .prep-card:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .55); outline-offset: 2px; }
#appShell .prep-card.is-late { border-color: rgba(var(--act-rgb), .5); background: rgba(var(--act-rgb), .05); }
#appShell .prep-card-pond { font-weight: 700; font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#appShell .prep-card-cta { color: var(--biolume); font-weight: 600; font-size: 12.5px; }
#appShell .prep-empty { margin: 4px; }
#appShell .prep-stocked { margin: 0 0 14px; }

/* prep panel (modal) */
#appShell .prep-panel { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
#appShell .prep-modal .modal-body { background: var(--abyss); }
#appShell .prep-stages { display: grid; gap: 8px; margin: 10px 0; }
#appShell .prep-stage { border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-strong); }
#appShell .prep-stage > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px; flex-wrap: wrap; }
#appShell .prep-stage > summary::-webkit-details-marker { display: none; }
#appShell .prep-stage[open] > summary { border-bottom: 1px solid var(--glass-line); }
#appShell .prep-stage-form { padding: 12px 14px 14px; }
#appShell .prep-tick { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid rgba(var(--accent-rgb), .4); color: var(--biolume); font-size: 12px; font-weight: 700; }
#appShell .prep-stage.is-done .prep-tick { background: var(--grow); border-color: var(--grow); color: #fff; }
#appShell .prep-stage-name { font-weight: 600; flex: 1; min-width: 140px; }
#appShell .prep-reading { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#appShell .prep-files { margin: 8px 0; }
#appShell .prep-signoff { border: 1px solid rgba(var(--grow-rgb), .35); border-radius: 14px; padding: 12px 14px; background: rgba(var(--grow-rgb), .05); }
#appShell .prep-signoff h4 { margin: 0 0 6px; }
#appShell .prep-ok { border-radius: 12px; padding: 10px 12px; background: rgba(var(--grow-rgb), .08); color: var(--foam); }
#appShell .prep-footer { margin-top: 14px; }
#appShell .prep-admin { margin-top: 14px; }
#appShell .prep-admin summary { cursor: pointer; font-weight: 600; color: var(--mist-2); }
#appShell .prep-tpl-stage { border: 1px solid var(--glass-line); border-radius: 14px; padding: 10px 14px 12px; margin: 0 0 10px; background: var(--glass-strong); }
#appShell .prep-tpl-stage legend { padding: 0 6px; font-weight: 700; }
#appShell .prep-tpl-fields { display: grid; gap: 6px; margin: 10px 0; }
#appShell .prep-tpl-field { display: grid; grid-template-columns: minmax(0, 2fr) 110px 90px auto auto; gap: 6px; align-items: center; }
#appShell .prep-history { margin-bottom: 14px; }

/* seed & hatchery */
#appShell .seed-tabs { margin-bottom: 14px; flex-wrap: wrap; }
#appShell .seed-msg { padding: 8px 12px; border-radius: 10px; background: rgba(var(--grow-rgb), .08); }
#appShell .click-row { cursor: pointer; }
#appShell .click-row:hover td { background: rgba(var(--accent-rgb), .05); }
#appShell .click-row:focus-visible { outline: 2px solid var(--biolume); outline-offset: -2px; }
#appShell .seed-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 12px 0; }
#appShell .seed-facts dt { font-size: 12px; color: var(--mist); }
#appShell .seed-facts dd { margin: 2px 0 0; font-weight: 600; }
#appShell .seed-tests { list-style: none; padding: 0; margin: 6px 0 14px; display: grid; gap: 8px; }
#appShell .seed-tests li { border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 12px; background: var(--glass-strong); }
#appShell .seed-tests li > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
#appShell .seed-test-form { border-top: 1px solid var(--glass-line); padding-top: 12px; margin-top: 4px; }
#appShell .seed-genetics { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; }
#appShell .seed-perf-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px; }
#appShell .seed-perf-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

@media (max-width: 768px) {
  #appShell .prep-head .entry-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  #appShell .prep-head .entry-actions > * { flex: 1 1 auto; width: auto; min-height: 44px; padding: 8px 10px; font-size: 13px; }
  #appShell .prep-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  #appShell .prep-col { min-height: 0; }
  #appShell .prep-col:has(.prep-empty) { display: none; }  /* phones: only stages with ponds in them */
  #appShell .crop-batch-row { grid-template-columns: 1fr 1fr; }
  #appShell .crop-batch-row select { grid-column: 1 / -1; }
  #appShell .prep-tpl-field { grid-template-columns: 1fr 1fr; }
  #appShell .prep-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}
#appShell .co-ops { display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--watch); background: rgba(var(--watch-rgb), .1); border: 1px solid rgba(var(--watch-rgb), .3); }

/* ---------------------------------------------------------------- Phase 2: staff tasks */
#appShell .ops-sheet .modal-body { background: var(--abyss); }
#appShell .task-head .panel-heading { flex-wrap: wrap; gap: 10px; }
#appShell .task-date { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#appShell .task-progress { height: 8px; border-radius: 999px; background: rgba(var(--accent-rgb), .12); overflow: hidden; margin-top: 10px; }
#appShell .task-progress span { display: block; height: 100%; background: var(--grow); border-radius: inherit; }
#appShell .task-group { margin: 14px 0; }
#appShell .task-group h4 { margin: 0 0 8px; font-size: 13px; color: var(--mist-2); font-variant-numeric: tabular-nums; }
#appShell .task-card { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-strong); margin-bottom: 8px; }
#appShell .task-card.is-critical { border-color: rgba(var(--act-rgb), .35); }
#appShell .task-card-main { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
#appShell .task-card-title { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14.5px; }
#appShell .task-pond { font-weight: 700; color: var(--biolume); }
#appShell .task-card-actions { display: flex; gap: 8px; }
#appShell .task-card-actions button { min-height: 48px; min-width: 96px; }
#appShell .task-do:disabled { opacity: .55; cursor: not-allowed; }
#appShell .task-complete label { display: grid; gap: 6px; font-size: 14px; margin-bottom: 12px; }
#appShell .task-reading { font-size: 22px; min-height: 56px; }
#appShell .task-photo { display: grid; gap: 8px; margin-bottom: 12px; }
#appShell .task-photo button { min-height: 52px; }
#appShell #taskPhotoPreview { max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: cover; }
#appShell #taskPhotoPreview.hidden { display: none; }
#appShell .task-submit { min-height: 52px; width: 100%; }
#appShell .task-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 12px 0; }
#appShell .task-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
#appShell .task-kpis strong { font-size: 22px; font-variant-numeric: tabular-nums; }
#appShell .task-trend { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 4px 0; border-bottom: 1px solid var(--glass-line); }
#appShell .task-bar { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: rgba(var(--grow-rgb), .6); }
#appShell .task-bar[data-low="true"] { background: rgba(var(--watch-rgb), .7); }
#appShell .task-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
#appShell .task-two h3, #appShell .panel > h3 { margin: 0 0 8px; }
#appShell .task-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#appShell .task-photo-card { margin: 0; border: 1px solid var(--glass-line); border-radius: 12px; overflow: hidden; background: var(--glass-strong); }
#appShell .task-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: rgba(var(--accent-rgb), .08); cursor: zoom-in; }
#appShell .task-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#appShell .task-photo-card figcaption { padding: 8px 10px; display: grid; gap: 4px; font-size: 13px; }
#appShell .task-review { display: flex; gap: 6px; flex-wrap: wrap; }
#appShell .task-days { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid var(--glass-line); border-radius: 12px; padding: 8px 12px; }
#appShell .task-window { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#appShell [data-show-for].hidden, #appShell [data-hide-for].hidden, #appShell [data-show-applies].hidden, #appShell [data-show-reading].hidden { display: none; }
@media (max-width: 768px) {
  #appShell .task-card-actions { width: 100%; }
  #appShell .task-card-actions button { flex: 1; }
  #appShell .ops-sheet .prep-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}
#appShell .task-two table { min-width: 0; width: 100%; }

/* ---------------------------------------------------------------- Phase 6: documents & visitors */
#appShell .doc-sheet .modal-body, #appShell .vis-sheet .modal-body { background: var(--abyss); }
#appShell .vis-sub { margin: 16px 0 8px; font-size: 13px; color: var(--mist-2); }
#appShell .vis-last { border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
#appShell .vis-ago { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
#appShell .vis-declare { align-items: flex-start; margin: 12px 0; font-size: 13.5px; }
#appShell .vis-declare input { margin-top: 2px; }
@media (max-width: 768px) { #appShell .doc-sheet .prep-panel, #appShell .vis-sheet .prep-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }
#appShell .task-complete .co-check { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; margin: 0; }
#appShell .task-complete .co-check input { width: 22px; height: 22px; flex: none; }
#appShell .task-complete .vis-declare { align-items: flex-start; }

/* ---------------------------------------------------------------- Phase 3: inventory & equipment */
#appShell .sfj-sheet .modal-body { background: var(--abyss); }
@media (max-width: 768px) { #appShell .sfj-sheet .prep-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }
#appShell .inv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#appShell .inv-actions .primary-button { min-height: 48px; }
#appShell .inv-low { border: 1px solid rgba(var(--watch-rgb), .4); background: rgba(var(--watch-rgb), .07); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
#appShell .inv-line { display: grid; grid-template-columns: minmax(160px, 2fr) 90px 80px 100px 70px 100px 130px auto; gap: 6px; align-items: end; margin-bottom: 8px; }
#appShell .inv-line label { font-size: 12px; }
#appShell tr.is-low td { background: rgba(var(--watch-rgb), .06); }
#appShell .inv-hint { font-size: 13px; color: var(--mist-2); margin: -4px 0 10px; }
#appShell .eq-status-repair { color: var(--act); font-weight: 600; }
#appShell .eq-status-standby { color: var(--watch); }
#appShell .eq-bar { height: 8px; border-radius: 999px; background: rgba(var(--accent-rgb), .12); overflow: hidden; min-width: 120px; }
#appShell .eq-bar span { display: block; height: 100%; background: var(--grow); }
#appShell .eq-bar span.is-low { background: var(--act); }
@media (max-width: 900px) { #appShell .inv-line { grid-template-columns: 1fr 1fr; } #appShell .inv-line > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- Phase 4: costing & sales */
#appShell .fin-wide { width: min(1080px, calc(100vw - 24px)); }
#appShell .fin-line { grid-template-columns: repeat(3, minmax(90px, 1fr)) auto; }
#appShell .fin-alloc { display: grid; grid-template-columns: 1fr 140px; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px; }
#appShell .fin-budget { width: 120px; }
#appShell .aq-up { color: var(--grow); }
@media (max-width: 768px) { #appShell .fin-wide { width: 100vw; } #appShell .fin-line { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- Phase 5: owner approvals & crop closure */
#appShell .ap-rows { display: grid; gap: 6px; margin-bottom: 12px; }
#appShell .ap-row { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 6px; }
#appShell .ap-row[data-link] { grid-template-columns: 1fr 1fr 2fr; }
#appShell .ap-ponds, #appShell .ap-choose { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
#appShell .ap-options { padding-left: 20px; display: grid; gap: 8px; }
#appShell .ap-decide { border: 1px solid var(--line, #d8e2df); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
#appShell .ap-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(var(--act-rgb), .1); }
@media (max-width: 768px) { #appShell .ap-row, #appShell .ap-row[data-link] { grid-template-columns: 1fr 1fr; } #appShell .ap-row > :first-child { grid-column: 1 / -1; } }
#appShell .ap-choose { flex-direction: column; gap: 2px; }
#appShell .ap-choose legend, #appShell .ap-ponds legend { font-size: 13px; font-weight: 600; margin-bottom: 4px; padding: 0; }
#appShell .ap-choose .co-check, #appShell .ap-ponds .co-check { align-self: start; min-height: 40px; font-weight: 500; }
#appShell .ap-choose .co-check input, #appShell .ap-ponds .co-check input { width: 20px; height: 20px; margin: 0; flex: none; }

/* ---------------------------------------------------------------- staged partial harvests + sampling sheet */
#appShell .hp-stages { display: grid; gap: 8px; margin-bottom: 12px; }
#appShell .hp-stage { display: grid; grid-template-columns: 90px 1fr 1fr auto; gap: 8px; align-items: end; }
#appShell .hp-stage > .aq-label { align-self: center; }
#appShell .hp-stages [data-stage-add] { justify-self: start; }
#appShell .ss-table td, #appShell .ss-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
#appShell .ss-table .ss-total td, #appShell .ss-table .ss-total th { font-weight: 700; background: rgba(var(--ink-rgb), .05); }
#appShell .ss-table .ss-ph { background: rgba(var(--ink-rgb), .025); }
@media (max-width: 768px) { #appShell .hp-stage { grid-template-columns: 1fr 1fr; } #appShell .hp-stage > .aq-label { grid-column: 1 / -1; } }
#appShell .ss-table tbody th[scope="row"], #appShell .ss-table thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-solid); }
#appShell .ss-table { overflow: visible; } /* the wrapper scrolls; a scrolling table would stop the pond column sticking */

/* Side menu (desktop rail, iPad landscape, phone/tablet drawer): the rail rule (.sidebar-rail { overflow: hidden })
   cut off everything below the fold on short screens (Expenses & Profit, Management, My Profile, Sign out) and squashed
   the logo, so the menu scrolls instead. overflow-x stays hidden for the collapsed 64px rail. */
.sidebar.sidebar-rail { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sidebar.sidebar-rail > * { flex-shrink: 0; }
/* iOS zooms into any text field under 16px when it gets focus (Ask box, search, small filters) and the page stays
   zoomed. On touch screens every text control is at least 16px. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
}