/* copa.css — additions on top of ap-kpi.css for the Profitability KPI page. */
/* Cards in the charts grids hold tables; without min-width:0 the table's intrinsic
   width blows the grid track out past the viewport (breaks phone layout). */
.charts > .card { min-width: 0; }
.charts.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .charts.two { grid-template-columns: 1fr; } }

.aihead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aihead h3 { margin: 0; }
.aibody { font-size: 13.5px; line-height: 1.6; }
.aibody h4 { margin: 14px 0 4px; font-size: 13.5px; }
.aibody ul { margin: 4px 0 8px 18px; padding: 0; }
.aibody li { margin: 2px 0; }
.aibody .aimeta { color: var(--muted); font-size: 12px; margin-top: 10px; }
.aibody .aiempty { color: var(--muted); font-style: italic; }

/* View-mode section toggling — .tiles/.charts carry display:grid, which beats the
   [hidden] attribute, so JS hides dashboard sections with this class instead. */
.viewhide { display: none !important; }

/* MTD · QTD · YTD summary screen */
#sumCard { margin-bottom: 18px; }
#sumT tbody td:first-child { font-weight: 600; }

/* Month-over-month comparison card */
#cmpCard { margin-bottom: 18px; }
.cmphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmphead h3 { margin: 0; }
.cmpctl { font-size: 12.5px; color: var(--ink2); display: flex; gap: 6px; align-items: center; }
.cmpctl select { background: var(--page); border: 1px solid var(--ring); border-radius: 6px; padding: 4px 8px; font: inherit; color: var(--ink); }
.cmpmov { margin-top: 16px; }
#cmpT tbody td:first-child { font-weight: 600; }

.negcm { color: #c0392b; font-weight: 600; }
#cct tr.scoped td { font-weight: 700; background: color-mix(in srgb, var(--seq450) 10%, transparent); }
.icchip { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px;
  background: var(--ring); color: var(--ink2); margin-left: 6px; vertical-align: 1px; }
.scheme .sub { line-height: 1.55; }

/* Phone (matches the ≤640px pattern in ap-kpi.css). The system picks the layout from
   the device viewport automatically — desktop gets the full tables, phones get the
   essential columns without sideways scrolling (column trims below are by position;
   keep them in sync when a <thead> changes). */
@media (max-width: 640px) {
  header nav { flex-wrap: wrap; }
  header nav a { padding: 6px 7px 8px; font-size: 12px; }
  .aihead { flex-wrap: wrap; }
  .aihead button { width: 100%; }
  .filters .ctl select { max-width: 46vw; }
  td.pj { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cmphead { flex-direction: column; align-items: flex-start; }
  .cmpctl { flex-wrap: wrap; }
  .cmpctl select { max-width: 40vw; }

  /* Phone-fit tables: essential columns only, no sideways scroll. */
  #cust, #trendT, #cmpT, #cmpMovers, #neg, #sumT, #sumCust, #cct, #proj { min-width: 0; }
  /* Customers (8 cols): keep Customer · Net rev · CM · CM% */
  #cust th:nth-child(3), #cust td:nth-child(3),
  #cust th:nth-child(4), #cust td:nth-child(4),
  #cust th:nth-child(7), #cust td:nth-child(7),
  #cust th:nth-child(8), #cust td:nth-child(8) { display: none; }
  /* Trend (9 cols): keep Period · Net rev · CM · CM% · ΔCM% */
  #trendT th:nth-child(3), #trendT td:nth-child(3),
  #trendT th:nth-child(7), #trendT td:nth-child(7),
  #trendT th:nth-child(8), #trendT td:nth-child(8),
  #trendT th:nth-child(9), #trendT td:nth-child(9) { display: none; }
  /* Customer swings (7 cols): keep Customer · Δ Net · CM A · CM B · Δ CM */
  #cmpMovers th:nth-child(2), #cmpMovers td:nth-child(2),
  #cmpMovers th:nth-child(3), #cmpMovers td:nth-child(3) { display: none; }
  /* Bleeders (6 cols): keep Product · Customer · Net rev · CM */
  #neg th:nth-child(3), #neg td:nth-child(3),
  #neg th:nth-child(6), #neg td:nth-child(6) { display: none; }
  /* Horizon customers (dynamic column count — MTD + quarters + YTD): Net + CM cells
     carry .phcut at render time; phones keep Customer + CM% per horizon */
  #sumCust .phcut { display: none; }
  /* Projects (6 cols): keep Project · Net rev · CM · CM% */
  #proj th:nth-child(5), #proj td:nth-child(5),
  #proj th:nth-child(6), #proj td:nth-child(6) { display: none; }
}

/* ---------- Print (Steve 2026-07-24): dashboard graphs + main data only. ----------
   The customer/product detail schedule (.noprint), filters, nav and buttons stay off
   the paper. Light palette forced — the selector must outrank ap-kpi.css's dark-mode
   `:root:not([data-theme="light"])` rule, hence the doubled selector. */
.printonly { display: none; }
@media print {
  :root, :root:not([data-theme="light"]) {
    color-scheme: light;
    --page: #fff; --surface: #fff; --ink: #000; --ink2: #333; --muted: #555;
    --grid: #ddd; --axis: #999; --ring: #ccc;
    --seq250: #b9d3f2; --seq350: #8fb6e8; --seq450: #5b8fd0; --seq550: #3d6ea8; --seq650: #2a4f7c;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header, .filters, .noprint, #btnReview, .hint, .bootmsg, .cmpctl, [hidden] { display: none !important; }
  .printonly { display: block; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .card, .tile { border: 1px solid #ccc; break-inside: avoid; }
  .charts, .charts.two { display: block; }
  .charts > .card, #cmpCard, .card { margin-bottom: 12px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile .val { font-size: 22px; }
  .tablewrap { overflow: visible; }
  .tablewrap table { min-width: 0; }
  tr.detail { display: none; }
  /* Paper has no scrollbar: compress the wide tables (9-col trend, up-to-16-col
     horizon customers) so no column falls off the page edge. Headers may wrap. */
  table { font-size: 11px; }
  th { white-space: normal; }
  th, td { padding: 4px 6px; }
  #sumCust { font-size: 9.5px; }
  #sumCust th, #sumCust td { padding: 3px 4px; }
}
@page { margin: 12mm; }