/* 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 .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:20px 14px;}
    .sidebar.mobileOpen{transform:translateX(0);}
    .navToggle{display:none;}
    .sideBrandRow,.viewAsWrap,.sideFoot{display:block;}
    .navitem .lbl,.navFolderHead .lbl,.navFolderHead .chev{display:inline;}
    .navFolderHead{justify-content:flex-start;padding:9px 10px 5px;}
    .mobileMenuBtn{display:flex;position:fixed;top:14px;left:14px;z-index:40;box-shadow:var(--shadow);margin-right:0;}
    .topbar h1{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;}
  }