/* ===== gp_home_table_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is what styles
   the designer canvas as well as the running app. Three rules carry what a
   template may not hold as an inline style= attribute.

   TWO SCOPES, NOT ONE, and that is the whole point of this file. The form has
   two top-level nodes and #gp-home-drill-overlay is one of them:
   window.pxShowOverlay('gp-home-drill-overlay', { mode: 'viewport' }) MOVES
   that node into the shared layout's #px-modal-portal while it is open, i.e.
   out of .gp-home-root and out of .gp-dashboard entirely. So:

     - everything inside the section card is scoped :where(.gp-home-root);
     - everything inside the drill modal is scoped
       :where(.gp-home-drill-overlay), the class the node keeps wherever in the
       document it is;
     - the .gp-home-table-scroll wrapper exists in both, so it takes both.

   Scoped :where(.gp-home-root) the modal rules would stop matching the moment
   the modal opened and it would render unstyled, with nothing thrown. The
   shell's share of the same problem - .gp-table, .gp-currency, .gp-positive,
   .gp-negative, the two badges and the :root tokens, all of which the modal's
   content wears - is gross_profit.css's, which scopes them on the union of
   .gp-dashboard and the two overlay classes.

   :where() adds ZERO specificity on both sides, so no rule here changes which
   declaration wins.

   .gp-home-drill-overlay's own rule is BARE. It is the
   subject of its own rule, so :where(.gp-home-drill-overlay)
   .gp-home-drill-overlay would never match. It must also keep declaring only
   font-family and color: the shared .px-modal-overlay owns the geometry.

   .gp-section-title IS NOT DECLARED HERE. This form wears it on its heading but
   it is declared once, in gross_profit.css. Copying it here would give this
   section a second, drifting definition.

   @keyframes gpModalFadeIn, which .gp-home-drill-modal animates on, is the
   shell's and stays the shell's. Keyframes are global, so it reaches this file
   from wherever it is declared. */

:where(.gp-home-root) .gp-home-section {
  margin-bottom: 1.5rem;
}

:where(.gp-home-root) .gp-home-name {
  font-weight: 500;
  color: var(--px-text-primary);
  cursor: pointer;
}
:where(.gp-home-root) .gp-home-name:hover {
  text-decoration: underline;
  color: color-mix(in srgb, var(--px-chart-cyan) 65%, var(--px-text-primary));
}

:where(.gp-home-root) .gp-home-sparkline-cell {
  width: 120px;
  height: 30px;
}

/* Home drill-down modal.

   The overlay itself is the shared `.px-modal-overlay` - the dimmed,
   blurred, viewport-fixed, flex-centred sheet the whole estate already
   uses - and it is opened and closed through pxShowOverlay /
   pxHideOverlay. Those move it into `#px-modal-portal` in the shared
   layout while it is open and put it back afterwards, which is what
   lets it be viewport-centred at all: `.gp-dashboard` sets
   `isolation: isolate` at `z-index: 0`, so anything left inside it
   paints under the layout's `z-index: 40` drawer whatever z-index it
   claims. Escape, a backdrop click and the page-scroll lock all come
   with the shared overlay; none of them are written here.

   `mode: 'viewport'` because this dialog covers the drawer too rather
   than sitting in the gap beside it.

   Only what is NOT shared is declared below: this screen's typeface and
   the modal box itself. */
.gp-home-drill-overlay {
  font-family: var(--px-font-display);
  color: var(--px-text-primary);
}

:where(.gp-home-drill-overlay) .gp-home-drill-modal {
  background: var(--px-bg-card);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--px-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 900px;
  width: 92%;
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
  animation: gpModalFadeIn 0.25s ease;
}
:where(.gp-home-drill-overlay) .gp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
:where(.gp-home-drill-overlay) .gp-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--px-text-primary);
}
:where(.gp-home-drill-overlay) .gp-modal-close {
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--px-text-muted);
  background: none;
  border: none;
  padding: 0 0.5rem;
  line-height: 1;
}
:where(.gp-home-drill-overlay) .gp-modal-close:hover { color: var(--px-text-primary); }
:where(.gp-home-drill-overlay) .gp-modal-chart { height: 320px; margin-bottom: 1rem; width: 100%; overflow: hidden; }
:where(.gp-home-drill-overlay) .gp-modal-kpi-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
:where(.gp-home-drill-overlay) .gp-modal-kpi {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  background: var(--px-bg-elevated);
  border-radius: 10px;
}
:where(.gp-home-drill-overlay) .gp-modal-kpi-value {
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
}
:where(.gp-home-drill-overlay) .gp-modal-kpi-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
  margin-top: 2px;
}

/* Force badge to stay on same line as month name */
:where(.gp-home-drill-overlay) #gp-home-drill-table td:first-child { white-space: nowrap; }

/* The three declarations that were inline style= attributes on the template.
   .gp-home-trend-col is written as a compound with .gp-table th: the section's
   .gp-table th rule is (0,1,1) and this class alone is (0,1,0), and the inline
   width it replaces beat everything absolutely. The doubling keeps that true
   at no cost, the same belt and braces ow_items_table_html.css uses for
   .px-table th.ow-items-details-col. */
:where(.gp-home-root) .gp-home-header-note {
  font-size: 0.7rem;
  color: var(--px-text-muted);
  font-weight: 400;
}
:where(.gp-home-root, .gp-home-drill-overlay) .gp-home-table-scroll {
  overflow-x: auto;
}
:where(.gp-home-root) .gp-table th.gp-home-trend-col {
  width: 120px;
}

@media (max-width: 768px) {
  :where(.gp-home-drill-overlay) .gp-home-drill-modal { padding: 1.25rem; width: 95%; }
  :where(.gp-home-drill-overlay) .gp-modal-chart { height: 250px; }
  :where(.gp-home-drill-overlay) .gp-modal-kpi-row { gap: 0.5rem; }
  :where(.gp-home-drill-overlay) .gp-modal-kpi { padding: 0.5rem; }
  :where(.gp-home-drill-overlay) .gp-modal-kpi-value { font-size: 0.9rem; }

  /* Home summary table -> card layout */
  :where(.gp-home-root) #gp-home-table { table-layout: auto; }
  :where(.gp-home-root) #gp-home-table thead { display: none; }
  :where(.gp-home-root) #gp-home-table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--px-bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--px-border);
    cursor: pointer;
  }
  :where(.gp-home-root) #gp-home-table tbody tr:hover {
    border-color: var(--px-chart-cyan);
  }
  :where(.gp-home-root) #gp-home-table tbody tr:hover td {
    background: transparent;
  }
  :where(.gp-home-root) #gp-home-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: none;
    text-align: right;
  }
  :where(.gp-home-root) #gp-home-table tbody td:first-child {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--px-text-primary);
    padding-bottom: 0.4rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--px-border);
    display: block;
    text-align: left;
  }
  :where(.gp-home-root) #gp-home-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--px-text-muted);
    text-align: left;
  }
  :where(.gp-home-root) #gp-home-table tbody td:last-child { display: none; }
  :where(.gp-home-root) .gp-home-sparkline-cell { width: 90px; }

  /* Home drill table -> card layout */
  :where(.gp-home-drill-overlay) #gp-home-drill-table { table-layout: auto; }
  :where(.gp-home-drill-overlay) #gp-home-drill-table thead { display: none; }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--px-bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--px-border);
  }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody tr:hover td {
    background: transparent;
  }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: none;
    text-align: right;
    white-space: normal;
  }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody td:first-child {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--px-text-primary);
    padding-bottom: 0.4rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--px-border);
    display: block;
    text-align: left;
  }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--px-text-muted);
    text-align: left;
  }
}
@media (max-width: 480px) {
  :where(.gp-home-drill-overlay) .gp-home-drill-modal { padding: 1rem; width: 98%; max-height: 85vh; }
  :where(.gp-home-drill-overlay) .gp-modal-chart { height: 200px; }
  :where(.gp-home-drill-overlay) .gp-modal-kpi-row { flex-wrap: wrap; gap: 0.4rem; }
  :where(.gp-home-drill-overlay) .gp-modal-kpi { min-width: calc(50% - 0.4rem); }
  :where(.gp-home-drill-overlay) .gp-modal-kpi-value { font-size: 0.8rem; }
  :where(.gp-home-root) .gp-home-sparkline-cell { width: 70px; height: 24px; }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody tr { padding: 0.5rem; }
  :where(.gp-home-drill-overlay) #gp-home-drill-table tbody td:first-child { font-size: 0.8rem; }
  :where(.gp-home-root) #gp-home-table tbody tr { padding: 0.5rem; }
  :where(.gp-home-root) #gp-home-table tbody td:first-child { font-size: 0.8rem; }
}