/* Monitoring layout only. KASA/Bootstrap own cards, buttons, controls and badges. */
.kasa-monitoring [hidden]{display:none!important}
.kasa-monitoring,.kasa-monitoring section,.kasa-monitoring .card{min-width:0}
.kasa-monitoring .mon-heading{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.kasa-monitoring .mon-heading p{max-width:42rem;margin:0}
.kasa-monitoring .mon-heading>div{flex-wrap:wrap}
.kasa-monitoring .mon-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.kasa-monitoring .mon-toolbar{display:flex;gap:1rem;flex-wrap:wrap;width:100%;align-items:flex-end}
.kasa-monitoring .mon-toolbar label{flex:1;min-width:150px;margin:0;display:flex;align-items:center;gap:.5rem}
.kasa-monitoring .mon-toolbar label > span{flex:0 0 auto;white-space:nowrap;color:var(--kasa-ink-dim,#66788b);font-size:.8rem}
.kasa-monitoring .mon-toolbar input,.kasa-monitoring .mon-toolbar select{margin-top:0;min-height:36px;height:36px;padding:.25rem .6rem;font-size:.85rem;flex:1;min-width:0}
.kasa-monitoring .card-header{display:block}
.kasa-monitoring .card-header h3{margin-bottom:.35rem}
.kasa-monitoring #svc-tbody td{padding:.45rem .75rem}
.kasa-monitoring #svc-tbody .mon-service{min-height:0;line-height:1.25;font-size:.9rem}
.kasa-monitoring #svc-tbody .mon-service small{font-size:.72rem}
.kasa-monitoring .mon-service{text-align:left;min-height:44px;white-space:normal;overflow-wrap:anywhere}
.kasa-monitoring .mon-service small{display:block;color:var(--kasa-ink-dim)}
.kasa-monitoring .mon-selected{background:var(--kasa-accent-soft)}
.kasa-monitoring :is(button,input,select,a,summary,[tabindex]):focus-visible{outline:2px solid var(--kasa-accent);outline-offset:2px}
.kasa-monitoring .mon-facts,.kasa-monitoring .mon-history-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.kasa-monitoring .mon-facts>div,.kasa-monitoring .mon-history-stats>div{flex:1;min-width:120px}
.kasa-monitoring .mon-history-stats strong{display:block;font:600 1.3rem var(--kasa-font-display)}
.kasa-monitoring .mon-series{width:100%;height:140px}
.kasa-monitoring .mon-series path{fill:none;stroke:var(--kasa-accent);stroke-width:2}
.kasa-monitoring .mon-series circle{fill:var(--kasa-accent)}
.kasa-monitoring .mon-history-table{max-height:280px;overflow:auto}
.kasa-monitoring .table th{white-space:nowrap}
.kasa-monitoring #mon-identity,.kasa-monitoring #mon-incidents-list,.kasa-monitoring #mon-detail-title{overflow-wrap:anywhere}
.kasa-monitoring #mon-interval{max-width:20rem;margin:.5rem 0}
.kasa-monitoring #mon-range{max-width:14rem}
.kasa-monitoring summary{cursor:pointer;min-height:44px;padding:.75rem 0;font-weight:600}
@media(max-width:991px){.kasa-monitoring .mon-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:575px){.kasa-monitoring .mon-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.kasa-monitoring .mon-toolbar{display:block}.kasa-monitoring .mon-toolbar label{display:block;margin-bottom:1rem}.kasa-monitoring .btn{min-height:44px}.kasa-monitoring .table td{min-width:100px}}
/* ---- #148: daftar "Perlu perhatian" — kartu mini per layanan ---- */
.kasa-monitoring .mon-problem-list{display:flex;flex-direction:column;gap:.4rem}
/* #258 sisa F2 @320: baris ini flex row TANPA flex-wrap. Anak keduanya
   `<div class="text-nowrap">` yang memuat DUA badge (status + "Data lama");
   `text-nowrap` melarang badge turun baris, dan tanpa `flex-wrap` di induknya
   baris itu tidak bisa turun baris sama sekali — jadi lebar minimum baris =
   dot + nama layanan + dua badge, dan dokumen melebar 17px di 320px.
   Perbaikan F2 (clip tooltip `.kasa-help`) sudah menutup 7 dari 8 viewport;
   sisa 17px ini penyebabnya berbeda dan bukan tooltip. Membungkus baris, BUKAN
   memperkecil badge (badge sudah 12px = lantai #257 §4.9) dan bukan memotong
   teks status. */
.kasa-monitoring .mon-problem-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.3rem .7rem;border:1px solid var(--kasa-line,#dbe5ef);border-radius:9px;background:var(--kasa-panel-solid,#fff);transition:border-color .12s,box-shadow .12s}
.kasa-monitoring .mon-problem-row:hover{border-color:var(--kasa-accent);box-shadow:0 2px 10px rgba(49,83,117,.08)}
.kasa-monitoring .mon-problem-row .mon-service{font-weight:600}
.kasa-monitoring .mon-problem-row .mon-service:hover{text-decoration:underline}
.kasa-monitoring .mon-dot{flex:0 0 auto;width:.65rem;height:.65rem;border-radius:50%;background:var(--kasa-dot-info,var(--kasa-ink-dim,#66788b))}
.kasa-monitoring .mon-dot-up{background:var(--kasa-dot-up)}
.kasa-monitoring .mon-dot-degraded{background:var(--kasa-dot-degraded)}
.kasa-monitoring .mon-dot-down{background:var(--kasa-dot-down)}
.kasa-monitoring .mon-dot-unknown{background:var(--kasa-dot-unknown)}
.kasa-monitoring .mon-dot-info{background:var(--kasa-dot-info)}
.kasa-monitoring .mon-dot-critical{background:var(--kasa-dot-critical)}
/* dot vertikal center pada kartu insiden (align-start row) */
.kasa-monitoring .mon-incident-card .mon-dot{align-self:center}
html.kasa-dark-pending .kasa-monitoring .mon-problem-row{background:#161c24;border-color:#2a3442}
html.kasa-dark-pending .kasa-monitoring .mon-problem-row:hover{border-color:#e8a04a;box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* dark: via token --kasa-dot-* (SSOT di kasa-overrides) */
.kasa-monitoring .mon-problem-row .mon-service{min-height:0;line-height:1.3;font-size:.9rem}
.kasa-monitoring .mon-problem-row .small{margin-top:.05rem;line-height:1.3;font-size:.78rem}

/* ---- #148: footer tabel compact ---- */
.kasa-monitoring .card-footer{padding:.5rem .75rem}

/* ---- #148: detail layanan — layout rapi & compact ---- */
.kasa-monitoring #mon-detail .card-body > .d-flex:first-child { margin-top: .25rem; }
.kasa-monitoring #mon-detail-title { font-size: 1.05rem; }
.kasa-monitoring #mon-identity { background: var(--kasa-accent-soft, #e6f0fb); color: var(--kasa-accent-strong, #28558f); padding: .15rem .5rem; border-radius: 6px; }
.kasa-monitoring .mon-facts-compact { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.kasa-monitoring .mon-facts-compact > div { flex: 1 1 150px; min-width: 0; margin: 0; padding: .5rem .7rem; border: 1px solid var(--kasa-line, #dbe5ef); border-radius: 9px; background: var(--kasa-paper, #f5f8fc); }
.kasa-monitoring .mon-facts-compact dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kasa-ink-dim, #66788b); margin-bottom: .15rem; }
.kasa-monitoring .mon-facts-compact dd { margin: 0; font-weight: 600; }
.kasa-monitoring .mon-section { border: 1px solid var(--kasa-line, #dbe5ef); border-radius: 9px; margin-bottom: .6rem; background: var(--kasa-panel-solid, #fff); }
.kasa-monitoring .mon-section > summary { padding: .55rem .8rem; min-height: 0; font-weight: 600; list-style: none; }
.kasa-monitoring .mon-section > summary::-webkit-details-marker { display: none; }
.kasa-monitoring .mon-section > summary::before { content: "▸"; display: inline-block; margin-right: .45rem; color: var(--kasa-ink-dim, #66788b); transition: transform .12s; }
.kasa-monitoring .mon-section[open] > summary::before { transform: rotate(90deg); }
.kasa-monitoring .mon-section > *:not(summary) { padding-left: .8rem; padding-right: .8rem; }
.kasa-monitoring .mon-section > summary + * { padding-top: .1rem; }
.kasa-monitoring .mon-section > :last-child { padding-bottom: .7rem; }
.kasa-monitoring .mon-controls-stack { display: flex; flex-direction: column; gap: .55rem; border: 0; padding: 0; margin: 0; }
.kasa-monitoring .mon-controls-stack .mon-interval-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kasa-monitoring .mon-controls-stack .mon-interval-row label > span { font-size: .8rem; color: var(--kasa-ink-dim, #66788b); }
.kasa-monitoring .mon-history-empty { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1.1rem .75rem; margin: 0; border: 1px dashed var(--kasa-line, #dbe5ef); border-radius: 9px; color: var(--kasa-ink-dim, #66788b); font-size: .85rem; }
.kasa-monitoring .mon-history-empty i { font-size: 1.1rem; }
.kasa-monitoring .mon-inline-check { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; }
.kasa-monitoring #mon-history-section > summary::before { content: "▸"; }
html.kasa-dark-pending .kasa-monitoring #mon-identity { background: rgba(232,160,74,.12); color: #f0b268; }
html.kasa-dark-pending .kasa-monitoring .mon-facts-compact > div { background: #1b2230; border-color: #2a3442; }
html.kasa-dark-pending .kasa-monitoring .mon-section { background: #161c24; border-color: #2a3442; }

/* ---- #148: daftar insiden — kartu rapi dgn dot severity ---- */
.kasa-monitoring #mon-incidents-list { display: flex; flex-direction: column; gap: .5rem; }
.kasa-monitoring .mon-incident-card { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .8rem; border: 1px solid var(--kasa-line, #dbe5ef); border-radius: 9px; background: var(--kasa-panel-solid, #fff); }
.kasa-monitoring .mon-incident-card .min-w-0 { min-width: 0; }
.kasa-monitoring .mon-incident-title { font-size: .95rem; }
.kasa-monitoring .mon-incident-card p { font-size: .85rem; }
.kasa-monitoring .mon-feed-note { font-size: .78rem; color: var(--kasa-warn, #936422); background: #fbeedd; border: 1px solid #f0d9b0; border-radius: 8px; padding: .4rem .7rem; margin: 0 0 .5rem; }
html.kasa-dark-pending .kasa-monitoring .mon-incident-card { background: #161c24; border-color: #2a3442; }
html.kasa-dark-pending .kasa-monitoring .mon-feed-note { background: rgba(232,160,74,.1); border-color: rgba(232,160,74,.25); color: #f0b268; }

/* tombol reset insiden: inline kanan toolbar (bukan baris baru mt-3) */
.kasa-monitoring .card-header .btn#mon-all-services { margin-top: 0; align-self: center; }