/* SIAPIYA_OPERATIONAL_MONITORING_WORKSPACE_V37042
   Operational & Monitoring Workspace UX Wave 1 — task-first operational lens.
   Routes: wali_kelas, pimpinan, refleksi, remedial, izin_murid, rekap. */

#mainContent[data-siapiya-operational-ux="1"]{
  --siapiya-operational-border:color-mix(in srgb,var(--bs-border-color) 90%,transparent);
  --siapiya-operational-radius:.86rem;
  --siapiya-operational-surface:color-mix(in srgb,var(--bs-tertiary-bg) 68%,var(--bs-body-bg));
  padding-bottom:5.5rem;
}

/* Operational lens: answer "what should I handle now?" before the rest of the page. */
#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.72rem 1rem;
  align-items:center;
  margin-bottom:.78rem;
  padding:.72rem .8rem;
  border:1px solid var(--siapiya-operational-border);
  border-inline-start:4px solid var(--bs-primary);
  border-radius:var(--siapiya-operational-radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--bs-primary-bg-subtle) 28%,var(--bs-body-bg)),var(--bs-body-bg));
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-copy{
  display:grid;
  gap:.14rem;
  min-width:0;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-copy b{
  font-size:.98rem;
  line-height:1.3;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-copy > span:last-child{
  color:var(--bs-secondary-color);
  font-size:.82rem;
  line-height:1.4;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-eyebrow{
  color:var(--bs-primary);
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-side{
  display:grid;
  justify-items:end;
  gap:.4rem;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-attention-count{
  min-height:1.9rem;
  display:inline-flex;
  align-items:center;
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps{
  display:flex;
  align-items:center;
  gap:.26rem;
  color:var(--bs-secondary-color);
  font-size:.72rem;
  white-space:nowrap;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps span{
  display:inline-flex;
  align-items:center;
  gap:.24rem;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps span:not(:last-child)::after{
  content:"›";
  margin-inline-start:.08rem;
  color:var(--bs-border-color);
  font-weight:800;
}

#mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.18rem;
  height:1.18rem;
  border-radius:999px;
  background:var(--bs-tertiary-bg);
  color:var(--bs-body-color);
  font-size:.64rem;
  font-style:normal;
  font-weight:800;
}

/* Existing warning/error cues become visually obvious operational priorities. */
#mainContent[data-siapiya-operational-ux="1"] .alert{
  border-color:var(--siapiya-operational-border);
  border-inline-start-width:4px;
  box-shadow:none;
}

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

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

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

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

/* Cards that contain current warning/danger badges read as attention surfaces. */
#mainContent[data-siapiya-operational-ux="1"] .card:has(.text-bg-danger,.bg-danger){
  border-color:color-mix(in srgb,var(--bs-danger) 38%,var(--siapiya-operational-border))!important;
}

#mainContent[data-siapiya-operational-ux="1"] .card:has(.text-bg-warning,.bg-warning){
  border-color:color-mix(in srgb,var(--bs-warning) 42%,var(--siapiya-operational-border))!important;
}

/* Operational tables/queues optimize scanning. */
#mainContent[data-siapiya-operational-ux="1"] .table-responsive{
  border-radius:var(--siapiya-operational-radius);
  border-color:var(--siapiya-operational-border)!important;
  overflow:auto;
  overscroll-behavior-inline:contain;
}

#mainContent[data-siapiya-operational-ux="1"] .table thead th{
  white-space:nowrap;
  font-size:.73rem;
  text-transform:uppercase;
  letter-spacing:.018em;
  vertical-align:middle;
}

#mainContent[data-siapiya-operational-ux="1"] .table tbody td{
  vertical-align:middle;
  line-height:1.35;
}

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

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

/* Filters first, utilities second. */
#mainContent[data-siapiya-operational-ux="1"] :is(.form-label,label.small){
  font-weight:650;
}

#mainContent[data-siapiya-operational-ux="1"] :is(.form-control,.form-select){
  min-height:2.62rem;
  border-radius:.68rem;
}

#mainContent[data-siapiya-operational-ux="1"] .badge{
  font-weight:700;
  letter-spacing:.004em;
}

/* Existing accordions/details remain secondary until opened. */
#mainContent[data-siapiya-operational-ux="1"] .accordion-button.collapsed{
  color:var(--bs-secondary-color);
  font-weight:600;
}

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

/* Empty/loading states read as intentional. */
#mainContent[data-siapiya-operational-ux="1"] .table td[colspan].text-center{
  min-height:4.5rem;
  padding:1rem .75rem!important;
  color:var(--bs-secondary-color);
  background:color-mix(in srgb,var(--bs-tertiary-bg) 50%,var(--bs-body-bg));
}

#mainContent[data-siapiya-operational-ux="1"] .table td[colspan].text-center:has(.spinner-border){
  border:1px dashed var(--siapiya-operational-border);
}

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

#mainContent[data-siapiya-operational-ux="1"] :is(.btn,button,summary){
  min-block-size:2.7rem;
}

/* Route-specific small refinements */
#mainContent[data-siapiya-ux-route="rekap"][data-siapiya-operational-ux="1"] .rekap-action-buttons{
  gap:.5rem!important;
}

#mainContent[data-siapiya-ux-route="izin_murid"][data-siapiya-operational-ux="1"] .badge,
#mainContent[data-siapiya-ux-route="refleksi"][data-siapiya-operational-ux="1"] .badge,
#mainContent[data-siapiya-ux-route="remedial"][data-siapiya-operational-ux="1"] .badge{
  font-variant-numeric:tabular-nums;
}

[data-bs-theme="dark"] #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens{
  background:linear-gradient(135deg,color-mix(in srgb,var(--bs-primary-bg-subtle) 18%,var(--bs-body-bg)),var(--bs-body-bg));
}

/* Mobile */
@media (max-width:767.98px){
  #mainContent[data-siapiya-operational-ux="1"]{
    padding-bottom:calc(5.9rem + env(safe-area-inset-bottom));
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens{
    grid-template-columns:1fr;
    padding:.65rem .68rem;
    margin-bottom:.62rem;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-side{
    justify-items:stretch;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-attention-count{
    justify-content:center;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps{
    overflow-x:auto;
    padding-bottom:.1rem;
    scrollbar-width:none;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps::-webkit-scrollbar{
    display:none;
  }

  #mainContent[data-siapiya-operational-ux="1"] :is(.form-control,.form-select,.btn,button){
    min-height:2.8rem;
  }

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

  #mainContent[data-siapiya-operational-ux="1"] .table thead th{
    font-size:.68rem;
    padding:.52rem .5rem;
  }

  #mainContent[data-siapiya-operational-ux="1"] .table tbody td{
    padding:.5rem;
  }
}

@media (max-width:420px){
  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-copy b{
    font-size:.92rem;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-lens-copy > span:last-child{
    font-size:.78rem;
  }

  #mainContent[data-siapiya-operational-ux="1"] .siapiya-operational-steps{
    font-size:.68rem;
  }
}

@media (forced-colors:active){
  #mainContent[data-siapiya-operational-ux="1"] :is(
    .siapiya-operational-lens,.card,.alert,.table-responsive
  ){
    border-color:CanvasText!important;
  }

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

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