/* SIAPIYA_INTEGRATION_FINAL_RELIABILITY_POLISH_V37037
   Integration & Health Workspace UX Wave 4 — Final Reliability Polish.
   Visual/state consistency only. No RPC, handler, credential, or data-flow changes. */

#mainContent[data-siapiya-integration-ux="1"]{
  --siapiya-reliability-gap:.72rem;
  --siapiya-reliability-radius:.82rem;
  --siapiya-reliability-border:color-mix(in srgb,var(--bs-border-color) 88%,transparent);
}

/* Final density: keep operational pages scannable without flattening hierarchy. */
#mainContent[data-siapiya-integration-ux="1"] :is(
  .card-body,
  .siapiya-incident-body
){
  container-type:inline-size;
}

#mainContent[data-siapiya-integration-ux="1"] :is(
  .card,
  .alert,
  .table-responsive,
  .siapiya-health-brief-card,
  .siapiya-incident-card
){
  border-color:var(--siapiya-reliability-border)!important;
}

#mainContent[data-siapiya-integration-ux="1"] :is(
  .card-body > h5,
  .card-body > h6
){
  margin-bottom:.58rem;
}

/* Loading states: obvious but calm. */
#mainContent[data-siapiya-integration-ux="1"] :is(
  #coreHealthOverview,
  #coreSummaryCards,
  #hadiriyaOperationalReportCard,
  #hadiriyaDistributionCard
) :is(.spinner-border,.spinner-grow){
  vertical-align:-.125em;
}

#mainContent[data-siapiya-integration-ux="1"] :is(
  #coreHealthOverview,
  #coreSummaryCards
) > .text-center:has(.spinner-border),
#mainContent[data-siapiya-integration-ux="1"] .card-body > .text-center:has(.spinner-border){
  min-height:5.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:1px dashed var(--siapiya-reliability-border);
  border-radius:var(--siapiya-reliability-radius);
  background:color-mix(in srgb,var(--bs-tertiary-bg) 64%,var(--bs-body-bg));
}

/* Empty states in tables and cards should read as intentional, not broken. */
#mainContent[data-siapiya-integration-ux="1"] .table td[colspan].text-center.text-muted{
  min-height:4.5rem;
  padding:1.15rem .8rem!important;
  background:color-mix(in srgb,var(--bs-tertiary-bg) 50%,var(--bs-body-bg));
  font-size:.84rem;
}

#mainContent[data-siapiya-integration-ux="1"] .table td[colspan].text-center.text-muted::before{
  content:"\F431";
  font-family:"bootstrap-icons";
  display:block;
  margin-bottom:.28rem;
  font-size:1.05rem;
  opacity:.72;
}

/* Alerts: consistent hierarchy for error/warning/info/success. */
#mainContent[data-siapiya-integration-ux="1"] .alert{
  display:block;
  box-shadow:none;
}

#mainContent[data-siapiya-integration-ux="1"] .alert-danger{
  border-inline-start-color:var(--bs-danger)!important;
}

#mainContent[data-siapiya-integration-ux="1"] .alert-warning{
  border-inline-start-color:var(--bs-warning)!important;
}

#mainContent[data-siapiya-integration-ux="1"] .alert-success{
  border-inline-start-color:var(--bs-success)!important;
}

#mainContent[data-siapiya-integration-ux="1"] .alert-info{
  border-inline-start-color:var(--bs-info)!important;
}

/* Status badges use one compact visual rhythm. */
#mainContent[data-siapiya-integration-ux="1"] .badge{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.005em;
}

/* Primary action = one obvious next step; utilities remain quiet. */
#mainContent[data-siapiya-integration-ux="1"] :is(
  .siapiya-health-brief-action,
  .siapiya-recovery-action
) .btn{
  min-width:8.8rem;
  justify-content:center;
}

#mainContent[data-siapiya-integration-ux="1"] :is(
  .siapiya-health-brief-action,
  .siapiya-recovery-action
) .btn i{
  margin-inline-end:.28rem;
}

/* Health brief metadata: stronger label/value contrast. */
#mainContent[data-siapiya-integration-ux="1"] .siapiya-health-brief-meta > div{
  border-color:var(--siapiya-reliability-border);
}

#mainContent[data-siapiya-integration-ux="1"] .siapiya-health-brief-meta span{
  font-weight:650;
}

#mainContent[data-siapiya-integration-ux="1"] .siapiya-health-brief-meta b{
  line-height:1.35;
}

/* Incident timeline final polish. */
#mainContent[data-siapiya-integration-ux="1"] .siapiya-incident-copy{
  min-width:0;
}

#mainContent[data-siapiya-integration-ux="1"] .siapiya-incident-copy .text-muted{
  overflow-wrap:anywhere;
}

#mainContent[data-siapiya-integration-ux="1"] .siapiya-recovery-steps li::marker{
  font-weight:700;
}

#mainContent[data-siapiya-integration-ux="1"] .siapiya-known-good{
  border-color:color-mix(in srgb,var(--bs-success) 32%,var(--siapiya-reliability-border));
}

/* Tables: final scan/readability treatment. */
#mainContent[data-siapiya-integration-ux="1"] .table-responsive{
  scrollbar-gutter:stable;
}

#mainContent[data-siapiya-integration-ux="1"] .table tbody tr:hover > *{
  background:color-mix(in srgb,var(--bs-tertiary-bg) 68%,transparent);
}

#mainContent[data-siapiya-integration-ux="1"] .table tbody tr:focus-within > *{
  background:color-mix(in srgb,var(--bs-primary-bg-subtle) 38%,transparent);
}

/* Advanced/secondary configuration stays visibly secondary. */
#mainContent[data-siapiya-integration-ux="1"] .accordion-button.collapsed{
  color:var(--bs-secondary-color);
  font-weight:600;
}

#mainContent[data-siapiya-integration-ux="1"] .accordion-button:not(.collapsed){
  font-weight:700;
}

/* Final focus and disabled treatment. */
#mainContent[data-siapiya-integration-ux="1"] :is(
  button,
  .btn,
  a,
  summary,
  input,
  select,
  textarea,
  [role="tab"]
):focus-visible{
  outline:3px solid color-mix(in srgb,var(--bs-primary) 50%,transparent);
  outline-offset:3px;
  box-shadow:none!important;
}

#mainContent[data-siapiya-integration-ux="1"] :is(button,.btn):disabled{
  opacity:.62;
  cursor:not-allowed;
}

/* Integrasi API gets same error/loading/empty rhythm without rewriting its SPA. */
#mainContent[data-siapiya-ux-route="integrasi_api"] :is(
  .alert,
  .card,
  .table-responsive
){
  border-radius:var(--siapiya-reliability-radius);
}

#mainContent[data-siapiya-ux-route="integrasi_api"] .spinner-border{
  margin-inline-end:.35rem;
}

/* Mobile: reduce vertical travel but retain touch targets. */
@media (max-width:767.98px){
  #mainContent[data-siapiya-integration-ux="1"]{
    --siapiya-reliability-gap:.58rem;
    padding-bottom:calc(5.9rem + env(safe-area-inset-bottom));
  }

  #mainContent[data-siapiya-integration-ux="1"] :is(
    .siapiya-health-brief,
    .siapiya-incident-recovery,
    .alert
  ){
    margin-bottom:.62rem!important;
  }

  #mainContent[data-siapiya-integration-ux="1"] .card-body{
    padding:.76rem!important;
  }

  #mainContent[data-siapiya-integration-ux="1"] :is(
    .siapiya-health-brief-action,
    .siapiya-recovery-action
  ) .btn{
    width:100%;
    min-width:0;
    min-height:2.8rem;
  }

  #mainContent[data-siapiya-integration-ux="1"] .table{
    font-size:.84rem;
  }

  #mainContent[data-siapiya-integration-ux="1"] .table > :not(caption) > * > *{
    padding:.5rem .54rem;
  }

  #mainContent[data-siapiya-integration-ux="1"] .alert{
    padding:.68rem .74rem;
  }

  #mainContent[data-siapiya-integration-ux="1"] .badge{
    white-space:normal;
    text-align:left;
  }
}

@media (max-width:420px){
  #mainContent[data-siapiya-integration-ux="1"] .siapiya-health-brief-meta > div{
    grid-template-columns:6.35rem minmax(0,1fr);
  }

  #mainContent[data-siapiya-integration-ux="1"] .siapiya-incident-card > summary{
    padding:.62rem .7rem;
  }

  #mainContent[data-siapiya-integration-ux="1"] .siapiya-incident-body{
    padding:.7rem;
  }
}

/* High contrast and reduced motion close out reliability accessibility. */
@media (forced-colors:active){
  #mainContent[data-siapiya-integration-ux="1"] :is(
    .card,
    .alert,
    .table-responsive,
    .siapiya-health-brief-card,
    .siapiya-incident-card,
    .siapiya-known-good
  ){
    border-color:CanvasText!important;
  }

  #mainContent[data-siapiya-integration-ux="1"] :is(
    button,
    .btn,
    a,
    summary,
    input,
    select,
    textarea,
    [role="tab"]
  ):focus-visible{
    outline:3px solid Highlight;
  }
}

@media (prefers-reduced-motion:reduce){
  #mainContent[data-siapiya-integration-ux="1"] *,
  #mainContent[data-siapiya-integration-ux="1"] *::before,
  #mainContent[data-siapiya-integration-ux="1"] *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}