/* JasonL website theme (www.jasonl.com.au): white page, Poppins, #121212
   text, lime #C6D644 brand accent, orange #F09D2D secondary, light grey
   #F2F5F8 tiles, square corners, pill buttons.
   The status variable names are kept from the old dark theme because the
   results templates reference them inline: --teal = ok (lime),
   --amber = warn (orange), --red = crit, --blue = neutral (charcoal). */
:root{
    --ink:#FFFFFF;
    --panel:#F2F5F8;
    --panel-raised:#F2F5F8;
    --line:#E8ECF0;
    --line-soft:#EEF1F4;
    --line-strong:#C9D1D9;
    --paper:#121212;
    --paper-dim:#5F6670;
    --lime:#C6D644;
    --lime-hover:#A6C200;
    --lime-ink:#5C6B00;
    --orange:#F09D2D;
    --orange-ink:#A35A00;
    --charcoal:#242833;
    --amber:#F09D2D;
    --teal:#C6D644;
    --red:#D93025;
    --blue:#242833;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Poppins', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:32px 28px 60px;
  }

  /* ===== Header / Console strip ===== */
  header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .brand-block{display:flex; align-items:center; gap:14px;}
  .brand-text .eyebrow{
    font:600 11px/1 'Poppins', sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper-dim);
    margin:0 0 6px;
  }
  .brand-text h1{
    font:700 26px/1.1 'Poppins', sans-serif;
    margin:0;
    letter-spacing:-.01em;
  }

  .console{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:stretch;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .field label{
    font:600 10.5px/1 'Poppins', sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .field select, .field input{
    background:var(--panel-raised);
    border:1px solid var(--line);
    color:var(--paper);
    font:500 13px 'Poppins', sans-serif;
    padding:9px 12px;
    border-radius:0;
    outline:none;
    min-width:150px;
    transition:border-color .15s ease;
    color-scheme: light;
  }
  .field select:hover, .field input:hover{ border-color:var(--line-strong); }
  .field select:focus, .field input:focus{ border-color:var(--lime-hover); }
  .date-pair{ display:flex; gap:8px; align-items:center; }
  .date-pair span{ color:var(--paper-dim); font-size:12px; padding-top:2px;}

  /* ===== Status line ===== */
  .status-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:18px 0 26px;
    font:500 12px 'Poppins', sans-serif;
    color:var(--paper-dim);
    flex-wrap:wrap;
    gap:10px;
  }
  .status-line .pm-tag{
    color:var(--paper);
    font-weight:600;
    background:var(--panel);
    padding:4px 12px;
    border-radius:40px;
  }

  /* ===== Metric grid ===== */
  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

  .card{
    background:var(--panel);
    border:none;
    border-radius:0;
    padding:20px 20px 18px 23px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:150px;
  }
  .card .led{
    position:absolute;
    top:0; left:0;
    width:4px;
    height:100%;
  }
  .led.ok{ background:var(--teal); }
  .led.warn{ background:var(--amber); }
  .led.crit{ background:var(--red); }
  .led.neutral{ background:var(--blue); }

  .card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }
  .card-label{
    font:600 11.5px/1.4 'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--paper-dim);
    max-width:78%;
  }
  .tag{
    font:600 10px/1 'Poppins', sans-serif;
    letter-spacing:.06em;
    padding:4px 8px;
    border-radius:40px;
    white-space:nowrap;
    text-transform:uppercase;
  }
  .tag.ok{ color:var(--lime-ink); background:rgba(198,214,68,.28); }
  .tag.warn{ color:var(--orange-ink); background:rgba(240,157,45,.18); }
  .tag.crit{ color:var(--red); background:rgba(217,48,37,.12); }
  .tag.neutral{ color:var(--charcoal); background:rgba(36,40,51,.10); }

  .card-value{
    font:700 40px/1 'Poppins', sans-serif;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .card-value .unit{
    font:600 14px 'Poppins', sans-serif;
    color:var(--paper-dim);
  }
  .card-sub{
    font:500 12px 'Poppins', sans-serif;
    color:var(--paper-dim);
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
  }
  .bar-track{
    height:4px;
    border-radius:0;
    background:var(--line);
    overflow:hidden;
    margin-top:4px;
  }
  .bar-fill{
    height:100%;
    border-radius:0;
    transition:width .5s ease;
  }

  /* ===== Footer strip: breakdown by PM ===== */
  .section-title{
    font:700 18px/1.2 'Poppins', sans-serif;
    color:var(--paper);
    margin:38px 0 14px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .section-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }
  /* ===== CSV export button (sits at the right end of the section title) =====
     Lime pill like the website's "Start your fitout" button, with dark text
     so it stays readable. */
  .export-btn{
    order:1;
    font:600 12px/1 'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--paper);
    background:var(--lime);
    border:1px solid var(--lime);
    border-radius:40px;
    padding:10px 18px;
    cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .export-btn:hover{ background:var(--lime-hover); border-color:var(--lime-hover); }

  table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  thead th{
    text-align:left;
    font:600 11px 'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--paper-dim);
    padding:0 14px 10px;
    border-bottom:2px solid var(--paper);
  }
  thead th:not(:first-child), tbody td:not(:first-child){ text-align:right; }
  tbody td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    font-family:'Poppins', sans-serif;
    font-variant-numeric:tabular-nums;
    font-weight:400;
  }
  tbody td:first-child{ font-family:'Poppins', sans-serif; font-weight:600; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--panel); }

  .empty-note{
    color:var(--paper-dim);
    font-size:13px;
    padding:30px 0;
    text-align:center;
  }

  /* Links look like the website's "View all": dark text, lime underline. */
  table a{
    cursor:pointer;
    color:var(--paper);
    font-weight:600;
    text-decoration:none;
    border-bottom:2px solid var(--lime);
  }
  table a:hover{ color:var(--lime-ink); border-bottom-color:var(--lime-hover); }

  /* ===== Loading overlay ===== */
  .results-wrap{ position:relative; }
  /* The overlay covers the whole results area, which is often taller than the
     screen, so the spinner sticks near the middle of the viewport instead of
     being centred in the overlay (where it can sit off-screen). */
  .loading-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:60px;
    background:rgba(255,255,255,.65);
    border-radius:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
    z-index:5;
  }
  .loading-overlay.active{
    opacity:1;
    pointer-events:all;
  }
  .spinner{
    position:sticky;
    top:45vh;
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid rgba(18,18,18,.12);
    border-top-color:var(--lime);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }