/* PGM Dashboard theme: warm cream light palette by default (Anthropic-
     website-inspired), Elemental's own teal/sage accent (verified against
     the real Elemental logo, not swapped for Anthropic's own accent color),
     generously rounded corners throughout in place of Tennessee's sharp
     corners and angles, Poppins semibold as the typeface everywhere. Dark
     mode is preserved for anyone whose OS prefers it, or via an explicit
     data-theme="dark" hook, but light/cream is now the default look since
     neither Anthropic's site nor this request calls for dark-by-default. */
  :root{
    --bg:#f7f2e7; --surface:#fffdf8; --surface-2:#f1ead9; --surface-3:#e8ddc6;
    --border:#ddd0b0; --border-soft:#e9dfc7;
    --text:#241f16; --text-dim:#6b6250; --text-faint:#978c74;
    --accent:#2f7f70; --accent-strong:#256459; --accent-ink:#f8f4e8;
    --good:#3d8a5a; --good-ink:#eaf4ea;
    --warn:#a5701b; --warn-ink:#fbf1de;
    --crit:#b8422c; --crit-ink:#fbeae6;
    --shadow: 0 1px 2px rgba(70,55,20,.05), 0 14px 32px -18px rgba(70,55,20,.22);
    --focus: 0 0 0 3px rgba(47,127,112,.3);
    --topbar-bg: rgba(247,242,231,.86);
    color-scheme: light;
  }
  :root[data-theme="light"]{
    --bg:#f7f2e7; --surface:#fffdf8; --surface-2:#f1ead9; --surface-3:#e8ddc6;
    --border:#ddd0b0; --border-soft:#e9dfc7;
    --text:#241f16; --text-dim:#6b6250; --text-faint:#978c74;
    --accent:#2f7f70; --accent-strong:#256459; --accent-ink:#f8f4e8;
    --good:#3d8a5a; --good-ink:#eaf4ea;
    --warn:#a5701b; --warn-ink:#fbf1de;
    --crit:#b8422c; --crit-ink:#fbeae6;
    --shadow: 0 1px 2px rgba(70,55,20,.05), 0 14px 32px -18px rgba(70,55,20,.22);
    --focus: 0 0 0 3px rgba(47,127,112,.3);
    --topbar-bg: rgba(247,242,231,.86);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#14181a; --surface:#1a1f21; --surface-2:#212729; --surface-3:#2a3133;
      --border:#333b3d; --border-soft:#282f31;
      --text:#eef1ee; --text-dim:#98a19b; --text-faint:#647169;
      --accent:#4f9c8c; --accent-strong:#6ab6a5; --accent-ink:#0d1a17;
      --good:#5aa66c; --good-ink:#0e1f13;
      --warn:#d9a441; --warn-ink:#241c08;
      --crit:#d1614a; --crit-ink:#240f0a;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.5);
      --focus: 0 0 0 3px rgba(79,156,140,.45);
      --topbar-bg: rgba(20,24,26,.86);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#14181a; --surface:#1a1f21; --surface-2:#212729; --surface-3:#2a3133;
    --border:#333b3d; --border-soft:#282f31;
    --text:#eef1ee; --text-dim:#98a19b; --text-faint:#647169;
    --accent:#4f9c8c; --accent-strong:#6ab6a5; --accent-ink:#0d1a17;
    --good:#5aa66c; --good-ink:#0e1f13;
    --warn:#d9a441; --warn-ink:#241c08;
    --crit:#d1614a; --crit-ink:#240f0a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.5);
    --focus: 0 0 0 3px rgba(79,156,140,.45);
    --topbar-bg: rgba(20,24,26,.86);
    color-scheme: dark;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg); color:var(--text);
    font-family:'Poppins', system-ui, -apple-system, sans-serif; font-weight:500;
    font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  #app-root{ min-height:100vh; }
  h1,h2,h3{ font-family:'Poppins', system-ui, sans-serif; font-weight:600; margin:0; text-wrap:balance; }
  .mono{ font-family:'Poppins', system-ui, sans-serif; font-variant-numeric:tabular-nums; }
  button, input, select, textarea{ font:inherit; color:inherit; }
  button{ cursor:pointer; font-weight:600; }
  a{ color:var(--accent-strong); }
  :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:10px; }

  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 24px; background:var(--topbar-bg); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topbar .brand{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .brand-title{ display:flex; align-items:center; gap:10px; min-width:0; }
  .brand-logo{ width:28px; height:28px; flex-shrink:0; }
  .topbar .brand h1{ font-size:21px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar .brand .sub{ font-size:12px; color:var(--text-dim); letter-spacing:.02em; }
  .topbar .right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
  .right-top{ display:flex; align-items:center; gap:14px; }
  .right-actions{ display:flex; align-items:center; gap:8px; }
  .signed-in{ display:flex; align-items:center; gap:10px; font-size:13px; }
  .signed-in .name{ font-weight:600; }

  /* Gear icon: collapsed by default, reveals the language toggle and Sign
     Out in a flyout on hover / keyboard focus rather than sitting in the
     topbar permanently. */
  .user-settings{ position:relative; display:flex; }
  .gear-btn{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; padding:0; border-radius:50%;
    border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim);
    font-size:15px; line-height:1; transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .gear-btn:hover{ background:var(--surface-3); color:var(--text); }
  .user-settings-menu{
    position:absolute; top:100%; right:0; margin-top:8px; z-index:30;
    display:flex; flex-direction:column; align-items:stretch; gap:6px;
    min-width:170px; padding:10px; border-radius:14px;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .12s ease, transform .12s ease, visibility .12s;
  }
  .user-settings:hover .user-settings-menu,
  .user-settings:focus-within .user-settings-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .user-settings-label{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); padding:0 2px 2px; }
  .user-settings-menu .btn{ width:100%; justify-content:flex-start; }

  .banner{
    padding:10px 20px; font-size:13px; text-align:center;
    background:var(--warn-ink); color:var(--warn); border-bottom:1px solid var(--border);
  }
  .banner.info{ background:var(--surface-2); color:var(--text-dim); }

  .container{ max-width:1180px; margin:0 auto; padding:26px 20px 64px; }

  .viewnav{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  .viewnav .chip{ padding:8px 18px; font-size:13px; }

  .btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 16px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); font-size:13px; font-weight:600;
    transition:background .15s ease, border-color .15s ease, transform .05s ease;
  }
  .btn:hover{ background:var(--surface-3); }
  .btn:active{ transform:translateY(1px); }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn.primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
  .btn.ghost{ background:transparent; }
  .btn.danger{ color:var(--crit); }
  .btn.small{ padding:7px 12px; font-size:12px; border-radius:10px; }
  .btn:disabled{ opacity:.45; cursor:not-allowed; }

  .queues{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px; }
  @media (max-width:720px){ .queues{ grid-template-columns:1fr; } }
  .panel{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px 20px; box-shadow:var(--shadow); }
  .panel h2{ font-size:17px; font-weight:600; }
  .panel .hint{ font-size:12px; color:var(--text-faint); margin-top:2px; margin-bottom:12px; }
  .qrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border-soft); }
  .qrow:first-of-type{ border-top:none; }
  .qrow .id{ font-weight:600; font-size:14px; }
  .qrow .by{ font-size:11.5px; color:var(--text-faint); }
  .pill{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap; text-transform:uppercase; }
  .pill.ok{ background:var(--surface-3); color:var(--text-dim); }
  .pill.warn{ background:var(--warn-ink); color:var(--warn); }
  .pill.crit{ background:var(--crit-ink); color:var(--crit); }
  .empty{ padding:14px 0; color:var(--text-faint); font-size:13px; }

  .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .sec-head h2{ font-size:20px; font-weight:600; }
  .sec-head .count{ color:var(--text-faint); font-weight:600; }
  /* Short explainer line under a section heading, e.g. what makes a lot
     show up in Lab. Sits right under the heading, then normal spacing
     before whatever comes next (filters, grid, etc). */
  .sec-hint{ font-size:12.5px; color:var(--text-faint); margin:-12px 0 16px; }

  .filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; position:sticky; top:68px; z-index:10; background:var(--bg); padding:8px 0; }
  .chip{ padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text-dim); }
  .chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .search{ flex:1 1 220px; min-width:160px; padding:9px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
  .search::placeholder{ color:var(--text-faint); }

  .lots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; }
  /* Active Lots: one full-width row per lot (matches Tennessee's board),
     not the multi-column card grid the other tabs use -- otherwise a single
     card sits in a mostly-empty grid track and reads as a narrow square. */
  .active-lots-list{ grid-template-columns:1fr; }
  .active-lots-list .cardctl{ justify-content:flex-end; }
  .active-lots-list select.stagesel{ flex:0 0 auto; min-width:150px; }
  .card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
  .card .head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .card .lotid{ font-size:17px; font-weight:600; }
  .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:10px; background:var(--surface-3); font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-dim); }
  .badge .sw{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .badge.good{ background:var(--good-ink); color:var(--good); }
  .shiplotrow{ border-bottom:1px solid var(--border-soft); padding-bottom:8px; margin-bottom:2px; }
  .shiplotrow input[type="text"]{ flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:12.5px; }
  .shiplotrow select{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:12.5px; }
  .meta{ font-size:12.5px; color:var(--text-dim); }
  .status-line{ font-size:12.5px; color:var(--text-dim); }
  .status-stage{ font-weight:700; color:var(--text); }
  .status-xrf{ font-weight:700; }
  .status-xrf.done{ color:var(--accent); }
  .status-xrf.pending{ color:var(--crit); }
  .returns-label{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); margin:16px 0 8px; }
  .returns-card{ border:1px solid var(--border-soft); border-radius:12px; padding:0 14px; background:var(--surface-2); }
  .returns-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border-soft); font-size:13px; }
  .returns-row:first-child{ border-top:none; }
  .returns-row .val{ font-weight:600; }
  .returns-row.total{ border-top:1px solid var(--accent); }
  .returns-row.total .val{ color:var(--accent-strong); font-size:14.5px; }
  .returns-note{ font-size:11.5px; color:var(--text-faint); font-style:italic; margin-top:8px; }
  .notes{ font-size:12.5px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:8px 10px; cursor:text; }
  .notes.empty-note{ color:var(--text-faint); font-style:italic; }
  .notes.readonly{ cursor:default; }
  .notes textarea{ width:100%; background:transparent; border:none; resize:vertical; min-height:44px; color:var(--text); }

  .tracker{ display:flex; gap:3px; }
  .tracker .seg{ flex:1; height:5px; border-radius:3px; background:var(--surface-3); }
  .tracker .seg.done{ background:var(--accent); }

  /* Full stage timeline on an Active Lots card -- one pill per history
     entry, collapsed to the latest with a "N earlier stages" expand link. */
  .history-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11.5px; }
  .hist-pill{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:8px; background:var(--surface-3); color:var(--text-dim); }
  .hist-pill .hist-stage{ font-weight:700; color:var(--text); }
  .hist-toggle{ color:var(--accent); text-decoration:underline; cursor:pointer; }

  .flag{ font-size:11.5px; padding:7px 11px; border-radius:10px; }
  .flag.warn{ background:var(--warn-ink); color:var(--warn); }
  .flag.crit{ background:var(--crit-ink); color:var(--crit); }
  .flag.manual{ background:var(--crit-ink); color:var(--crit); border:1px solid var(--crit); font-weight:600; }

  .byproducts-line{ cursor:pointer; }
  .byproducts-line:hover{ color:var(--text); }
  .byproducts-line.readonly{ cursor:default; }
  .byproducts-line.readonly:hover{ color:var(--text-dim); }

  /* Settings tab: Team / Permissions sub-tabs, and the per-user read/write grid */
  .settings-panel{ max-width:560px; }
  .settings-tabs{ display:flex; gap:8px; margin-bottom:16px; }
  .perm-table{ display:flex; flex-direction:column; border:1px solid var(--border-soft); border-radius:12px; overflow:hidden; margin-bottom:12px; }
  .perm-row{ display:grid; grid-template-columns:1fr 52px 52px; align-items:center; gap:8px; padding:9px 12px; border-top:1px solid var(--border-soft); font-size:12.5px; }
  .perm-row:first-child{ border-top:none; }
  .perm-head{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); background:var(--surface-2); }
  .perm-row input[type="checkbox"]{ justify-self:center; width:16px; height:16px; }

  .lang-toggle{ font-size:12px; }

  .floor-funnel{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:10px 0; }
  .floor-funnel-cell{ text-align:center; background:var(--surface-2); border-radius:12px; padding:9px 4px; }
  .floor-funnel-count{ font-size:18px; font-weight:600; color:var(--accent-strong); }
  .floor-funnel-label{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.02em; margin-top:2px; }

  .qr-modal{ text-align:center; }
  .qr-image{ width:220px; height:220px; margin:12px auto; display:block; border-radius:16px; background:#fff; padding:10px; }
  .scan-video{ width:100%; border-radius:16px; background:#000; margin-bottom:10px; max-height:280px; object-fit:cover; }

  .cardctl{ display:flex; align-items:center; gap:8px; margin-top:2px; flex-wrap:wrap; }
  select.stagesel{ flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); font-size:12.5px; }

  /* Lot actions menu ("..." on an Active Lots card) -- a full modal of
     stacked full-width buttons, matching Tennessee's board, rather than a
     small dropdown now that it holds nine actions. */
  .actions-modal .sub{ font-size:12.5px; color:var(--text-dim); margin:-10px 0 16px; }
  .actions-modal-btn{ display:flex; width:100%; justify-content:center; margin-bottom:8px; padding:11px; font-size:13px; }

  /* Trailer Drops: "what was on it" checkbox row */
  .trailer-checks{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:13px; }
  .trailer-checks label{ display:flex; align-items:center; gap:6px; font-size:12.5px; }

  /* overflow-y:auto -- the taller modals (Market Pricing, XRF) can exceed a
     short viewport (a laptop at ~700-800px tall); without this their Save
     button is simply unreachable, with no way to scroll down to it. */
  .modal-backdrop{ position:fixed; inset:0; background:rgba(36,31,22,.45); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px; z-index:50; overflow-y:auto; }
  .modal{ background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:24px; width:100%; max-width:440px; box-shadow:var(--shadow); }
  .modal h3{ font-size:18px; font-weight:600; margin-bottom:16px; }
  .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; min-width:0; }
  .field label{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
  .field input, .field select, .field textarea{
    width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  }
  .field textarea{ resize:vertical; min-height:60px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0; }

  /* Outbound Shipment: one weigh ticket per row (Material / Gross / Tare
     + remove button). Bare inputs here (not wrapped in .field) were only
     getting the browser's intrinsic width, so three of them plus a button
     ran wider than the modal and spilled out past its edge -- flex:1 with
     min-width:0 lets them share the row's actual width instead, and
     flex-wrap keeps a narrow modal from squeezing them unreadably. */
  .ticket-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; min-width:0; }
  .ticket-row input{
    flex:1 1 90px; min-width:0; padding:9px 10px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:12.5px;
  }
  .ticket-row .btn{ flex:0 0 auto; }
  .reading-grid{ min-width:0; }
  .reading-grid > *{ min-width:0; }
  .reading-grid input{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  .err{ color:var(--crit); font-size:12.5px; margin-top:-6px; margin-bottom:10px; }

  .teamlist{ display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
  .teamrow{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--border-soft); gap:10px; }
  .teamrow:first-child{ border-top:none; }
  .teamrow .tn{ font-weight:600; font-size:13.5px; }
  .teamrow .ps{ font-size:11px; color:var(--text-faint); }

  /* pointer-events:none -- a toast is a passive status message; it must never
     intercept a click meant for whatever's underneath it. Without this, a
     toast from a recent save (still visible for up to 3.2s) can sit directly
     over a modal's action buttons on a tall modal (e.g. Market Pricing) and
     silently swallow the click. */
  .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface-3); border:1px solid var(--border); color:var(--text); padding:11px 18px; border-radius:14px; font-size:13px; box-shadow:var(--shadow); z-index:60; pointer-events:none; }
  .toast.err{ background:var(--crit-ink); color:var(--crit); border-color:transparent; }

  .signin-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
  .signin{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:28px; padding:32px 30px; box-shadow:var(--shadow); }
  .signin h1{ font-size:23px; font-weight:600; margin-bottom:2px; }
  .signin .sub{ font-size:12.5px; color:var(--text-dim); margin-bottom:22px; }
  .signin .help{ font-size:11.5px; color:var(--text-faint); margin-top:4px; }
  .signin .foot{ font-size:11px; color:var(--text-faint); text-align:center; margin-top:18px; }
  .signin button.primary{ width:100%; justify-content:center; padding:12px; font-size:13.5px; margin-top:4px; }
  .pw-wrap{ display:flex; gap:6px; align-items:stretch; }
  .pw-wrap input{ flex:1; min-width:0; }
  .pw-toggle{ flex-shrink:0; white-space:nowrap; }
  .signin .info{ color:var(--accent); font-size:12.5px; margin-top:-6px; margin-bottom:10px; }
  .signin .switches{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:16px; }
  .linklike{ background:none; border:none; padding:0; color:var(--accent); font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .linklike:hover{ color:var(--accent-strong); }

  .footer-note{ text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:30px; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }