/* ===== gp_header_html (HTML form, scoped) =====
   The form's rules live here because Anvil's server strips a style block out
   of an HTML template. Loaded eagerly from anvil.yaml
   native_deps.head_html, which is what styles the designer canvas as well as
   the running app.

   ROOT RULE, BARE CLASS. .gp-header is the form root, so its own rule stays
   unscoped and outranks the :where()-scoped rules below. This form sits in the
   shell's header slot and is a plain block child of the shell's header mount
   point, so the root rule gains nothing: no flex: 1 0 auto, no min-height, no
   position. The shell owns the block's margin (.gp-header-block).

   NO NAME IS DECLARED ON BOTH SIDES. This file declares .gp-header*,
   .gp-view-*, .gp-margin-*, .gp-data-indicator, .gp-actual-tag,
   .gp-projected-tag, .gp-theme-toggle and .gp-nucare-*, plus the two names
   lifted off the template's inline style attributes (.gp-nucare-wrap,
   .gp-nucare-panel-title). Neither the shell nor a sibling child declares or
   wears one of them, so the head link's earlier position in document order
   changes no winner. The markup carries no shared .px-* class either, so the
   dependency theme the runtime appends after every head link has nothing in
   here to beat.

   NO DESIGNER GATE. .gp-nucare-panel { display: none } hides the rate popover
   until a click, on the canvas as at runtime. This leaf
   carries no live class of its own and needs none; the shell's three gated
   families (.gp-section-container, .gp-kpi-grid, .gp-loading-overlay) reach
   nothing in here.

   .gp-header-title AND .gp-header-subtitle ARE READ BY ANOTHER SUITE.
   tests/test_specials_analytics_screen_contract.py compares the Specials title
   sizes against these two by splitting this source on "<selector> {", so both
   base rules keep exactly one space before the brace and both stay ahead of
   their @media overrides in file order. */

.gp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--px-bg-card);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    border: 1px solid var(--px-border);
    box-shadow: var(--px-shadow);
}

:where(.gp-header) .gp-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--px-text-primary);
}

:where(.gp-header) .gp-header-subtitle {
    font-size: 0.75rem;
    color: var(--px-text-muted);
    margin-top: 2px;
}

:where(.gp-header) .gp-header-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* View Toggle */
:where(.gp-header) .gp-view-toggle {
    display: flex;
    background: var(--px-bg-elevated);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--px-border);
}

:where(.gp-header) .gp-view-btn {
    font-family: var(--px-font-display);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: var(--px-text-muted);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.gp-header) .gp-view-btn.active {
    background: var(--px-bg-card);
    color: var(--px-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

:where(.gp-header) .gp-view-btn:hover:not(.active) {
    color: var(--px-text-secondary);
}

/* Margin Input */
:where(.gp-header) .gp-margin-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(.gp-header) .gp-margin-label {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    white-space: nowrap;
}

:where(.gp-header) .gp-margin-input {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--px-border);
    border-radius: 6px;
    background: var(--px-bg-elevated);
    color: var(--px-text-primary);
    text-align: center;
}

:where(.gp-header) .gp-margin-input:focus {
    border-color: var(--px-chart-violet);
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 1px;
}

:where(.gp-header) .gp-margin-pct {
    font-size: 0.75rem;
    color: var(--px-text-muted);
}

:where(.gp-header) .gp-margin-apply {
    font-family: var(--px-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--px-chart-violet);
    color: var(--px-text-on-fill);
    transition: background-color 0.2s;
}

:where(.gp-header) .gp-margin-apply:hover { background: color-mix(in srgb, var(--px-chart-violet) 85%, var(--px-bg-card)); }

/* Data indicator */
:where(.gp-header) .gp-data-indicator {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    padding: 4px 10px;
    background: var(--px-bg-elevated);
    border-radius: 6px;
    border: 1px solid var(--px-border);
}

:where(.gp-header) .gp-data-indicator .gp-actual-tag {
    color: color-mix(in srgb, var(--px-chart-emerald) 65%, var(--px-text-primary));
    font-weight: 600;
}

:where(.gp-header) .gp-data-indicator .gp-projected-tag {
    color: color-mix(in srgb, var(--px-chart-amber) 65%, var(--px-text-primary));
    font-weight: 600;
}

/* Theme toggle */
:where(.gp-header) .gp-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--px-border);
    background: var(--px-bg-elevated);
    color: var(--px-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

:where(.gp-header) .gp-theme-toggle:hover {
    border-color: var(--px-chart-cyan);
    color: color-mix(in srgb, var(--px-chart-cyan) 65%, var(--px-text-primary));
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .gp-header { padding: 0.75rem 1rem; gap: 0.75rem; }
    :where(.gp-header) .gp-header-title { font-size: 1.05rem; }
    :where(.gp-header) .gp-header-controls { gap: 0.75rem; }
    :where(.gp-header) .gp-margin-group { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .gp-header { flex-direction: column; align-items: flex-start; }
    :where(.gp-header) .gp-header-title { font-size: 0.95rem; }
    :where(.gp-header) .gp-header-controls { width: 100%; justify-content: space-between; }
    :where(.gp-header) .gp-data-indicator { font-size: 0.6rem; }
    :where(.gp-header) .gp-view-btn { font-size: 0.65rem; padding: 5px 10px; }
    :where(.gp-header) .gp-margin-label { font-size: 0.6rem; }
}

/* NuCare rates panel */

/* Lifted off the wrapper div's style="position:relative;". It is what the
   absolutely positioned .gp-nucare-panel below anchors to, so the class and the
   panel must stay on the same two nodes. */
:where(.gp-header) .gp-nucare-wrap {
    position: relative;
}

:where(.gp-header) .gp-nucare-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--px-border);
    background: var(--px-bg-elevated);
    color: color-mix(in srgb, var(--px-chart-amber) 65%, var(--px-text-primary));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

:where(.gp-header) .gp-nucare-toggle-btn:hover {
    border-color: var(--px-chart-amber);
    transform: scale(1.05);
}

:where(.gp-header) .gp-nucare-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 260px;
}

:where(.gp-header) .gp-nucare-panel.open { display: block; }

/* Lifted off the panel heading's inline style attribute. */
:where(.gp-header) .gp-nucare-panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--px-text-primary);
    margin-bottom: 0.75rem;
}

:where(.gp-header) .gp-nucare-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

:where(.gp-header) .gp-nucare-rate-label {
    font-size: 0.7rem;
    color: var(--px-text-muted);
    white-space: nowrap;
}

:where(.gp-header) .gp-nucare-rate-input {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    width: 70px;
    padding: 3px 6px;
    border: 1px solid var(--px-border);
    border-radius: 6px;
    background: var(--px-bg-elevated);
    color: var(--px-text-primary);
    text-align: center;
}

:where(.gp-header) .gp-nucare-rate-input:focus {
    border-color: var(--px-chart-amber);
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 1px;
}

:where(.gp-header) .gp-nucare-apply {
    font-family: var(--px-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--px-chart-amber);
    color: var(--px-ink-on-bright);
    transition: background-color 0.2s;
    width: 100%;
}

:where(.gp-header) .gp-nucare-apply:hover { background: color-mix(in srgb, var(--px-chart-amber) 85%, var(--px-bg-card)); }

:where(.gp-header) :is(.gp-view-btn, .gp-margin-apply, .gp-theme-toggle, .gp-nucare-toggle-btn, .gp-nucare-apply):focus-visible {
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 2px;
}