/* 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;
  }

  .buttonclass{
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    font: 700 40px / 1 'Poppins', sans-serif;
    font-variant-numeric:tabular-nums;
    gap: 6px;
    background:none;
    border:none;
    padding:0;
    color:inherit;
    cursor:pointer;
    transition:color .15s ease;
  }
  .buttonclass:hover{ color:var(--lime-hover); }

  /* 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; }
  .loading-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    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{
    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); } }