/* ===== gp_coverage_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.

   ROOT RULE, BARE CLASS. .gp-coverage-section is the form root, so its own rule
   cannot be scoped under itself. It keeps margin-bottom: 1.5rem and nothing
   else: this is a leaf inside the shell's .gp-section-container, which owns the
   reveal, the opacity and its own margin, so the flex/position pair an HTML-form
   SCREEN root takes does not belong here.

   THREE CLASSES CARRY WHAT A TEMPLATE MAY NOT HOLD AS AN INLINE STYLE:
     .gp-si-nucare             the NuCare source icon's colour pair
     .gp-coverage-card-spaced  margin-top: 1.5rem on three cards
     .gp-coverage-table-scroll overflow-x: auto on three table wrappers
   .gp-si-nucare carries two classes, like its four siblings, so it beats the
   .gp-source-icon base rule on specificity.

   .gp-section-title IS NOT DECLARED HERE, deliberately. It is worn by the
   heading in this form but declared once, in gross_profit.css. Copying it here
   would give the estate two declarations to drift.

   THIS FILE SORTS BEFORE gross_profit.css, so the shell wins a document-order
   tie. The only class declared on both sides is the tooltip: the shell declares .gp-tooltip .gp-tooltip-text
   (0,2,0) and .gp-tooltip:hover .gp-tooltip-text (0,3,0); the multiline override
   below is .gp-tooltip.gp-tooltip-multiline .gp-tooltip-text (0,3,0) and its two
   :focus forms at (0,4,0). The shell's :hover rule declares visibility and
   opacity only, and the multiline rule declares neither, so the two sets are
   disjoint and no tie exists for the order to decide. The :where() wrapper adds
   no specificity.

   NO DESIGNER GATE. Nothing in this file hides content until JavaScript runs.
   .gp-unknown-items { display: none } is the collapsed state of a panel the
   staff-facing toggle opens, which is how it renders on a cold load today, and
   the three cards the module can hide are hidden through element.style, not
   through a class this file declares. */

.gp-coverage-section {
    margin-bottom: 1.5rem;
}

:where(.gp-coverage-section) .gp-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    :where(.gp-coverage-section) .gp-coverage-grid { grid-template-columns: 1fr; }
}

:where(.gp-coverage-section) .gp-coverage-card {
    background: var(--px-bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--px-border);
    box-shadow: var(--px-shadow);
}
:where(.gp-coverage-section) .gp-coverage-card-spaced {
    margin-top: 1.5rem;
}
:where(.gp-coverage-section) .gp-coverage-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--px-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--px-border);
}

:where(.gp-coverage-section) .gp-source-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}
:where(.gp-coverage-section) .gp-source-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
:where(.gp-coverage-section) .gp-source-icon.gp-si-revenue { background: rgba(5, 150, 105, 0.1); color: color-mix(in srgb, var(--px-chart-emerald) 65%, var(--px-text-primary)); }
:where(.gp-coverage-section) .gp-source-icon.gp-si-cost { background: rgba(220, 38, 38, 0.1); color: var(--px-chart-coral); }
:where(.gp-coverage-section) .gp-source-icon.gp-si-etp { background: rgba(8, 145, 178, 0.1); color: color-mix(in srgb, var(--px-chart-cyan) 65%, var(--px-text-primary)); }
:where(.gp-coverage-section) .gp-source-icon.gp-si-home { background: rgba(124, 58, 237, 0.1); color: var(--px-chart-violet); }
:where(.gp-coverage-section) .gp-source-icon.gp-si-nucare { background: rgba(245,158,11,0.1); color: color-mix(in srgb, var(--px-chart-amber) 65%, var(--px-text-primary)); }
:where(.gp-coverage-section) .gp-source-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--px-text-primary);
}
:where(.gp-coverage-section) .gp-source-desc {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    margin-top: 1px;
}

:where(.gp-coverage-section) .gp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--px-border);
}
:where(.gp-coverage-section) .gp-stat-row:last-child { border-bottom: none; }
:where(.gp-coverage-section) .gp-stat-label {
    font-size: 0.75rem;
    color: var(--px-text-secondary);
}
:where(.gp-coverage-section) .gp-stat-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: 6px;
    user-select: none;
}

/* Multiline tooltip override (base gp-tooltip styles live in gp main template) */
:where(.gp-coverage-section) .gp-tooltip.gp-tooltip-multiline .gp-tooltip-text {
    white-space: pre-line;
    max-width: 420px;
    width: max-content;
    text-align: left;
    line-height: 1.5;
    left: auto;
    right: 0;
    transform: none;
    font-size: 0.7rem;
}
:where(.gp-coverage-section) .gp-tooltip.gp-tooltip-multiline:focus .gp-tooltip-text,
:where(.gp-coverage-section) .gp-tooltip.gp-tooltip-multiline:focus-within .gp-tooltip-text {
    visibility: visible;
    opacity: 1;
}
@media (max-width: 768px) {
    :where(.gp-coverage-section) .gp-tooltip.gp-tooltip-multiline .gp-tooltip-text {
        max-width: 260px;
        right: auto;
        left: 0;
        bottom: auto;
        top: 125%;
    }
    :where(.gp-coverage-section) .gp-coverage-card { overflow: visible; }
    :where(.gp-coverage-section) .gp-stat-row { position: relative; }
}
:where(.gp-coverage-section) .gp-stat-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
}
:where(.gp-coverage-section) .gp-stat-good { color: color-mix(in srgb, var(--px-chart-emerald) 65%, var(--px-text-primary)); }
:where(.gp-coverage-section) .gp-stat-warn { color: color-mix(in srgb, var(--px-chart-amber) 65%, var(--px-text-primary)); }
:where(.gp-coverage-section) .gp-stat-bar {
    width: 100px;
    height: 6px;
    background: var(--px-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
:where(.gp-coverage-section) .gp-stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

:where(.gp-coverage-section) .gp-coverage-table-scroll {
    overflow-x: auto;
}

:where(.gp-coverage-section) .gp-unknown-toggle {
    font-family: var(--px-font-display);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--px-chart-cyan) 65%, var(--px-text-primary));
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-weight: 500;
}
:where(.gp-coverage-section) .gp-unknown-toggle:hover { text-decoration: underline; }
:where(.gp-coverage-section) .gp-unknown-items {
    display: none;
    margin-top: 0.5rem;
}
:where(.gp-coverage-section) .gp-unknown-items.open { display: block; }
:where(.gp-coverage-section) .gp-unknown-explainer {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    padding: 0.75rem;
    background: var(--px-bg-elevated);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}