/* forms-tables.css
   Buttons, form controls, upload cards, data tables (sortable/frozen/wrapped headers),
   legends, and chart-adjacent bits.
*/

  .modalBackdrop{display:none;position:fixed;inset:0;background:rgba(15,17,35,.55);z-index:80;align-items:center;justify-content:center;padding:20px;}
  .modalBackdrop.show{display:flex;}
  .modalBox{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 60px rgba(15,17,35,.3);padding:22px 24px;max-width:440px;width:100%;}
  .modalBox h3{margin:0 0 10px;font-size:15.5px;font-weight:800;color:var(--text);}
  .modalBox p{margin:0 0 14px;font-size:12.5px;color:var(--text-soft);line-height:1.6;}
  .modalBox ul{margin:0 0 14px;padding-left:18px;font-size:12.5px;color:var(--text-soft);line-height:1.7;}
  .modalActions{display:flex;flex-direction:column;gap:8px;}
  .modalActions button{width:100%;}

  .content{flex:1;min-width:0;padding:24px 30px 60px;}
  .topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;}
  .topbar h1{font-size:19px;margin:0;font-weight:800;letter-spacing:-0.2px;}
  .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11.5px;line-height:1.4;color:var(--text-soft);}
  .breadcrumb .crumb{white-space:nowrap;}
  .breadcrumb .crumb.current{color:var(--primary);font-weight:600;}
  .breadcrumb .crumbSep{color:var(--text-mute);opacity:.7;}
  .breadcrumb:empty{display:none;}
  .topbar .rangeInfo{font-size:12px;color:var(--text-soft);text-align:right;line-height:1.5;}
  .topbar .rangeInfo b{color:var(--text);}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:20px;}
  .cardHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:10px;flex-wrap:wrap;}
  h2.section{font-size:14.5px;font-weight:700;margin:0;color:var(--text);}
  p.section-note{font-size:11.5px;color:var(--text-mute);margin:2px 0 12px;}
  .metricToggle select{font-family:var(--font);font-size:11.5px;font-weight:600;border:1px solid var(--border);border-radius:20px;padding:5px 12px;background:var(--surface-2);color:var(--text-soft);cursor:pointer;}

  .btn{display:inline-block;font-family:var(--font);font-size:13px;font-weight:600;padding:8px 16px;border:none;background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;}
  .btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
  .btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid #f3c9c9;}
  /* ── A DISABLED BUTTON HAS TO LOOK DISABLED ────────────────────────────────
     There was no rule for this at all, so every disabled control in the system
     rendered identically to a live one — same colour, same weight, same border.
     The whole house convention rests on this: a control the user may not use is
     DISABLED with the reason in its title rather than hidden, so they can see
     the action exists and learn why it is unavailable. If disabled looks
     enabled, that convention inverts into a trap — Submit sat bright green on
     an already-submitted order and simply did nothing when pressed.

     opacity and filter rather than a background: several buttons carry an
     INLINE background (Submit is inline #16a34a), and an inline style beats any
     rule here no matter how specific. opacity and filter apply on top of it, so
     they work whatever colour the button was given. */
  .btn:disabled, .btn[disabled]{
    opacity:.45; filter:grayscale(.55); cursor:not-allowed; box-shadow:none;
  }
  .btn:disabled:hover, .btn[disabled]:hover{ opacity:.45; }
  /* Warm accent for a button that ACTS but destroys nothing — Generate rebuilds
     the grid from scratch and discards whatever was on screen, so it deserves to
     stand out from the ghost buttons beside it. Deliberately not `.danger`: that
     red means "this deletes something", and spending it on a harmless action
     costs its meaning where it matters. */
  .btn.warm{background:#fff1ec;color:#c2410c;border:1px solid #fbcfba;}
  .btn.warm:hover{background:#ffe4d9;border-color:#f7b899;}
  .btn.small{font-size:11px;padding:5px 10px;}
  .status{font-family:var(--font);font-size:12.5px;color:var(--text-soft);margin-top:10px;min-height:16px;}
  .status.err{color:var(--danger);}

  .uploadCard{background:var(--surface);border:1.5px dashed #c9cdf0;border-radius:var(--radius);padding:26px;text-align:center;margin-bottom:20px;}
  .uploadCard.drag{border-color:var(--primary-2);background:var(--primary-soft);}
  .uploadCard p{margin:0 0 14px;color:var(--text-soft);font-size:13px;line-height:1.6;}

  table.rep{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.rep th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);font-weight:700;padding:0 8px 9px 0;border-bottom:1px solid var(--border);white-space:nowrap;}
  .scrollTable table.rep th{position:sticky;top:0;background:var(--surface);z-index:2;padding-top:4px;}
  table.rep td{padding:8px 8px 8px 0;border-bottom:1px solid #f0f1f6;color:var(--text-soft);}
  table.rep td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;}
  table.rep td.rank{width:24px;}
  table.rep td.rank span{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:10.5px;font-weight:700;}
  table.rep td.name{color:var(--text);font-weight:500;}
  table.rep tr:last-child td{border-bottom:none;}
  .scrollTable{max-height:360px;overflow:auto;}
  table.rep th.sortable{cursor:pointer;user-select:none;}
  table.rep th.sortable:hover{color:var(--text);}
  .sortArrow{display:inline-block;width:9px;margin-left:3px;font-size:9px;color:var(--text-mute);vertical-align:middle;}
  .sortArrow.active{color:var(--primary);}
  .catLegendRow{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
  .clItem{display:flex;align-items:center;gap:8px;font-size:12px;}
  .clSwatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
  .clText{display:flex;flex-direction:column;line-height:1.4;}
  .clLabel{font-weight:700;color:var(--text);font-size:11.5px;}
  .clVal{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
  .clSub{color:var(--text-mute);font-size:10.5px;font-variant-numeric:tabular-nums;}
  @media(max-width:880px){
    .catLegendRow{gap:14px 20px;}
  }

  .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 16px;margin-bottom:20px;}
  .stickyBar{position:sticky;top:0;z-index:15;}
  .filterbar label{color:var(--text-mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-right:4px;font-weight:700;}
  .filterbar select, .filterbar input[type=date]{font-family:var(--font);font-size:12.5px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);}
  .grp{display:flex;align-items:center;gap:6px;}
  .pivotCompareSummary{display:flex;flex-wrap:wrap;gap:22px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:14px;}
  .pcsItem{display:flex;flex-direction:column;gap:2px;font-size:12px;}
  .pcsLabel{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);font-weight:700;}
  .pcsVal{font-weight:800;color:var(--text);font-size:13.5px;}
  .pcsSub{font-size:10.5px;color:var(--text-mute);}
  .excludeToggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-soft);cursor:pointer;user-select:none;}
  .excludeToggle input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;}