/*
 IPA R164 + MOL Baseline R2 — Header Interior Polish R1
 Presentation only. All outer header width/height/geometry remains under R75/R30.
 Do not move header DOM controls or change IDs, events, data sources or panel logic.
*/
:root{
  --ipa-hp-line:rgba(190,214,242,.25);
  --ipa-hp-frost:rgba(7,25,47,.37);
  --ipa-hp-frost-soft:rgba(10,29,52,.24);
  --ipa-hp-ring:rgba(118,192,255,.78);
}

/* Do not modify .ipa-premium-header-r30 sizing, positioning or clipping. */
html body .ipa-premium-header-r30 .ipa-r30-copy-zone :is(h1,h2,h3),
html body .ipa-premium-header-r30 :is(.ipa-maintenance-copy-text,.ipa-kpi-clone-left,.prod-title,.dc-title,.tyre-title) :is(h1,h2,h3){
  text-wrap:balance;
  letter-spacing:-.025em!important;
}
html body .ipa-premium-header-r30 .ipa-r30-copy-zone p,
html body .ipa-premium-header-r30 :is(.ipa-maintenance-copy-text,.ipa-kpi-clone-left,.prod-title,.dc-title,.tyre-title) p{
  text-wrap:pretty;
}

/* Control language shared across all R164 premium headers. */
html body .ipa-premium-header-r30 :is(select,button,input:not([type=checkbox]):not([type=radio])){
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
}
html body .ipa-premium-header-r30 :is(select,button,input):focus-visible{
  outline:2px solid var(--ipa-hp-ring)!important;
  outline-offset:2px!important;
}
html body .ipa-premium-header-r30 :is(.ipa-owner-report-badge,.ipa-unitclass-report-badge,.ipa-maint-report-badge){
  border-radius:10px!important;
  box-shadow:0 2px 7px rgba(1,10,25,.10)!important;
  vertical-align:middle!important;
  align-items:center!important;
}
html body .ipa-premium-header-r30 :is(.ipa-owner-report-badge,.ipa-unitclass-report-badge,.ipa-maint-report-badge) :is(select,button){
  border-radius:8px!important;
  text-overflow:ellipsis!important;
}
html body .ipa-premium-header-r30 .ipa-r30-action-zone :is(button,a){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  box-shadow:0 3px 9px rgba(2,14,33,.16)!important;
}
html body .ipa-premium-header-r30 .ipa-r30-action-zone :is(button,a):hover{
  box-shadow:0 4px 12px rgba(2,14,33,.24)!important;
}

/* Align the existing bottom filter/action lanes. Their coordinates and widths
   are managed by R75. A subtle glass rail visually connects them to the hero. */
@media(min-width:901px){
  html body .ipa-premium-header-r30 :is(.ipa-r30-filter-zone,.ipa-r30-action-zone){
    align-items:center!important;
    column-gap:7px!important;
    row-gap:0!important;
    padding:3px 5px!important;
    border:1px solid var(--ipa-hp-line)!important;
    border-radius:12px!important;
    background:var(--ipa-hp-frost)!important;
    box-shadow:0 4px 14px rgba(2,12,31,.15)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    box-sizing:border-box!important;
  }
  /* The KPI cloned panels' scope lane is inside their copy zone. Anchor it to
     the bottom without changing the hero/copy geometry or duplicating filters. */
  html body .ipa-premium-header-r30:is(.ipa-r30-reliability,.ipa-r30-asset,.ipa-r30-executive)
  .ipa-kpi-clone-left > .ipa-kpi-clone-scope{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    top:auto!important;
    margin:0!important;
    padding:3px 5px!important;
    max-width:calc(100% - 12px)!important;
    border-radius:11px!important;
    border:1px solid var(--ipa-hp-line)!important;
    background:var(--ipa-hp-frost)!important;
    box-shadow:0 3px 11px rgba(2,12,31,.12)!important;
    align-items:center!important;
    gap:7px!important;
  }
  /* Maintain a single visually coherent row even if a late source injects
     an additional maintenance responsibility badge. */
  html body .ipa-premium-header-r30 :is(.ipa-kpi-clone-scope,.ipa-restored-scope-row){
    align-items:center!important;
    column-gap:7px!important;
    flex-wrap:nowrap!important;
  }
  /* Logistics, Component, Manpower: align bottom-right actions while keeping
     title/subtitle clear. R75 remains the geometry owner. */
  html body .ipa-premium-header-r30:is(.ipa-r30-logistics,.ipa-r30-component,.ipa-r30-manpower)
  .ipa-r30-action-zone{gap:7px!important}
  html body .ipa-premium-header-r30.ipa-r30-logistics .ipa-r30-action-zone > button{
    padding-inline:14px!important;
  }
  /* Dynamic scope controls in the simple panels keep a single visual unit. */
  html body .ipa-premium-header-r30:is(.ipa-r30-logistics,.ipa-r30-component,.ipa-r30-manpower)
  .ipa-restored-scope-row{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:3px 5px!important;
    border-radius:12px!important;
    background:var(--ipa-hp-frost-soft)!important;
    border:1px solid var(--ipa-hp-line)!important;
  }
  /* KPI/Forecast/Handover: preserve their existing lane position, improve
     control legibility and button grouping only. */
  html body .ipa-premium-header-r30:is(.ipa-r30-kpi,.ipa-r30-forecast,.ipa-r30-handover)
  .ipa-r30-action-zone{gap:6px!important}
  /* Maintenance Planning: keep status/meta in upper-right, filters bottom. */
  html body #maintenance-planning-header.ipa-premium-header-r30 .ipa-maintenance-meta{
    column-gap:6px!important;
    align-items:center!important;
  }
  html body #maintenance-planning-header.ipa-premium-header-r30 .maintenance-toolbar{
    border:1px solid var(--ipa-hp-line)!important;
    box-shadow:0 4px 16px rgba(2,12,31,.16)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  /* Tyre Management already owns a 4-column grid. Keep it intact. */
  html body #tyre-management-page .tyre-head.ipa-premium-header-r30 .tyre-filter{
    border-color:var(--ipa-hp-line)!important;
    box-shadow:0 3px 10px rgba(2,12,31,.14)!important;
  }
}

/* Night mode: a unified discreet dark rail behind the controls. */
html.dark body .ipa-premium-header-r30 :is(.ipa-r30-filter-zone,.ipa-r30-action-zone,.ipa-kpi-clone-scope){
  --ipa-hp-frost:rgba(4,17,35,.58);
  --ipa-hp-line:rgba(142,180,217,.30);
}
html.dark body .ipa-premium-header-r30 :is(select,input:not([type=checkbox]):not([type=radio])){
  border-color:rgba(126,166,205,.45)!important;
}

/* For narrow screens retain R75's fluid header geometry and natural wrapping.
   No fixed width/height is introduced on any header. */
@media(max-width:900px){
}
@media(prefers-reduced-motion:reduce){
  html body .ipa-premium-header-r30 :is(select,button,input){transition:none!important}
}


/* ================================================================
   IPA R164 + MOL Baseline R2 | CORPORATE HEADER R2
   Logistic-inspired connected glass filter language. Visual layer.
   Background assets, positioning/geometry, component IDs and logic
   are NOT changed. R30/R75 remain sole geometry authorities.
   ================================================================ */
:root{
  --ipa-h2-control-radius:12px;
  --ipa-h2-line:rgba(219,231,246,.32);
  --ipa-h2-glass:rgba(5,23,43,.42);
  --ipa-h2-glass-soft:rgba(7,32,55,.34);
  --ipa-h2-control:rgba(10,36,61,.68);
  --ipa-h2-fg:#f5f9ff;
  --ipa-h2-sub:#c8d9ea;
  --ipa-h2-accent:rgba(96,165,250,.58);
}

/* Blend the EXISTING hero photograph with its controls; no replacement
   image, geometry, masks, or interactive overlay. R30 already owns :after. */
html body .ipa-premium-header-r30:after{
  background:linear-gradient(90deg,
    rgba(243,249,255,.56) 0%,
    rgba(240,247,255,.36) 38%,
    rgba(8,32,59,.05) 75%,
    rgba(4,20,40,.13) 100%)!important;
}
html.dark body .ipa-premium-header-r30:after{
  background:linear-gradient(90deg,
    rgba(3,18,38,.58) 0%,
    rgba(5,24,46,.38) 38%,
    rgba(5,21,42,.06) 76%,
    rgba(3,15,31,.20) 100%)!important;
}

/* A shared glass visual language, not a global layout rewrite. */
html body .ipa-premium-header-r30{
  --ipa-h2-glass:rgba(245,250,255,.36);
  --ipa-h2-glass-soft:rgba(250,253,255,.26);
  --ipa-h2-control:rgba(247,251,255,.83);
  --ipa-h2-fg:#16334e;
  --ipa-h2-sub:#526e87;
  --ipa-h2-line:rgba(142,171,201,.44);
}
html.dark body .ipa-premium-header-r30{
  --ipa-h2-glass:rgba(5,23,43,.42);
  --ipa-h2-glass-soft:rgba(7,32,55,.34);
  --ipa-h2-control:rgba(9,33,56,.75);
  --ipa-h2-fg:#f5f9ff;
  --ipa-h2-sub:#c8d9ea;
  --ipa-h2-line:rgba(177,210,239,.28);
}

/* Individual filters are compact rounded glass pills. Keep existing
   height and width decisions from R30/R75; only tint and typography. */
html body .ipa-premium-header-r30 :is(
  .ipa-owner-report-badge,.ipa-unitclass-report-badge,.ipa-maint-report-badge,
  .tyre-filter,.ipa-restored-scope-row > label
){
  border:1px solid var(--ipa-h2-line)!important;
  border-radius:var(--ipa-h2-control-radius)!important;
  background:var(--ipa-h2-glass-soft)!important;
  color:var(--ipa-h2-fg)!important;
  box-shadow:0 3px 10px rgba(4,16,31,.10)!important;
  -webkit-backdrop-filter:blur(11px)!important;
  backdrop-filter:blur(11px)!important;
}
html body .ipa-premium-header-r30 :is(
  select, input:not([type=checkbox]):not([type=radio])
){
  border:1px solid var(--ipa-h2-line)!important;
  border-radius:var(--ipa-h2-control-radius)!important;
  background:var(--ipa-h2-control)!important;
  color:var(--ipa-h2-fg)!important;
  font-weight:800!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(11px)!important;
  backdrop-filter:blur(11px)!important;
}
html body .ipa-premium-header-r30 :is(select, input)::placeholder{
  color:var(--ipa-h2-sub)!important;
}
html body .ipa-premium-header-r30 select option{
  background:#eaf3fb;
  color:#17344f;
}
html.dark body .ipa-premium-header-r30 select option{
  background:#10283f;
  color:#f5faff;
}
html body .ipa-premium-header-r30 :is(
  .ipa-owner-report-badge,.ipa-unitclass-report-badge,.ipa-maint-report-badge,
  .ipa-restored-scope-row, .ipa-kpi-clone-scope
) :is(i,svg){opacity:.93}
html body .ipa-premium-header-r30 :is(
  select,input:not([type=checkbox]):not([type=radio]),button
):focus-visible{
  outline:2px solid #74b8f6!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(46,140,224,.15)!important;
}
html body .ipa-premium-header-r30 select:hover{
  border-color:var(--ipa-h2-accent)!important;
}

/* Header filter and action lanes are a translucent continuation of the
   photograph. No change to left/right/top/bottom/width/height. */
@media (min-width:901px){
  html body .ipa-premium-header-r30 :is(
    .ipa-r30-filter-zone,.ipa-r30-action-zone,.ipa-kpi-clone-scope
  ){
    background:var(--ipa-h2-glass)!important;
    border:1px solid var(--ipa-h2-line)!important;
    border-radius:14px!important;
    box-shadow:0 5px 16px rgba(2,12,27,.13), inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(12px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
  }
  html body .ipa-premium-header-r30 .ipa-restored-scope-row{
    background:var(--ipa-h2-glass-soft)!important;
    border-color:var(--ipa-h2-line)!important;
    border-radius:14px!important;
  }
}

/* A restrained secondary-button treatment; retain the underlying action
   classes, click listeners and exact text. */
html body .ipa-premium-header-r30 .ipa-r30-action-zone :is(button,a){
  border-radius:var(--ipa-h2-control-radius)!important;
  border:1px solid var(--ipa-h2-line)!important;
  box-shadow:0 4px 12px rgba(4,16,35,.15)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
html body .ipa-premium-header-r30 .ipa-r30-action-zone :is(button,a):hover{
  border-color:rgba(113,187,250,.67)!important;
  box-shadow:0 5px 14px rgba(4,16,35,.20)!important;
}
/* Keep Live present as a compact, quiet element rather than a primary CTA. */
html body .ipa-premium-header-r30 :is(.ipa-r30-live,.ipa-canonical-live-r55){
  border-radius:999px!important;
  -webkit-backdrop-filter:blur(11px)!important;
  backdrop-filter:blur(11px)!important;
}

/* Important exceptions: preserve specialized internal arrangements. */
html body #maintenance-planning-header.ipa-premium-header-r30 .maintenance-toolbar{
  border-color:var(--ipa-h2-line)!important;
  border-radius:13px!important;
  background:var(--ipa-h2-glass)!important;
  box-shadow:0 5px 16px rgba(2,12,27,.14)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}
html body #tyre-management-page .tyre-head.ipa-premium-header-r30 .tyre-filter{
  border-radius:var(--ipa-h2-control-radius)!important;
}

/* Maintenance toolbar spans almost the entire hero in canonical R75.
   Avoid painting a long empty glass bar: only the actual filter group
   receives the glass treatment. Preserve the toolbar's full hit area. */
@media(min-width:901px){
  html body #maintenance-planning-header.ipa-premium-header-r30 .maintenance-toolbar,
  html.dark body #maintenance-planning-header.ipa-premium-header-r30 .maintenance-toolbar{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body #maintenance-planning-header.ipa-premium-header-r30 .maintenance-toolbar .ipa-restored-scope-row{
    background:var(--ipa-h2-glass)!important;
    border:1px solid var(--ipa-h2-line)!important;
    border-radius:13px!important;
    padding:2px 3px!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
}

/* Maintenance ownership badge originally has no physical border; use an
   inset outline so introducing the glass style does not add 2px to any
   mobile header row. */
html body .ipa-premium-header-r30 .ipa-restored-scope-row > .ipa-maint-report-badge,
html body .ipa-premium-header-r30 .ipa-r30-filter-zone .ipa-maint-report-badge{
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--ipa-h2-line),0 3px 10px rgba(4,16,31,.10)!important;
}

/* Narrow screens: appearance only. Let existing R75 responsive sizing and
   wrapping stay authoritative so header height/width remain unchanged. */
@media(max-width:900px){
  html body .ipa-premium-header-r30 :is(
    .ipa-r30-filter-zone,.ipa-r30-action-zone,.ipa-restored-scope-row,
    .maintenance-toolbar,.ipa-kpi-clone-scope
  ){
    border-radius:12px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body .ipa-premium-header-r30 :is(select,input,button){transition:none!important}
}