/* ===== owings_html (HTML form, scoped) =====
   The Owings dashboard shell's styling. Loaded eagerly from
   anvil.yaml native_deps.head_html, which is what styles the designer canvas
   as well as the running app.

   THIS FILE SORTS LAST AMONG THE OWINGS LINKS (every ow_*.css sorts before
   owings.css), so the shell's rules come last in document order.

   NO SUCH TIE EXISTS TODAY, and that was checked rather than assumed. This
   file declares .ow-shell, .ow-charts-grid, .ow-kpi-tip, .ow-kpi-tooltip and
   the four names lifted off the template's inline style attributes
   (.ow-header-block, .ow-page-title, .ow-page-subtitle, .ow-panel-host). The
   seven child assets declare .ow-filters-*, .ow-date-*, .ow-chart-*,
   .ow-reasons-*, .ow-others-*, .ow-items-*, .ow-bd-* and .ow-id-*. No name is
   declared on both sides, so no child rule changes which declaration wins.

   ROOT RULE, BARE CLASS, ON ITS OWN LINE, so it outranks the :where()-scoped
   rules below and so the dark restatement stays readable as
   [data-theme="dark"] .ow-shell {.

   THE ROOT RULE DROPS overflow: auto AND GAINS flex: 1 0 auto. The root is a
   flex item inside the shared layout's scroller, .px-nav-content, which owns
   the vertical scroll; overflow on the root would stop the port scrolling.
   overflow: auto was inert vertically here (a minimum and no maximum, so the
   box never scrolled) but it did clip horizontal overflow: if a child overflows
   horizontally, the fix is overflow-x: clip on that child, never on this root.

   min-height: 100vh IS KEPT BYTE FOR BYTE. The port is the layout's
   --px-nav-content-height, so the screen overflows it by the layout's own
   padding, exactly as it does today, and below 980px by the top bar as well.
   Changing that is a visible change and is the owner's call, so it is
   recorded as a deviation rather than taken here.

   NO DESIGNER GATE IS NEEDED. The only rule that hides content until the
   JavaScript runs is .px-section-reveal { opacity: 0 }, and that lives in the
   dependency chrome CSS, which ensure_theme_injected() appends to the head at
   runtime and which is therefore absent from the designer canvas. Nothing in
   this file hides anything.

   @keyframes owTipIn STAYS VERBATIM AND UNSCOPED. Keyframes are global and the
   name is already ow-prefixed, so there is nothing to rename. pxSpin, used by
   the two panel spinners, is the dependency's shared keyframe and is not
   touched here either. */

/* =============================================
   OWINGS DASHBOARD - ACCENT & LAYOUT
   ============================================= */
.ow-shell {
    --accent: #ea580c;
    --accent-hover: #c2410c;
    --accent-subtle: rgba(234, 88, 12, 0.10);
    --accent-text: #0f172a;
    --accent-rgb: 234, 88, 12;
    --px-loading-accent: #ea580c;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1 0 auto;
    padding: 20px;
    gap: 18px;
    position: relative;
    background-color: #f1f5f9;
    background-image:
      radial-gradient(circle at top left, rgba(234, 88, 12, 0.10), transparent 40%),
      linear-gradient(180deg, #fff7ed 0%, #f1f5f9 100%);
}

/* Screen only, so a dark page prints with the light values above. */
@media not print {
  [data-theme="dark"] .ow-shell {
    --accent: #f97316;
    --accent-hover: #fb923c;
    --accent-subtle: rgba(249, 115, 22, 0.14);
    --accent-text: #0f172a;
    --accent-rgb: 249, 115, 22;
    --px-loading-accent: #f97316;
    background-color: #0f172a;
    background-image:
      radial-gradient(circle at top left, rgba(249, 115, 22, 0.18), transparent 28%),
      linear-gradient(180deg, #431407 0%, #0f172a 100%);
  }
}

/* =============================================
   HEADER BLOCK
   The three rules below carry the declarations that were inline style
   attributes on the template, which the new format forbids.
   ============================================= */
:where(.ow-shell) .ow-header-block {
    margin-bottom: -2px;
}

:where(.ow-shell) .ow-page-title {
    font-family: var(--px-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--px-text-primary);
    margin: 0;
}

:where(.ow-shell) .ow-page-subtitle {
    font-family: var(--px-font);
    font-size: 0.85rem;
    color: var(--px-text-muted);
    margin: 0;
}

/* The hidden host for the slide-panel child. It was style="display:none;" on
   the template; the panel form's DOM node is moved out of it into
   #ow-slide-panel-body as soon as it is added. */
:where(.ow-shell) .ow-panel-host {
    display: none;
}

/* =============================================
   CHARTS GRID
   ============================================= */
:where(.ow-shell) .ow-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 960px) {
    :where(.ow-shell) .ow-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* KPI tooltip popup */
:where(.ow-shell) .px-kpi-card.ow-kpi-tip {
    cursor: pointer;
    overflow: visible;
}

:where(.ow-shell) .ow-kpi-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--px-bg-card);
    color: var(--px-text-secondary);
    border: 1px solid var(--px-border-strong);
    border-radius: var(--px-radius);
    padding: 0.6rem 0.8rem;
    font-family: var(--px-font);
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 260px;
    width: max-content;
    box-shadow: var(--px-shadow-lg);
    z-index: 20;
    pointer-events: none;
    animation: owTipIn 0.15s ease;
}

:where(.ow-shell) .ow-kpi-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--px-border-strong);
}

@keyframes owTipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== The two slide-panel children's loading block =====
   ow_day_breakdown_html and ow_item_details_html carried these three rules
   apart under an ow-bd- and an ow-id- prefix. Declared once here, in the
   section asset both panel children already load beside.

   Scoped to the two private roots rather than .ow-shell: a panel child's node
   is moved out of its slot into #ow-slide-panel-body, and scoping to the two
   roots says exactly which forms these belong to.

   ORDER: this asset sorts LAST among the section's head_html links, so a bare
   .ow-bd-hidden / .ow-id-hidden in a per-form asset would tie with the
   display: flex below and lose on document order. Each per-form asset writes
   its hide compound against .ow-loading for that reason.

   pxSpin is the DEPENDENCY's global keyframe (_px_theme_css.py), not renamed
   and not copied. */

:where(.ow-breakdown-root, .ow-item-details-root) .ow-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
}

:where(.ow-breakdown-root, .ow-item-details-root) .ow-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--px-border);
    border-top-color: var(--accent, var(--px-info));
    border-radius: 50%;
    animation: pxSpin 0.8s linear infinite;
}

:where(.ow-breakdown-root, .ow-item-details-root) .ow-loading-text {
    font-family: var(--px-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--px-text-muted);
}