/* ===== gp_monthly_chart_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. The form's rules live here because
   Anvil's server strips a <style> block out of an HTML template.

   NO ROOT RULE. The .gp-monthly-root div exists only because this form has two
   top-level nodes. .gp-monthly-section keeps its margin-bottom: 1.5rem and
   collapses it through that empty wrapper onto the gap to the shell's
   .gp-section-container.

   TWO SCOPES, NOT ONE, AND THAT IS THE POINT OF THIS FILE.
   window.pxShowOverlay('gp-month-drill-overlay', { mode: 'viewport' }) MOVES the
   overlay node into the shared layout's #px-modal-portal while it is open, i.e.
   outside .gp-monthly-root. Anything the portal can carry is therefore scoped on
   .gp-month-drill-overlay, which travels with the node; only what stays inside
   the form is scoped :where(.gp-monthly-root). .gp-monthly-table-wrap is worn on
   both sides and takes the union of the two, which is what styles the modal's
   wrap. Scoping the modal rules under the form
   root instead would leave the modal unstyled the moment it opened, with nothing
   thrown.

   .gp-month-drill-overlay's own rule is a BARE CLASS. It is the
   subject of its own rule, so :where(.gp-month-drill-overlay)
   .gp-month-drill-overlay would never match. It keeps declaring font-family and
   colour only: the sheet, the centring, the portal, Escape, the backdrop click
   and the page-scroll lock all belong to the shared .px-modal-overlay.

   .gp-section-title IS NOT DECLARED HERE. It is worn by gp_coverage_html and
   gp_home_table_html as well, and scoping it to this form would silently strip
   both of their headings of their size, weight, colour, spacing and flex
   layout. It lives in theme/assets/gross_profit/gross_profit.css, scoped
   :where(.gp-dashboard), and nothing else declares it.

   .gp-monthly-header-note is the hint span's styling, which a template may not
   hold as an inline style attribute. It is deliberately not shared with
   gp_home_table_html's identical note, so a
   later copy edit on one cannot move the other.

   NO DESIGNER GATE. Nothing here hides content until JavaScript runs. The drill
   overlay is hidden by the dependency's .px-modal-overlay, which is injected
   into the head at runtime and so is absent from the canvas: the canvas shows
   the modal open.

   THIS FILE SORTS BEFORE gross_profit.css, so the shell wins a document-order
   tie. One selector is declared on
   both sides, .gp-month-drill-modal: the shell declares scrollbar-width and
   scrollbar-color on it, this file declares the box (background, radius,
   padding, max-width, overflow-y, animation), so the two sets are disjoint and
   there is no tie for the order to decide. #gp-monthly-table .gp-currency below
   is an id-carrying override of the shell's .gp-table .gp-currency and wins on
   specificity (1,1,0 against 0,2,0) either way. The gpModalFadeIn keyframes the
   modal animates with are the shell's and stay the shell's. */

:where(.gp-monthly-root) .gp-monthly-section {
    margin-bottom: 1.5rem;
}
:where(.gp-monthly-root) .gp-monthly-section .gp-card {
    padding: 1.5rem;
    overflow: hidden;
}
:where(.gp-monthly-root) .gp-chart-container {
    height: 430px;
    margin-bottom: 1rem;
    width: 100%;
    overflow: hidden;
}
/* Worn by the monthly wrap inside the form AND by the drill modal's wrap, which
   the portal carries out of the form root, so the scope is the union. */
:where(.gp-monthly-root, .gp-month-drill-overlay) .gp-monthly-table-wrap {
    overflow-x: hidden;
}
/* Query container for the column-priority rule below: responds to the
   table's ACTUAL width, not the window. Scoped to the monthly table's own
   wrap (not the shared .gp-monthly-table-wrap class) so the drill-modal
   wrap isn't made an idle query container. */
:where(.gp-monthly-root) .gp-col-priority-host {
    container-type: inline-size;
}

/* Monthly summary table: fixed layout, centered columns */
:where(.gp-monthly-root) #gp-monthly-table { table-layout: fixed; }
:where(.gp-monthly-root) #gp-monthly-table th,
:where(.gp-monthly-root) #gp-monthly-table td { text-align: center; }
:where(.gp-monthly-root) #gp-monthly-table th:first-child,
:where(.gp-monthly-root) #gp-monthly-table td:first-child { text-align: left; width: 25%; white-space: nowrap; }
:where(.gp-monthly-root) #gp-monthly-table .gp-currency { text-align: center; }

/* Narrow table: drop the two NuCare detail cols (.gp-nc-detail = NC Rev +
   NC Cost); NC Profit stays as the summary. Class-based (not nth-child) so
   a future column insert can't silently shift what hides. Hidden below
   ~1300px container width, where all columns no longer fit comfortably.
   Gated to >=769px so it never fires in the <769px card layout, which has
   vertical room and shows every field (so no card-mode counter-rule). */
@media (min-width: 769px) {
  @container (max-width: 1300px) {
    :where(.gp-monthly-root) #gp-monthly-table .gp-nc-detail { display: none; }
  }
}

/* Month drill-down modal overlay.

   The shared `.px-modal-overlay`, opened and closed through
   pxShowOverlay / pxHideOverlay in viewport mode, for the reasons
   written out over .gp-home-drill-overlay in gp_home_table_html. Only
   this screen's typeface and colour are declared here; the sheet, the
   centring, the portal, Escape, the backdrop click and the page-scroll
   lock are all the shared contract. */
.gp-month-drill-overlay {
    font-family: var(--px-font-display);
    color: var(--px-text-primary);
}

:where(.gp-month-drill-overlay) .gp-month-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-y: auto;
    animation: gpModalFadeIn 0.25s ease;
}
/* The drill table is auto-layout and can exceed the capped modal width;
   scroll it horizontally here instead of clipping (the modal itself only
   scrolls vertically). Scoped to the modal so the fixed-layout monthly
   wrap keeps overflow-x: hidden. */
:where(.gp-month-drill-overlay) .gp-month-drill-modal .gp-monthly-table-wrap {
    overflow-x: auto;
}
:where(.gp-month-drill-overlay) .gp-month-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
:where(.gp-month-drill-overlay) .gp-month-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--px-text-primary);
}
:where(.gp-month-drill-overlay) .gp-month-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-month-drill-overlay) .gp-month-modal-close:hover { color: var(--px-text-primary); }

:where(.gp-monthly-root) .gp-fee-info {
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--px-text-muted);
    border: 1px solid var(--px-border);
    border-radius: 50%;
    cursor: help;
    line-height: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

/* The hint span's styling. */
:where(.gp-monthly-root) .gp-monthly-header-note {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    font-weight: 400;
}

@media (max-width: 768px) {
  :where(.gp-monthly-root) .gp-chart-container { height: 280px; }
  :where(.gp-monthly-root) .gp-monthly-section .gp-card { padding: 1rem; }
  :where(.gp-month-drill-overlay) .gp-month-drill-modal { padding: 1.25rem; width: 95%; }

  /* Month drill table → card layout */
  :where(.gp-month-drill-overlay) #gp-drill-month-table { table-layout: auto; }
  :where(.gp-month-drill-overlay) #gp-drill-month-table thead { display: none; }
  :where(.gp-month-drill-overlay) #gp-drill-month-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-month-drill-overlay) #gp-drill-month-table tbody tr:hover td {
    background: transparent;
  }
  :where(.gp-month-drill-overlay) #gp-drill-month-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: none;
    text-align: right;
  }
  :where(.gp-month-drill-overlay) #gp-drill-month-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-month-drill-overlay) #gp-drill-month-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;
  }

  /* Monthly table → card layout */
  :where(.gp-monthly-root) #gp-monthly-table { table-layout: auto; }
  :where(.gp-monthly-root) #gp-monthly-table thead { display: none; }
  :where(.gp-monthly-root) #gp-monthly-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-monthly-root) #gp-monthly-table tbody tr:hover {
    border-color: var(--px-chart-cyan);
  }
  :where(.gp-monthly-root) #gp-monthly-table tbody tr:hover td {
    background: transparent;
  }
  :where(.gp-monthly-root) #gp-monthly-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: none;
    text-align: right;
  }
  :where(.gp-monthly-root) #gp-monthly-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-monthly-root) #gp-monthly-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-monthly-root) .gp-chart-container { height: 220px; }
  :where(.gp-month-drill-overlay) .gp-month-drill-modal { padding: 1rem; width: 98%; max-height: 85vh; }
  :where(.gp-monthly-root) #gp-monthly-table tbody tr { padding: 0.5rem; }
  :where(.gp-monthly-root) #gp-monthly-table tbody td:first-child { font-size: 0.8rem; }
  :where(.gp-month-drill-overlay) #gp-drill-month-table tbody tr { padding: 0.5rem; }
  :where(.gp-month-drill-overlay) #gp-drill-month-table tbody td:first-child { font-size: 0.8rem; }
}