/* dashboard-components.css
   Filter bars, multi-select dropdowns, KPI cards, comparison summaries,
   pivot tables, pager, search boxes, and responsive breakpoints.
*/

  .msWrap{position:relative;}
  .msBtn{font-family:var(--font);font-size:12.5px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);cursor:pointer;min-width:118px;text-align:left;}
  .msBtn:after{content:'▾';float:right;color:var(--text-mute);margin-left:8px;}
  .msPanel{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:8px;min-width:210px;max-height:300px;overflow-y:auto;z-index:30;max-width:calc(100vw - 24px);}
  .msSearch{position:sticky;top:-8px;z-index:1;}
  #msGrowthProduct .msPanel, #msProduct .msPanel{min-width:280px;max-height:340px;}
  .msPanel.open{display:block;}
  .msAll,.msItem{display:flex;align-items:center;gap:8px;padding:6px 7px;font-size:12.5px;border-radius:6px;cursor:pointer;color:var(--text-soft);}
  .msSearch{width:100%;box-sizing:border-box;font-family:var(--font);font-size:12px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;background:var(--surface-2);}
  .msAll{border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:8px;font-weight:700;color:var(--text);}
  .msItem:hover,.msAll:hover{background:var(--surface-2);}

  .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px;}
  .kpi{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 17px;}
  .kpi:nth-child(2){border-left-color:var(--accent);}
  .kpi:nth-child(3){border-left-color:var(--amber);}
  .kpi:nth-child(4){border-left-color:var(--pink);}
  .kpi:nth-child(5){border-left-color:var(--cyan);}
  .kpi:nth-child(6){border-left-color:var(--primary);}
  /* PO report has 6 KPI cards — fit them on one row on desktop, wrap smartly below. */
  #scpoKpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  #scpoKpis .kpi .value{font-size:16.5px;}
  .kpi .label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-mute);margin-bottom:7px;font-weight:700;}
  .kpi .value{font-size:19px;font-weight:800;letter-spacing:-.3px;}
  .delta{font-size:10.5px;font-weight:700;margin-top:5px;padding:2px 8px;border-radius:20px;display:inline-block;}
  .delta.up{background:var(--success-soft);color:var(--success);}
  .delta.down{background:var(--danger-soft);color:var(--danger);}
  .kpi .prior{font-size:10.5px;color:var(--text-mute);margin-top:4px;}

  .row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch;}
  .row .card{margin-bottom:0;}
  .legend2{display:flex;gap:16px;font-size:11.5px;color:var(--text-soft);margin-bottom:10px;}
  .legend2 span{display:inline-flex;align-items:center;gap:5px;}
  .swatch{width:14px;height:3px;display:inline-block;border-radius:2px;}

  .panel{display:none;}
  .panel.active{display:block;}
  #dashEmpty, #resultsBody{display:none;}
  #dashEmpty{font-size:13px;color:var(--text-mute);padding:60px 0;text-align:center;}

  table.pivot{width:100%;border-collapse:collapse;font-size:12px;}
  table.pivot th{background:var(--primary);color:#fff;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:10px 11px;text-align:right;position:sticky;top:0;z-index:3;}
  table.pivot th:first-child{text-align:left;border-radius:8px 0 0 0;}
  table.pivot th:last-child{border-radius:0 8px 0 0;}
  table.pivot td{padding:8px 11px;text-align:right;border-bottom:1px solid #f0f1f6;color:var(--text-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
  table.pivot td:first-child{text-align:left;color:var(--text);}
  tr.brandRow{background:var(--primary-soft);cursor:pointer;}
  tr.brandRow:hover{background:#e3e5fc;}
  tr.brandRow td{font-weight:700;}
  tr.productRow td{color:var(--text-soft);}
  tr.productRow td:first-child{padding-left:30px;font-weight:400;}
  tr.grandRow{background:var(--text);}
  tr.grandRow td{color:#fff;font-weight:700;border-bottom:none;}
  table.rep tr.grandRow td.num{color:#fff;}
  td.total{font-weight:700;color:var(--text);}
  .pivotWrap{overflow:auto;max-height:65vh;border:1px solid var(--border);border-radius:10px;}
  .expandIcon{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:4px;background:var(--primary);color:#fff;font-weight:700;font-size:11px;margin-right:6px;}

  .mobileMenuBtn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:16px;cursor:pointer;margin-right:10px;flex-shrink:0;}
  .sidebarBackdrop{display:none;position:fixed;inset:0;background:rgba(15,17,35,.45);z-index:45;}
  .sidebarBackdrop.show{display:block;}
  .scrollWrapX{overflow-x:auto;}

  @media(max-width:880px){
    .app{display:block;}
    .sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;transform:translateX(-100%);transition:transform .2s ease;z-index:50;padding:16px 12px;}
    .sidebar.mobileOpen{transform:translateX(0);}
    .navToggle{display:none;}
    /* On mobile the drawer is always "expanded" -- show every label/chevron that
       normally only appears when .sidebar.expanded is toggled on desktop. */
    .sidebar.mobileOpen .sideBrandRow,
    .sidebar.mobileOpen .sideUserBlock,
    .sidebar.mobileOpen .sideCopyright{display:block;}
    .sidebar.mobileOpen .n1-head .lbl,
    .sidebar.mobileOpen .n1-head .chev,
    .sidebar.mobileOpen .n2-head .lbl,
    .sidebar.mobileOpen .n2-head .chev,
    .sidebar.mobileOpen .navitem .lbl{display:inline;}
    .sidebar.mobileOpen .n2-head{padding-left:22px;justify-content:flex-start;}
    .sidebar.mobileOpen .navitem{justify-content:flex-start;}
    /* Let the accordion collapse/expand work the same as desktop -- the toggle JS
       controls each group's inline display; don't force them all open. */
    .mobileMenuBtn{display:flex;position:fixed;top:14px;left:14px;z-index:40;box-shadow:var(--shadow);margin-right:0;}
    .topbar .titleWrap{margin-left:48px;}
    .content{padding:16px 14px 50px;}
    .topbar{flex-wrap:wrap;gap:10px;}
    .topbar h1{font-size:17px;}
    .kpis{grid-template-columns:repeat(2,1fr);gap:10px;}
    .kpi{padding:12px 13px;}
    .row{grid-template-columns:1fr;}
    .filterbar{gap:8px;padding:10px 12px;}
    .filterbar select,.filterbar input[type=date]{font-size:12px;padding:6px 8px;}
    .stickyBar{top:0;}
    table.pivot{font-size:11px;}
    table.pivot td,table.pivot th{padding:7px 8px;}
  }
  @media(max-width:480px){
    .kpis{grid-template-columns:1fr 1fr;}
    .kpi .value{font-size:16px;}
    .card{padding:14px 15px;}
  }
  /* ---- Picking Faults Report — mobile fixes ---- */
  @media(max-width:880px){
    /* filter bar: stack controls into a scrollable wrap, don't try to fit in one line */
    .stickyBar{flex-wrap:wrap;gap:8px;}
    .stickyBar .grp{flex-shrink:0;}

    /* two-column chart rows collapse to one column on tablet */
    .row{grid-template-columns:1fr;gap:14px;}

    /* picker performance table: tighten column widths */
    #pickerPerfBody td, #pickerPerfFoot td{font-size:11.5px;padding:7px 8px;white-space:nowrap;}

    /* fault type summary: let it scroll horizontally if needed */
    #faultTypeSummaryBody td, #faultTypeSummaryFoot td{font-size:12px;padding:7px 8px;}

    /* checker ratio: reduce chart height so it doesn't dominate */
    #checkerRatioChart{height:180px !important;}

    /* submission table: tighter cells, allow line-breaks in fault detail */
    #faultsSubmissionsBody td, #faultsSubTabBody td{font-size:11.5px;padding:7px 6px;}
    #faultsSubmissionsBody td:last-child, #faultsSubTabBody td:last-child{white-space:normal;max-width:140px;}

    /* file search boxes: full width so they don't overflow the card */
    .fileSearch{min-width:0;width:100%;max-width:100%;box-sizing:border-box;}

    /* cardHead: stack heading + search vertically on mobile */
    .cardHead{flex-wrap:wrap;gap:10px;}
    .cardHead .fileSearch{width:100%;}

    /* wrapHead tables: reduce min-width per column on mobile */
    table.rep.wrapHead th, table.pivot.wrapHead th{min-width:70px;}

    /* pager: ensure it stays centered and doesn't overflow */
    .pager{flex-wrap:wrap;gap:6px;}
  }
  @media(max-width:480px){
    /* on phone: make KPI row single column so values aren't squashed */
    .kpis{grid-template-columns:1fr;}
    .kpi{padding:11px 13px;}
    .kpi .value{font-size:18px;}

    /* filter bar controls go full width on phone */
    .stickyBar .grp select, .stickyBar .grp input{width:100%;box-sizing:border-box;}
    .stickyBar .grp{width:100%;}
    .msBtn{width:100%;box-sizing:border-box;}

    /* picker performance: hide ratio col on tiny screens to make room */
    #pickerPerfBody tr td:nth-child(3), #pickerPerfFoot td:nth-child(3),
    #pickerPerfBody tr td:nth-child(1), #pickerPerfFoot td:nth-child(1){ display:none; }

    /* submission table columns: hide customer on phone (visible in expanded view) */
    #faultsSubmissionsBody td:nth-child(6), #faultsSubTabBody td:nth-child(6){display:none;}

    /* fault date chart: reduce height so it fits without scrolling */
    #faultsByDateChart{height:200px !important;}

    /* summary strip: stack items vertically */
    .pivotCompareSummary{flex-direction:column;gap:10px;}
    .pcsItem{border-bottom:1px solid var(--border);padding-bottom:8px;}
    .pcsItem:last-child{border-bottom:none;}
  }

  /* ── PO Working (Planning ▸ Procurement) ─────────────────────────────── */
  .poPill{display:inline-block;font-size:11px;font-weight:700;color:#fff;padding:2px 9px;border-radius:999px;letter-spacing:.3px;text-transform:capitalize;vertical-align:middle;}
  .poPrefix{display:flex;align-items:center;padding:0 10px;background:var(--surface-2);border:1px solid var(--border);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-weight:700;color:var(--text-soft);white-space:nowrap;}
  /* PO Detail: freeze the header row + the first two columns (Batch, PO #) */
  #plTable thead th{position:sticky;top:0;z-index:3;}
  #plTable th:nth-child(1),#plTable td:nth-child(1){position:sticky;left:0;z-index:2;width:96px;min-width:96px;}
  #plTable th:nth-child(2),#plTable td:nth-child(2){position:sticky;left:96px;z-index:2;width:112px;min-width:112px;}
  #plTable tbody td:nth-child(1),#plTable tbody td:nth-child(2){background:var(--surface);}
  #plTable tfoot td:nth-child(1),#plTable tfoot td:nth-child(2){background:var(--surface-2);}
  #plTable thead th:nth-child(1),#plTable thead th:nth-child(2){z-index:4;}
  #plTable tfoot td{position:sticky;bottom:0;background:var(--surface-2);font-weight:700;z-index:1;}
  .poRollup{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px;}
  .poRollup .kpi .value.gp{color:var(--success);}
  .poLines input.poLineIn{width:82px;text-align:right;padding:5px 7px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);}
  .poLines input.poLineIn:focus{outline:none;border-color:var(--primary-2);box-shadow:0 0 0 2px var(--primary-soft);}
  .poLines td, .poLines th{white-space:nowrap;}
  .poDel{color:var(--danger);font-weight:700;font-size:11px;}
  .poTypeahead{position:absolute;z-index:40;top:100%;right:0;margin-top:4px;width:420px;max-width:80vw;max-height:340px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
  .poTypeItem{display:flex;flex-direction:column;gap:2px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);}
  .poTypeItem:last-child{border-bottom:none;}
  .poTypeItem:hover{background:var(--surface-2);}
  .poTypeMeta{font-size:11px;color:var(--text-mute);}
  .poModalBk{position:fixed;inset:0;background:rgba(20,25,50,.42);display:flex;align-items:center;justify-content:center;z-index:120;padding:20px;}
  .poModal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(20,25,50,.28);padding:22px;width:420px;max-width:100%;}
  @media(max-width:640px){
    .poTypeahead{width:88vw;}
    .poLines input.poLineIn{width:64px;}
  }